changed to .md

Dockerfile

@@ -1,7 +1,22 @@
 FROM node:20-alpine
+
 WORKDIR /app
+
+# Copy package files
 COPY package*.json ./
-RUN npm install
+
+# Install dependencies
+RUN npm install --production
+
+# Copy all application files
 COPY . .
+
+# Expose port
 EXPOSE 3000
-CMD ["npm", "start"]
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Start the server
+CMD ["node", "server.js"]

config.js

@@ -0,0 +1,50 @@
+// config.js - Zentrale Konfiguration für WhoPays App
+
+export const CONFIG = {
+  A: {
+    name: "Lumpia",              // Name Marc
+    colorHex: "#6495ED",       // Farbe: Blau
+    colorDiscord: 0x6495ed,    //  Discord Embed
+    icon: "a.png",             // Profilbild
+    background: "bgA.jpg"      // Hintergrundbild
+  },
+  B: {
+    name: "Pierogi",             // Name Laila
+    colorHex: "#3C0061",       // Farbe: Lila
+    colorDiscord: 0x3C0061,    // Discord Embed
+    icon: "b.png",             // Profilbild
+    background: "bgB.jpg"      // Hintergrundbild
+  }
+};
+
+// Discord Webhook URL
+export const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL;
+
+// Server URL (für Discord Thumbnails)
+export const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL 
+  || "http://localhost:3000";
+
+// Port
+export const PORT = process.env.PORT || 3000;
+
+/*
+ * ANLEITUNG ZUM ANPASSEN:
+ * 
+ * 1. Namen ändern:
+ *    name: "DeinName"
+ * 
+ * 2. Farben ändern (Web und Discord müssen gleich sein):
+ *    colorHex: "#3498db"       // Hex-Format für Web
+ *    colorDiscord: 0x3498db    // Hex ohne # für Discord
+ * 
+ *    Beispiele:
+ *    Blau:   colorHex: "#3498db", colorDiscord: 0x3498db
+ *    Lila:   colorHex: "#9b59b6", colorDiscord: 0x9b59b6
+ *    Orange: colorHex: "#e67e22", colorDiscord: 0xe67e22
+ *    Pink:   colorHex: "#e91e63", colorDiscord: 0xe91e63
+ * 
+ * 3. Bilder ändern:
+ *    icon: "mein-bild.png"
+ *    background: "mein-hintergrund.jpg"
+ *    (Dateien müssen in /root/whopays/img/ liegen!)
+ */

package.json

@@ -1,11 +1,20 @@
 {
   "name": "whopays",
   "version": "1.0.0",
+  "description": "Who pays app with PWA support",
+  "main": "server.js",
   "type": "module",
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "node server.js"
   },
+  "keywords": [
+    "pwa",
+    "whopays"
+  ],
+  "author": "",
+  "license": "ISC",
   "dependencies": {
-    "express": "^4.19.2"
+    "express": "^4.18.2"
   }
 }

public/index.html

@@ -2,17 +2,60 @@
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" type="image/x-icon" href="icons/icon-192.png">
-    <meta name="theme-color" content="#ec4899" />
+    
-    <title>Wer zahlt?</title>
+    <!-- PWA Meta Tags -->
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    
+    <!-- iOS Specific -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="WhoPays" />
+    <link rel="apple-touch-icon" href="/img/icon-192.png" />
+    
+    <!-- Android Specific -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    
+    <title>Who Pays?</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
+    
+    <style>
+      /* Preload images to prevent flickering */
+      body::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        z-index: -1;
+        background-image: url('img/a.png'), url('img/b.png'), url('img/bgA.jpg'), url('img/bgB.jpg');
+      }
+      
+      /* Smooth background transitions */
+      body {
+        background-size: cover;
+        background-position: center;
+        transition: background-image 0.6s ease-in-out;
+      }
+      
+      /* Hide content until loaded */
+      .loaded {
+        opacity: 1;
+        transition: opacity 0.3s ease-in;
+      }
+      
+      .loading {
+        opacity: 0;
+      }
+    </style>
   </head>
   <body
-    class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-yellow-50 to-pink-50 text-gray-800"
+    class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-yellow-50 to-pink-50 text-gray-800 p-4"
   >
-    <div class="text-center space-y-8">
+    <div class="text-center space-y-8 w-full max-w-md loading" id="mainContent">
       <h1 class="text-4xl font-extrabold drop-shadow-sm tracking-tight">
         Who pays?
       </h1>
@@ -26,29 +69,48 @@
           src="img/a.png"
           alt="Person"
           class="w-48 h-48 rounded-full shadow-md border-4 border-white object-cover transition-transform duration-500"
+          style="display: none;"
         />
         <div
           id="personName"
-          class="text-3xl font-semibold text-blue-800 transition-all duration-500"
+          class="text-3xl font-semibold transition-all duration-500"
         >
