From c69731d5d5c610c0b606f8dd855efd4c994926ca Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sat, 22 Nov 2025 20:34:25 -0500
Subject: [PATCH] Add in-app install prompt CTA for PWA

---
 index.html | 35 ++++++++++++++++++++++++++++++++++-
 style.css  | 21 +++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index b667f0c..955a04b 100644
--- a/index.html
+++ b/index.html
@@ -115,10 +115,12 @@
         </button>
     </div>
 
-    <div class="feedback" id="feedback-msg"></div>
+<div class="feedback" id="feedback-msg"></div>
     <div id="quick-consumables" class="quick-consumables"></div>
 </div>
 
+<button id="install-cta" class="install-cta hidden" type="button" aria-label="Install Hogwarts Arithmancy">⬇️ Install app</button>
+
 <script src="app.js"></script>
 <script>
 if ('serviceWorker' in navigator) {
@@ -128,6 +130,37 @@ if ('serviceWorker' in navigator) {
         });
     });
 }
+
+(function setupInstallPrompt() {
+    const installBtn = document.getElementById('install-cta');
+    let deferredPrompt = null;
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+        e.preventDefault();
+        deferredPrompt = e;
+        if (installBtn) installBtn.classList.remove('hidden');
+    });
+
+    window.addEventListener('appinstalled', () => {
+        deferredPrompt = null;
+        if (installBtn) installBtn.classList.add('hidden');
+    });
+
+    if (installBtn) {
+        installBtn.addEventListener('click', async () => {
+            if (!deferredPrompt) return;
+            installBtn.disabled = true;
+            try {
+                deferredPrompt.prompt();
+                await deferredPrompt.userChoice;
+            } finally {
+                deferredPrompt = null;
+                installBtn.classList.add('hidden');
+                installBtn.disabled = false;
+            }
+        });
+    }
+})();
 </script>
 </body>
 </html>
diff --git a/style.css b/style.css
index b70d91c..623878d 100644
--- a/style.css
+++ b/style.css
@@ -167,6 +167,27 @@
         .trail-ice { background: #e0ffff; box-shadow: 0 0 8px #00ffff; }
         .trail-slime { background: #39ff14; box-shadow: 0 0 8px #39ff14; }
 
+        /* --- INSTALL CTA --- */
+        .install-cta {
+            position: fixed;
+            right: 18px;
+            bottom: calc(18px + env(safe-area-inset-bottom));
+            background: linear-gradient(135deg, #740001, #9b1b1b);
+            color: var(--gold);
+            border: 1px solid var(--gold);
+            border-radius: 999px;
+            padding: 10px 16px;
+            font-family: 'Cinzel', serif;
+            font-size: 0.9rem;
+            letter-spacing: 0.4px;
+            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
+            z-index: 1400;
+            cursor: pointer;
+        }
+        .install-cta:hover { filter: brightness(1.05); }
+        .install-cta:active { transform: translateY(1px); }
+        .install-cta.hidden { display: none !important; }
+
         /* --- DEMENTOR --- */
         #dementor-overlay {
             position: absolute;