File size: 2,848 Bytes
292de4b 41a73cf 292de4b 41a73cf d83366a 41a73cf d83366a 41a73cf 292de4b 41a73cf 292de4b 41a73cf 292de4b 41a73cf 292de4b 41a73cf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
export function updateBackground(): void {
const hour = new Date().getHours();
const background = document.getElementById('bg') as HTMLElement | null;
if (!background) {
console.warn("Background element not found, will retry later.");
setTimeout(updateBackground, 500); // Retry after a delay
return;
}
let color1, color2, color3, color4; // Colors for the radial gradients and background
let cloudStyle = ''; // Additional style for cloud effects
if (hour >= 5 && hour < 7) {
// Dawn
color1 = 'rgba(255, 140, 0, 0.6)'; // Dark orange (sunrise)
color2 = 'rgba(135, 206, 250, 0.6)'; // Sky blue (light sky)
color3 = '#F0E68C'; // Light khaki (morning light)
} else if (hour >= 7 && hour < 16) {
// Daylight
color1 = 'rgba(135, 206, 250, 0.6)'; // Light sky blue (high sky)
color2 = 'rgba(255, 255, 255, 0.6)'; // White (sun)
color3 = '#87CEEB'; // Sky blue (clear day)
cloudStyle = ', radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.8), transparent 80%), radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.8), transparent 80%)';
} else if (hour >= 16 && hour < 20) {
// Dusk
color1 = 'rgba(250, 128, 114, 0.6)'; // Salmon (sunset)
color2 = 'rgba(100, 149, 237, 0.6)'; // Cornflower blue (evening sky)
color3 = '#B0C4DE'; // Light steel blue (twilight)
} else {
// Night
color1 = 'rgba(0, 0, 0, 1)'; // Pure black
color2 = 'rgba(0, 0, 0, 1)'; // Pure black
color3 = '#000000'; // Pure black
}
// Define color4 for the pseudo-elements
if (hour >= 6 && hour < 18) {
// Daytime: lighter color for a subtle effect
color4 = 'rgba(255, 255, 255, 0.2)';
} else {
// Nighttime: darker color for a stronger effect
color4 = 'rgba(0, 0, 0, 0.1)';
}
// Set the background image, color, and cloud effect
background.style.backgroundImage =
`radial-gradient(circle at 50% 20%, ${color1}, transparent 90%),
radial-gradient(circle at 50% 80%, ${color2}, transparent 90%)${cloudStyle}`;
background.style.backgroundColor = color3;
// Cloud animation
if (cloudStyle) {
background.style.animation = 'moveClouds 60s linear infinite';
} else {
background.style.animation = 'none';
}
// Set the styles for the pseudo-elements
const beforeElement: any = document.querySelector('.background::before');
const afterElement: any = document.querySelector('.background::after');
if (beforeElement && afterElement) {
beforeElement.style.backgroundImage = `radial-gradient(closest-side, ${color4}, transparent)`;
afterElement.style.backgroundImage = `radial-gradient(closest-side, ${color4}, transparent)`;
}
} |