marcandClaude Opus 5
84cc5d619e
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>
226 lines
9.8 KiB
HTML
226 lines
9.8 KiB
HTML
<!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">□</span><span class="tbtn raised">×</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">□</span><span class="tbtn raised">×</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 & 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">×</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> · <a href="../index.html">Amber-CRT</a> · <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>
|