Sale Countdown Timer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes wave {
            0% {
                background-position: 0 0;
            }
            50% {
                background-position: 100% 0;
            }
            100% {
                background-position: 0 0;
            }
        }

        .countdown-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to right, #000000, #4770DB);
            background-size: 200% 100%;
            animation: wave 10s ease infinite;
            padding: 5px; /* Reduced padding to make the block smaller */
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            color: white;
        }

        .countdown-container {
            display: flex;
            align-items: center;
            justify-content: center; /* Center text and timer horizontally */
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            gap: 5px; /* Reduced gap between text and timer */
        }

        .countdown-text {
            color: white;
            margin-right: 5px; /* Reduced margin for smaller block */
            font-size: 13px; /* Reduced font size */
        }

        .countdown {
            display: flex;
            align-items: center;
            gap: 2px; /* Reduced gap between time sections */
        }

        .time-section {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            color: #000000;
            width: 30px; /* Reduced width for smaller block */
            height: 30px; /* Reduced height for smaller block */
            margin: 0;
            border-radius: 5px;
            font-weight: bold;
            font-size: 14px; /* Adjusted font size */
        }

        .time-label {
            font-size: 8px; /* Reduced font size */
            margin-left: 2px;
            margin-right: 2px;
        }

        /* Adjust layout for desktop screens */
        @media (min-width: 1024px) {
            .countdown-container {
                gap: 5px; /* Maintain smaller gap for desktop */
            }

            .countdown-text {
                margin-right: 5px; /* Reduced margin on desktop */
                font-size: 12px; /* Ensure text size is consistent */
            }
        }
    </style>
    <title>Countdown Timer</title>
</head>
<body>

<div class="countdown-bar">
    <div class="countdown-container">
        <div class="countdown-text">🏷️ GET 40% OFF! + FREE SHIPPING✨ ENDS IN </div>
        <div id="countdown" class="countdown">
            <div class="time-section" id="hours">00</div><div class="time-label">HRS</div>
            <div class="time-section" id="minutes">00</div><div class="time-label">MIN</div>
            <div class="time-section" id="seconds">00</div><div class="time-label">SEC</div>
        </div>
    </div>
</div>

<script>
    function startCountdown() {
        let countdownDuration = 29 * 60; // 29 minutes in seconds
        let countdownEnd = parseInt(localStorage.getItem('countdownEnd'));

        // If there's no previous countdownEnd, set it to now + countdownDuration
        if (!countdownEnd || countdownEnd < Date.now()) {
            countdownEnd = Date.now() + countdownDuration * 1000;
            localStorage.setItem('countdownEnd', countdownEnd);
        }

        const x = setInterval(function() {
            const now = Date.now();
            const distance = countdownEnd - now;

            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);

            document.getElementById("hours").innerHTML = (hours < 10 ? "0" : "") + hours;
            document.getElementById("minutes").innerHTML = (minutes < 10 ? "0" : "") + minutes;
            document.getElementById("seconds").innerHTML = (seconds < 10 ? "0" : "") + seconds;

            if (distance < 0) {
                clearInterval(x);
                localStorage.setItem('countdownEnd', Date.now() + countdownDuration * 1000);
                startCountdown(); // Restart the countdown
            }
        }, 1000);
    }

    startCountdown();
</script>

</body>
</html>