Standortauswahl und Multi Logo und Action Button

AGENTS.md

@@ -8,26 +8,58 @@ python app.py
 docker compose up -d
 ```
 
-`python app.py` serves on `http://localhost:5005`. `app.py` runs Flask with `debug=True`, `host="0.0.0.0"`, and `port=5005`.
+`python app.py` (via `.venv/bin/python app.py`) serves on `http://localhost:5005`. `app.py` runs Flask with `debug=True`, `host="0.0.0.0"`, and `port=5005`.
 
 ## Source Of Truth
 
 - Single Flask app in `app.py`; there is no database.
-- Persistent state is `config.json` plus files under `media/<screen>/`.
+- Persistent state is `config.json` plus files under `media/<site>/<screen>/`.
 - `README.md` is stale on the port number; trust `app.py`.
 - Existing repo instructions in this file are the main local guidance; there is no `opencode.json` or workflow config in this repo.
 
+## Multi-Standort-URL-Struktur (seit v4.2.0)
+
+Standorte (sites) sind die oberste Organisationsebene und gruppieren Screens.
+
+| Route | Beschreibung |
+|-------|-------------|
+| `GET /player/<site>/<screen>` | Player für Screen an einem Standort |
+| `GET /admin` | Redirect zum ersten Standort |
+| `GET /admin/<site>` | Admin-Dashboard für einen Standort |
+| `GET /admin/<site>/priority` | Priority-Playlist als separate Seite |
+| `GET /media/<site>/<screen>/<file>` | Medien-Datei ausliefern |
+| `GET /media/priority/<file>` | Priority-Medien (global) |
+| `GET /playlist/<site>/<screen>/hash` | Playlist-Checksumme für Auto-Reload |
+| `GET /willkommen?site=<site>` | Willkommensseite für Standort generieren |
+| `POST /api/customer` | API-Endpunkt (JSON mit "site"-Feld) |
+| `GET /admin/<site>/add-screen?name=<name>` | Neuen Screen anlegen |
+| `POST /admin/<site>/delete-screen/<screen>` | Screen + Medien löschen |
+
 ## Behavior To Preserve
 
-- `GET /player/<screen>` renders the playlist and auto-reloads from `/playlist/<screen>/hash`.
+- `GET /player/<site>/<screen>` renders the playlist and auto-reloads from `/playlist/<site>/<screen>/hash`.
 - `GET /admin` requires login; `config.json.admin` holds the credentials.
 - URL playlist items are stored as dicts like `{"url": "https://...", "zoom": 0.8}` and the zoom value must survive save/reorder flows.
 - `.html` items in `media/` are rendered inline as content, not in an iframe.
 - `config.priority.enabled` makes the priority playlist show on every screen.
