<div id="offer-panel" style="text-align: center; font-family: Arial, sans-serif; margin: 20px auto; padding: 20px; border-radius: 15px; background: linear-gradient(45deg, #FF5E5E, #5E95FF); color: white; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); max-width: 100%; width: 30%; min-width: 250px;">

<h1 style="font-size: 1.5rem; font-weight: bold;">Offerta Speciale</h1>

<p style="font-size: 1rem; margin-bottom: 20px;">Tempo rimanente:</p>

<div id="countdown" style="display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;">

  

  <div style="background-color: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 10px; width: 20%; min-width: 70px; text-align: center;">

    <span id="days" style="font-size: 1.5rem; font-weight: bold;">0</span>

    <div style="font-size: 0.9rem;">Giorni</div>

  </div>

 

  <div style="background-color: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 10px; width: 20%; min-width: 70px; text-align: center;">

    <span id="hours" style="font-size: 1.5rem; font-weight: bold;">0</span>

    <div style="font-size: 0.9rem;">Ore</div>

  </div>

  

  <div style="background-color: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 10px; width: 20%; min-width: 70px; text-align: center;">

    <span id="minutes" style="font-size: 1.5rem; font-weight: bold;">0</span>

    <div style="font-size: 0.9rem;">Min</div>

  </div>

  

  <div style="background-color: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 10px; width: 20%; min-width: 70px; text-align: center;">

    <span id="seconds" style="font-size: 1.5rem; font-weight: bold;">0</span>

    <div style="font-size: 0.9rem;">Sec</div>

  </div>

</div>

</div>

<style>

/* Media query per larghezze comprese tra 1379px e 1679.9px */

 @media screen and (min-width: 1379px) and (max-width: 1679.9px) {

   #offer-panel {

     width: 60% !important; /* Aumenta la larghezza del pannello per evitare il wrapping */

   }

   #countdown {

     flex-wrap: nowrap; /* Forza tutti i box su una riga */

     justify-content: space-around; /* Distribuisce uniformemente i box */

   }

   #countdown > div {

     flex: 1; /* Assicura che i box si espandano equamente */

     max-width: 120px; /* Mantiene proporzioni dei box */

     text-align: center;

     margin: 0 10px; /* Spaziatura laterale per bilanciare il layout */

   }

 }

/* Media query per larghezze comprese tra 1280px e 1378.9px */

 @media screen and (min-width: 1280px) and (max-width: 1378.9px) {

   #offer-panel {

     width: 60% !important; /* Aumenta la larghezza del pannello per evitare il wrapping */

   }

   #countdown {

     flex-wrap: nowrap; /* Forza tutti i box su una riga */

     justify-content: space-around; /* Distribuisce uniformemente i box */

   }

   #countdown > div {

     flex: 1; /* Assicura che i box si espandano equamente */

     max-width: 120px; /* Mantiene proporzioni dei box */

     text-align: center;

     margin: 0 10px; /* Spaziatura laterale per bilanciare il layout */

   }

 }

 

 /* Media query per larghezze comprese tra 1149px e 1279.9px */

 @media screen and (min-width: 1149px) and (max-width: 1279.9px) {

   #offer-panel {

     width: 60% !important; /* Aumenta la larghezza del pannello per evitare il wrapping */

   }

   #countdown {

     flex-wrap: nowrap; /* Forza tutti i box su una riga */

     justify-content: space-around; /* Distribuisce uniformemente i box */

   }

   #countdown > div {

     flex: 1; /* Assicura che i box si espandano equamente */

     max-width: 120px; /* Mantiene proporzioni dei box */

     text-align: center;

     margin: 0 10px; /* Spaziatura laterale per bilanciare il layout */

   }

 }

 

 /* Media query per schermi più grandi di 1150px */

 @media screen and (min-width: 1150px) {

   #countdown {

     display: flex; /* Garantisce il layout flessibile */

     flex-wrap: nowrap; /* Disattiva il wrapping per mantenere i box su una riga */

     justify-content: space-evenly; /* Spaziatura uniforme tra i box */

     align-items: center; /* Centra verticalmente i contenuti */

   }

   #countdown > div {

     flex: 1; /* I box si espandono equamente */

     max-width: 120px; /* Imposta una larghezza massima per evitare allungamenti eccessivi */

     text-align: center;

     margin: 0 5px; /* Aggiunge margini laterali per spaziatura */

   }

 }

</style>

<script>

// Numero di giorni per l'offerta (modificabile)

// Calcola la data di scadenza

const expiryDate = new Date();

expiryDate.setDate(expiryDate.getDate() + offerDays);

// Aggiorna il countdown

function updateCountdown() {

 const now = new Date();

 const timeLeft = expiryDate - now;

 if (timeLeft > 0) {

   const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));

   const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

   const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));

   const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

   // Aggiorna i valori nei box

   document.getElementById("days").innerText = days;

   document.getElementById("hours").innerText = hours;

   document.getElementById("minutes").innerText = minutes;

   document.getElementById("seconds").innerText = seconds;

 } else {

   // Messaggio di scadenza

   document.getElementById("offer-panel").innerHTML = `

     <h1 style="color: white;">Offerta Scaduta</h1>

   `;

 }

}

// Esegui il countdown ogni secondo

setInterval(updateCountdown, 1000);

</script>