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 @@