-- `POST /api/customer` generates `welcome.html` and inserts it at the front of the lobby playlist.
+- `POST /api/customer` generates `welcome.html` and inserts it at the front of the lobby playlist for the specified site.
+- New standorte can be added by creating `media/<neuer-standort>/<screen>/` directories and optionally adding config to `config.json["sites"][<neuer-standort>]`.
+- Priority playlist (`config.priority`) is global and affects all sites/screens.
+- Willkommensseite (`customer.html`) accepts up to 3 customer names; logos are fetched via OpenAI→Brandfetch and displayed in a flex row.
+- `generate_welcome_html(customer_names, logo_urls)` takes lists for up to 3 customers; logos have equal width (280px) with `max-height: 180px`.
+- `customer_names` are preserved in form fields after POST (via `value`-Attribute).
+- Admin-UI nutzt keyadmin-Design: `brand-surface` (#2b2f36), `nav-surface` (rot #DA002D), Dark Mode per `localStorage("signage-theme")`.
+- Gemeinsame HTML-Bausteine: `_header.html`, `_footer.html`, `_styles.html` (CSS-Variablen `--ccm-*`, Dark Mode, Card-Border-Radius 1rem).
+- `add_customer_to_lobby_playlist` entfernt `welcome.html` sowohl als String als auch als Dict aus der Playlist vor dem Einfügen.
+- `add_screen` legt ein Verzeichnis unter `media/<site>/<screen>/` an und einen Config-Eintrag.
+- `delete_screen` entfernt den Screen aus der Config und löscht das Verzeichnis rekursiv.
+- Custom-URL-Button: pro Screen konfigurierbar (`custom_url` + `custom_url_label` + `custom_url_target`) im Admin-Formular; wird im Player als Button oben links angezeigt und öffnet die URL wahlweise in einem iframe-Overlay mit Zurück-Button (`overlay`) oder per Direkt-Weiterleitung (`redirect`); Player pausiert während das Overlay geöffnet ist.
 
 ## Repo Quirks
 
 - `media/` and media file extensions are gitignored.
 - The app has no configured tests, lint, typecheck, formatter, or CI.
 - Hardcoded secrets exist in tracked files; do not commit new secrets or reshuffle them casually.
+- Wichtige Helper-Funktionen in `app.py`: `load_config()`, `save_config()`, `get_site_list()`, `get_screen_config()`, `is_url()`, `normalize_url()`, `playlist_item_name()`, `playlist_item_enabled()`, `load_priority_files()`, `prio_redirect()`.
+- `welcome.html` wird in `media/<site>/lobby/` gespeichert.
+- `search_customer_logo` in `generate_welcome_page.py` nutzt OpenAI GPT-4 + Brandfetch CDN.

README.md

@@ -1,85 +1,95 @@
-# 📺 CANCOM Simple Signage
+# CANCOM Simple Signage
 
-**CANCOM Simple Signage** ist ein leichtgewichtiges, browserbasiertes Digital-Signage-System auf Basis von **Python + Flask**.
+Browserbasiertes Digital-Signage-System für interne Info-Screens.
-
-Ziel ist eine **einfache, robuste und wartbare Lösung** für interne Info-Screens, ohne die Komplexität klassischer Digital-Signage-Plattformen.
 
 ---
 
-## ✨ Features
+## Features
 
-- ✅ Browser-basierter Player (kein nativer Client erforderlich)
+- Browserbasierter Player (Kiosk-Modus, Chromium, Firefox)
-- ✅ Bilder & Videos (MP4, H.264)
+- Bilder, Videos (MP4/H.264), HTML-Seiten, URL-Playlist-Einträge
-- ✅ Pro Screen eine eigene Playlist
+- **Multi-Standort**: Standorte (sites) gruppieren Screens
-- ✅ Drag-&-Drop-Reihenfolge im Admin-Portal
+- **Priority-Playlist**: globale Inhalte wirken auf alle Player
-- ✅ Automatischer Player-Reload bei Änderungen
+- **Willkommensseite**: bis zu 3 Kundenlogos via OpenAI + Brandfetch
-- ✅ Upload & Löschen von Medien
+- Pro Screen eigene Playlist mit Drag-&-Drop-Reihenfolge
-- ✅ Screen-Status (aktiv / leer)
+- Auto-Reload bei Playlist-Änderungen
-- ✅ CI-konformes Admin-UI (CANCOM)
+- Newsticker pro Screen
-- ✅ Läuft lokal, in VMs oder auf Proxmox
+- **Custom-URL-Button**: pro Screen konfigurierbarer Aktions-Button oben links im Player (öffnet URL in iframe-Overlay mit Zurück-Button oder per Direkt-Weiterleitung)
+- Dark Mode (localStorage-persistiert)
+- CI-konformes Admin-UI (CANCOM-Design: `brand-surface`, `nav-surface` rot)
 
 ---
 
-## 🧱 Architektur
+## Architektur
 
 ```
 Browser (Player)
       │
       ▼
 Flask App (Server)
-├── Admin UI
+├── Admin UI        /admin/<site>
-├── Player UI
+├── Player UI       /player/<site>/<screen>
+├── Priority-Seite  /admin/<site>/priority
 ├── config.json
-└── media/
+├── media/
-    └── <screen-name>/
+│   ├── <site>/
-        ├── bild.jpg
+│   │   ├── <screen>/
-        └── video.mp4
+│   │   │   ├── bild.jpg
+│   │   │   ├── video.mp4
+│   │   │   └── welcome.html
+│   └── priority/
+└── generate_welcome_page.py
 ```
 
 - **Server:** Python 3 + Flask  
-- **Player:** Jeder moderne Browser (Chrome, Edge, Firefox, Kiosk-Modus)  
+- **Player:** Jeder moderne Browser (Chrome Kiosk, Edge, Firefox)  
 - **State:** `config.json` + Dateisystem  
-- **Frontend:** Tabler + SortableJS (CDN)
+- **Frontend:** Tabler Core + Tabler Icons + SortableJS (CDN)
 
 ---
 
-## 📂 Projektstruktur
+## Projektstruktur
 
 ```
 signage/
-├── app.py
+├── app.py                          # Flask-App (alle Routen)
-├── config.json
+├── generate_welcome_page.py        # Logo-Suche + Willkommensseite-Generierung
+├── config.json                     # Persistente Konfiguration
 ├── media/
-│   ├── lobby/
+│   ├── <site>/
-│   └── meetingroom/
+│   │   ├── lobby/
+│   │   ├── casino/
+│   │   └── videosysteme/
+│   └── priority/
 ├── templates/
-│   ├── admin.html
+│   ├── admin.html                  # Admin-Dashboard (Übersicht)
-│   ├── player.html
+│   ├── priority.html               # Priority-Playlist (eigene Seite)
-│   └── login.html
+│   ├── customer.html               # Willkommensseite-Formular
+│   ├── player.html                 # Player-Ansicht
+│   ├── login.html
+│   ├── _header.html                # Gemeinsamer Header
+│   ├── _footer.html                # Gemeinsamer Footer
+│   └── _styles.html                # Zentrale CSS (Variablen, Dark Mode)
 ├── static/
-└── README.md
+│   ├── cancom.svg
+│   └── wallpaper.png
+└── AGENTS.md
 ```
 
 ---
 
-## 🚀 Installation
+## Installation
 
 ### Voraussetzungen
 
 - Python ≥ 3.9
 - pip
-- ffmpeg
+- ffmpeg (optional, für Videokonvertierung)
-
-```bash
-sudo apt install python3 python3-pip ffmpeg
-```
 
 ### Setup
 
 ```bash
-git clone <repository-url>
+pip install flask flask-login werkzeug openai
-cd signage
-pip install flask flask-login werkzeug
 ```
 
 ### Starten
@@ -88,72 +98,134 @@ pip install flask flask-login werkzeug
 python app.py
 ```
 
-Server läuft auf:
+Server läuft auf `http://localhost:5005`.
 
-```
+### Docker
-http://localhost:5005
+
+```bash
+docker compose up -d
 ```
 
 ---
 
-## 🛠️ Betrieb
+## Routen
+
+| Route | Beschreibung |
+|-------|-------------|
+| `GET /` | 404 – kein Root-Endpunkt |
+| `GET /login` | Admin-Login |
+| `GET /logout` | Ausloggen |
+| `GET /admin` | Redirect zum ersten konfigurierten Standort |
+| `GET /admin/<site>` | Admin-Dashboard für einen Standort |
+| `GET /admin/<site>/priority` | Priority-Playlist (separate Seite) |
+| `GET /admin/<site>/update/<screen>` | Screen-Einstellungen speichern (POST) |
+| `GET /admin/<site>/upload/<screen>` | Medien hochladen (POST) |
+| `GET /admin/<site>/add-url/<screen>` | URL zur Playlist hinzufügen (POST) |
+| `GET /admin/<site>/delete/<screen>/<filename>` | Datei löschen (POST) |
+| `GET /admin/<site>/playlist/<screen>` | Playlist-Reihenfolge speichern (POST JSON) |
+| `GET /player/<site>/<screen>` | Player-Ansicht |
+| `GET /playlist/<site>/<screen>/hash` | Playlist-Checksumme (für Auto-Reload) |
+| `GET /willkommen?site=<site>` | Willkommensseite-Formular (GET + POST) |
+| `POST /api/customer` | API-Endpunkt für Willkommensseite (JSON) |
+| `GET /media/<site>/<screen>/<file>` | Medien-Datei ausliefern |
+| `GET /media/priority/<file>` | Priority-Medien (global) |
 
 ### Admin-Portal
 
 ```
-/admin
+http://localhost:5005/admin/<standort>
 ```
 
 - Screens konfigurieren
 - Medien hochladen / löschen
 - Playlist per Drag & Drop sortieren
+- Priority-Playlist verwalten
+- Willkommensseite generieren (bis zu 3 Kundenlogos)
+- Custom-URL-Aktionsbutton pro Screen konfigurieren (iframe-Overlay oder Weiterleitung)
 
-### Player-URLs
+### Player-URL
 
 ```
-/player/<screen-name>
+http://localhost:5005/player/<standort>/<screen>
 ```
 
 Beispiel:
+```
+http://localhost:5005/player/stuttgart/lobby
+```
+
+### Willkommensseite
 
 ```
-http://server:5000/player/lobby
+http://localhost:5005/willkommen?site=stuttgart
+```
+
+Maximal 3 Kunden eingeben → Logos werden via OpenAI + Brandfetch gesucht → `welcome.html` wird in der Lobby-Playlist vorne eingefügt.
+
+---
+
+## Konfiguration (`config.json`)
+
+```json
+{
+  "admin": { "username": "...", "password": "..." },
+  "sites": {
+    "stuttgart": {
+      "screens": {
+        "lobby": { "playlist": [...], "interval": 10 },
+        "casino": { "playlist": [...], "interval": 15 }
+      }
+    }
+  },
+  "priority": {
+    "enabled": true,
+    "playlist": [...]
+  }
+}
 ```
 
 ---
 
-## 🔄 Automatischer Reload
+## Helper-Funktionen (`app.py`)
 
-Der Player aktualisiert sich selbst, wenn:
+- `load_config()` / `save_config()` – JSON lesen/schreiben
-
+- `get_site_list(cfg)` – alle Standorte sortiert
-- Medien hinzugefügt oder gelöscht werden
+- `get_screen_config(cfg, site, screen)` – Screen-Konfiguration mit Defaults
-- Playlist-Reihenfolge geändert wird
+- `is_url(item)` – prüft ob Item eine URL ist
-- Screen-Einstellungen angepasst werden
+- `normalize_url(item)` – normalisiert URL-Item zu `{"url", "zoom"}`
+- `playlist_item_name(item)` – Name aus String oder Dict extrahieren
+- `playlist_item_enabled(item)` – Enabled-Status prüfen
+- `load_priority_files()` – Priority-Playlist + Dateien laden
+- `prio_redirect(site)` – Redirect-Pfad zur Priority-Seite
 
 ---
 
-## ⚠️ Git & Medien
+## Dark Mode
 
-> **Dieses Repository ist für Code gedacht, nicht für Medien.**
+Wird über `localStorage("signage-theme")` persistiert. Umschalt-Button im Header. CSS-Variablen `--ccm-*` in `_styles.html`.
-
-Empfohlene `.gitignore`:
-
-```gitignore
-media/
-*.mp4
-*.mov
-*.jpg
-*.jpeg
-*.png
-```
 
 ---
 
-## 🎞️ Video-Empfehlungen
+## Sicherheit
 
-- Format: MP4
+- Admin-Bereich per Flask-Login geschützt
-- Codec: H.264
+- Player-Seiten Read-Only
-- Auflösung: max. 1920x1080
+- Externe Nutzung via Reverse Proxy + TLS empfohlen
+
+---
+
+## Git & Medien
+
+> Das Repository ist für Code gedacht, nicht für Medien.
+
+`media/` und Medien-Dateiendungen sind in `.gitignore` ausgeschlossen.
+
+---
+
+## Video-Empfehlungen
+
+- Format: MP4 (H.264)
+- Auflösung: max. 1920×1080
 
 ```bash
 ffmpeg -i input.mov -c:v libx264 -pix_fmt yuv420p -movflags +faststart output.mp4
@@ -161,25 +233,6 @@ ffmpeg -i input.mov -c:v libx264 -pix_fmt yuv420p -movflags +faststart output.mp
 
 ---
 
-## 🔐 Sicherheit
+## Maintainer
 
-- Admin-Bereich per Login geschützt
+**CANCOM Simple Signage** – Interne Lösung, nicht für externe Weitergabe bestimmt.
-- Player-Seiten Read-Only
-- Externe Nutzung via Reverse Proxy + TLS empfohlen
-
----
-
-## 🧭 Roadmap
-
-- Zeitsteuerung pro Playlist-Eintrag
-- Vorschau im Admin-Portal
-- Mehrere Admin-User
-- SQLite statt config.json
-- Docker-Compose Setup
-
----
-
-## 👤 Maintainer
-
-**CANCOM Simple Signage**  
-Interne Lösung – nicht für externe Weitergabe bestimmt.

app.py

@@ -26,7 +26,7 @@ BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 MEDIA_DIR = os.path.join(BASE_DIR, "media")
 CONFIG_FILE = os.path.join(BASE_DIR, "config.json")
 
-APP_VERSION = "4.1.1"
+APP_VERSION = "5.1.0"
 UPLOAD_EXTENSIONS = {".jpg", ".jpeg", ".png", ".mp4"}
 
 app = Flask(__name__)
@@ -40,7 +40,7 @@ login_manager.login_view = "login"
 # -------------------------------------------------
 def load_config():
     if not os.path.exists(CONFIG_FILE):
-        return {"admin": {}, "screens": {}}
+        return {"admin": {}, "sites": {}}
     with open(CONFIG_FILE) as f:
         return json.load(f)
 
@@ -48,38 +48,117 @@ def save_config(cfg):
     with open(CONFIG_FILE, "w") as f:
         json.dump(cfg, f, indent=2)
         f.flush()
-        os.fsync(f.fileno())
-    print("✅ config.json gespeichert")
 
 
-def is_url(value):
+def get_site_list(cfg):
-    """Check if value is a URL (string or dict with 'url' key)"""
+    return sorted(cfg.get("sites", {}).keys())
-    if isinstance(value, str):
-        return value.lower().startswith(("http://", "https://"))
-    if isinstance(value, dict) and "url" in value:
-        url = value.get("url", "")
-        return isinstance(url, str) and url.lower().startswith(("http://", "https://"))
-    return False
 
-def normalize_url(value):
+
-    """Convert URL string to dict with zoom factor, or return existing dict"""
+def get_screen_config(cfg, site, screen):
-    if isinstance(value, dict) and "url" in value:
+    return (
-        return value
+        cfg
-    if isinstance(value, str) and value.lower().startswith(("http://", "https://")):
+        .setdefault("sites", {})
-        return {"url": value, "zoom": 1.0}
+        .setdefault(site, {})
+        .setdefault("screens", {})
+        .setdefault(screen, {})
+    )
+
+
+def is_url(item):
+    if isinstance(item, str):
+        return item.startswith("http://") or item.startswith("https://")
+    return isinstance(item, dict) and "url" in item
+
+
+def normalize_url(item):
+    if isinstance(item, str):
+        return {"url": item, "zoom": 1.0}
+    if isinstance(item, dict):
+        return {"url": item["url"], "zoom": item.get("zoom", 1.0)}
     return None
 
 
-def playlist_item_enabled(item):
-    return not (isinstance(item, dict) and item.get("enabled") is False)
-
-
 def playlist_item_name(item):
-    if isinstance(item, dict):
+    if isinstance(item, str):
-        return item.get("url") or item.get("name")
         return item
+    if isinstance(item, dict):
+        return item.get("url") or item.get("name", "")
+    return ""
 
 
+def playlist_item_enabled(item):
+    if isinstance(item, (str,)):
+        return True
+    if isinstance(item, dict):
+        return item.get("enabled", True)
+    return True
+
+
+# -------------------------------------------------
+# Priority-Helper
+# -------------------------------------------------
+def load_priority_files():
+    cfg = load_config()
+    prio_dir = os.path.join(MEDIA_DIR, "priority")
+    os.makedirs(prio_dir, exist_ok=True)
+
+    priority_files = []
+    prio_playlist = cfg.get("priority", {}).get("playlist", [])
+
+    for item in prio_playlist:
+        item_name = playlist_item_name(item)
+        if is_url(item):
+            url_data = normalize_url(item)
+            if url_data:
+                priority_files.append({
+                    "name": url_data["url"],
+                    "type": "url",
+                    "size": "URL",
+                    "zoom": url_data.get("zoom", 1.0),
+                    "enabled": playlist_item_enabled(item)
+                })
+            continue
+
+        file_path = os.path.join(prio_dir, item_name)
+        if not os.path.exists(file_path):
+            continue
+
+        ext = os.path.splitext(item_name)[1].lower()
+        ftype = "video" if ext == ".mp4" else "image"
+        size = os.path.getsize(file_path) // 1024
+
+        priority_files.append({
+            "name": item_name,
+            "type": ftype,
+            "size": size,
+            "enabled": playlist_item_enabled(item)
+        })
+
+    playlist_names = {playlist_item_name(item) for item in prio_playlist}
+    for f in sorted(os.listdir(prio_dir)):
+        if f in playlist_names or f.startswith("._"):
+            continue
+
+        file_path = os.path.join(prio_dir, f)
+        ext = os.path.splitext(f)[1].lower()
+        ftype = "video" if ext == ".mp4" else "image"
+        size = os.path.getsize(file_path) // 1024
+
+        priority_files.append({
+            "name": f,
+            "type": ftype,
+            "size": size
+        })
+
+    return priority_files
+
+
+def prio_redirect(site):
+    return f"/admin/{site}/priority"
+
+
+# -------------------------------------------------
+# User & Login
 # -------------------------------------------------
 # Auth / Benutzer
 # -------------------------------------------------
@@ -117,34 +196,62 @@ def logout():
 # -------------------------------------------------
 # Customer / Willkommensseite
 # -------------------------------------------------
+@app.route("/willkommen", methods=["GET", "POST"])
 @app.route("/customer", methods=["GET", "POST"])
 # @login_required
 def add_customer():
     """Add new customer with logo search and welcome page"""
     error = None
     success = None
-    logo_url = None
+    logo_urls = [None, None, None]
+    customer_names = ["", "", ""]
+    site = request.args.get("site") or request.form.get("site") or ""
+
+    # Default to first site if not specified
+    if not site:
+        config = load_config()
+        sites = get_site_list(config)
+        site = sites[0] if sites else ""
 
     if request.method == "POST":
-        customer_name = request.form.get("customer_name", "").strip()
+        customer_names = [
-        print(f"🔍 APP.PY - Suche nach Kunde: '{customer_name}'")
+            request.form.get("customer_name_1", "").strip(),
-        if not customer_name:
+            request.form.get("customer_name_2", "").strip(),
-            error = "Kundenname erforderlich"
+            request.form.get("customer_name_3", "").strip(),
+        ]
+        filled_names = [n for n in customer_names if n]
+
+        print(f"🔍 APP.PY - Suche nach Kunden: {filled_names} (site: {site})")
+
+        if not filled_names:
+            error = "Mindestens ein Kundenname erforderlich"
+        elif not site:
+            error = "Kein Standort ausgewählt"
         else:
             try:
-                # Search for logo
+                found_logos = []
-                logo_url = generate_welcome_page.search_customer_logo(customer_name)
+                for name in filled_names:
+                    logo = generate_welcome_page.search_customer_logo(name)
+                    found_logos.append(logo)
 
-                if not logo_url:
+                valid = [(n, l) for n, l in zip(filled_names, found_logos) if l]
-                    error = "Logo konnte nicht gefunden werden"
+
+                if not valid:
+                    error = "Kein Logo konnte gefunden werden"
                 else:
-                    # Generate and save welcome page
+                    valid_names = [n for n, l in valid]
-                    html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url)
+                    valid_urls = [l for n, l in valid]
+                    for i, name in enumerate(customer_names):
+                        for j, (vn, vu) in enumerate(zip(valid_names, valid_urls)):
+                            if vn == name:
+                                logo_urls[i] = vu
+                                break
+
+                    html_filename = generate_welcome_page.save_welcome_page(valid_names, valid_urls, site=site)
 
                     if html_filename:
-                        # Add to lobby playlist
+                        if generate_welcome_page.add_customer_to_lobby_playlist(html_filename, site=site):
-                        if generate_welcome_page.add_customer_to_lobby_playlist(html_filename):
+                            success = f"✅ Willkommensseite mit {len(valid_names)} Kunden erstellt!"
-                            success = f"✅ Kunde '{customer_name}' erfolgreich hinzugefügt!"
                         else:
                             error = "Fehler beim Hinzufügen zur Playliste"
                     else:
@@ -154,7 +261,21 @@ def add_customer():
             except Exception as e:
                 error = f"Fehler: {str(e)}"
 
-    return render_template("customer.html", error=error, success=success, logo_url=logo_url)
+    config = load_config()
+    site_list = get_site_list(config)
+    return render_template(
+        "customer.html",
+        error=error,
+        success=success,
+        logo_urls=logo_urls,
+        customer_names=customer_names,
+        site=site,
+        site_list=site_list,
+        current_site=site,
+        version=APP_VERSION,
+        year=datetime.now().year,
+        hostname=os.uname().nodename
+    )
 
 @app.route("/api/customer", methods=["POST"])
 # @login_required
