<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-blue-500 flex justify-center items-center h-screen">
<div x-data="countdown()" x-init="startTimer()" class="text-white text-center">
<h1 class="text-6xl mb-4">Countdown Timer</h1>
<div class="text-4xl">
<span x-text="time.days"></span> days
<span x-text="time.hours"></span> hours
<span x-text="time.minutes"></span> minutes
<span x-text="time.seconds"></span> seconds
</div>
</div>
<script src="/node_modules/alpinejs/dist/alpine.js"></script>
<script>
function countdown() {
return {
time: { days: 0, hours: 0, minutes: 0, seconds: 0 },
targetDate: new Date('2023-12-31'),
startTimer() {
setInterval(() => {
const diff = this.targetDate - new Date();
this.time.days = Math.floor(diff / (1000 * 60 * 60 * 24));
this.time.hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
this.time.minutes = Math.floor((diff / 1000 / 60) % 60);
this.time.seconds = Math.floor((diff / 1000) % 60);
}, 1000);
}
}
}
</script>
</body>
</html>
