Add homepage documentation to docs folder

2026-07-01 17:59:59 +02:00
parent a43717f8ce
commit cc52ab9145
5 changed files with 357 additions and 0 deletions
--- a/docs/Brain.md
+++ b/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.
--- a/docs/Mischlabs
+++ b/docs/Mischlabs
@@ -0,0 +1,65 @@
 # 2. Wie ändere ich Dienste, Widgets oder Einstellungen?
 Die gesamte Homepage wird über YAML-Dateien konfiguriert. Du musst dafür keinen Code schreiben oder das Docker-Image neu bauen. Homepage lädt diese Dateien im laufenden Betrieb automatisch neu!
 ---
 ## 1. Dienste verwalten (services.yaml)
 Hier legst du die Kacheln für deine Dienste fest.
 ### Beispiel für einen einfachen Dienst (Öffentlich):
 ```yaml
 - Medien:                       # Dies ist die Kategorie-Überschrift
    - Drive:                    # Name des Dienstes auf der Kachel
        icon: nextcloud.png     # Icon-Name (aus dem Homepage-Iconset)
        href: https://drive.mischlabs.de
        description: Cloud-Speicher
 ```
 ### Beispiel mit Live-Docker-Status (Nur für Admin):
 ```yaml
 - Arbeit:
    - Git:
        icon: gitea.png
        href: https://git.mischlabs.de
        description: Code-Repositories
        server: local           # Verweist auf docker.yaml
        container: gitea        # Exakter Name des Containers auf dem NAS
 ```
 *Tipp: Wenn du `server: local` und `container: [name]` angibst, fragt Homepage den Docker-Status ab und zeigt an, ob der Container läuft (grüner Punkt) oder beendet ist (roter Punkt).*
 *Eine Liste aller unterstützten App-Icons findest du in der [Homepage Dokumentation](https://gethomepage.dev/configs/services/).*
 ---
 ## 2. Einstellungen anpassen (settings.yaml)
 Hier werden grundlegende Einstellungen wie Sprache und Titel definiert:
 ```yaml
 title: MischLabs Admin   # Der Name oben links im Dashboard
 theme: dark              # Standard-Theme (dark oder light)
 language: de             # Sprache für Datumsangaben und Container-Zustände (z.B. "Wird ausgeführt")
 ```
 ---
 ## 3. Widgets verwalten (widgets.yaml)
 Widgets werden ganz oben auf der Seite als schmale Infoleisten oder Suchboxen angezeigt.
 ### Beispiel für Suchleiste + Hardware-Widgets (Admin):
 ```yaml
 - search:
    provider: duckduckgo   # Suchanbieter (google, duckduckgo, etc.)
    focus: true            # Suchbox bei Seitenaufruf fokussieren
 - resources:
    label: NAS Status
    cpu: true
    memory: true
    disk:
      - /host/volume1      # Überwacht Volume 1 des NAS
      - /host/volume2      # Überwacht Volume 2 des NAS
 ```
 ---
 * [[Mischlabs Struktur|Zurück: Struktur]] | [[Mischlabs Anleitung|Zurück zur Übersicht]] | [[Mischlabs Deployment|Weiter zu: Deployment]]
--- a/docs/Mischlabs
+++ b/docs/Mischlabs
@@ -0,0 +1,11 @@
 # Mischlabs Dashboard Anleitung
 Willkommen im Handbuch für dein neues Homepage-Dashboard! 
 Da deine Homepage nun auf **Homepage (gethomepage.dev)** basiert, ist die Verwaltung deutlich einfacher und professioneller geworden. Das System ist in zwei Instanzen aufgeteilt (Öffentlich und Admin).
 Hier findest du die einzelnen Themen als separate Notizen, die dich durch die Verwaltung führen:
 * [[Mischlabs Struktur|1. Struktur der Homepage (Wo liegt was?)]]
 * [[Mischlabs Aendern|2. Wie ändere ich Dienste, Widgets oder Einstellungen?]]
 * [[Mischlabs Deployment|3. Wie werden Änderungen auf das NAS übertragen (Deployment)?]]
--- a/docs/Mischlabs
+++ b/docs/Mischlabs
@@ -0,0 +1,42 @@
 # 3. Wie wird die Seite deployed / aktualisiert?
 Wenn du Änderungen an deinen Config-Dateien (in `config-public` oder `config-admin`) oder an der Compose-Datei vornimmst, müssen diese auf das NAS übertragen werden. 
 Dank des eingerichteten SSH-Schlüssels auf deinem Windows-Rechner kannst du das bequem über die Windows PowerShell erledigen.
 ---
 ## Schritt-für-Schritt-Anleitung
 ### Schritt 1: Lokale Änderungen machen & Git sichern
 1. Bearbeite die Dateien lokal in deinem Git-Repository auf deinem Windows-Rechner (`d:\Vibecoding\Website\mischlabs`).
 2. Öffne ein Terminal in diesem Ordner und sichere deine Änderungen im Git (Gitea):
   ```bash
   git add .
   git commit -m "Beschreibung deiner Änderung"
   git push
   ```
 ---
 ### Schritt 2: Änderungen auf das NAS hochladen (Deployment)
 Du musst die Dateien nicht manuell hochladen. Öffne die **PowerShell** auf deinem Windows-Rechner und führe folgende Befehle aus:
 #### 1. Nur die YAML-Konfigurationen synchronisieren:
 ```powershell
 scp -r -i C:\Users\tommi\.ssh\codex_mischnas_ed25519 d:\Vibecoding\Website\mischlabs\config-public d:\Vibecoding\Website\mischlabs\config-admin MrDiderot@192.168.178.88:/volume2/docker/mischlabs/
 ```
 *Da Homepage Dateiänderungen automatisch überwacht, sind deine Änderungen im Browser **sofort live**! Du musst den Docker-Container bei reinen Inhaltsänderungen nicht neu starten.*
 #### 2. Falls sich die docker-compose.yml geändert hat:
 Wenn du z.B. Ports oder Mount-Pfade änderst, lade die Datei hoch und starte die Container neu:
 ```powershell
 # Compose-Datei hochladen
 scp -i C:\Users\tommi\.ssh\codex_mischnas_ed25519 d:\Vibecoding\Website\mischlabs\docker-compose.yml MrDiderot@192.168.178.88:/volume2/docker/mischlabs/docker-compose.override.yml
 # Container auf dem NAS neu starten
 ssh -i C:\Users\tommi\.ssh\codex_mischnas_ed25519 MrDiderot@192.168.178.88 "cd /volume2/docker/mischlabs && docker compose down mischlabs && docker compose up -d mischlabs mischlabs-admin"
 ```
 ---
 * [[Mischlabs Aendern|Zurück: Dienste ändern]] | [[Mischlabs Anleitung|Zurück zur Übersicht]]
--- a/docs/Mischlabs
+++ b/docs/Mischlabs
@@ -0,0 +1,40 @@
 # 1. Struktur der Homepage
 Deine Homepage besteht aus zwei getrennten Instanzen, um deine privaten Dienste (wie Passwörter oder Gitea) und Server-Statistiken vor der Öffentlichkeit zu schützen.
 ## Verzeichnisstruktur (Lokal & NAS)
 In deinem Projektverzeichnis findest du zwei Hauptordner für die Konfigurationen:
 ```
 mischlabs/
 ├── config-public/         # Konfiguration für die öffentliche Seite (Port 8085)
 │   ├── settings.yaml      # Titel, Theme und Sprache
 │   ├── services.yaml      # Nur öffentliche Dienste (Drive, Movies, etc.)
 │   └── widgets.yaml       # Nur die Suchleiste
 │
 ├── config-admin/          # Konfiguration für die Admin-Seite (Port 8086)
 │   ├── settings.yaml      # Titel, Theme und Sprache
 │   ├── services.yaml      # Alle 9 Dienste mit Docker-Status
 │   ├── widgets.yaml       # Suchleiste + NAS Hardware-Auslastung
 │   └── docker.yaml        # Anbindung an den Docker-Socket
 │
 └── docker-compose.yml     # Container-Konfiguration (Image, Ports, Volumes)
 ```
 ---
 ## Die zwei Instanzen im Detail
 ### 1. Öffentliche Homepage (mischlabs)
 * **Domain:** `https://mischlabs.de` (Port `8085` auf dem NAS)
 * **Sicherheit:** Hat **keinen** Zugriff auf den Docker-Socket oder deine NAS-Verzeichnisgrößen.
 * **Inhalt:** Zeigt nur Services, die einen eigenen Login haben (Nextcloud, Jellyfin, Audiobookshelf, Calibre-Web, Lichess, Tom).
 ### 2. Admin-Homepage (mischlabs-admin)
 * **Domain:** `https://admin.mischlabs.de` (Port `8086` auf dem NAS)
 * **Sicherheit:** Sollte über Cloudflare Access oder VPN geschützt sein.
 * **Inhalt:** Zeigt alle 9 Dienste inkl. Keycloak SSO, Vaultwarden Passwörter und Gitea.
 * **Widgets:** Zeigt live CPU-, RAM- und Festplatten-Auslastung deines NAS an.
 ---
 * [[Mischlabs Anleitung|Zurück zur Übersicht]] | [[Mischlabs Aendern|Weiter zu: Wie ändere ich Dienste oder Einstellungen?]]