94 lines
5.3 KiB
XML
94 lines
5.3 KiB
XML
<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>
|
|
.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>
|
|
|
|
<g xml:space="preserve">
|
|
<!-- ===== terminal frame ===== -->
|
|
<rect x="0.5" y="0.5" width="639" height="399" rx="10" fill="#1a1b1e" stroke="#2a2b30"/>
|
|
|
|
<!-- ===== tab bar ===== -->
|
|
<text x="8" y="16" class="muted">Login</text>
|
|
<rect x="56" y="2" width="80" height="20" class="green"/>
|
|
<text x="64" y="16" class="greenfg b">Register</text>
|
|
<text x="144" y="16" class="muted">Admin_Panel</text>
|
|
<text x="248" y="16" class="muted">Quit</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>
|
|
|
|
<!-- subtitle -->
|
|
<text x="184" y="92" class="muted">Create your account</text>
|
|
|
|
<!-- 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="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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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 ===== -->
|
|
<text x="32" y="380" class="green b">INS</text>
|
|
<text x="72" y="380" class="muted">[+]</text>
|
|
<text x="632" y="380" class="gold" text-anchor="end">tui-pages v0.7.2 │ 60 FPS</text>
|
|
</g>
|
|
</svg>
|