PWA Banner entfernt und Laden verbessert

public/index.html

@@ -21,24 +21,41 @@
     <title>Wer zahlt?</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 p-4"
   >
-    <!-- Install Banner (shows on compatible devices) -->
-    <div id="installBanner" class="hidden fixed top-0 left-0 right-0 bg-pink-500 text-white p-3 shadow-lg z-50">
-      <div class="max-w-md mx-auto flex items-center justify-between">
-        <span class="text-sm">📱 App installieren für bessere Erfahrung!</span>
-        <div class="space-x-2">
-          <button id="installBtn" class="bg-white text-pink-500 px-3 py-1 rounded-lg text-sm font-medium">
-            Installieren
-          </button>
-          <button id="dismissBtn" class="text-white text-sm">✕</button>
-        </div>
-      </div>
-    </div>
-
-    <div class="text-center space-y-8 w-full max-w-md mt-16">
+    <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>
@@ -52,12 +69,13 @@
           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"
         >
-          Load ...
+          Lädt ...
         </div>
       </div>
 
@@ -94,39 +112,6 @@
       .then(reg => console.log("✅ Service Worker registriert", reg.scope))
       .catch(err => console.error("❌ SW Fehler:", err));
     }
-
-    // PWA Install Prompt
-    let deferredPrompt;
-    const installBanner = document.getElementById("installBanner");
-    const installBtn = document.getElementById("installBtn");
-    const dismissBtn = document.getElementById("dismissBtn");
-
-    window.addEventListener("beforeinstallprompt", (e) => {
-      console.log("✅ PWA installierbar!");
-      e.preventDefault();
-      deferredPrompt = e;
-      installBanner.classList.remove("hidden");
-    });
-
-    installBtn.addEventListener("click", async () => {
-      if (!deferredPrompt) return;
-      
-      deferredPrompt.prompt();
-      const { outcome } = await deferredPrompt.userChoice;
-      console.log(`PWA install: ${outcome}`);
-      
-      deferredPrompt = null;
-      installBanner.classList.add("hidden");
-    });
-
-    dismissBtn.addEventListener("click", () => {
-      installBanner.classList.add("hidden");
-    });
-
-    window.addEventListener("appinstalled", () => {
-      console.log("✅ PWA erfolgreich installiert!");
-      deferredPrompt = null;
-    });
     </script>
 
   </body>