register is now fully working
This commit is contained in:
Priec
@@ -129,7 +129,12 @@
|
||||
<div class="lg:col-span-3">
|
||||
<div class="tp-card !p-2">
|
||||
<div class="tp-terminal">
|
||||
<img src="/static/img/terminal-default.svg" alt="examples/default TUI screenshot" class="block w-full h-auto" loading="lazy" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-default.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-default.svg' : '/static/img/terminal-default-light.svg'"
|
||||
alt="examples/default TUI screenshot"
|
||||
class="block w-full h-auto"
|
||||
loading="lazy" width="640" height="400">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,7 +189,12 @@
|
||||
<div class="lg:col-span-3 lg:order-2">
|
||||
<div class="tp-card !p-2">
|
||||
<div class="tp-terminal">
|
||||
<img src="/static/img/terminal-canvas.svg" alt="examples/canvas TUI screenshot" class="block w-full h-auto" loading="lazy" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-canvas.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-canvas.svg' : '/static/img/terminal-canvas-light.svg'"
|
||||
alt="examples/canvas TUI screenshot"
|
||||
class="block w-full h-auto"
|
||||
loading="lazy" width="640" height="400">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -239,7 +249,12 @@
|
||||
<div class="lg:col-span-3">
|
||||
<div class="tp-card !p-2">
|
||||
<div class="tp-terminal">
|
||||
<img src="/static/img/terminal-keybindings.svg" alt="examples/keybindings TUI screenshot" class="block w-full h-auto" loading="lazy" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-keybindings.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-keybindings.svg' : '/static/img/terminal-keybindings-light.svg'"
|
||||
alt="examples/keybindings TUI screenshot"
|
||||
class="block w-full h-auto"
|
||||
loading="lazy" width="640" height="400">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
28
index.html
28
index.html
@@ -250,7 +250,12 @@
|
||||
<div class="absolute -inset-4 -z-10 bg-gradient-to-br from-accent/15 via-transparent to-emerald-500/5 rounded-3xl blur-2xl"></div>
|
||||
<div class="tp-float">
|
||||
<div class="tp-terminal">
|
||||
<img src="/static/img/terminal-default.svg" alt="Screenshot of the examples/default TUI app built with tui-pages" class="block w-full h-auto" loading="eager" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-default.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-default.svg' : '/static/img/terminal-default-light.svg'"
|
||||
alt="Screenshot of the examples/default TUI app built with tui-pages"
|
||||
class="block w-full h-auto"
|
||||
loading="eager" width="640" height="400">
|
||||
</div>
|
||||
<p class="mt-3 text-center text-xs text-zinc-500 font-mono">examples/default · cargo run</p>
|
||||
</div>
|
||||
@@ -575,7 +580,12 @@ pub fn keymaps() -> KeyMap {
|
||||
<div class="mt-12 grid md:grid-cols-3 gap-6">
|
||||
<a href="/examples.html#default" class="group block rounded-2xl border border-zinc-800 bg-zinc-950/50 overflow-hidden hover:border-accent/60 transition-colors">
|
||||
<div class="tp-terminal m-3">
|
||||
<img src="/static/img/terminal-default.svg" alt="default example screenshot" class="block w-full h-auto" loading="lazy" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-default.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-default.svg' : '/static/img/terminal-default-light.svg'"
|
||||
alt="default example screenshot"
|
||||
class="block w-full h-auto"
|
||||
loading="lazy" width="640" height="400">
|
||||
</div>
|
||||
<div class="p-5 pt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -588,7 +598,12 @@ pub fn keymaps() -> KeyMap {
|
||||
|
||||
<a href="/examples.html#canvas" class="group block rounded-2xl border border-zinc-800 bg-zinc-950/50 overflow-hidden hover:border-accent/60 transition-colors">
|
||||
<div class="tp-terminal m-3">
|
||||
<img src="/static/img/terminal-canvas.svg" alt="canvas example screenshot" class="block w-full h-auto" loading="lazy" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-canvas.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-canvas.svg' : '/static/img/terminal-canvas-light.svg'"
|
||||
alt="canvas example screenshot"
|
||||
class="block w-full h-auto"
|
||||
loading="lazy" width="640" height="400">
|
||||
</div>
|
||||
<div class="p-5 pt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -601,7 +616,12 @@ pub fn keymaps() -> KeyMap {
|
||||
|
||||
<a href="/examples.html#keybindings" class="group block rounded-2xl border border-zinc-800 bg-zinc-950/50 overflow-hidden hover:border-accent/60 transition-colors">
|
||||
<div class="tp-terminal m-3">
|
||||
<img src="/static/img/terminal-keybindings.svg" alt="keybindings example screenshot" class="block w-full h-auto" loading="lazy" width="640" height="400">
|
||||
<img
|
||||
src="/static/img/terminal-keybindings.svg"
|
||||
:src="theme === 'night' ? '/static/img/terminal-keybindings.svg' : '/static/img/terminal-keybindings-light.svg'"
|
||||
alt="keybindings example screenshot"
|
||||
class="block w-full h-auto"
|
||||
loading="lazy" width="640" height="400">
|
||||
</div>
|
||||
<div class="p-5 pt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
58
static/img/terminal-canvas-light.svg
Normal file
58
static/img/terminal-canvas-light.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<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.
|
||||
-->
|
||||
<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 {
|
||||
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"/>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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="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 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>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -1,52 +1,69 @@
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/canvas terminal screenshot">
|
||||
<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">
|
||||
<!--
|
||||
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: #18181b; }
|
||||
.chrome { fill: #27272a; }
|
||||
.dot { fill: #52525b; }
|
||||
.field { fill: #0e0e10; stroke: #3f3f46; stroke-width: 1; }
|
||||
.field-focus { fill: #1c130f; stroke: #b7410e; stroke-width: 2; }
|
||||
.btn { fill: #b7410e; }
|
||||
.sep { stroke: #27272a; stroke-width: 1; }
|
||||
text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
|
||||
.t-md { font-size: 14px; }
|
||||
.t-sm { font-size: 12px; }
|
||||
.t-xs { font-size: 11px; }
|
||||
.bg { fill: #0b0b0f; }
|
||||
.text { fill: #e4e4e7; }
|
||||
.muted { fill: #a1a1aa; }
|
||||
.dim { fill: #71717a; }
|
||||
.label { fill: #a1a1aa; letter-spacing: 0.08em; }
|
||||
.btn-fg { fill: #fff5f0; }
|
||||
.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 {
|
||||
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" 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"/>
|
||||
<rect class="bg" width="640" height="400"/>
|
||||
|
||||
<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"/>
|
||||
<!-- ============== 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"/>
|
||||
|
||||
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/canvas — login page</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>
|
||||
|
||||
<text x="40" y="80" font-size="20" font-weight="700">Sign in</text>
|
||||
<text x="40" y="104" font-size="12" class="muted">Use Tab to move between fields. Enter to submit.</text>
|
||||
<!-- ============== 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>
|
||||
|
||||
<text x="40" y="156" font-size="10" class="label">USERNAME</text>
|
||||
<rect class="field-focus" x="40" y="164" width="560" height="38" rx="6"/>
|
||||
<text x="56" y="189" font-size="14">filip</text>
|
||||
<rect x="92" y="172" width="2" height="22" fill="#b7410e">
|
||||
<animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- ============== 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>
|
||||
|
||||
<text x="40" y="232" font-size="10" class="label">PASSWORD</text>
|
||||
<rect class="field" x="40" y="240" width="560" height="38" rx="6"/>
|
||||
<text x="56" y="265" font-size="14" 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>
|
||||
|
||||
<rect class="btn" x="40" y="300" width="140" height="38" rx="6"/>
|
||||
<text x="110" y="324" text-anchor="middle" font-size="13" class="btn-fg" font-weight="600">Sign in</text>
|
||||
<text x="200" y="324" font-size="11" class="dim">esc · cancel</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 class="sep" x1="0" y1="358" x2="640" y2="358"/>
|
||||
<text x="20" y="380" font-size="11" class="dim">tab next · shift+tab prev · enter submit</text>
|
||||
<text x="620" y="380" text-anchor="end" font-size="11" class="dim">canvas feature enabled</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>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 3.7 KiB |
82
static/img/terminal-default-light.svg
Normal file
82
static/img/terminal-default-light.svg
Normal file
@@ -0,0 +1,82 @@
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="A register screen built with tui-pages: tab bar, rounded panel, and first-class role autocomplete">
|
||||
<!-- Light-mode twin of terminal-default.svg. Same 80x25 grid, light neutral palette. -->
|
||||
<style>
|
||||
.text { fill: #26272b; }
|
||||
.muted { fill: #5a5a62; }
|
||||
.dim { fill: #8a8a90; }
|
||||
.ghost { fill: #9a9aa2; }
|
||||
.blue { fill: #1f7fb8; }
|
||||
.gold { fill: #a8862a; }
|
||||
.green { fill: #1f9d3f; }
|
||||
.peachfg{ fill: #2a1c08; }
|
||||
.greenfg{ fill: #f2fff2; }
|
||||
.b { font-weight: 700; }
|
||||
text {
|
||||
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
</style>
|
||||
|
||||
<g xml:space="preserve">
|
||||
<rect x="0.5" y="0.5" width="639" height="399" rx="10" fill="#f4f4f2" stroke="#d8d8d2"/>
|
||||
|
||||
<text x="16" y="16" class="muted">Login</text>
|
||||
<rect x="80" y="2" width="72" height="20" rx="3" class="green"/>
|
||||
<text x="88" y="16" class="greenfg b">Register</text>
|
||||
<text x="168" y="16" class="muted">Admin_Panel</text>
|
||||
<text x="280" y="16" class="muted">Quit</text>
|
||||
<line x1="8" y1="27" x2="632" y2="27" stroke="#d8d8d2"/>
|
||||
|
||||
<text x="168" y="60" class="blue b" textLength="304" lengthAdjust="spacing">╭─ Register ─────────────────────────╮</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>
|
||||
|
||||
<text x="184" y="92" class="muted">Create your account</text>
|
||||
|
||||
<text x="184" y="124" class="muted">Email</text>
|
||||
<text x="280" y="124" class="text">ada@acme.io</text>
|
||||
|
||||
<text x="184" y="156" class="muted">Password</text>
|
||||
<text x="280" y="156" class="muted">••••••••••</text>
|
||||
|
||||
<text x="184" y="188" class="muted">Confirm</text>
|
||||
<text x="280" y="188" class="muted">••••••••••</text>
|
||||
|
||||
<text x="184" y="220" class="muted">Role</text>
|
||||
<text x="280" y="220" class="text">a</text>
|
||||
<rect x="288" y="208" width="2" height="15" fill="#c98a2a"/>
|
||||
<text x="288" y="220" class="ghost">dmin</text>
|
||||
|
||||
<rect x="280" y="224" width="96" height="32" fill="#ffffff"/>
|
||||
<rect x="280" y="224" width="96" height="16" fill="#f0c27a"/>
|
||||
<text x="280" y="236" class="peachfg b">admin</text>
|
||||
<text x="280" y="252" class="text">accountant</text>
|
||||
|
||||
<text x="184" y="300" class="green b" textLength="144" lengthAdjust="spacing">╭────────────────╮</text>
|
||||
<text x="184" y="316" class="green b" textLength="144" lengthAdjust="spacing">│ Create account │</text>
|
||||
<text x="184" y="332" class="green b" textLength="144" lengthAdjust="spacing">╰────────────────╯</text>
|
||||
<text x="360" y="316" class="dim">enter ↵</text>
|
||||
|
||||
<line x1="8" y1="378" x2="632" y2="378" stroke="#d8d8d2"/>
|
||||
<text x="32" y="396" class="green b">INS</text>
|
||||
<text x="72" y="396" class="muted">[+]</text>
|
||||
<text x="632" y="396" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
@@ -1,57 +1,95 @@
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/default terminal screenshot">
|
||||
<svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="A register screen built with tui-pages: tab bar, rounded panel, and first-class role autocomplete">
|
||||
<!--
|
||||
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.
|
||||
Frames use rounded box-drawing chars; fills/highlights are grid-snapped rects.
|
||||
-->
|
||||
<style>
|
||||
.bg { fill: transparent; stroke: #3f3f46; stroke-width: 1; }
|
||||
.chrome { fill: transparent; }
|
||||
.dot { fill: #52525b; }
|
||||
.sep { stroke: #3f3f46; stroke-width: 1; }
|
||||
.tab { fill: transparent; }
|
||||
text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
|
||||
.t-md { font-size: 15px; }
|
||||
.t-sm { font-size: 13px; }
|
||||
.t-xs { font-size: 11px; }
|
||||
.muted { fill: #a1a1aa; }
|
||||
.dim { fill: #71717a; }
|
||||
.sel-bg { fill: #b7410e; fill-opacity: 0.85; }
|
||||
.sel-fg { fill: #fff5f0; }
|
||||
.text { fill: #d7d7db; }
|
||||
.muted { fill: #9a9aa2; }
|
||||
.dim { fill: #6b6b72; }
|
||||
.ghost { fill: #6b6b72; }
|
||||
.blue { fill: #3ba7e0; }
|
||||
.gold { fill: #d9b54a; }
|
||||
.green { fill: #46d160; }
|
||||
.peachfg{ fill: #1a1206; }
|
||||
.greenfg{ fill: #0c130c; }
|
||||
.b { font-weight: 700; }
|
||||
text {
|
||||
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
</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"/>
|
||||
<g xml:space="preserve">
|
||||
<!-- ===== terminal frame ===== -->
|
||||
<rect x="0.5" y="0.5" width="639" height="399" rx="10" fill="#1a1b1e" stroke="#2a2b30"/>
|
||||
|
||||
<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"/>
|
||||
<!-- ===== tab bar ===== -->
|
||||
<text x="16" y="16" class="muted">Login</text>
|
||||
<rect x="80" y="2" width="72" height="20" rx="3" class="green"/>
|
||||
<text x="88" y="16" class="greenfg b">Register</text>
|
||||
<text x="168" y="16" class="muted">Admin_Panel</text>
|
||||
<text x="280" y="16" class="muted">Quit</text>
|
||||
<line x1="8" y1="27" x2="632" y2="27" stroke="#2a2b30"/>
|
||||
|
||||
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/default — cargo run</text>
|
||||
<!-- ===== Register panel (cols 21..58, rows 3..21) ===== -->
|
||||
<text x="168" y="60" class="blue b" textLength="304" lengthAdjust="spacing">╭─ Register ─────────────────────────╮</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>
|
||||
|
||||
<text x="20" y="68" font-size="14" class="muted">Pages:</text>
|
||||
<rect class="sel-bg" x="80" y="55" width="60" height="20" rx="3"/>
|
||||
<text x="110" y="69" text-anchor="middle" font-size="12" class="sel-fg" font-weight="600">Home</text>
|
||||
<text x="150" y="69" font-size="12" class="muted">Settings</text>
|
||||
<text x="220" y="69" font-size="12" class="muted">About</text>
|
||||
<text x="270" y="69" font-size="12" class="muted">Quit</text>
|
||||
<!-- subtitle -->
|
||||
<text x="184" y="92" class="muted">Create your account</text>
|
||||
|
||||
<line class="sep" x1="0" y1="92" x2="640" y2="92"/>
|
||||
<!-- fields: label col 23, value col 35 -->
|
||||
<text x="184" y="124" class="muted">Email</text>
|
||||
<text x="280" y="124" class="text">ada@acme.io</text>
|
||||
|
||||
<text x="20" y="120" font-size="18" font-weight="700">Home</text>
|
||||
<text x="20" y="142" font-size="11" class="dim">Choose a section to open.</text>
|
||||
<text x="184" y="156" class="muted">Password</text>
|
||||
<text x="280" y="156" class="muted">••••••••••</text>
|
||||
|
||||
<line class="sep" x1="0" y1="160" x2="640" y2="160"/>
|
||||
<text x="184" y="188" class="muted">Confirm</text>
|
||||
<text x="280" y="188" class="muted">••••••••••</text>
|
||||
|
||||
<g font-size="14">
|
||||
<rect class="sel-bg" x="0" y="170" width="640" height="34"/>
|
||||
<text x="32" y="192" class="sel-fg" font-weight="600">▸ Dashboard</text>
|
||||
<text x="600" y="192" text-anchor="end" class="sel-fg" font-size="11">enter</text>
|
||||
<!-- role: typed prefix white, block cursor, ghost completion gray -->
|
||||
<text x="184" y="220" class="muted">Role</text>
|
||||
<text x="280" y="220" class="text">a</text>
|
||||
<rect x="288" y="208" width="2" height="15" fill="#f3c690"/>
|
||||
<text x="288" y="220" class="ghost">dmin</text>
|
||||
|
||||
<text x="32" y="226" class="muted"> Accounts</text>
|
||||
<text x="32" y="254" class="muted"> Transactions</text>
|
||||
<text x="32" y="282" class="muted"> Reports</text>
|
||||
<text x="32" y="310" class="muted"> Settings</text>
|
||||
<!-- role dropdown: matches typed "a"; no border, no left pad -->
|
||||
<rect x="280" y="224" width="96" height="32" fill="#111217"/>
|
||||
<rect x="280" y="224" width="96" height="16" fill="#f3c690"/>
|
||||
<text x="280" y="236" class="peachfg b">admin</text>
|
||||
<text x="280" y="252" class="text">accountant</text>
|
||||
|
||||
<!-- primary button (bordered, green) -->
|
||||
<text x="184" y="300" class="green b" textLength="144" lengthAdjust="spacing">╭────────────────╮</text>
|
||||
<text x="184" y="316" class="green b" textLength="144" lengthAdjust="spacing">│ Create account │</text>
|
||||
<text x="184" y="332" class="green b" textLength="144" lengthAdjust="spacing">╰────────────────╯</text>
|
||||
<text x="360" y="316" class="dim">enter ↵</text>
|
||||
|
||||
<!-- ===== footer ===== -->
|
||||
<line x1="8" y1="378" x2="632" y2="378" stroke="#2a2b30"/>
|
||||
<text x="32" y="396" class="green b">INS</text>
|
||||
<text x="72" y="396" class="muted">[+]</text>
|
||||
<text x="632" y="396" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
|
||||
</g>
|
||||
|
||||
<line class="sep" x1="0" y1="358" x2="640" y2="358"/>
|
||||
<text x="20" y="380" font-size="11" class="dim">↑↓ move · enter select · q quit</text>
|
||||
<text x="620" y="380" text-anchor="end" font-size="11" class="dim">tui-pages v0.7.2</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 5.4 KiB |
68
static/img/terminal-keybindings-light.svg
Normal file
68
static/img/terminal-keybindings-light.svg
Normal file
@@ -0,0 +1,68 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -1,71 +1,79 @@
|
||||
<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">
|
||||
<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: #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; }
|
||||
.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" 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"/>
|
||||
<rect class="bg" width="640" height="400"/>
|
||||
|
||||
<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"/>
|
||||
<!-- ============== 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"/>
|
||||
|
||||
<text x="320" y="22" text-anchor="middle" font-size="11" class="dim">examples/keybindings — modal open</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>
|
||||
|
||||
<!-- 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 (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>
|
||||
|
||||
<!-- 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"/>
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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="128" y="340" class="muted"> ║ ║</text>
|
||||
<text x="128" y="356" class="dim"> ╚════════════════════════════════════════════════╝</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>
|
||||
<!-- ============== 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>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 4.1 KiB |
Reference in New Issue
Block a user