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>
42 lines
1.5 KiB
HTML
42 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>HoneyBar — Vorschau in einer fremden App</title>
|
|
<style>
|
|
/* Bewusst NICHT im HoneyOS-Stil: hier wird geprüft, dass die Leiste
|
|
eine ganz andere App nicht anfasst und von ihr nicht angefasst wird. */
|
|
body {
|
|
margin: 0;
|
|
background: #0d1117;
|
|
color: #e6edf3;
|
|
font: 15px/1.6 system-ui, sans-serif;
|
|
}
|
|
header.fake {
|
|
padding: 14px 20px;
|
|
background: #161b22;
|
|
border-bottom: 1px solid #30363d;
|
|
font-weight: 600;
|
|
}
|
|
main { padding: 24px 20px; max-width: 620px; }
|
|
code { background: #161b22; padding: 2px 5px; border-radius: 4px; font-size: 13px; }
|
|
/* So rechnet eine App mit Vollhöhe die Leiste heraus: */
|
|
.full { height: calc(100vh - var(--honeybar-h, 0px)); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="fake">Irgendeine App (dunkles Theme, eigene Schrift)</header>
|
|
<main>
|
|
<p>Die Leiste oben kommt aus <code>honeybar.js</code> und gehört nicht zu dieser Seite.</p>
|
|
<p>
|
|
Sie liegt in einem Shadow DOM: nichts von hier färbt auf sie ab, nichts von ihr auf
|
|
diese Seite. <code>data-app="inknote"</code> markiert, wo man gerade ist.
|
|
</p>
|
|
<p>Eine App, die mit <code>100vh</code> rechnet, nimmt <code>--honeybar-h</code> ab.</p>
|
|
</main>
|
|
|
|
<script src="./honeybar.js" data-app="inknote" data-home="../index.html"></script>
|
|
</body>
|
|
</html>
|