From f2e9827fcfdb93784e47c1b3ab5d2661f280ed03 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Wed, 23 Jul 2025 18:19:06 +0200
Subject: [PATCH] =?UTF-8?q?Add=20=E2=80=9EAdd=20to=20Homescreen=E2=80=9C-P?=
 =?UTF-8?q?rompt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 80 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
diff --git a/templates/index.html b/templates/index.html
index 91bc06e..7f0c6f2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,6 +22,48 @@
     <link rel="stylesheet" href="/static/style.css">
     <link rel="manifest" href="/static/manifest.json">
     <meta name="theme-color" content="#2563eb">
+    <style>
+    .pwa-banner {
+        display: none;
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        background: #2563eb;
+        color: #fff;
+        padding: 1em 1.5em 1.2em 1.5em;
+        box-shadow: 0 -2px 12px #1e293b22;
+        z-index: 1000;
+        font-size: 1.08em;
+        text-align: center;
+        border-radius: 16px 16px 0 0;
+        margin: 0 auto;
+        max-width: 480px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .pwa-banner button {
+        background: #fff;
+        color: #2563eb;
+        border: none;
+        border-radius: 6px;
+        font-weight: 600;
+        padding: 0.5em 1.2em;
+        margin-left: 1em;
+        cursor: pointer;
+    }
+    .pwa-banner .close-btn {
+        background: none;
+        color: #fff;
+        border: none;
+        font-size: 1.3em;
+        position: absolute;
+        right: 1.2em;
+        top: 0.7em;
+        cursor: pointer;
+    }
+    @media (min-width: 600px) {
+        .pwa-banner { max-width: 420px; }
+    }
+    </style>
     <script>
         function setToday(id) {
             const today = new Date().toISOString().split('T')[0];
@@ -38,6 +80,39 @@
         document.addEventListener('DOMContentLoaded', function() {
             openAccordion(parseInt("{{ active_idx|default(0) }}"));
         });
+        let deferredPrompt;
+        function isIos() {
+            return /iphone|ipad|ipod/i.test(navigator.userAgent);
+        }
+        function isInStandaloneMode() {
+            return ('standalone' in window.navigator) && window.navigator.standalone;
+        }
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            showPwaBanner('Installiere diese App für ein besseres Erlebnis!');
+            document.getElementById('pwa-install-btn').style.display = '';
+        });
+        function showPwaBanner(text) {
+            const banner = document.getElementById('pwa-banner');
+            document.getElementById('pwa-banner-text').textContent = text;
+            banner.style.display = 'block';
+        }
+        document.getElementById('pwa-install-btn').addEventListener('click', function() {
+            if (deferredPrompt) {
+                deferredPrompt.prompt();
+                deferredPrompt.userChoice.then(() => {
+                    deferredPrompt = null;
+                    document.getElementById('pwa-banner').style.display = 'none';
+                });
+            }
+        });
+        // iOS Fallback
+        window.addEventListener('load', function() {
+            if (isIos() && !isInStandaloneMode()) {
+                showPwaBanner('Tipp: Über das Teilen-Menü → Zum Home-Bildschirm hinzufügen');
+            }
+        });
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
                 navigator.serviceWorker.register('/static/service-worker.js');
@@ -46,6 +121,11 @@
     </script>
 </head>
 <body>
+    <div id="pwa-banner" class="pwa-banner">
+        <span id="pwa-banner-text"></span>
+        <button id="pwa-install-btn" style="display:none;">Installieren</button>
+        <button class="close-btn" onclick="document.getElementById('pwa-banner').style.display='none'">×</button>
+    </div>
     <div class="container">
         <h1>Elpatrons Datumsrechner</h1>
         <div class="accordion">
