PWA Banner entfernt und Laden verbessert

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();