-          Load ...
+          Lädt ...
         </div>
       </div>
 
-      <button
+      <!-- Reason Input Section -->
-        id="toggleButton"
+      <div class="space-y-3">
-        class="bg-green-500 hover:bg-green-600 text-white text-xl px-6 py-3 rounded-2xl shadow-md transition-all transform hover:scale-105 active:scale-95"
+        <input
-      >
+          id="reasonInput"
-        Switch 🔁
+          type="text"
-      </button>
+          placeholder="Grund (optional) ..."
+          maxlength="100"
+          class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-pink-400 focus:outline-none text-center transition-all"
+        />
+        
+        <button
+          id="toggleButton"
+          class="w-full bg-green-500 hover:bg-green-600 text-white text-xl px-6 py-3 rounded-2xl shadow-md transition-all transform hover:scale-105 active:scale-95"
+        >
+          Switch 🔁
+        </button>
+      </div>
+
+      <!-- Last Reason Display -->
+      <div id="lastReasonBox" class="hidden bg-white/60 backdrop-blur-sm rounded-xl p-4 shadow-sm">
+        <p class="text-sm text-gray-600 mb-1">Letzter Grund:</p>
+        <p id="lastReasonText" class="text-lg font-medium text-gray-800"></p>
+      </div>
     </div>
 
     <script src="script.js"></script>
     <script>
+    // Service Worker Registration
     if ("serviceWorker" in navigator) {
       navigator.serviceWorker.register("/service-worker.js")
-      .then(() => console.log("Service Worker registriert"))
+      .then(reg => console.log("✅ Service Worker registriert", reg.scope))
-      .catch(err => console.error("SW Fehler:", err));
+      .catch(err => console.error("❌ SW Fehler:", err));
     }
     </script>
 

public/manifest.json

@@ -1,20 +1,40 @@
 {
-  "name": "WhoPays",
+  "name": "WhoPays? Who's turn is it",
   "short_name": "WhoPays",
+  "description": "Battle on who's gonna pay.",
   "start_url": "/",
+  "scope": "/",
   "display": "standalone",
-  "background_color": "#ffffff",
+  "background_color": "#5F9EA0",
-  "theme_color": "#2c3e50",
+  "theme_color": "#556B2F",
+  "orientation": "portrait-primary",
+  "categories": ["utilities", "lifestyle"],
   "icons": [
     {
       "src": "/icons/icon-192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
       "src": "/icons/icon-512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
-  ]
+  ],
+  "screenshots": [],
+  "prefer_related_applications": false
 }

public/script.js

@@ -1,48 +1,175 @@
 const img = document.getElementById("personImg");
 const nameEl = document.getElementById("personName");
 const button = document.getElementById("toggleButton");
+const reasonInput = document.getElementById("reasonInput");
+const lastReasonBox = document.getElementById("lastReasonBox");
+const lastReasonText = document.getElementById("lastReasonText");
+const mainContent = document.getElementById("mainContent");
 
