Untitled

<style>
    /* Contenitore principale del timer */
    .final-timer-container {
        font-family: Arial, sans-serif;
        background-color: #ffffff;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        text-align: center;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    /* Titolo del timer */
    .final-timer-title {
        font-size: 2.5em;
        font-weight: bold;
        margin: 0 0 5px 0;
        color: #333333;
    }

    /* Timer */
    .final-timer {
        font-size: 4em;
        font-weight: bold;
        color: #FF0000;
        margin: 0 0 10px 0;
        text-align: center;
    }

    /* Sfondo della barra di progresso */
    .final-progress-bar-background {
        width: 100%;
        background-color: #ddd;
        border-radius: 25px;
        overflow: hidden;
        height: 45px;
        border: 3px solid #FF9800;
        position: relative;
    }

    /* Riempimento della barra di progresso */
    .final-progress-bar-fill {
        height: 100%;
        width: 100%;
        background: linear-gradient(
            90deg,
            #FF9800 0%,
            #ffd026 50%,
            #FF9800 100%
        );
        background-size: 200% 100%;
        animation: continuousMove 2s linear infinite;
        transition: width 1s linear;
    }

    /* Animazione uniforme */
   @keyframes continuousMove {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: 0 0;
    }
}
    /* Responsività */
    @media (max-width: 480px) {
        .final-timer-container {
            padding: 8px;
        }

        .final-timer-title {
            font-size: 2em;
            margin: 0 0 4px 0;
        }

        .final-timer {
            font-size: 3em;
            margin: 0 0 8px 0;
        }

        .final-progress-bar-background {
            height: 35px;
        }
    }
</style>

<div class="final-timer-container">
    <div class="final-timer-title">La oferta es válida por:</div>
    <div class="final-timer" id="final-timer">04:30</div>
    <div class="final-progress-bar-background">
        <div class="final-progress-bar-fill" id="final-progress-bar"></div>
    </div>
</div>

<script>
    (function() {
        // Durata totale in secondi
        const totalTime = 270; // 4 minuti e 30 secondi
        let timeLeft = totalTime;

        const timerElement = document.getElementById('final-timer');
        const progressBar = document.getElementById('final-progress-bar');

        // Funzione per aggiornare il timer e la barra di progresso
        function updateTimer() {
            if (timeLeft <= 0) {
                clearInterval(countdown);
                timerElement.textContent = "¡Tiempo agotado!";
                progressBar.style.width = '0%';
                return;
            }

            // Calcola minuti e secondi rimanenti
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;

            // Formatta il tempo con zero iniziale se necessario
            const formattedTime = 
                String(minutes).padStart(2, '0') + ":" + 
                String(seconds).padStart(2, '0');

            timerElement.textContent = formattedTime;

            // Calcola la percentuale rimanente
            const percent = (timeLeft / totalTime) * 100;
            progressBar.style.width = percent + '%';

            timeLeft--;
        }

        // Avvia il countdown
        updateTimer(); // Aggiorna immediatamente
        const countdown = setInterval(updateTimer, 1000);
    })();
</script>