Ciao Eric, grazie mille per la tua risposta! Quello che mi hai mostrato corrisponde a ciò che avevo già provato inizialmente, senza però raggiungere l'obiettivo desiderato.

Per questa ragione avevo cercato strade alternative con impostazioni particolari.

La questione della data è chiara e intuitiva per chiunque. 

Il punto fondamentale, dal mio punto di vista (e probabilmente secondo la maggior parte degli utilizzatori), è che Flip Clock dovrebbe essere concepito diversamente o, meglio ancora, dovrebbe offrire una maggiore flessibilità.

Per chi utilizza questo prodotto nell'e-commerce, sempre secondo la mia opinione, risulta poco utile o, per essere più precisi, piuttosto limitato.

Non so se questo prodotto sia una vostra creazione o se venga fornito tramite licenza, ma certamente avrebbe bisogno di un aggiornamento significativo. Come spesso accade, ho l'impressione che ciò che sto cercando difficilmente sarà implementato. Se dovessi sbagliarmi, ti chiedo di avvisarmi. In caso contrario, cercherò soluzioni integrabili (con codice HTML) su altre piattaforme.

prova 4 invio

...!... non si vede nessun allegato...!...

... ho allegato regolarmente un file x TEST solo per riferimento a questo Topic:   https://helpcenter.websitex5.com/en/post/270903

... peso ed estensione devono rispettare la nota della finetra per gli allegati:

Allegato:(jpg, png, gif, iwp, zip, max 1024KB)

...

.

.

Ciao KolAsim, ti ringrazio della risposta, nella prima parte del post, per due giorni non riuscivo ad allegare un semplice file di testo. 

Prova 4 invio, non c erano allegati...era solo una prova di invio dato che il messaggio Postato il 19/04/2025 10:35:07  dopo molti invii non riusciva a visualizzarsi

Se non utilizzassi l'opzione della data, in teoria potrei inserire un semplice conto alla rovescia.

Ipotizziamo di avere un'offerta valida per 5 giorni.

Inserisco il contatore numerico impostato su 5 e avvio il conto alla rovescia. L'aspettativa è che, quando un cliente visualizza la pagina, il conto parta da 5 e si azzeri progressivamente. (o eventualmente riparti, tramite l opzione selezionata dal numero impostato)

Tuttavia, per esigenze di marketing, il contatore viene posizionato in fondo alla pagina, quindi è necessario effettuare uno scroll per raggiungerlo. Ciò comporta un problema: quando il cliente arriva al fondo e visualizza il contatore, questo potrebbe non partire da 5, ma da un valore inferiore, per esempio 2. Questo accade perché il conteggio si avvia all'apertura della pagina, non al momento della visualizzazione dell'elemento.

Ancora più problematico, il conto alla rovescia non si ferma a 0, ma prosegue in negativo (-1, -2, -3...). Questo scenario rischia di creare confusione: un potenziale cliente che vede un -1 potrebbe trovarlo illogico o fuorviante. Sarebbe utile avere un'opzione per controllare il comportamento del contatore e scegliere se farlo proseguire in negativo oppure fermarsi a zero. Tuttavia, questa impostazione non è disponibile.

Conclusione: allo stato attuale, per le mie esigenze (e molto probabilmente per la maggior parte degli utenti), il Flip Clock risulta quasi inutilizzabile, limitato dalle opzioni presenti.

Buongiorno Alessandro,
riporterò i tuoi feedback sull'oggetto, ma per una soluzione rapida ti consiglio, come consideravi di fare, di valutare l'utilizzo di soluzioni tramite codice aggiuntivo per implementare una contatore più adatto per le tue specifiche esigenze.

qualche esempio?....se la risposta non va contro le regole del forum...

Grazie

ps: comunque il Marketing é sempre in evoluzione, avere maggiore flessibilitá sugli oggetti, piu opzioni etc...aiuta a vendere anche di piu´...

Mha.....un semplice terra terra da mettere in oggetto html. Se vuoi qualcosa di più professionale mi hai dato una idea per studiarci sopra e metterlo nella collezione degli smanettoni.

<footer>
<div id="offer-panel">
<p>Tempo rimanente per l'offerta: <span id="countdown"></span></p>
</div>
</footer>

