Updating readme and adding screenshots

README.md

@@ -2,24 +2,38 @@
 
 PackIt is a smart packing list generator for outdoor activities. Select the activities you're planning — camping, skiing, kayaking, and more — and PackIt produces a deduplicated, grouped checklist of everything you need to bring.
 
+## Screenshots
+
+### Desktop
+![Activity selection on desktop](screenshots/screenshot_desktop.png)
+
+### Mobile
+
+| Activity selection | Packing list |
+|---|---|
+| ![Activity selection on mobile](screenshots/screenshot_mobile2.jpg) | ![Packing list on mobile](screenshots/screenshot_mobile.jpg) |
+
 ## How it works
 
 1. **Choose your activities** — Pick one or more activities from the activity selection page. Activities are organised into groups (e.g. Overnight, Water Activities, Winter Sports).
-2. **Generate your list** — PackIt merges all item requirements across your selected activities, removing duplicates, and groups the result by category (Clothing, Shelter, Navigation, etc.).
+2. **Generate your list** — PackIt merges all item requirements across your selected activities, removing duplicates, and groups the result by category (Clothing, Shelter, Navigation, etc.). When the same item is mapped to multiple activities with different quantities, the highest quantity wins.
 3. **Pack and check off** — Work through the interactive checklist, ticking items as you pack them. A progress bar tracks how far along you are.
-4. **Share or print** — Every list gets a permanent, shareable URL. You can also print the list directly from the browser.
+4. **Share or print** — Every list gets a permanent, shareable short URL. You can also print the list directly from the browser.
 
 ## Features
 
 - **Activity-based list generation** — Items are mapped to activities in the database. Selecting multiple activities produces a single merged list with no duplicate entries.
+- **Per-mapping quantities** — Each activity-to-item mapping carries a quantity. Items needed in multiples (e.g. 2× Water bottle) are rendered with a leading multiplier, and merging across activities keeps the largest required quantity.
 - **Grouped items** — Items are organised into logical categories (Clothing, Shelter, Navigation, Medical, Water & Food, Safety Gear) for easy scanning.
 - **Interactive checklist** — Click any item to mark it as packed. Checked items are visually struck through and a progress bar updates in real time.
-- **Shareable URLs** — Each unique activity selection is stored with a SHA-256 hash and accessible via a permanent link you can send to teammates or trip partners.
+- **Shareable short URLs** — Each unique activity selection is stored under a deterministic 5-character hash, producing a permanent link short enough to share comfortably over chat or read out loud.
+- **Installable PWA** — A web app manifest, theme color, and maskable icons let PackIt be installed to the home screen on mobile or as a standalone app on desktop.
 - **Print support** — The packing list page has a print stylesheet that removes UI chrome and renders a clean black-and-white checklist.
 - **Admin panel** — A password-protected admin interface at `/admin/` lets you manage all content:
   - Activity groups and activities
   - Item groups and items
-  - Activity-to-item mappings
+  - Activity-to-item mappings (with quantities)
+  - Inline editing on every list page — edit fields render in place within the table column, so the page no longer jumps to the top on each edit
   - Dashboard with counts of all entities
 
 ## Tech stack
@@ -27,6 +41,7 @@ PackIt is a smart packing list generator for outdoor activities. Select the acti
 - **Backend:** PHP with PDO
 - **Database:** MySQL (schema in `schema.sql`)
 - **Frontend:** Vanilla HTML/CSS/JS — no build step required
+- **PWA:** `manifest.webmanifest` plus icons in `img/`
 
 ## Setup
 
@@ -35,8 +50,8 @@ PackIt is a smart packing list generator for outdoor activities. Select the acti
    mysql -u <user> -p < schema.sql
    ```
 2. Copy `config.php` and set your database credentials.
-3. Serve the project with any PHP-capable web server (Apache, Nginx, PHP built-in server).
-4. Open the site in a browser and start selecting activities.
+3. Serve the project with any PHP-capable web server (Apache, Nginx, PHP built-in server). The included `.htaccess` ensures the `.webmanifest` MIME type is served correctly and denies HTTP access to `config.php`.
+4. Open the site in a browser and start selecting activities. On mobile, use the browser's "Add to Home Screen" option to install PackIt as an app.
 
 ### Admin password
 
@@ -69,12 +84,16 @@ packing.php            Displays the shareable packing list
 db.php                 PDO connection helper
 config.php             Database credentials
 schema.sql             Database schema and sample data
+manifest.webmanifest   PWA manifest (installable web app)
+.htaccess              MIME type for manifest, blocks config.php over HTTP
+img/                   App icons (192/512, plus maskable variants)
 admin/
   index.php            Dashboard
   activities.php       Manage activities
   activity_groups.php  Manage activity groups
   items.php            Manage items
   item_groups.php      Manage item groups
-  mappings.php         Manage activity-to-item mappings
+  mappings.php         Manage activity-to-item mappings (with quantities)
+  layout.php           Shared admin layout
   login.php / auth.php Authentication
 ```