Logo einbinden: Favicons, Apple-Icon und Marken-Quellen

Das Logo lag bisher nirgends im Einsatz — das Favicon war ein handgeschriebenes
Prisma in Gold/Orange, das Wasserzeichen der Willkommens-Karte der blosse
Markenname als Text.

- docs/brand/ mit lockup.png (volles Logo) und mark.png (nur der Wolfskopf)
  plus build.py, das beide und alle abgeleiteten Icons erzeugt
- frontend: favicon.svg ersetzt, apple-touch-icon.png dazu und verlinkt
- Zwei Fassungen, weil das Lockup bei 16 px zu einem orangen Balken wird; der
  Kopfzuschnitt wurde gegen drei Varianten geprueft
- SVG mit eingebettetem PNG statt Vektorisierung: das Original hat Verlaeufe
  und Schattierung, nachgezeichnet wuerde es matschen
- Die Icons auf dunklem Grund sind deckend, sonst legt iOS hinter transparente
  Lesezeichen Schwarz oder Weiss und der Wolf ist selbst fast schwarz

Geprueft: beide Dateien werden mit korrektem MIME-Typ ausgeliefert und das SVG
rendert wirklich (128x128), die Link-Tags stehen im gebauten HTML.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/brand/README.md

@@ -0,0 +1,60 @@
+# Marken-Dateien
+
+Alles hier stammt aus einem einzigen Original: dem D4RKST3R-Logo in 2048×2048
+mit Transparenz (Wolfskopf über dem Schriftzug-Banner).
+
+## Was hier liegt
+
+| Datei | Was | Wofür |
+|---|---|---|
+| `lockup.png` | volles Logo, auf den Inhalt beschnitten | Kopfzeilen, Discord-Banner, OG-Bilder |
+| `mark.png` | nur der Wolfskopf, 1024×1024 | alles Quadratische — Favicon, Avatar |
+| `build.py` | erzeugt beide plus die abgeleiteten Icons | Neubau nach Logo-Änderung |
+
+## Warum zwei Fassungen
+
+Das volle Lockup ist bei 16 oder 32 Pixeln unbrauchbar — der Schriftzug wird zu
+einem orangen Balken. Für Favicon, Avatar und Navbar-Logo wird deshalb nur der
+Kopf verwendet, mit Ohrenspitzen und etwas Schulter. Der Zuschnitt steht in
+`build.py` als `KOPF` und wurde von Hand gegen drei Varianten geprüft: enger
+schneidet die Ohren ab, weiter fängt schon den Banner ein.
+
+## Warum SVG mit eingebettetem PNG
+
+Gitea will `logo.svg` und `favicon.svg` — echte SVG-Dateien. Das Original ist
+aber eine Rastergrafik mit Verläufen und Schattierung; nachvektorisieren würde
+sie matschig machen. Deshalb wird das PNG in eine SVG-Hülle gelegt
+(`<svg><image href="data:image/png;base64,…"/></svg>`). Das ist gültiges SVG,
+Gitea nimmt es an, und es sieht aus wie das Original.
+
+Die eingebettete Auflösung ist bewusst klein gehalten: das Navbar-Logo hängt an
+jedem Seitenaufruf, 192 px reichen für eine Darstellung mit rund 30 px.
+
+## Wohin die erzeugten Dateien gehen
+
+`build.py` schreibt direkt an beide Ziele:
+
+```
+A:/eco/Gitea/data/gitea/public/assets/img/
+    logo.svg              Navbar + App-Icon
+    favicon.svg           Browser-Tab
+    apple-touch-icon.png  iOS-Lesezeichen (180 px, deckend)
+    avatar_default.png    Standardavatar für Konten ohne Bild (512 px)
+
+frontend/public/
+    favicon.svg
+    apple-touch-icon.png
+```
+
+Die Icons auf dunklem Grund sind **deckend** (`#0a0a0a`, abgerundet) — iOS legt
+hinter transparente Lesezeichen sonst Schwarz oder Weiß, je nach Laune, und der
+Wolf ist selbst fast schwarz.
+
+## Neu bauen
+
+```bash
+python docs/brand/build.py
+```
+
+Danach für Gitea `docker restart gitea` — die Dateien unter `custom/` werden
+beim Start eingelesen. Fürs Frontend reicht der normale Build.

docs/brand/build.py

