Make it installable as web application

.htaccess

@@ -0,0 +1,7 @@
+# Ensure the PWA manifest is served with the correct MIME type.
+AddType application/manifest+json .webmanifest
+
+# Never serve config.php over HTTP (defense in depth — deploy.sh already excludes it).
+<Files "config.php">
+    Require all denied
+</Files>

img/icon-maskable.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <rect width="512" height="512" fill="#162447"/>
+  <rect x="187" y="136" width="54" height="240" fill="#e8c547"/>
+  <path d="M 241,136 A 84,84 0 0,1 241,304 L 241,250 A 30,30 0 0,0 241,190 Z" fill="#e8c547"/>
+</svg>

img/icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <rect width="512" height="512" rx="96" fill="#162447"/>
+  <rect x="164" y="96" width="72" height="320" fill="#e8c547"/>
+  <path d="M 236,96 A 112,112 0 0,1 236,320 L 236,248 A 40,40 0 0,0 236,168 Z" fill="#e8c547"/>
+</svg>

index.php

@@ -39,6 +39,9 @@ foreach ($rows as $row) {
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>PackIt – Choose Your Activities</title>
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="theme-color" content="#e8c547">
+<link rel="icon" type="image/png" sizes="192x192" href="/img/icon-192.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

manifest.webmanifest

@@ -0,0 +1,38 @@
+{
+  "name": "PackIt",
+  "short_name": "PackIt",
+  "description": "Smart packing list generator for outdoor activities.",
+  "start_url": "/index.php",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#0f1117",
+  "theme_color": "#e8c547",
+  "lang": "en",
+  "icons": [
+    {
+      "src": "/img/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/img/icon-192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

packing.php

@@ -84,6 +84,9 @@ $totalItems = count($allItems);
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>PackIt – Your Packing List</title>
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="theme-color" content="#e8c547">
+<link rel="icon" type="image/png" sizes="192x192" href="/img/icon-192.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">