69 lines
3.5 KiB
XML
69 lines
3.5 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">
|
|
<!--
|
|
Light-mode variant of the keybindings TUI screenshot.
|
|
-->
|
|
<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 {
|
|
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"/>
|
|
|
|
<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="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>
|
|
|
|
<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="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="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="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>
|
|
|
|
<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>
|