<script>
// Data di scadenza: 5 giorni dal momento dell'inserimento
const expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 5);

// 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);

// Mostra il countdown su una sola linea
document.getElementById("countdown").innerText = `${days}g ${hours}h ${minutes}m ${seconds}s`;
} else {
// Messaggio una volta terminato il countdown
document.getElementById("countdown").innerText = "Offerta scaduta.";
}
}

// Aggiorna il countdown ogni secondo
setInterval(updateCountdown, 1000);
</script>

Oppure questo ancora da implementare come grafica:

<div id="offer-panel" style="text-align: center; font-family: Arial, sans-serif; margin: 20px;">
<h1 style="color: #2E86C1;">Offerta Speciale</h1>
<p style="font-size: 20px;">Tempo rimanente:</p>
<div id="countdown" style="display: flex; justify-content: center; gap: 10px;">
<div style="border: 2px solid #2E86C1; padding: 10px; border-radius: 8px; width: 60px;">
<span id="days" style="font-size: 24px; font-weight: bold; color: #E74C3C;">0</span>
<div style="font-size: 14px; color: #555;">Giorni</div>
</div>
<div style="border: 2px solid #2E86C1; padding: 10px; border-radius: 8px; width: 60px;">
<span id="hours" style="font-size: 24px; font-weight: bold; color: #E74C3C;">0</span>
<div style="font-size: 14px; color: #555;">Ore</div>
</div>
<div style="border: 2px solid #2E86C1; padding: 10px; border-radius: 8px; width: 60px;">
<span id="minutes" style="font-size: 24px; font-weight: bold; color: #E74C3C;">0</span>
<div style="font-size: 14px; color: #555;">Min</div>
</div>
<div style="border: 2px solid #2E86C1; padding: 10px; border-radius: 8px; width: 60px;">
<span id="seconds" style="font-size: 24px; font-weight: bold; color: #E74C3C;">0</span>
<div style="font-size: 14px; color: #555;">Sec</div>
</div>
</div>
</div>

<script>
// 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);

