Compte à rebours « Préviens-moi »

{%- comment -%} NAHNAH AI · Compte à rebours « Préviens-moi » {%- endcomment -%}
<section class="nn-compte-a-rebours-previens-moi" data-fin="{{ section.settings.date_lancement | escape }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" hidden>
  <h2 class="nn-compte-a-rebours-previens-moi__titre">{{ section.settings.titre | escape }}</h2>
  <p class="nn-compte-a-rebours-previens-moi__temps" aria-live="polite">00 : 00 : 00 : 00</p>
  {%- form 'customer', class: 'nn-compte-a-rebours-previens-moi__formulaire' -%}
    <input type="hidden" name="contact[tags]" value="{{ section.settings.etiquette | escape }}">
    {%- if form.posted_successfully? -%}
      <p class="nn-compte-a-rebours-previens-moi__merci">{{ section.settings.texte_merci | escape }}</p>
    {%- else -%}
      <label class="nn-compte-a-rebours-previens-moi__label" for="nn-previens-{{ section.id }}">{{ section.settings.texte_label | escape }}</label>
      <div class="nn-compte-a-rebours-previens-moi__ligne">
        <input id="nn-previens-{{ section.id }}" type="email" name="contact[email]" required autocomplete="email" placeholder="ton@email.fr">
        <button type="submit">{{ section.settings.texte_bouton | escape }}</button>
      </div>
      {%- if form.errors -%}<p class="nn-compte-a-rebours-previens-moi__erreur">{{ form.errors | default_errors }}</p>{%- endif -%}
    {%- endif -%}
  {%- endform -%}
</section>
{% schema %}
{"name":"Rebours Préviens-moi","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Ouverture des portes dans"},
{"type":"text","id":"date_lancement","label":"Date de lancement réelle (AAAA-MM-JJ HH:MM)"},
{"type":"text","id":"texte_label","label":"Texte au-dessus du champ","default":"Reçois un e-mail dès l'ouverture"},
{"type":"text","id":"texte_bouton","label":"Bouton","default":"Préviens-moi"},
{"type":"text","id":"texte_merci","label":"Message de confirmation","default":"C'est noté ! Tu seras prévenu(e) en premier."},
{"type":"text","id":"etiquette","label":"Étiquette client ajoutée","default":"liste-attente"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#ECFEFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#083344"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#0891B2"}],
"presets":[{"name":"Compte à rebours « Préviens-moi »"}]}
{% endschema %}

{% stylesheet %}
/* Bloc liste d'attente avec champ e-mail */
.nn-compte-a-rebours-previens-moi{margin:24px 16px;padding:32px 20px;border-radius:20px;background:var(--nn-fond);color:var(--nn-texte);text-align:center}
.nn-compte-a-rebours-previens-moi__titre{margin:0 0 8px;font-size:clamp(20px,4.5vw,28px)}
.nn-compte-a-rebours-previens-moi__temps{margin:0 0 20px;font-size:clamp(30px,8vw,56px);font-weight:800;font-variant-numeric:tabular-nums;color:var(--nn-accent)}
.nn-compte-a-rebours-previens-moi__label{display:block;margin-bottom:8px;font-size:14px}
.nn-compte-a-rebours-previens-moi__ligne{display:flex;gap:8px;max-width:440px;margin:0 auto}
.nn-compte-a-rebours-previens-moi__ligne input{flex:1;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--nn-texte) 25%,transparent);font:inherit}
.nn-compte-a-rebours-previens-moi__ligne button{padding:12px 18px;border:0;border-radius:10px;background:var(--nn-accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:filter .2s}
.nn-compte-a-rebours-previens-moi__ligne button:hover{filter:brightness(1.1)}
.nn-compte-a-rebours-previens-moi__merci{font-weight:600;animation:nn-compte-a-rebours-previens-moi-apparait .5s ease}
.nn-compte-a-rebours-previens-moi__erreur{color:#B91C1C;font-size:13px}
@keyframes nn-compte-a-rebours-previens-moi-apparait{from{opacity:0;transform:translateY(6px)}}
@media (max-width:480px){.nn-compte-a-rebours-previens-moi__ligne{flex-direction:column}}
@media (prefers-reduced-motion: reduce){.nn-compte-a-rebours-previens-moi__merci{animation:none}.nn-compte-a-rebours-previens-moi__ligne button{transition:none}}
{% endstylesheet %}

{% javascript %}
// Compte à rebours jusqu'au lancement ; section masquée sans date ou après la date
(function () {
  function deux(n) { return (n < 10 ? '0' : '') + n; }
  document.querySelectorAll('.nn-compte-a-rebours-previens-moi').forEach(function (bloc) {
    var fin = new Date((bloc.getAttribute('data-fin') || '').replace(' ', 'T')).getTime();
    if (isNaN(fin) || fin <= Date.now()) { return; }
    var zone = bloc.querySelector('.nn-compte-a-rebours-previens-moi__temps');
    function maj() {
      var s = Math.floor((fin - Date.now()) / 1000);
      if (s <= 0) { bloc.hidden = true; clearInterval(t); return; }
      zone.textContent = deux(Math.floor(s / 86400)) + ' : ' + deux(Math.floor(s / 3600) % 24) + ' : ' + deux(Math.floor(s / 60) % 60) + ' : ' + deux(s % 60);
      bloc.hidden = false;
    }
    var t = setInterval(maj, 1000);
    maj();
  });
})();
{% endjavascript %}