WhoPays/public/index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- PWA Meta Tags -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#ec4899" />
    <meta name="mobile-web-app-capable" content="yes" />
    
    <!-- iOS Specific -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="WhoPays" />
    <link rel="apple-touch-icon" href="/img/icon-192.png" />
    
    <!-- Android Specific -->
    <meta name="mobile-web-app-capable" content="yes" />
    
    <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 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">
      <h1 class="text-4xl font-extrabold drop-shadow-sm tracking-tight">
        Who pays?
      </h1>

      <div
        id="statusBox"
        class="flex flex-col items-center space-y-4 transition-all duration-500"
      >
        <img
          id="personImg"
          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"
        />
        <div
          id="personName"
          class="text-3xl font-semibold text-blue-800 transition-all duration-500"
        >
          Load ...
        </div>
      </div>

      <!-- 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>
    <script>
    // Service Worker Registration
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("/service-worker.js")
      .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>
</html>