HTML + CSSOverlays

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

16px
1x

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Overlays

Alle ansehen: Overlays

Wofü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.