@@ -163,29 +284,37 @@ def api_add_customer():
     try:
         data = request.get_json()
         customer_name = data.get("customer_name", "").strip()
+        site = data.get("site", "").strip()
 
         if not customer_name:
             return jsonify({"error": "Customer name required"}), 400
 
-        # Search for logo
+        # Default to first site
+        if not site:
+            config = load_config()
+            sites = get_site_list(config)
+            site = sites[0] if sites else ""
+
+        if not site:
+            return jsonify({"error": "No site configured"}), 400
+
         logo_url = generate_welcome_page.search_customer_logo(customer_name)
 
         if not logo_url:
             return jsonify({"error": "Logo not found"}), 400
 
-        # Generate and save welcome page
+        html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url, site=site)
-        html_filename = generate_welcome_page.save_welcome_page(customer_name, logo_url)
 
         if not html_filename:
             return jsonify({"error": "Failed to create welcome page"}), 500
 
-        # Add to lobby playlist
+        if generate_welcome_page.add_customer_to_lobby_playlist(html_filename, site=site):
-        if generate_welcome_page.add_customer_to_lobby_playlist(html_filename):
             return jsonify({
                 "success": True,
                 "message": f"Customer '{customer_name}' added successfully",
                 "welcome_page": html_filename,
-                "logo_url": logo_url
+                "logo_url": logo_url,
+                "site": site
             }), 201
         else:
             return jsonify({"error": "Failed to add to playlist"}), 500
@@ -198,25 +327,36 @@ def api_add_customer():
 # -------------------------------------------------
 # Medien ausliefern
 # -------------------------------------------------
-@app.route("/media/<screen>/<path:filename>")
+@app.route("/media/priority/<path:filename>")
-def media(screen, filename):
+def media_priority(filename):
-    path = os.path.join(MEDIA_DIR, screen)
+    path = os.path.join(MEDIA_DIR, "priority")
+    return send_from_directory(path, filename)
+
+@app.route("/media/<site>/<screen>/<path:filename>")
+def media(site, screen, filename):
+    path = os.path.join(MEDIA_DIR, site, screen)
     return send_from_directory(path, filename)
 
 # -------------------------------------------------
 # Player
 # -------------------------------------------------
 
-@app.route("/player/<screen>")
+@app.route("/player/<site>/<screen>")
-def player(screen):
+def player(site, screen):
     config = load_config()
-    screens_cfg = config.setdefault("screens", {})
+    sites_cfg = config.setdefault("sites", {})
+    site_cfg = sites_cfg.get(site)
+
+    if not site_cfg:
+        abort(404)
+
+    screens_cfg = site_cfg.setdefault("screens", {})
     screen_cfg = screens_cfg.get(screen)
 
     if not screen_cfg:
         abort(404)
 
-    folder = os.path.join(MEDIA_DIR, screen)
+    folder = os.path.join(MEDIA_DIR, site, screen)
     playlist = screen_cfg.get("playlist", [])
 
     show_images = screen_cfg.get("show_images", True)
@@ -267,7 +407,6 @@ def player(screen):
 
     # ------------------------------
     # Priority-Playlist (global)
-    # WICHTIG: IMMER definieren!
     # ------------------------------
     priority_cfg = config.get("priority", {})
 
@@ -291,26 +430,30 @@ def player(screen):
 
     return render_template(
         "player.html",
+        site=site,
         screen=screen,
         normal_files=[item for item in normal_files if item.get("enabled", True)],
         prio_files=[item for item in prio_files if item.get("enabled", True)],
         interval=screen_cfg.get("interval", 10),
         newsticker_text=screen_cfg.get("newsticker_text", ""),
-        newsticker_enabled=screen_cfg.get("newsticker_enabled", False)
+        newsticker_enabled=screen_cfg.get("newsticker_enabled", False),
+        custom_url=screen_cfg.get("custom_url", ""),
+        custom_url_label=screen_cfg.get("custom_url_label", ""),
+        custom_url_enabled=screen_cfg.get("custom_url_enabled", False),
+        custom_url_target=screen_cfg.get("custom_url_target", "overlay")
     )
 
 
 # -------------------------------------------------
 # Hash für automatisches Player-Reload
 # -------------------------------------------------
-@app.route("/playlist/<screen>/hash")
+@app.route("/playlist/<site>/<screen>/hash")
-def playlist_hash(screen):
+def playlist_hash(site, screen):
     config = load_config()
 
-    # ✅ Globaler Hash über ALLE relevanten Daten
     relevant = {
-        "screens": {
+        "sites": {
-            screen: config["screens"].get(screen, {})
+            site: config.get("sites", {}).get(site, {})
         },
         "priority": config.get("priority", {})
     }
@@ -325,33 +468,66 @@ def playlist_hash(screen):
 
 @app.route("/admin")
 @login_required
-def admin():
+def admin_redirect():
+    """Redirect to first available site"""
+    cfg = load_config()
+    sites = get_site_list(cfg)
+    if sites:
+        return redirect(f"/admin/{sites[0]}")
+    return "<h1>Kein Standort konfiguriert</h1><p>Bitte lege einen Standort im media-Verzeichnis an.</p>", 200
+
+
+@app.route("/admin/<site>")
+@login_required
+def admin(site):
     cfg = load_config()
 
+    site_list = get_site_list(cfg)
+
+    # Validate site exists
+    if site not in site_list:
+        # Create default site config if filesystem dir exists but no config
+        if os.path.isdir(os.path.join(MEDIA_DIR, site)):
+            cfg.setdefault("sites", {})[site] = {"screens": {}}
+            save_config(cfg)
+            site_list = get_site_list(cfg)
+        else:
+            abort(404)
+
+    current_site = site
     screens = {}
     media_files = {}
     screen_status = {}
 
-    for screen in os.listdir(MEDIA_DIR):
+    site_media_base = os.path.join(MEDIA_DIR, current_site)
-        if screen == "priority":
-            continue   # ✅ kein echter Screen
 
-        path = os.path.join(MEDIA_DIR, screen)
+    # Discover screens: from config + filesystem
-        if not os.path.isdir(path):
+    known_screens = set()
-            continue
+    site_cfg = cfg.setdefault("sites", {}).setdefault(current_site, {"screens": {}})
+    config_screens = site_cfg.setdefault("screens", {})
+
+    # Merge with filesystem directories
+    if os.path.isdir(site_media_base):
+        for entry in os.listdir(site_media_base):
+            entry_path = os.path.join(site_media_base, entry)
+            if os.path.isdir(entry_path) and not entry.startswith("._"):
+                known_screens.add(entry)
+
+    # Add screens from config that might not have a directory yet
+    for s in config_screens:
+        known_screens.add(s)
+
+    for screen_name in sorted(known_screens):
+        path = os.path.join(site_media_base, screen_name)
+        os.makedirs(path, exist_ok=True)
 
         files = []
-        screen_cfg = cfg.setdefault("screens", {}).setdefault(screen, {
+        screen_cfg = get_screen_config(cfg, current_site, screen_name)
-            "interval": 10,
-            "show_images": True,
-            "show_videos": True,
-            "playlist": []
-        })
         playlist = screen_cfg.get("playlist", [])
         screen_cfg["newsticker_text"] = screen_cfg.get("newsticker_text", "")
         screen_cfg["newsticker_enabled"] = screen_cfg.get("newsticker_enabled", False)
 
-        # 1️⃣ Playlist-Reihenfolge
+        # 1 Playlist-Reihenfolge
         for item in playlist:
             item_name = playlist_item_name(item)
 
@@ -388,7 +564,7 @@ def admin():
                 "enabled": playlist_item_enabled(item)
             })
 
-        # 2️⃣ Neue Dateien anhängen (nicht in Playlist)
+        # 2 Neue Dateien anhängen
         playlist_names = {playlist_item_name(item) for item in playlist}
         for f in sorted(os.listdir(path)):
             if f in playlist_names or f.startswith("._"):
@@ -405,72 +581,40 @@ def admin():
                 "size": size
             })
 
-        screens[screen] = screen_cfg
+        screens[screen_name] = screen_cfg
-        media_files[screen] = files
+        media_files[screen_name] = files
-        screen_status[screen] = "active" if files else "empty"
+        screen_status[screen_name] = "active" if files else "empty"
-
-    
-    # --- PRIORITY EXTENSION: Admin ---
-    prio_dir = os.path.join(MEDIA_DIR, "priority")
-    os.makedirs(prio_dir, exist_ok=True)
-
-    priority_files = []
-    prio_playlist = cfg["priority"].get("playlist", [])
-
-    # 1️⃣ Playlist-Reihenfolge
-    for item in prio_playlist:
-        item_name = playlist_item_name(item)
-        if is_url(item):
-            url_data = normalize_url(item)
-            if url_data:
-                priority_files.append({
-                    "name": url_data["url"],
-                    "type": "url",
-                    "size": "URL",
-                    "zoom": url_data.get("zoom", 1.0),
-                    "enabled": playlist_item_enabled(item)
-            })
-            continue
-
-        file_path = os.path.join(prio_dir, item_name)
-        if not os.path.exists(file_path):
-            continue
-
-        ext = os.path.splitext(item_name)[1].lower()
-        ftype = "video" if ext == ".mp4" else "image"
-        size = os.path.getsize(file_path) // 1024
-
-        priority_files.append({
-            "name": item_name,
-            "type": ftype,
-            "size": size,
-            "enabled": playlist_item_enabled(item)
-        })
-
-    # 2️⃣ Neue Dateien anhängen (nicht in Playlist)
-    for f in sorted(os.listdir(prio_dir)):
-        if f in prio_playlist or f.startswith("._"):
-            continue
-
-        file_path = os.path.join(prio_dir, f)
-        ext = os.path.splitext(f)[1].lower()
-        ftype = "video" if ext == ".mp4" else "image"
-        size = os.path.getsize(file_path) // 1024
-
-        priority_files.append({
-            "name": f,
-            "type": ftype,
-            "size": size
-            })
-
 
     return render_template(
         "admin.html",
+        site_list=site_list,
+        current_site=current_site,
         screens=screens,
         media_files=media_files,
         screen_status=screen_status,
         version=APP_VERSION,
         year=datetime.now().year,
+        hostname=os.uname().nodename
+    )
+
+
+# -------------------------------------------------
+# Admin: Priority-Playlist (separate Seite)
+# -------------------------------------------------
+@app.route("/admin/<site>/priority")
+@login_required
+def admin_priority(site):
+    cfg = load_config()
+    site_list = sorted(cfg.get("sites", {}).keys())
+
+    priority_files = load_priority_files()
+
+    return render_template(
+        "priority.html",
+        site_list=site_list,
+        current_site=site,
+        version=APP_VERSION,
+        year=datetime.now().year,
         hostname=os.uname().nodename,
         priority_files=priority_files
     )
@@ -479,57 +623,105 @@ def admin():
 # -------------------------------------------------
 # Admin: Screen-Einstellungen speichern
 # -------------------------------------------------
-@app.route("/admin/update/<screen>", methods=["POST"])
+@app.route("/admin/<site>/update/<screen>", methods=["POST"])
 @login_required
-def update_screen(screen):
+def update_screen(site, screen):
     config = load_config()
-    cfg = config.setdefault("screens", {}).setdefault(screen, {
+    cfg = get_screen_config(config, site, screen)
-        "interval": 10,
-        "show_images": True,
-        "show_videos": True,
-        "playlist": []
-    })
 
-    cfg["interval"] = int(request.form.get("interval", 10))
+    cfg["interval"] = int(request.form.get("interval") or 10)
     cfg["show_images"] = "show_images" in request.form
     cfg["show_videos"] = "show_videos" in request.form
     cfg["newsticker_text"] = request.form.get("newsticker_text", "")
     cfg["newsticker_enabled"] = "newsticker_enabled" in request.form
+    cfg["custom_url"] = request.form.get("custom_url", "").strip()
+    cfg["custom_url_label"] = request.form.get("custom_url_label", "").strip()
+    cfg["custom_url_enabled"] = "custom_url_enabled" in request.form
+    cfg["custom_url_target"] = request.form.get("custom_url_target", "overlay")
 
     save_config(config)
