Pulsa º para abrir o cerrar la consola

HTML + CSSOverlays

Consola desplegable estilo Quake

Una consola de texto que cae desde arriba con la tecla º, guarda el historial y responde a unos cuantos comandos.

Ajustes

16px
1x

Código

<div class="uvq13-qk"><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" aria-keyshortcuts="Backquote"><kbd>º</kbd><span>Consola</span></button><p class="hn">Pulsa º para abrir o cerrar la consola</p><div class="cn" role="dialog" aria-modal="true" aria-label="Consola"><b class="tt" aria-hidden="true">Consola · v27</b><div class="lg" role="log" aria-live="polite"><p class="sys">AIMRAN 27.0.1</p><p>Escribe help para ver los comandos</p></div><label class="ln"><span aria-hidden="true">]</span><input aria-label="Comando" autocomplete="off" spellcheck="false"></label><div class="lib" hidden><p data-c="help">Comandos: help, clear, god, noclip, fps, quit</p><p data-c="god">Modo dios activado</p><p data-c="noclip">Atravesar paredes: sí</p><p data-c="fps">125 fotogramas por segundo</p><p data-c="?">Comando desconocido</p></div></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 shooters de antes escondían su consola tras la tecla de la izquierda del 1, y este overlay la recupera para aplicaciones web. El panel baja sobre los dos tercios de arriba con líneas de barrido y texto ámbar monoespaciado, el registro avanza mientras escribes y las flechas recorren el historial. Sirve para paneles de depuración, herramientas internas y páginas para desarrolladores con humor.

Ajusta con los dos colores el texto ámbar y el cristal oscuro, y cambia el nombre de la consola con el texto. Añade tus propias respuestas en la lista oculta, y Escape o la misma tecla la vuelven a recoger.