filipriec/Tui-pages-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

register is now fully working

Browse Source
This commit is contained in:
Priec
2026-06-02 21:40:40 +02:00
parent 83a80b6e31
commit 93769b3129
8 changed files with 457 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
static/img/terminal-keybindings.svg
View File

@@ -1,71 +1,79 @@
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/keybindings terminal screenshot">
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/keybindings TUI screenshot">
<!--
A TUI rendered to SVG. All text and borders use box-drawing characters
in a monospace font, so the result reads like a real terminal frame
(think ratatui, not a website mockup).
viewBox: 640 x 400 = 80 x 25 cells of 8 x 16 px.
-->
<style>
.bg { fill: #18181b; }
.chrome { fill: #27272a; }
.dot { fill: #52525b; }
.kbd { fill: #27272a; stroke: #3f3f46; stroke-width: 1; }
.modal { fill: #1f1f23; stroke: #b7410e; stroke-width: 2; }
.sep { stroke: #27272a; stroke-width: 1; }
text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
.t-sm { font-size: 12px; }
.t-xs { font-size: 11px; }
.muted { fill: #a1a1aa; }
.dim { fill: #71717a; }
.bg { fill: #0b0b0f; }
.text { fill: #e4e4e7; }
.muted { fill: #a1a1aa; }
.dim { fill: #71717a; }
.accent { fill: #f4a26b; }
.accent-bg { fill: #b7410e; }
.accent-bg-fg{ fill: #fff5f0; }
.border-soft { stroke: #3f3f46; fill: none; stroke-width: 1; }
.modal-bg { fill: #14141a; }
.modal-acc { fill: #1a0f0b; }
.modal-acc-b { stroke: #b7410e; fill: none; stroke-width: 1; }
text {
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 13px;
dominant-baseline: middle;
text-rendering: geometricPrecision;
}
</style>
<rect class="bg" width="640" height="400" rx="12"/>
<rect class="chrome" width="640" height="36" rx="12"/>
<rect class="chrome" y="24" width="640" height="12"/>
<line class="sep" x1="0" y1="36" x2="640" y2="36"/>
<rect class="bg" width="640" height="400"/>
<circle class="dot" cx="20" cy="18" r="5.5"/>
<circle class="dot" cx="40" cy="18" r="5.5"/>
<circle class="dot" cx="60" cy="18" r="5.5"/>
<!-- ============== Tabs strip ============== -->
<text x="8" y="8" class="text"> Form Editor Help</text>
<line x1="0" y1="20" x2="640" y2="20" class="border-soft"/>
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/keybindings — modal open</text>
<!-- ============== Dimmed background list (behind modal) ============== -->
<text x="8" y="48" class="dim"> ▸ Accounts</text>
<text x="8" y="64" class="dim"> Transactions</text>
<text x="8" y="80" class="dim"> Reports</text>
<text x="8" y="96" class="dim"> Settings</text>
<!-- dimmed background content -->
<text x="40" y="80" font-size="14" class="dim">▸ Accounts</text>
<text x="40" y="108" font-size="14" class="dim"> Transactions</text>
<text x="40" y="136" font-size="14" class="dim"> Reports</text>
<text x="40" y="164" font-size="14" class="dim"> Settings</text>
<text x="40" y="320" font-size="11" class="dim">Press ? for help</text>
<!-- ============== Modal (double-line border, centered) ============== -->
<rect x="120" y="40" width="400" height="320" class="modal-bg"/>
<rect x="120" y="40" width="400" height="320" class="modal-acc-b"/>
<!-- Decorative double-line corners / title -->
<text x="128" y="56" class="accent"> ╔═ Keybindings ══════════════════════════════════╗</text>
<text x="128" y="76" class="muted"> ║ ║</text>
<!-- modal -->
<rect class="modal" x="120" y="60" width="400" height="280" rx="10"/>
<text x="140" y="94" font-size="14" font-weight="700">Keybindings</text>
<line class="sep" x1="140" y1="104" x2="500" y2="104"/>
<!-- Section: MOVEMENT -->
<text x="128" y="100" class="accent"> ║ MOVEMENT ║</text>
<text x="128" y="120" class="text"> ║ j / k </text>
<text x="248" y="120" class="muted"> move down / up ║</text>
<text x="128" y="140" class="text"> ║ gg / G </text>
<text x="248" y="140" class="muted"> top / bottom of list ║</text>
<text x="140" y="130" font-size="11" class="muted">MOVEMENT</text>
<rect class="kbd" x="140" y="140" width="34" height="24" rx="4"/>
<text x="157" y="157" text-anchor="middle" font-size="12">j</text>
<text x="184" y="157" font-size="12" class="muted">move down</text>
<!-- Section: ACTIONS -->
<text x="128" y="170" class="accent"> ║ ACTIONS ║</text>
<text x="128" y="190" class="text"> ║ enter </text>
<text x="248" y="190" class="muted"> select / activate ║</text>
<text x="128" y="210" class="text"> ║ / </text>
<text x="248" y="210" class="muted"> search ║</text>
<text x="128" y="230" class="text"> ║ ctrl+s </text>
<text x="248" y="230" class="muted"> save ║</text>
<rect class="kbd" x="140" y="170" width="34" height="24" rx="4"/>
<text x="157" y="187" text-anchor="middle" font-size="12">k</text>
<text x="184" y="187" font-size="12" class="muted">move up</text>
<!-- Section: APP -->
<text x="128" y="260" class="accent"> ║ APP ║</text>
<text x="128" y="280" class="text"> ║ ? </text>
<text x="248" y="280" class="muted"> toggle this dialog ║</text>
<text x="128" y="300" class="text"> ║ esc </text>
<text x="248" y="300" class="muted"> close / cancel ║</text>
<text x="128" y="320" class="text"> ║ q </text>
<text x="248" y="320" class="muted"> quit ║</text>
<rect class="kbd" x="140" y="200" width="34" height="24" rx="4"/>
<text x="157" y="217" text-anchor="middle" font-size="12">gg</text>
<text x="184" y="217" font-size="12" class="muted">top of list</text>
<text x="128" y="340" class="muted"> ║ ║</text>
<text x="128" y="356" class="dim"> ╚════════════════════════════════════════════════╝</text>
<text x="290" y="130" font-size="11" class="muted">ACTIONS</text>
<rect class="kbd" x="290" y="140" width="60" height="24" rx="4"/>
<text x="320" y="157" text-anchor="middle" font-size="11">enter</text>
<text x="360" y="157" font-size="12" class="muted">select</text>
<rect class="kbd" x="290" y="170" width="34" height="24" rx="4"/>
<text x="307" y="187" text-anchor="middle" font-size="11">/</text>
<text x="334" y="187" font-size="12" class="muted">search</text>
<rect class="kbd" x="290" y="200" width="60" height="24" rx="4"/>
<text x="320" y="217" text-anchor="middle" font-size="11">ctrl+s</text>
<text x="360" y="217" font-size="12" class="muted">save</text>
<line class="sep" x1="140" y1="300" x2="500" y2="300"/>
<text x="320" y="322" text-anchor="middle" font-size="11" class="dim">press esc to close</text>
<line class="sep" x1="0" y1="358" x2="640" y2="358"/>
<text x="20" y="380" font-size="11" class="dim">esc close · ? toggle this dialog</text>
<text x="620" y="380" text-anchor="end" font-size="11" class="dim">dialog feature enabled</text>
<!-- ============== Status bar ============== -->
<line x1="0" y1="380" x2="640" y2="380" class="border-soft"/>
<text x="8" y="392" class="dim"> esc close · ? toggle this dialog</text>
<text x="632" y="392" class="dim" text-anchor="end">dialog feature enabled</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB