HTML + CSSOverlays

Teclado de caja fuerte

Un panel de metal cepillado con teclas que se hunden, pilotos que se encienden y una sacudida si el código falla.

Ajustes

16px
1x

Código

<div class="uvq13-sf"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Abrir caja fuerte</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-sf-t"><div class="tp"><p id="uvq13-sf-t">Introduce el código</p><i class="led" aria-hidden="true"></i></div><div class="dp" aria-hidden="true"><i></i><i></i><i></i><i></i></div><p class="st" aria-live="assertive"><span class="e">Código incorrecto</span><span class="o">Abierta</span></p><div class="kp"><button type="button" data-k="1">1</button><button type="button" data-k="2">2</button><button type="button" data-k="3">3</button><button type="button" data-k="4">4</button><button type="button" data-k="5">5</button><button type="button" data-k="6">6</button><button type="button" data-k="7">7</button><button type="button" data-k="8">8</button><button type="button" data-k="9">9</button><button type="button" data-k="del" aria-label="Borrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5.5h10.5A1.5 1.5 0 0 1 21 7v10a1.5 1.5 0 0 1-1.5 1.5H9L3 12zM12 9.5l5 5M17 9.5l-5 5"/></svg></button><button type="button" data-k="0">0</button><button type="button" data-k="x" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><p class="hn">Pista: la columna del medio</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

Los diálogos de PIN suelen ser cuatro casillas vacías, y este se siente como la caja fuerte de un hotel. Acero cepillado con remaches, teclas redondas de metal que se hunden al pulsarlas, puntos ámbar en una pantalla hundida y un piloto que se pone rojo o verde. Un código erróneo sacude el panel y lo reinicia. Sirve para bloqueos parentales, cajas privadas, juegos de escape y códigos de acceso.

El color principal es el piloto de acierto y el secundario el tono del metal. Cambia el código en el script, y escríbelo con los números o Retroceso además de con toques, porque el panel escucha al teclado mientras está abierto.