From 30644c1b02e67e0ac6a0cf3c6ea905c1c839bc98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Orzech?= Date: Sat, 28 Jun 2025 02:30:17 +0200 Subject: [PATCH] Update index.html --- index.html | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 114 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 09fa3d2..77217da 100644 --- a/index.html +++ b/index.html @@ -24,8 +24,10 @@ if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); + document.body.classList.remove('light-mode-animated'); } else { document.documentElement.classList.remove('dark'); + document.body.classList.add('light-mode-animated'); } }; applyTheme(); @@ -34,6 +36,20 @@ - +
+
@@ -270,9 +323,35 @@ if (isDarkMode && isCurrentlyNight) { createStars(); startShootingStars(); + toggleSun(false); + } else if (!isDarkMode) { + removeStars(); + stopShootingStars(); + toggleSun(true); } else { removeStars(); stopShootingStars(); + toggleSun(false); + } + }; + + // --- SUN LOGIC --- + const toggleSun = (show) => { + const sunContainer = document.getElementById('sun-container'); + let sunElement = document.getElementById('animated-sun'); + + if (show) { + if (!sunElement) { + sunElement = document.createElement('div'); + sunElement.id = 'animated-sun'; + sunElement.className = 'sun'; + sunContainer.appendChild(sunElement); + } + sunElement.classList.add('visible'); + } else { + if (sunElement) { + sunElement.classList.remove('visible'); + } } }; @@ -361,9 +440,22 @@ updateThemeButtons(savedTheme); // Call applyTheme and createStars/ShootingStars initially based on savedTheme and time applyTheme(); - if (document.documentElement.classList.contains('dark') && isNightTime()) { + // Initial check for stars, shooting stars, and sun based on current theme and time + const isDarkModeInitial = document.documentElement.classList.contains('dark'); + const isCurrentlyNightInitial = isNightTime(); + + if (isDarkModeInitial && isCurrentlyNightInitial) { createStars(); startShootingStars(); + toggleSun(false); + } else if (!isDarkModeInitial) { + removeStars(); + stopShootingStars(); + toggleSun(true); + } else { + removeStars(); + stopShootingStars(); + toggleSun(false); } // Add event listeners @@ -374,7 +466,26 @@ document.getElementById('theme-system').addEventListener('click', () => setTheme('system')); // Listen for system theme changes - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { + if (localStorage.getItem('theme') === 'system') { + applyTheme(); + const isDarkMode = document.documentElement.classList.contains('dark'); + const isCurrentlyNight = isNightTime(); + if (isDarkMode && isCurrentlyNight) { + createStars(); + startShootingStars(); + toggleSun(false); + } else if (!isDarkMode) { + removeStars(); + stopShootingStars(); + toggleSun(true); + } else { + removeStars(); + stopShootingStars(); + toggleSun(false); + } + } + }); // Update time every minute setInterval(updateTimeDisplay, 60000);