marcandClaude Opus 5
99f1ed4a58
Die Leiste am oberen Rand von HoneyOS ist nicht honeybar.js, sondern die Menueleiste des Schreibtischs — anderer Code, gleiches Aussehen. Das Wetter stand deshalb nur in fremden Apps, waehrend der Schalter dort, wo man ihn umlegt, nichts zu bewirken schien. Fuer den, der davorsitzt, ist beides dieselbe Leiste. Ein Schalter, der nur woanders wirkt, ist nicht zu erklaeren. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
108 lines
5.4 KiB
HTML
108 lines
5.4 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>
|
|
<button class="mb-wx" id="mbWx" hidden title="Wetter"></button>
|
|
<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>
|
|
|
|
<!-- 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">●●●</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="deskwidget" id="wxDesk" hidden></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>
|