<div id="offer-panel" style="text-align: center; font-family: Arial, sans-serif; margin: 20px; padding: 20px; border-radius: 15px; background: linear-gradient(45deg, #FF9900, #FF4500); color: white; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);">

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

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

 <div id="countdown" style="display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px;">

   <!-- Box Giorni -->

   <div style="background-color: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; width: 80px;">

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

     <div style="font-size: 14px;">Giorni</div>

   </div>

   <!-- Box Ore -->

   <div style="background-color: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; width: 80px;">

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

     <div style="font-size: 14px;">Ore</div>

   </div>

   <!-- Box Minuti -->

   <div style="background-color: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; width: 80px;">

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

     <div style="font-size: 14px;">Min</div>

   </div>

   <!-- Box Secondi -->

   <div style="background-color: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; width: 80px;">

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

     <div style="font-size: 14px;">Sec</div>

   </div>

   <!-- Box Cronometro -->

   <div style="background-color: rgba(255, 255, 255, 0.2); padding: 15px; border-radius: 10px; width: 150px; display: flex; flex-direction: column; align-items: center; text-align: center; margin-left: 2px;">

     <span id="stopwatch" style="font-size: 32px; font-weight: bold;">00:00:00</span>

     <div style="font-size: 14px;">Cronometro</div>

   </div>

 </div>

</div>

<style>

 /* Stile del pannello */

 #offer-panel {

   text-align: center !important;

   font-family: Arial, sans-serif;

   margin: 10 auto; /* Centra il pannello */

   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%; /* Larghezza massima del pannello */

   width: 75%; /* Adattabile al 90% della larghezza dello schermo */

   min-width: 260px; /* Larghezza minima */

   overflow: hidden; /* Evita contenuti che escono dal pannello */

 }

 /* Contenitore dei box */

 #countdown {

   display: flex;

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

   align-items: center;

   flex-wrap: wrap; /* Consente il wrapping per schermi piccoli */

   gap: 10px; /* Spazio tra i box */

 }

 /* Stile per i box */

#countdown > div {

  background-color: rgba(255, 255, 255, 0.2);

  padding: 10px;

  border-radius: 10px;

  width: 120px; /* Larghezza fissa per i box */

  text-align: center;

  box-sizing: border-box; /* Padding incluso nella larghezza */

  overflow: hidden; /* Impedisce ai contenuti di uscire dai box */

}

/* Spaziatura per il box Cronometro */

/* Specifico per il box del cronometro */

   #countdown > div:last-child {

   margin-left: 12px !important; /* Sposta il cronometro verso destra */

}

 /* Testo nei box */

 #countdown > div span {

   font-size: 2rem; /* Dimensione testo */

   font-weight: bold;

   display: block; /* Forza il blocco per il testo */

 }

 #countdown > div div {

   font-size: 1rem;

   text-align: center; /* Centra la scritta */

 }

 /* Media query per schermi piccoli */

 @media screen and (max-width: 600px) {

   #countdown {

     flex-wrap: wrap; /* Consente il wrapping */

   }

   #countdown > div {

     width: 90px; /* Riduce la larghezza dei box */

   }

   #countdown > div span {

     font-size: 1.5rem; /* Ridimensiona il testo */

   }

 }

</style>

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

 const offerDays = 5; // Cambia il valore per personalizzare i giorni

 // Calcola la data di scadenza

 const expiryDate = new Date();

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

 // Variabili del cronometro

 let startTime = new Date();

 let stopwatchInterval;

 // 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 del countdown

     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>

     `;

     clearInterval(stopwatchInterval); // Ferma il cronometro

   }

 }

 // Aggiorna il cronometro

 function updateStopwatch() {

   const now = new Date();

   const elapsedTime = now - startTime;

   const hours = String(Math.floor(elapsedTime / (1000 * 60 * 60))).padStart(2, '0');

   const minutes = String(Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');

   const seconds = String(Math.floor((elapsedTime % (1000 * 60)) / 1000)).padStart(2, '0');

   document.getElementById("stopwatch").innerText = `${hours}:${minutes}:${seconds}`;

 }

 // Inizia il cronometro

 stopwatchInterval = setInterval(updateStopwatch, 1000);

 // Esegui il countdown ogni secondo

 setInterval(updateCountdown, 1000);

</script>