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

website created

Browse Source
This commit is contained in:
Priec
2026-06-01 20:01:15 +02:00
commit d8b622860c
15 changed files with 1830 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
static/img/terminal-keybindings.svg Normal file
View File

@@ -0,0 +1,71 @@
<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">
<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; }
</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"/>
<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"/>
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/keybindings — modal open</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 -->
<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"/>
<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>
<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>
<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="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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB