<!-- custom by Max - lo smanettone.it 2025 accesso differenziato per utente-->

<div id="offer-panel" style="text-align: center; font-family: Arial, sans-serif; margin: 20px; padding: 20px; border-radius: 15px; background: linear-gradient(45deg, #4A90E2, #002F6C); 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;

   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: 75%;

   min-width: 260px;

   overflow: hidden;

 }

 /* Contenitore dei box */

 #countdown {

   display: flex;

   justify-content: space-evenly;

   align-items: center;

   flex-wrap: wrap;

   gap: 10px;

 }

 /* Stile per i box */

 #countdown > div {

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

   padding: 10px;

   border-radius: 10px;

   width: 120px;

   text-align: center;

   box-sizing: border-box;

   overflow: hidden;

 }

 /* Spaziatura per il box Cronometro */

 #countdown > div:last-child {

   margin-left: 12px !important;

 }

 /* Testo nei box */

 #countdown > div span {

   font-size: 2rem;

   font-weight: bold;

   display: block;

 }

 #countdown > div div {

   font-size: 1rem;

   text-align: center;

 }

 /* Media query per schermi piccoli */

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

   #countdown {

     flex-wrap: wrap;

   }

   #countdown > div {

     width: 90px;

   }

   #countdown > div span {

     font-size: 1.5rem;

   }

 }

</style>

<script>

 // Durata dell'offerta (modificabile)

 const offerDuration = 30; // Durata in giorni

 // Chiave per Local Storage

 const offerKey = "offer_start_date";

 // Controlla se esiste già una data di inizio

 let offerStartDate = localStorage.getItem(offerKey);

 if (!offerStartDate) {

   // Salva la data corrente come data di inizio

   offerStartDate = new Date().toISOString();

   localStorage.setItem(offerKey, offerStartDate);

 }

 // Calcola la data di scadenza

 const startDate = new Date(offerStartDate);

 const expiryDate = new Date(startDate);

 expiryDate.setDate(startDate.getDate() + offerDuration);

 // Funzione per aggiornare 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

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

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

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

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

   } else {

     document.getElementById("offer-panel").innerHTML = `<h1 style="color: white;">Offerta Scaduta</h1>`;

   }

 }

 // Funzione per aggiornare il cronometro

 function updateStopwatch() {

   const now = new Date();

   const elapsedTime = now - new Date(offerStartDate);

   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}`;

 }

 // Aggiorna il countdown e cronometro

 setInterval(updateCountdown, 1000);

 setInterval(updateStopwatch, 1000);

</script>