The landing page for cyberdeck.tools — a deck of cyberpunk / TTRPG browser tools. A single static index.html (markup + inline CSS) served via GitHub Pages. No backend, no build step.
| Tool | Status | Description |
|---|---|---|
| COMMLINK | online | Cyberpunk dialog / chat screenshot constructor. PNG export. → /commlink-ui/ |
| CHRONOS | online | Cyberpunk calendar constructor. Different colors, PNG export. → /chronos-ui/ |
| GRIDMAP | online | Cyberpunk battle-map grid detector. Reports NN×MM, PNG export. → /gridmap-ui/ |
| EIDOLON | online | Cyberpunk token / avatar maker for TTRPG characters. Frames, badges, PNG export. → /eidolon-ui/ |
| SINFORGE | online | Cyberpunk document constructor. ID cards, badges, keycards. → /sinforge-ui/ |
Live cards link out to the deployed tool; compiling… cards are placeholders for tools not yet shipped. Alpha tools (< 1.0.0) are deployed but hide behind a compiling… card — see below.
A tool that's deployed but still below 1.0.0 gets a hidden alpha card: it looks like compiling…, but it's a real link.
- Clicks 1–2 glitch the card for ~0.5 s (
.waking) and flash▸ alpha build // online— a hint that it's actually alive. - Click 3 saves
cyberdeck:unlocked:<key>inlocalStorageand opens the tool. - Later visits (same browser): the card renders as live, with a yellow
▸ online [alpha] _status. - Ctrl / Shift / Cmd / middle clicks open the link straight away without counting;
prefers-reduced-motionskips the jitter but keeps the counter.
To hide a new pre-1.0 tool this way, write its card as an <a> with class soon and a data-unlock key — the script at the bottom of index.html picks up every [data-unlock] card, no JS changes needed:
<a class="card soon" href="/<tool>-ui/" data-unlock="<tool>" data-augmented-ui="tl-clip br-clip border">
<div class="name">> TOOLNAME_</div>
<div class="desc">One-line description.</div>
<div class="status">▸ compiling…</div>
</a>Do list it in sitemap.xml right away, so search engines can find and index it before launch (its bump_version.py keeps the hub entry's <lastmod> current). Keep it out of the JSON-LD ItemList and the meta descriptions while it's hidden, and set its README row to alpha (hidden) with the link. make_preview.py still lists it as COMPILING.
At 1.0.0, make it a normal live card: class="card live", drop data-unlock, status ▸ online <span class="blink">_</span>; then add it to the JSON-LD / descriptions (it's already in the sitemap) — including TOOL_NAMES in make_langs.py — set the README row to online, and re-run make_langs.py + make_preview.py. (Leftover cyberdeck:unlocked:<key> entries in visitors' browsers are harmless.)
Just open the file:
xdg-open index.html # Linux
open index.html # macOS
start index.html # Windows
No server needed — augmented-ui and the fonts load from CDN.
The hub exists in 8 languages: / (English) plus ru/, fr/, de/, es/, it/, ja/, zh/. The language folders are generated by make_langs.py from index.html — never edit them. Each is a fully translated static copy (strings from the table at the top of the script) with its own canonical / hreflang / og:locale / JSON-LD, and its tool cards link to the same language's tool pages (/commlink-ui/ru/ …). The script also rewrites the hub's own entries in sitemap.xml. The EN ▾ picker in the header switches between them. After any index.html change run:
python make_langs.py
If you change a string that the table translates (title, tagline, card descriptions, the about text), update its EN source line and the translations too — the script stops with an error when an English source string isn't found.
previews/og-<lang>.png (the 1200×630 og:image / twitter:image, one per language) are generated, not screenshotted: a CRT terminal running deck ls, with the program list overflowing off-screen. The tagline and the rows are read from each language's page (shell commands stay English), so regenerate after adding or activating a tool or changing the copy, then re-run make_langs.py so every page points at its image:
python make_preview.py # all languages
python make_preview.py ru ja # just these
Needs Python 3 + Pillow and a Chromium-based browser (Chrome/Edge, or set $CHROME); fonts come from Google Fonts, so it needs a network connection. --html out.html keeps the generated page for tweaking, --seed N reshuffles the glitch characters.
indexnow.py pings IndexNow (Bing, Yandex, Seznam, Naver…) so changed pages get re-crawled in minutes. Run it after a change is pushed and deployed:
python indexnow.py # every URL in sitemap.xml
python indexnow.py eidolon-ui # one tool
The tools' bump_version.py print the exact command after a release. The key file 618928754bdb4e2cc19267e1df0c74d8.txt must stay at the site root — the engines fetch it to verify the pings; keep its name and content in sync with KEY in the script.
Served from the CyberDelaai/CyberDelaai.github.io repo via GitHub Pages, with the cyberdeck.tools apex domain set in CNAME. The sibling tools (commlink-ui, chronos-ui, …) live at their own paths under the same domain.
- Fonts: Share Tech Mono (console-style logo + tool names) and JetBrains Mono (body), loaded from Google Fonts.
- Clipped corners: augmented-ui v2 (CDN) shapes the tool cards (
tl-clip br-clip border) and the donate button. - Scanlines: a fixed full-viewport
body::beforeoverlay (z-index: 9999,pointer-events: none) tints the whole page like a CRT. - Status alignment: cards are flex columns; the
▸ online _line usesmargin-top: autoso it pins to the bottom of every card regardless of description length. Only the_afteronlineblinks. - Donate button: a fixed bottom-right "ghost" link. Invisible by default, occasionally flickers into view (
donateGhostloop); on hover/focus it materializes through a short heavy glitch burst (donateGlitchIn) and stays solid. Falls back to a dim static button for touch devices andprefers-reduced-motion.
If you find these tools useful, you can support development here: boosty.to/cyberdelaai/donate
MIT © 2026 CyberDelaai