Discord Web Viewer

Eine elegante Onepage-Webanwendung zur Echtzeit-Anzeige aktiver Benutzer in den Sprachkanälen eines Discord-Servers. Mit automatischem Light/Dark Mode und farbcodierten Benutzer-Status-Anzeigen.

✨ Features

• Echtzeit-Updates: Live-Anzeige von Benutzern in Sprachkanälen
• Automatischer Light/Dark Mode: Passt sich automatisch den Systemeinstellungen an
• Manueller Theme-Wechsel: Ermöglicht das manuelle Umschalten zwischen Hell- und Dunkel-Modus
• Farbcodierte Status-Anzeige:
  • 🟢 Online (Grün)
  • 🟡 Abwesend (Gelb)
  • 🔴 Nicht stören (Rot)
• Responsive Design: Optimiert für Desktop und mobile Geräte
• Benutzerfreundliche Oberfläche: Basierend auf dem Tabler Dashboard Framework

🛠️ Tech-Stack

• Backend: Node.js / Express
• Frontend: Handlebars / Tabler Dashboard
• Styling: Custom CSS mit nativer Dark Mode Unterstützung
• Deployment: Docker / Docker Compose
• Echtzeit-Updates: WebSockets

🚀 Starten der Anwendung

Die Anwendung wird mit Docker und Docker Compose gestartet.

1. Konfiguration: Erstelle eine docker-compose.yml aus dem Beispiel unten oder passe die vorhandene an. Du musst die Umgebungsvariablen mit deinen eigenen Discord-Bot-Daten füllen.

2. Start: Führe den folgenden Befehl im Hauptverzeichnis des Projekts aus:

   docker-compose up --build

3. Aufrufen: Die Anwendung ist danach unter http://localhost:3000 erreichbar.

⚙️ Umgebungsvariablen

Die folgenden Umgebungsvariablen müssen in der docker-compose.yml gesetzt werden:

• DISCORD_BOT_TOKEN: Der Token deines Discord-Bots. Anleitung zum Erstellen eines Bots
• DISCORD_SERVER_ID: Die ID des Discord-Servers, den du überwachen möchtest.
• DISCORD_CLIENT_ID: Die Client-ID deines Discord-Bots.

Beispiel docker-compose.yml

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DISCORD_BOT_TOKEN=dein_bot_token
      - DISCORD_SERVER_ID=deine_server_id
      - DISCORD_CLIENT_ID=deine_client_id

🎨 Theme-Anpassung

Die Anwendung unterstützt automatisch Light und Dark Mode basierend auf den Systemeinstellungen des Benutzers. Zusätzlich kann das Theme manuell über den Theme-Switcher in der Benutzeroberfläche umgeschaltet werden.

Features des Theme-Systems:

• Automatische Erkennung: Passt sich den Systemeinstellungen an
• Persistenz: Speichert die Benutzerauswahl im LocalStorage
• FOUC-Vermeidung: Verhindert Flackern beim Laden durch frühes Theme-Setting
• Konsistente Darstellung: Speziell angepasste Stile für beide Modi

📱 Screenshots

Dark Mode

Light Mode

📄 Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.