Files
HoneyOS/web/index.html
T
marcandClaude Opus 5 52deffa30e refactor: aufgeraeumt — Pakete hinten, Widgets vorne
Go: store, auth, weather und config sind eigene Pakete unter internal/. Vorher
lagen fuenf Dateien in einem Topf, und jede kannte jede.

Web: os.js hatte 1425 Zeilen und alles darin. Jetzt core.js (Zustand, Server,
Einstellungen), glyphs.js (die Pixelraster), js/widgets/ mit einem Widget je
Datei, os.js nur noch die Ansichten. Stylesheet nach css/.

Die HoneyBar bleibt eine einzelne Datei ohne Importe — sie wird von fremden
Seiten mit einer Zeile eingebunden, da darf nichts nachladen.

Nebenbei: Das gebaute Binary lag mit 9,8 MB im Repo und ist jetzt ignoriert.
Und der Test gegen eine zweite Versionsnummer geht nicht mehr auf os.js, sondern
durch alle .js — sonst haette ihn dieser Umbau still ausgehebelt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-29 20:51:21 +02:00

116 lines
5.8 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="./css/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">&#9656; <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">&#9632;</span> HONEY<b>OS</b>
</button>
<nav class="mb-apps" id="mbApps" aria-label="Anwendungen"></nav>
<div class="mb-right">
<span class="mb-wx" id="mbWx" hidden></span>
<span class="mb-clock" id="clock">--:--</span>
<button class="mb-btn" id="btnSettings" title="Einstellungen (S)">&#9881;</button>
<button class="mb-btn" id="btnLogout" title="Abmelden" hidden>&#9211;</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">&#9679;&#9679;&#9679;</span></div>
<div class="win-body">
<dl class="statlist" id="statList"></dl>
</div>
</section>
<!-- Wer angemeldet ist. Stand früher in der Menüleiste — dort ist
es aber der einzige Unterschied zur HoneyBar in den Apps
gewesen, und der Schreibtisch hat für so etwas Platz. -->
<section class="win win-user" id="userTile" hidden>
<div class="win-bar"><span class="win-title">angemeldet</span><span class="win-dots">&#9679;&#9679;&#9679;</span></div>
<div class="win-body user-body"></div>
</section>
<!-- Wetter. Steht in beiden Betriebsarten zur Verfügung, wird aber
nur gezeigt, wenn ein Ort eingestellt und das Widget an ist. -->
<section class="win win-weather" id="wxTile" hidden>
<div class="win-bar"><span class="win-title">wetter</span><span class="win-dots">&#9679;&#9679;&#9679;</span></div>
<div class="win-body wx-body"></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>
<!-- Dasselbe Wetter, im Schreibtisch-Modus als kleines Feld oben rechts -->
<div class="deskwidgets">
<div class="deskwidget" id="userDesk" hidden></div>
<div class="deskwidget" id="wxDesk" hidden></div>
</div>
</div>
<footer class="taskbar" id="taskbar" hidden>
<button class="task-start" id="btnStart">&#9632; 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 &nbsp;·&nbsp; [M] modus &nbsp;·&nbsp; [S] einstellungen &nbsp;·&nbsp; [?] 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">&times;</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 type="module" src="./js/os.js"></script>
</body>
</html>