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

register is now fully working

Browse Source
This commit is contained in:
Priec
2026-06-02 21:40:40 +02:00
parent 83a80b6e31
commit 93769b3129
8 changed files with 457 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
static/img/terminal-default.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB