<!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>
    
    <script>
        if (window.location.protocol !== 'https:') {
            window.location.href = 'https://' + window.location.hostname + window.location.pathname + window.location.search;
        }
    </script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #f5f5f5;
            color: #333;
        }

        header {
            background-color: #4a4a4a;
            color: white;
            text-align: center;
            padding: 1rem;
        }

        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 800px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
            background-color: white;
            padding: 20px 0;
        }

        .countdown-container {
            text-align: center;
            padding: 20px;
        }

        .countdown {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 30px 0;
        }

        .countdown-box {
            background-color: #4a4a4a;
            color: white;
            padding: 15px 10px;
            border-radius: 8px;
            min-width: 80px;
        }

        .countdown-value {
            font-size: 36px;
            font-weight: bold;
        }

        .countdown-label {
            font-size: 14px;
            margin-top: 5px;
        }

        .info {
            padding: 20px;
            text-align: center;
            line-height: 1.6;
        }

        h2 {
            margin-top: 0;
            color: #333;
            font-size: 24px;
        }

        footer {
            background-color: #4a4a4a;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: auto;
        }

        @media (max-width: 600px) {
            .container {
                width: 95%;
            }

            .countdown {
                flex-wrap: wrap;
                gap: 10px;
            }

            .countdown-box {
                min-width: 70px;
                padding: 10px 5px;
            }

            .countdown-value {
                font-size: 28px;
            }

            .info {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Countdown Timer</h1>
    </header>

    <main>
        <div class="container">
            <div class="countdown-container">
                <h2>Countdown until Brian is an old fuck!</h2>
                <div class="countdown">
                    <div class="countdown-box">
                        <div id="days" class="countdown-value">--</div>
                        <div class="countdown-label">Days</div>
                    </div>
                    <div class="countdown-box">
                        <div id="hours" class="countdown-value">--</div>
                        <div class="countdown-label">Hours</div>
                    </div>
                    <div class="countdown-box">
                        <div id="minutes" class="countdown-value">--</div>
                        <div class="countdown-label">Minutes</div>
                    </div>
                    <div class="countdown-box">
                        <div id="seconds" class="countdown-value">--</div>
                        <div class="countdown-label">Seconds</div>
                    </div>
                </div>
                <p>Time is ticking!</p>
            </div>
        </div>
    </main>

    <footer>
        <p>© 2025 Countdown Timer. All rights reserved.</p>
    </footer>

    <script>
        // Set the date we're counting down to - October 10, 2025
        const countDownDate = new Date("October 10, 2025 00:00:00").getTime();

        // Update the countdown every 1 second
        const x = setInterval(function() {
            // Get current date and time
            const now = new Date().getTime();

            // Find the distance between now and the countdown date
            const distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the results
            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;

            // If the countdown is finished, display message
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("days").innerHTML = "0";
                document.getElementById("hours").innerHTML = "0";
                document.getElementById("minutes").innerHTML = "0";
                document.getElementById("seconds").innerHTML = "0";
                document.querySelector(".countdown-container p").innerHTML = "Brian is officially an old fuck!";
            }
        }, 1000);
    </script>
</body>
</html>