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>

public/manifest.json

@@ -11,25 +11,25 @@
   "categories": ["utilities", "lifestyle"],
   "icons": [
     {
-      "src": "/img/icon-192.png",
+      "src": "/icons/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/img/icon-192.png",
+      "src": "/icons/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/img/icon-512.png",
+      "src": "/icons/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/img/icon-512.png",
+      "src": "/icons/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"

public/script.js

@@ -4,11 +4,56 @@ 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");
+
+// 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;
+  });
+}
+
+// Preload all images on page load
+async function preloadAllImages() {
+  try {
+    await Promise.all([
+      preloadImage('img/a.png'),
+      preloadImage('img/b.png'),
+      preloadImage('img/bgA.jpg'),
+      preloadImage('img/bgB.jpg')
+    ]);
+    console.log("✅ Alle Bilder vorgeladen");
+  } catch (err) {
+    console.warn("⚠️ Fehler beim Vorladen:", err);
+  }
+}
 
 async function loadStatus() {
+  // Preload images first
+  await preloadAllImages();
+  
   const res = await fetch("/status");
   const data = await res.json();
-  showStatus(data.current, false);
+  
+  // 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) {
@@ -17,59 +62,63 @@ async function loadStatus() {
   }
 }
 
-function showStatus(person, animate = true) {
+function setBackgroundAndImage(person, animate = true) {
   const file = person === "A" ? "img/a.png" : "img/b.png";
   const label = person === "A" ? "Honey" : "Kirby";
+  const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";
 
-  // Hintergrundbilder für A und B
-  const bgA = "url('img/bgA.jpg')";
-  const bgB = "url('img/bgB.jpg')";
-
-  // Hintergrundanimation (optional)
-  document.body.style.transition = "background 0.4s ease";
-
-  // Hintergrund setzen
-  document.body.style.backgroundImage = person === "A" ? bgA : bgB;
+  // 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 and name in the middle of rotation
+    setTimeout(() => {
+      img.src = file;
+      nameEl.textContent = label;
+    }, 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);
-
-  setTimeout(() => {
-    img.classList.remove("rotate");
-  }, 600);
+  }
 }
 
-
 button.addEventListener("click", async () => {
   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");
+  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!";
   }
-  
-  // Clear input
-  reasonInput.value = "";
 });
 
 // Allow Enter key to trigger switch
@@ -79,4 +128,5 @@ reasonInput.addEventListener("keypress", (e) => {
   }
 });
 
+// Start loading
 loadStatus();

public/style.css

@@ -19,11 +19,11 @@
     opacity: 1;
   }
   50% {
-    transform: rotateY(180deg); /* Half flip */
-    opacity: 0; /* Make the front disappear */
+    transform: rotateY(90deg);
+    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;
+  transition: opacity 0.3s ease;
+}
+
+/* Background transition */
+body {
+  will-change: background-image;
 }