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.
Virtueller Warteraum mit Position
Eine Ticket-Warteschlange mit rollenden Ziffern für deine Position, einer vorrückenden Menschenreihe und dem Hinweis, wenn du dran bist.
Einstellungen
Code
<div class="uvq13-que"><div class="pgx" aria-hidden="true"><p class="bd">Tour 2027</p><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Zurück in die Warteschlange</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">Warteraum</p><div class="w1"><p class="ti" id="uvq13-que-t">Du bist in der Warteschlange</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">Personen vor dir</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>Geschätzte Zeit</span> <b><span class="eta">4</span> min</b></p><label class="nt"><input type="checkbox" class="sw"><span>Benachrichtige mich, wenn ich dran bin</span></label><button type="button" class="lv">Warteschlange verlassen</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">Du bist dran</p><p class="lb">Du hast 10 Minuten, um deine Karten zu wählen.</p><button type="button" class="en">Jetzt kaufen</button></div><p class="sr" aria-live="polite"></p></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Große Ticketverkäufe schicken Käufer in eine Warteschlange, und dieses Overlay macht das Warten verständlich. Deine Position rollt in großen Ziffern herunter, eine Reihe Punkte läuft zur Tür, die geschätzte Zeit aktualisiert sich und ein Schalter bietet eine Benachrichtigung an. Bei null wird die Karte zur Einladung einzutreten, mit pulsierendem Button und einer Ansage für Screenreader. Passt zu Konzerten, Produktstarts und Rabattaktionen.
Die Hauptfarbe malt Seite, deinen Punkt und die Buttons, die zweite das Erfolgsabzeichen. Verbinde den Zähler mit der echten Position statt mit dem Timer und behalte den Verlassen-Button, damit man auch per Escape aussteigen kann.