andromeda
<!DOCTYPE html> <html lang=„de„> <head> <meta charset=„UTF-8„> <meta name=„viewport„ content=„width=device-width, initial-scale=1.0„> <title>Dunkler Weltraum Kollisions-Timer mit blinkenden Sternen</title> <style> body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; overflow: hidden; background-color: #000; } .space { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(‚/api/placeholder/1920/1080‘); background-size: cover; background-position: center; filter: brightness(0.4); } .star { position: absolute; background-color: #fff; border-radius: 50%; animation: twinkle var(–duration) infinite; } @keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .timer-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 15px; box-shadow: 0 0 30px rgba(0, 100, 255, 0.3); z-index: 10; } #timer { font-size: 2em; margin: 20px 0; text-shadow: 0 0 10px rgba(0, 100, 255, 0.7); } .time-unit { display: inline-block; transition: all 0.3s ease; } .highlight { color: #00ffff; text-shadow: 0 0 15px #00ffff; } h1 { font-size: 1.5em; margin-bottom: 15px; text-shadow: 0 0 10px rgba(0, 100, 255, 0.7); } </style> </head> <body> <div class=„space„ id=„space„></div> <div class=„timer-container„> <h1>Zeit bis zur Kollision von Andromeda und der Milchstraße</h1> <div id=„timer„></div> </div> <script> function createStars() { const space = document.getElementById(’space‘); const starCount = 200; for (let i = 0; i < starCount; i++) { const star = document.createElement(‚div‘); star.className = ’star‘; star.style.width = star.style.height = `${Math.random() * 2 + 1}px`; star.style.left = `${Math.random() * 100}%`; star.style.top = `${Math.random() * 100}%`; star.style.setProperty(‚–duration‘, `${Math.random() * 3 + 2}s`); star.style.animationDelay = `${Math.random() * 5}s`; space.appendChild(star); } } let prevValues = {}; function updateTimer() { const now = new Date().getTime(); const collisionDate = new Date(„2024-04-01“).getTime() + (4.5 * 1000 * 60 * 60 * 24 * 365 * 1e9); const timeLeft = collisionDate – now; const years = Math.floor(timeLeft / (1000 * 60 * 60 * 24 * 365)); const days = Math.floor((timeLeft % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); const values = {years, days, hours, minutes, seconds}; const units = [‚Jahre‘, ‚Tage‘, ‚Stunden‘, ‚Minuten‘, ‚Sekunden‘]; let timerHTML = “; units.forEach((unit, index) => { const value = Object.values(values)[index]; const prevValue = prevValues[unit] || value; const highlightClass = value !== prevValue ? ‚highlight‘ : “; timerHTML += `<span class=“time-unit ${highlightClass}„>${value} ${unit}</span>, `; prevValues[unit] = value; }); document.getElementById(„timer“).innerHTML = timerHTML.slice(0, –2); } createStars(); setInterval(updateTimer, 1000); updateTimer(); </script> </body> </html>