<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Countdown Timer</title>
    <style>
        /* Global Styles */
        body {
            background: #111;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        /* Countdown container */
        .countdown-container {
            text-align: center;
            border: 2px solid #fff;
            padding: 50px 100px;
            border-radius: 15px;
            background: rgba(0, 0, 0, 0.7);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
        }

        /* Countdown text styles */
        .countdown {
            font-size: 60px;
            font-weight: 700;
            letter-spacing: 2px;
            margin: 10px 0;
            text-transform: uppercase;
            animation: fadeIn 1s ease-in-out;
        }

        .label {
            font-size: 24px;
            color: #bbb;
            text-transform: uppercase;
        }

        /* Animation */
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        /* Mobile responsiveness */
        @media screen and (max-width: 768px) {
            .countdown-container {
                padding: 30px 60px;
            }

            .countdown {
                font-size: 48px;
            }

            .label {
                font-size: 18px;
            }
        }

    </style>
</head>
<body>

    <div class="countdown-container">
        <div id="countdown" class="countdown"></div>
        <div class="label">Until January 9, 2025</div>
    </div>

    <script>
        function updateCountdown() {
            const targetDate = new Date("January 9, 2025 00:00:00").getTime();
            const currentDate = new Date().getTime();
            const timeLeft = targetDate - currentDate;

            if (timeLeft <= 0) {
                document.getElementById("countdown").innerHTML = "Countdown Complete";
                return;
            }

            const days = Math.floor(timeLeft / (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);

            document.getElementById("countdown").innerHTML = `
                <div>${days} <span class="label">Days</span></div>
                <div>${hours} <span class="label">Hours</span></div>
                <div>${minutes} <span class="label">Minutes</span></div>
                <div>${seconds} <span class="label">Seconds</span></div>
            `;
        }

        setInterval(updateCountdown, 1000);
    </script>

</body>
</html>