-    return redirect("/admin")
+    return redirect(f"/admin/{site}")
+
+
+# -------------------------------------------------
+# Admin: Screen löschen
+# -------------------------------------------------
+@app.route("/admin/<site>/delete-screen/<screen>", methods=["POST"])
+@login_required
+def delete_screen(site, screen):
+    config = load_config()
+
+    # Aus config.json entfernen
+    screens_cfg = config.get("sites", {}).get(site, {}).get("screens", {})
+    screens_cfg.pop(screen, None)
+    save_config(config)
+
+    # Medien-Verzeichnis löschen
+    screen_dir = os.path.join(MEDIA_DIR, site, screen)
+    if os.path.isdir(screen_dir):
+        import shutil
+        shutil.rmtree(screen_dir)
+
+    return redirect(f"/admin/{site}")
+
+
+# -------------------------------------------------
+# Admin: Neuen Screen anlegen
+# -------------------------------------------------
+@app.route("/admin/<site>/add-screen", methods=["GET"])
+@login_required
+def add_screen(site):
+    screen_name = request.args.get("name", "").strip().lower()
+    if not screen_name:
+        return redirect(f"/admin/{site}")
+
+    config = load_config()
+
+    os.makedirs(os.path.join(MEDIA_DIR, site, screen_name), exist_ok=True)
+
+    screens_cfg = config.setdefault("sites", {}).setdefault(site, {}).setdefault("screens", {})
+    if screen_name not in screens_cfg:
+        screens_cfg[screen_name] = {"playlist": [], "interval": 10, "show_images": True, "show_videos": True}
+
+    save_config(config)
+    return redirect(f"/admin/{site}#screen-{screen_name}")
+
 
 # -------------------------------------------------
 # Admin: Upload
 # -------------------------------------------------
-@app.route("/admin/upload/<screen>", methods=["POST"])
+@app.route("/admin/<site>/upload/<screen>", methods=["POST"])
 @login_required
-def upload(screen):
+def upload(site, screen):
     file = request.files.get("file")
     if not file:
-        return redirect("/admin")
+        return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
 
     ext = os.path.splitext(file.filename)[1].lower()
     if ext not in UPLOAD_EXTENSIONS:
         return "Ungültiger Dateityp", 400
 
     filename = secure_filename(file.filename)
-    file.save(os.path.join(MEDIA_DIR, screen, filename))
 
-    return redirect("/admin")
+    if screen == "priority":
+        file.save(os.path.join(MEDIA_DIR, "priority", filename))
+    else:
+        file.save(os.path.join(MEDIA_DIR, site, screen, filename))
+
+    return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
 
 
 # -------------------------------------------------
 # Admin: URL hinzufügen
 # -------------------------------------------------
-@app.route("/admin/add-url/<screen>", methods=["POST"])
+@app.route("/admin/<site>/add-url/<screen>", methods=["POST"])
 @login_required
-def add_url(screen):
+def add_url(site, screen):
     url = request.form.get("url", "").strip()
     zoom = request.form.get("zoom", "1.0").strip()
 
     if not is_url(url):
-        return redirect("/admin")
+        return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
 
     try:
         zoom_factor = float(zoom)
@@ -538,83 +730,73 @@ def add_url(screen):
     except (ValueError, TypeError):
         zoom_factor = 1.0
 
-    # Store as object with zoom factor
     url_data = {"url": url, "zoom": zoom_factor}
 
     config = load_config()
     if screen == "priority":
         config.setdefault("priority", {}).setdefault("playlist", []).append(url_data)
     else:
-        screen_cfg = config.setdefault("screens", {}).setdefault(screen, {
+        cfg = get_screen_config(config, site, screen)
-            "interval": 10,
+        cfg.setdefault("playlist", []).append(url_data)
-            "show_images": True,
-            "show_videos": True,
-            "playlist": []
-        })
-        screen_cfg.setdefault("playlist", []).append(url_data)
 
     save_config(config)
-    return redirect("/admin")
+    return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
 
 
 # -------------------------------------------------
 # Admin: Datei löschen
 # -------------------------------------------------
 
-@app.route("/admin/delete/<screen>/<path:filename>", methods=["POST"])
+@app.route("/admin/<site>/delete/<screen>/<path:filename>", methods=["POST"])
 @login_required
-def delete_file(screen, filename):
+def delete_file(site, screen, filename):
     cfg = load_config()
 
-    # Datei löschen
-    path = os.path.join(MEDIA_DIR, screen, filename)
-    if os.path.exists(path):
-        os.remove(path)
-
-    # --- Playlist bereinigen ---
     if screen == "priority":
+        path = os.path.join(MEDIA_DIR, "priority", filename)
         playlist = cfg.get("priority", {}).get("playlist", [])
-        # Remove both string URLs and dict-based URLs
         playlist[:] = [item for item in playlist if not (
             (isinstance(item, str) and item == filename) or
             (isinstance(item, dict) and item.get("url") == filename)
         )]
     else:
-        playlist = cfg["screens"].get(screen, {}).get("playlist", [])
+        path = os.path.join(MEDIA_DIR, site, screen, filename)
-        # Remove both string URLs and dict-based URLs
+        screens_cfg = cfg.get("sites", {}).get(site, {}).get("screens", {})
+        playlist = screens_cfg.get(screen, {}).get("playlist", [])
         playlist[:] = [item for item in playlist if not (
             (isinstance(item, str) and item == filename) or
             (isinstance(item, dict) and item.get("url") == filename)
         )]
 
+    if os.path.exists(path):
+        os.remove(path)
+
     save_config(cfg)
-    return redirect("/admin")
+    return redirect(prio_redirect(site) if screen == "priority" else f"/admin/{site}")
 
 
 # -------------------------------------------------
 # Admin: Playlist speichern
 # -------------------------------------------------
 
-@app.route("/admin/playlist/<screen>", methods=["POST"])
+@app.route("/admin/<site>/playlist/<screen>", methods=["POST"])
 @login_required
-def save_playlist(screen):
+def save_playlist(site, screen):
     cfg = load_config()
     data = request.get_json()
-    new_order = data["playlist"]  # List of filenames/URLs as strings
+    new_order = data["playlist"]
     enabled_map = data.get("enabled", {})
 
-    # Get the current playlist with all data (including zoom factors)
     if screen == "priority":
         old_playlist = cfg.get("priority", {}).get("playlist", [])
     else:
-        old_playlist = cfg.get("screens", {}).get(screen, {}).get("playlist", [])
+        screens_cfg = cfg.get("sites", {}).get(site, {}).get("screens", {})
+        old_playlist = screens_cfg.get(screen, {}).get("playlist", [])
 
-    # Create a mapping: filename/url -> full item (preserves zoom factor)
     item_map = {}
     for item in old_playlist:
         item_map[playlist_item_name(item)] = item
 
-    # Build new playlist: use the mapping to preserve zoom factors
     new_playlist = []
     for key in new_order:
         if key in item_map:
@@ -627,7 +809,7 @@ def save_playlist(screen):
     if screen == "priority":
         cfg.setdefault("priority", {})["playlist"] = new_playlist
     else:
-        cfg.setdefault("screens", {}).setdefault(screen, {})["playlist"] = new_playlist
+        cfg.setdefault("sites", {}).setdefault(site, {}).setdefault("screens", {}).setdefault(screen, {})["playlist"] = new_playlist
 
     save_config(cfg)
     return "", 204

config.json

@@ -9,6 +9,8 @@
       }
     ]
   },
+  "sites": {
+    "stuttgart": {
       "screens": {
         "lobby": {
           "interval": 10,
@@ -16,10 +18,6 @@
           "show_videos": false,
           "playlist": [
             "welcome.html",
-        {
-          "name": "welcome.html",
-          "enabled": true
-        },
             {
               "url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
               "zoom": 1.0,
@@ -27,20 +25,20 @@
             },
             {
               "name": "Cancom_Leitsatz.JPG",
-          "enabled": false
+              "enabled": true
             },
             {
               "url": "http://localhost:5005/static/heise.html",
               "zoom": 0.9,
               "enabled": false
-        },
-        {
-          "name": "heise.html",
-          "enabled": false
             }
           ],
           "newsticker_text": "Herzlich Willkommen bei der CANCOM - wir begr\u00fc\u00dfen unsere G\u00e4ste und w\u00fcnschen Ihnen einen angenehmen Tag! !",
-      "newsticker_enabled": true
+          "newsticker_enabled": true,
+          "custom_url": "https://dva-stage.cancom-ds.de/voice-agent",
+          "custom_url_label": "Welcome Agent",
+          "custom_url_enabled": true,
+          "custom_url_target": "redirect"
         },
         "casino": {
           "interval": 15,
@@ -58,7 +56,10 @@
             }
           ],
           "newsticker_text": "Herzlich willkommen bei der CANCOM - wir w\u00fcnschen ihnen einen sch\u00f6nen Tag",
-      "newsticker_enabled": true
+          "newsticker_enabled": true,
+          "custom_url": "https://www.meteoblue.com/en/meteotv/d7b0fd",
+          "custom_url_label": "Wetter",
+          "custom_url_enabled": false
         },
         "videosysteme": {
           "interval": 20,
@@ -68,9 +69,32 @@
           "newsticker_text": "Hallo dies ist ein Test f\u00fcr Michael",
           "newsticker_enabled": false
         }
+      }
+    },
+    "karlsruhe": {
+      "screens": {
+        "lobby": {
+          "playlist": [
+            "welcome.html"
+          ],
+          "interval": 10,
+          "show_images": false,
+          "show_videos": false,
+          "newsticker_text": "Herzlich Willkommen bei der CANCOM - wir begr\u00fc\u00dfen unsere G\u00e4ste und w\u00fcnschen Ihnen einen angenehmen Tag!",
+          "newsticker_enabled": true
+        }
+      }
+    }
   },
   "admin": {
     "username": "admin",
     "password": "cancom@2026!"
+  },
+  "screens": {
+    "lobby": {
+      "playlist": [
+        "welcome.html"
+      ]
+    }
   }
 }

generate_welcome_page.py

@@ -6,9 +6,8 @@ from openai import OpenAI
 # Customer / Willkommensseite
 # -------------------------------------------------
 
-WELCOME_DIR = os.path.join(os.path.dirname(__file__), "media", "lobby")
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-
+MEDIA_DIR = os.path.join(BASE_DIR, "media")
-os.makedirs(WELCOME_DIR, exist_ok=True)
 
 WELCOME_FILENAME = "welcome.html"
 
@@ -73,129 +72,82 @@ def search_customer_logo(customer_name):
         return None
 
 
-def generate_welcome_html(customer_name, logo_url):
+def generate_welcome_html(customer_names, logo_urls, site="stuttgart"):
-    print(f"✅ Generate - Willkommensseite wird generiert für: {customer_name} mit Logo: {logo_url}")
+    site_display = site.capitalize()
-    """Generate a welcome page HTML with full-screen design"""
+    names_str = ", ".join(customer_names) if customer_names else "Unbekannt"
-    # CANCOM SVG logo inline
+    print(f"✅ Generate - Willkommensseite wird generiert für: {names_str} (site: {site})")
+    site_display = site.capitalize()
     cancom_svg = '''<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xcs="https://www.xtool.com/pages/software" version="1.1" preserveAspectRatio="xMinYMin meet" width="61.682394106284505mm" height="9.909010347638684mm" viewBox="136.55880294685778 209.2954948261807 61.682394106284505 9.909010347638684" xcs:version="2.7.22"><style></style><path transform="matrix(0.158038,0,0,0.158038,133.2558,163.322122)" stroke="none" fill="currentColor" data-view-type="laser" d="M125.9,352.1h18.9L119,291.7h-16.2l-25,60.4h18.2l14.6-38.9L125.9,352.1z M323.6,322     c0,8.8-6.1,16.4-15.4,16.4c-9.1,0-15.4-7.6-15.4-16.4s6.1-16.4,15.2-16.4C317,305.6,323.6,313.4,323.6,322 M340.5,322.3     c0-17.4-13.4-31.3-32.3-31.3c-18.7,0-32.3,14.1-32.3,31.3c0,17.4,13.4,31.3,32.3,31.3C326.9,353.6,340.5,339.4,340.5,322.3      M230.4,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.2,0-31.6,14.1-31.6,31.3     c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C236.5,338.4,230.4,331.4,230.4,322.5      M38,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.4,0-31.8,14.1-31.8,31.3     c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C44,338.4,38,331.4,38,322.5      M191.8,352.1h14.4v-59.8H190v33.1l-25-33.1h-15.4v60.1h16.2v-34.1L191.8,352.1z M411.2,352.1v-59.8h-17.7l-14.4,23.2l-14.4-23.2     h-17.7v60.1h16.4V318l15.4,23.2h0.3l15.4-23.5v34.6L411.2,352.1L411.2,352.1z" fill-rule="nonzero"></path></svg>'''
 
