marcandClaude Opus 5
cce926ab2e
Anklickbar war es ein Versprechen, das es nicht hielt: Der Klick fuehrte nur dorthin, wo ohnehin alles eingestellt wird. Jetzt eine Anzeige mit Hinweistext, in beiden Leisten. Die Anordnung war seit dem Wetterfenster kaputt. Das Raster verteilt seine Bereiche der Reihe nach — das dritte landete neben „system" und schob die Kacheln in die schmale linke Spalte. Links stehen jetzt die Anzeigen untereinander, rechts die Apps ueber die volle Hoehe. Keine neue Faehigkeit, also bleibt die Version bei 0.9. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
108 lines
5.3 KiB
HTML
108 lines
5.3 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-wx" id="mbWx" hidden></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>
|
|
|
|
<!-- 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>
|