diff --git a/public/css/index.css b/public/css/index.css index eb8ee18..63fe0c2 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -350,6 +350,14 @@ ul { margin: 0; } +.activities-section .activity-block-header { + margin: 1rem 0 .5rem; + font-size: 2rem; + font-weight: 600; + + text-align: center; +} + .activities { display: flex; flex-direction: column; diff --git a/public/js/index.js b/public/js/index.js index aa086f7..c405af6 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -501,7 +501,7 @@ async function updatePresence(data) { }); const activityList = document.querySelector(".activities"); - const activitiesTitle = document.querySelector(".activity-header"); + const activitiesTitle = document.querySelector(".activity-block-header"); if (activityList && activitiesTitle) { if (filtered?.length) { diff --git a/public/js/rain.js b/public/js/rain.js index 27c0d8f..1e51d6e 100644 --- a/public/js/rain.js +++ b/public/js/rain.js @@ -25,24 +25,29 @@ const getRaindropColor = () => { const createRaindrop = () => { if (raindrops.length >= maxRaindrops) { - const oldestRaindrop = raindrops.shift(); - rainContainer.removeChild(oldestRaindrop); + const oldest = raindrops.shift(); + rainContainer.removeChild(oldest); } const raindrop = document.createElement("div"); raindrop.classList.add("raindrop"); raindrop.style.position = "absolute"; + const height = Math.random() * 10 + 10; raindrop.style.width = "2px"; - raindrop.style.height = `${Math.random() * 10 + 10}px`; + raindrop.style.height = `${height}px`; raindrop.style.background = getRaindropColor(); raindrop.style.borderRadius = "1px"; - raindrop.style.left = `${Math.random() * window.innerWidth}px`; - raindrop.style.top = `-${raindrop.style.height}`; raindrop.style.opacity = Math.random() * 0.5 + 0.3; + + raindrop.x = Math.random() * window.innerWidth; + raindrop.y = -height; raindrop.speed = Math.random() * 6 + 4; raindrop.directionX = (Math.random() - 0.5) * 0.2; raindrop.directionY = Math.random() * 0.5 + 0.8; + raindrop.style.left = `${raindrop.x}px`; + raindrop.style.top = `${raindrop.y}px`; + raindrops.push(raindrop); rainContainer.appendChild(raindrop); }; @@ -51,23 +56,29 @@ setInterval(createRaindrop, 50); function updateRaindrops() { raindrops.forEach((raindrop, index) => { - const rect = raindrop.getBoundingClientRect(); + const height = Number.parseFloat(raindrop.style.height); - raindrop.style.left = `${rect.left + raindrop.directionX * raindrop.speed}px`; - raindrop.style.top = `${rect.top + raindrop.directionY * raindrop.speed}px`; + raindrop.x += raindrop.directionX * raindrop.speed; + raindrop.y += raindrop.directionY * raindrop.speed; - if (rect.top + rect.height >= window.innerHeight) { + raindrop.style.left = `${raindrop.x}px`; + raindrop.style.top = `${raindrop.y}px`; + + if (raindrop.y > window.innerHeight) { rainContainer.removeChild(raindrop); raindrops.splice(index, 1); + return; } if ( - rect.left > window.innerWidth || - rect.top > window.innerHeight || - rect.left < 0 + raindrop.x > window.innerWidth || + raindrop.y > window.innerHeight || + raindrop.x < 0 ) { - raindrop.style.left = `${Math.random() * window.innerWidth}px`; - raindrop.style.top = `-${raindrop.style.height}`; + raindrop.x = Math.random() * window.innerWidth; + raindrop.y = -height; + raindrop.style.left = `${raindrop.x}px`; + raindrop.style.top = `${raindrop.y}px`; } }); diff --git a/public/js/snow.js b/public/js/snow.js index e1027fc..4d3e755 100644 --- a/public/js/snow.js +++ b/public/js/snow.js @@ -25,17 +25,22 @@ const createSnowflake = () => { const snowflake = document.createElement("div"); snowflake.classList.add("snowflake"); snowflake.style.position = "absolute"; - snowflake.style.width = `${Math.random() * 3 + 2}px`; - snowflake.style.height = snowflake.style.width; + const size = Math.random() * 3 + 2; + snowflake.style.width = `${size}px`; + snowflake.style.height = `${size}px`; snowflake.style.background = "white"; snowflake.style.borderRadius = "50%"; snowflake.style.opacity = Math.random(); - snowflake.style.left = `${Math.random() * window.innerWidth}px`; - snowflake.style.top = `-${snowflake.style.height}`; + + snowflake.x = Math.random() * window.innerWidth; + snowflake.y = -size; snowflake.speed = Math.random() * 3 + 2; snowflake.directionX = (Math.random() - 0.5) * 0.5; snowflake.directionY = Math.random() * 0.5 + 0.5; + snowflake.style.left = `${snowflake.x}px`; + snowflake.style.top = `${snowflake.y}px`; + snowflakes.push(snowflake); snowContainer.appendChild(snowflake); }; @@ -44,10 +49,12 @@ setInterval(createSnowflake, 80); function updateSnowflakes() { snowflakes.forEach((snowflake, index) => { - const rect = snowflake.getBoundingClientRect(); + const size = Number.parseFloat(snowflake.style.width); + const centerX = snowflake.x + size / 2; + const centerY = snowflake.y + size / 2; - const dx = rect.left + rect.width / 2 - mouse.x; - const dy = rect.top + rect.height / 2 - mouse.y; + const dx = centerX - mouse.x; + const dy = centerY - mouse.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < 30) { @@ -58,21 +65,27 @@ function updateSnowflakes() { snowflake.directionY += (Math.random() - 0.5) * 0.01; } - snowflake.style.left = `${rect.left + snowflake.directionX * snowflake.speed}px`; - snowflake.style.top = `${rect.top + snowflake.directionY * snowflake.speed}px`; + snowflake.x += snowflake.directionX * snowflake.speed; + snowflake.y += snowflake.directionY * snowflake.speed; - if (rect.top + rect.height >= window.innerHeight) { + snowflake.style.left = `${snowflake.x}px`; + snowflake.style.top = `${snowflake.y}px`; + + if (snowflake.y > window.innerHeight) { snowContainer.removeChild(snowflake); snowflakes.splice(index, 1); + return; } if ( - rect.left > window.innerWidth || - rect.top > window.innerHeight || - rect.left < 0 + snowflake.x > window.innerWidth || + snowflake.y > window.innerHeight || + snowflake.x < 0 ) { - snowflake.style.left = `${Math.random() * window.innerWidth}px`; - snowflake.style.top = `-${snowflake.style.height}`; + snowflake.x = Math.random() * window.innerWidth; + snowflake.y = -size; + snowflake.style.left = `${snowflake.x}px`; + snowflake.style.top = `${snowflake.y}px`; } }); diff --git a/public/js/stars.js b/public/js/stars.js index d35d995..6fff4eb 100644 --- a/public/js/stars.js +++ b/public/js/stars.js @@ -11,48 +11,46 @@ document.body.appendChild(container); for (let i = 0; i < 60; i++) { const star = document.createElement("div"); + star.className = "star"; const size = Math.random() * 2 + 1; - star.style.position = "absolute"; star.style.width = `${size}px`; star.style.height = `${size}px`; - star.style.background = "white"; - star.style.borderRadius = "50%"; star.style.opacity = Math.random(); star.style.top = `${Math.random() * 100}vh`; star.style.left = `${Math.random() * 100}vw`; - star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite alternate ease-in-out`; + star.style.animationDuration = `${Math.random() * 3 + 2}s`; container.appendChild(star); } function createShootingStar() { const star = document.createElement("div"); - star.classList.add("shooting-star"); + star.className = "shooting-star"; - let x = Math.random() * window.innerWidth * 0.8; - let y = Math.random() * window.innerHeight * 0.3; + star.x = Math.random() * window.innerWidth * 0.8; + star.y = Math.random() * window.innerHeight * 0.3; const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8; const speed = 10; const totalFrames = 60; + let frame = 0; const deg = angle * (180 / Math.PI); - star.style.left = `${x}px`; - star.style.top = `${y}px`; + star.style.left = `${star.x}px`; + star.style.top = `${star.y}px`; star.style.transform = `rotate(${deg}deg)`; container.appendChild(star); - let frame = 0; function animate() { - x += Math.cos(angle) * speed; - y += Math.sin(angle) * speed; - star.style.left = `${x}px`; - star.style.top = `${y}px`; + star.x += Math.cos(angle) * speed; + star.y += Math.sin(angle) * speed; + star.style.left = `${star.x}px`; + star.style.top = `${star.y}px`; star.style.opacity = `${1 - frame / totalFrames}`; frame++; if (frame < totalFrames) { requestAnimationFrame(animate); - } else { + } else if (star.parentNode === container) { container.removeChild(star); } } diff --git a/src/views/index.html b/src/views/index.html index 3ad05c4..b5e313b 100644 --- a/src/views/index.html +++ b/src/views/index.html @@ -53,7 +53,7 @@
- +