@@ -0,0 +1,107 @@
+# Baut aus dem Original-Logo den Satz an Marken-Dateien:
+#   - die Wolfskopf-Marke freigestellt (fuer Favicon, Avatar, kleine Groessen)
+#   - das volle Lockup beschnitten (fuer Kopfzeilen, Discord, OG-Bilder)
+#   - Icons auf dunklem Grund (iOS und Gitea-Standardavatar moegen kein Alpha)
+#   - SVG-Huellen mit eingebettetem PNG (Gitea will .svg, das Original ist
+#     eine Rastergrafik mit Verlaeufen — nachvektorisieren wuerde matschen)
+import base64
+import io
+import pathlib
+
+from PIL import Image, ImageDraw
+
+QUELLE = pathlib.Path('A:/Users/DAR/logo.png')
+MARKE = pathlib.Path('A:/eco/dc_devlog_bot/docs/brand')
+GITEA = pathlib.Path('A:/eco/Gitea/data/gitea/public/assets/img')
+FRONTEND = pathlib.Path('A:/eco/dc_devlog_bot/frontend/public')
+
+# Kopf mit Ohrenspitzen und etwas Schulter, ohne Schriftzug (im 2048er Original)
+KOPF = (330, 20, 1740, 1430)
+DUNKEL = (10, 10, 10, 255)   # --bg der Marke
+
+for d in (MARKE, GITEA, FRONTEND):
+    d.mkdir(parents=True, exist_ok=True)
+
+original = Image.open(QUELLE).convert('RGBA')
+marke = original.crop(KOPF)
+lockup = original.crop(original.getchannel('A').getbbox())
+
+
+def png_bytes(bild, groesse=None):
+    aus = bild if groesse is None else bild.resize((groesse, groesse), Image.LANCZOS)
+    puffer = io.BytesIO()
+    aus.save(puffer, 'PNG', optimize=True)
+    return puffer.getvalue()
+
+
+def gerundet(bild, kante, radius_anteil=0.22, rand=0.08):
+    """Marke mittig auf dunklem, abgerundetem Quadrat — deckend."""
+    flaeche = Image.new('RGBA', (kante, kante), (0, 0, 0, 0))
+    maske = Image.new('L', (kante, kante), 0)
+    ImageDraw.Draw(maske).rounded_rectangle(
+        (0, 0, kante - 1, kante - 1), radius=int(kante * radius_anteil), fill=255)
+    flaeche.paste(Image.new('RGBA', (kante, kante), DUNKEL), (0, 0), maske)
+
+    innen = int(kante * (1 - 2 * rand))
+    klein = bild.resize((innen, innen), Image.LANCZOS)
+    flaeche.alpha_composite(klein, ((kante - innen) // 2, (kante - innen) // 2))
+    return flaeche
+
+
+def svg_huelle(daten, kante):
+    """SVG mit eingebettetem PNG — gueltig, und Gitea nimmt nur .svg."""
+    b64 = base64.b64encode(daten).decode('ascii')
+    return (
+        f'<svg xmlns="http://www.w3.org/2000/svg" '
+        f'xmlns:xlink="http://www.w3.org/1999/xlink" '
+        f'viewBox="0 0 {kante} {kante}" width="{kante}" height="{kante}">'
+        f'<image width="{kante}" height="{kante}" '
+        f'xlink:href="data:image/png;base64,{b64}"/>'
+        f'</svg>\n'
+    )
+
+
+geschrieben = []
+
+
+def schreib(pfad, daten):
+    pfad.write_bytes(daten if isinstance(daten, bytes) else daten.encode('utf-8'))
+    geschrieben.append((pfad, len(daten)))
+
+
+# ── Quelldateien im Repo, versioniert ────────────────
+schreib(MARKE / 'mark.png', png_bytes(marke, 1024))
+schreib(MARKE / 'lockup.png', png_bytes(lockup))
+
+# ── Gitea ────────────────────────────────────────────
+# Navbar-Logo und Favicon: die Marke, das Lockup ist bei 30 px unlesbar.
+# 192 px reichen — Gitea zeigt das Logo in der Navbar mit rund 30 px, und die
+# Datei haengt an jedem Seitenaufruf.
+schreib(GITEA / 'logo.svg', svg_huelle(png_bytes(marke, 192), 192))
+schreib(GITEA / 'favicon.svg', svg_huelle(png_bytes(gerundet(marke, 128), 128), 128))
+schreib(GITEA / 'apple-touch-icon.png', png_bytes(gerundet(marke, 180)))
+schreib(GITEA / 'avatar_default.png', png_bytes(gerundet(marke, 512)))
+
+# ── Hub + Bot-Produktseite ───────────────────────────
+schreib(FRONTEND / 'favicon.svg', svg_huelle(png_bytes(gerundet(marke, 128), 128), 128))
+schreib(FRONTEND / 'apple-touch-icon.png', png_bytes(gerundet(marke, 180)))
+
+for pfad, n in geschrieben:
+    print(f'{n/1024:8.1f} KB  {pfad}')
+
+# ── Vorschau: liest die Marke in klein noch? ─────────
+# Landet neben diesem Skript, oben auf hellem, unten auf dunklem Grund —
+# so sieht man vor dem Ausrollen, ab welcher Groesse es kippt.
+KANTEN = (16, 32, 64, 128)
+breite = sum(k + 40 for k in KANTEN) + 30
+vorschau = Image.new('RGBA', (breite, 200), (24, 24, 28, 255))
+x = 30
+for kante in KANTEN:
+    for grund, y in (((250, 250, 250, 255), 20), (DUNKEL, 110)):
+        feld = Image.new('RGBA', (kante + 16, kante + 16), grund)
+        feld.alpha_composite(gerundet(marke, kante), (8, 8))
+        vorschau.alpha_composite(feld, (x, y))
+    x += kante + 40
+ziel = pathlib.Path(__file__).parent / 'preview.png'
+vorschau.convert('RGB').save(ziel)
+print(f'\nVorschau ({"/".join(map(str, KANTEN))} px): {ziel}')

frontend/index.html

@@ -6,6 +6,7 @@
         <title>D4RKST3R // DEVLOG</title>
         <meta name="description" content="D4RKST3R — Devlog-Archiv, Changelog & Community." />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
         <meta name="theme-color" content="#0a0a0a" />
     </head>
     <body>

frontend/public/favicon.svg

@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" width="128" height="128"><image width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAABM/klEQVR42u29d5yc5XX+/X369O27WvUuQBKqgATGVIkmmg022OBeiPNLiO24xHGNY9zi2LHj2CF2bCfGNqYj0QRCqIAQkpBQQXVVdqXtO709/f3jfubZFZC8DkhyYz6fRYukHc3Mfe5TrnOd60icxEcsFvN58/GGH+VyWTpZzy29eeB/3gYhvXnwf96GIL158H/ehiC9efB/3oYgv3n4fzqP13M28puH/+dtBNKbB//nHRLkNw//z9sbyG8e/p+3Echv5MklSXrzEz4FD0VRTtpzy2/k9vu+jyzLb57QSXpIsowkSbiuSzwRf92f9f92lvLrPXxV1QDwPO+kWuif761X8T0P3/f54Ic/wre//S1xYCfYCOTXG/c1TeX73/8BU6ZMxXVdZFl+0xuciFsvSciyjOs6jB4zll/89y/5/ve+y46XtuN53hv6jF/rbOXXZ50KlUqF+vo61qxZw403vAPP80Jv8GZu8Ppjve/7eJ7HO256F+vXP8sNb7ueSqXCEyufDD3uScsBftfbXzvgp556ioaGen7+i5/xm1/fzZmz5+C6Lr7vvxkW/o+3XlVVXNclWVfPv/34Tn720/+gtaUJ13U5dOgQhw4dOiEG8Mozfl0ewPfFc+zcuRPf97Ftm6uvWcbadWv55+98j7a2dlzXRZKkNw3hd7z1juNwwcWX8MyaNbz31ndjWRa266IoCkc6u05awi2/npq/ZoWHDh0il8+jaRqO4yDL8NHbPsy6dWt597vfDRDmB28awmsl0uLWG5EIX/3aHTy6/GFOmyZyKl3XIficDx86/IYSwP/NC7whD5DNZuns7Ax+T2SujuMwZsxo7rzzTlavXs2SJUvwPC/0CG8miuIgJUnCcRwWnHUOTz+9mk/8ze3Yti0SPUXhoQfup1gsAnCkq/Pk4gCvB/Grua4D+zuCm+7x2KOPkc3l8H0f13U566yzePDBB3n44RVceeWVYYLz55woqqqKF5R3t3/yU6x66knmzjkTy7LQNI3OziN84q8/xooH7yOVSgWe9uAJfx21M3/d17F2gHv27QnemMyqp1Yx58w5fPOb36a/fyB8o5dcchH33HMP99/7APPmzg8TRVVV/2wMoZYPOY5Da/tofnX3vdzxD19G8kX1pOk6v737V3zqE7ezbetWps44DVmW8X2friNdJ6UCeEMGUHvs2rkr/P6SS5fQ3d3Dl7/0FRadvYg7vnYH+VwO13VxHIfLrljK06tX8Z3v/DPto9pxHOfPomKoeUvXdbn+hhtZv3Yd1y67AssyUTWNnu5uvvB3n+I/f/IfgIIRjZFKpZBlmXw+T19fz3Gh9w/CAGrWuGfPbmxbZKszZkynuamFhsZmSmWTL3/5Hznv3PP49V13oSgKruuiqiq33fZR1j+7nttuu41YLIYbZLt/avmBFIBjruvS1t7Oj//jJ/zyFz9nzOhRQaJn8OQTj/HpT97OS9teIpmqB0RF0Nw6CoD+/gGGhoZOXg7wejt+NWs8fPgQfX09SJLE2LFjGT9uHMViAU3XGNXezrGeAT70oY9y0QUX8sTjTyDLMo7jMGrUKL7zne+wdu06Lr/8ClzXxfO8P5mwoKoCyvU8j5ve9W6effZZbn3Xzdi2he/79A/089UvfZ7vfefbVE0bPRLFsiwc10eSZNra2gA4dqwH27aRJOmEe4BYLOa/7itXq0urlSr79u0Xrk6VmTxlCpZZRZIkbNsmEonQ3DqKrdt2cMPbb+QdN9zInt27w9r39NNP47777uWnP/0pkyZNOi4s/DEawsgMf/SYsfzsF7/gp/9xJ+1tbbiui6bpPPrIcv76Yx/l2WefIxpP4Xo+lmXjuj6O66JpGm1twgN0dx89oSXgCc0Bai9qx44doVHMmjUrsFgZ3wfP87Edh0QyRWNzK488upJLLrqUz37q0wwODoQQ8k033cSGDRv46lf/kfb29j+6RLGG5tUS3w986MM899xzvOOGG7Atcet7enr4/N9/lu98+1tUKiaRaAzXcXBsB9f18H1wHJdkIklzc7MIsXv3HZd0/8ElgQDbt78Ufj9nzhwUWcb3axmrjyxJeJ6P47g0NDWj6FG+/4Mfc/65b+XOH/8Y13UFDJpM8olPfJwXNr7A3/7tp4jFYn8UieJINO+008/goeUr+MG/fI+WZgHlarrOiuUP85e3fZhn160nnkghIYHnkc/nURRFdP/wsS2b1tZW6hsaxGf70taTlgC+YQOoJYK7Xn4Zx3FRJIXp06eTSCRxHBdJEpZbqVRxXAdV03AdFx+JllHt5EsmH//4p7norReyYvny8ENsbGrkK1/5Ms8//zwf/cht6Jr+BwkkDXfuXCLRKJ/5u8+xZs0zXHrxRVimie/75PM5/uFLX+Db3/wGVdMmFovjuy6O45LOZLjkkot5/wfej2XZyJKMZVmMam9HlmVs2+bQ4cN/uAZQe1GHDh6kr68f35dobx/NqFGjsC0LWVYwTYvZs2eRiCcYGuhH1VXx5iwLVdVoGTWGl/d28K53vZfrr30bWzZvDkumKVOm8M/f/Q7PPLOGq65aFgJJfwit55GduyuXXcPadev54uf/nng0iud56IbBU0+t5IPvew9PPPEEsXgSfB/f9ykUiqi6zmf//gv8zd9+ih07d1KpVJBkGcexGT16DJIkcezYMTqPHPnDNgBJkigWi+zZuxdJglRdjEmTJ2FZpkiIgFKxwJ133snll19Ff28fZrWMpgtCiWNZxGIJmprbWP3MOq68Yhkf/uCH2L37ZTzPw3Ec5sw9k9/+9m7uuede5s+fH+YNv48egzyitGsdNYr//Pl/c8/dv2bm6adhWRZIEp1HDvOZv/04n/v0pxkYSBONJfAcG9dxyGSyLDrvfP79P37CxZdcxIrly0mns8FzekiyzLjx4wHYu28flmWFgNAfZA5QO4CXXnoJSRZGcdqM07BMC5CIRKPseXkP//7jf+PXd/+Sn/7nz2gfNZb+3n5sx0LVNfyg9q2rbyCWqOfu3z7ApRcv5dOf+hT9/X1hL+HKK6/gmWfW8Itf/Ddnn73ouB7Dya4aRiZ5nudx7fVvY93atbzzxrdhmqa49brOL//r57zv1nezcuVTxOICzMFzKeQLOB7c/slP8c1vfYOWliZ+cue/Y1o25XI5NHZd1xgzZiwAu/fsPakVwAkxgJpdbt6yGS/4n5mzZ+F5bghqpOrr2fXybj70oY/w7nffwKqnH+fLX/kSDXWN9PX24dg2qqbiuh6e59PU3IoeSXDnnf/JRRdcxA++/31s2wo6ixI33PA2Vq9exd13/5a3nn9BGDJqyWINVHojBiFJUmhYI5O8yVOncdevfsOvfvnfjB0zBsuyMAyDzs4j/OVtH+afv/1P2A4kk3X4novvugwMDDF77gJ+8rOfcdM7bwTgzn//EYODaSRJJp/LA2BbFslkirZRAgM4fPDgyfdob9gAgkRwx47t5AslFEnhjDNOJxKJ4DguIJLApsYmDh7o4B3vfDeKAh/76Pt49JH7+MqXv0wqWc9Afz++76Jpapj5N7eMolRx+MLnv8SlF13Cww8+BAiSpOP7LFt2FY89/igPL3+Eq6++lmg0FlYUtXKsdnNHftUO9ZW/X/uzGuhSMyzXdamrb+Djn/w069au4bprr6ZSqeL7Prqu86u7/ov3vOtmnnv2eRKpBvB9JN+nUq7g+vA3f/tpfnznj5k4fiyObbH84Qd45uk1tLS2US4WKZfLSJKEaZq0tbVSV1cHwMGgCXSy3D+A9Ea5/7UPS9N1nt+4ielTpjIwOMjiRYtJZ3LouoFZNWltbebsc85h0wubmHH6NO748t9jV6s0NjVRKJvc9esH+M3d9zAw0ENDYwOapgccA3GA5VIRs1Jm0aKz+MhHP8Kya69FAqqeREwTucbe/YdZ/fQqnn76afbs3sWxY0epViuvM7Sp1NXXM3fuXK648iouW7KEKVMmUSlXUBQV3dDYvGkjP/zB93l+w0YSyXqBWQQAWTaTZc78+Xz285/jtGlTOdbViSRJ7D+wj6/+w9eYftrpLFywANMyeXj5oziOQ7FY4JprlvHFL30J0zRZsHAhhw4eRJblk9IIOiEGUItRnufxm7vvYdlVV+LYLsuWXc3q1WtpaGgI3KTOosWLUCSFp55ezawzpnPHV/4ez7ZxHZsxY8eSLTvc++Bj/PquX1Es52hqagJEq1lVFGRFopDPY5sVFixcwF/+1V9y5dXXoko+maKDrikkogoekMuW6Ovr4fChwxw8eIj+vh4qZoVsOs3g4BCSJJFIJIhEIiSTKZJ1SepTdTQ3N9LY2ERTUxMNDfU0N7Wg6yqWaeH5Po1NjfT2dPNvP/gXlj+8HNeFRDIl+hyKgmmalCtVbr71Fj72sY9Szufp7+3FMAzKlRJfu+Ob9A8M8dYL3sqUyZPIZLOseORxNE0jm0nz8U/cznve+z4Od3Yyf+48zABVPVleQD1RmbHneWx7aRtXL7sSSfaZO28uK59cGf55uVSmXCqRStUxY/p0Nr+4g4/9zWf41te+QCISY+eOXcTjUT5wy3W8/W3X8OMf/ycPP3Q/mi6TqqvH83xcxyWRTCHX1bNj124+9P4PcdZZP+IDH/oQl125jEREo1xxsUwTCWgfNZqxY8dx4YUXIgX5iu85OI4DvoccxHlZkhC4jCeQOVcgc57vU61W8DydWDyGZVb57a/v4id3/js93X0k6+qDMOGgKirZbJbmllY+8/nPcc7CeezbuQPLNNELine truncated
-  <rect width="32" height="32" rx="6" fill="#0a0a0a"/>
-  <path d="M16 5 L26 10.5 L16 16 L6 10.5 Z" fill="#f5c518"/>
-  <path d="M6 10.5 L16 16 L16 27 L6 21.5 Z" fill="#8a6f0e"/>
-  <path d="M26 10.5 L16 16 L16 27 L26 21.5 Z" fill="#ff4d00"/>
-</svg>