<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown Timer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #111827, #1f2937);
color: white;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 900px;
}
h1 {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 40px;
font-weight: 700;
}
.countdown {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.time-box {
background: rgba(255, 255, 255, 0.08);
padding: 30px 15px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.number {
font-size: clamp(2rem, 6vw, 5rem);
font-weight: bold;
}
.label {
margin-top: 10px;
font-size: clamp(0.9rem, 2vw, 1.2rem);
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (max-width: 700px) {
.countdown {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 400px) {
.countdown {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Countdown</h1>
<div class="countdown">
<div class="time-box">
<div class="number" id="days">0</div>
<div class="label">Tage</div>
</div>
<div class="time-box">
<div class="number" id="hours">0</div>
<div class="label">Stunden</div>
</div>
<div class="time-box">
<div class="number" id="minutes">0</div>
<div class="label">Minuten</div>
</div>
<div class="time-box">
<div class="number" id="seconds">0</div>
<div class="label">Sekunden</div>
</div>
</div>
</div>
<script>
// Zieldatum festlegen
// Format: Jahr, Monat-1, Tag, Stunde, Minute, Sekunde
const targetDate = new Date(2026, 6, 13, 17, 0, 0);
function updateCountdown() {
const now = new Date();
const difference = targetDate - now;
if (difference <= 0) {
document.querySelector(".countdown").innerHTML =
"<h2>Ziel erreicht!</h2>";
return;
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((difference / (1000 * 60)) % 60);
const seconds = Math.floor((difference / 1000) % 60);
document.getElementById("days").textContent = days;
document.getElementById("hours").textContent = hours;
document.getElementById("minutes").textContent = minutes;
document.getElementById("seconds").textContent = seconds;
}
// Sofort starten
updateCountdown();
// Jede Sekunde aktualisieren
setInterval(updateCountdown, 1000);
</script>
</body>
</html>