-async function loadStatus() {
+// Config wird vom Server geladen
-  const res = await fetch("/status");
+let CONFIG = null;
-  const data = await res.json();
+
-  showStatus(data.current, false);
+// Preload images to prevent flickering
+const imageCache = {};
+function preloadImage(src) {
+  return new Promise((resolve, reject) => {
+    if (imageCache[src]) {
+      resolve(imageCache[src]);
+      return;
+    }
+    
+    const image = new Image();
+    image.onload = () => {
+      imageCache[src] = image;
+      resolve(image);
+    };
+    image.onerror = reject;
+    image.src = src;
+  });
 }
 
-function showStatus(person, animate = true) {
+// Config vom Server laden
-  const file = person === "A" ? "img/a.png" : "img/b.png";
+async function loadConfig() {
-  const label = person === "A" ? "Honey" : "Kirby";
+  try {
+    const res = await fetch("/config");
+    CONFIG = await res.json();
+    console.log("✅ Config geladen:", CONFIG);
+    return CONFIG;
+  } catch (err) {
+    console.error("❌ Fehler beim Laden der Config:", err);
+    // Fallback zur alten Konfiguration
+    CONFIG = {
+      A: {
+        name: "Honey",
+        colorHex: "#2ecc71",
+        icon: "a.png",
+        background: "bgA.jpg"
+      },
+      B: {
+        name: "Kirby",
+        colorHex: "#e74c3c",
+        icon: "b.png",
+        background: "bgB.jpg"
+      }
+    };
+    return CONFIG;
+  }
+}
 
-  // Hintergrundbilder für A und B
+// Preload all images on page load
-  const bgA = "url('img/bgA.jpg')";
+async function preloadAllImages() {
-  const bgB = "url('img/bgB.jpg')";
+  if (!CONFIG) await loadConfig();
   
-  // Hintergrundanimation (optional)
+  try {
-  document.body.style.transition = "background 0.4s ease";
+    await Promise.all([
+      preloadImage(`img/${CONFIG.A.icon}`),
+      preloadImage(`img/${CONFIG.B.icon}`),
+      preloadImage(`img/${CONFIG.A.background}`),
+      preloadImage(`img/${CONFIG.B.background}`)
+    ]);
+    console.log("✅ Alle Bilder vorgeladen");
+  } catch (err) {
+    console.warn("⚠️ Fehler beim Vorladen:", err);
+  }
+}
 
-  // Hintergrund setzen
+async function loadStatus() {
-  document.body.style.backgroundImage = person === "A" ? bgA : bgB;
+  // Config und Bilder laden
+  await loadConfig();
+  await preloadAllImages();
+  
+  const res = await fetch("/status");
+  const data = await res.json();
+  
+  // Set background and image without animation on first load
+  setBackgroundAndImage(data.current, false);
+  
+  // Show content smoothly
+  img.style.display = 'block';
+  mainContent.classList.remove('loading');
+  mainContent.classList.add('loaded');
+  
+  // Show last reason if available
+  if (data.lastReason) {
+    lastReasonText.textContent = data.lastReason;
+    lastReasonBox.classList.remove("hidden");
+  }
+}
+
+function setBackgroundAndImage(person, animate = true) {
+  if (!CONFIG) {
+    console.error("Config nicht geladen!");
+    return;
+  }
+
+  const personConfig = CONFIG[person];
+  const file = `img/${personConfig.icon}`;
+  const label = personConfig.name;
+  const bgImage = `url('img/${personConfig.background}')`;
+  const nameColor = personConfig.colorHex;
+
+  // Set background immediately (smooth transition via CSS)
+  document.body.style.backgroundImage = bgImage;
   document.body.style.backgroundSize = "cover";
   document.body.style.backgroundPosition = "center";
 
   if (animate) {
     img.classList.add("rotate");
-  }
     
-  setTimeout(() => {
+    // Change image, name and color in the middle of rotation
+    setTimeout(() => {
+      img.src = file;
+      nameEl.textContent = label;
+      nameEl.style.color = nameColor;
+    }, 300); // Half of rotation duration
+    
+    // Remove rotation class after animation
+    setTimeout(() => {
+      img.classList.remove("rotate");
+    }, 600);
+  } else {
+    // First load - no animation
     img.src = file;
     nameEl.textContent = label;
-  }, 150);
+    nameEl.style.color = nameColor;
-
+  }
-  setTimeout(() => {
-    img.classList.remove("rotate");
-  }, 600);
 }
 
-
 button.addEventListener("click", async () => {
-  const res = await fetch("/toggle", { method: "POST" });
+  const reason = reasonInput.value.trim();
-  const data = await res.json();
+  
-  showStatus(data.current);
+  try {
+    const res = await fetch("/toggle", { 
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ reason: reason || undefined })
+    });
+    
+    const data = await res.json();
+    setBackgroundAndImage(data.current, true);
+    
+    // Update last reason display
+    if (reason) {
+      lastReasonText.textContent = reason;
+      lastReasonBox.classList.remove("hidden");
+    }
+    
+    // Clear input
+    reasonInput.value = "";
+  } catch (err) {
+    console.error("Fehler beim Wechseln:", err);
+    nameEl.textContent = "Fehler!";
+  }
 });
 
+// Allow Enter key to trigger switch
+reasonInput.addEventListener("keypress", (e) => {
+  if (e.key === "Enter") {
+    button.click();
+  }
+});
+
+// Start loading
 loadStatus();

public/serviceworker.js

