Sala de espera
Estás en la cola
personas delante de ti
Tiempo estimado 4 min
Es tu turno
Tienes 10 minutos para elegir tus entradas.
Salle d'attente virtuelle avec rang
Une file d'achat de billets avec ton rang en chiffres qui défilent, une rangée de personnes qui avance et l'annonce de ton tour.
Réglages
Code
<div class="uvq13-que"><div class="pgx" aria-hidden="true"><p class="bd">Tournée 2027</p><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Retour dans la file</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-que-t" aria-describedby="uvq13-que-d"><p class="kk">Salle d'attente</p><div class="w1"><p class="ti" id="uvq13-que-t">Tu es dans la file</p><div class="nb" aria-hidden="true"><span class="dg"><span><b>0</b><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b><b>9</b></span></span><span class="dg"><span><b>0</b><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b><b>9</b></span></span></div><p class="lb" id="uvq13-que-d">personnes devant toi</p><div class="tr" aria-hidden="true"><i class="door"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 21V4.5A1.5 1.5 0 0 1 7.5 3h9A1.5 1.5 0 0 1 18 4.5V21M3 21h18M14.5 12.5v.01"/></svg></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="me"></i></div><p class="et"><span>Temps estimé</span> <b><span class="eta">4</span> min</b></p><label class="nt"><input type="checkbox" class="sw"><span>Préviens-moi quand ce sera mon tour</span></label><button type="button" class="lv">Quitter la file</button></div><div class="w2"><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><p class="ti">C'est ton tour</p><p class="lb">Tu as 10 minutes pour choisir tes billets.</p><button type="button" class="en">Accéder à l'achat</button></div><p class="sr" aria-live="polite"></p></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les grosses ventes de billets placent les acheteurs dans une file, et cet overlay rend l'attente lisible. Ton rang descend en grands chiffres qui défilent, une rangée de points marche vers la porte, le temps estimé se met à jour et un interrupteur propose de te prévenir. Pour un concert, un lancement ou des soldes.
La couleur principale peint la page, ton point et les boutons, la seconde le badge de réussite. Relie le compteur au vrai rang de ta file plutôt qu'au minuteur, et garde le bouton pour quitter, aussi accessible avec Échap.