c0f77ba69c
Vollständige Überarbeitung des Guide-Tabs: Struktur: Statt 8 gleichwertiger Accordions jetzt 4 klar getrennte Gruppen (EINSTIEG / TOOLS EINRICHTEN / AGENTEN MEISTERN / WENN ETWAS NICHT KLAPPT) — jede als eigene Card mit farbigem Teal-Label. Anfänger sehen sofort die logische Reihenfolge. Neue Tutorials (war 8, jetzt 12): - "Welches Tool für mich?" — Entscheidungsbaum (OpenWebUI/Cline/OpenCode/Zed) - "OpenCode verbinden & erste Schritte" — Config + Befehle - "Cline in VS Code verbinden" — Plan- vs. Act-Modus erklärt - "OpenWebUI verbinden" — für Nutzer ohne Programmierkenntnisse - "Einen Agenten richtig briefen" — Schlecht→Gut-Beispiele - "MCP" — überarbeitet mit konkretem Config-Beispiel und Empfehlungen - "Skills & Rules" — AGENTS.md / .clinerules mit echten Pfaden und Quellen - "Häufige Probleme & Lösungen" — Troubleshooting-Tabelle (7 Fälle) Zusammengeführt: Kontext-Tutorials 2+3 (waren doppelt) → ein Tutorial. Neue CSS-Komponenten: .tut-table/.tut-row für Vergleichstabellen, .tut-code für Code-Blöcke, .bad für durchgestrichene Negativbeispiele. Neues main.css von Vite extrahiert und in index.html eingebunden. Konzepte erweitert: Token, TTL, System-Prompt, Vision ergänzt (war 9, jetzt 12). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
77 lines
4.3 KiB
HTML
77 lines
4.3 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="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230f1720'/%3E%3Ccircle cx='16' cy='16' r='8' fill='none' stroke='%232dd4bf' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='2.5' fill='%232dd4bf'/%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="/static/css/base.css">
|
|
<link rel="stylesheet" href="/static/css/components.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<aside class="sidebar">
|
|
<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"><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="connect"><span class="ni-ic" data-ic="swap"></span><span class="ni-tx">Verbinden</span></a>
|
|
<a class="nav-item" data-view="news"><span class="ni-ic" data-ic="info"></span><span class="ni-tx">News</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" id="nav-settings"><span class="ni-ic" data-ic="settings"></span><span class="ni-tx">Einstellungen</span></span>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<header class="topbar">
|
|
<span class="status-pill"><span id="swdot" class="dot"></span><span id="swlabel">verbinde…</span></span>
|
|
<span class="spacer"></span>
|
|
<span id="update-badges" class="flex" style="gap:6px"></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>
|
|
|
|
<div id="alert" class="alert" style="display:none"></div>
|
|
|
|
<main class="content">
|
|
<section class="view" data-view="overview"></section>
|
|
<section class="view" data-view="activity" hidden></section>
|
|
<section class="view" data-view="server" hidden></section>
|
|
<section class="view" data-view="models" hidden></section>
|
|
<section class="view" data-view="cookbook" hidden></section>
|
|
<section class="view" data-view="connect" hidden></section>
|
|
<section class="view" data-view="news" hidden></section>
|
|
<section class="view" data-view="guides" hidden></section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<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 class="mt-4">
|
|
<label>HuggingFace-Token (optional)</label>
|
|
<input id="hf-token" class="tokin" placeholder="hf_…" autocomplete="off">
|
|
<div class="hint mt-2">Nicht nötig für öffentliche Modelle — vermeidet aber Rate-Limits und erlaubt zugangsbeschränkte Modelle.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
<link rel="stylesheet" href="/static/dist/main.css">
|
|
<script type="module" src="/static/dist/main.js"></script>
|
|
</body>
|
|
</html>
|