@@ -1,23 +1,114 @@
-const CACHE_NAME = "whopays-cache-v1";
+const CACHE_NAME = "whopays-v2";
-const URLS_TO_CACHE = [
+const urlsToCache = [
   "/",
   "/index.html",
   "/style.css",
-  "/script.js"
+  "/script.js",
+  "/manifest.json"
 ];
 
-self.addEventListener("install", event => {
+console.log("🔧 Service Worker: Loading...");
+
+// Install event
+self.addEventListener("install", (event) => {
+  console.log("⚙️ Service Worker: Installing...");
   event.waitUntil(
-    caches.open(CACHE_NAME).then(cache => {
+    caches.open(CACHE_NAME)
-      return cache.addAll(URLS_TO_CACHE);
+      .then((cache) => {
+        console.log("✅ Service Worker: Cache opened");
+        // Try to cache files, but don't fail if some are missing
+        return Promise.allSettled(
+          urlsToCache.map(url => 
+            cache.add(url).catch(err => {
+              console.warn(`⚠️ Failed to cache: ${url}`, err);
+              return null;
+            })
+          )
+        );
+      })
+      .then(() => {
+        console.log("✅ Service Worker: Installed");
+      })
+      .catch(err => {
+        console.error("❌ Service Worker: Install failed", err);
+      })
+  );
+  self.skipWaiting();
+});
+
+// Activate event
+self.addEventListener("activate", (event) => {
+  console.log("🔄 Service Worker: Activating...");
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            console.log(`🗑️ Service Worker: Deleting old cache: ${cacheName}`);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => {
+      console.log("✅ Service Worker: Activated");
     })
   );
+  self.clients.claim();
+});
+
+// Fetch event
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  
+  // Network first for API calls
+  if (url.pathname.startsWith("/status") || url.pathname.startsWith("/toggle")) {
+    event.respondWith(
+      fetch(event.request)
+        .catch(() => {
+          console.warn("⚠️ API offline, returning error");
+          return new Response(
+            JSON.stringify({ error: "Offline" }),
+            { 
+              headers: { "Content-Type": "application/json" },
+              status: 503
+            }
+          );
+        })
+    );
+    return;
+  }
+
+  // Cache first for static assets
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        if (response) {
+          return response;
+        }
+        
+        return fetch(event.request).then((fetchResponse) => {
+          // Only cache successful responses
+          if (!fetchResponse || fetchResponse.status !== 200 || fetchResponse.type !== 'basic') {
+            return fetchResponse;
+          }
+
+          const responseToCache = fetchResponse.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+
+          return fetchResponse;
+        });
+      })
+      .catch((err) => {
+        console.warn("⚠️ Fetch failed:", err);
+        // Fallback for navigation requests
+        if (event.request.mode === 'navigate') {
+          return caches.match('/index.html');
+        }
+        return new Response('Offline', { status: 503 });
+      })
+  );
 });
 
-self.addEventListener("fetch", event => {
+console.log("✅ Service Worker: Script loaded");
-  event.respondWith(
-    caches.match(event.request).then(response => {
-      return response || fetch(event.request);
-    })
-  );
-});

public/style.css

@@ -19,11 +19,11 @@
     opacity: 1;
   }
   50% {
-    transform: rotateY(180deg); /* Half flip */
+    transform: rotateY(90deg);
-    opacity: 0; /* Make the front disappear */
+    opacity: 0.3;
   }
   100% {
-    transform: rotateY(360deg); /* Complete flip */
+    transform: rotateY(0deg);
     opacity: 1;
   }
 }
@@ -31,5 +31,19 @@
 .rotate {
   animation: rotate 0.6s ease-in-out;
   transform-style: preserve-3d;
-  backface-visibility: hidden; /* Hide the back during flip */
+}
+
+/* Smooth transitions */
+#personImg {
+  will-change: transform, opacity;
+}
+
+#personName {
+  will-change: opacity, color;
+  transition: opacity 0.3s ease, color 0.3s ease;
+}
+
+/* Background transition */
+body {
+  will-change: background-image;
 }

readme.md

