marc
b7cc06b7c1
widgetAnmelden({ id, titel, wo, sichtbar, laden, leer, inhalt, takt }) —
der Rahmen macht daraus ein Fenster in der Spalte (Terminal) oder ein
Schild (Desktop), kennt lädt/fertig/nichts da/Fehler und haelt den
Nachladetakt. Benutzer, Wetter und Systemzustand sind umgestellt; aus
index.html sind vier feste Kaesten verschwunden und aus dem Raster die
Einzelplaetze.
Zwei Dinge, die erst dabei sichtbar wurden:
- Der Server meldete 'kein Ort eingestellt' und 'Dienst nicht
erreichbar' beide als 204. Ein Ausfall sah damit aus wie ein
abgeschaltetes Widget. Ausfall ist jetzt 502, mit Test.
- Die Reihenfolge haengt nicht mehr an der Modulauswertung: Seit
glyphs.js seine Raster mit await auf oberster Ebene laedt, laufen
Module ohne Symbole vorher durch — der Systemzustand stand deshalb
ueber dem Benutzer. widgetsOrdnen() macht die Reihenfolge zur Angabe,
und genau dort haengt spaeter die im Server gespeicherte ein.
97 lines
5.0 KiB
HTML
97 lines
5.0 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">▸ <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">
|
|
<!-- Das Logo ist das Systemmenü — dasselbe wie in der HoneyBar
|
|
fremder Apps, damit HoneyOS von überall gleich erreichbar ist. -->
|
|
<button class="mb-logo" id="btnSystem" title="HoneyOS-Menü" aria-haspopup="true" aria-expanded="false">
|
|
<span class="hex">■</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>
|
|
<!-- Derselbe Pfeil wie in der HoneyBar: die Apps zum Aufklappen,
|
|
fuer schmale Fenster, in denen der Streifen oben nicht alles
|
|
zeigt. Einstellungen stehen im Systemmenü links. -->
|
|
<button class="mb-btn" id="btnAppMenu" title="Apps" aria-haspopup="true" aria-expanded="false">▾</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stage" id="stage">
|
|
<!-- Links die Widgets untereinander, rechts die Apps. Was hier steht,
|
|
entscheidet der Widget-Rahmen (js/widgets/rahmen.js) — im
|
|
Dokument steht nur der Platz dafür. -->
|
|
<div class="widgetspalte" id="widgetSpalte"></div>
|
|
<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>
|
|
<!-- Dieselben Widgets, im Schreibtisch-Modus als Schilder oben rechts -->
|
|
<div class="deskwidgets" id="deskwidgets"></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">[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 type="module" src="./js/os.js"></script>
|
|
</body>
|
|
</html>
|