59 lines
3.1 KiB
XML
59 lines
3.1 KiB
XML
<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>
|