Hitonabi
364939466f
Architektur auf Separation of Concerns umgestellt – ohne Build-Schritt,
ohne neues Framework, ohne DB (KISS bleibt). Endpoint-URLs unveraendert,
daher 1:1-kompatibel zum bisherigen Stand.
Backend (Top-Level-Helfer + ein Router je Bereich):
- app.py auf duennen Einstieg reduziert (FastAPI + include_router + static)
- config/auth/jobengine/llamaswap als getrennte Helfer-Module
- Endpoints in routers/{models,jobs,maintenance}.py
Frontend (native ES-Module statt Single-File):
- index.html = Huelle: Sidebar-Nav, Topbar, Alert-Banner, Hash-Routing
- css/{base,components}.css – Tokens + Komponenten
- js/core/{api,ui,nav}.js + js/panels/{overview,models,maintenance,jobs}.js + main.js
- Panel-Vertrag: { id, mount?(), onStatus?(s), onJobs?(jobs) }
- Optik an docs/mission-control-overview.png angelehnt (Hero, KPI-Kacheln,
Listen, Aktivitaets-Stream, getoente Karten)
Doku: CLAUDE.md + README auf die neue Struktur aktualisiert.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
80 lines
2.9 KiB
HTML
80 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Mission Control</title>
|
||
<link rel="stylesheet" href="/static/css/base.css">
|
||
<link rel="stylesheet" href="/static/css/components.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
|
||
<!-- Sidebar: Bereichs-Navigation. Platzhalter-Items sind die kommenden Roadmap-Bereiche. -->
|
||
<aside class="sidebar">
|
||
<div class="side-logo" id="logo"></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>
|
||
<span class="nav-item disabled" title="Aktivität — siehe Übersicht" data-ic="pulse"></span>
|
||
<span class="nav-item disabled" title="Server (bald)" data-ic="server"></span>
|
||
<span class="nav-item disabled" title="Cookbook (bald)" data-ic="book"></span>
|
||
<span class="nav-item disabled" title="Guides (bald)" data-ic="help"></span>
|
||
</nav>
|
||
<div class="side-foot">
|
||
<span class="nav-item disabled" title="Einstellungen (bald)" data-ic="settings"></span>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="main">
|
||
<!-- Topbar -->
|
||
<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">Modelle<b id="top-models">–</b></span>
|
||
<span class="top-stat">Jobs<b id="top-jobs">0</b></span>
|
||
<span class="top-clock" id="clock">--:--</span>
|
||
<input id="token" class="tokin" placeholder="Token" autocomplete="off">
|
||
</header>
|
||
|
||
<!-- Alert-Banner (wird per JS ein-/ausgeblendet) -->
|
||
<div id="alert" class="alert" style="display:none"></div>
|
||
|
||
<!-- Content: genau eine .view ist sichtbar (Hash-Routing) -->
|
||
<main class="content">
|
||
|
||
<section class="view" data-view="overview">
|
||
<div id="hero"></div>
|
||
<div class="grid kpis" id="kpis"></div>
|
||
<div class="grid grid-3">
|
||
<div class="card" id="health"></div>
|
||
<div class="card" id="ov-models"></div>
|
||
<div class="card" id="ov-activity"></div>
|
||
</div>
|
||
<div class="card" id="wartung"></div>
|
||
</section>
|
||
|
||
<section class="view" data-view="models" hidden>
|
||
<div class="grid grid-2">
|
||
<div class="card" id="m-download"></div>
|
||
<div class="card" id="m-chat"></div>
|
||
</div>
|
||
<div class="card" id="m-table"></div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<!-- Icons in die Nav/Logo 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] || ""));
|
||
</script>
|
||
<script type="module" src="/static/js/main.js"></script>
|
||
</body>
|
||
</html>
|