HTML + CSSOverlays

Sala de espera virtual con turno

Una cola de entradas con tu puesto en dígitos que ruedan, una fila que avanza y el aviso de que te toca.

Ajustes

16px
1x

Código

<div class="uvq13-que"><div class="pgx" aria-hidden="true"><p class="bd">Gira 2027</p><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Volver a la cola</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">Sala de espera</p><div class="w1"><p class="ti" id="uvq13-que-t">Estás en la cola</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">personas delante de ti</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>Tiempo estimado</span> <b><span class="eta">4</span> min</b></p><label class="nt"><input type="checkbox" class="sw"><span>Avísame cuando sea mi turno</span></label><button type="button" class="lv">Salir de la cola</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">Es tu turno</p><p class="lb">Tienes 10 minutos para elegir tus entradas.</p><button type="button" class="en">Entrar a comprar</button></div><p class="sr" aria-live="polite"></p></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Las grandes ventas de entradas meten a la gente en una cola, y este overlay hace legible la espera. Tu puesto baja en dígitos grandes que ruedan, una fila de puntos camina hacia la puerta, el tiempo estimado se actualiza y un interruptor ofrece avisarte. Encaja en conciertos, lanzamientos y rebajas.

El color principal pinta la página, tu punto y los botones, y el secundario la insignia de éxito. Conecta el contador a la posición real de tu cola en lugar del temporizador, y conserva el botón de salir para que también se pueda abandonar con Escape.