marc
3f8b98b869
Aus dem Quadrat links in beiden Leisten wird eine Pixelbiene von der Seite: braune Streifen, schwarze Beine, Fluegel mit Kerbe. Sie steht in genau einem Raster (tools/biene.py, 16x16 Zeichen); daraus entstehen SVG, PNG und eine Fassung aus Schriftzeichen. SVG statt PNG in den Leisten: Die HoneyBar laeuft in fremden Apps, und ob ein <img> dort laedt, entscheidet deren CSP. Markup kann niemand blockieren. Im System-Fenster und ueber dem Startlauf steht die Biene aus Schriftzeichen — beides sind Textflaechen, ein Bild darin waere ein Fremdkoerper. Das Wappen liegt an drei Stellen (Datei, Modul, HoneyBar-Zeile), weil die Leiste nichts nachladen kann. TestWappenIstUeberallDasselbe haelt sie gleich.
98 lines
4.9 KiB
HTML
98 lines
4.9 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="./img/biene.svg" />
|
|
<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="biene-text boot-biene" id="bootBiene" aria-hidden="true"></pre>
|
|
<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" id="logoBiene"></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>
|