Anmeldung zeigt dasselbe Wappen, und der Rahmen sitzt eng

Auf dem Anmeldebildschirm steht jetzt dieselbe Biene wie in der Leiste und im
Tab, nur gross — ein Geraet, ein Zeichen. Die 3/4-Ansicht wird nirgends mehr
ausgeliefert; sie bleibt als schraeg() im Werkzeug liegen.

Dazu sitzt der SVG-Rahmen jetzt auf dem, was wirklich gefuellt ist. Das Raster
ist quadratisch, die Biene nicht — unten blieb ein Viertel Luft, und die kostet
ueberall Groesse, wo das Bild in einen Kasten gelegt wird.

tools/biene.py schreibt die Zeile in honeybar.js jetzt selbst mit: Drei Kopien,
die von Hand gepflegt werden, laufen genau einmal auseinander.

README.md

@@ -199,9 +199,8 @@ python3 tools/biene.py
 
 | Ausgabe | wohin |
 |---|---|
-| `web/img/biene.svg` | Favicon |
+| `web/img/biene.svg` | Favicon und Anmeldebildschirm |
 | `web/js/biene.js` | Menüleiste des Schreibtischs (`BIENE_SVG`), System-Fenster und Startlauf (`BIENE_ASCII`) |
-| `web/img/biene-3d.svg`, `-3d-256.png` | Anmeldebildschirm — die Schrägsicht |
 | `web/img/biene-256.png`, `-32.png` | Doku und Vorschau |
 
 In die HoneyBar ist dieselbe SVG-Zeile **einkopiert** — sie ist eine einzelne
@@ -219,17 +218,11 @@ die Farbe mit — die Biene nicht. Ein Zeichen, das die Farbe wechselt, ist ein
 Symbol wie *wolke*; eines, das seine Farbe behält, ist ein Wappen. Der eine
 warme Fleck liest sich als „das hier ist das System selbst".
 
-### Einmal groß: die Schrägsicht
+**Überall dasselbe Zeichen:** Leiste, Tab und Anmeldebildschirm zeigen dieselbe
-
+Datei, nur in anderer Größe. Eine 3/4-Ansicht (ein gerechneter Würfel in
-Auf dem Anmeldebildschirm steht dieselbe Biene als **Würfel in 2:1-Schrägsicht**
+2:1-Schrägsicht) steckt als `schraeg()` in `tools/biene.py`, wird aber nirgends
-— gerechnet, nicht gemalt: Das Skript legt Deckel und die zwei sichtbaren
+ausgeliefert — sie ist unter 64 px unbrauchbar, und ein zweites Wappen für
-Wangen an und malt Streifen, Augen und Flügel darauf. Die Streifen laufen
+große Flächen wäre ein zweites Wappen.
-parallel zur linken Deckelkante und setzen sich auf der rechten Wange als
-senkrechte Bänder fort, damit sie über den Knick hinweg zusammenpassen.
-
-Sie ist **unter 64 px unbrauchbar** — zu viele Kanten auf zu wenig Pixeln —,
-und genau deshalb steht sie dort: Der Anmeldebildschirm ist die einzige Stelle
-mit Platz und Zeit. In den Leisten bleibt die Seitenansicht.
 
 ### Und aus Schriftzeichen
 

tools/biene.py

@@ -16,6 +16,7 @@ einen Buchstaben ändern, danach stimmen wieder alle Fassungen überein.
 """
 import json
 import pathlib
+import re
 import struct
 import zlib
 
@@ -61,8 +62,10 @@ BIENE = [
 
 # ── Die 3/4-Ansicht ──────────────────────────────────────────────────────
 #
-# Nur für den Anmeldebildschirm: groß, einmal am Tag, mit Zeit zum Hinsehen.
+# Liegt in der Schublade: HoneyOS zeigt überall dasselbe Wappen von der Seite,
-# Unter 64 px zerfällt sie — zu viele Kanten auf zu wenig Pixeln.
+# also wird sie zurzeit nirgends ausgeliefert. Wer sie doch braucht (ein großes
+# Startbild, ein Aufkleber), ruft `schraeg()` und reicht das Ergebnis an `svg()`
+# oder `png()`. Unter 64 px zerfällt sie — zu viele Kanten auf zu wenig Pixeln.
 #
 # Ein Würfel hat in Pixelkunst die Steigung 2:1: zwei Pixel nach rechts, einer
 # nach unten. Von Hand wird das krumm, also werden die drei sichtbaren Flächen
@@ -133,6 +136,11 @@ def svg(raster):
     """Waagerechte Läufe gleicher Farbe werden ein Rechteck — dieselbe Idee wie
     bei den Pixelsymbolen in web/js/glyphs.js, nur mit Farbe statt currentColor.
 