@@ -0,0 +1,360 @@
+# 💸 WhoPays - Who Pays Next?
+
+Ein einfaches, elegantes Tool um zu entscheiden, wer als nächstes zahlt - mit Discord-Benachrichtigungen und PWA-Support!
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![PWA](https://img.shields.io/badge/PWA-Ready-purple)
+
+## 🎯 Features
+
+- ✅ **Wechsel zwischen zwei Personen** - Einfacher Button-Klick
+- 🎨 **Individuelle Farben & Namen** - Komplett anpassbar
+- 📝 **Grund-Angabe** - Optional Grund für den Wechsel angeben
+- 🔔 **Discord-Benachrichtigungen** - Automatische Webhooks mit farbigen Embeds
+- 💾 **Persistenter Speicher** - Letzter Grund bleibt nach Container-Restart erhalten
+- 📱 **PWA-Support** - Als App auf Handy & Desktop installierbar
+- 🎭 **Animierte Übergänge** - Smooth Hintergrund- und Profilbild-Wechsel
+- 🐳 **Docker-Ready** - Einfache Deployment mit Docker Compose
+- 🔒 **Reverse-Proxy kompatibel** - Funktioniert mit Nginx, Caddy, Traefik, etc.
+
+---
+
+## 🚀 Quick Start
+
+### Voraussetzungen
+
+- Docker & Docker Compose
+- Discord Webhook URL (optional)
+- Profilbilder (a.png, b.png)
+- Hintergrundbilder (bgA.jpg, bgB.jpg)
+
+### Installation
+
+```bash
+# 1. Repository klonen oder Dateien herunterladen
+git clone https://github.com/dein-username/whopays.git
+cd whopays
+
+# 2. Bilder hinzufügen
+cp deine-bilder/* img/
+
+# 3. config.js anpassen (siehe Konfiguration)
+nano config.js
+
+# 4. Docker Container starten
+docker-compose up -d
+
+# 5. Öffne http://localhost:3000
+```
+
+**Das war's!** 🎉
+
+---
+
+## ⚙️ Konfiguration
+
+### config.js - Zentrale Konfiguration
+
+Alle Einstellungen sind in **einer** Datei:
+
+```javascript
+// config.js
+export const CONFIG = {
+  A: {
+    name: "Alice",              // Name Person A
+    colorHex: "#2ecc71",        // Farbe im Web (Grün)
+    colorDiscord: 0x2ecc71,     // Farbe in Discord (gleich!)
+    icon: "a.png",              // Profilbild
+    background: "bgA.jpg"       // Hintergrundbild
+  },
+  B: {
+    name: "Bob",                // Name Person B
+    colorHex: "#e74c3c",        // Farbe im Web (Rot)
+    colorDiscord: 0xe74c3c,     // Farbe in Discord (gleich!)
+    icon: "b.png",              // Profilbild
+    background: "bgB.jpg"       // Hintergrundbild
+  }
+};
+
+// Discord Webhook (optional)
+export const DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/...";
+
+// Öffentliche URL (für Discord Thumbnails)
+export const PUBLIC_BASE_URL = "https://your-domain.com";
+```
+
+### Farben ändern
+
+```javascript
+// Blau & Orange
+A: { colorHex: "#3498db", colorDiscord: 0x3498db }
+B: { colorHex: "#e67e22", colorDiscord: 0xe67e22 }
+
+// Lila & Pink
+A: { colorHex: "#9b59b6", colorDiscord: 0x9b59b6 }
+B: { colorHex: "#e91e63", colorDiscord: 0xe91e63 }
+
+// Türkis & Gold
+A: { colorHex: "#1abc9c", colorDiscord: 0x1abc9c }
+B: { colorHex: "#f39c12", colorDiscord: 0xf39c12 }
+```
+
+**Wichtig:** Hex-Farbe muss genau 6 Zeichen haben (0-9, A-F)!
+
+---
+
+## 📂 Projektstruktur
+
+```
+whopays/
+├── config.js                 # Zentrale Konfiguration
+├── server.js                 # Express Server
+├── package.json              # Node.js Dependencies
+├── Dockerfile               # Docker Build Instructions
+├── docker-compose.yml       # Docker Compose Config
+├── state.json              # Persistent State (auto-generiert)
+│
+└── public/                  # Statische Dateien
+    ├── index.html          # Frontend HTML
+    ├── script.js           # Frontend JavaScript
+    ├── style.css           # CSS Animationen
+    ├── manifest.json       # PWA Manifest
+    ├── service-worker.js   # PWA Service Worker
+    │
+    └── img/                # Bilder
+        ├── a.png           # Profilbild Person A
+        ├── b.png           # Profilbild Person B
+        ├── bgA.jpg         # Hintergrund Person A
+        ├── bgB.jpg         # Hintergrund Person B
+        ├── icon-192.png    # PWA Icon (192x192)
+        └── icon-512.png    # PWA Icon (512x512)
+```
+
+---
+
+## 🐳 Docker Deployment
+
+### docker-compose.yml
+
+```yaml
+version: '3.8'
+
+services:
+  whopays:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - PUBLIC_BASE_URL=https://your-domain.com
+      - DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/...";
+    volumes:
+      # Bilder (persistent)
+      - ./img:/app/public/img
+      
+      # State (persistent über Neustarts)
+      - ./state.json:/app/state.json
+    
+    restart: unless-stopped
+```
+
+### Befehle
+
+```bash
+# Container starten
+docker-compose up -d
+
+# Logs anschauen
+docker-compose logs -f
+
+# Container neustarten
+docker-compose restart
+
+# Container stoppen
+docker-compose down
+
+# Neu bauen (nach Code-Änderungen)
+docker-compose down
+docker-compose build --no-cache
+docker-compose up -d
+```
+
+---
+
+## 📱 PWA Installation
+
+### iOS (Safari)
+
+1. Öffne die Website in Safari
+2. Tippe auf das **Teilen**-Symbol (⎙)
+3. Scrolle und tippe **"Zum Home-Bildschirm"**
+4. Tippe **"Hinzufügen"**
+
+### Android (Chrome)
+
+1. Öffne die Website in Chrome
+2. Tippe auf **Menü** (⋮)
+3. Tippe **"App installieren"**
+4. Tippe **"Installieren"**
+
+### Desktop (Chrome/Edge)
+
+1. Öffne die Website
+2. Klicke auf das **⊕ Icon** in der Adressleiste
+3. Oder: Menü → "WhoPays installieren"
+
+**Wichtig:** PWA funktioniert nur über HTTPS (oder localhost)!
+
+---
+
+## 🔒 Reverse Proxy Setup
+
+### Nginx
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name whopays.your-domain.com;
+    
+    # PWA Files - NO AUTH
+    location ~ ^/(service-worker\.js|manifest\.json)$ {
+        proxy_pass http://localhost:3000;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        add_header Service-Worker-Allowed "/" always;
+    }
+    
+    # Main app
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+### Caddy (Einfachste Option!)
+
+```caddy
+whopays.your-domain.com {
+    reverse_proxy localhost:3000
+}
+```
+
+Caddy macht automatisch HTTPS mit Let's Encrypt! ✅
+
+---
+
+## 🔧 API Endpoints
+
+### GET /status
+
+```bash
+curl http://localhost:3000/status
+```
+
+Response:
+```json
+{
+  "current": "A",
+  "lastReason": "Pizza bestellt"
+}
+```
+
+### POST /toggle
+
+```bash
+curl -X POST http://localhost:3000/toggle \
+  -H "Content-Type: application/json" \
+  -d '{"reason":"Kaffee trinken"}'
+```
+
+Response:
+```json
+{
+  "current": "B",
+  "name": "Bob",
+  "lastReason": "Kaffee trinken"
+}
+```
+
+### GET /config
+
+```bash
+curl http://localhost:3000/config
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### PWA lässt sich nicht installieren
+
+- Stelle sicher, dass du HTTPS verwendest
+- Prüfe ob `manifest.json` erreichbar ist
+- Icons müssen existieren: `icon-192.png` und `icon-512.png`
+
+### Discord sendet keine Benachrichtigungen
+
+- Prüfe Webhook URL in `config.js`
+- Logs prüfen: `docker-compose logs | grep Discord`
+- Stelle sicher `PUBLIC_BASE_URL` ist korrekt
+
+### Bilder werden nicht angezeigt
+
+- Prüfe ob Bilder in `/img/` existieren
+- Berechtigungen: `chmod -R 755 img/`
+- Container neu starten
+
+### Farbe in Discord ungültig (HTTP 400)
+
+- Hex-Farbe muss genau 6 Zeichen haben
+- ✅ Richtig: `0x2ecc71`
+- ❌ Falsch: `0x2ecc71c` (extra Buchstabe!)
+
+---
+
+## 📊 Features im Detail
+
+### Persistent Storage
+
+```json
+{
+  "current": "A",
+  "lastReason": "Restaurant bezahlt"
+}
+```
+
+Bleibt erhalten durch Docker Volume Mount.
+
+### Smooth Animations
+
+- Rotation-Animation (0.6s)
+- Background-Transition (0.6s)
+- Farb-Übergang (0.3s)
+- Image Preloading
+
+---
+
+## 📜 Lizenz
+
+MIT License - Frei nutzbar!
+
+---
+
+## 💡 Tipps
+
+### Custom Domain mit Let's Encrypt
+
+```bash
+sudo certbot --nginx -d whopays.your-domain.com
+```
+
+### Mehrere Instanzen
+
+Unterschiedliche Ports in docker-compose.yml für mehrere Apps!
+
+---
+
+**Viel Spaß beim Entscheiden, wer zahlt!** 🎉💸

server.js

@@ -2,144 +2,284 @@ import express from "express";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { CONFIG, DISCORD_WEBHOOK_URL, PUBLIC_BASE_URL, PORT } from "./config.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
+
+// Trust proxy - CRITICAL for reverse proxy setup
+app.set('trust proxy', true);
+
 app.use(express.json());
-app.use(express.static(path.join(__dirname, "public")));
+
+// Logging middleware
+app.use((req, res, next) => {
+  console.log(`${req.method} ${req.url} - ${req.headers['x-forwarded-proto'] || 'http'}`);
+  next();
+});
+
+// CRITICAL: Serve static files with proper headers
+app.use(express.static(path.join(__dirname, "public"), {
+  setHeaders: (res, filepath) => {
+    if (filepath.endsWith('.js')) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+    }
+    if (filepath.endsWith('.json')) {
+      res.setHeader('Content-Type', 'application/json; charset=utf-8');
+    }
+    if (filepath.endsWith('service-worker.js')) {
+      res.setHeader('Service-Worker-Allowed', '/');
+      res.setHeader('Cache-Control', 'no-cache');
+    }
+  }
+}));
 
 const stateFile = path.join(__dirname, "state.json");
 
 // --------------------
-// Konfiguration
+// State Handling - MIT PERSISTENT lastReason
-// --------------------
-const CONFIG = {
-  A: {
-    name: "Marc",
-    color: 0x2ecc71, // grün
-    icon: "a.png"
-  },
-  B: {
-    name: "Laila",
-    color: 0xe74c3c, // rot
-    icon: "b.png"
-  }
-};
-
-// Öffentliche URL zu deinem Server (WICHTIG für Discord Icons!)
-const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL
-  || "http://localhost:3000";
-
-
-// 🔔 Discord Webhook URL
-const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL
-  || "https://discord.com/api/webhooks/1450872860607381515/zRbiXOykKPUfLJ_H87wD2OxQJPLdro6yQzU2T48Pg4fxSNaXEqBFgxdHGTiIDmmKGHIF";
-
-  
-// --------------------
-// State Handling
 // --------------------
 function getState() {
   if (!fs.existsSync(stateFile)) {
+    const initialState = { 
+      current: "A", 
+      lastReason: null 
+    };
     fs.writeFileSync(
       stateFile,
-      JSON.stringify({ current: "A" }, null, 2)
+      JSON.stringify(initialState, null, 2)
     );
+    console.log("✅ Neue state.json erstellt");
+    return initialState;
+  }
+  
+  try {
+    const state = JSON.parse(fs.readFileSync(stateFile, "utf-8"));
+    // Ensure lastReason exists in state
+    if (!state.hasOwnProperty('lastReason')) {
+      state.lastReason = null;
+    }
+    console.log(`📖 State geladen: ${state.current}, Letzter Grund: ${state.lastReason || 'keiner'}`);
+    return state;
+  } catch (err) {
+    console.error("❌ Fehler beim Lesen von state.json:", err);
+    return { current: "A", lastReason: null };
   }
-  return JSON.parse(fs.readFileSync(stateFile, "utf-8"));
 }
 
 function setState(newState) {
-  fs.writeFileSync(stateFile, JSON.stringify(newState, null, 2));
+  try {
+    fs.writeFileSync(stateFile, JSON.stringify(newState, null, 2));
+    console.log(`💾 State gespeichert: ${newState.current}, Grund: ${newState.lastReason || 'keiner'}`);
+  } catch (err) {
+    console.error("❌ Fehler beim Speichern von state.json:", err);
+  }
 }
 
 // --------------------
 // Discord Webhook
 // --------------------
-async function sendDiscordEmbed(previousKey, currentKey) {
+async function sendDiscordEmbed(previousKey, currentKey, reason) {
   const previous = CONFIG[previousKey];
   const current = CONFIG[currentKey];
 
-  if (!DISCORD_WEBHOOK_URL) return;
+  if (!DISCORD_WEBHOOK_URL) {
+    console.log("⚠️ DISCORD_WEBHOOK_URL nicht gesetzt, keine Benachrichtigung gesendet");
+    return;
+  }
+
+  const fields = [
+    {
+      name: "Paid",
+      value: previous.name,
+      inline: true
+    },
+    {
+      name: "Now's turn",
+      value: current.name,
+      inline: true
+    }
+  ];
+
+  // Grund hinzufügen falls vorhanden
+  if (reason) {
+    fields.push({
+      name: "📝 Grund",
+      value: reason,
+      inline: false
+    });
+  }
 
   const embed = {
-    title: "💸 Zahl-Wechsel",
+    title: "💸 Pay-Switch",
-    description: `**${current.name}** ist jetzt dran zu zahlen`,
+    description: `**${current.name}**'s turn`,
-    color: current.color,
+    color: current.colorDiscord,
     thumbnail: {
       url: `${PUBLIC_BASE_URL}/img/${current.icon}`
     },
-    fields: [
+    fields: fields,
-      {
-        name: "Von",
-        value: previous.name,
-        inline: true
-      },
-      {
-        name: "Zu",
-        value: current.name,
-        inline: true
-      }
-    ],
     footer: {
       text: new Date().toLocaleString("de-DE")
     }
   };
 
+  // Debug-Ausgabe
+  console.log(`\n📤 Sende Discord Webhook:`);
+  console.log(`   Von: ${previous.name} → Zu: ${current.name}`);
+  console.log(`   Grund: ${reason || '(keiner)'}`);
+  console.log(`   Farbe: 0x${current.colorDiscord.toString(16)}`);
+  console.log(`   Webhook URL: ${DISCORD_WEBHOOK_URL.substring(0, 50)}...`);
+
   try {
-    await fetch(DISCORD_WEBHOOK_URL, {
+    const response = await fetch(DISCORD_WEBHOOK_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
+      body: JSON.stringify({ embeds: [embed] })
-        embeds: [embed]
-      })
     });
+
+    if (response.ok) {
+      console.log(`✅ Discord Benachrichtigung gesendet (HTTP ${response.status})`);
+    } else {
+      const errorText = await response.text();
+      console.error(`❌ Discord Webhook Fehler (HTTP ${response.status}):`, errorText);
+    }
   } catch (err) {
-    console.error("Discord Webhook Fehler:", err.message);
+    console.error("❌ Discord Webhook Fehler:", err.message);
   }
+  console.log(""); // Leerzeile für bessere Lesbarkeit
 }
 
-
 // --------------------
-// Routes
+// API Routes
 // --------------------
 
