Pulsa º para abrir o cerrar la consola

HTML + CSSOverlays

Quake-style drop-down console

A text console that drops from the top with the backquote key, keeps a command history and answers a few commands.

Settings

16px
1x

Code

<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>Console</span></button><p class="hn">Press the key left of 1 to open or close the console</p><div class="cn" role="dialog" aria-modal="true" aria-label="Console"><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>Type help to see the commands</p></div><label class="ln"><span aria-hidden="true">]</span><input aria-label="Command" autocomplete="off" spellcheck="false"></label><div class="lib" hidden><p data-c="help">Commands: help, clear, god, noclip, fps, quit</p><p data-c="god">God mode on</p><p data-c="noclip">Walk through walls: yes</p><p data-c="fps">125 frames per second</p><p data-c="?">Unknown command</p></div></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Overlays

See all Overlays

Where to use it

Old shooters hid their console behind the key left of 1, and this overlay brings it back for web apps. The panel slides down over the top two thirds with scanlines and amber monospace text, the log scrolls as you type and the arrow keys walk through the history. Good for debug panels, admin tools and playful developer pages.

Use the two colors for the amber text and the dark glass, and rename the console with the text field. Add your own answers inside the hidden library list, and Escape or the same key fold it away again.