Add homepage documentation to docs folder

docs/Brain.md

@@ -0,0 +1,199 @@
+# Brain.md - Projekt mischlabs.de Landing Page
+
+## Projektziel
+Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.
+
+Aktueller Stand: Die Seite ist keine reine Linkliste mehr, sondern ein kompaktes Service-Dashboard mit Kategorien, Suche, Hintergrund-Statuscheck und PWA-Unterstuetzung.
+
+## Status
+- [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
+- [x] Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
+- [x] Landing Page Design und Implementierung (index.html + style.css)
+- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
+- [x] PWA-Grundlage fuer iOS/Home-Screen-Installation
+- [x] Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
+- [x] Push zum Remote
+- [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
+- [ ] Push des MiChess-Commits (Git-Auth-Token erneuern)
+
+## Verwandte Projekte
+- **auth** (d:\Vibecoding\Website\auth) - Keycloak SSO fuer alle Dienste
+  - Repo: https://git.mischlabs.de/MrDiderot/auth.git
+  - Subdomain: auth.mischlabs.de
+  - Siehe auth/Brain.md fuer Details
+
+## Dienste-Uebersicht (8 Stueck)
+| # | Subdomain | Beschreibung | Farbe/Accent |
+|---|-----------|-------------|--------------|
+| 1 | drive.mischlabs.de | Cloud-Speicher | #4285f4 (Blau) |
+| 2 | git.mischlabs.de | Code-Repositories | #f05033 (Rot) |
+| 3 | movies.mischlabs.de | Filme & Serien | #a855f7 (Lila) |
+| 4 | audiobook.mischlabs.de | Hoerbuecher | #22c55e (Gruen) |
+| 5 | password.mischlabs.de | Passwort-Manager | #eab308 (Gelb) |
+| 6 | docs.mischlabs.de | Dokumentation | #06b6d4 (Cyan) |
+| 7 | michess.mischlabs.de | Schach | #10b981 (Gruen) |
+| 8 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) |
+
+## Technische Entscheidungen
+- **Reines HTML + CSS mit minimalem Dashboard-/PWA-JS** (kein Framework) - maximale Performance, minimales Docker-Image
+- **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
+- **Google Fonts (Inter)** fuer moderne Typografie
+- **Inline SVG Icons** - keine externen Dependencies
+- **CSS Grid** mit `auto-fill` + `minmax(240px, 1fr)` fuer responsives Layout
+- **Dark Theme** mit subtilen Glow-Effekten
+- **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck)
+- **PWA**: Manifest, Apple-Touch-Icon, App-Icons und Service Worker fuer installierbare iOS/Web-App
+- **Dashboard**: Kategorien `Zugang`, `Medien`, `Arbeit`, `Persoenlich`, Suche und clientseitige no-cors Statuschecks
+- **Auth-Link**: Zeigt auf die Keycloak Account Console (`/realms/mischlabs/account`), nicht mehr auf die Admin-Konsole
+- **Adminseite**: `/admin.html` nutzt Keycloak Authorization Code + PKCE fuer Login und bietet Editor/Statusdiagnose fuer Dienste
+
+## Docker-Setup
+- **Container-Name**: `mischlabs`
+- **Base-Image**: `nginx:alpine`
+- **Port-Mapping**: `8085:80` (anpassbar in docker-compose.yml)
+- **Restart-Policy**: `unless-stopped`
+- **nginx.conf**: Caching fuer Static Assets (7 Tage), Security-Headers
+
+## Dateistruktur
+```
+mischlabs/
+  index.html          - Haupt-HTML mit allen 9 Service-Kacheln
+  style.css           - Komplettes Styling (Dark Theme, Grid, Animationen)
+  app.js              - Suche, Filter, Statuschecks, Service-Worker-Registrierung
+  admin.html          - SSO-geschuetzte Adminoberflaeche
+  admin.js            - Keycloak PKCE Login, Editor, Statusdiagnose
+  services.json       - Zentrale Service-/Kategorie-Konfiguration
+  offline.html        - Offline-Fallback fuer installierte PWA
+  manifest.webmanifest - PWA-Metadaten fuer installierbare App
+  sw.js               - Schlanker Service Worker mit App-Shell-Cache
+  icons/              - App-Icons fuer iOS/PWA
+  Dockerfile          - nginx:alpine mit kopierten Static Files
+  docker-compose.yml  - Container-Definition (Name: mischlabs, Port 8085)
+  nginx.conf          - Server-Konfiguration, Caching, Security-Headers
+  .gitignore          - Git-Ausschluesse
+  Brain.md            - Dieses Dokument (KI-Uebergabe)
+```
+
+## Deployment-Workflow
+1. Code aendern und committen
+2. Push zu git.mischlabs.de
+3. Auf dem Server: `git pull && docker compose up -d --build`
+
+## Erkenntnisse & Notizen
+- Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports
+- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains (Cloudflare Tunnel)
+- Port 8085 gewaehlt da gaengige Ports (80, 8080, 8090) bereits belegt
+- Kein JavaScript noetig - pure CSS reicht fuer alle Effekte
+- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende
+- Git-Push-Fehler aufgetreten (Authentication failed) - Token muss erneuert werden
+- DNS: Alte A-Records (185.181.104.242) von INWX wurden geloescht, nur noch Tunnel-Eintraege
+- NAS hat kein git installiert - entweder Git Server Paket installieren oder wget nutzen
+
+## PWA-Stand 2026-05-21
+- MischLabs wurde als PWA vorbereitet.
+- iOS-relevante Meta-Tags in `index.html`:
+  - `apple-mobile-web-app-capable`
+  - `apple-mobile-web-app-status-bar-style`
+  - `apple-mobile-web-app-title`
+  - `apple-touch-icon`
+- Manifest:
+  - `name`: MischLabs
+  - `display`: standalone
+  - `theme_color`: #10b981
+  - `background_color`: #0a0a0f
+- Icons:
+  - `icons/app-icon-source.png` (1024x1024, quadratischer Ausschnitt aus dem MischLabs-Bild)
+  - `icons/apple-touch-icon-v2.png` (180x180, frischer Dateiname gegen iOS-Icon-Cache)
+  - `icons/apple-touch-icon.png` (180x180, alte Kompatibilitaetskopie)
+  - `icons/icon-192.png` (192x192)
+  - `icons/icon-512.png` (512x512)
+  - `icons/maskable-512.png` (512x512, maskable)
+- Service Worker:
+  - Cache-Name: `mischlabs-pwa-v4`
+  - Cached die App-Shell (`/`, `index.html`, `offline.html`, `style.css?v=10`, `app.js?v=2`, `services.json?v=1`, Manifest und Icons)
+  - Navigationen fallen offline auf `offline.html` zurueck
+- Dockerfile kopiert Manifest, Service Worker und Icons in das Nginx-Image.
+- `nginx.conf` liefert `manifest.webmanifest` mit `application/manifest+json` und `sw.js` mit harten No-Cache-Headern aus.
+
+## Dashboard-v2-Stand 2026-05-21
+- Neues Logo oben nutzt `icons/app-icon-source.png`.
+- Die alte oeffentliche Auth-Kachel wurde auf die Keycloak Account Console umgebogen:
+  `https://auth.mischlabs.de/realms/mischlabs/account`
+- Kategorien:
+  - Zugang: SSO, Drive, Passwords
+  - Medien: Movies, Audiobooks, Books
+  - Arbeit: Git, MiChess
+  - Persoenlich: Tom
+- `app.js` prueft Dienste im Hintergrund per `fetch(..., { mode: "no-cors" })`. Das ist bewusst nur ein Erreichbarkeitsindikator, kein vollwertiges Monitoring.
+
+## Adminseite Stand 2026-05-21
+- URL: `https://mischlabs.de/admin.html`
+- SSO-Client in Keycloak benoetigt:
+  - Client ID: `mischlabs-admin`
+  - Client type: OpenID Connect
+  - Client authentication: Off/Public Client
+  - Standard flow: On
+  - Valid redirect URI: `https://mischlabs.de/admin.html`
+  - Valid post logout redirect URI: `https://mischlabs.de/admin.html`
+  - Web origin: `https://mischlabs.de`
+  - Scopes: `openid email profile`
+- Erlaubter Admin in der statischen UI:
+  - `preferred_username=mrdiderot` oder `email=mail.misch@pm.me`
+- Aktuelle Grenze: Weil mischlabs noch rein statisch ueber Nginx laeuft, kann `/admin.html` globale Aenderungen noch nicht serverseitig speichern. Der Editor speichert lokal im Browser (`localStorage`) und kann eine neue `services.json` exportieren. Fuer echte Live-Aenderungen braucht der naechste Schritt ein kleines Backend oder einen Gitea-Commit-Workflow.
+- Statusdiagnose nutzt Browser-Fetch mit `mode: "no-cors"`. Dadurch erkennt sie Erreichbarkeit/Timeouts, aber bei fremden Subdomains keine echten HTTP-Statuscodes.
+- Wenn der Browser die Pruefung wegen CORS/CORB blockiert (`Failed to fetch`), wird der Dienst **nicht** mehr als offline markiert, sondern als "Nicht im Browser pruefbar". Das betraf z. B. Vaultwarden/`password.mischlabs.de`.
+- Fuer echte Fehlerdetails braucht es ein kleines Backend bzw. einen Statusproxy, der serverseitig `HEAD`/`GET` prueft.
+
+## Statusproxy Stand 2026-05-21
+- `mischlabs` wurde von Nginx auf einen kleinen Node-Server (`server.js`) umgestellt.
+- Der Node-Server serviert die statischen Dateien weiter und stellt `/api/status` bereit.
+- `/api/status` liefert:
+  - Docker-Container via `/var/run/docker.sock`
+  - Watchtower-Logs und letzten Watchtower-Lauf
+  - Speicherplatz fuer `/volume1` und `/volume2`, im Container gemountet als `/host/volume1` und `/host/volume2`
+  - Serverseitige Service-Checks mit HTTP-Status und Latenz
+- NAS-Compose fuer `mischlabs` braucht diese Mounts:
+
+```yaml
+volumes:
+  - /var/run/docker.sock:/var/run/docker.sock
+  - /volume1:/host/volume1:ro
+  - /volume2:/host/volume2:ro
+```
+
+- Aktuelle NAS-Werte bei Planung:
+  - `/volume1`: 3.7T total, 2.5T used, 1.2T free, 68%
+  - `/volume2`: 104G total, 88G used, 12G free, 89%
+  - Watchtower: `Scanned=23`, `Updated=0`, `Failed=0` beim manuellen Lauf um 2026-05-21 14:16 UTC
+
+## Globale KI-Systemeinstellung (WICHTIG!)
+> [!IMPORTANT]
+> **Arbeitsanweisung für alle KI-Systeme (LLM / Agenten):**
+> Nach dem erfolgreichen Abschluss einer Aufgabe oder eines Meilensteins MUSS automatisch ein strukturierter Eintrag in dieser `Brain.md` vorgenommen werden. Dieser Eintrag soll dokumentieren:
+> 1. Welche Änderungen an welchen Dateien vorgenommen wurden (inklusive Begründung).
+> 2. Welche neuen Features, Endpoints oder Design-Anpassungen integriert wurden.
+> 3. Der aktuelle Stand des Deployments und eventuelle offene Punkte oder nächste Schritte.
+> Dies stellt sicher, dass alle nachfolgenden KI-Systeme und der Benutzer stets einen konsistenten, lückenlosen Projektverlauf nachvollziehen können.
+
+## Letzte Änderungen & Meilensteine (Stand: 2026-05-21)
+- **Erweitertes Admin-Tool (Universal Admin Panel):**
+  - **Docker Container Logs Modal:** Integration eines interaktiven, terminal-ähnlichen Log-Overlays in `admin.html` und `admin.js`. Jeder Container auf der Übersicht sowie Watchtower bieten nun einen **Logs**-Button. Logs können dynamisch mit Tiefenbeschränkungen (`50`, `150`, `300`, `500` Zeilen) abgefragt und manuell aktualisiert werden. Backend-Endpunkt: GET `/api/containers/:name/logs`.
+  - **Live Service-Inspektion (`🔍`):** Status-Kacheln der Dienste bieten ein Lupensymbol. Klicks darauf starten eine serverseitige Node-Anfrage (CORS-frei) an die Zieladresse und geben Antwortlatenz, HTTP-Statuscode, vollständige HTTP-Header und eine Vorschau der ersten 1000 Zeichen der Antwort zurück. Backend-Endpunkt: GET `/api/services/inspect`.
+  - **Interaktiver NAS Verzeichnis-Scanner:** Hinzufügen eines Ordnergrößen-Scanners im NAS-Speicher-Panel. Berechnet rekursiv Ordnergrößen für gemountete Volumes (`/host/volume1`, `/host/volume2`), sortiert sie absteigend und erlaubt durch Anklicken von Unterordnern ein direktes Weiterscannen im entsprechenden Pfad. Backend-Endpunkt: GET `/api/disks/scan-folder`.
+- **Premium Design-Branding:**
+  - **Textlogo mit Farbverlauf:** Das "MischLabs"-Textlogo (`.brand h1`) auf dem Dashboard (`index.html`) und im Adminbereich (`admin.html`) erstrahlt nun in einem modernen, dynamischen Farbverlauf von Blau (`#38bdf8`) zu Lila/Flieder (`#c084fc`) unter Verwendung von Text-Maskierungen.
+  - **Cache-Buster-Update:** Cache-Busting-Parameter in den CSS-Verknüpfungen wurden auf `v=26` erhöht, damit der geänderte Farbverlauf sofort ohne manuelles Cache-Leeren im Browser gerendert wird.
+- **Git Deployment & Sync:**
+  - Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (`https://git.mischlabs.de/MrDiderot/mischlabs.git`, Branch `master`) gepusht.
+- **Frontend Optimierung & Mobile Usability (Stand: 2026-05-22):**
+  - **PWA-Kachel Entfernung:** Die ungenutzte "PWA Installierbar"-Statistik-Kachel wurde aus der oberen Übersichtsleiste (`index.html`) entfernt. Das Layout der verbleibenden zwei Kacheln ("Online" & "Dienste") wurde in `style.css` auf ein stabiles, zentriertes 2-Spalten-Raster für Desktop und mobile Ansichten angepasst.
+  - **Kompakte Service-Kategoriefilter:** Die Kategorieauswahl (`.segments`) wurde aus der klebrigen (`sticky`) oberen `.control-bar` herausgelöst und in einem separaten `#categoryFilters`-Bereich direkt über dem Dienste-Grid platziert. Sie verbraucht dadurch im ungescrollten Zustand keinen kostbaren Platz mehr auf Mobilgeräten.
+  - **Visual-Premium Redesign & Untertitel:** Die Filter-Pills wurden verkleinert (Höhe von 36px auf 28px reduziert, kleinere Schriftgröße `0.78rem` und kompakteres Padding), linksbündig ausgerichtet und mit sanften Hover- & Aktiv-Transitions versehen. Zudem wurde der fälschlicherweise hinzugefügte dunkle Hintergrundbalken auf der `.control-bar` vollständig entfernt, um den nahtlosen Backdrop-Blur-Effekt über dem globalen Farbverlauf wiederherzustellen. Der Untertitel der Landing Page wurde von *"Cloud, Medien, Code..."* auf den prägnanten Namen *"Die Selfhost-Werkstatt"* abgeändert.
+  - **Favoriten-Zähler statt Online-Status:** Die "Online"-Statistik-Kachel in der Kopfzeile wurde durch eine dynamische "Favoriten"-Statistik-Kachel ersetzt, um direkt die Anzahl der geladenen Lesezeichen anzuzeigen. Die Reihenfolge wurde auf "Dienste" zuerst und "Favoriten" an zweiter Stelle geändert. Das Erreichbarkeits-Monitoring im Hintergrund läuft weiterhin stabil, um die Status-Punkte der einzelnen Dienste-Karten aktuell zu halten.
+  - **Service Worker API-Bypass & PWA Update:** Der Service-Worker (`sw.js`) ignoriert und reicht nun alle API-Anfragen unter `/api/` (z.B. `/api/favorites`, `/api/status`) direkt an das Netzwerk durch, anstatt sie lokal zu cachen. Dadurch werden neu angelegte Favoriten beim einfachen Navigieren auf das Dashboard sofort und ohne manuelles Strg+F5-Neuladen geladen.
+  - **Automatisches SSO-Login im Admin Panel:** `/admin.html` prüft nun beim Laden, ob bereits eine aktive Sitzung vorliegt. Falls nicht und kein Fehler vorliegt, wird der Benutzer automatisch an den Keycloak SSO Login (`login()`) weitergeleitet. Dadurch entfällt der zusätzliche Anmelde-Klick komplett. Zum Schutz vor unendlichen Weiterleitungsschleifen nach einer Abmeldung wurde eine temporäre Logout-Erkennung via `sessionStorage` implementiert. Der Cache-Buster für `admin.js` wurde in `admin.html` auf `v=29` erhöht.
+  - **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` und `app.js` wurden in `index.html` auf `v=33` bzw. `v=40` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v26` erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.
+- **Header User Badge & Fix CSS Specificity (Stand: 2026-05-22):**
+  - **Behebung des CSS-Spezifitätskonflikts:** Ein globaler CSS-Reset `[hidden] { display: none !important; }` wurde am Anfang von `style.css` hinzugefügt. Zuvor hat die Spezifität von `.ghost-button { display: inline-flex; }` die Standard-Browserregel für das `hidden`-Attribut überschrieben, was dazu führte, dass sowohl der Login- als auch der Logout-Button fälschlicherweise gleichzeitig dauerhaft angezeigt wurden.
+  - **Premium Header-User-Badge:** In der Kopfzeile von `admin.html` wurde ein neues Element `<span class="admin-user-badge" id="headerUserBadge" hidden></span>` implementiert, welches bei einer erfolgreichen Authentifizierung in `admin.js` mit dem Text `"Angemeldet als [Nutzername]"` befüllt und stilvoll eingeblendet wird. Der Badge wurde mit einem eleganten Glassmorphismus, dezenter Randlinie und einem 👤-Emoji modern und hochwertig designt.
+  - **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` wurden in `index.html`, `admin.html` und `favorites.html` auf `v=34` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v27` erhöht, um ein sofortiges Update der App-Shell im Browser aller Anwender zu erzwingen. In `admin.html` wurde der Script-Buster von `admin.js` auf `v=30` erhöht.