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

109
static/img/terminal-keybindings-light.svg
View File

@@ -1,68 +1,73 @@
<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">
<!--
Light-mode variant of the 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">
<!-- Light-mode twin of terminal-keybindings.svg. Same 80x25 grid, light neutral palette. -->
<style>
.bg { fill: #fbfaf7; }
.text { fill: #1c1917; }
.muted { fill: #57534e; }
.dim { fill: #78716c; }
.accent { fill: #9a3a0e; }
.accent-bg { fill: #9a3a0e; }
.accent-bg-fg{ fill: #fff5f0; }
.border-soft { stroke: #d6d3d1; }
.modal-bg { fill: #ffffff; }
.modal-acc { fill: #f5f0e8; }
.modal-acc-b { stroke: #9a3a0e; fill: none; stroke-width: 1; }
.text { fill: #26272b; }
.muted { fill: #5a5a62; }
.dim { fill: #8a8a90; }
.blue { fill: #1f7fb8; }
.gold { fill: #a8862a; }
.green { fill: #1f9d3f; }
.greenfg{ fill: #f2fff2; }
.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="#f4f4f2" stroke="#d8d8d2"/>
<text x="8" y="8" class="text"> Form Editor Help</text>
<line x1="0" y1="20" x2="640" y2="20" class="border-soft"/>
<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>
<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>
<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>
<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"/>
<text x="128" y="56" class="accent"> ╔═ Keybindings ══════════════════════════════════╗</text>
<text x="128" y="76" class="muted"> ║ ║</text>
<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>
<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="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>
<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>
<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>
<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>
<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>
<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: 3.5 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB