hinzugefügt: Grund für Tausch + Discord benachrichtigung + PWA

public/index.html

@@ -5,14 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="manifest" href="manifest.json" />
     <meta name="theme-color" content="#ec4899" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="apple-touch-icon" href="img/icon-192.png" />
     <title>Wer zahlt?</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </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">
       <h1 class="text-4xl font-extrabold drop-shadow-sm tracking-tight">
         Who pays?
       </h1>
@@ -35,14 +38,31 @@
         </div>
       </div>
 
+      <!-- Reason Input Section -->
+      <div class="space-y-3">
+        <input
+          id="reasonInput"
+          type="text"
+          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="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"
+          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>
     if ("serviceWorker" in navigator) {

public/manifest.json

@@ -1,20 +1,23 @@
 {
-  "name": "WhoPays",
+  "name": "Who´s gonna pay this time?",
   "short_name": "WhoPays",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#2c3e50",
+  "background_color": "#fef3c7",
+  "theme_color": "#ec4899",
+  "orientation": "portrait",
   "icons": [
     {
-      "src": "/icons/icon-192.png",
+      "src": "/img/icon-192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
-      "src": "/icons/icon-512.png",
+      "src": "/img/icon-512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
 }

public/script.js

@@ -1,11 +1,20 @@
 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");
 
 async function loadStatus() {
   const res = await fetch("/status");
   const data = await res.json();
   showStatus(data.current, false);
+  
+  // Show last reason if available
+  if (data.lastReason) {
+    lastReasonText.textContent = data.lastReason;
+    lastReasonBox.classList.remove("hidden");
+  }
 }
 
 function showStatus(person, animate = true) {
@@ -40,9 +49,34 @@ function showStatus(person, animate = true) {
 
 
 button.addEventListener("click", async () => {
-  const res = await fetch("/toggle", { method: "POST" });
+  const reason = reasonInput.value.trim();
+  
+  const res = await fetch("/toggle", { 
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ reason: reason || undefined })
+  });
+  
   const data = await res.json();
   showStatus(data.current);
+  
+  // Update last reason display
+  if (reason) {
+    lastReasonText.textContent = reason;
+    lastReasonBox.classList.remove("hidden");
+  }
+  
+  // Clear input
+  reasonInput.value = "";
+});
+
+// Allow Enter key to trigger switch
+reasonInput.addEventListener("keypress", (e) => {
+  if (e.key === "Enter") {
+    button.click();
+  }
 });
 
 loadStatus();

public/serviceworker.js

@@ -1,23 +1,76 @@
-const CACHE_NAME = "whopays-cache-v1";
-const URLS_TO_CACHE = [
+const CACHE_NAME = "whopays-v1";
+const urlsToCache = [
   "/",
   "/index.html",
   "/style.css",
-  "/script.js"
+  "/script.js",
+  "/img/a.png",
+  "/img/b.png",
+  "/img/bgA.jpg",
+  "/img/bgB.jpg",
+  "/manifest.json"
 ];
 
-self.addEventListener("install", event => {
+// Install event - cache assets
+self.addEventListener("install", (event) => {
   event.waitUntil(
-    caches.open(CACHE_NAME).then(cache => {
-      return cache.addAll(URLS_TO_CACHE);
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log("Cache geöffnet");
+      return cache.addAll(urlsToCache).catch(err => {
+        console.error("Cache fehler:", err);
+      });
     })
   );
+  self.skipWaiting();
 });
 
-self.addEventListener("fetch", event => {
+// Activate event - clean old caches
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            console.log("Alte Cache löschen:", cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener("fetch", (event) => {
+  // Network first for API calls
+  if (event.request.url.includes("/status") || 
+      event.request.url.includes("/toggle")) {
     event.respondWith(
-    caches.match(event.request).then(response => {
-      return response || fetch(event.request);
+      fetch(event.request).catch(() => {
+        return new Response(
+          JSON.stringify({ error: "Offline" }),
+          { headers: { "Content-Type": "application/json" } }
+        );
+      })
+    );
+    return;
+  }
+
+  // Cache first for static assets
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request).then((fetchResponse) => {
+        return caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, fetchResponse.clone());
+          return fetchResponse;
+        });
+      });
+    }).catch(() => {
+      // Fallback for navigation requests
+      if (event.request.mode === 'navigate') {
+        return caches.match('/index.html');
+      }
     })
   );
 });

server.js

@@ -45,7 +45,7 @@ function getState() {
   if (!fs.existsSync(stateFile)) {
     fs.writeFileSync(
       stateFile,
-      JSON.stringify({ current: "A" }, null, 2)
+      JSON.stringify({ current: "A", lastReason: null }, null, 2)
     );
   }
   return JSON.parse(fs.readFileSync(stateFile, "utf-8"));
@@ -58,20 +58,13 @@ function setState(newState) {
 // --------------------
 // 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;
 
-  const embed = {
-    title: "💸 Zahl-Wechsel",
-    description: `**${current.name}** ist jetzt dran zu zahlen`,
-    color: current.color,
-    thumbnail: {
-      url: `${PUBLIC_BASE_URL}/img/${current.icon}`
-    },
-    fields: [
+  const fields = [
     {
       name: "Von",
       value: previous.name,
@@ -82,7 +75,25 @@ async function sendDiscordEmbed(previousKey, currentKey) {
       value: current.name,
       inline: true
     }
-    ],
+  ];
+
+  // Add reason field if provided
+  if (reason) {
+    fields.push({
+      name: "📝 Grund",
+      value: reason,
+      inline: false
+    });
+  }
+
+  const embed = {
+    title: "💸 Zahl-Wechsel",
+    description: `**${current.name}** ist jetzt dran zu zahlen`,
+    color: current.color,
+    thumbnail: {
+      url: `${PUBLIC_BASE_URL}/img/${current.icon}`
+    },
+    fields: fields,
     footer: {
       text: new Date().toLocaleString("de-DE")
     }
@@ -96,8 +107,9 @@ async function sendDiscordEmbed(previousKey, currentKey) {
         embeds: [embed]
       })
     });
+    console.log("✅ Discord Benachrichtigung gesendet");
   } catch (err) {
-    console.error("Discord Webhook Fehler:", err.message);
+    console.error("❌ Discord Webhook Fehler:", err.message);
   }
 }
 
@@ -115,19 +127,24 @@ app.get("/status", (req, res) => {
 app.post("/toggle", async (req, res) => {
   const state = getState();
   const previousKey = state.current;
+  const reason = req.body?.reason;
 
   state.current = state.current === "A" ? "B" : "A";
+  state.lastReason = reason || null;
   setState(state);
 
-  console.log(
-    `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name}`
-  );
+  const logMessage = reason
+    ? `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (Grund: ${reason})`
+    : `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name}`;
   
-  await sendDiscordEmbed(previousKey, state.current);
+  console.log(logMessage);
+
+  await sendDiscordEmbed(previousKey, state.current, reason);
 
   res.json({
     current: state.current,
-    name: CONFIG[state.current].name
+    name: CONFIG[state.current].name,
+    lastReason: state.lastReason
   });
 });
 

state.json

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