// 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: #E74C3C;">Offerta Scaduta</h1>
`;
}
}

// Esegui il countdown ogni secondo
setInterval(updateCountdown, 1000);
</script>

I giorni li scegli tu sul paragrafo che ti ho lasciato in grassetto ma ripeto è robbetta per chi si accontenta.

Grazie Roberto, sto testando entrambi i codici. Ci aggiorniamo ...

Ciao Roby... un tempo c era un forum alternativo a quello ufficiale, parliamo della preistoria di Incomedia dove volenterosi offrivano aiuti a vario livello.

Il sito da te indicato é molto utile, congratulazioni i codici sono gratuiti veri? ...poi ho visto anche la sezione a pagamento come hanno altri Big :)  di Incomedia, esempio Template.

Quello che mi piace, e il discorso crescita attorno a Incomedia, nonostante tutto qualcuno ci crede ancora e come dice un Big del Forum...il programma ha potenzialitá (...non vado oltre il discorso potenzialitá, perché sappiamo tutti i pro e i contro).

Hai fatto bene a inviarmi altri codici perché ieri stavo sviluppando con Ai il tuo e come sempre, dopo infiniti tentativi non si arriva da nessuna parte, c era un problema di visualizzazione del conto alla rovescia.

Grazie, ancora complimenti a te e anche agli altri (scritto genericamente) che hanno creato utili e moderni Template con x5

Mi permetto un feedback, il secondo link quello che presenta anche il cronometro ha alcuni vantaggi.

Personalmente ritengo che puo disorientare un po con tutti questi numeri e non lo scrivo in senso negativo, anzi come esempio prendo i vari casino dove luci e colori creano un clima particolare in cui il giocatore continua a spendere soldi.

In sintesi, puo essere utile per accrescere il panico di acquisto dell offerta a tempo ma dovrebbe (o potrebbe) essere piu distante dal conto alla rovescia, esempio un 2 centimetri

Dimenticavo: puoi anche utilizare una scorciatoia senza con questo fare due listati ossia individuia il css originario che è questo

/* 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 */}

e aggiungi

/* Spaziatura per il box Cronometro */ #countdown > div:last-child { margin-right: 2px; /* Aggiunge spazio di 2px a destra del cronometro */ }

Il listato originario a quel punto ti si presenterà cosi:

/* 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 */ #countdown > div:last-child { margin-right: 2px; /* Aggiunge spazio di 2px a destra del cronometro */ }

In ogni caso sto completando il tuo feedback per vedere i risultati ma dubito che ci saranno problemi a più basse risoluzioni. 

Annulla tutto e ti allego tt il codice con il cronometro spostato di 12px a destra. Valuta il comportamento sui device.

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

<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>

<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>

<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 accanto ai secondi -->
<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;">
<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>

<script>
// 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>

----------

Regolati eventualmente anche con l'aumento o diminuzione del GAP - (distanza tra i box) - 

Se desideri cambiare il colore ad esempio un arancio con sfumature rosse che richiamano l'attenzione del visitatore sta tt qui:

ESEMPIO 3

... potrebbe interessarti, qui ne trovi un'alternativa pre FilpClock  scaricabile postato da Mirko   di oltre una decina di anni fa, penso ancora molto bello e facile:         https://helpcenter.websitex5.com/en/post/103378

.

ciao

.

Lo dico per non far perdere tempo a qualcuno: fino alla 20.1.8 si importa lo iwzip del post ma non si apre perchè chiede ancora versioni più vecchie. Ero curioso ma concordo sul fatto che alla fine che in rete ce ne sono tanti e tra l'altro volendo si può anche personalizzare quello di ws di default. A me personalmente non mi è mai servito.

Ringrazio tutti per l’interesse dimostrato.

Il problema principale del FlipClock riguarda i nomi in inglese, che, a mio avviso, dovrebbero essere personalizzabili di default.

Un secondo problema è legato al conteggio, che si attiva all’apertura della pagina anziché alla sua visualizzazione. Mi spiego con un esempio concreto: se decido di proporre un’offerta valida per 5 giorni, inserendo un conto alla rovescia da 5 a 0, accade che, se apro la pagina e mi soffermo a leggere le varie informazioni presenti, scorrendo in seguito verso il fondo, dove ho posizionato il FlipClock (non visibile all’apertura), il potenziale cliente potrebbe leggere l’offerta come valida per 5 giorni ma, una volta raggiunto il fondo della pagina, trovare il numero -20. A quel punto, si chiederebbe: “Cosa significa -20?”. Questa situazione genera confusione e potrebbe portare alla chiusura della pagina.

Il conto alla rovescia dovrebbe includere un’opzione per fermarsi allo 0. Potrebbe anche esserci una seconda opzione per consentire il conteggio in negativo, ma, nella forma attuale, il FlipClock non permette modifiche fondamentali alle impostazioni. Probabilmente il problema principale è che, con il tempo che avanza, questi strumenti non vengono aggiornati o sviluppati per adattarsi alle nuove esigenze. La domanda che mi pongo, osservando il codice fornito da Roberto, è: davvero un codice non può essere migliorato? A quanto pare, il FlipClock è rimasto invariato per anni.

Non fraintendetemi, non sto cercando di criticare ma di trovare soluzioni. Con il codice si può fare di tutto!

La mia priorità era un’altra: desideravo un’azione pubblicitaria valida per 30 giorni dall’apertura della pagina.

Oggi invio l’offerta a Paolo e lui vede 30 giorni nel contatore, ma se domani la spedisco a Luisa dicendo che l’offerta è valida per 30 giorni, lei ne vedrà solo 29… Capisco che si tratta di esigenze personali, ma queste vanno adattate ai tempi. Tempi che oggi sono in rapido mutamento, mentre alcuni codici rischiano di diventare obsoleti.

Roberto, nei prossimi giorni valuterò le tue idee. Tengo a precisare che avevo già risolto la questione della lingua grazie al tuo secondo link, che mi ha permesso di modificare il codice per personalizzare la lingua di visualizzazione.

Il codice è gratuito, ma richiedi un link o una nota per riconoscere il creatore, giusto? Cosa preferiresti che inserissi?

Con Giancarlo e KolAsim, ho sempre inserito le note sul creatore, sia per i codici complessi che per quelli più semplici.

Esattamente! Ti basta lasciare i crediti che trovi sul codice tipo "credit by pincopallo 2025" e basta ma è una regola universale mica me la sono inventata io che poi venga attuata o meno dipende dalla serietà della persona. Se non trovi nulla puoi metterci pure il tuo nome. SE tu guardi bene ci sono pezzi di codici negli esempi con crediti a Kolasim e nello steso listato trovi altre routine che io ho aggiunto con i miei crediti quindi modificando il sorgente iniziale concesso dall'autore a cui comunque rimangono i propri crediti esempio:

listato codice by kolasim

Codice

Funzione aggiunta by MAX 2025

codice.

Tranquillo ALE ...dacci sotto e smanetta a martello!

Per il resto da quello che leggo i contatori in esempio non vanno bene perchè quello che chiedi è tecnicamente possibile solo utilizzando un approccio professionale basato su un back-end o sfruttando tecnologie lato client con gestione dei dati mi spiego meglio: innanzitutto devi mettere in piedi un DB per associare ogni utente a una data d'inizio specifica per il countdown. Quando l'offerta viene inviata a PINCOPALLO, il sistema registra l'ID di PINCOPALLO e il relativo start date (ad esempio, oggi). Se l'offerta viene inviata invece a BIANCOPALLA il giorno successivo, il sistema calcola una scadenza indipendente per lei. Nel database salvi user_id, start_date, e duration (es. 30 giorni). Nel front-end: quando l'utente accede, il sistema recupera i dati e mostra il countdown personalizzato calcolando start_date + duration - current_date.

Viceversa, se vuoi utilizzare un approccio più semplice ma con qualche riserva di piena fattibilità, tipo che il countdown si adatti dinamicamente al primo accesso dell'utente, senza necessità di registrare dati preventivamente,  puoi gestirlo utilizzando tecniche lato client e browser, in combinazione con il calcolo dinamico del tempo basato su ogni accesso. Esempio:

Devi Usare il Local Storage per Salvare il Primo Accesso per ogni utente e come si fa? Bella domanda!

Quando un utente accede per la prima volta, il browser può salvare la data di accesso nel Local Storage. Ogni volta che l'utente ritorna, il countdown verrà calcolato rispetto alla data salvata. Vien da se che due soggetti pur avendo fatto accesso in diversi giorni l'uno dall'altro, il countdown inizierà a segnare dal momento della verifica sul salvataggio della data per quell'utente che aveva fatto accesso. In pratica , ogni volta che l'utente accede, la funzione calcola la scadenza in base alla data salvata e alla durata dell'offerta (30 giorni).

Facciamo un esempio ancora più semplice.

Oggi è il 27 aprile 2025. Io Roberto faccio accesso sul tuo sito e trovo l'offerta. Il mio accesso verrà salvato in un local storage.

Dopodomani 28 aprile 2025 Marco fa accesso a tuo sito e trova l'offerta. Il suo accesso verrà salvato il local storage.

Se tra 2 giorni Roberto e Marco faranno accesso al tuo sito al primo gli verrà calcolato il tempo salvato il giorno 27 mentre a Marco il giorno 28. E' questo quello che vorresti? 

Anche se non ho avuto modo di provare ecco il codice aggiornato. Provalo e fammi sapere.

<!-- By max 2025 - accesso differenziato -->
<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;
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>

---------------

Se ti stai domandando "bene finalmente ho risolto" sbagli. Se uno dei due utenti ha un settaggio del Browser che scarica la cache il conteggio dei 30 gg durerà all'infinito inoltre non funzionerà in contesti multi-dispositivo, poiché i dati sono memorizzati solo sul dispositivo specifico di accesso, ecco perchè l'opzione del DB è preferibile come prima opzione ma bisogna essere più che esperti. Infatti... per evitare problemi ci vorrebbe una Autenticazione univoca dell'utente. Ossia bisogna collegare l'offerta a un ID utente specifico (es. email, username, o un token univoco). Quando accede da un dispositivo diverso, il sistema verifica l'ID e recupera la data originale. In questo modo, indipendentemente dal dispositivo o IP, il sig. Rossi avrà sempre lo stesso countdown tramite il salvataggio della data di inizio dell'offerta in un database centralizzato. Tutte le connessioni devono interrogare lo stesso database per recuperare la data di inizio. A quel punto se il sistema non trova la data salvata localmente (es. cookie o local storage cancellati), deve obbligare l'utente a rieseguire l'autenticazione e non azzerare il countdown. 

E' mio parere che un countdown semplice anche personalizzato nella grafica e qualcche piccola funzione in più sia la cosa migliore perchè non ci sono dipendenze su Local Storage, database o parametri personalizzati.

A quel punto il countdown si baserà semplicemente su una data di scadenza prefissata (es. 30 giorni per tutti). Inoltre ti sarà più facile comunicare l'offerta a un pubblico ampio senza rischi di discrepanze o confusione tra clienti che vedono valori diversi. Altra cosa da non sottovalutare è la coerenza tra dispositivi e browser in quanto un countdown globale non viene influenzato da cancellazioni di dati o impostazioni del browser. È visibile e affidabile per tutti gli utenti.

Le richieste di funzionalità particolari, come countdown personalizzati con funzioni legate al DB, a volte nascono da una percezione errata che rendano l'offerta più "moderna", "flessibile"o addirittura "unica" o da Aziende di alto spessore che non hanno problemi a pagare fior di euro per i programmatori. Spesso, però, la complessità tecnica supera i benefici concreti ma è una mia opinione personale.

Ciao Roberto, non mi aspettavo che creassi il codice, e devo dire che sono davvero molto, molto sorpreso! Speriamo che il tempo che hai dedicato possa tornare utile anche ad altri utenti.

Condivido pienamente il tuo pensiero: evitiamo complicazioni, anche se devo dirti che, con l’evoluzione continua, nascono sempre più esigenze specifiche perché il marketing si sta facendo sempre più mirato.

Considerando la tua lunga email, vorrei approfondire questo concetto. Un tempo si inviava la classica email a tutti i contatti, ma oggi le newsletter devono essere personalizzate. Colgo l’occasione per condividere un'idea su quello che, teoricamente, Incomedia potrebbe fare in futuro. Mi scuso, sono sicurissimo che non avremo cambiamenti immediati, ma voglio completare il ragionamento.

In teoria, X5 dovrebbe consentire anche l’invio di newsletter personalizzate. Mi spiego meglio: nel pannello di controllo possiamo vedere gli ordini dei clienti. Se, ad esempio, un cliente fedele acquista spesso scarpe da tennis, sarebbe utile generare email automatiche (o preimpostate) con offerte scontate per quel tipo di prodotto. Allo stesso modo, se un altro cliente preferisce scarpe classiche, potrebbe partire un'azione mirata specifica per quella clientela.

Il marketing sta cambiando: non è più efficace inviare una newsletter generica con una promozione valida per 30 giorni. Potrebbero essere necessarie offerte personalizzate, come per il compleanno, il che richiede conteggi e tempistiche specifiche per ciascun cliente. Tuttavia, questi lavori non spettano certo a te (il tuo contributo, come quello di altri, è già straordinario!).

Non si tratta di fantascienza, ma credo che il tutto dovrebbe essere gestito direttamente dal software del web.

Ah, Roberto, la parola "crediti" mi spaventa un po’ :) :) :) mi dà l’idea di dover dei soldi a qualcuno!

Comunque, potrei usare

/* custom by Roberto - www.losmanettone.it */

Mi sembra completo, ma se vuoi migliorarlo, nessun problema!

Un saluto e grazie a tutti!

P.S. Le mie esigenze sono solo indicative, non prioritarie. Ho semplicemente tracciato una rotta che, dal mio punto di vista – modestia a parte :) – sarebbe utile seguire!

Va bene uguale ma devi stare tranquillo: c'è solo ua sezione a pagamento sul sito che è quella dei template e basta.Tutto il resto è per la comunità aggratisse.

Daje dacci sotto e smanetta a martello.

....forse sarebbe utile coinvolgere una società esterna per proporre a Incomedia l'integrazione di newsletter mirate, qualora ne avesse bisogno e la Direzione desiderasse affidare il progetto a un partner esterno.

Potrebbe trattarsi di un lavoro ben strutturato e di alta qualità, inizialmente offerto a un prezzo competitivo per avviare una collaborazione duratura, che vada oltre il singolo progetto occasionale.

Questo è solo un commento che ho scritto un po' egoisticamente pensando alle mie esigenze :) :)