+    logo_html = ""
+    for i, (name, url) in enumerate(zip(customer_names, logo_urls)):
+        if url:
+            logo_html += f'''
+            <div class="customer-logo-item">
+                <img src="{url}" alt="{name}" class="customer-logo" crossorigin="anonymous">
+            </div>'''
+
     html_content = f"""<!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Willkommen bei CANCOM</title>
-
-    <!-- Tabler CSS -->
     <link rel="stylesheet"
         href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
-    <!-- Tabler JS -->
     <script defer
         src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js">
     </script>
-
     <style>
-        * {{
+        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }}
         body {{
-            width: 100vw;
+            width: 100vw; height: 100vh; overflow: hidden;
-            height: 100vh;
-            overflow: hidden;
             font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
-            background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
+            display: flex; align-items: center; justify-content: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             background-image: url("/static/wallpaper.png");
-            background-repeat: no-repeat;
+            background-repeat: no-repeat; background-size: cover;
-            background-size: cover;
         }}
         .screen {{
-            width: 100%;
+            width: 100%; height: 100%; position: relative;
-            height: 100%;
+            display: flex; flex-direction: column;
-            position: relative;
+            align-items: flex-end; justify-content: space-between;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            justify-content: space-between;
             padding: 60px;
-            background-size: cover;
-            background-position: center left;
-            background-repeat: no-repeat;
         }}
         .logo-section {{
-            display: flex;
+            display: flex; flex-direction: column;
-            flex-direction: column;
+            align-items: flex-end; gap: 10px; z-index: 10;
-            align-items: flex-end;
-            gap: 10px;
-            z-index: 10;
         }}
         .cancom-logo {{
-            width: 235px;
+            width: 235px; height: auto; color: #DA002D;
-            height: auto;
-            color: #DA002D;
             object-fit: contain;
             filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
         }}
         .meets {{
-            font-size: 2.5rem;
+            font-size: 2.5rem; font-weight: 400; color: #000;
-            font-weight: 400;
+            margin-top: -8px; margin-bottom: 10px; letter-spacing: 1px;
-            color: #000;
+        }}
-            margin-top: -8px;
+        .customer-logos {{
-            margin-bottom: 10px;
+            display: flex; flex-direction: row;
-            letter-spacing: 1px;
+            align-items: center; justify-content: flex-end;
+            gap: 48px; max-width: 100%;
+        }}
+        .customer-logo-item {{
+            flex: 0 0 280px;
+            display: flex; align-items: center; justify-content: center;
+            min-height: 100px;
         }}
         .customer-logo {{
-            max-width: 300px;
+            width: 100%; height: auto;
             max-height: 180px;
-            width: auto;
-            height: auto;
-            object-fit: contain;
-            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
-            margin-top: 18px;
-        }}
-        .customer-logo {{
-            max-width: 300px;
-            max-height: 180px;
-            width: auto;
-            height: auto;
             object-fit: contain;
             filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
         }}
         .content {{
-            text-align: right;
+            text-align: right; z-index: 10;
-            z-index: 10;
-            display: flex;
-            flex-direction: column;
-            gap: 30px;
-        }}
-        .headline {{
-            font-size: 4.5rem;
-            font-weight: 300;
-            letter-spacing: 2px;
-            line-height: 1.2;
-            color: #000;
-            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
-        }}
-        .headline .red {{
-            color: #DA002D;
-            font-weight: 700;
-        }}
-        .meets {{
-            font-size: 2.5rem;
-            font-weight: 400;
-            color: #000;
-            margin-bottom: 40px;
-            letter-spacing: 1px;
         }}
         .welcome-block {{
-            font-size: 4rem;
+            font-size: 4rem; font-weight: 700;
-            font-weight: 700;
+            line-height: 1.3; color: #000;
-            line-height: 1.3;
-            color: #000;
             text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
         }}
     </style>
@@ -205,13 +157,15 @@ def generate_welcome_html(customer_name, logo_url):
         <div class="logo-section">
             <div class="cancom-logo">{cancom_svg}</div>
             <div class="meets">meets</div>
-            {f'<img src="{logo_url}" alt="Kundenlogo" class="customer-logo" crossorigin="anonymous">' if logo_url else ''}
+            <div class="customer-logos">
+                {logo_html}
+            </div>
         </div>
         <div class="content">
             <div class="welcome-block">
                 Herzlich <span style="color: #DA002D;">Willkommen</span><br>
                 <span style="color: #DA002D;">in</span> unserer<br>
-                Niederlassung <span style="color: #DA002D;">Stuttgart!</span>
+                Niederlassung <span style="color: #DA002D;">{site_display}!</span>
             </div>
         </div>
     </div>
@@ -220,42 +174,51 @@ def generate_welcome_html(customer_name, logo_url):
     return html_content
 
 
-def save_welcome_page(customer_name, logo_url):
+def save_welcome_page(customer_names, logo_urls, site="stuttgart"):
     """Save welcome page and return filename"""
     try:
-        filepath = os.path.join(os.path.abspath(WELCOME_DIR), WELCOME_FILENAME)
+        welcome_dir = os.path.join(MEDIA_DIR, site, "lobby")
-        html_content = generate_welcome_html(customer_name, logo_url)
+        os.makedirs(welcome_dir, exist_ok=True)
+        filepath = os.path.join(os.path.abspath(welcome_dir), WELCOME_FILENAME)
+        html_content = generate_welcome_html(customer_names, logo_urls, site=site)
 
         with open(filepath, "w", encoding="utf-8") as f:
             f.write(html_content)
         if os.path.getsize(filepath) == 0:
             raise IOError("File not written")
-        print(f"✅ Generate - Willkommensseite generiert für: {customer_name}")
+        names_str = ", ".join(customer_names)
+        print(f"✅ Generate - Willkommensseite generiert für: {names_str} (site: {site})")
         print(f"✅ Generate - Willkommensseite gespeichert in: {filepath}")
-        print(f"✅ Generate - Willkommensseite gespeichert: {WELCOME_FILENAME}")
         return WELCOME_FILENAME
     except Exception as e:
         print(f"❌ Error saving welcome page: {e}")
         return None
 
 
-def add_customer_to_lobby_playlist(html_filename):
+def add_customer_to_lobby_playlist(html_filename, site="stuttgart"):
-    """Add customer welcome page to lobby playlist"""
+    """Add customer welcome page to lobby playlist for a specific site"""
     try:
         # Import here to avoid circular imports
         from app import load_config, save_config
 
         config = load_config()
-        screens = config.setdefault("screens", {})
+        sites_cfg = config.setdefault("sites", {})
+        site_cfg = sites_cfg.setdefault(site, {"screens": {}})
+        screens = site_cfg.setdefault("screens", {})
         lobby = screens.setdefault("lobby", {})
         playlist = lobby.setdefault("playlist", [])
 
         full_filename = f"{html_filename}" 
-        if full_filename in playlist:
+        playlist[:] = [
-            playlist.remove(full_filename)
+            item for item in playlist
+            if not (
+                (isinstance(item, str) and item == full_filename) or
+                (isinstance(item, dict) and item.get("name") == full_filename)
+            )
+        ]
         playlist.insert(0, full_filename)
         save_config(config)
-        print(f"✅ Generate - Willkommensseite in Lobby-Playliste platziert")
+        print(f"✅ Generate - Willkommensseite in Lobby-Playliste platziert (site: {site})")
         return True
     except Exception as e:
         print(f"❌ Generate - Error adding to playlist: {e}")

templates/_footer.html

@@ -0,0 +1,12 @@
+<!-- Footer -->
+<footer class="app-footer">
+  <div class="app-footer-inner">
+    <span>Autor Erik Thiele</span>
+    <span class="app-footer-separator">|</span>
+    <span>&copy; {{ year }} CANCOM GmbH</span>
+    <span class="app-footer-separator">|</span>
+    <span>Version {{ version }}</span>
+    <span class="app-footer-separator">|</span>
+    <span>Host {{ hostname }}</span>
+  </div>
+</footer>

templates/_header.html

@@ -0,0 +1,33 @@
+<!-- Header -->
+<header class="navbar navbar-expand-md d-print-none brand-surface">
+  <div class="container-xl">
+    <div class="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
+      <img class="navbar-brand-logo me-3" src="{{ url_for('static', filename='cancom.svg') }}" alt="CANCOM Logo">
+      <span class="navbar-brand-wordmark">
+        <strong>Simple Signage</strong>
+        <span>{{ brand_subtitle }}</span>
+      </span>
+    </div>
+    <div class="navbar-nav flex-row order-md-last top-actions">
+      <div class="dropdown me-2">
+        <a class="btn btn-outline-secondary" href="#" data-bs-toggle="dropdown">
+          <i class="ti ti-building me-1"></i>{{ current_site | capitalize }} <i class="ti ti-chevron-down"></i>
+        </a>
+        <div class="dropdown-menu">
+          {% for s in site_list %}
+            <a class="dropdown-item{% if s == current_site %} active{% endif %}"
+               href="{{ site_dropdown_url_prefix }}{{ s }}">{{ s | capitalize }}</a>
+          {% endfor %}
+        </div>
+      </div>
+      <div>
+        <button class="btn btn-outline-secondary theme-toggle" id="theme-toggle" title="Dark Mode umschalten">
+          <i class="ti ti-moon"></i>
+        </button>
+      </div>
+      <div class="ms-2">
+        <a href="/logout" class="btn btn-outline-secondary"><i class="ti ti-logout me-1"></i>Abmelden</a>
+      </div>
+    </div>
+  </div>
+</header>

templates/_styles.html

@@ -0,0 +1,239 @@
+<style>
+  :root {
+    --ccm-bg: #f4f6f8;
+    --ccm-text: #212121;
+    --ccm-primary: #da002d;
+    --ccm-primary-hover: #b00024;
+    --ccm-header: #2b2f36;
+    --ccm-surface: #ffffff;
+    --ccm-border: #d9dee3;
+    --ccm-muted: #6b7280;
+  }
+
+  [data-bs-theme="dark"] {
+    --ccm-bg: #15181d;
+    --ccm-text: #e5e7eb;
+    --ccm-header: #0f1720;
+    --ccm-surface: #15181d;
+    --ccm-border: #2b3440;
+    --ccm-muted: #9aa4b2;
+  }
+
+  html { font-size: 16px; }
+
+  body {
+    background-color: var(--ccm-bg);
+    color: var(--ccm-text);
+    font-family: "Segoe UI", Arial, sans-serif;
+  }
+
+  h1, h2, h3, h4, h5, h6,
+  .card-title,
+  .navbar-brand-wordmark strong {
+    font-weight: 600;
+  }
+
+  .navbar-brand-wordmark {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.1;
+    font-size: 0.92rem;
+  }
+
+  .navbar-brand-logo {
+    height: 1.85rem;
+    width: auto;
+    display: block;
+  }
+
+  .brand-surface {
+    background-color: var(--ccm-header);
+    margin-bottom: 0;
+    border-bottom: 0;
+    box-shadow: none;
+  }
+
+  .brand-surface,
+  .brand-surface .navbar-brand-wordmark,
+  .brand-surface .navbar-brand-wordmark strong,
+  .brand-surface .navbar-brand-wordmark span,
+  .brand-surface .btn:not(.btn-primary) {
+    color: #ffffff;
+  }
+
+  .top-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .top-actions .btn {
+    white-space: nowrap;
+  }
+
+  .theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .nav-surface {
+    background-color: var(--ccm-primary);
+    margin-top: 0;
+    border-top: 0;
+    box-shadow: none;
+  }
+
+  .nav-surface .btn-white {
+    color: var(--ccm-primary);
+    border-color: rgba(255, 255, 255, 0.9);
+    background: #ffffff;
+  }
+
+  .nav-surface .btn-white:hover,
+  .nav-surface .btn-white:focus {
+    background-color: #e9ecef;
+    border-color: #e9ecef;
+    color: var(--ccm-primary-hover);
+  }
+
+  .nav-surface .btn.active {
+    background-color: #ffffff;
+    border-color: #ffffff;
+    color: var(--ccm-primary-hover);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
+  }
+
+  .nav-surface .ti {
+    font-size: 1rem;
+    vertical-align: -2px;
+  }
+
+  .app-footer {
+    margin-top: 1rem;
+    padding: 0.65rem 1.5rem 0.95rem;
+    color: var(--ccm-muted);
+    font-size: 0.82rem;
+    background: transparent;
+  }
+
+  .app-footer-inner {
+    width: 100%;
+    max-width: 1320px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.2rem 0.75rem;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .card {
+    --tblr-card-border-radius: 1rem;
+    --tblr-card-inner-border-radius: 1rem;
+    border: 1px solid var(--ccm-border);
+    border-radius: 1rem;
+  }
+
+  .app-footer-separator {
+    color: #b0b7c3;
+    display: none;
+  }
+
+  .card-header {
+    background-color: #eeeeee;
+    border-left: 6px solid var(--ccm-primary);
+    padding-left: 1rem;
+    font-weight: 600;
+  }
+
+  .btn.btn-primary {
+    --tblr-btn-bg: var(--ccm-primary);
+    --tblr-btn-hover-bg: var(--ccm-primary-hover);
+    --tblr-btn-border-color: var(--ccm-primary);
+    --tblr-btn-hover-border-color: var(--ccm-primary-hover);
+  }
+
+  .form-check-input:checked {
+    background-color: var(--ccm-primary);
+    border-color: var(--ccm-primary);
+  }
+
+  .form-check-input:focus {
+    box-shadow: 0 0 0 0.2rem rgba(218, 0, 45, 0.25);
+  }
+
+  .dropdown-item.active,
+  .dropdown-item:active {
+    background-color: var(--ccm-primary);
+    color: #ffffff;
+  }
+
+  [data-bs-theme="dark"] body {
+    background-color: var(--ccm-bg);
+    color: var(--ccm-text);
+  }
+
+  [data-bs-theme="dark"] .card,
+  [data-bs-theme="dark"] .dropdown-menu {
+    background-color: var(--ccm-bg);
+    color: var(--ccm-text);
+    border-color: var(--ccm-border);
+  }
+
+  [data-bs-theme="dark"] .card-header {
+    background-color: #1a1e24;
+    border-color: var(--ccm-border);
+  }
+
+  [data-bs-theme="dark"] .form-control,
+  [data-bs-theme="dark"] .form-select {
+    background-color: #11161d;
+    color: var(--ccm-text);
+    border-color: var(--ccm-border);
+  }
+
+  [data-bs-theme="dark"] .form-control::placeholder {
+    color: var(--ccm-muted);
+  }
+
+  [data-bs-theme="dark"] .text-muted {
+    color: var(--ccm-muted) !important;
+  }
+
+  [data-bs-theme="dark"] .list-group-item {
+    background-color: var(--ccm-bg);
+    color: var(--ccm-text);
+    border-color: var(--ccm-border);
+  }
+
+  [data-bs-theme="dark"] .table > :not(caption) > * > * {
+    border-color: var(--ccm-border);
+    color: var(--ccm-text);
+  }
+
+  [data-bs-theme="dark"] .page-subtitle {
+    color: var(--ccm-muted);
+  }
+
+  [data-bs-theme="dark"] .alert-secondary {
+    background-color: #1a1e24;
+    color: var(--ccm-text);
+    border-color: var(--ccm-border);
+  }
+
+  [data-bs-theme="dark"] .alert-success {
+    background-color: #0d2b1d;
+    color: #a3d9b1;
+    border-color: #1a4730;
+  }
+
+  [data-bs-theme="dark"] .alert-danger {
+    background-color: #2d0d0d;
+    color: #f0a0a0;
+    border-color: #4a1a1a;
+  }
+</style>

templates/admin.html

@@ -5,71 +5,47 @@
 <title>CANCOM Simple Signage Admin</title>
 <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
 
-<!-- Tabler CSS -->
+<script>
+(() => {
+  const stored = window.localStorage.getItem("signage-theme");
+  const theme = stored === "dark" || stored === "light" ? stored : "light";
+  document.documentElement.setAttribute("data-bs-theme", theme);
+})();
+</script>
+
 <link rel="stylesheet"
       href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
-
+<link rel="stylesheet"
-<!-- Tabler JS -->
+      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
 <script defer
         src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
-
-<!-- SortableJS -->
 <script defer
         src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
 
+{% include "_styles.html" %}
+
 <style>
-  body {
+  /* Tooltip Styling */
-    background-color: #F4F6F8;
+  .tooltip {
+    --bs-tooltip-border-color: var(--ccm-primary);
+  }
+  .tooltip .tooltip-inner {
+    border: 1px solid var(--ccm-primary);
+    background-color: #ffffff;
     color: #212121;
+    box-shadow: none;
+  }
+  .tooltip .tooltip-arrow::before {
+    border-top-color: var(--ccm-primary);
+    border-bottom-color: var(--ccm-primary);
+    background-color: #ffffff;
   }
 
-  /* Top Navigation */
+  /* Playlist als Grid */
-  .navbar {
-    background-color: #DA002D;
-  }
-  .navbar-brand {
-    color: #ffffff !important;
-    font-weight: 600;
-    letter-spacing: 0.3px;
-  }
-
-  /* CANCOM CI – Variante 1 */
-  .card-header {
-    background-color: #eeeeee;
-    border-left: 6px solid #DA002D;
-    padding-left: 1rem;
-    /* font-size: 1.1rem;     /* leicht größer */
-    font-weight: 600;
-  }
-
-  .btn-primary {
-    background-color: #DA002D;
-    border-color: #DA002D;
-  }
-  .btn-primary:hover {
-    background-color: #B00024;
-    border-color: #B00024;
-  }
-
-  .form-check-input:checked {
-    background-color: #DA002D;
-    border-color: #DA002D;
-  }
-
-  .form-check-input:focus {
-    box-shadow: 0 0 0 0.2rem rgba(218, 0, 45, 0.25);
-  }
-
-  /* Playlist als Grid (eine Zeile, tabellarisch) */
   .playlist-row {
     display: grid;
     grid-template-columns:
-      28px       /* Enabled */
+      28px 1fr 90px 80px 90px 32px;
-      1fr        /* Name */
-      90px       /* Typ */
-      80px       /* Größe */
-      90px       /* Delete */
-      32px;      /* Drag */
     align-items: center;
     gap: 0.75rem;
   }
@@ -95,178 +71,53 @@
   .drag-handle:active {
     cursor: grabbing;
   }
-
-  /* CANCOM CI Tooltip Styling */
-  .tooltip {
-    --bs-tooltip-border-color: #DA002D;
-  }
-  .tooltip .tooltip-inner {
-    border: 1px solid #DA002D;
-    background-color: #ffffff;
-    color: #212121;
-    box-shadow: none;
-  }
-  .tooltip .tooltip-arrow::before {
-    border-top-color: #DA002D;
-    border-bottom-color: #DA002D;
-    background-color: #ffffff;
-  }
 </style>
 </head>
-
 <body>
 <div class="page">
 
-  <!-- Header -->
+{% set brand_subtitle = "Admin Dashboard" %}
-  <header class="navbar navbar-expand-md">
+{% set site_dropdown_url_prefix = "/admin/" %}
+{% include "_header.html" %}
+
+<!-- Second Nav -->
+<div class="navbar-expand-md">
+  <div class="collapse navbar-collapse show">
+    <div class="navbar navbar-dark nav-surface">
       <div class="container-xl">
-      
+        <div class="d-flex flex-wrap gap-2 py-2">
-  <a class="navbar-brand d-flex align-items-center"
+          <a class="btn btn-white active" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
-     href="/admin">
+          <a class="btn btn-white" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority</a>
-
+           <a class="btn btn-white" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
-    <img src="{{ url_for('static', filename='cancom.svg') }}"
+          <div class="dropdown d-inline-block">
-        alt="CANCOM"
+            <button class="btn btn-white" type="button" data-bs-toggle="dropdown">
-        height="32"
+              <i class="ti ti-device-desktop me-1"></i>Screens <i class="ti ti-chevron-down"></i>
-        class="me-2">
+            </button>
-
+            <div class="dropdown-menu">
-    <!--<span class="text-white fw-semibold">-->
+              {% for s in screens.keys() %}
-      <span class="page-pretitle text-white">
+                <a class="dropdown-item" href="#screen-{{ s }}"><i class="ti ti-device-desktop me-1"></i>{{ s | capitalize }}</a>
-      Admin Dashboard
+              {% endfor %}
-      <h2 class="page-title text-white">Simple Signage</h2>
-    </span>
-  </a>
-
-      <div class="d-none d-sm-inline">
-        <a href="/customer" class="btn">Willkommensseite</a>
-        <a href="/logout" class="btn">Logout</a>
             </div>
           </div>
-  </header>
+          <a class="btn btn-white" href="javascript:void(0)"
+             onclick="var n=prompt('Name des neuen Screens:'); if(n&&n.trim()) location.href='/admin/{{ current_site }}/add-screen?name='+encodeURIComponent(n.trim().toLowerCase());"
+             title="Neuen Screen anlegen"><i class="ti ti-plus"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
-  <!-- Content -->
+<!-- Content -->
   <div class="page-wrapper">
     <div class="container-xl mt-4">
 
-  <!-- ========================= -->
-  <!-- PRIORITY / GLOBAL PLAYLIST -->
-  <!-- ========================= -->
-  <div class="card mb-6 border border-danger">
-    <div class="card-header d-flex justify-content-between align-items-center"
-         style="background:#fff5f5;">
-      <span>
-        <div class="page-title" style="color:#DA002D;">⚠ PRIORITY Playlist</div>
-        <div class="page-subtitle">wirkt auf alle Player</div>
-      </span>
-    </div>
-
-    <div class="card-body">
-      <p class="text-muted">
-        Inhalte dieser Playlist werden <strong>auf allen Playern</strong>
-        zusätzlich zur normalen Playlist angezeigt.
-        <br>
-        Die Wiedergabe erfolgt <strong>abwechselnd</strong>
-        (Normal → Priority → Normal → …).
-      </p>
-
-      <!-- Upload -->
-       <h4>Medien hochladen - ⚠ PRIORITY Playlist</h4>
-          <form action="/admin/upload/priority"
-                method="post" enctype="multipart/form-data">
-            <div class="input-group mb-3">
-              <input type="file" name="file" class="form-control" required>
-              <button class="btn btn-primary" type="submit">Upload</button>
-            </div>
-          </form>
-
-          <form action="/admin/add-url/priority" method="post" class="mb-3">
-            <div class="mb-2">
-              <label class="form-label">URL</label>
-              <input type="url" name="url" class="form-control"
-                     placeholder="https://example.com" required>
-            </div>
-            <div class="mb-2">
-              <label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
-              <input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
-            </div>
-            <button class="btn btn-secondary" type="submit">URL hinzufügen</button>
-          </form>
-
-      <!-- Playlist -->
-        <h4>Playlist Reihenfolge - ⚠ PRIORITY Playlist</h4>
-
-        <ul class="list-group mb-3" id="playlist-priority">
-            {% for file in priority_files %}
-            <li class="list-group-item playlist-row"
-                data-file="{{ file.name }}">
-
-              <input class="form-check-input playlist-enabled"
-                     type="checkbox"
-                     {% if file.enabled %}checked{% endif %}
-                     title="Element aktivieren">
-
-              <span class="playlist-name"
-                    {% if file.type == "image" %}
-                      data-bs-toggle="tooltip"
-                      data-bs-html="true"
-                      title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
-                    {% elif file.type == "url" %}
-                      data-bs-toggle="tooltip"
-                      title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
-                    {% endif %}>
-                {{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
-              </span>
-
-              {% if file.type == "image" %}
-                <span class="badge bg-purple text-purple-fg">Bild</span>
-              {% elif file.type == "url" or file.type == "html" %}
-                <span class="badge bg-blue text-blue-fg">URL</span>
-              {% else %}
-                <span class="badge bg-orange text-orange-fg">Video</span>
-              {% endif %}
-
-              <span class="playlist-size">
-                {% if file.type == "url" %}
-                  {{ file.size }}
-                {% else %}
-                  {{ file.size }} KB
-                {% endif %}
-              </span>
-
-              <!-- Delete -->
-              
-              <form action="{{ url_for('delete_file', screen='priority', filename=file.name) }}"
-                  method="post"
-                  class="d-inline"
-                  onmousedown="event.stopPropagation()">
-                <button type="submit"
-                        class="btn btn-outline-danger btn-sm"
-                        onclick="return confirm('Datei wirklich löschen?')">
-                  Löschen
-                </button>
-              </form>
-
-
-              <!-- Drag -->
-              <span class="drag-handle" title="Reihenfolge ändern">⇅</span>
-            </li>
-            {% endfor %}
-          </ul>
-
-          <button class="btn btn-primary"
-                  onclick="savePlaylist('priority')">
-            Priority-Playlist speichern
-          </button>
-
-        </div>
-      </div>
-
-
       <!-- ========================= -->
       <!-- SCREENS                   -->
       <!-- ========================= -->
 
       {% for screen, cfg in screens.items() %}
-      <div class="card mb-6">
+      <div class="card mb-6" id="screen-{{ screen }}">
 
         <!-- Card Header -->
         <div class="card-header d-flex justify-content-between align-items-center">
@@ -274,20 +125,27 @@
             <div class="page-title">Screen:
               <div class="text-uppercase">&nbsp- {{ screen }} -</div>
             </div>
-            <div class="page-subtitle">https://signage.ccmake.de/player/{{ screen }}</div>
+            <div class="page-subtitle">http://localhost:5005/player/{{ current_site }}/{{ screen }}</div>
           </span>
+          <div class="d-flex align-items-center gap-2">
           {% if screen_status[screen] == "active" %}
             <span class="badge bg-green text-green-fg">Aktiv</span>
           {% else %}
             <span class="badge bg-warning text-dark">Leer</span>
           {% endif %}
+          <form action="/admin/{{ current_site }}/delete-screen/{{ screen }}"
+                method="post" class="d-inline"
+                onsubmit="return confirm('Screen »{{ screen }}« wirklich löschen? Alle Medien werden gelöscht.')">
+            <button type="submit" class="btn btn-outline-danger btn-sm">Löschen</button>
+          </form>
+          </div>
         </div>
 
         <div class="card-body">
 
           <!-- Einstellungen -->
           <h2>Einstellungen</h2>
-          <form action="/admin/update/{{ screen }}" method="post">
+          <form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
             <div class="mb-2">
               <label class="form-label">Intervall (Sekunden)</label>
               <input type="number" class="form-control"
@@ -320,6 +178,32 @@
               <label class="form-check-label">Videos anzeigen</label>
             </div>
 
+            <hr class="my-4">
+            <h3>Aktions-Button (Player)</h3>
+            <div class="form-check form-switch mb-3">
+              <input class="form-check-input" type="checkbox"
+                     name="custom_url_enabled"
+                     {% if cfg.custom_url_enabled %}checked{% endif %}>
+              <label class="form-check-label">Aktions-Button anzeigen</label>
+            </div>
+            <div class="mb-2">
+              <label class="form-label">Button-URL</label>
+              <input type="url" name="custom_url" class="form-control"
+                     placeholder="https://example.com" value="{{ cfg.custom_url|default('') }}">
+            </div>
+            <div class="mb-4">
+              <label class="form-label">Button-Beschriftung</label>
+              <input type="text" name="custom_url_label" class="form-control"
+                     placeholder="z. B. Infos" value="{{ cfg.custom_url_label|default('') }}" maxlength="50">
+            </div>
+            <div class="mb-4">
+              <label class="form-label">Verhalten bei Klick</label>
+              <select name="custom_url_target" class="form-select">
+                <option value="overlay" {% if cfg.custom_url_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
+                <option value="redirect" {% if cfg.custom_url_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
+              </select>
+            </div>
+
             <button type="submit" class="btn btn-primary">
               Einstellungen speichern
             </button>
@@ -329,7 +213,7 @@
 
           <!-- Upload -->
           <h2>Medien hochladen / URL hinzufügen - {{ screen }}</h2>
-          <form action="/admin/upload/{{ screen }}"
+          <form action="/admin/{{ current_site }}/upload/{{ screen }}"
                 method="post" enctype="multipart/form-data">
             <div class="input-group mb-3">
               <input type="file" name="file" class="form-control" required>
@@ -337,7 +221,7 @@
             </div>
           </form>
 
-          <form action="/admin/add-url/{{ screen }}" method="post" class="mb-4">
+          <form action="/admin/{{ current_site }}/add-url/{{ screen }}" method="post" class="mb-4">
             <div class="mb-2">
               <label class="form-label">URL</label>
               <input type="url" name="url" class="form-control"
@@ -369,7 +253,7 @@
                     {% if file.type == "image" %}
                       data-bs-toggle="tooltip"
                       data-bs-html="true"
-                      title="<img src='/media/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
+                      title="<img src='/media/{{ current_site }}/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
                     {% elif file.type == "url" %}
                       data-bs-toggle="tooltip"
                       title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
@@ -394,7 +278,7 @@
               </span>
 
               <!-- Delete -->
-              <form action="{{ url_for('delete_file', screen=screen, filename=file.name) }}"
+              <form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
                     method="post">
                 <button type="submit"
                         class="btn btn-outline-danger btn-sm"
@@ -410,7 +294,7 @@
           </ul>
 
           <button class="btn btn-primary"
-                  onclick="savePlaylist('{{ screen }}')">
+                  onclick="savePlaylist('{{ current_site }}', '{{ screen }}')">
             Playlist speichern
           </button>
 
@@ -422,11 +306,7 @@
   </div>
 
   <!-- Footer -->
-  <footer class="footer footer-transparent mt-4">
+  {% include "_footer.html" %}
-    <div class="container-xl text-muted">
-      © {{ year }} CANCOM GmbH · Version {{ version }} · {{ hostname }}
-    </div>
-  </footer>
 
 </div>
 
@@ -450,12 +330,7 @@ document.addEventListener("DOMContentLoaded", function () {
     initSortable("{{ screen }}");
   {% endfor %}
 
-  // ✅ Priority explizit
+  function savePlaylist(site, screen) {
-  initSortable("priority");
-
-
-
-  function savePlaylist(screen) {
     const items = document.querySelectorAll(
       "#playlist-" + screen + " li"
     );
@@ -469,7 +344,7 @@ document.addEventListener("DOMContentLoaded", function () {
       playlist.push(fileName);
     });
 
-    fetch("/admin/playlist/" + screen, {
+    fetch("/admin/" + site + "/playlist/" + screen, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -487,6 +362,28 @@ document.addEventListener("DOMContentLoaded", function () {
     return new bootstrap.Tooltip(tooltipTriggerEl);
   });
 
+  // Dark Mode Toggle
+  const themeToggle = document.getElementById("theme-toggle");
+  const root = document.documentElement;
+
+  const syncThemeToggle = () => {
+    const theme = root.getAttribute("data-bs-theme") || "light";
+    if (!themeToggle) return;
+    themeToggle.innerHTML = theme === "dark"
+      ? '<i class="ti ti-sun"></i>'
+      : '<i class="ti ti-moon"></i>';
+  };
+
+  if (themeToggle) {
+    syncThemeToggle();
+    themeToggle.addEventListener("click", () => {
+      const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
+      root.setAttribute("data-bs-theme", nextTheme);
+      window.localStorage.setItem("signage-theme", nextTheme);
+      syncThemeToggle();
+    });
+  }
+
 });
 </script>
 

templates/customer.html

@@ -3,131 +3,173 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <title>Kunde hinzufügen</title>
+  <title>Willkommensseite</title>
   <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
 
+  <script>
+  (() => {
+    const stored = window.localStorage.getItem("signage-theme");
+    const theme = stored === "dark" || stored === "light" ? stored : "light";
+    document.documentElement.setAttribute("data-bs-theme", theme);
+  })();
+  </script>
+
   <link rel="stylesheet"
         href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
+  <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
   <script defer
           src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
 
+  {% include "_styles.html" %}
+
   <style>
-    body {
+    .form-label { font-weight: 600; }
-      background-color: #F4F6F8;
+    .card { box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
-      color: #212121;
+    .logo-preview-box {
+      border: 2px dashed var(--ccm-border);
+      border-radius: 0.75rem;
+      min-height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      background: var(--ccm-surface);
     }
-    .navbar {
+    .logo-preview-box img {
-      background-color: #DA002D;
+      max-height: 100px;
+      max-width: 100%;
+      object-fit: contain;
     }
-    .navbar-brand,
+    .logo-preview-box .placeholder {
-    .navbar-brand h2,
+      color: var(--ccm-muted);
-    .navbar-brand .page-pretitle {
+      font-size: 0.85rem;
-      color: #ffffff !important;
+      text-align: center;
-    }
-    .card-header {
-      background-color: #eeeeee;
-      border-left: 6px solid #DA002D;
-      padding-left: 1rem;
-      font-weight: 600;
-    }
-    .btn-primary {
-      background-color: #DA002D;
-      border-color: #DA002D;
-    }
-    .btn-primary:hover {
-      background-color: #B00024;
-      border-color: #B00024;
-    }
-    .form-label {
-      font-weight: 600;
-    }
-    .card {
-      box-shadow: 0 20px 60px rgba(0,0,0,0.08);
     }
   </style>
 </head>
 <body>
 <div class="page">
-  <header class="navbar navbar-expand-md">
-    <div class="container-xl">
-      <a class="navbar-brand d-flex align-items-center"
-         href="/admin">
-        <img src="{{ url_for('static', filename='cancom.svg') }}"
-             alt="CANCOM"
-             height="32"
-             class="me-2">
-        <span class="page-pretitle text-white">
-          Admin Dashboard
-          <h2 class="page-title text-white">Simple Signage</h2>
-        </span>
-      </a>
-      <div class="d-none d-sm-inline">
-        <a href="/admin" class="btn">Zurück</a>
-        <a href="/logout" class="btn">Logout</a>
-      </div>
-    </div>
-  </header>
 
-  <div class="page-wrapper">
+{% set brand_subtitle = "Willkommensseite" %}
+{% set site_dropdown_url_prefix = "/willkommen?site=" %}
+{% include "_header.html" %}
+
+<!-- Second Nav -->
+<div class="navbar-expand-md">
+  <div class="collapse navbar-collapse show">
+    <div class="navbar navbar-dark nav-surface">
+      <div class="container-xl">
+        <div class="d-flex flex-wrap gap-2 py-2">
+          <a class="btn btn-white" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
+          <a class="btn btn-white" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority</a>
+           <a class="btn btn-white active" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="page-wrapper">
     <div class="container-xl mt-4">
       <div class="card mb-4">
         <div class="card-header">
           <div class="row align-items-center">
             <div class="col">
               <div class="page-pretitle">Willkommensseite</div>
-              <h2 class="page-title">Kundeninformationen eingeben</h2>
+              <h2 class="page-title">Kundeninformationen eingeben (max. 3)</h2>
             </div>
           </div>
         </div>
         <div class="card-body">
           {% if error %}
-            <div class="alert alert-danger">
+            <div class="alert alert-danger">{{ error }}</div>
-              {{ error }}
-            </div>
           {% endif %}
           {% if success %}
-            <div class="alert alert-success">
+            <div class="alert alert-success">{{ success }}</div>
-              {{ success }}
-            </div>
           {% endif %}
 
-          {% if logo_url %}
+          <!-- Logo Previews -->
-            <div class="alert alert-secondary d-flex align-items-center gap-3">
+          <div class="row g-3 mb-4">
-              <div>
+            {% for i in range(3) %}
-                <strong>Logo Vorschau</strong>
+            <div class="col-md-4">
-                <div class="text-muted">Wenn das Logo erfolgreich gefunden wurde, wird es hier angezeigt.</div>
+              <label class="form-label">Logo {{ i + 1 }}</label>
-              </div>
+              <div class="logo-preview-box">
-              <img src="{{ logo_url }}"
+                {% if logo_urls and logo_urls[i] %}
-                   alt="Logo Vorschau"
+                  <img src="{{ logo_urls[i] }}" alt="Logo {{ i + 1 }}">
-                   class="img-fluid border"
+                {% else %}
-                   style="max-height: 120px; max-width: 240px; object-fit: contain;">
+                  <div class="placeholder">kein Logo</div>
-            </div>
                 {% endif %}
+              </div>
+            </div>
+            {% endfor %}
+          </div>
 
           <form method="POST">
-            <div class="mb-3">
+            <input type="hidden" name="site" value="{{ site }}">
-              <label class="form-label" for="customer_name">Kundenname</label>
+            <div class="row g-3 mb-3">
-              <input type="text"
+              <div class="col-md-4">
-                     class="form-control"
+                <label class="form-label" for="customer_name_1">Kunde 1</label>
-                     id="customer_name"
+                <input type="text" class="form-control" id="customer_name_1"
-                     name="customer_name"
+                       name="customer_name_1" placeholder="z. B. Beispiel GmbH"
-                     placeholder="z. B. Beispiel GmbH"
+                       value="{{ customer_names[0] if customer_names else '' }}">
-                     required>
+              </div>
+              <div class="col-md-4">
+                <label class="form-label" for="customer_name_2">Kunde 2 (optional)</label>
+                <input type="text" class="form-control" id="customer_name_2"
+                       name="customer_name_2" placeholder="z. B. Muster AG"
+                       value="{{ customer_names[1] if customer_names else '' }}">
+              </div>
+              <div class="col-md-4">
+                <label class="form-label" for="customer_name_3">Kunde 3 (optional)</label>
+                <input type="text" class="form-control" id="customer_name_3"
+                       name="customer_name_3" placeholder="z. B. Firma GmbH"
+                       value="{{ customer_names[2] if customer_names else '' }}">
+              </div>
             </div>
 
             <div class="mb-3 text-muted">
-              <p class="mb-1">Das System sucht automatisch nach dem Kundenlogo</p>
+              <p class="mb-1">Das System sucht automatisch nach den Kundenlogos</p>
               <p class="mb-0">und erstellt eine angepasste Willkommensseite für die Lobby-Playlist.</p>
             </div>
 
             <button type="submit" class="btn btn-primary">
-              Kundenlogo &amp; Willkommensseite generieren
+              <i class="ti ti-file-plus me-1"></i>Logos &amp; Willkommensseite generieren
             </button>
           </form>
         </div>
       </div>
     </div>
   </div>
+
+  <footer class="app-footer">
+  {% include "_footer.html" %}
+  </footer>
 </div>
+
+<script>
+window.addEventListener("load", () => {
+  const themeToggle = document.getElementById("theme-toggle");
+  const root = document.documentElement;
+
+  const syncThemeToggle = () => {
+    const theme = root.getAttribute("data-bs-theme") || "light";
+    if (!themeToggle) return;
+    themeToggle.innerHTML = theme === "dark"
+      ? '<i class="ti ti-sun"></i>'
+      : '<i class="ti ti-moon"></i>';
+  };
+
+  if (themeToggle) {
+    syncThemeToggle();
+    themeToggle.addEventListener("click", () => {
+      const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
+      root.setAttribute("data-bs-theme", nextTheme);
+      window.localStorage.setItem("signage-theme", nextTheme);
+      syncThemeToggle();
+    });
+  }
+});
+</script>
 </body>
 </html>

templates/player.html

@@ -16,7 +16,7 @@
       overflow: hidden;
     }
 
-    img, video, iframe {
+    img, video, #iframe {
       width: 100vw;
       height: 100vh;
       background: black;
@@ -28,7 +28,7 @@
       z-index: 1;
     }
 
-    img, iframe {
+    img, #iframe {
       object-fit: contain;
       border: 0;
     }
@@ -71,6 +71,36 @@
 
 <body>
 
+<div id="overlay" style="display:none;position:fixed;inset:0;z-index:99999;background:#fff;">
+  <button onclick="closeOverlay()"
+          style="position:absolute;top:16px;left:16px;z-index:10;
+                 padding:8px 16px;background:#DA002D;color:#fff;
+                 border:none;border-radius:6px;font-size:1rem;cursor:pointer;">
+    ← Zurück
+  </button>
+  <iframe id="overlay-iframe" style="width:100%;height:100%;border:none;display:block;"></iframe>
+</div>
+
+{% if custom_url and custom_url_enabled %}
+{% if custom_url_target == "redirect" %}
+<a href="{{ custom_url }}"
+   style="position:fixed;top:16px;left:16px;z-index:9999;
+          padding:10px 20px;background:#DA002D;color:#fff;
+          border:none;border-radius:8px;font-size:1rem;cursor:pointer;
+          text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);">
+  {{ custom_url_label or "Info" }}
+</a>
+{% else %}
+<button onclick='openOverlay({{ custom_url | tojson }})'
+   style="position:fixed;top:16px;left:16px;z-index:9999;
+          padding:10px 20px;background:#DA002D;color:#fff;
+          border:none;border-radius:8px;font-size:1rem;cursor:pointer;
+          box-shadow:0 2px 8px rgba(0,0,0,0.3);">
+  {{ custom_url_label or "Info" }}
+</button>
+{% endif %}
+{% endif %}
+
 
 <img id="image">
 <video id="video" muted autoplay playsinline></video>
@@ -88,6 +118,20 @@
 {% endif %}
 
 <script>
+let playerTimer = null;
+
+function openOverlay(url) {
+  if (playerTimer) clearTimeout(playerTimer);
+  document.getElementById("overlay").style.display = "block";
+  document.getElementById("overlay-iframe").src = url;
+}
+
+function closeOverlay() {
+  document.getElementById("overlay").style.display = "none";
+  document.getElementById("overlay-iframe").src = "";
+  playNext();
+}
+
 // Newsticker Uhrzeit
 function updateClock() {
   const el = document.getElementById('newsticker-clock');
@@ -104,6 +148,7 @@ const normalFiles = {{ normal_files | tojson }};
 const prioFiles   = {{ prio_files   | tojson }};
 const interval    = {{ interval }} * 1000;
 const screen      = "{{ screen }}";
+const site        = "{{ site }}";
 
 /* -----------------------------
    Player State
@@ -233,11 +278,11 @@ function playNext() {
       iframe.style.height = `100vh`;
       iframe.style.transform = `translate(-50%, -50%)`;
     }
-    setTimeout(playNext, interval);
+    playerTimer = setTimeout(playNext, interval);
     return;
   }
 
-  const src = `/media/${basePath}/${item.name}`;
+  const src = entry.isPrio ? `/media/priority/${item.name}` : `/media/${site}/${basePath}/${item.name}`;
   if (isVideo(item)) {
     vid.style.display = "block";
     vid.src = src;
@@ -249,11 +294,11 @@ function playNext() {
     iframe.style.width = `100vw`;
     iframe.style.height = `100vh`;
     iframe.style.transform = `translate(-50%, -50%)`;
-    setTimeout(playNext, interval);
+    playerTimer = setTimeout(playNext, interval);
   } else {
     img.style.display = "block";
     img.src = src;
-    setTimeout(playNext, interval);
+    playerTimer = setTimeout(playNext, interval);
   }
 }
 
@@ -264,7 +309,7 @@ let lastHash = null;
 
 async function checkForUpdates() {
   try {
-    const res = await fetch(`/playlist/${screen}/hash`, { cache: "no-store" });
+    const res = await fetch(`/playlist/${site}/${screen}/hash`, { cache: "no-store" });
     const hash = await res.text();
 
     if (lastHash && lastHash !== hash) {

templates/priority.html

@@ -0,0 +1,279 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>CANCOM Simple Signage – Priority Playlist</title>
+<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+<script>
+(() => {
+  const stored = window.localStorage.getItem("signage-theme");
+  const theme = stored === "dark" || stored === "light" ? stored : "light";
+  document.documentElement.setAttribute("data-bs-theme", theme);
+})();
+</script>
+
+<link rel="stylesheet"
+      href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
+<script defer
+        src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
+<script defer
+        src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+
+{% include "_styles.html" %}
+
+<style>
+  .playlist-row {
+    display: grid;
+    grid-template-columns:
+      28px 1fr 90px 80px 90px 32px;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .playlist-name {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .playlist-size {
+    color: #6c757d;
+    font-size: 0.9em;
+  }
+
+  .drag-handle {
+    cursor: grab;
+    font-size: 1.2em;
+    text-align: center;
+    user-select: none;
+  }
+  .drag-handle:active {
+    cursor: grabbing;
+  }
+</style>
+</head>
+<body>
+<div class="page">
+
+{% set brand_subtitle = "Priority Playlist" %}
+{% set site_dropdown_url_prefix = "/admin/" %}
+{% include "_header.html" %}
+
+<!-- Second Nav -->
+<div class="navbar-expand-md">
+  <div class="collapse navbar-collapse show">
+    <div class="navbar navbar-dark nav-surface">
+      <div class="container-xl">
+        <div class="d-flex flex-wrap gap-2 py-2">
+          <a class="btn btn-white" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
+          <a class="btn btn-white active" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority</a>
+          <a class="btn btn-white" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Content -->
+<div class="page-wrapper">
+  <div class="container-xl mt-4">
+
+  <!-- ========================= -->
+  <!-- PRIORITY / GLOBAL PLAYLIST -->
+  <!-- ========================= -->
+  <div class="card mb-6">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <span>
+        <div class="page-title" style="color:#DA002D;">⚠ PRIORITY Playlist</div>
+        <div class="page-subtitle">wirkt auf alle Player</div>
+      </span>
+    </div>
+
+    <div class="card-body">
+      <p class="text-muted">
+        Inhalte dieser Playlist werden <strong>auf allen Playern</strong>
+        zusätzlich zur normalen Playlist angezeigt.
+        <br>
+        Die Wiedergabe erfolgt <strong>abwechselnd</strong>
+        (Normal → Priority → Normal → …).
+      </p>
+
+      <!-- Upload -->
+      <h4>Medien hochladen</h4>
+      <form action="/admin/{{ current_site }}/upload/priority"
+            method="post" enctype="multipart/form-data">
+        <div class="input-group mb-3">
+          <input type="file" name="file" class="form-control" required>
+          <button class="btn btn-primary" type="submit">Upload</button>
+        </div>
+      </form>
+
+      <form action="/admin/{{ current_site }}/add-url/priority" method="post" class="mb-3">
+        <div class="mb-2">
+          <label class="form-label">URL</label>
+          <input type="url" name="url" class="form-control"
+                 placeholder="https://example.com" required>
+        </div>
+        <div class="mb-2">
+          <label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
+          <input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
+        </div>
+        <button class="btn btn-secondary" type="submit">URL hinzufügen</button>
+      </form>
+
+      <!-- Playlist -->
+      <h4>Playlist Reihenfolge</h4>
+
+      <ul class="list-group mb-3" id="playlist-priority">
+        {% for file in priority_files %}
+        <li class="list-group-item playlist-row"
+            data-file="{{ file.name }}">
+
+          <input class="form-check-input playlist-enabled"
+                 type="checkbox"
+                 {% if file.enabled %}checked{% endif %}
+                 title="Element aktivieren">
+
+          <span class="playlist-name"
+                {% if file.type == "image" %}
+                  data-bs-toggle="tooltip"
+                  data-bs-html="true"
+                  title="<img src='/media/priority/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
+                {% elif file.type == "url" %}
+                  data-bs-toggle="tooltip"
+                  title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
+                {% endif %}>
+            {{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
+          </span>
+
+          {% if file.type == "image" %}
+            <span class="badge bg-purple text-purple-fg">Bild</span>
+          {% elif file.type == "url" or file.type == "html" %}
+            <span class="badge bg-blue text-blue-fg">URL</span>
+          {% else %}
+            <span class="badge bg-orange text-orange-fg">Video</span>
+          {% endif %}
+
+          <span class="playlist-size">
+            {% if file.type == "url" %}
+              {{ file.size }}
+            {% else %}
+              {{ file.size }} KB
+            {% endif %}
+          </span>
+
+          <!-- Delete -->
+          <form action="{{ url_for('delete_file', site=current_site, screen='priority', filename=file.name) }}"
+              method="post"
+              class="d-inline"
+              onmousedown="event.stopPropagation()">
+            <button type="submit"
+                    class="btn btn-outline-danger btn-sm"
+                    onclick="return confirm('Datei wirklich löschen?')">
+              Löschen
+            </button>
+          </form>
+
+          <!-- Drag -->
+          <span class="drag-handle" title="Reihenfolge ändern">⇅</span>
+        </li>
+        {% endfor %}
+      </ul>
+
+      <button class="btn btn-primary"
+              onclick="savePlaylist('{{ current_site }}', 'priority')">
+        Priority-Playlist speichern
+      </button>
+
+    </div>
+  </div>
+
+  </div>
+</div>
+
+<!-- Footer -->
+{% include "_footer.html" %}
+
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+
+  function initSortable(name) {
+    const el = document.getElementById("playlist-" + name);
+    if (!el || typeof Sortable === "undefined") return;
+
+    new Sortable(el, {
+      animation: 150,
+      handle: ".drag-handle",
+      ghostClass: "bg-light",
+      chosenClass: "bg-light"
+    });
+  }
+
+  initSortable("priority");
+
+  function savePlaylist(site, screen) {
+    const items = document.querySelectorAll(
+      "#playlist-" + screen + " li"
+    );
+    const playlist = [];
+
+    const enabled = {};
+    items.forEach((item) => {
+      const checkbox = item.querySelector(".playlist-enabled");
+      const fileName = item.dataset.file;
+      enabled[fileName] = !!(checkbox && checkbox.checked);
+      playlist.push(fileName);
+    });
+
+    fetch("/admin/" + site + "/playlist/" + screen, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        playlist: playlist,
+        enabled: enabled
+      })
+    }).then(() => location.reload());
+  }
+
+  window.savePlaylist = savePlaylist;
+
+  // Initialize tooltips
+  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // Dark Mode Toggle
+  const themeToggle = document.getElementById("theme-toggle");
+  const root = document.documentElement;
+
+  const syncThemeToggle = () => {
+    const theme = root.getAttribute("data-bs-theme") || "light";
+    if (!themeToggle) return;
+    themeToggle.innerHTML = theme === "dark"
+      ? '<i class="ti ti-sun"></i>'
+      : '<i class="ti ti-moon"></i>';
+  };
+
+  if (themeToggle) {
+    syncThemeToggle();
+    themeToggle.addEventListener("click", () => {
+      const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
+      root.setAttribute("data-bs-theme", nextTheme);
+      window.localStorage.setItem("signage-theme", nextTheme);
+      syncThemeToggle();
+    });
+  }
+
+});
+</script>
+
+</body>
+</html>