Files
mischlabs/admin.html
Kroonk 4cb0e89e92
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 11s
style: minimalist design for services status board with tooltip and horizontal traffic-light bars
2026-05-21 18:09:31 +02:00

100 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs Admin</title>
<meta name="description" content="MischLabs dashboard administration.">
<meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=20">
</head>
<body>
<header class="shell hero admin-hero">
<div class="brand">
<img class="brand-mark" src="/icons/app-icon-source.png" alt="" width="72" height="72">
<div>
<p class="eyebrow">Admin</p>
<h1>MischLabs</h1>
<p class="subtitle">Dienste pruefen, Kategorien vorbereiten und Dashboard-Konfiguration verwalten.</p>
</div>
</div>
<div class="admin-actions">
<a class="ghost-button" href="/">Dashboard</a>
<button class="ghost-button" id="loginButton" type="button">Mit Keycloak anmelden</button>
<button class="ghost-button" id="logoutButton" type="button" hidden>Abmelden</button>
</div>
</header>
<main class="shell admin-shell">
<section class="admin-panel" id="loginPanel">
<p class="section-kicker">SSO</p>
<h2>Anmeldung erforderlich</h2>
<p class="admin-copy">Diese Seite nutzt Keycloak per Authorization Code + PKCE. Der Client muss in Keycloak als Public Client mit Redirect URI `https://mischlabs.de/admin.html` angelegt sein.</p>
<div class="notice" id="loginMessage">Noch nicht angemeldet.</div>
</section>
<section class="admin-panel" id="adminPanel" hidden>
<div class="admin-panel-head">
<div>
<p class="section-kicker">Konfiguration</p>
<h2>Dienste & Kategorien</h2>
</div>
<div class="admin-actions compact">
<button class="ghost-button" id="checkAllButton" type="button">Status pruefen</button>
<button class="ghost-button" id="saveLocalButton" type="button">Lokal speichern</button>
<button class="ghost-button" id="resetLocalButton" type="button">Lokale Aenderungen verwerfen</button>
<button class="ghost-button" id="downloadConfigButton" type="button">JSON exportieren</button>
</div>
</div>
<div class="notice">
Hinweis: Betriebsdaten kommen aus dem MischLabs-Statusproxy. Kachel-Aenderungen werden aktuell lokal im Browser gespeichert oder als `services.json` exportiert; fuer globale Live-Aenderungen folgt spaeter ein Gitea-Commit-Workflow.
</div>
<div class="admin-user" id="adminUser"></div>
<div class="ops-grid" id="opsGrid">
<section class="ops-card ops-card-wide">
<div class="ops-card-head">
<div style="display: flex; align-items: center; gap: 8px;">
<span>Dienste-Status (Live-Proxy)</span>
<span id="servicesStatusSummary" class="section-count" style="display: inline; margin-left: 8px; font-weight: 500;"></span>
</div>
<button class="ghost-button mini" id="refreshServicesButton" type="button">Aktualisieren</button>
</div>
<div id="servicesStatusBoard" class="services-status-board">Lade Status...</div>
</section>
<section class="ops-card">
<div class="ops-card-head">
<span>NAS Speicher</span>
<button class="ghost-button mini" id="refreshOpsButton" type="button">Aktualisieren</button>
</div>
<div id="diskStatus" class="ops-list">Noch nicht geladen.</div>
</section>
<section class="ops-card">
<div class="ops-card-head">
<span>Watchtower</span>
<button class="ghost-button mini" id="runWatchtowerButton" type="button">Jetzt pruefen</button>
</div>
<div id="watchtowerStatus" class="ops-list">Noch nicht geladen.</div>
</section>
<section class="ops-card ops-card-wide">
<div class="ops-card-head">
<span>Container</span>
<button class="ghost-button mini danger-button" id="dangerModeButton" type="button">Danger entsperren</button>
</div>
<div class="danger-state" id="dangerState" hidden></div>
<div id="containerStatus" class="ops-list">Noch nicht geladen.</div>
</section>
</div>
<div class="admin-table" id="serviceEditor"></div>
</section>
</main>
<script src="/admin.js?v=13" defer></script>
</body>
</html>