> Terminal_|

Green-on-black CRT aesthetic. Scanlines, phosphor glow, monospace everything.

Technologies Demonstrated

[Alpine] Copy-to-clipboard color swatches with x-data + @click

[Alpine] Toggle demo — process start/stop with blinking indicator

[HTMX] hx-post form submission to /guides/terminal/demo-form

[Alpine] Collapsible card panels with x-show + x-transition

[HTMX] SSE boot stream via hx-ext='sse' + sse-connect

[Both] Command prompt — HTMX POST + Alpine state management

[Alpine] Keyboard-navigable file browser with @keydown handlers

Color Palette

[Alpine]

Primary

#00ff41

\033[32m

Secondary

#00bfff

\033[36m

Accent

#ffcc00

\033[33m

Danger

#ff3333

\033[31m

Muted

#00994d

\033[90m

#0a0a0a

\033[40m

Click any swatch to copy hex value to clipboard.

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
					@termColorSwatch("Primary", "var(--color-primary)", "#00ff41", "\\033[32m")
					@termColorSwatch("Secondary", "var(--color-secondary)", "#00bfff", "\\033[36m")
					@termColorSwatch("Accent", "var(--color-accent)", "#ffcc00", "\\033[33m")
					@termColorSwatch("Danger", "var(--color-danger)", "#ff3333", "\\033[31m")
					@termColorSwatch("Muted", "var(--color-text-muted)", "#00994d", "\\033[90m")
					@termColorSwatch("BG", "var(--color-bg)", "#0a0a0a", "\\033[40m")
				</div>

Typography

DISPLAY — 2.5rem / Bold

user@stylesheets:~$

HEADING — 1.25rem / Bold

System Process Monitor

BODY — 0.875rem / Regular

The terminal is more than an interface — it is a philosophy. Every keystroke is deliberate. Every output is meaningful. No wasted pixels, no unnecessary decoration.

BODY — 0.875rem / Light (300)

// Dimmed text for secondary information and comments

CAPTION — 0.75rem / Regular

[2026-03-07 14:32:01] LOG: All font weights rendered with Fira Code monospace.

Spacing Scale

BASE UNIT: 4px

4px

████████████████████████████████

8px

████████████████████████████████

16px

████████████████████████████████

24px

████████████████████████████████

32px

████████████████████████████████

48px

████████████████████████████████

64px

████████████████████████████████

Buttons

[Alpine]

SIZES

VARIANTS

TOGGLE DEMO [Alpine]

PROCESS STOPPED

<div x-data="{ running: false }" class="flex items-center gap-6">
							<button
								class="term-btn cursor-pointer"
								{ templ.Attributes{"@click": "running = !running"}... }
							>
								<span x-text="running ? '[STOP]' : '[START]'">[START]</span>
							</button>
							<div class="flex items-center gap-2" style="font-size: var(--font-size-caption);">
								<span
									class="inline-block w-2 h-2 rounded-full"
									{ templ.Attributes{":class": "running ? 'term-cursor' : ''"}... }
									{ templ.Attributes{":style": "running ? 'background: var(--color-primary); box-shadow: 0 0 6px var(--color-primary)' : 'background: var(--color-text-muted)'"}... }
								></span>
								<span style="color: var(--color-text-muted);" x-text="running ? 'PROCESS RUNNING' : 'PROCESS STOPPED'">PROCESS STOPPED</span>
							</div>
						</div>

Forms

[HTMX] [Alpine]

<form
						hx-post="/guides/terminal/demo-form"
						hx-target="#term-form-response"
						hx-swap="innerHTML"
						hx-indicator="#term-submit"
						class="space-y-6"
					>
						<!-- Text input -->
						<div>
							<label class="block mb-1" style="font-size: var(--font-size-caption); color: var(--color-text-muted);" for="term-name">
								OPERATOR NAME <span class="term-cursor">_</span>
							</label>
							<input
								id="term-name"
								name="name"
								type="text"
								placeholder="enter identifier..."
								class="term-input"
							/>
						</div>
						<!-- Select -->
						<div>
							<label class="block mb-1" style="font-size: var(--font-size-caption); color: var(--color-text-muted);" for="term-select">
								CLEARANCE LEVEL
							</label>
							<select id="term-select" name="category" class="term-input cursor-pointer">
								<option value="">-- SELECT --</option>
								<option value="alpha">ALPHA</option>
								<option value="beta">BETA</option>
								<option value="gamma">GAMMA</option>
							</select>
						</div>
						<!-- Checkboxes -->
						<div>
							<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted);">SUBSYSTEMS</p>
							<div class="space-y-2">
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="checkbox" name="pref" value="network" class="w-4 h-4 cursor-pointer"/>
									NETWORK
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="checkbox" name="pref" value="storage" class="w-4 h-4 cursor-pointer"/>
									STORAGE
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="checkbox" name="pref" value="compute" class="w-4 h-4 cursor-pointer"/>
									COMPUTE
								</label>
							</div>
						</div>
						<!-- Radio buttons -->
						<div>
							<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted);">PRIORITY</p>
							<div class="space-y-2">
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="radio" name="weight" value="low" class="w-4 h-4 cursor-pointer"/>
									LOW
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="radio" name="weight" value="normal" checked class="w-4 h-4 cursor-pointer"/>
									NORMAL
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="radio" name="weight" value="critical" class="w-4 h-4 cursor-pointer"/>
									CRITICAL
								</label>
							</div>
						</div>
						<!-- Submit -->
						<div>
							<button type="submit" class="term-btn cursor-pointer" id="term-submit">
								[SUBMIT]
								<span class="term-indicator"> ...</span>
							</button>
						</div>
					</form>

Cards & Panels

[Alpine]

system.log

STATIC

A standard content container. Single-pixel green border, subtle glow shadow, CRT scanline overlay. Pure function.

── process.log ──

Hidden content revealed on expand. Alpine.js powers the toggle with no server round-trip.

// process metadata

pid: 31337

status: RUNNING

uptime: 47d 13h 22m

<div class="term-panel" x-data="{ expanded: false }">
						<div
							class="p-6 cursor-pointer flex items-center justify-between"
							{ templ.Attributes{"@click": "expanded = !expanded"}... }
						>
							<h3 style="font-size: var(--font-size-heading); font-weight: 700;">
								{ "── process.log ──" }
							</h3>
							<span class="transition-transform" style="font-size: var(--font-size-heading);" { templ.Attributes{":class": "expanded ? 'rotate-45' : ''"}... }>+</span>
						</div>
						<div x-show="expanded" class="px-6 pb-6" style="border-top: 1px solid var(--color-border);">
							<p class="pt-4" style="font-size: var(--font-size-body); color: var(--color-text-muted);">
								Hidden content revealed on expand. Alpine.js powers the toggle with no server round-trip.
							</p>
							<div class="mt-4 p-3" style="background: var(--color-bg); font-size: var(--font-size-caption);">
								<p style="color: var(--color-text-muted);">{ "// process metadata" }</p>
								<p>pid: 31337</p>
								<p>status: <span style="color: var(--color-primary);">RUNNING</span></p>
								<p>uptime: 47d 13h 22m</p>
							</div>
						</div>
					</div>

CRITICAL ALERT

Warning panel using danger color. Hard edges. Cannot be dismissed. Glowing red border.

Live System Boot

[HTMX] [Alpine]

SSE stream from /guides/terminal/boot — messages arrive with 300ms delay

<div x-data="{ connected: true }" class="term-panel p-4">
					<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted);">
						SSE stream from /guides/terminal/boot — messages arrive with 300ms delay
					</p>
					<div x-show="connected">
						<div
							hx-ext="sse"
							sse-connect="/guides/terminal/boot"
							sse-swap="message"
							hx-swap="beforeend"
							id="term-boot-log"
							class="h-64 overflow-y-auto"
							style="font-size: var(--font-size-caption);"
						></div>
					</div>
					<div class="mt-3 flex gap-3">
						<button
							class="term-btn cursor-pointer"
							{ templ.Attributes{"@click": "connected = false; $nextTick(() => { document.getElementById('term-boot-log').innerHTML = ''; connected = true })"}... }
						>[REBOOT]</button>
					</div>
				</div>

Command Prompt

[HTMX] [Alpine]

<div class="term-panel p-4">
					<div id="term-cmd-output" class="space-y-1 mb-2" style="font-size: var(--font-size-caption);"></div>
					<form hx-post="/guides/terminal/exec" hx-target="#term-cmd-output" hx-swap="beforeend" class="flex items-center gap-2">
						<span style="color: var(--color-secondary);">$</span>
						<input type="text" name="cmd" class="term-input flex-1" autocomplete="off" placeholder="type help, ls, whoami, or date"/>
					</form>
				</div>

File Browser

[Alpine]

Use ↑↓ to navigate, Enter to open. Click to focus.

<div
					x-data="{ files: ['README.md','main.go','go.mod','go.sum','handlers/','guides/','static/','templates/','Makefile'], active: 0, preview: '' }"
					tabindex="0"
					class="term-panel p-4 focus:outline-none"
					{ templ.Attributes{
						"@keydown.up.prevent": "active = Math.max(0, active - 1)",
						"@keydown.down.prevent": "active = Math.min(files.length - 1, active + 1)",
						"@keydown.enter": "preview = 'Contents of ' + files[active] + '...'",
					}... }
				>
					<p class="mb-2" style="color: var(--color-text-muted); font-size: var(--font-size-caption);">
						{ "Use ↑↓ to navigate, Enter to open. Click to focus." }
					</p>
					<template x-for="(f, i) in files" :key="f">
						<div
							class="px-2 py-0.5"
							style="font-size: var(--font-size-body);"
							{ templ.Attributes{
								":class": "i === active ? 'term-file-active' : ''",
								"@click": "active = i",
							}... }
							x-text="f"
						></div>
					</template>
					<div
						x-show="preview"
						class="mt-3 p-2"
						style="border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-caption);"
						x-text="preview"
					></div>
				</div>