80 lines
4.1 KiB
XML
80 lines
4.1 KiB
XML
<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: #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"/>
|
|
|
|
<!-- ============== 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"/>
|
|
|
|
<!-- ============== 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>
|
|
|
|
<!-- ============== 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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="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>
|
|
</svg>
|