From 808e984471562ba235578570b72b5e9c8dd84651 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Orzech?= Date: Sat, 28 Jun 2025 02:31:38 +0200 Subject: [PATCH] Update index.html --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 60 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 77217da..b3d77a3 100644 --- a/index.html +++ b/index.html @@ -164,12 +164,45 @@ .sun.visible { opacity: 1; } + + /* Moon animation for dark mode */ + @keyframes moon-glow { + 0%, 100% { box-shadow: 0 0 20px 8px rgba(200, 200, 255, 0.2); } + 50% { box-shadow: 0 0 40px 15px rgba(200, 200, 255, 0.4); } + } + + @keyframes moon-drift { + 0% { transform: translate(-50%, -50%); } + 25% { transform: translate(-48%, -49%); } + 50% { transform: translate(-52%, -51%); } + 75% { transform: translate(-49%, -48%); } + 100% { transform: translate(-50%, -50%); } + } + + .moon { + position: absolute; + top: 10%; + left: 50%; + width: 150px; /* Slightly smaller than sun */ + height: 150px; + background: radial-gradient(circle, #E0E0E0, #B0B0B0); /* Greyish white */ + border-radius: 50%; + animation: moon-glow 6s infinite alternate, moon-drift 20s infinite ease-in-out; + pointer-events: none; + opacity: 0; + transition: opacity 0.5s ease-in-out; + } + + .moon.visible { + opacity: 1; + }
+
@@ -323,24 +356,26 @@ if (isDarkMode && isCurrentlyNight) { createStars(); startShootingStars(); - toggleSun(false); + toggleCelestialBodies(false, true); } else if (!isDarkMode) { removeStars(); stopShootingStars(); - toggleSun(true); + toggleCelestialBodies(true, false); } else { removeStars(); stopShootingStars(); - toggleSun(false); + toggleCelestialBodies(false, false); } }; // --- SUN LOGIC --- - const toggleSun = (show) => { + const toggleCelestialBodies = (showSun, showMoon) => { const sunContainer = document.getElementById('sun-container'); let sunElement = document.getElementById('animated-sun'); + const moonContainer = document.getElementById('moon-container'); + let moonElement = document.getElementById('animated-moon'); - if (show) { + if (showSun) { if (!sunElement) { sunElement = document.createElement('div'); sunElement.id = 'animated-sun'; @@ -353,6 +388,20 @@ sunElement.classList.remove('visible'); } } + + if (showMoon) { + if (!moonElement) { + moonElement = document.createElement('div'); + moonElement.id = 'animated-moon'; + moonElement.className = 'moon'; + moonContainer.appendChild(moonElement); + } + moonElement.classList.add('visible'); + } else { + if (moonElement) { + moonElement.classList.remove('visible'); + } + } }; // --- STAR ANIMATION LOGIC --- @@ -447,15 +496,15 @@ if (isDarkModeInitial && isCurrentlyNightInitial) { createStars(); startShootingStars(); - toggleSun(false); + toggleCelestialBodies(false, true); } else if (!isDarkModeInitial) { removeStars(); stopShootingStars(); - toggleSun(true); + toggleCelestialBodies(true, false); } else { removeStars(); stopShootingStars(); - toggleSun(false); + toggleCelestialBodies(false, false); } // Add event listeners @@ -474,15 +523,15 @@ if (isDarkMode && isCurrentlyNight) { createStars(); startShootingStars(); - toggleSun(false); + toggleCelestialBodies(false, true); } else if (!isDarkMode) { removeStars(); stopShootingStars(); - toggleSun(true); + toggleCelestialBodies(true, false); } else { removeStars(); stopShootingStars(); - toggleSun(false); + toggleCelestialBodies(false, false); } } });