-// GET: aktueller Zustand
+// Config API endpoint - sendet Config an Frontend
+app.get("/config", (req, res) => {
+  // Nur relevante Daten fürs Frontend senden
+  const frontendConfig = {
+    A: {
+      name: CONFIG.A.name,
+      colorHex: CONFIG.A.colorHex,
+      icon: CONFIG.A.icon,
+      background: CONFIG.A.background
+    },
+    B: {
+      name: CONFIG.B.name,
+      colorHex: CONFIG.B.colorHex,
+      icon: CONFIG.B.icon,
+      background: CONFIG.B.background
+    }
+  };
+  res.json(frontendConfig);
+});
+
 app.get("/status", (req, res) => {
-  res.json(getState());
+  const state = getState();
+  res.json(state);
 });
 
-// POST: wechseln
 app.post("/toggle", async (req, res) => {
   const state = getState();
   const previousKey = state.current;
+  const reason = req.body?.reason;
 
+  // Wechseln
   state.current = state.current === "A" ? "B" : "A";
+  
+  // Grund speichern (oder null wenn keiner angegeben)
+  state.lastReason = reason || null;
+  
+  // State persistent speichern
   setState(state);
 
-  console.log(
+  const logMessage = reason
-    `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name}`
+    ? `Pay-Switch: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (Grund: ${reason})`
-  );
+    : `Pay-Switch: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (kein Grund)`;
   
-  await sendDiscordEmbed(previousKey, state.current);
+  console.log(logMessage);
+
+  // Discord Benachrichtigung - IMMER senden, auch ohne Grund!
+  await sendDiscordEmbed(previousKey, state.current, reason);
 
   res.json({
     current: state.current,
-    name: CONFIG[state.current].name
+    name: CONFIG[state.current].name,
+    lastReason: state.lastReason
   });
 });
 