+    Der Rahmen wird auf das gesetzt, was wirklich gefüllt ist: Das Raster ist
+    quadratisch, die Biene ist es nicht. Mit dem vollen Quadrat als viewBox
+    bliebe unten ein Viertel Luft — und die kostet überall Größe, wo das Bild in
+    einen Kasten gelegt wird: in der Leiste, im Tab, auf dem Anmeldebildschirm.
+
     Warum SVG und nicht PNG für die Leisten: Die HoneyBar läuft in *fremden*
     Apps. Ein <img> holt dort eine Datei von HoneyOS, und ob das erlaubt ist,
     entscheidet die CSP der fremden App. Markup kann niemand blockieren."""
@@ -150,8 +158,12 @@ def svg(raster):
             r, g, b = FARBEN[z]
             teile.append(f'<rect x="{x}" y="{y}" width="{lauf}" height="1" fill="#{r:02x}{g:02x}{b:02x}"/>')
             x += lauf
-    n = len(raster)
+    voll = [(x, y) for y, z in enumerate(raster) for x, c in enumerate(z) if c in FARBEN]
-    return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {n} {n}" '
+    x0 = min(x for x, _ in voll)
+    y0 = min(y for _, y in voll)
+    breite = max(x for x, _ in voll) - x0 + 1
+    hoehe = max(y for _, y in voll) - y0 + 1
+    return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="{x0} {y0} {breite} {hoehe}" '
             'shape-rendering="crispEdges" aria-hidden="true">' + "".join(teile) + "</svg>")
 
 
@@ -198,10 +210,6 @@ def main():
     zeichen = text(BIENE)
 
     (WURZEL / "web/img/biene.svg").write_text(bild + "\n")
-    # Für die Anmeldung: einmal groß, in Schrägsicht.
-    drei = schraeg()
-    (WURZEL / "web/img/biene-3d.svg").write_text(svg(drei) + "\n")
-    png(drei, 8, WURZEL / "web/img/biene-3d-256.png")
     png(BIENE, 16, WURZEL / "web/img/biene-256.png")
     png(BIENE, 2, WURZEL / "web/img/biene-32.png")
 
@@ -218,8 +226,15 @@ def main():
         f"export const BIENE_SVG = '{bild}';\n\n"
         f"export const BIENE_ASCII = {json.dumps(zeichen)};\n"
     )
+    bar = WURZEL / "web/honeybar/honeybar.js"
+    alt = bar.read_text()
+    neu = re.sub(r"  const WAPPEN = '[^\n]*';", f"  const WAPPEN = '{bild}';", alt)
+    if neu != alt:
+        bar.write_text(neu)
+        print("web/honeybar/honeybar.js: Wappen ersetzt")
+
     print(text(BIENE))
-    print(f"\nweb/img/biene.svg ({len(bild)} Zeichen), biene-3d.svg, drei PNG, web/js/biene.js")
+    print(f"\nweb/img/biene.svg ({len(bild)} Zeichen), biene-256.png, biene-32.png, web/js/biene.js")
 
 
 if __name__ == "__main__":

web/css/style.css

@@ -944,12 +944,12 @@ body {
   overflow: hidden;
 }
 
-/* Die Biene über dem Anmeldeknopf, in Schrägsicht. Sie schwebt ein wenig —
+/* Dasselbe Wappen wie in der Leiste, nur groß. Es schwebt ein wenig — sechs
-   sechs Sekunden für zwei Pixel, also eher ein Atmen als eine Bewegung. Wer
+   Sekunden für zwei Pixel, also eher ein Atmen als eine Bewegung. Wer Bewegung
-   Bewegung abgestellt hat, bekommt sie ruhig. */
+   abgestellt hat, bekommt es ruhig. */
 .login-biene {
   display: block;
-  width: clamp(96px, 22vw, 132px);
+  width: clamp(128px, 28vw, 176px);
   height: auto;
   margin: 22px 0 0;
   image-rendering: pixelated;

web/honeybar/honeybar.js

@@ -103,7 +103,7 @@
    * 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 WAPPEN = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12" 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" });
 

web/img/biene-3d.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" shape-rendering="crispEdges" aria-hidden="true"><rect x="23" y="3" width="1" height="1" fill="#3b2412"/><rect x="22" y="4" width="1" height="1" fill="#3b2412"/><rect x="10" y="5" width="1" height="1" fill="#3b2412"/><rect x="15" y="5" width="6" height="1" fill="#d6d1be"/><rect x="11" y="6" width="1" height="1" fill="#3b2412"/><rect x="17" y="6" width="6" height="1" fill="#d6d1be"/><rect x="8" y="7" width="6" height="1" fill="#f5f2e7"/><rect x="19" y="7" width="6" height="1" fill="#d6d1be"/><rect x="10" y="8" width="6" height="1" fill="#f5f2e7"/><rect x="12" y="9" width="6" height="1" fill="#f5f2e7"/><rect x="13" y="10" width="4" height="1" fill="#ffd060"/><rect x="17" y="10" width="2" height="1" fill="#5c3a1c"/><rect x="11" y="11" width="3" height="1" fill="#5c3a1c"/><rect x="14" y="11" width="5" height="1" fill="#ffd060"/><rect x="19" y="11" width="2" height="1" fill="#5c3a1c"/><rect x="9" y="12" width="2" height="1" fill="#ffd060"/><rect x="11" y="12" width="5" height="1" fill="#5c3a1c"/><rect x="16" y="12" width="5" height="1" fill="#ffd060"/><rect x="21" y="12" width="2" height="1" fill="#5c3a1c"/><rect x="7" y="13" width="1" height="1" fill="#5c3a1c"/><rect x="8" y="13" width="5" height="1" fill="#ffd060"/><rect x="13" y="13" width="5" height="1" fill="#5c3a1c"/><rect x="18" y="13" width="5" height="1" fill="#ffd060"/><rect x="23" y="13" width="2" height="1" fill="#5c3a1c"/><rect x="5" y="14" width="5" height="1" fill="#5c3a1c"/><rect x="10" y="14" width="5" height="1" fill="#ffd060"/><rect x="15" y="14" width="5" height="1" fill="#5c3a1c"/><rect x="20" y="14" width="5" height="1" fill="#ffd060"/><rect x="25" y="14" width="2" height="1" fill="#5c3a1c"/><rect x="5" y="15" width="2" height="1" fill="#f2b33d"/><rect x="7" y="15" width="5" height="1" fill="#5c3a1c"/><rect x="12" y="15" width="5" height="1" fill="#ffd060"/><rect x="17" y="15" width="5" height="1" fill="#5c3a1c"/><rect x="22" y="15" width="3" height="1" fill="#ffd060"/><rect x="25" y="15" width="2" height="1" fill="#462b14"/><rect x="5" y="16" width="4" height="1" fill="#f2b33d"/><rect x="9" y="16" width="5" height="1" fill="#5c3a1c"/><rect x="14" y="16" width="5" height="1" fill="#ffd060"/><rect x="19" y="16" width="4" height="1" fill="#5c3a1c"/><rect x="23" y="16" width="2" height="1" fill="#d2952a"/><rect x="25" y="16" width="2" height="1" fill="#462b14"/><rect x="5" y="17" width="6" height="1" fill="#f2b33d"/><rect x="11" y="17" width="5" height="1" fill="#5c3a1c"/><rect x="16" y="17" width="5" height="1" fill="#ffd060"/><rect x="21" y="17" width="2" height="1" fill="#462b14"/><rect x="23" y="17" width="2" height="1" fill="#d2952a"/><rect x="25" y="17" width="2" height="1" fill="#462b14"/><rect x="5" y="18" width="2" height="1" fill="#f2b33d"/><rect x="7" y="18" width="2" height="1" fill="#181410"/><rect x="9" y="18" width="4" height="1" fill="#f2b33d"/><rect x="13" y="18" width="5" height="1" fill="#5c3a1c"/><rect x="18" y="18" width="1" height="1" fill="#ffd060"/><rect x="19" y="18" width="2" height="1" fill="#d2952a"/><rect x="21" y="18" width="2" height="1" fill="#462b14"/><rect x="23" y="18" width="2" height="1" fill="#d2952a"/><rect x="25" y="18" width="2" height="1" fill="#462b14"/><rect x="5" y="19" width="2" height="1" fill="#f2b33d"/><rect x="7" y="19" width="1" height="1" fill="#181410"/><rect x="8" y="19" width="1" height="1" fill="#63c7c0"/><rect x="9" y="19" width="1" height="1" fill="#181410"/><rect x="10" y="19" width="5" height="1" fill="#f2b33d"/><rect x="15" y="19" width="2" height="1" fill="#5c3a1c"/><rect x="17" y="19" width="1" height="1" fill="#462b14"/><rect x="18" y="19" width="3" height="1" fill="#d2952a"/><rect x="21" y="19" width="2" height="1" fill="#462b14"/><rect x="23" y="19" width="2" height="1" fill="#d2952a"/><rect x="25" y="19" width="2" height="1" fill="#462b14"/><rect x="5" y="20" width="2" height="1" fill="#f2b33d"/><rect x="7" y="20" width="3" height="1" fill="#181410"/><rect x="10" y="20" width="2" height="1" fill="#f2b33d"/><rect x="12" y="20" width="1" height="1" fill="#181410"/><rect x="13" y="20" width="3" height="1" fill="#f2b33d"/><rect x="16" y="20" width="2" height="1" fill="#462b14"/><rect x="18" y="20" width="3" height="1" fill="#d2952a"/><rect x="21" y="20" width="2" height="1" fill="#462b14"/><rect x="23" y="20" width="2" height="1" fill="#d2952a"/><rect x="25" y="20" width="2" height="1" fill="#462b14"/><rect x="5" y="21" width="4" height="1" fill="#f2b33d"/><rect x="9" y="21" width="1" height="1" fill="#181410"/><rect x="10" y="21" width="2" height="1" fill="#f2b33d"/><rect x="12" y="21" width="3" height="1" fill="#181410"/><rect x="15" y="21" width="1" height="1" fill="#f2b33d"/><rect x="16" y="21" width="2" height="1" fill="#462b14"/><rect x="18" y="21" width="3" height="1" fill="#d2952a"/><rect x="21" y="21" width="2" height="1" fill="#462b14"/><rect x="23" y="21" width="2" height="1" fill="#d2952a"/><rect x="25" y="21" Line truncated

web/img/biene.svg

@@ -1 +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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12" 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>

web/index.html

@@ -21,9 +21,9 @@
       <!-- ── Anmeldung ──────────────────────────────────────────────────── -->
       <div class="login" id="login" hidden>
         <pre class="boot-log" id="loginLog"></pre>
-        <!-- Einmal groß: die Schrägsicht. Sie ist unter 64 px unbrauchbar, und
+        <!-- Dasselbe Wappen wie oben links in der Leiste und im Tab, nur groß:
-             hier ist Platz — man wartet ohnehin auf den Anbieter. -->
+             ein Gerät, ein Zeichen. -->
-        <img class="login-biene" src="./img/biene-3d.svg" alt="" width="128" height="128" />
+        <img class="login-biene" src="./img/biene.svg" alt="" width="160" height="160" />
         <div class="login-box">
           <button class="login-btn" id="btnLogin">&#9656; <span id="loginLabel">Anmelden</span></button>
           <p class="login-note" id="loginNote"></p>

web/js/biene.js

@@ -3,6 +3,6 @@
  * 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_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12" 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      ::::    ::::    ::::";