feat(web): frontend foundation — Tailwind terminal theme, Query, Router, Zustand + live booth screen
Add tailwindcss (Bloomberg-terminal theme in index.css), @tanstack/react-query + react-router, zustand, and Radix primitives. Router with role-guarded routes; QueryClient wrapping the existing apiFetch; a small Zustand live store fed by a /api/ws client that invalidates Query caches. Booth screen: live occupancy gauge + streaming entry/exit/payment feed. Vite proxies the WS upgrade. Note: BoothScreen references the pay/exit modal + active-sessions panel added in following commits; final HEAD builds.
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Bloomberg-terminal aesthetic: dense, dark, monospace, keyboard-first.
|
||||
Tailwind v4 — design tokens live here in @theme (no tailwind.config.js).
|
||||
The booth runs on a fixed appliance display; we optimise for a dark room,
|
||||
glanceable status colour, and high information density over whitespace. */
|
||||
@theme {
|
||||
/* Surfaces — near-black, layered greys for panels/borders. */
|
||||
--color-term-bg: #0a0e12;
|
||||
--color-term-panel: #11161c;
|
||||
--color-term-panel-2: #161d25;
|
||||
--color-term-border: #232c37;
|
||||
--color-term-muted: #6b7785;
|
||||
--color-term-text: #c9d3de;
|
||||
|
||||
/* Status accents — the terminal's signal colours. */
|
||||
--color-term-amber: #f5a623; /* primary accent / headings / focus */
|
||||
--color-term-green: #2ecc71; /* entry / ok / free */
|
||||
--color-term-red: #ff4d4f; /* exit / fault / full */
|
||||
--color-term-cyan: #38bdf8; /* payment / info */
|
||||
|
||||
/* Monospace stack — IBM Plex Mono / JetBrains first, system mono fallback. */
|
||||
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular",
|
||||
"Menlo", "Consolas", monospace;
|
||||
|
||||
/* Tight radius — terminals are square. */
|
||||
--radius-term: 2px;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-term-bg);
|
||||
color: var(--color-term-text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Crisp text and no rubber-banding on the fixed appliance display. */
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
/* Terminal scrollbars — thin, dark, unobtrusive. */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-term-border) transparent;
|
||||
}
|
||||
|
||||
/* A visible keyboard-focus ring in the amber accent (keyboard-first UI). */
|
||||
:focus-visible {
|
||||
outline: 1px solid var(--color-term-amber);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
Reference in New Issue
Block a user