marcandClaude Opus 5
283f9a1850
Aus der statischen Seite wird ein Go-Binary mit eingebetteter Oberfläche. Grund: Apps über .env zu pflegen wurde unübersichtlich, und kosmetische Einstellungen sollen auf jedem Gerät gleich sein. - Anmeldung über den eigenen OIDC-Anbieter (PocketID), mit PKCE. Ohne Anmeldung gibt es nichts zu sehen – auch keine App-Liste. - Sitzung als signiertes Cookie ohne Gegenstück im Server; Schreibzugriffe zusätzlich über ein lesbares CSRF-Cookie abgesichert - Apps werden in der Oberfläche angelegt und bearbeitet, nicht mehr in der .env. Der Server prüft jeden Eintrag und meldet zurück, was er behält. - Einstellungen liegen je Nutzer im Server; localStorage ist nur noch der Vorschuss, damit die Röhre beim Laden nicht in der falschen Farbe blitzt - die Leiste holt die App-Liste aus /api/apps – freigegeben sind allein die Ursprünge, die selbst als App eingetragen sind - Tests fahren einen echten OIDC-Anbieter hoch und gehen den Anmeldeweg einmal ganz durch Ohne HONEYOS_OIDC_ISSUER läuft alles offen – für die Entwicklung, mit deutlicher Warnung beim Start. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
98 lines
4.7 KiB
HTML
98 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#0a0705" />
|
|
<title>HoneyOS</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230a0705'/%3E%3Cpath d='M4 4h2v3h4V4h2v8h-2V9H6v3H4z' fill='%23ffb641'/%3E%3C/svg%3E" />
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Bildschirm: alles liegt darin, damit Scanlines/Vignette darüber passen -->
|
|
<div class="crt" id="screen">
|
|
<!-- ── Boot ───────────────────────────────────────────────────────── -->
|
|
<div class="boot" id="boot" hidden>
|
|
<pre class="boot-log" id="bootLog" aria-live="polite"></pre>
|
|
<p class="boot-hint">[ beliebige Taste = überspringen ]</p>
|
|
</div>
|
|
|
|
<!-- ── Anmeldung ──────────────────────────────────────────────────── -->
|
|
<div class="login" id="login" hidden>
|
|
<pre class="boot-log" id="loginLog"></pre>
|
|
<div class="login-box">
|
|
<button class="login-btn" id="btnLogin">▸ <span id="loginLabel">Anmelden</span></button>
|
|
<p class="login-note" id="loginNote"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Desktop ────────────────────────────────────────────────────── -->
|
|
<div class="desktop" id="desktop" hidden>
|
|
<!-- Menüleiste: dieselbe Anatomie wie honeybar.js in den Apps -->
|
|
<header class="menubar">
|
|
<button class="mb-logo" id="btnAbout" title="Über HoneyOS">
|
|
<span class="hex">■</span> HONEY<b>OS</b>
|
|
</button>
|
|
<nav class="mb-apps" id="mbApps" aria-label="Anwendungen"></nav>
|
|
<div class="mb-right">
|
|
<img class="mb-avatar" id="mbAvatar" alt="" hidden />
|
|
<span class="mb-user" id="mbUser"> </span>
|
|
<span class="mb-clock" id="clock">--:--</span>
|
|
<button class="mb-btn" id="btnSettings" title="Einstellungen (S)">⚙</button>
|
|
<button class="mb-btn" id="btnLogout" title="Abmelden" hidden>⏻</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stage" id="stage">
|
|
<!-- Statusfenster -->
|
|
<section class="win win-status">
|
|
<div class="win-bar"><span class="win-title">system</span><span class="win-dots">●●●</span></div>
|
|
<div class="win-body">
|
|
<p class="greet" id="greet">Willkommen zurück.</p>
|
|
<dl class="statlist" id="statList"></dl>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- App-Kacheln -->
|
|
<section class="tiles" id="tiles" aria-label="Apps starten"></section>
|
|
</main>
|
|
|
|
<!-- Desktop-Modus: Symbolfläche, Fenster, Taskleiste -->
|
|
<div class="deskspace" id="deskspace" hidden>
|
|
<div class="desk-icons" id="deskIcons"></div>
|
|
<div class="windows" id="windows"></div>
|
|
</div>
|
|
|
|
<footer class="taskbar" id="taskbar" hidden>
|
|
<button class="task-start" id="btnStart">■ START</button>
|
|
<div class="task-list" id="taskList"></div>
|
|
<span class="task-date" id="taskDate"></span>
|
|
</footer>
|
|
|
|
<footer class="statusbar" id="statusbar">
|
|
<span id="hint">[1] [2] app starten · [M] modus · [S] einstellungen · [?] hilfe</span>
|
|
<span class="sb-right" id="sbRight"></span>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- ── Dialoge ────────────────────────────────────────────────────── -->
|
|
<div class="modal" id="modal" hidden>
|
|
<div class="win win-modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
|
<div class="win-bar">
|
|
<span class="win-title" id="modalTitle">einstellungen</span>
|
|
<button class="win-close" id="btnClose" aria-label="Schließen">×</button>
|
|
</div>
|
|
<div class="win-body" id="modalBody"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CRT-Effekte: rein dekorativ, liegen über allem -->
|
|
<div class="scanlines" aria-hidden="true"></div>
|
|
<div class="vignette" aria-hidden="true"></div>
|
|
<div class="flicker" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<script src="./os.js"></script>
|
|
</body>
|
|
</html>
|