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,12 +38,29 @@
         </div>
       </div>
 
-      <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"
-      >
-        Switch 🔁
-      </button>
+      <!-- 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="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>
@@ -53,4 +73,4 @@
     </script>
 
   </body>
-</html>
+</html>

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 = "";
 });
 
-loadStatus();
+// 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(
+      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);
+    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');
+      }
     })
   );
 });