| @@ -0,0 +1,74 @@ | |||||
| # UI-Sollmodell – Control Plane | |||||
| ## Zielbild | |||||
| - **Operator-first**: Das UI muss schnell erfassbar sein, ohne verschwenderischen Glanz. Klar strukturierte Oberflächen mit nordisch-kühlen Tönen, typografischer Klarheit und ausreichend Weißraum ermöglichen fokussiertes Arbeiten ohne Ablenkung. | |||||
| - **Helles Farbschema**: Weiß- und Graustufen dominieren, Akzente bleiben zurückhaltend (tiefe Blau- oder Grünwerte für Aktionen/Status). Kein Neon, kein Cyber-Punk-Glanz, keine animierten Nebel. | |||||
| - **Vertrauensein: Live-Status & Kontrolle auf einen Blick**: Wichtigste Telemetrie und Schalter werden ohne Scrollen sichtbar. Historien und Auditdaten leben in eigenen, abrufbaren Tabs. | |||||
| ## Informationsarchitektur & Tabs | |||||
| Statt des current long-scroll Layouts treten klar abgegrenzte Top-Level-Tabs. Jeder Tab bekommt eine eindeutige Verantwortung. | |||||
| ### 1. Overview & Status | |||||
| **Zweck**: Schnellcheck, ob Sender/Control Plane gesund ist. Live-Hero, Status-Zustand, Aktivitäts-Metriken. | |||||
| **Inhalte**: | |||||
| - Hero-Panel mit Frequenz, TX-Status, Connection-LED, Zustandshinweis | |||||
| - Schnellmetriken (Chunks, Samples, Underruns, Uptime, Rate) | |||||
| - Visuelle Health-Sparkbars (Audio Buffer, Stream Health, TX Activity) | |||||
| - Kurznotizen zum letzten Fehler/Runtime-State (z.B. Bullet unter Hero) | |||||
| - Kompaktes „Last Update / Runtime Age“-Widget | |||||
| > Alles bleibt hier; nichts anderes. | |||||
| ### 2. Transmission Control | |||||
| **Zweck**: Alle live-änderbaren Controls bündeln, damit ein Operator schnell Eingriffe macht. | |||||
| **Inhalte**: | |||||
| - TX Buttons (Start/Stop/Refresh) + große Hinweisfläche („Danger“-Status nur hier sichtbar, mit klarer Trennung) | |||||
| - Frequency Panel (Slider, Eingabe, Presets, Apply/Reset) | |||||
| - RDS Text Panel (PS/RT, Char-Counter, Presets) | |||||
| - Switches (Stereo, RDS, Limiter) | |||||
| - Optional: Danger Zone (Reset Fault / Hard Refresh) als separater Sub-Panel innerhalb des Tabs | |||||
| ### 3. Diagnostics & Health | |||||
| **Zweck**: Tiefere Einblicke, wenn etwas nicht stimmt. | |||||
| **Inhalte**: | |||||
| - Health-Dashboard (HTTP/Runtime/Queue/Buffer, Zeit seit Update) als strukturierte Key-Value-Liste | |||||
| - Meter + Trend-Sparklines (High Watermark, Queue Fill) | |||||
| - Control Audit (Reject Counts) | |||||
| - Transition History + Fault History (pflege kurzer Listen) | |||||
| > Diese Inhalte verschwinden vom Overview, sitzen gebündelt im Diagnostics-Tab. | |||||
| ### 4. Activity & Logs | |||||
| **Zweck**: Chronologische Einblicke und Auditierung. | |||||
| **Inhalte**: | |||||
| - Activity Log (komprimiert + scrollbar) | |||||
| - Keyboard Shortcuts / Cheatsheet (ggf. als Suchleiste im Tab) | |||||
| - Optional: kleine Info-Karte über Backend-Version, Live Config | |||||
| ### Tab-Wechsel & Mobile | |||||
| - Tabs als saturated horizontal/vertical nav mit Indikatoren (keine unwichtigen Animationen). | |||||
| - Mobile: Tab-Inhalte untereinander, Tab-Bar sticky oben, Panels innerhalb Tabs collapsible. | |||||
| ## Auch weiterhin auf Overview | |||||
| - Hero mit Frequenz & TX-Status | |||||
| - Schnellmetriken + Hauptstatus-Messwerte | |||||
| - Kompaktes Toast/Status-Fenster | |||||
| > Diagnosen, Logs, Toggels und History wandern in eigene Tabs. | |||||
| ## Visuelle Stilprinzipien | |||||
| 1. **Palette**: Hintergrund `#f7f8fb`, Flächen `#ffffff`, `#eef0f3`, `#d7dcdf`; Text `#111724`/`#3b3f45`; Akzente `#1f4d9d`, `#0d944a` für positive Aktionen, `#b03030` für Fehler. | |||||
| 2. **Typografie**: Sans-Serif (z. B. `Inter` oder `Libre Franklin`), Gewichtung durch Größe statt Glow. Monospaced nur für Messwerte/Logs. | |||||
| 3. **Container**: Schatten weich (z. B. `0 8px 24px rgba(15,23,42,0.08)`), Ecken leicht gerundet (`8px`). | |||||
| 4. **Tabs/Navigation**: Prägnante Tab-Bar mit Underline/Border-Highlight. Klarer Fokuszustand, deutliche Hover/Active, keine Glüh-Effekte. | |||||
| 5. **Buttons**: Volume-sichere Farbflächen (z. B. `#0d944a`) auf weißem Hintergrund, sekundäre Buttons Outlines, Danger red minimal. | |||||
| 6. **Status-Indikatoren**: Nicht mehr „glow“; statische Icons oder leichte Capsules, ggf. Label (LIVE/IDLE) in Kapitälchen. | |||||
| 7. **Spacing**: Gitter (max-width 1200px) mit konsistentem `24px`-Gutter, `14px` Zwischenräume. | |||||
| ## Nächste Schritte | |||||
| 1. **Tab-Start**: Wrapper für Tabs + Content-Sektionen in `internal/control/ui.html`. Beginn mit statischem Tab-Layout (z. B. `nav` + `section`s) und Platzhalter für Inhalte. | |||||
| 2. **Palette-Refactoring**: CSS-Variablen neu definieren (heller Hintergrund, neue Akzentfarben) und Grundflächen anpassen. | |||||
| 3. **Menu-State**: Simplify hero/medicine to new layout, move quick-grid + signal cards into Review `Overview` tab. | |||||
| 4. **Logik**: Tab-Switching via minimal JS (klassische `data-tab`), keine komplette re-rendering. | |||||
| ## Offene Fragen | |||||
| - Welche Panels bleiben collapsible in den Tabs (z. B. Danger Zone vs separate CTA)? | |||||
| - Soll es ein persistentes „Status banner“ (z. B. oben) über allen Tabs geben? | |||||
| - Wie viel Redundanz darf es zwischen Overview und Control geben (z. B. TX-Buttons)? | |||||