Super deals

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperDeals Banner</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Oswald:wght@700&display=swap" rel="stylesheet">
    <style>
        .unique-body-Abc123 {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
        }

        .unique-deal-banner-Abc123 {
            display: flex;
            border-radius: 15px;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            font-size: 14px;
        }

        .unique-deal-text-container-Abc123 {
            background-color: #ff4d4d; /* Bir ton koyu kırmızı */
            padding: 10px 20px;
            display: flex;
            align-items: center;
        }

        .unique-deal-text-Abc123 {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            color: white; /* Metin rengi beyaz */
        }

        .unique-deal-timer-container-Abc123 {
            background-color: #ff6666; /* Açık kırmızı */
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
        }

        .unique-deal-timer-Abc123 {
            font-family: 'Oswald', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: white;
            animation: unique-timerAnimation-Abc123 1s ease-in-out infinite alternate;
        }

        @keyframes unique-timerAnimation-Abc123 {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }
    </style>
</head>
<body class="unique-body-Abc123">
    <div class="unique-deal-banner-Abc123">
        <div class="unique-deal-text-container-Abc123">
            <span class="unique-deal-text-Abc123">SuperDeals</span>
        </div>
        <div class="unique-deal-timer-container-Abc123">
            <span class="unique-deal-timer-Abc123" id="countdown">Ends: 9d : 18 : 22 : 13</span>
        </div>
    </div>

    <script>
        function startCountdown() {
            var countDownTime = 12 * 60 * 60 * 1000; // 12 hours in milliseconds
            var countDownDate = new Date().getTime() + countDownTime;

            var x = setInterval(function() {
                var now = new Date().getTime();
                var distance = countDownDate - now;

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

                document.getElementById("countdown").innerHTML = "Ends: " + days + "d : " + hours + " : " + minutes + " : " + seconds;

                if (distance < 0) {
                    clearInterval(x);
                    startCountdown(); // Restart the countdown
                }
            }, 1000);
        }

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