Hitonabi/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3 Phase A: Design-System-Fundament + Übersicht neu

Browse Source 
- base.css/components.css: EINE Akzentfarbe (Teal), Metrik-Kacheln, Fit-Ampel,
  Modal, Quickstart-Reihen; beschriftete Sidebar; rueckwaertskompatibel
  (Legacy-Klassen + fehlende Vars --hi/--red/--red-dim definiert).
- index.html: beschriftete Navigation, Topbar mit Security-Chip, neue Overview-Mountpunkte.
- ui.js: Icon-Set erweitert + confirmModal/promptModal/fmtBytes/fmtPct (Beginner-UX-Helfer).
- overview.js: komplett neu (Klartext-Urteil, 4 Kacheln, System-Gesundheit-Balken,
  gefuehrter Schnellstart, "Dein Stack"). Inline-Styles raus.

Verifiziert: lokal 0 Konsolenfehler, Live-Metriken via WS, alle Views unbeschaedigt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-21 06:51:28 +02:00
parent 8f63c4969a
commit 52b0a3bff5
5 changed files with 418 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+26 -27
View File
@@ -10,19 +10,19 @@
<body>
<div id="app">
<!-- Sidebar: Bereichs-Navigation. Platzhalter-Items sind die kommenden Roadmap-Bereiche. -->
<!-- Sidebar: beschriftete Bereichs-Navigation -->
<aside class="sidebar">
<div class="side-logo" id="logo"></div>
<div class="brand"><span class="brand-logo" id="logo"></span><span class="brand-tx">Mission Control</span></div>
<nav class="side-nav">
<a class="nav-item" data-view="overview" title="Übersicht" data-ic="grid"></a>
<a class="nav-item" data-view="models" title="Modelle" data-ic="cpu"></a>
<a class="nav-item" data-view="activity" title="Aktivität" data-ic="pulse"></a>
<a class="nav-item" data-view="server" title="Server" data-ic="server"></a>
<a class="nav-item" data-view="cookbook" title="Cookbook" data-ic="book"></a>
<a class="nav-item" data-view="guides" title="Guides" data-ic="help"></a>
<a class="nav-item" data-view="overview"><span class="ni-ic" data-ic="grid"></span><span class="ni-tx">Übersicht</span></a>
<a class="nav-item" data-view="models"><span class="ni-ic" data-ic="cpu"></span><span class="ni-tx">Modelle</span></a>
<a class="nav-item" data-view="activity"><span class="ni-ic" data-ic="pulse"></span><span class="ni-tx">Aktivität</span></a>
<a class="nav-item" data-view="server"><span class="ni-ic" data-ic="server"></span><span class="ni-tx">Server</span></a>
<a class="nav-item" data-view="cookbook"><span class="ni-ic" data-ic="book"></span><span class="ni-tx">Cookbook</span></a>
<a class="nav-item" data-view="guides"><span class="ni-ic" data-ic="help"></span><span class="ni-tx">Guides</span></a>
</nav>
<div class="side-foot">
<span class="nav-item" title="Einstellungen" data-ic="settings" id="nav-settings"></span>
<span class="nav-item" id="nav-settings"><span class="ni-ic" data-ic="settings"></span><span class="ni-tx">Einstellungen</span></span>
</div>
</aside>
@@ -31,7 +31,8 @@
<header class="topbar">
<span class="status-pill"><span id="swdot" class="dot"></span><span id="swlabel">verbinde…</span></span>
<span class="spacer"></span>
<span class="top-stat" id="top-active-text" style="color:var(--teal)">Kein Modell geladen</span>
<span class="top-stat" id="top-active-text">Kein Modell geladen</span>
<span class="sec-chip" id="sec-chip"><span data-ic="shield"></span><span id="sec-chip-tx">Nur im Heimnetz</span></span>
</header>
<!-- Alert-Banner (wird per JS ein-/ausgeblendet) -->
@@ -41,14 +42,13 @@
<main class="content">
<section class="view" data-view="overview">
<div id="hero"></div>
<div class="grid grid-3 mt-6" id="ov-quick"></div>
<div class="grid grid-2 mt-6" style="align-items: start;">
<div class="card" id="ov-models"></div>
<div class="card" id="ov-recent-jobs"></div>
<div id="ov-hero"></div>
<div class="tiles" id="ov-tiles"></div>
<div class="split">
<div class="card" id="ov-health"></div>
<div class="card" id="ov-quickstart"></div>
</div>
<div class="card" id="ov-stack"></div>
</section>
<section class="view" data-view="activity" hidden>
@@ -81,26 +81,25 @@
</div>
<!-- Settings Modal -->
<div id="settings-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:100; align-items:center; justify-content:center;">
<div class="card" style="width:100%; max-width:400px; position:relative">
<div id="settings-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.62); z-index:100; align-items:center; justify-content:center;">
<div class="card" style="width:100%; max-width:420px; position:relative">
<button id="sm-close" class="ghost" style="position:absolute; top:12px; right:12px;">Schließen</button>
<h2 style="margin-top:0">Einstellungen</h2>
<div class="mt-6">
<label>API Token (Authentifizierung)</label>
<input id="token" class="tokin" placeholder="Optionales API Token..." autocomplete="off">
<div class="meta text-xs mt-2">Wird für die WebSockets und API Calls genutzt, falls der Server geschützt ist.</div>
<h3 style="margin-top:0;font-weight:500">Einstellungen</h3>
<div class="mt-4">
<label>Zugangs-Token (optional)</label>
<input id="token" class="tokin" placeholder="Nur nötig, wenn der Server geschützt ist…" autocomplete="off">
<div class="hint mt-2">Schützt den Zugriff. Wird für API-Aufrufe und Live-Verbindungen mitgeschickt.</div>
</div>
</div>
</div>
<div id="toast" class="toast"></div>
<!-- Icons in die Nav/Logo einsetzen, bevor das Haupt-Modul laedt -->
<!-- Icons in Nav/Logo/Chip einsetzen, bevor das Haupt-Modul laedt -->
<script type="module">
import { ICON } from "/static/js/core/ui.js";
document.getElementById("logo").innerHTML = ICON.logo;
document.querySelectorAll(".nav-item[data-ic]").forEach(n => (n.innerHTML = ICON[n.dataset.ic] || ""));
document.querySelectorAll("[data-ic]").forEach(n => (n.innerHTML = ICON[n.dataset.ic] || ""));
</script>
<script type="module" src="/static/js/main.js"></script>
</body>