<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown and Progress</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Body styling */
        body {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 1000;
            background-color: #f9f9f9;
            color: #333333;
            text-align: center;
        }

        /* Center wrapper */
        .center-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        /* Countdown timer styling */
        .countdown-timer {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 3vw;
            margin-bottom: 3vh;
            padding: 1vh 2vw;
            border: 0.2vw solid #ddd;
            border-radius: 0.5vw;
            background-color: rgba(255, 255, 255, 0.8);
            white-space: nowrap;
            max-width: 50vw;
            width: 50vw;
            text-align: center;
        }

        /* Button styling */
        .confetti-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 2vh 4vw;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 1.5vw;
            font-weight: bold;
            cursor: pointer;
            margin-top: 2vh;
            transition: background-color 0.3s;
        }

        /* Button hover effect */
        .confetti-button:hover {
            background-color: #FF69B4;
        }

        /* Progress bar container */
        #myProgress {
            width: 80vw;
            background-color: #ddd;
            margin-bottom: 3vh;
            position: relative;
            height: 5vh;
            border-radius: 2.5vh;
            overflow: hidden;
        }

        /* Progress bar */
        #myBar {
            width: 1%;
            height: 100%;
            background: linear-gradient(90deg, #04AA6D, #06b73a);
            border-radius: 2.5vh;
            transition: width 0.1s ease;
        }

        /* Progress bar text centered in the grey bar */
        #progressText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="center-wrapper"> <!-- Countdown Timer -->
        <div class="countdown-timer" id="demo"> 0d 0h 0m 0s 00ms
        </div>
        <!-- Progress Bar -->
        <div id="myProgress">
            <div id="myBar"></div> <span id="progressText">0%</span>
        </div>
        <!-- Confetti Button --> <button class="confetti-button"
            onclick="confetti({    particleCount: 200,    angle: 90,    spread: 70,    origin: { x: 0.5, y: 0.5 },    shapes: ['image'],    image: 'https://i.ibb.co/x5gj2Gt/20241020-103250.png',    size: 40,    scalar: 1.5   });">Grattis!</button>
    </div>
    <!-- Confetti library -->
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
    <script>  // Countdown Timer and Progress Bar Logic  
        var countDownDate = new Date("November 25 2025 18:55").getTime(); var startDay = new Date("Nov 25 2024 18:55").getTime(); var totalDuration = countDownDate - startDay;
        function move() {
            var elem = document.getElementById("myBar"); var textElem = document.getElementById("progressText"); var now = new Date().getTime(); var elapsed = now - startDay; var width = (elapsed / totalDuration) * 100;
            if (width >= 100) { elem.style.width = "100%"; textElem.innerHTML = "100%"; } else { elem.style.width = width.toFixed(10) + "%"; textElem.innerHTML = width.toFixed(10) + "%"; }
        }
        var x = setInterval(function () {
            var now = new Date().getTime(); var distance = countDownDate - now;
            // Time calculations for days, hours, minutes, seconds, and milliseconds    
            var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0'); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0'); var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString().padStart(2, '0'); var milli = Math.floor((distance % 1000) / 10).toString().padStart(2, '0');
            // Display the result in the countdown element    
            document.getElementById("demo").innerHTML = " " + days + "d " + hours + "h " + minutes + "m " + seconds + "s " + milli + "ms"; move();
            // If the countdown is finished, write some text    
            if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = " GRATTIS!!! "; document.getElementById("myBar").style.width = "100%"; document.getElementById("progressText").innerHTML = "100%"; }
        }, 1);</script>
</body>

</html>