<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PWA Install Example</title>

  <!-- Manifest -->
  <link rel="manifest" href="manifest.json">

  <!-- Color for status bar -->
  <meta name="theme-color" content="#2196f3">

  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
     background: 
        linear-gradient(to bottom, transparent 0%, white 40%, white 60%, transparent 100%),
        url("wi.jpg") no-repeat center center fixed;
      background-size: cover;
    }
    #installBtn {
      display: none;
      padding: 12px 20px;
      background: #2196f3;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
 
  
  <button id="installBtn">Install App</button>

  <script>
    let deferredPrompt;
    const installBtn = document.getElementById('installBtn');

    // Angalia kama kuna beforeinstallprompt
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      deferredPrompt = e;
      installBtn.style.display = 'inline-block';
    });

    // Button ya kusetup install
    installBtn.addEventListener('click', async () => {
      if (deferredPrompt) {
        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;
        if (outcome === 'accepted') {
          console.log('User accepted the install');
        } else {
          console.log('User dismissed the install');
        }
        deferredPrompt = null;
        installBtn.style.display = 'none';
      }
    });

    // Sajili service worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service_worker.js')
        .then(() => console.log('Service Worker registered'))
        .catch(err => console.log('SW reg failed:', err));
    }
  </script>
</body>
</html>
