Docker/HoneyOS
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: HoneyOS – Retro-Schreibtisch und Leiste für die eigenen Apps

Browse Source 
Statische Oberfläche vor Aether und InkNote: kein Backend, kein Build,
nginx liefert web/ aus. Jede App bleibt ihre eigene PWA auf ihrer eigenen
Domain – HoneyOS ist Startpunkt und Umschalter, kein iframe-Rahmen.

- zwei Betriebsarten aus einem Datenstand: Terminal (Kacheln, Tastatur)
  und Desktop (Symbole, verschiebbare Fenster, Taskleiste)
- honeybar.js als Drop-in für die Apps, rendert im Shadow DOM, damit
  Tailwind und die InkNote-Palette einander nicht in die Quere kommen
- Konfiguration vollständig aus der .env: das Skript in
  /docker-entrypoint.d/ schreibt config.json beim Containerstart
- optionaler _ME-Pfad pro App zeigt an, wer angemeldet ist; ohne CORS
  bleibt die Anzeige leer, ohne dass etwas kaputtgeht

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-24 14:45:55 +02:00
commit 84cc5d619e
17 files changed
+3126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/looks/system7.html
+184
View File
@@ -0,0 +1,184 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HoneyOS — Look: System 7</title>
<style>
/* ── Mac System 7 ────────────────────────────────────────────────────
Hellgrau, 1 Bit, alles mit 1px schwarzer Kante. Keine Farbe außer
der Auswahl. Schrift klein und eng — Chicago gibt es nicht mehr,
Geneva/Verdana kommt am nächsten. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
font: 12px/1.35 Geneva, Verdana, "DejaVu Sans", sans-serif;
color: #000;
/* der geditherte Schreibtisch: 2px-Schachbrett */
background: repeating-conic-gradient(#8a8a8a 0 25%, #d0d0d0 0 50%) 0 0 / 3px 3px;
overflow: hidden;
-webkit-font-smoothing: none;
}
/* Menüleiste */
.menubar {
display: flex; align-items: center; gap: 18px;
height: 21px; padding: 0 10px;
background: #fff; border-bottom: 1px solid #000;
position: relative; z-index: 10;
}
.menubar .apple { font-weight: 700; letter-spacing: -0.5px; }
.menubar .item { cursor: default; }
.menubar .item:hover { background: #000; color: #fff; }
.menubar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
/* Fenster */
.win {
position: absolute;
background: #fff;
border: 1px solid #000;
box-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.titlebar {
display: flex; align-items: center; gap: 6px;
height: 19px; padding: 0 5px;
border-bottom: 1px solid #000;
/* die sechs Streifen links und rechts des Titels */
background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 2px);
}
.titlebar .box {
width: 11px; height: 11px; background: #fff; border: 1px solid #000; flex: none;
}
.titlebar .name {
background: #fff; padding: 0 7px; font-weight: 700; white-space: nowrap;
margin: 0 auto; letter-spacing: -0.2px;
}
.win-body { padding: 10px 12px; }
/* Statusfenster */
#status { left: 26px; top: 44px; width: 268px; }
#status h1 { font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.rows { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.rows span:nth-child(odd) { color: #444; }
.rows span:nth-child(even) { font-weight: 700; }
.sep { border: 0; border-top: 1px solid #000; margin: 9px 0; }
.note { color: #555; font-size: 11px; }
/* Fenster mit den Programmen — ein Finder-Fenster, kein Kachelraster */
#apps { left: 330px; top: 44px; width: 372px; }
.shelf { display: flex; gap: 6px; padding: 14px 10px 18px; }
.icon {
width: 104px; padding: 6px 4px 4px; text-align: center; cursor: default;
border: 1px solid transparent;
}
.icon svg { display: block; margin: 0 auto 5px; image-rendering: pixelated; }
.icon .label { display: inline-block; padding: 0 3px; }
.icon:hover .label { background: #000; color: #fff; }
.icon.sel svg { filter: invert(1); }
.icon.sel .label { background: #000; color: #fff; }
.shelf-foot {
border-top: 1px solid #000; padding: 2px 8px; font-size: 11px; color: #333;
display: flex; justify-content: space-between;
}
/* Leiste, wie sie in Aether/InkNote aussähe */
#bar { left: 26px; top: 296px; width: 676px; }
.bardemo {
display: flex; align-items: center; gap: 14px;
height: 21px; padding: 0 8px; background: #fff; border-bottom: 1px solid #000;
font-size: 11px;
}
.bardemo .cur { background: #000; color: #fff; padding: 0 5px; }
.bardemo .right { margin-left: auto; }
.barhost { padding: 12px; color: #333; font-size: 11px; background: #efefef; }
/* Papierkorb unten rechts, weil ohne den ist es kein Mac */
.trash { position: absolute; right: 30px; bottom: 26px; width: 90px; text-align: center; }
.trash .label { background: #d0d0d0; padding: 0 3px; }
.switch {
position: absolute; left: 26px; bottom: 20px;
font-size: 11px; background: #d0d0d0; padding: 2px 6px; border: 1px solid #000;
}
.switch a { color: #000; }
</style>
</head>
<body>
<div class="menubar">
<span class="apple">&#9670;</span>
<span class="item">Ablage</span>
<span class="item">Bearbeiten</span>
<span class="item">Ansicht</span>
<span class="item">Spezial</span>
<span class="right"><span class="item">Di. 02:47</span><span class="item">HoneyOS &#9662;</span></span>
</div>
<!-- Statusfenster -->
<div class="win" id="status">
<div class="titlebar"><span class="box"></span><span class="name">HoneyOS</span></div>
<div class="win-body">
<h1>Willkommen zurück, marc.</h1>
<div class="rows">
<span>Programme</span><span>2</span>
<span>erreichbar</span><span>2 von 2</span>
<span>Version</span><span>0.1</span>
</div>
<hr class="sep" />
<p class="note">Jedes Programm läuft auf seiner eigenen Domain. HoneyOS öffnet sie nur.</p>
</div>
</div>
<!-- Programme -->
<div class="win" id="apps">
<div class="titlebar"><span class="box"></span><span class="name">Programme</span><span class="box"></span></div>
<div class="shelf">
<div class="icon sel">
<svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
<path fill="#000" d="M6 5h8v1h1v1h1v1h1v6h-1v1H3v-1H2V9h1V8h1V7h1V6h1z"/>
<path fill="#fff" d="M6 6h8v1h1v1h1v5H3V9h1V8h1V7h1z"/>
</svg>
<span class="label">Aether</span>
</div>
<div class="icon">
<svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
<path fill="#000" d="M4 2h12v16H4z"/>
<path fill="#fff" d="M5 3h10v14H5z"/>
<path fill="#000" d="M7 5h6v1H7zm0 3h6v1H7zm0 3h6v1H7zm0 3h4v1H7z"/>
</svg>
<span class="label">InkNote</span>
</div>
<div class="icon">
<svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
<path fill="#000" d="M9 4h2v5h5v2h-5v5H9v-5H4V9h5z"/>
</svg>
<span class="label">hinzufügen</span>
</div>
</div>
<div class="shelf-foot"><span>3 Objekte</span><span>alles bereit</span></div>
</div>
<!-- Leiste -->
<div class="win" id="bar">
<div class="titlebar"><span class="box"></span><span class="name">so sähe die Leiste in InkNote aus</span></div>
<div class="bardemo">
<b>&#9670; HoneyOS</b>
<span>Aether</span>
<span class="cur">InkNote</span>
<span class="right">marc &nbsp; 02:47</span>
</div>
<div class="barhost">… hier beginnt die App selbst, mit ihrem eigenen Aussehen.</div>
</div>
<div class="trash">
<svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
<path fill="#000" d="M7 3h6v1h4v1H3V4h4zm-2 3h10v12H5z"/>
<path fill="#d0d0d0" d="M6 7h8v10H6z"/>
<path fill="#000" d="M8 9h1v6H8zm3 0h1v6h-1z"/>
</svg>
<span class="label">Papierkorb</span>
</div>
<div class="switch">Look: <b>System 7</b> &nbsp;·&nbsp; <a href="../index.html">Amber-CRT</a> &nbsp;·&nbsp; <a href="./win95.html">Windows 95</a></div>
</body>
</html>
web/looks/win95.html
+225
View File
@@ -0,0 +1,225 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HoneyOS — Look: Windows 95</title>
<style>
/* ── Windows 95 ──────────────────────────────────────────────────────
Alles lebt von zwei Kanten: hell oben/links, dunkel unten/rechts.
Das ist der gesamte 3D-Effekt, mehr steckt nicht dahinter. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
font: 11px/1.4 "MS Sans Serif", Tahoma, Verdana, "DejaVu Sans", sans-serif;
color: #000;
background: #008080;
overflow: hidden;
-webkit-font-smoothing: none;
}
.raised {
border: 2px outset;
border-color: #fff #404040 #404040 #fff;
background: #c0c0c0;
box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}
.sunken {
border: 2px solid;
border-color: #808080 #fff #fff #808080;
background: #c0c0c0;
box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
/* Schreibtisch-Symbole */
.desk { position: absolute; top: 12px; left: 12px; width: 84px; }
.deskicon {
width: 84px; padding: 6px 2px; text-align: center; color: #fff; cursor: default;
margin-bottom: 6px;
}
.deskicon svg { display: block; margin: 0 auto 4px; image-rendering: pixelated; }
.deskicon .label { display: inline-block; padding: 1px 3px; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.deskicon.sel .label { background: #000080; text-shadow: none; outline: 1px dotted #fff; }
.deskicon.sel svg { filter: hue-rotate(0deg) brightness(.85); }
/* Fenster */
.win { position: absolute; padding: 3px; }
.titlebar {
display: flex; align-items: center; gap: 4px;
height: 18px; padding: 0 2px 0 3px;
background: linear-gradient(90deg, #000080, #1084d0);
color: #fff; font-weight: 700;
}
.titlebar.inactive { background: linear-gradient(90deg, #808080, #b5b5b5); }
.titlebar .t { flex: 1; }
.tbtn {
width: 16px; height: 14px; font: 700 10px/10px "MS Sans Serif", Tahoma, sans-serif;
display: grid; place-items: center; padding-bottom: 2px;
}
.menustrip { display: flex; gap: 12px; padding: 2px 5px; }
.menustrip span { cursor: default; }
.menustrip span:hover { background: #000080; color: #fff; }
.win-body { padding: 10px; }
#status { left: 120px; top: 30px; width: 292px; }
#status h1 { font-size: 11px; margin: 0 0 8px; font-weight: 700; }
.rows { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-bottom: 10px; }
.rows span:nth-child(even) { font-weight: 700; }
.field { padding: 6px 8px; color: #000; }
.note { color: #404040; }
.buttons { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.btn { padding: 3px 14px; min-width: 72px; text-align: center; cursor: default; }
.btn.default { outline: 1px solid #000; outline-offset: 1px; }
#progs { left: 436px; top: 30px; width: 300px; }
.listview { padding: 4px; height: 148px; background: #fff; }
.row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; }
.row.sel { background: #000080; color: #fff; }
.row .sub { margin-left: auto; color: #606060; }
.row.sel .sub { color: #c0c0c0; }
.statusfields { display: flex; gap: 3px; margin-top: 4px; }
.statusfields div { padding: 2px 6px; }
.statusfields div:first-child { flex: 1; }
/* Leiste */
#bar { left: 120px; top: 236px; width: 616px; }
.bardemo {
display: flex; align-items: center; gap: 4px; padding: 2px 3px;
}
.bardemo .pill { padding: 2px 10px; cursor: default; }
.bardemo .right { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.barhost { margin-top: 3px; padding: 14px 10px; background: #fff; color: #404040; }
/* Taskleiste */
.taskbar {
position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
display: flex; align-items: center; gap: 4px; padding: 2px 3px;
}
.start { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; font-weight: 700; cursor: default; }
.divider { width: 2px; height: 20px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 2px; }
.task { padding: 3px 10px; width: 154px; text-align: left; cursor: default; }
.task.pressed {
border-color: #808080 #fff #fff #808080;
box-shadow: inset 1px 1px 0 #404040;
background: repeating-conic-gradient(#c0c0c0 0 25%, #dfdfdf 0 50%) 0 0/2px 2px;
font-weight: 700;
}
.tray { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 2px 8px; }
.switch { position: absolute; right: 12px; top: 12px; padding: 4px 8px; }
.switch a { color: #000080; }
</style>
</head>
<body>
<!-- Schreibtisch -->
<div class="desk">
<div class="deskicon sel">
<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges">
<path fill="#000" d="M5 4h6v1h1v1h1v1h1v5H2V8h1V7h1V6h1z"/>
<path fill="#dfe8f5" d="M5 5h6v1h1v1h1v4H3V8h1V7h1z"/>
<path fill="#7fa8d8" d="M4 9h9v2H4z"/>
</svg>
<span class="label">Aether</span>
</div>
<div class="deskicon">
<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges">
<path fill="#000" d="M3 1h10v14H3z"/>
<path fill="#fffbe6" d="M4 2h8v12H4z"/>
<path fill="#c07000" d="M5 4h6v1H5zm0 3h6v1H5zm0 3h4v1H5z"/>
<path fill="#e0b040" d="M10 9h3v1h-3z"/>
</svg>
<span class="label">InkNote</span>
</div>
</div>
<!-- Statusfenster -->
<div class="win raised" id="status">
<div class="titlebar">
<span class="t">HoneyOS</span>
<span class="tbtn raised">_</span><span class="tbtn raised">&#9633;</span><span class="tbtn raised">&times;</span>
</div>
<div class="menustrip"><span><u>D</u>atei</span><span><u>A</u>nsicht</span><span><u>?</u></span></div>
<div class="win-body">
<h1>Willkommen zurück, marc.</h1>
<div class="rows">
<span>Programme</span><span>2</span>
<span>erreichbar</span><span>2 von 2</span>
<span>Version</span><span>0.1</span>
</div>
<div class="field sunken note">Jedes Programm läuft auf seiner eigenen Domain.<br />HoneyOS öffnet sie nur.</div>
<div class="buttons">
<span class="btn raised default">OK</span>
<span class="btn raised">Einstellungen</span>
</div>
</div>
</div>
<!-- Programme -->
<div class="win raised" id="progs">
<div class="titlebar inactive">
<span class="t">Programme</span>
<span class="tbtn raised">_</span><span class="tbtn raised">&#9633;</span><span class="tbtn raised">&times;</span>
</div>
<div class="win-body" style="padding: 4px">
<div class="listview sunken">
<div class="row sel">
<svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges">
<path fill="#000" d="M5 4h6v1h1v1h1v1h1v5H2V8h1V7h1V6h1z"/><path fill="#dfe8f5" d="M5 5h6v1h1v1h1v4H3V8h1V7h1z"/>
</svg>
Aether <span class="sub">Cloud &amp; Dateien</span>
</div>
<div class="row">
<svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges">
<path fill="#000" d="M3 1h10v14H3z"/><path fill="#fffbe6" d="M4 2h8v12H4z"/><path fill="#c07000" d="M5 4h6v1H5zm0 3h6v1H5z"/>
</svg>
InkNote <span class="sub">Notizen</span>
</div>
<div class="row">
<svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges">
<path fill="#404040" d="M7 3h2v4h4v2H9v4H7V9H3V7h4z"/>
</svg>
Programm hinzufügen…
</div>
</div>
<div class="statusfields">
<div class="sunken">3 Objekte</div>
<div class="sunken">alles bereit</div>
</div>
</div>
</div>
<!-- Leiste -->
<div class="win raised" id="bar">
<div class="titlebar inactive"><span class="t">so sähe die Leiste in InkNote aus</span><span class="tbtn raised">&times;</span></div>
<div class="win-body" style="padding: 4px">
<div class="bardemo sunken" style="background:#c0c0c0">
<span class="pill raised"><b>HoneyOS</b></span>
<span class="divider"></span>
<span class="pill raised">Aether</span>
<span class="pill raised task pressed" style="width:auto">InkNote</span>
<span class="right"><span class="pill sunken">marc</span><span class="pill sunken">02:47</span></span>
</div>
<div class="barhost sunken">… hier beginnt die App selbst, mit ihrem eigenen Aussehen.</div>
</div>
</div>
<div class="switch raised">
Look: <b>Windows 95</b> &nbsp;·&nbsp; <a href="../index.html">Amber-CRT</a> &nbsp;·&nbsp; <a href="./system7.html">System 7</a>
</div>
<!-- Taskleiste -->
<div class="taskbar raised">
<span class="start raised">
<svg width="16" height="14" viewBox="0 0 8 7" shape-rendering="crispEdges">
<path fill="#ff2f2f" d="M0 1h3v2H0z"/><path fill="#2fbf2f" d="M4 0h4v3H4z"/>
<path fill="#2f6fff" d="M0 4h3v2H0z"/><path fill="#ffd02f" d="M4 4h4v3H4z"/>
</svg>
Start
</span>
<span class="divider"></span>
<span class="task raised pressed">HoneyOS</span>
<span class="task raised">Programme</span>
<span class="tray sunken">02:47</span>
</div>
</body>
</html>