HTML + CSSOverlays

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

16px
1x

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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Overlays

Voir tout : Overlays

Où 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.