-// Fallback
+app.get("/health", (req, res) => {
-app.get(/.*/, (req, res) => {
+  res.json({ status: "ok" });
-  res.sendFile(path.join(__dirname, "public/index.html"));
+});
+
+// --------------------
+// SPA Fallback - NO CRASH
+// --------------------
+app.use((req, res, next) => {
+  if (res.headersSent) return;
+  
+  if (req.url.startsWith('/api/')) {
+    return res.status(404).json({ error: 'Not found' });
+  }
+  
+  const acceptsHtml = req.accepts('html');
+  if (acceptsHtml) {
+    return res.sendFile(path.join(__dirname, "public/index.html"));
+  }
+  
+  res.status(404).send('Not found');
+});
+
+// Error handler
+app.use((err, req, res, next) => {
+  console.error('Server error:', err);
+  res.status(500).json({ error: 'Internal server error' });
 });
 
 // --------------------
 // Start
 // --------------------
-const PORT = process.env.PORT || 3000;
+app.listen(PORT, "0.0.0.0", () => {
-app.listen(PORT, () =>
+  console.log(`\n✅ WhoPays läuft auf http://0.0.0.0:${PORT}\n`);
-  console.log(`WhoPays läuft auf http://localhost:${PORT}`)
+  console.log(`📁 Static files directory: ${path.join(__dirname, "public")}`);
-);
+  console.log(`🔒 Trust proxy: enabled (for reverse proxy support)`);
+  
+  // Initial state laden und anzeigen
+  const initialState = getState();
+  console.log(`\n🎲 Aktueller Status:`);
+  console.log(`   👤 Wer zahlt: ${CONFIG[initialState.current].name}`);
+  console.log(`   📝 Letzter Grund: ${initialState.lastReason || 'Keiner gespeichert'}`);
+  
+  console.log(`\n👥 Konfigurierte Personen:`);
+  console.log(`   A: ${CONFIG.A.name} (${CONFIG.A.colorHex})`);
+  console.log(`   B: ${CONFIG.B.name} (${CONFIG.B.colorHex})`);
+  
+  // Discord Webhook Test
+  console.log(`\n🔔 Discord Webhook:`);
+  if (DISCORD_WEBHOOK_URL) {
+    console.log(`   ✅ Konfiguriert: ${DISCORD_WEBHOOK_URL.substring(0, 50)}...`);
+  } else {
+    console.log(`   ❌ NICHT konfiguriert!`);
+  }
+  
+  // Verify critical files exist
+  const criticalFiles = [
+    'public/index.html',
+    'public/service-worker.js',
+    'public/manifest.json'
+  ];
+  
+  console.log('\n🔍 Checking critical files:');
+  criticalFiles.forEach(file => {
+    const fullPath = path.join(__dirname, file);
+    const exists = fs.existsSync(fullPath);
+    console.log(`   ${exists ? '✅' : '❌'} ${file}`);
+  });
+  
+  console.log('\n📝 Test URLs:');
+  console.log(`   http://localhost:${PORT}/`);
+  console.log(`   http://localhost:${PORT}/service-worker.js`);
+  console.log(`   http://localhost:${PORT}/manifest.json\n`);
+});

state.json

@@ -1,3 +1,3 @@
 {
-  "current": "A"
+  "current": "B"
 }