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

99
static/img/terminal-canvas.svg
View File

@@ -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; }
.muted { fill: #a1a1aa; }
.dim { fill: #71717a; }
.label { fill: #a1a1aa; letter-spacing: 0.08em; }
.btn-fg { fill: #fff5f0; }
.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 {
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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB