Initial commit: Media Server Dashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-11 05:40:27 +02:00
commit 02dec08748
8 changed files with 1239 additions and 0 deletions
@@ -0,0 +1,2 @@
+.DS_Store
+html/disk.json
@@ -0,0 +1,335 @@
+# Media Server Dashboard
+
+Statisches Homelab-Dashboard mit Live-Speicheranzeige für einen gemounteten Pfad (`/downloads`). Die Weboberfläche listet Media-Server-Dienste als Kacheln und zeigt den aktuellen Speicherplatz des Download-Laufwerks an.
+
+## Übersicht
+
+| Komponente | Aufgabe |
+|---|---|
+| **nginx** | Liefert die statische Website (`index.html`) und die Datei `disk.json` aus |
+| **diskinfo** | Liest per `df` den Speicher des gemounteten Pfads und schreibt alle 30 Sekunden `disk.json` |
+| **Browser** | Lädt `disk.json` per Javalescript und aktualisiert die Speicheranzeige |
+
+```
+┌─────────────┐     GET /disk.json      ┌─────────────┐
+│   Browser   │ ◄────────────────────── │    nginx    │
+└─────────────┘                         │  (Port 80)  │
+                                        └──────▲──────┘
+                                               │ liest
+                                        /opt/nginx/html/disk.json
+                                               ▲
+                                               │ schreibt alle 30s
+                                        ┌──────┴──────┐
+                                        │   diskinfo  │
+                                        │   (alpine)  │
+                                        └──────┬──────┘
+                                               │ df -h
+                                        /mnt/ssd → /downloads
+```
+
+## Projektstruktur
+
+```
+.
+├── docker-compose.yml       # Container-Definition (nginx + diskinfo)
+├── html/
+│   ├── index.html           # Dashboard (Apps + Speicheranzeige)
+│   ├── disk.json            # Wird vom diskinfo-Container geschrieben
+│   ├── filebot-media-browser.svg
+│   ├── redirect.html
+│   └── bk_index.htm         # Backup der alten index.html
+└── scripts/
+    └── update-disk.sh       # Speicher auslesen + Endlosschleife
+```
+
+## Voraussetzungen
+
+- Docker und Docker Compose auf dem Host
+- Gemounteter Speicherpfad auf dem Host (Standard: `/mnt/ssd`)
+- Port 80 frei
+
+## Deployment
+
+### 1. Dateien auf den Server kopieren
+
+Auf dem Server liegt das Projekt typischerweise unter `/opt/nginx`:
+
+```bash
+/opt/nginx/
+├── docker-compose.yml
+├── html/
+└── scripts/
+    └── update-disk.sh
+```
+
+Dateien aus diesem Repository dorthin kopieren, z. B. per `git clone`, `rsync` oder `scp`.
+
+Alternativ kann `update-disk.sh` direkt auf dem Server angelegt werden:
+
+```bash
+cat > /opt/nginx/scripts/update-disk.sh << 'EOF'
+#!/bin/sh
+
+MOUNT="/downloads"
+OUTPUT="/html/disk.json"
+
+update_disk() {
+    LINE=$(df -h "$MOUNT" 2>/dev/null | awk 'NR==2')
+    if [ -z "$LINE" ]; then
+        echo "ERROR: df failed for $MOUNT" >&2
+        return 1
+    fi
+
+    TOTAL=$(echo "$LINE" | awk '{print $2}')
+    USED=$(echo "$LINE" | awk '{print $3}')
+    AVAILABLE=$(echo "$LINE" | awk '{print $4}')
+    USE_PERCENT=$(echo "$LINE" | awk '{print $5}')
+
+    cat > "$OUTPUT" <<JSON
+{
+  "total": "$TOTAL",
+  "used": "$USED",
+  "available": "$AVAILABLE",
+  "use_percent": "$USE_PERCENT",
+  "updated_at": "$(date -u +%Y-%m-%dT%H:%M:%SZ)"
+}
+JSON
+
+    echo "disk.json updated: $USE_PERCENT used ($USED / $TOTAL)"
+}
+
+while true; do
+    update_disk || true
+    sleep 30
+done
+EOF
+```
+
+Vorher sicherstellen, dass das Verzeichnis existiert:
+
+```bash
+mkdir -p /opt/nginx/scripts
+```
+
+### 2. Pfade in `docker-compose.yml` anpassen
+
+Im Repository sind relative Pfade (`./html`, `./scripts`) gesetzt. Auf dem Server können absolute Pfade verwendet werden:
+
+```yaml
+services:
+  nginx:
+    volumes:
+      - /opt/nginx/html:/usr/share/nginx/html:ro
+      - /mnt/ssd:/downloads:ro
+
+  diskinfo:
+    volumes:
+      - /mnt/ssd:/downloads:ro
+      - /opt/nginx/html:/html
+      - /opt/nginx/scripts/update-disk.sh:/update-disk.sh:ro
+```
+
+**Wichtig:** Der Host-Pfad `/mnt/ssd` muss auf das Laufwerk zeigen, dessen Speicher angezeigt werden soll. Beide Container mounten ihn als `/downloads` (nur lesend).
+
+### 3. Container starten
+
+```bash
+cd /opt/nginx
+docker compose up -d
+```
+
+### 4. Funktion prüfen
+
+```bash
+# Container-Status
+docker compose ps
+
+# diskinfo-Logs (sollte alle ~30s eine Zeile ausgeben)
+docker compose logs -f diskinfo
+
+# Generierte JSON-Datei
+cat /opt/nginx/html/disk.json
+```
+
+Erwartete Log-Ausgabe:
+
+```
+diskinfo  | disk.json updated: 48% used (213.7G / 468.2G)
+```
+
+Erwarteter Inhalt von `disk.json`:
+
+```json
+{
+  "total": "468.2G",
+  "used": "213.7G",
+  "available": "254.5G",
+  "use_percent": "48%",
+  "updated_at": "2026-06-05T12:08:16Z"
+}
+```
+
+Das Feld `updated_at` dient zur Kontrolle, ob die Datei regelmäßig aktualisiert wird.
+
+## Wie die Speicheranzeige funktioniert
+
+### Backend (`scripts/update-disk.sh`)
+
+1. `df -h /downloads` liefert Belegung des gemounteten Pfads
+2. Werte werden als JSON nach `/html/disk.json` geschrieben
+3. Eine `while true`-Schleife wiederholt das alle 30 Sekunden
+
+Die Schleife liegt **bewusst im Shell-Skript** und nicht in der `docker-compose.yml`. So werden YAML-Parsing-Probleme (z. B. in Portainer) vermieden.
+
+### Frontend (`html/index.html`)
+
+- Beim Laden der Seite: `fetch('/disk.json')`
+- Alle 30 Sekunden: erneuter Abruf per `setInterval`
+- Anzeige: Prozent, Belegt, Frei, Gesamt sowie Fortschrittsbalken
+
+## Docker Compose – Referenz
+
+```yaml
+services:
+  nginx:
+    image: nginx:latest
+    container_name: nginx
+    restart: unless-stopped
+    ports:
+      - 80:80
+    volumes:
+      - ./html:/usr/share/nginx/html:ro
+      - /mnt/ssd:/downloads:ro
+
+  diskinfo:
+    image: alpine:latest
+    container_name: diskinfo
+    restart: unless-stopped
+    volumes:
+      - /mnt/ssd:/downloads:ro
+      - ./html:/html
+      - ./scripts/update-disk.sh:/update-disk.sh:ro
+    command: ["/bin/sh", "/update-disk.sh"]
+```
+
+**Hinweise:**
+
+- Beim `diskinfo`-Service **kein** `entrypoint` setzen
+- `command` als Array: `["/bin/sh", "/update-disk.sh"]`
+- Die `while`-Schleife **nicht** in `command` der Compose-Datei definieren
+
+### Was nicht funktioniert
+
+Diese Variante führt zu Syntaxfehlern, weil YAML/Docker den Befehl an Semikolons zerlegt:
+
+```yaml
+# ❌ Nicht verwenden
+entrypoint: ["/bin/sh", "-c"]
+command: while true; do sh /update-disk.sh; sleep 30; done
+```
+
+Fehler im Log:
+
+```
+diskinfo | true: line 0: syntax error: unexpected end of file (expecting "do")
+```
+
+## Apps anpassen
+
+Die Dienste-Kacheln werden in `html/index.html` im `apps`-Array konfiguriert:
+
+```javascript
+const apps = [
+    { name: "Dockage", port: 5001, icon: "...", color: "#3498db" },
+    { name: "SabNZBd", port: 8080, icon: "...", color: "#3498db" },
+    // ...
+];
+```
+
+| Feld | Beschreibung |
+|---|---|
+| `name` | Anzeigename |
+| `port` | Port auf dem Host (IP = `window.location.hostname`) |
+| `icon` | URL oder Pfad zum Icon |
+| `color` | Kachel-Hintergrundfarbe |
+| `protocol` | Optional: `http` (Standard) oder `https` |
+| `vnc` | Optional: VNC-Badge und Hinweis-Toast |
+| `extra` | Optional: URL-Suffix (z. B. für Krusader VNC) |
+
+Nach Änderungen an `index.html` reicht ein Browser-Reload; kein Container-Neustart nötig.
+
+## Fehlerbehebung
+
+### `diskinfo exited with code 0` (ständig neu startend)
+
+**Ursache:** Alte Version von `update-disk.sh` ohne `while true`-Schleife. Das Skript läuft einmal durch und beendet sich.
+
+**Prüfen:**
+
+```bash
+tail -5 /opt/nginx/scripts/update-disk.sh
+```
+
+Am Ende muss stehen:
+
+```sh
+while true; do
+    update_disk || true
+    sleep 30
+done
+```
+
+**Lösung:** Aktuelles Skript aus diesem Repository nach `/opt/nginx/scripts/update-disk.sh` kopieren (siehe [Deployment](#deployment)) oder per `cat > ... << 'EOF'` direkt auf dem Server anlegen, dann Container neu erstellen:
+
+```bash
+docker compose up -d --force-recreate diskinfo
+```
+
+### `disk.json` bleibt bei 93 Bytes / alte Werte
+
+- Altes JSON-Format ohne `updated_at` → Skript auf dem Server ist veraltet
+- Neues Format ist ca. 130+ Bytes groß
+
+### Speicheranzeige zeigt „Fehler“
+
+```bash
+# Mount im Container prüfen
+docker compose exec diskinfo df -h /downloads
+
+# Schreibrechte prüfen
+docker compose exec diskinfo sh -c 'touch /html/test && rm /html/test && echo OK'
+```
+
+### `diskinfo` zeigt `ERROR: df failed for /downloads`
+
+- Host-Pfad `/mnt/ssd` existiert nicht oder ist nicht gemountet
+- Volume-Mapping in `docker-compose.yml` prüfen
+
+### Nginx liefert `disk.json`, Werte ändern sich aber nicht
+
+1. `docker compose ps diskinfo` → Status muss `Up` sein (nicht `Restarting`)
+2. `docker compose logs diskinfo` → regelmäßige `disk.json updated`-Zeilen
+3. `watch -n 5 cat /opt/nginx/html/disk.json` → `updated_at` muss sich ändern
+
+## Wartung
+
+```bash
+# Container neu starten
+docker compose restart
+
+# Nur diskinfo neu erstellen (nach Skript-Update)
+docker compose up -d --force-recreate diskinfo
+
+# Logs anzeigen
+docker compose logs -f
+
+# Container stoppen
+docker compose down
+```
+
+## Bekannte Einschränkungen
+
+- Die Speicheranzeige bezieht sich auf das **Filesystem des Mounts**, nicht auf den Inhalt eines Unterordners
+- nginx mountet `/downloads` nur lesend; Schreibzugriff erfolgt ausschließlich über `diskinfo` auf `/html`
+- Service-Status (grüner Punkt) nutzt `fetch` mit `no-cors` und kann je nach Browser/Dienst ungenau sein
+- Apple Touch Icons (`apple-touch-icon.png` etc.) sind nicht vorhanden → 404 in den nginx-Logs (harmlos)
@@ -0,0 +1,25 @@
+services:
+  nginx:
+    image: nginx:latest
+    container_name: nginx
+    restart: unless-stopped
+    ports:
+      - 80:80
+    volumes:
+      - ./html:/usr/share/nginx/html:ro
+      - /mnt/ssd:/downloads:ro
+    environment:
+      - NGINX_HOST=example.com
+      - NGINX_PORT=80
+
+  diskinfo:
+    image: alpine:latest
+    container_name: diskinfo
+    restart: unless-stopped
+    volumes:
+      - /mnt/ssd:/downloads:ro
+      - ./html:/html
+      - ./scripts/update-disk.sh:/update-disk.sh:ro
+    command: ["/bin/sh", "/update-disk.sh"]
+
+networks: {}
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Server Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            min-height: 100vh;
+            background: 
+                radial-gradient(ellipse at 20% 0%, rgba(72, 49, 157, 0.4) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 100%, rgba(49, 130, 157, 0.3) 0%, transparent 50%),
+                linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 50%, #16213e 100%);
+            background-attachment: fixed;
+            padding: 2rem;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 3rem;
+            animation: fadeInDown 0.6s ease-out;
+        }
+
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #fff;
+            letter-spacing: -0.5px;
+            text-shadow: 0 4px 30px rgba(100, 140, 255, 0.3);
+        }
+
+        h1 span {
+            background: linear-gradient(90deg, #64b3f4, #c2e59c);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            color: rgba(255, 255, 255, 0.5);
+            font-weight: 300;
+            margin-top: 0.5rem;
+            font-size: 1rem;
+        }
+
+        #appsGrid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .card {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem 1.5rem;
+            border-radius: 20px;
+            text-decoration: none;
+            color: #fff;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+            min-height: 180px;
+            box-shadow: 
+                0 4px 20px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            animation: fadeInUp 0.5s ease-out backwards;
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
+            pointer-events: none;
+        }
+
+        .card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 
+                0 20px 40px rgba(0, 0, 0, 0.4),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+
+        .card:active {
+            transform: translateY(-4px) scale(1.01);
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .status {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 10px currentColor;
+            transition: background 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .status.online {
+            background: #00ff88;
+            box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
+        }
+
+        .status.offline {
+            background: #ff4757;
+            box-shadow: 0 0 15px rgba(255, 71, 87, 0.6);
+        }
+
+        .card img {
+            width: 64px;
+            height: 64px;
+            object-fit: contain;
+            margin-bottom: 1rem;
+            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+            transition: transform 0.3s ease;
+        }
+
+        .card:hover img {
+            transform: scale(1.1);
+        }
+
+        .card h2 {
+            font-size: 1.1rem;
+            font-weight: 500;
+            text-align: center;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .card .port {
+            font-size: 0.75rem;
+            opacity: 0.6;
+            margin-top: 0.3rem;
+            font-weight: 300;
+        }
+
+        .vnc-badge {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            background: rgba(0,0,0,0.4);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.65rem;
+            opacity: 0.7;
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: rgba(0,0,0,0.9);
+            color: #fff;
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            z-index: 1000;
+            opacity: 0;
+            transition: all 0.3s ease;
+            text-align: center;
+            max-width: 90%;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .toast.show {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+        }
+
+        .toast kbd {
+            background: #333;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-family: monospace;
+            margin: 0 2px;
+        }
+
+        @media (max-width: 600px) {
+            body {
+                padding: 1rem;
+            }
+
+            h1 {
+                font-size: 1.8rem;
+            }
+
+            #appsGrid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+            }
+
+            .card {
+                min-height: 150px;
+                padding: 1.5rem 1rem;
+            }
+
+            .card img {
+                width: 48px;
+                height: 48px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Media <span>Server</span></h1>
+        <p class="subtitle">Homelab Dashboard</p>
+    </header>
+
+    <div id="appsGrid"></div>
+    <div class="toast" id="toast"></div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            try {
+                const apps = [
+                    { name: "SabNZBd", port: 8080, icon: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/svg/sabnzbd.svg", color: "#3498db" },
+                    { name: "qBittorrent", port: 8081, icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/New_qBittorrent_Logo.svg/1280px-New_qBittorrent_Logo.svg.png", color: "#1abc9c" },
+                    { name: "jDownloader", port: 8082, icon: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/webp/jdownloader2.webp", color: "#e67e22", vnc: true },
+                    { name: "meTube", port: 8083, icon: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/svg/metube.svg", color: "#8c372f" },
+                    { name: "FileBot", port: 5800, icon: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/svg/filebot.svg", color: "#f39c12" },
+                    { name: "Krusader", port: 6081, icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/User-krusader.svg/3840px-User-krusader.svg.png", color: "#9b59b6", extra: "/vnc.html?resize=remote&host=IP&port=6081&&autoconnect=1", vnc: true },
+                    { name: "HandBrake", port: 7803, icon: "https://upload.wikimedia.org/wikipedia/commons/d/d9/HandBrake_Icon.png", color: "#95a5a6", vnc: true },
+                    { name: "MediaElch", port: 3001, protocol: "https", icon: "https://www.kvibes.de/img/mediaelch/icon.png", color: "#2ecc71", vnc: true },
+                    { name: "Unmanic", port: 8899, protocol: "http", icon: "https://docs.unmanic.app/img/icon.png", color: "#dfcea1" },
+                    { name: "MediaInfo", port: 5810, protocol: "http", icon: "https://upload.wikimedia.org/wikipedia/commons/1/19/MediaInfo_Logo.svg", color: "#dfcea1" }
+                ];
+
+                const ip = window.location.hostname;
+                const grid = document.getElementById("appsGrid");
+
+                apps.forEach((app, index) => {
+                    const protocol = app.protocol || "http";
+                    let url = `${protocol}://${ip}:${app.port}`;
+
+                    if (app.auth) {
+                        const { username, password } = app.auth;
+                        url = `${protocol}://${encodeURIComponent(username)}:${encodeURIComponent(password)}@${ip}:${app.port}`;
+                    }
+
+                    if (app.extra) {
+                        url += app.extra.replace("IP", ip);
+                    } else {
+                        url = url.replace(/\/?$/, "/");
+                    }
+
+                    const card = document.createElement("a");
+                    card.className = "card";
+                    card.target = "_blank";
+                    card.rel = "noreferrer noopener";
+                    card.href = url;
+                    card.style.background = `linear-gradient(145deg, ${app.color}, ${adjustColor(app.color, -30)})`;
+                    card.style.animationDelay = `${index * 0.08}s`;
+
+                    // VNC-Apps: Zeige Hinweis beim Klick
+                    if (app.vnc) {
+                        card.addEventListener("click", () => {
+                            showToast("Falls 'Connecting...' erscheint: <kbd>F5</kbd> oder <kbd>⌘R</kbd> drücken");
+                        });
+                    }
+
+                    card.innerHTML = `
+                        <div class="status" id="status-${app.name}"></div>
+                        ${app.vnc ? '<span class="vnc-badge">VNC</span>' : ''}
+                        <img src="${app.icon}" alt="${app.name} Logo" loading="lazy">
+                        <h2>${app.name}</h2>
+                        <span class="port">:${app.port}</span>
+                    `;
+
+                    grid.appendChild(card);
+
+                    // Status-Check
+                    checkStatus(app, url);
+                });
+            } catch (error) {
+                console.error("Error initializing apps grid:", error);
+            }
+        });
+
+        function adjustColor(hex, amount) {
+            const num = parseInt(hex.replace('#', ''), 16);
+            const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+            const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + amount));
+            const b = Math.min(255, Math.max(0, (num & 0x0000FF) + amount));
+            return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+        }
+
+        function checkStatus(app, url) {
+            const statusEl = document.getElementById(`status-${app.name}`);
+            
+            fetch(url, { method: "HEAD", mode: "no-cors" })
+                .then(() => {
+                    statusEl.classList.add('online');
+                })
+                .catch(() => {
+                    statusEl.classList.add('offline');
+                });
+        }
+
+        function showToast(message) {
+            const toast = document.getElementById("toast");
+            toast.innerHTML = message;
+            toast.classList.add("show");
+            setTimeout(() => toast.classList.remove("show"), 4000);
+        }
+    </script>
+</body>
+</html>
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Filebot Media Browser">
+  <defs>
+    <linearGradient id="fb-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#6366f1"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="url(#fb-grad)"/>
+  <text
+    x="32"
+    y="40"
+    text-anchor="middle"
+    fill="#ffffff"
+    font-family="Outfit, system-ui, -apple-system, sans-serif"
+    font-weight="700"
+    font-size="22"
+  >FB</text>
+</svg>
@@ -0,0 +1,421 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Server Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Outfit', sans-serif;
+            min-height: 100vh;
+            background:
+                radial-gradient(ellipse at 20% 0%, rgba(72, 49, 157, 0.4) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 100%, rgba(49, 130, 157, 0.3) 0%, transparent 50%),
+                linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 50%, #16213e 100%);
+            background-attachment: fixed;
+            padding: 2rem;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 2rem;
+            animation: fadeInDown 0.6s ease-out;
+        }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #fff;
+            letter-spacing: -0.5px;
+            text-shadow: 0 4px 30px rgba(100, 140, 255, 0.3);
+        }
+        h1 span {
+            background: linear-gradient(90deg, #64b3f4, #c2e59c);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .subtitle {
+            color: rgba(255, 255, 255, 0.5);
+            font-weight: 300;
+            margin-top: 0.5rem;
+            font-size: 1rem;
+        }
+        .storage-card {
+            max-width: 700px;
+            margin: 0 auto 2rem auto;
+            padding: 1.2rem 1.4rem;
+            border-radius: 20px;
+            background: rgba(255, 255, 255, 0.06);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            box-shadow:
+                0 4px 20px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.08);
+            animation: fadeInDown 0.8s ease-out;
+        }
+        .storage-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 0.8rem;
+            color: #fff;
+        }
+        .storage-title {
+            font-size: 1rem;
+            font-weight: 500;
+        }
+        .storage-percent {
+            font-size: 1rem;
+            font-weight: 700;
+            color: #c2e59c;
+        }
+        .storage-details {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-top: 0.8rem;
+            color: rgba(255, 255, 255, 0.75);
+            font-size: 0.95rem;
+        }
+        .storage-bar {
+            width: 100%;
+            height: 18px;
+            background: rgba(255, 255, 255, 0.12);
+            border-radius: 999px;
+            overflow: hidden;
+        }
+        .storage-fill {
+            height: 100%;
+            width: 0%;
+            border-radius: 999px;
+            background: linear-gradient(90deg, #64b3f4, #c2e59c);
+            transition: width 0.5s ease;
+        }
+        #appsGrid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .card {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem 1.5rem;
+            border-radius: 20px;
+            text-decoration: none;
+            color: #fff;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+            min-height: 180px;
+            box-shadow:
+                0 4px 20px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            animation: fadeInUp 0.5s ease-out backwards;
+        }
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
+            pointer-events: none;
+        }
+        .card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow:
+                0 20px 40px rgba(0, 0, 0, 0.4),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+        .card:active {
+            transform: translateY(-4px) scale(1.01);
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .status {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 10px currentColor;
+            transition: background 0.3s ease, box-shadow 0.3s ease;
+        }
+        .status.online {
+            background: #00ff88;
+            box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
+        }
+        .status.offline {
+            background: #ff4757;
+            box-shadow: 0 0 15px rgba(255, 71, 87, 0.6);
+        }
+        .card img {
+            width: 64px;
+            height: 64px;
+            object-fit: contain;
+            margin-bottom: 1rem;
+            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+            transition: transform 0.3s ease;
+        }
+        .card:hover img {
+            transform: scale(1.1);
+        }
+        .card h2 {
+            font-size: 1.1rem;
+            font-weight: 500;
+            text-align: center;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        .card .port {
+            font-size: 0.75rem;
+            opacity: 0.6;
+            margin-top: 0.3rem;
+            font-weight: 300;
+        }
+        .vnc-badge {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            background: rgba(0,0,0,0.4);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.65rem;
+            opacity: 0.7;
+        }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: rgba(0,0,0,0.9);
+            color: #fff;
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            z-index: 1000;
+            opacity: 0;
+            transition: all 0.3s ease;
+            text-align: center;
+            max-width: 90%;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .toast.show {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+        }
+        .toast kbd {
+            background: #333;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-family: monospace;
+            margin: 0 2px;
+        }
+        @media (max-width: 600px) {
+            body {
+                padding: 1rem;
+            }
+            h1 {
+                font-size: 1.8rem;
+            }
+            #appsGrid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+            }
+            .card {
+                min-height: 150px;
+                padding: 1.5rem 1rem;
+            }
+            .card img {
+                width: 48px;
+                height: 48px;
+            }
+            .storage-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .storage-details {
+                flex-direction: column;
+                gap: 0.4rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Media <span>Server</span></h1>
+        <p class="subtitle">Homelab Dashboard</p>
+    </header>
+
+    <section class="storage-card">
+        <div class="storage-header">
+            <div class="storage-title">Speicher /downloads</div>
+            <div class="storage-percent" id="storagePercent">Lade...</div>
+        </div>
+        <div class="storage-bar">
+            <div class="storage-fill" id="storageFill"></div>
+        </div>
+        <div class="storage-details">
+            <span id="storageUsed">Belegt: -</span>
+            <span id="storageFree">Frei: -</span>
+            <span id="storageTotal">Gesamt: -</span>
+        </div>
+    </section>
+
+    <div id="appsGrid"></div>
+    <div class="toast" id="toast"></div>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            loadDiskInfo();
+
+            try {
+                const apps = [
+                    { name: "Dockage", port: 5001, icon: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/dockge.svg", color: "#3498db" },
+                    { name: "FileBot Media Browser",port: 8090, icon: "/filebot-media-browser.svg",color: "#6366f1" },           
+                    { name: "SabNZBd", port: 8080, icon: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/svg/sabnzbd.svg", color: "#3498db" },
+                    { name: "qBittorrent", port: 8081, icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/New_qBittorrent_Logo.svg/1280px-New_qBittorrent_Logo.svg.png", color: "#1abc9c" },
+                    { name: "jDownloader", port: 8082, icon: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/webp/jdownloader2.webp", color: "#e67e22", vnc: true },
+                    { name: "meTube", port: 8083, icon: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/svg/metube.svg", color: "#8c372f" },
+                    { name: "FileBot", port: 5800, icon: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/svg/filebot.svg", color: "#f39c12" },
+                    { name: "Krusader", port: 6081, icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/User-krusader.svg/3840px-User-krusader.svg.png", color: "#9b59b6", extra: "/vnc.html?resize=remote&host=IP&port=6081&&autoconnect=1", vnc: true },
+                    { name: "HandBrake", port: 7803, icon: "https://upload.wikimedia.org/wikipedia/commons/d/d9/HandBrake_Icon.png", color: "#95a5a6", vnc: true },
+                    { name: "MakeMKV", port: 5820, icon: "https://user-images.githubusercontent.com/3883521/159073438-fab1ed5b-c1a0-488b-b9d8-5ec60e1270d6.png", color: "#95a5a6", vnc: true },
+                    { name: "MediaElch", port: 3001, protocol: "https", icon: "https://www.kvibes.de/img/mediaelch/icon.png", color: "#2ecc71", vnc: true },
+                    { name: "Unmanic", port: 8899, protocol: "http", icon: "https://docs.unmanic.app/img/icon.png", color: "#dfcea1" },
+                    { name: "MediaInfo", port: 5810, protocol: "http", icon: "https://upload.wikimedia.org/wikipedia/commons/1/19/MediaInfo_Logo.svg", color: "#dfcea1" },
+                    { name: "MKVToolNix", fixedUrl: "http://192.168.30.135:5830/", port: 5830, icon: "https://upload.wikimedia.org/wikipedia/commons/2/21/Mkvmerge256.png", color: "#1a6b3a" }
+                ];
+
+                const ip = window.location.hostname;
+                const grid = document.getElementById("appsGrid");
+
+                apps.forEach((app, index) => {
+                    const protocol = app.protocol || "http";
+                    let url = app.fixedUrl || `${protocol}://${ip}:${app.port}`;
+
+                    if (app.auth) {
+                        const { username, password } = app.auth;
+                        url = `${protocol}://${encodeURIComponent(username)}:${encodeURIComponent(password)}@${ip}:${app.port}`;
+                    }
+
+                    if (app.extra) {
+                        url += app.extra.replace("IP", ip);
+                    } else {
+                        url = url.replace(/\/?$/, "/");
+                    }
+
+                    const card = document.createElement("a");
+                    card.className = "card";
+                    card.target = "_blank";
+                    card.rel = "noreferrer noopener";
+                    card.href = url;
+                    card.style.background = `linear-gradient(145deg, ${app.color}, ${adjustColor(app.color, -30)})`;
+                    card.style.animationDelay = `${index * 0.08}s`;
+
+                    if (app.vnc) {
+                        card.addEventListener("click", () => {
+                            showToast("Falls 'Connecting...' erscheint: <kbd>F5</kbd> oder <kbd>⌘R</kbd> drücken");
+                        });
+                    }
+
+                    card.innerHTML = `
+                        <div class="status" id="status-${app.name}"></div>
+                        ${app.vnc ? '<span class="vnc-badge">VNC</span>' : ''}
+                        <img src="${app.icon}" alt="${app.name} Logo" loading="lazy">
+                        <h2>${app.name}</h2>
+                        <span class="port">:${app.port}</span>
+                    `;
+
+                    grid.appendChild(card);
+                    checkStatus(app, url);
+                });
+            } catch (error) {
+                console.error("Error initializing apps grid:", error);
+            }
+
+            setInterval(loadDiskInfo, 30000);
+        });
+
+        function adjustColor(hex, amount) {
+            const num = parseInt(hex.replace('#', ''), 16);
+            const r = Math.min(255, Math.max(0, (num >> 16) + amount));
+            const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + amount));
+            const b = Math.min(255, Math.max(0, (num & 0x0000FF) + amount));
+            return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+        }
+
+        function checkStatus(app, url) {
+            const statusEl = document.getElementById(`status-${app.name}`);
+
+            fetch(url, { method: "HEAD", mode: "no-cors" })
+                .then(() => {
+                    statusEl.classList.add("online");
+                })
+                .catch(() => {
+                    statusEl.classList.add("offline");
+                });
+        }
+
+        async function loadDiskInfo() {
+            try {
+                const res = await fetch(`/disk.json?_=${Date.now()}`);
+                const data = await res.json();
+
+                const percentValue = parseInt(data.use_percent.replace("%", ""), 10);
+
+                document.getElementById("storagePercent").textContent = data.use_percent;
+                document.getElementById("storageUsed").textContent = `Belegt: ${data.used}`;
+                document.getElementById("storageFree").textContent = `Frei: ${data.available}`;
+                document.getElementById("storageTotal").textContent = `Gesamt: ${data.total}`;
+                document.getElementById("storageFill").style.width = `${percentValue}%`;
+            } catch (e) {
+                document.getElementById("storagePercent").textContent = "Fehler";
+                document.getElementById("storageUsed").textContent = "Belegt: Fehler";
+                document.getElementById("storageFree").textContent = "Frei: Fehler";
+                document.getElementById("storageTotal").textContent = "Gesamt: Fehler";
+            }
+        }
+
+        function showToast(message) {
+            const toast = document.getElementById("toast");
+            toast.innerHTML = message;
+            toast.classList.add("show");
+            setTimeout(() => toast.classList.remove("show"), 4000);
+        }
+    </script>
+</body>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>VNC Viewer</title>
+    <style>
+        * { margin: 0; padding: 0; }
+        html, body { height: 100%; overflow: hidden; background: #1a1a2e; }
+        iframe { width: 100%; height: 100%; border: none; }
+        .loading {
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            color: #fff;
+            font-family: sans-serif;
+            text-align: center;
+        }
+        .spinner {
+            width: 40px; height: 40px;
+            border: 3px solid rgba(255,255,255,0.2);
+            border-top-color: #64b3f4;
+            border-radius: 50%;
+            animation: spin .8s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+    <div class="loading" id="loading">
+        <div class="spinner"></div>
+        <p>Verbinde...</p>
+    </div>
+    <iframe id="vnc" style="display:none;"></iframe>
+    <script>
+        const target = new URLSearchParams(window.location.search).get("url");
+        if (target) {
+            const iframe = document.getElementById("vnc");
+            const loading = document.getElementById("loading");
+            
+            // Lade iframe
+            iframe.src = target;
+            
+            // Nach kurzem Laden: Reload erzwingen und anzeigen
+            setTimeout(() => {
+                iframe.src = iframe.src; // Reload
+                setTimeout(() => {
+                    loading.style.display = "none";
+                    iframe.style.display = "block";
+                }, 500);
+            }, 800);
+        }
+    </script>
+</body>
+</html>
@@ -0,0 +1,34 @@
+#!/bin/sh
+
+MOUNT="/downloads"
+OUTPUT="/html/disk.json"
+
+update_disk() {
+    LINE=$(df -h "$MOUNT" 2>/dev/null | awk 'NR==2')
+    if [ -z "$LINE" ]; then
+        echo "ERROR: df failed for $MOUNT" >&2
+        return 1
+    fi
+
+    TOTAL=$(echo "$LINE" | awk '{print $2}')
+    USED=$(echo "$LINE" | awk '{print $3}')
+    AVAILABLE=$(echo "$LINE" | awk '{print $4}')
+    USE_PERCENT=$(echo "$LINE" | awk '{print $5}')
+
+    cat > "$OUTPUT" <<JSON
+{
+  "total": "$TOTAL",
+  "used": "$USED",
+  "available": "$AVAILABLE",
+  "use_percent": "$USE_PERCENT",
+  "updated_at": "$(date -u +%Y-%m-%dT%H:%M:%SZ)"
+}
+JSON
+
+    echo "disk.json updated: $USE_PERCENT used ($USED / $TOTAL)"
+}
+
+while true; do
+    update_disk || true
+    sleep 30
+done