marc
0e1c986f90
Sortiert wird im Programm-Editor mit Pfeilen in der Kopfzeile jeder Zeile — das Array ist die Reihenfolge, also gilt sie ueberall zugleich: Streifen, Schublade, Kacheln, Schreibtischsymbole, Startmenue. Neue Apps haengen sich hinten an, statt eine Taste zu verlangen. Die Zifferntasten sind ganz weg (Marcs Entscheidung): ein Pflichtfeld je App, das beim Sortieren nur die Frage aufgeworfen haette, ob es mitwandert. Damit faellt das Feld 'key' aus dem Datenmodell, aus der Kachel, aus der Hilfe und aus der Statuszeile. Alte Eintraege verlieren es beim naechsten Speichern still. Kein A-Z-Knopf — erstmal zu viel, kommt zurueck wenn er fehlt.
120 lines
6.1 KiB
HTML
120 lines
6.1 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">
|
|
<!-- 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">
|
|
<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">●●●</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">●●●</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">■ 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>
|