pawelorzech/orzech.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update index.html

Browse source
This commit is contained in:
Paweł Orzech 2025-06-28 02:30:17 +02:00
parent 6352576b8a
commit 30644c1b02
1 changed files with 114 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
index.html
View file

@ -24,8 +24,10 @@
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) { if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
document.body.classList.remove('light-mode-animated');
} else { } else {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
document.body.classList.add('light-mode-animated');
} }
}; };
applyTheme(); applyTheme();
@ -34,6 +36,20 @@
<style> <style>
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
background-size: 200% 200%;
}
@keyframes wind-breeze {
0% { background-position: 0% 50%; }
25% { background-position: 100% 0%; }
50% { background-position: 0% 100%; }
75% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body.light-mode-animated {
animation: wind-breeze 30s ease infinite;
background-size: 400% 400%; /* Increase background size to allow more movement */
} }
.animate-on-load { .animate-on-load {
opacity: 0; opacity: 0;
@ -112,11 +128,48 @@
pointer-events: none; pointer-events: none;
transform-origin: 0% 0%; transform-origin: 0% 0%;
} }
/* Sun animation for light mode */
@keyframes sun-glow {
0%, 100% { box-shadow: 0 0 20px 8px rgba(255, 255, 200, 0.4); }
50% { box-shadow: 0 0 40px 15px rgba(255, 255, 200, 0.7); }
}
@keyframes sun-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%); }
}
.sun {
position: absolute;
top: 10%;
left: 50%;
width: 180px; /* Slightly larger for more presence */
height: 180px;
background: radial-gradient(circle, #FFFACD, #FFEFD5); /* Pastel yellow to peach */
border-radius: 50%;
animation: sun-glow 6s infinite alternate, sun-drift 20s infinite ease-in-out;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.sun.visible {
opacity: 1;
}
</style> </style>
</head> </head>
<body class="bg-blue-50 dark:bg-gray-900 text-gray-800 flex items-center justify-center min-h-screen transition-colors duration-300"> <body class="bg-gradient-to-r from-blue-50 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-800 text-gray-800 flex items-center justify-center min-h-screen transition-colors duration-300">
<div id="star-container" class="absolute inset-0 overflow-hidden pointer-events-none"></div> <div id="star-container" class="absolute inset-0 overflow-hidden pointer-events-none"></div>
<div id="sun-container" class="absolute top-0 left-0 w-full h-1/2 overflow-hidden pointer-events-none"></div>
<div id="theme-switcher" class="switcher absolute top-4 left-4 flex space-x-3"> <div id="theme-switcher" class="switcher absolute top-4 left-4 flex space-x-3">
<button id="theme-light" class="text-2xl">☀️</button> <button id="theme-light" class="text-2xl">☀️</button>
@ -270,9 +323,35 @@
if (isDarkMode && isCurrentlyNight) { if (isDarkMode && isCurrentlyNight) {
createStars(); createStars();
startShootingStars(); startShootingStars();
toggleSun(false);
} else if (!isDarkMode) {
removeStars();
stopShootingStars();
toggleSun(true);
} else { } else {
removeStars(); removeStars();
stopShootingStars(); 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); updateThemeButtons(savedTheme);
// Call applyTheme and createStars/ShootingStars initially based on savedTheme and time // Call applyTheme and createStars/ShootingStars initially based on savedTheme and time
applyTheme(); 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(); createStars();
startShootingStars(); startShootingStars();
toggleSun(false);
} else if (!isDarkModeInitial) {
removeStars();
stopShootingStars();
toggleSun(true);
} else {
removeStars();
stopShootingStars();
toggleSun(false);
} }
// Add event listeners // Add event listeners
@ -374,7 +466,26 @@
document.getElementById('theme-system').addEventListener('click', () => setTheme('system')); document.getElementById('theme-system').addEventListener('click', () => setTheme('system'));
// Listen for system theme changes // 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 // Update time every minute
setInterval(updateTimeDisplay, 60000); setInterval(updateTimeDisplay, 60000);