marcandClaude Opus 5
905b136516
Die Leiste soll zuerst die serverseitige Röhre übernehmen — kleinster Eingriff, größte Wirkung fürs "ein System"-Gefühl. Danach Systemmenü im Logo, dann die App-Schublade mit Symbolen. Neu als offene Entscheidung: wie sichtbar die Leiste sein darf. Sie ist bei jedem Aufruf der App da, auch wenn man mit HoneyOS gerade nichts zu tun hat. Vorschlag steht dabei, ebenso der Hinweis, dass es keine Einbahnstraße ist. Ausserdem defer an der Script-Zeile in README und Demo. 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 defer src="./honeybar.js" data-app="inknote" data-home="/"></script>
|
|
</body>
|
|
</html>
|