Eine Biene als Wappen, an allen vier Stellen
Aus dem Quadrat links in beiden Leisten wird eine Pixelbiene von der Seite: braune Streifen, schwarze Beine, Fluegel mit Kerbe. Sie steht in genau einem Raster (tools/biene.py, 16x16 Zeichen); daraus entstehen SVG, PNG und eine Fassung aus Schriftzeichen. SVG statt PNG in den Leisten: Die HoneyBar laeuft in fremden Apps, und ob ein <img> dort laedt, entscheidet deren CSP. Markup kann niemand blockieren. Im System-Fenster und ueber dem Startlauf steht die Biene aus Schriftzeichen — beides sind Textflaechen, ein Bild darin waere ein Fremdkoerper. Das Wappen liegt an drei Stellen (Datei, Modul, HoneyBar-Zeile), weil die Leiste nichts nachladen kann. TestWappenIstUeberallDasselbe haelt sie gleich.
This commit is contained in:
marc committed
1 parent
aec042a8c9
commit
3f8b98b869
14 files changed
+301
-10
No files matched your search
+18
-1
@@ -202,7 +202,24 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mb-logo b { font-weight: 400; color: var(--p-mid); }
|
||||
.mb-logo .hex { font-size: 10px; vertical-align: 2px; }
|
||||
/* Das Wappen bleibt gelb, während der Rest die Röhre wechselt: Ein Zeichen,
|
||||
das die Farbe mitwechselt, ist ein Symbol wie „wolke" — eines, das seine
|
||||
Farbe behält, ist ein Wappen. */
|
||||
.mb-logo .hex { display: inline-block; width: 20px; height: 20px; vertical-align: -6px; }
|
||||
.mb-logo .hex svg { display: block; width: 100%; height: 100%; }
|
||||
|
||||
/* Die Biene aus Schriftzeichen — im System-Fenster und über dem Startlauf.
|
||||
Ein Zeichen ist halb so breit wie hoch, deshalb ist im Raster jeder Pixel
|
||||
zwei Zeichen breit (siehe tools/biene.py). */
|
||||
.biene-text {
|
||||
margin: 0 0 8px;
|
||||
color: var(--p);
|
||||
font-family: inherit;
|
||||
font-size: 9px;
|
||||
line-height: 1.1;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.boot-biene { font-size: 11px; margin-bottom: 14px; }
|
||||
|
||||
.mb-apps {
|
||||
display: flex;
|
||||
|
||||
@@ -98,6 +98,13 @@
|
||||
"display:block",
|
||||
"color-scheme:dark",
|
||||
].join(";");
|
||||
/* Das Wappen. Es steht hier als Markup, weil die HoneyBar in fremden
|
||||
* Apps läuft: Ein <img> holte eine Datei von HoneyOS, und ob das geht,
|
||||
* entscheidet die CSP der fremden App. Erzeugt von tools/biene.py —
|
||||
* dieselbe Zeile steht in web/img/biene.svg (ein Test hält sie gleich).
|
||||
*/
|
||||
const WAPPEN = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><rect x="4" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="9" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="2" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="8" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="2" y="2" width="11" height="1" fill="#f5f2e7"/><rect x="14" y="2" width="1" height="1" fill="#3b2412"/><rect x="3" y="3" width="9" height="1" fill="#f5f2e7"/><rect x="13" y="3" width="2" height="1" fill="#3b2412"/><rect x="3" y="4" width="11" height="1" fill="#ffd060"/><rect x="2" y="5" width="2" height="1" fill="#f2b33d"/><rect x="4" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="5" width="2" height="1" fill="#f2b33d"/><rect x="8" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="5" width="5" height="1" fill="#f2b33d"/><rect x="1" y="6" width="3" height="1" fill="#f2b33d"/><rect x="4" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="6" width="2" height="1" fill="#f2b33d"/><rect x="8" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="6" width="2" height="1" fill="#f2b33d"/><rect x="12" y="6" width="1" height="1" fill="#181410"/><rect x="13" y="6" width="1" height="1" fill="#63c7c0"/><rect x="14" y="6" width="1" height="1" fill="#f2b33d"/><rect x="0" y="7" width="1" height="1" fill="#5c3a1c"/><rect x="1" y="7" width="3" height="1" fill="#f2b33d"/><rect x="4" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="7" width="2" height="1" fill="#f2b33d"/><rect x="8" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="7" width="2" height="1" fill="#f2b33d"/><rect x="12" y="7" width="2" height="1" fill="#181410"/><rect x="14" y="7" width="1" height="1" fill="#f2b33d"/><rect x="1" y="8" width="3" height="1" fill="#f2b33d"/><rect x="4" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="8" width="2" height="1" fill="#f2b33d"/><rect x="8" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="8" width="5" height="1" fill="#f2b33d"/><rect x="2" y="9" width="1" height="1" fill="#d2952a"/><rect x="3" y="9" width="2" height="1" fill="#462b14"/><rect x="5" y="9" width="2" height="1" fill="#d2952a"/><rect x="7" y="9" width="2" height="1" fill="#462b14"/><rect x="9" y="9" width="6" height="1" fill="#d2952a"/><rect x="3" y="10" width="2" height="1" fill="#181410"/><rect x="7" y="10" width="2" height="1" fill="#181410"/><rect x="11" y="10" width="2" height="1" fill="#181410"/><rect x="3" y="11" width="2" height="1" fill="#181410"/><rect x="7" y="11" width="2" height="1" fill="#181410"/><rect x="11" y="11" width="2" height="1" fill="#181410"/></svg>';
|
||||
|
||||
const root = host.attachShadow({ mode: "open" });
|
||||
|
||||
root.innerHTML = `
|
||||
@@ -136,10 +143,12 @@
|
||||
}
|
||||
.home { letter-spacing: .14em; color: var(--p); padding-left: 2px; }
|
||||
.home b { color: var(--p-mid); font-weight: 400; }
|
||||
/* Dasselbe Quadrat wie in der Menüleiste des Schreibtischs: dort ist es
|
||||
klein und leicht angehoben. Ein Zeichen in voller Größe sah daneben
|
||||
wie ein anderes Logo aus. */
|
||||
.home .hex { font-size: 10px; vertical-align: 2px; }
|
||||
/* Dasselbe Wappen wie in der Menüleiste des Schreibtischs, in derselben
|
||||
Größe. Es bleibt gelb, während der Rest die Röhre wechselt: Ein
|
||||
Zeichen, das die Farbe mitwechselt, ist ein Symbol — eines, das seine
|
||||
Farbe behält, ist ein Wappen. */
|
||||
.home .hex { display: inline-block; width: 20px; height: 20px; vertical-align: -6px; }
|
||||
.home .hex svg { display: block; width: 100%; height: 100%; }
|
||||
.home:hover { border-color: var(--p-dim); }
|
||||
.home[aria-expanded="true"] { border-color: var(--p-dim); background: var(--p-faint); }
|
||||
/* Bei vielen Apps schiebt man den Streifen seitwärts. Ohne
|
||||
@@ -247,7 +256,7 @@
|
||||
</style>
|
||||
|
||||
<div class="bar">
|
||||
<button class="home" id="home" title="HoneyOS-Menü" aria-haspopup="true" aria-expanded="false"><span class="hex">■</span> HONEY<b>OS</b></button>
|
||||
<button class="home" id="home" title="HoneyOS-Menü" aria-haspopup="true" aria-expanded="false"><span class="hex">${WAPPEN}</span> HONEY<b>OS</b></button>
|
||||
<nav class="apps" id="apps"></nav>
|
||||
<div class="right">
|
||||
<span class="wx" id="wx" hidden></span>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><rect x="4" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="9" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="2" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="8" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="2" y="2" width="11" height="1" fill="#f5f2e7"/><rect x="14" y="2" width="1" height="1" fill="#3b2412"/><rect x="3" y="3" width="9" height="1" fill="#f5f2e7"/><rect x="13" y="3" width="2" height="1" fill="#3b2412"/><rect x="3" y="4" width="11" height="1" fill="#ffd060"/><rect x="2" y="5" width="2" height="1" fill="#f2b33d"/><rect x="4" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="5" width="2" height="1" fill="#f2b33d"/><rect x="8" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="5" width="5" height="1" fill="#f2b33d"/><rect x="1" y="6" width="3" height="1" fill="#f2b33d"/><rect x="4" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="6" width="2" height="1" fill="#f2b33d"/><rect x="8" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="6" width="2" height="1" fill="#f2b33d"/><rect x="12" y="6" width="1" height="1" fill="#181410"/><rect x="13" y="6" width="1" height="1" fill="#63c7c0"/><rect x="14" y="6" width="1" height="1" fill="#f2b33d"/><rect x="0" y="7" width="1" height="1" fill="#5c3a1c"/><rect x="1" y="7" width="3" height="1" fill="#f2b33d"/><rect x="4" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="7" width="2" height="1" fill="#f2b33d"/><rect x="8" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="7" width="2" height="1" fill="#f2b33d"/><rect x="12" y="7" width="2" height="1" fill="#181410"/><rect x="14" y="7" width="1" height="1" fill="#f2b33d"/><rect x="1" y="8" width="3" height="1" fill="#f2b33d"/><rect x="4" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="8" width="2" height="1" fill="#f2b33d"/><rect x="8" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="8" width="5" height="1" fill="#f2b33d"/><rect x="2" y="9" width="1" height="1" fill="#d2952a"/><rect x="3" y="9" width="2" height="1" fill="#462b14"/><rect x="5" y="9" width="2" height="1" fill="#d2952a"/><rect x="7" y="9" width="2" height="1" fill="#462b14"/><rect x="9" y="9" width="6" height="1" fill="#d2952a"/><rect x="3" y="10" width="2" height="1" fill="#181410"/><rect x="7" y="10" width="2" height="1" fill="#181410"/><rect x="11" y="10" width="2" height="1" fill="#181410"/><rect x="3" y="11" width="2" height="1" fill="#181410"/><rect x="7" y="11" width="2" height="1" fill="#181410"/><rect x="11" y="11" width="2" height="1" fill="#181410"/></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
+3
-2
@@ -5,7 +5,7 @@
|
||||
<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="icon" href="./img/biene.svg" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -13,6 +13,7 @@
|
||||
<div class="crt" id="screen">
|
||||
<!-- ── Boot ───────────────────────────────────────────────────────── -->
|
||||
<div class="boot" id="boot" hidden>
|
||||
<pre class="biene-text boot-biene" id="bootBiene" aria-hidden="true"></pre>
|
||||
<pre class="boot-log" id="bootLog" aria-live="polite"></pre>
|
||||
<p class="boot-hint">[ beliebige Taste = überspringen ]</p>
|
||||
</div>
|
||||
@@ -33,7 +34,7 @@
|
||||
<!-- 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>
|
||||
<span class="hex" id="logoBiene"></span> HONEY<b>OS</b>
|
||||
</button>
|
||||
<nav class="mb-apps" id="mbApps" aria-label="Anwendungen"></nav>
|
||||
<div class="mb-right">
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/* Erzeugt von tools/biene.py — nicht von Hand ändern.
|
||||
*
|
||||
* Das Wappen als Markup statt als Bilddatei: So kommt es ohne zweite
|
||||
* Anfrage aus und lässt sich mit dem Text daneben ausrichten.
|
||||
*/
|
||||
export const BIENE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><rect x="4" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="9" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="2" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="8" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="2" y="2" width="11" height="1" fill="#f5f2e7"/><rect x="14" y="2" width="1" height="1" fill="#3b2412"/><rect x="3" y="3" width="9" height="1" fill="#f5f2e7"/><rect x="13" y="3" width="2" height="1" fill="#3b2412"/><rect x="3" y="4" width="11" height="1" fill="#ffd060"/><rect x="2" y="5" width="2" height="1" fill="#f2b33d"/><rect x="4" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="5" width="2" height="1" fill="#f2b33d"/><rect x="8" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="5" width="5" height="1" fill="#f2b33d"/><rect x="1" y="6" width="3" height="1" fill="#f2b33d"/><rect x="4" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="6" width="2" height="1" fill="#f2b33d"/><rect x="8" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="6" width="2" height="1" fill="#f2b33d"/><rect x="12" y="6" width="1" height="1" fill="#181410"/><rect x="13" y="6" width="1" height="1" fill="#63c7c0"/><rect x="14" y="6" width="1" height="1" fill="#f2b33d"/><rect x="0" y="7" width="1" height="1" fill="#5c3a1c"/><rect x="1" y="7" width="3" height="1" fill="#f2b33d"/><rect x="4" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="7" width="2" height="1" fill="#f2b33d"/><rect x="8" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="7" width="2" height="1" fill="#f2b33d"/><rect x="12" y="7" width="2" height="1" fill="#181410"/><rect x="14" y="7" width="1" height="1" fill="#f2b33d"/><rect x="1" y="8" width="3" height="1" fill="#f2b33d"/><rect x="4" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="8" width="2" height="1" fill="#f2b33d"/><rect x="8" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="8" width="5" height="1" fill="#f2b33d"/><rect x="2" y="9" width="1" height="1" fill="#d2952a"/><rect x="3" y="9" width="2" height="1" fill="#462b14"/><rect x="5" y="9" width="2" height="1" fill="#d2952a"/><rect x="7" y="9" width="2" height="1" fill="#462b14"/><rect x="9" y="9" width="6" height="1" fill="#d2952a"/><rect x="3" y="10" width="2" height="1" fill="#181410"/><rect x="7" y="10" width="2" height="1" fill="#181410"/><rect x="11" y="10" width="2" height="1" fill="#181410"/><rect x="3" y="11" width="2" height="1" fill="#181410"/><rect x="7" y="11" width="2" height="1" fill="#181410"/><rect x="11" y="11" width="2" height="1" fill="#181410"/></svg>';
|
||||
|
||||
export const BIENE_ASCII = " ---- ----\n ---------- ----------\n ---------------------- ::\n ------------------ ::::\n ######################\n ####::::####::::##########\n ######::::####::::####::oo##\n::######::::####::::####::::##\n ######::::####::::##########\n ##::::####::::############\n :::: :::: ::::\n :::: :::: ::::";
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
SS_BOOTED, state,
|
||||
} from "./core.js";
|
||||
import { GLYPHS, glyphSvg } from "./glyphs.js";
|
||||
import { BIENE_ASCII, BIENE_SVG } from "./biene.js";
|
||||
import {
|
||||
widgetPlan, widgetPlanSetzen, widgetsLaden, widgetsOrdnen, widgetsStarten, widgetsZeichnen,
|
||||
} from "./widgets/rahmen.js";
|
||||
@@ -79,6 +80,9 @@ function runBoot() {
|
||||
return new Promise((resolve) => {
|
||||
const log = $("bootLog");
|
||||
const el = $("boot");
|
||||
// Über dem Protokoll die Biene — auch hier aus Schriftzeichen, denn der
|
||||
// Startlauf ist Text und nichts anderes.
|
||||
$("bootBiene").textContent = BIENE_ASCII;
|
||||
el.hidden = false;
|
||||
const lines = bootLines();
|
||||
let i = 0;
|
||||
@@ -122,6 +126,9 @@ function runBoot() {
|
||||
|
||||
function renderShell() {
|
||||
$("desktop").hidden = false;
|
||||
// Das Wappen steht im Markup, nicht als Bilddatei — dieselbe Zeile wie in
|
||||
// der HoneyBar fremder Apps, damit beide Leisten wirklich dasselbe zeigen.
|
||||
$("logoBiene").innerHTML = BIENE_SVG;
|
||||
renderMenubarApps();
|
||||
renderMode();
|
||||
tickClock();
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { escapeHtml, state } from "../core.js";
|
||||
import { BIENE_ASCII } from "../biene.js";
|
||||
import { widgetAnmelden } from "./rahmen.js";
|
||||
|
||||
/* ── Systemzustand ─────────────────────────────────────────────────────────
|
||||
@@ -6,6 +7,11 @@ import { widgetAnmelden } from "./rahmen.js";
|
||||
* Nur im Terminal-Modus ein Widget. Auf dem Schreibtisch gibt es dieselben
|
||||
* Zahlen als Fenster über das Startmenü — ein Schild, das dauerhaft „modus:
|
||||
* desktop" behauptet, während man im Desktop-Modus steht, sagt niemandem etwas.
|
||||
*
|
||||
* Die Biene steht hier **aus Schriftzeichen**, nicht als Bild: Das Fenster
|
||||
* besteht aus lauter Textzeilen, und ein Bild darin wäre ein Fremdkörper — wie
|
||||
* ein Foto in einer Tabelle. Als Text gehört sie dazu, und das Ganze wird zu
|
||||
* dem, was man bei so einem Fenster ohnehin im Kopf hat: einem neofetch.
|
||||
*/
|
||||
export function statsHtml() {
|
||||
const up = Object.values(state.probes).filter((s) => s === "up").length;
|
||||
@@ -25,5 +31,5 @@ widgetAnmelden({
|
||||
id: "system",
|
||||
titel: "system",
|
||||
wo: ["terminal"],
|
||||
inhalt: statsHtml,
|
||||
inhalt: () => `<pre class="biene-text">${BIENE_ASCII}</pre>${statsHtml()}`,
|
||||
});
|
||||
Reference in new issue
Block a user