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

svgs done

Browse Source
This commit is contained in:
Priec
2026-06-02 22:20:36 +02:00
parent 3266c944ba
commit d22dca0a27
5 changed files with 30558 additions and 30419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,79 +1,82 @@
<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">
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="A keybindings help screen built with tui-pages">
<!--
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.
tui-pages UX showcase on a strict 80x25 monospace grid (cell = 8x16 px).
Each cell carries at most two colors (fg + bg), like a real terminal buffer.
-->
<style>
.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 { fill: #d7d7db; }
.muted { fill: #9a9aa2; }
.dim { fill: #6b6b72; }
.blue { fill: #3ba7e0; }
.gold { fill: #d9b54a; }
.green { fill: #46d160; }
.greenfg{ fill: #0c130c; }
.b { font-weight: 700; }
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"/>
<g xml:space="preserve">
<rect x="0.5" y="0.5" width="639" height="399" rx="10" fill="#1a1b1e" stroke="#2a2b30"/>
<!-- ============== 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"/>
<!-- tab bar (Login active) -->
<rect x="0" y="2" width="56" height="20" class="green"/>
<text x="8" y="16" class="greenfg b">Login</text>
<text x="64" y="16" class="muted">Register</text>
<text x="144" y="16" class="muted">Admin_Panel</text>
<text x="248" y="16" class="muted">Quit</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>
<!-- panel -->
<text x="168" y="60" class="blue b" textLength="304" lengthAdjust="spacing">╭─ Keybindings ──────────────────────╮</text>
<text x="168" y="76" class="blue">│</text><text x="464" y="76" class="blue">│</text>
<text x="168" y="92" class="blue">│</text><text x="464" y="92" class="blue">│</text>
<text x="168" y="108" class="blue">│</text><text x="464" y="108" class="blue">│</text>
<text x="168" y="124" class="blue">│</text><text x="464" y="124" class="blue">│</text>
<text x="168" y="140" class="blue">│</text><text x="464" y="140" class="blue">│</text>
<text x="168" y="156" class="blue">│</text><text x="464" y="156" class="blue">│</text>
<text x="168" y="172" class="blue">│</text><text x="464" y="172" class="blue">│</text>
<text x="168" y="188" class="blue">│</text><text x="464" y="188" class="blue">│</text>
<text x="168" y="204" class="blue">│</text><text x="464" y="204" class="blue">│</text>
<text x="168" y="220" class="blue">│</text><text x="464" y="220" class="blue">│</text>
<text x="168" y="236" class="blue">│</text><text x="464" y="236" class="blue">│</text>
<text x="168" y="252" class="blue">│</text><text x="464" y="252" class="blue">│</text>
<text x="168" y="268" class="blue">│</text><text x="464" y="268" class="blue">│</text>
<text x="168" y="284" class="blue">│</text><text x="464" y="284" class="blue">│</text>
<text x="168" y="300" class="blue">│</text><text x="464" y="300" class="blue">│</text>
<text x="168" y="316" class="blue">│</text><text x="464" y="316" class="blue">│</text>
<text x="168" y="332" class="blue">│</text><text x="464" y="332" class="blue">│</text>
<text x="168" y="348" class="blue" textLength="304" lengthAdjust="spacing">╰────────────────────────────────────╯</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>
<!-- MOVEMENT -->
<text x="184" y="92" class="gold b">MOVEMENT</text>
<text x="200" y="108" class="text">j / k</text>
<text x="304" y="108" class="muted">move down / up</text>
<text x="200" y="124" class="text">gg / G</text>
<text x="304" y="124" class="muted">jump to top / bottom</text>
<!-- 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>
<!-- ACTIONS -->
<text x="184" y="156" class="gold b">ACTIONS</text>
<text x="200" y="172" class="text">enter</text>
<text x="304" y="172" class="muted">select / open</text>
<text x="200" y="188" class="text">/</text>
<text x="304" y="188" class="muted">search</text>
<text x="200" y="204" class="text">space</text>
<text x="304" y="204" class="muted">toggle mark</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>
<!-- APP -->
<text x="184" y="236" class="gold b">APP</text>
<text x="200" y="252" class="text">?</text>
<text x="304" y="252" class="muted">toggle this help</text>
<text x="200" y="268" class="text">:q</text>
<text x="304" y="268" class="muted">quit</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>
<text x="184" y="316" class="dim">press ? or esc to close</text>
<text x="128" y="340" class="muted"> ║ ║</text>
<text x="128" y="356" class="dim"> ╚════════════════════════════════════════════════╝</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>
<!-- footer -->
<text x="32" y="380" class="green b">NOR</text>
<text x="632" y="380" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB