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>