Hitonabi
108 lines
4.1 KiB
HTML
108 lines
4.1 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>
|
|
<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>
|
|
</nav>
|
|
<div class="side-foot">
|
|
<span class="nav-item" title="Einstellungen" data-ic="settings" id="nav-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" id="top-active-text" style="color:var(--teal)">Kein Modell geladen</span>
|
|
</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 grid-3" id="ov-quick" style="margin-top: 24px"></div>
|
|
|
|
<div class="grid grid-2" style="margin-top: 24px; align-items: start;">
|
|
<div class="card" id="ov-models"></div>
|
|
<div class="card" id="ov-recent-jobs"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="view" data-view="activity" hidden>
|
|
<div class="grid kpis" id="act-kpis"></div>
|
|
<div class="card" id="act-sys"></div>
|
|
<div class="card" id="v-activity"></div>
|
|
</section>
|
|
|
|
<section class="view" data-view="server" hidden>
|
|
<div class="card" id="wartung"></div>
|
|
</section>
|
|
|
|
<section class="view" data-view="models" hidden>
|
|
<div class="grid grid-2" id="m-top-grid">
|
|
<div class="card" id="m-chat" style="grid-column: span 2;"></div>
|
|
</div>
|
|
<div class="card" id="m-table"></div>
|
|
</section>
|
|
|
|
<section class="view" data-view="cookbook" hidden>
|
|
<!-- Wird von cookbook.js gerendert -->
|
|
</section>
|
|
|
|
<section class="view" data-view="guides" hidden>
|
|
<!-- Wird von guides.js gerendert -->
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
</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">
|
|
<button id="sm-close" class="ghost" style="position:absolute; top:12px; right:12px;">Schließen</button>
|
|
<h2 style="margin-top:0">Einstellungen</h2>
|
|
|
|
<div style="margin-top:24px">
|
|
<label>API Token (Authentifizierung)</label>
|
|
<input id="token" class="tokin" placeholder="Optionales API Token..." autocomplete="off">
|
|
<div class="meta" style="font-size:12px; margin-top:4px;">Wird für die WebSockets und API Calls genutzt, falls der Server geschützt ist.</div>
|
|
</div>
|
|
</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>
|