svgs done
This commit is contained in:
Priec
@@ -1,58 +1,120 @@
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/canvas TUI screenshot">
|
||||
<!--
|
||||
Light-mode variant of the canvas TUI screenshot.
|
||||
Same layout as terminal-canvas.svg but with the warm paper palette.
|
||||
-->
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="A text editor built with the tui-pages textarea: relative line numbers and Rust syntax highlighting">
|
||||
<!-- Light-mode twin of terminal-canvas.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; }
|
||||
.field-acc { fill: #f5f0e8; }
|
||||
.border-soft { stroke: #d6d3d1; }
|
||||
.text { fill: #26272b; }
|
||||
.muted { fill: #5a5a62; }
|
||||
.dim { fill: #8a8a90; }
|
||||
.blue { fill: #1f7fb8; }
|
||||
.gold { fill: #a8862a; }
|
||||
.green { fill: #1f9d3f; }
|
||||
.pink { fill: #d6398b; }
|
||||
.greenfg{ fill: #f2fff2; }
|
||||
.curfg { fill: #f4f4f2; }
|
||||
.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;
|
||||
}
|
||||
.cursor { fill: #9a3a0e; }
|
||||
</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="72" height="20" class="green"/>
|
||||
<text x="8" y="16" class="greenfg b">main.rs</text>
|
||||
<text x="80" y="16" class="muted">lib.rs</text>
|
||||
<text x="144" y="16" class="muted">Cargo.toml</text>
|
||||
|
||||
<text x="8" y="40" class="text"> ┌─ Contact ───────────────────────────────────────┐</text>
|
||||
<text x="8" y="56" class="muted"> │ Tab to move between fields · Enter to submit. │</text>
|
||||
<text x="8" y="72" class="text"> └────────────────────────────────────────────────┘</text>
|
||||
<rect x="0" y="96" width="640" height="16" fill="#e7e7e3"/>
|
||||
|
||||
<text x="8" y="116" class="text"> Name: </text>
|
||||
<rect x="76" y="100" width="500" height="20" class="field-acc"/>
|
||||
<text x="80" y="112" class="text"> │Ada</text>
|
||||
<rect x="108" y="104" width="2" height="12" class="cursor"/>
|
||||
<text x="572" y="112" class="text">│</text>
|
||||
<text x="16" y="44" class="dim" text-anchor="end">4</text>
|
||||
<text x="16" y="60" class="dim" text-anchor="end">3</text>
|
||||
<text x="16" y="76" class="dim" text-anchor="end">2</text>
|
||||
<text x="16" y="92" class="dim" text-anchor="end">1</text>
|
||||
<text x="8" y="108" class="gold b">5</text>
|
||||
<text x="16" y="124" class="dim" text-anchor="end">1</text>
|
||||
<text x="16" y="140" class="dim" text-anchor="end">2</text>
|
||||
<text x="16" y="156" class="dim" text-anchor="end">3</text>
|
||||
<text x="16" y="172" class="dim" text-anchor="end">4</text>
|
||||
<text x="16" y="188" class="dim" text-anchor="end">5</text>
|
||||
<text x="16" y="204" class="dim" text-anchor="end">6</text>
|
||||
|
||||
<text x="8" y="156" class="text"> Email:</text>
|
||||
<text x="80" y="156" class="text"> │ada@example.test</text>
|
||||
<text x="572" y="156" class="text">│</text>
|
||||
<text x="32" y="44" class="pink">use</text>
|
||||
<text x="64" y="44" class="text">tui_pages</text>
|
||||
<text x="136" y="44" class="muted">::</text>
|
||||
<text x="152" y="44" class="muted">{</text>
|
||||
<text x="160" y="44" class="gold">Page</text>
|
||||
<text x="192" y="44" class="muted">,</text>
|
||||
<text x="208" y="44" class="gold">TextArea</text>
|
||||
<text x="272" y="44" class="muted">}</text>
|
||||
<text x="280" y="44" class="muted">;</text>
|
||||
|
||||
<rect x="76" y="220" width="120" height="20" class="accent-bg"/>
|
||||
<text x="80" y="232" class="accent-bg-fg"> │ Clear </text>
|
||||
<text x="572" y="232" class="accent-bg-fg">│</text>
|
||||
<text x="220" y="232" class="text"> │ Quit </text>
|
||||
<text x="572" y="232" class="text">│</text>
|
||||
<text x="32" y="76" class="pink">pub</text>
|
||||
<text x="64" y="76" class="pink">fn</text>
|
||||
<text x="88" y="76" class="blue">editor</text>
|
||||
<text x="136" y="76" class="muted">()</text>
|
||||
<text x="160" y="76" class="muted">-></text>
|
||||
<text x="184" y="76" class="gold">Page</text>
|
||||
<text x="224" y="76" class="muted">{</text>
|
||||
|
||||
<text x="76" y="100" class="text"> ┌──────────────────────────────────────────────┐</text>
|
||||
<text x="76" y="156" class="text"> └──────────────────────────────────────────────┘</text>
|
||||
<text x="76" y="220" class="text"> ┌─────────────┐ ┌─────────────┐</text>
|
||||
<text x="76" y="252" class="text"> └─────────────┘ └─────────────┘</text>
|
||||
<text x="64" y="92" class="pink">let</text>
|
||||
<text x="96" y="92" class="text">title</text>
|
||||
<text x="144" y="92" class="muted">=</text>
|
||||
<text x="160" y="92" class="green">"Editor"</text>
|
||||
<text x="224" y="92" class="muted">;</text>
|
||||
|
||||
<line x1="0" y1="380" x2="640" y2="380" class="border-soft"/>
|
||||
<text x="8" y="392" class="dim"> tab next · shift+tab prev · enter submit</text>
|
||||
<text x="632" y="392" class="dim" text-anchor="end">canvas feature enabled</text>
|
||||
<text x="64" y="108" class="pink">let</text>
|
||||
<text x="96" y="108" class="pink">mut</text>
|
||||
<rect x="128" y="96" width="8" height="16" fill="#26272b"/>
|
||||
<text x="128" y="108" class="curfg">a</text>
|
||||
<text x="136" y="108" class="text">rea</text>
|
||||
<text x="168" y="108" class="muted">=</text>
|
||||
<text x="184" y="108" class="gold">TextArea</text>
|
||||
<text x="248" y="108" class="muted">::</text>
|
||||
<text x="264" y="108" class="blue">default</text>
|
||||
<text x="320" y="108" class="muted">()</text>
|
||||
<text x="336" y="108" class="muted">;</text>
|
||||
|
||||
<text x="64" y="124" class="text">area</text>
|
||||
<text x="96" y="124" class="muted">.</text>
|
||||
<text x="104" y="124" class="blue">set_placeholder</text>
|
||||
<text x="224" y="124" class="muted">(</text>
|
||||
<text x="232" y="124" class="green">"Type here…"</text>
|
||||
<text x="328" y="124" class="muted">)</text>
|
||||
<text x="336" y="124" class="muted">;</text>
|
||||
|
||||
<text x="64" y="156" class="gold">Page</text>
|
||||
<text x="96" y="156" class="muted">::</text>
|
||||
<text x="112" y="156" class="blue">new</text>
|
||||
<text x="136" y="156" class="muted">(</text>
|
||||
<text x="144" y="156" class="text">title</text>
|
||||
<text x="184" y="156" class="muted">)</text>
|
||||
|
||||
<text x="96" y="172" class="muted">.</text>
|
||||
<text x="104" y="172" class="blue">child</text>
|
||||
<text x="144" y="172" class="muted">(</text>
|
||||
<text x="152" y="172" class="text">area</text>
|
||||
<text x="184" y="172" class="muted">)</text>
|
||||
|
||||
<text x="96" y="188" class="muted">.</text>
|
||||
<text x="104" y="188" class="blue">on_key</text>
|
||||
<text x="152" y="188" class="muted">(</text>
|
||||
<text x="160" y="188" class="green">'q'</text>
|
||||
<text x="184" y="188" class="muted">,</text>
|
||||
<text x="200" y="188" class="muted">|</text>
|
||||
<text x="208" y="188" class="text">app</text>
|
||||
<text x="232" y="188" class="muted">|</text>
|
||||
<text x="248" y="188" class="text">app</text>
|
||||
<text x="272" y="188" class="muted">.</text>
|
||||
<text x="280" y="188" class="blue">quit</text>
|
||||
<text x="312" y="188" class="muted">())</text>
|
||||
|
||||
<text x="32" y="204" class="muted">}</text>
|
||||
|
||||
<text x="32" y="380" class="green b">NOR</text>
|
||||
<text x="120" y="380" class="muted">main.rs</text>
|
||||
<text x="256" y="380" class="muted">Ln 5, Col 18</text>
|
||||
<text x="632" y="380" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 5.3 KiB |
@@ -1,69 +1,138 @@
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/canvas 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 text editor built with the tui-pages textarea: relative line numbers and Rust syntax highlighting">
|
||||
<!--
|
||||
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 textarea showcased as a modal-editor (vim/helix style) on a strict
|
||||
80x25 monospace grid (cell = 8x16 px). Each cell carries at most two colors.
|
||||
Gutter: current line shows its absolute number, others are relative.
|
||||
Syntax: kw=pink, type=gold, fn=blue, string=green, punctuation=muted.
|
||||
-->
|
||||
<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; }
|
||||
.field-acc { fill: #1a0f0b; }
|
||||
.border-soft { stroke: #3f3f46; fill: none; stroke-width: 1; }
|
||||
.text { fill: #d7d7db; }
|
||||
.muted { fill: #9a9aa2; }
|
||||
.dim { fill: #6b6b72; }
|
||||
.blue { fill: #3ba7e0; }
|
||||
.gold { fill: #d9b54a; }
|
||||
.green { fill: #46d160; }
|
||||
.pink { fill: #f25fa0; }
|
||||
.greenfg{ fill: #0c130c; }
|
||||
.curfg { fill: #1a1b1e; }
|
||||
.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;
|
||||
}
|
||||
.cursor { fill: #f4a26b; }
|
||||
</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"/>
|
||||
<!-- buffer tabs (main.rs active) -->
|
||||
<rect x="0" y="2" width="72" height="20" class="green"/>
|
||||
<text x="8" y="16" class="greenfg b">main.rs</text>
|
||||
<text x="80" y="16" class="muted">lib.rs</text>
|
||||
<text x="144" y="16" class="muted">Cargo.toml</text>
|
||||
|
||||
<!-- ============== Page header ============== -->
|
||||
<text x="8" y="40" class="text"> ┌─ Contact ───────────────────────────────────────┐</text>
|
||||
<text x="8" y="56" class="muted"> │ Tab to move between fields · Enter to submit. │</text>
|
||||
<text x="8" y="72" class="text"> └────────────────────────────────────────────────┘</text>
|
||||
<!-- cursorline -->
|
||||
<rect x="0" y="96" width="640" height="16" fill="#232428"/>
|
||||
|
||||
<!-- ============== Field: Name (focused, with caret) ============== -->
|
||||
<text x="8" y="116" class="text"> Name: </text>
|
||||
<rect x="76" y="100" width="500" height="20" class="field-acc"/>
|
||||
<text x="80" y="112" class="text"> │Ada</text>
|
||||
<rect x="108" y="104" width="2" height="12" class="cursor"/>
|
||||
<text x="572" y="112" class="text">│</text>
|
||||
<!-- gutter: relative numbers, current line absolute -->
|
||||
<text x="16" y="44" class="dim" text-anchor="end">4</text>
|
||||
<text x="16" y="60" class="dim" text-anchor="end">3</text>
|
||||
<text x="16" y="76" class="dim" text-anchor="end">2</text>
|
||||
<text x="16" y="92" class="dim" text-anchor="end">1</text>
|
||||
<text x="8" y="108" class="gold b">5</text>
|
||||
<text x="16" y="124" class="dim" text-anchor="end">1</text>
|
||||
<text x="16" y="140" class="dim" text-anchor="end">2</text>
|
||||
<text x="16" y="156" class="dim" text-anchor="end">3</text>
|
||||
<text x="16" y="172" class="dim" text-anchor="end">4</text>
|
||||
<text x="16" y="188" class="dim" text-anchor="end">5</text>
|
||||
<text x="16" y="204" class="dim" text-anchor="end">6</text>
|
||||
|
||||
<!-- ============== Field: Email ============== -->
|
||||
<text x="8" y="156" class="text"> Email:</text>
|
||||
<text x="80" y="156" class="text"> │ada@example.test</text>
|
||||
<text x="572" y="156" class="text">│</text>
|
||||
<!-- line 1: use tui_pages::{Page, TextArea}; -->
|
||||
<text x="32" y="44" class="pink">use</text>
|
||||
<text x="64" y="44" class="text">tui_pages</text>
|
||||
<text x="136" y="44" class="muted">::</text>
|
||||
<text x="152" y="44" class="muted">{</text>
|
||||
<text x="160" y="44" class="gold">Page</text>
|
||||
<text x="192" y="44" class="muted">,</text>
|
||||
<text x="208" y="44" class="gold">TextArea</text>
|
||||
<text x="272" y="44" class="muted">}</text>
|
||||
<text x="280" y="44" class="muted">;</text>
|
||||
|
||||
<!-- ============== Buttons ============== -->
|
||||
<!-- Clear button (focused) -->
|
||||
<rect x="76" y="220" width="120" height="20" class="accent-bg"/>
|
||||
<text x="80" y="232" class="accent-bg-fg"> │ Clear </text>
|
||||
<text x="572" y="232" class="accent-bg-fg">│</text>
|
||||
<!-- Quit button -->
|
||||
<text x="220" y="232" class="text"> │ Quit </text>
|
||||
<text x="572" y="232" class="text">│</text>
|
||||
<!-- line 3: pub fn editor() -> Page { -->
|
||||
<text x="32" y="76" class="pink">pub</text>
|
||||
<text x="64" y="76" class="pink">fn</text>
|
||||
<text x="88" y="76" class="blue">editor</text>
|
||||
<text x="136" y="76" class="muted">()</text>
|
||||
<text x="160" y="76" class="muted">-></text>
|
||||
<text x="184" y="76" class="gold">Page</text>
|
||||
<text x="224" y="76" class="muted">{</text>
|
||||
|
||||
<!-- Show the box-drawing border around the whole form area (top + bottom) -->
|
||||
<text x="76" y="100" class="text"> ┌──────────────────────────────────────────────┐</text>
|
||||
<text x="76" y="156" class="text"> └──────────────────────────────────────────────┘</text>
|
||||
<text x="76" y="220" class="text"> ┌─────────────┐ ┌─────────────┐</text>
|
||||
<text x="76" y="252" class="text"> └─────────────┘ └─────────────┘</text>
|
||||
<!-- line 4: let title = "Editor"; -->
|
||||
<text x="64" y="92" class="pink">let</text>
|
||||
<text x="96" y="92" class="text">title</text>
|
||||
<text x="144" y="92" class="muted">=</text>
|
||||
<text x="160" y="92" class="green">"Editor"</text>
|
||||
<text x="224" y="92" class="muted">;</text>
|
||||
|
||||
<!-- ============== Status bar ============== -->
|
||||
<line x1="0" y1="380" x2="640" y2="380" class="border-soft"/>
|
||||
<text x="8" y="392" class="dim"> tab next · shift+tab prev · enter submit</text>
|
||||
<text x="632" y="392" class="dim" text-anchor="end">canvas feature enabled</text>
|
||||
<!-- line 5 (current): let mut area = TextArea::default(); -->
|
||||
<text x="64" y="108" class="pink">let</text>
|
||||
<text x="96" y="108" class="pink">mut</text>
|
||||
<rect x="128" y="96" width="8" height="16" fill="#d7d7db"/>
|
||||
<text x="128" y="108" class="curfg">a</text>
|
||||
<text x="136" y="108" class="text">rea</text>
|
||||
<text x="168" y="108" class="muted">=</text>
|
||||
<text x="184" y="108" class="gold">TextArea</text>
|
||||
<text x="248" y="108" class="muted">::</text>
|
||||
<text x="264" y="108" class="blue">default</text>
|
||||
<text x="320" y="108" class="muted">()</text>
|
||||
<text x="336" y="108" class="muted">;</text>
|
||||
|
||||
<!-- line 6: area.set_placeholder("Type here…"); -->
|
||||
<text x="64" y="124" class="text">area</text>
|
||||
<text x="96" y="124" class="muted">.</text>
|
||||
<text x="104" y="124" class="blue">set_placeholder</text>
|
||||
<text x="224" y="124" class="muted">(</text>
|
||||
<text x="232" y="124" class="green">"Type here…"</text>
|
||||
<text x="328" y="124" class="muted">)</text>
|
||||
<text x="336" y="124" class="muted">;</text>
|
||||
|
||||
<!-- line 8: Page::new(title) -->
|
||||
<text x="64" y="156" class="gold">Page</text>
|
||||
<text x="96" y="156" class="muted">::</text>
|
||||
<text x="112" y="156" class="blue">new</text>
|
||||
<text x="136" y="156" class="muted">(</text>
|
||||
<text x="144" y="156" class="text">title</text>
|
||||
<text x="184" y="156" class="muted">)</text>
|
||||
|
||||
<!-- line 9: .child(area) -->
|
||||
<text x="96" y="172" class="muted">.</text>
|
||||
<text x="104" y="172" class="blue">child</text>
|
||||
<text x="144" y="172" class="muted">(</text>
|
||||
<text x="152" y="172" class="text">area</text>
|
||||
<text x="184" y="172" class="muted">)</text>
|
||||
|
||||
<!-- line 10: .on_key('q', |app| app.quit()) -->
|
||||
<text x="96" y="188" class="muted">.</text>
|
||||
<text x="104" y="188" class="blue">on_key</text>
|
||||
<text x="152" y="188" class="muted">(</text>
|
||||
<text x="160" y="188" class="green">'q'</text>
|
||||
<text x="184" y="188" class="muted">,</text>
|
||||
<text x="200" y="188" class="muted">|</text>
|
||||
<text x="208" y="188" class="text">app</text>
|
||||
<text x="232" y="188" class="muted">|</text>
|
||||
<text x="248" y="188" class="text">app</text>
|
||||
<text x="272" y="188" class="muted">.</text>
|
||||
<text x="280" y="188" class="blue">quit</text>
|
||||
<text x="312" y="188" class="muted">())</text>
|
||||
|
||||
<!-- line 11: } -->
|
||||
<text x="32" y="204" class="muted">}</text>
|
||||
|
||||
<!-- status line -->
|
||||
<text x="32" y="380" class="green b">NOR</text>
|
||||
<text x="120" y="380" class="muted">main.rs</text>
|
||||
<text x="256" y="380" class="muted">Ln 5, Col 18</text>
|
||||
<text x="632" y="380" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 6.0 KiB |
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.4 KiB |
Reference in New Issue
Block a user