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:
2026-06-18 11:00:42 +02:00
parent c2f06a5d2a
commit 49df2015c8
13 changed files with 1870 additions and 49 deletions
+58
View File
@@ -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;
}