Mando conectadoJugador 1 · batería 80 %
HTML + CSSToasts

Toast de mando conectado

Un mando de dos colores vibra al emparejarse y sus luces recorren los cuatro jugadores hasta quedarse en el primero.

Ajustes

16px
1x

Código

<div class="uvq09-pad"><button type="button" class="fire">Emparejar otra vez</button><div class="tt" role="status"><span class="gp" aria-hidden="true"><span class="hl"><i class="stk"></i><i class="dp"></i></span><span class="md"><i></i></span><span class="hr"><i class="bt"></i><i class="stk"></i></span></span><span class="tx"><b>Mando conectado</b><small>Jugador 1 · batería 80 %</small><span class="leds" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i></span></span><button type="button" class="rb">Vibrar</button></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 Toasts

Ver todos: Toasts

Dónde usarlo

Las consolas confirman un mando emparejado con una vibración y una fila de luces de jugador, y este toast toma las dos cosas. El mando son dos mitades de color y un centro oscuro hechos con degradados; tiembla una fracción de segundo y cuatro luces hacen un barrido hasta que solo queda encendida la primera. Vibrar lo repite y usa la API de vibración en móviles.

El color principal pinta la mitad derecha y el secundario la izquierda, así que puedes imitar cualquier mando. Cambia el número de jugador y la línea de batería, y enciende otra luz moviendo la regla first-child. Pensado para lanzadores de juegos y apps de acompañamiento.