<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown</title>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
            overflow: hidden;
            position: relative; 
        }
        h1 {
            font-size: 3rem;
            color: #ffcc00;
            display: none;
            z-index: 10;
        }
        #zoom-image {
            max-width: 80%;
            max-height: 80%;
            opacity: 0;
            transform: scale(0);
            transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            z-index: 5;
        }
        #countdown {
            font-size: 3rem; 
            color: white;
            margin-top: 20px;
            text-align: center;
            z-index: 100;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1 id="header-text">Counting down...</h1>
    <img id="zoom-image" src="https://cdn.glitch.global/e7c45f83-578e-4b3b-a02f-0c1cbfff4042/tropee.png?v=1736593300694" alt="Birthday Image">
    <div id="countdown"></div>

    <script>
        const birthdayDate = new Date('2025-01-13T00:00:00+10:00'); 
        const countdownDisplay = document.getElementById('countdown');
        const headerText = document.getElementById('header-text');
        let countdownInterval;
        let celebrationTriggered = false; 
        let lastTenSeconds = false; 

        function updateCountdown() {
            const now = new Date();
            const timeRemaining = birthdayDate - now;

            if (timeRemaining <= 0 && !celebrationTriggered) {
              
                celebrationTriggered = true; 
                startCelebration(); 

                clearInterval(countdownInterval);

                countdownDisplay.style.transition = "opacity 1s ease-out";
                countdownDisplay.style.opacity = 0;
                setTimeout(() => {
                    countdownDisplay.style.display = "none"; 
                }, 1000); 

                headerText.textContent = "Happy Birthday!";
                return;
            }

            const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

            let formattedTime = '';

            if (days > 0) {
                formattedTime += `${String(days).padStart(2, '0')}:`;
            }
            if (hours > 0 || days > 0) {
                formattedTime += `${String(hours).padStart(2, '0')}:`;
            }
            if (minutes > 0 || hours > 0 || days > 0) {
                formattedTime += `${String(minutes).padStart(2, '0')}:`;
            }

            formattedTime += seconds < 10 ? `${seconds}` : `${String(seconds).padStart(2, '0')}`;

            countdownDisplay.innerHTML = formattedTime;

            if (timeRemaining <= 10000 && !lastTenSeconds) {
                lastTenSeconds = true; 
                startScalingCountdown(); 
            }
        }

        function startCelebration() {
            document.querySelector("h1").style.display = "block";
            document.getElementById("zoom-image").style.opacity = 1;
            document.getElementById("zoom-image").style.transform = "scale(1)";
            document.getElementById("zoom-image").onload = () => {
                setTimeout(() => {
                    startConfetti();
                }, 2000); 
            };
            startConfetti(); 
        }

        function startConfetti() {
            confetti({
                particleCount: 500,
                spread: 360,
                origin: { x: 0.5, y: 0.5 },
                colors: ['#ffd700', '#ffffff', '#c0c0c0'],
                shapes: ["circle"],
                gravity: 1,
                scalar: 0.7,
            });

            setInterval(() => {
                confetti({
                    particleCount: 100,
                    startVelocity: 40,
                    spread: 110,
                    origin: { x: Math.random(), y: 0 },
                    colors: ['#ffd700', '#ffffff', '#c0c0c0'],
                    shapes: ["circle"],
                    gravity: 1,
                    scalar: 1,
                });
            }, 100);
        }

        function startScalingCountdown() {
            let scale = 1;
            const interval = setInterval(() => {
                if (scale < 8) {
                    scale += 1.5; 
                    countdownDisplay.style.transform = `scale(${scale})`;
                } else {
                    clearInterval(interval); 
                }
            }, 1000);
        }

        function startRegularCountdown() {
            countdownInterval = setInterval(updateCountdown, 1000);
            updateCountdown();
        }

        startRegularCountdown();
    </script>
</body>
</html>
