commit 726325e501463f5b3852da0a5958e16ca9f28fd2
Author: Eric Wagoner <ewagoner@gmail.com>
Date:   Tue Dec 23 22:20:27 2025 -0500

    Initial commit: Pantry inventory tracker
    
    A simple web app for tracking kitchen pantry items with:
    - Search and filter by stock status, spices, or container type
    - PIN-protected editing
    - Shopping list export (tap Out of Stock to copy)
    - QR code for quick mobile access
    - OpenGraph card for social sharing
    
    🤖 Generated with [Claude Code](https://claude.com/claude-code)
    
    Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..47e5073
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+# User data
+data/
+
+# macOS
+.DS_Store
+
+# Editor files
+*.swp
+*.swo
+*~
+
+# Claude Code local settings
+.claude/
+
+# Archives
+*.zip
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..8a4b561
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,50 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Pantry is a simple web app for tracking kitchen pantry items. It's a single-page application with no build step, consisting of just two files:
+- `index.html` - Frontend (HTML/CSS/JS all in one file)
+- `api.php` - Backend API (JSON file-based storage)
+
+## Architecture
+
+**Frontend (`index.html`)**:
+- Vanilla JavaScript, no frameworks
+- Uses QRCode.js from CDN for QR code generation
+- Custom CSS with CSS variables for theming (earthy color palette: cream, terracotta, forest green)
+- Container types defined in `containerTypes` object (around line 754) - must be kept in sync with backend
+- All API calls go through the `apiCall()` function which POSTs to `api.php`
+
+**Backend (`api.php`)**:
+- JSON file-based storage in `data/` directory
+- Endpoints: `get`, `add`, `update`, `delete`, `setPin`, `verifyPin`
+- Default inventory defined in `$defaultInventory` array (lines 31-64)
+- Container types should match frontend when modified
+
+**Data Storage**:
+- `data/inventory.json` - Inventory items
+- `data/pin.txt` - 4-digit PIN for edit mode (plain text, view-only protection)
+
+## Development
+
+This is a no-build project. To test locally:
+
+```bash
+php -S localhost:8000
+```
+
+Then open `http://localhost:8000` in a browser.
+
+## Key Implementation Details
+
+- PIN system is view-only protection (anyone can view, PIN required to edit)
+- PIN stored in plain text - adequate for household use only
+- Items have: `id`, `name`, `container` (type), `outOfStock` (boolean)
+- Frontend sorts items: in-stock first, then alphabetically
+- 8 container types with color-coded dots in UI
+
+## Deployment
+
+Designed for YunoHost "My Webapp" deployment. Upload `index.html` and `api.php` to the `www/` folder. The `data/` directory is created automatically and must be writable by the web server.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6c038f6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,125 @@
+# Pantry Inventory App
+
+A simple web app for tracking kitchen pantry items across your household.
+
+## Features
+
+- **Search** - Instantly filter ingredients by name
+- **Container tracking** - 8 container types with color-coded indicators
+- **Stock status** - Mark items as in-stock or out-of-stock
+- **PIN protection** - Anyone can view, but editing requires a 4-digit PIN
+- **QR Code** - Generate a scannable code to post on your pantry shelf
+- **Shared data** - All household members see the same inventory
+
+## Deployment on YunoHost (My Webapp)
+
+### 1. Install My Webapp
+
+In YunoHost admin panel:
+1. Go to **Applications** → **Install**
+2. Search for "My Webapp"
+3. Configure:
+   - **Label**: Pantry (or whatever you prefer)
+   - **Domain/Path**: e.g., `yourdomain.com/pantry`
+   - **PHP version**: 8.2 or higher
+   - **Database**: None needed
+4. Install
+
+### 2. Upload Files
+
+Connect via SFTP using the credentials shown after installation, then upload to the `www` folder:
+
+```
+www/
+├── index.html      (the main app)
+├── api.php         (backend API)
+└── data/           (created automatically)
+    ├── inventory.json
+    └── pin.txt
+```
+
+### 3. Set Permissions
+
+The `data` folder needs to be writable by the web server. This should happen automatically, but if you have issues:
+
+```bash
+# SSH into your YunoHost server
+cd /var/www/pantry/www   # adjust path as needed
+mkdir -p data
+chmod 755 data
+```
+
+### 4. First Use
+
+1. Visit your app URL (e.g., `https://yourdomain.com/pantry`)
+2. The app loads with a pre-populated inventory based on your photos
+3. Tap the lock icon → Set a 4-digit PIN for your household
+4. Share the PIN with family members who need edit access
+5. Go to the QR Code tab and print it for your pantry
+
+## File Structure
+
+```
+index.html    - Frontend (HTML/CSS/JS, no build step)
+api.php       - Backend API (reads/writes JSON files)
+data/
+  inventory.json  - Your inventory data
+  pin.txt         - Stored PIN (hashed would be better for production)
+```
+
+## Container Types
+
+The app supports these container types (edit in both index.html and api.php if you want to change them):
+
+| ID | Name |
+|----|------|
+| glass-bail-large | Glass Bail Jar (Large) |
+| glass-bail-medium | Glass Bail Jar (Medium) |
+| glass-bail-small | Glass Bail Jar (Small) |
+| oxo-large | OXO Container (Large) |
+| oxo-medium | OXO Container (Medium) |
+| oxo-small | OXO Container (Small) |
+| original-package | Original Package |
+| mason-jar | Mason Jar |
+
+## Customization
+
+### Adding Container Types
+
+1. In `index.html`, find the `containerTypes` object and add your new type
+2. In the `<select>` dropdown for containers, add a new `<option>`
+
+### Changing the Default Inventory
+
+Edit the `$defaultInventory` array in `api.php`. This only applies on first run (before `inventory.json` exists).
+
+### Resetting Everything
+
+Delete the `data` folder contents to start fresh:
+```bash
+rm data/inventory.json data/pin.txt
+```
+
+## Security Notes
+
+- The PIN is stored in plain text. This is fine for a household app where you just want to prevent accidental edits, but don't use this for anything sensitive.
+- There's no authentication beyond the PIN - anyone with the URL can view your inventory.
+- For a more secure setup, you could put the app behind YunoHost's SSO.
+
+## Backup
+
+YunoHost's My Webapp will backup the entire `www` folder including `data/`. Your inventory and PIN are automatically included in YunoHost backups.
+
+## Troubleshooting
+
+**"Connection error" message**
+- Check that PHP is enabled for your My Webapp instance
+- Verify the `data` folder is writable
+
+**PIN not working**
+- Check that `data/pin.txt` exists and contains exactly 4 digits
+- Try deleting `data/pin.txt` to reset
+
+**Inventory not saving**
+- Check `data/inventory.json` permissions
+- Look for PHP errors in YunoHost logs
diff --git a/api.php b/api.php
new file mode 100644
index 0000000..80720bd
--- /dev/null
+++ b/api.php
@@ -0,0 +1,277 @@
+<?php
+/**
+ * Pantry Inventory API
+ * 
+ * Simple JSON file-based backend for the pantry inventory app.
+ * No database required - stores everything in inventory.json
+ */
+
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
+header('Access-Control-Allow-Headers: Content-Type');
+
+// Handle preflight requests
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit();
+}
+
+// File paths
+define('DATA_FILE', __DIR__ . '/data/inventory.json');
+define('PIN_FILE', __DIR__ . '/data/pin.txt');
+define('DATA_DIR', __DIR__ . '/data');
+
+// Ensure data directory exists
+if (!is_dir(DATA_DIR)) {
+    mkdir(DATA_DIR, 0755, true);
+}
+
+// Default inventory (sample data using new container types)
+$defaultInventory = [
+    ['id' => 1, 'name' => 'Bulgur', 'container' => 'glass-flip-med-tall', 'outOfStock' => false],
+    ['id' => 2, 'name' => 'Wild Rice Flour', 'container' => 'glass-flip-med-squat', 'outOfStock' => false],
+    ['id' => 3, 'name' => 'Self Rising Flour', 'container' => 'plastic-oxo-large', 'outOfStock' => false],
+    ['id' => 4, 'name' => 'Whole Wheat Flour', 'container' => 'plastic-oxo-large', 'outOfStock' => false],
+    ['id' => 5, 'name' => 'Cake Flour', 'container' => 'plastic-clamp-large', 'outOfStock' => false],
+    ['id' => 6, 'name' => 'GF Pancake Mix', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 7, 'name' => 'Coconut Flour', 'container' => 'glass-flip-small', 'outOfStock' => false],
+    ['id' => 8, 'name' => 'All Purpose Flour', 'container' => 'plastic-oxo-large', 'outOfStock' => false],
+    ['id' => 9, 'name' => 'Bread Flour', 'container' => 'plastic-clamp-tall', 'outOfStock' => false],
+    ['id' => 10, 'name' => 'Powdered Sugar', 'container' => 'plastic-flip', 'outOfStock' => false],
+    ['id' => 11, 'name' => 'Linguine', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 12, 'name' => 'Fettuccine', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 13, 'name' => 'Penne Rigate', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 14, 'name' => 'Ancho Chile', 'container' => 'glass-flip-large', 'outOfStock' => false],
+    ['id' => 15, 'name' => 'Chocolate Chips', 'container' => 'glass-canning-quart', 'outOfStock' => false],
+    ['id' => 16, 'name' => 'Dried Mushrooms', 'container' => 'glass-canning-pint', 'outOfStock' => false],
+    ['id' => 17, 'name' => 'Bay Leaves', 'container' => 'spice-hex-large', 'outOfStock' => false],
+    ['id' => 18, 'name' => 'Dates', 'container' => 'glass-canning-quart', 'outOfStock' => false],
+    ['id' => 19, 'name' => 'Xanthan Gum', 'container' => 'spice-flip-tiny', 'outOfStock' => false],
+    ['id' => 20, 'name' => 'M.S.G.', 'container' => 'spice-hex-small', 'outOfStock' => false],
+    ['id' => 21, 'name' => 'Potato Starch', 'container' => 'glass-flip-small', 'outOfStock' => false],
+    ['id' => 22, 'name' => 'Potato Flour', 'container' => 'glass-flip-small', 'outOfStock' => false],
+    ['id' => 23, 'name' => 'Garbanzo Flour', 'container' => 'glass-flip-med-squat', 'outOfStock' => false],
+    ['id' => 24, 'name' => 'Mochi Rice Flour', 'container' => 'glass-flip-small', 'outOfStock' => false],
+    ['id' => 25, 'name' => 'Couscous', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 26, 'name' => 'Granola', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 27, 'name' => 'Cheerios', 'container' => 'original-package', 'outOfStock' => false],
+    ['id' => 28, 'name' => 'Baking Powder', 'container' => 'spice-hex-large', 'outOfStock' => false],
+    ['id' => 29, 'name' => 'Corn Starch', 'container' => 'glass-canning-small', 'outOfStock' => false],
+    ['id' => 30, 'name' => 'Cocoa Powder', 'container' => 'spice-hex-large', 'outOfStock' => false],
+];
+
+/**
+ * Load inventory from file
+ */
+function loadInventory() {
+    global $defaultInventory;
+    
+    if (file_exists(DATA_FILE)) {
+        $content = file_get_contents(DATA_FILE);
+        $data = json_decode($content, true);
+        if ($data !== null) {
+            return $data;
+        }
+    }
+    
+    // Initialize with default inventory
+    saveInventory($defaultInventory);
+    return $defaultInventory;
+}
+
+/**
+ * Save inventory to file
+ */
+function saveInventory($inventory) {
+    file_put_contents(DATA_FILE, json_encode($inventory, JSON_PRETTY_PRINT));
+}
+
+/**
+ * Check if PIN is set
+ */
+function hasPinSet() {
+    return file_exists(PIN_FILE) && strlen(trim(file_get_contents(PIN_FILE))) === 4;
+}
+
+/**
+ * Get stored PIN
+ */
+function getPin() {
+    if (file_exists(PIN_FILE)) {
+        return trim(file_get_contents(PIN_FILE));
+    }
+    return null;
+}
+
+/**
+ * Set PIN
+ */
+function setPin($pin) {
+    file_put_contents(PIN_FILE, $pin);
+    // Secure the file
+    chmod(PIN_FILE, 0600);
+}
+
+/**
+ * Verify PIN
+ */
+function verifyPin($pin) {
+    $storedPin = getPin();
+    return $storedPin !== null && $storedPin === $pin;
+}
+
+/**
+ * Get next available ID
+ */
+function getNextId($inventory) {
+    if (empty($inventory)) {
+        return 1;
+    }
+    $maxId = max(array_column($inventory, 'id'));
+    return $maxId + 1;
+}
+
+/**
+ * Sanitize string input
+ */
+function sanitize($str) {
+    return trim($str);
+}
+
+// Main request handling
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!$input || !isset($input['action'])) {
+    // Allow GET requests to view inventory
+    if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+        $inventory = loadInventory();
+        echo json_encode([
+            'success' => true,
+            'inventory' => $inventory,
+            'hasPin' => hasPinSet()
+        ]);
+        exit();
+    }
+    
+    echo json_encode(['error' => 'Invalid request']);
+    exit();
+}
+
+$action = $input['action'];
+
+switch ($action) {
+    case 'get':
+        $inventory = loadInventory();
+        echo json_encode([
+            'success' => true,
+            'inventory' => $inventory,
+            'hasPin' => hasPinSet()
+        ]);
+        break;
+        
+    case 'setPin':
+        $pin = $input['pin'] ?? '';
+        
+        if (strlen($pin) !== 4 || !ctype_digit($pin)) {
+            echo json_encode(['success' => false, 'error' => 'PIN must be 4 digits']);
+            break;
+        }
+        
+        // Only allow setting PIN if not already set
+        if (hasPinSet()) {
+            echo json_encode(['success' => false, 'error' => 'PIN already set']);
+            break;
+        }
+        
+        setPin($pin);
+        echo json_encode(['success' => true]);
+        break;
+        
+    case 'verifyPin':
+        $pin = $input['pin'] ?? '';
+        $valid = verifyPin($pin);
+        echo json_encode(['success' => $valid]);
+        break;
+        
+    case 'add':
+        $name = sanitize($input['name'] ?? '');
+        $container = sanitize($input['container'] ?? 'glass-bail-medium');
+        $outOfStock = (bool)($input['outOfStock'] ?? false);
+        
+        if (empty($name)) {
+            echo json_encode(['success' => false, 'error' => 'Name required']);
+            break;
+        }
+        
+        $inventory = loadInventory();
+        $newItem = [
+            'id' => getNextId($inventory),
+            'name' => $name,
+            'container' => $container,
+            'outOfStock' => $outOfStock
+        ];
+        
+        $inventory[] = $newItem;
+        saveInventory($inventory);
+        
+        echo json_encode(['success' => true, 'item' => $newItem]);
+        break;
+        
+    case 'update':
+        $id = (int)($input['id'] ?? 0);
+        $name = sanitize($input['name'] ?? '');
+        $container = sanitize($input['container'] ?? '');
+        $outOfStock = (bool)($input['outOfStock'] ?? false);
+        
+        if ($id <= 0) {
+            echo json_encode(['success' => false, 'error' => 'Invalid ID']);
+            break;
+        }
+        
+        $inventory = loadInventory();
+        $found = false;
+        
+        foreach ($inventory as &$item) {
+            if ($item['id'] === $id) {
+                if (!empty($name)) $item['name'] = $name;
+                if (!empty($container)) $item['container'] = $container;
+                $item['outOfStock'] = $outOfStock;
+                $found = true;
+                break;
+            }
+        }
+        
+        if (!$found) {
+            echo json_encode(['success' => false, 'error' => 'Item not found']);
+            break;
+        }
+        
+        saveInventory($inventory);
+        echo json_encode(['success' => true]);
+        break;
+        
+    case 'delete':
+        $id = (int)($input['id'] ?? 0);
+        
+        if ($id <= 0) {
+            echo json_encode(['success' => false, 'error' => 'Invalid ID']);
+            break;
+        }
+        
+        $inventory = loadInventory();
+        $originalCount = count($inventory);
+        $inventory = array_values(array_filter($inventory, fn($item) => $item['id'] !== $id));
+        
+        if (count($inventory) === $originalCount) {
+            echo json_encode(['success' => false, 'error' => 'Item not found']);
+            break;
+        }
+        
+        saveInventory($inventory);
+        echo json_encode(['success' => true]);
+        break;
+        
+    default:
+        echo json_encode(['error' => 'Unknown action']);
+}
diff --git a/containers.json b/containers.json
new file mode 100644
index 0000000..845973a
--- /dev/null
+++ b/containers.json
@@ -0,0 +1,39 @@
+{
+  "categories": [
+    {
+      "name": "Glass Jars",
+      "containers": [
+        { "id": "glass-flip-large", "name": "Flip Top (Large)", "color": "#C4684A" },
+        { "id": "glass-flip-med-tall", "name": "Flip Top (Medium Tall)", "color": "#D4856B" },
+        { "id": "glass-flip-med-squat", "name": "Flip Top (Medium Squat)", "color": "#E07B5B" },
+        { "id": "glass-flip-small", "name": "Flip Top (Small)", "color": "#E8A88B" },
+        { "id": "glass-canning-quart", "name": "Canning Jar (Quart)", "color": "#6B8E9B" },
+        { "id": "glass-canning-pint", "name": "Canning Jar (Pint)", "color": "#7FA3B0" },
+        { "id": "glass-canning-small", "name": "Canning Jar (Small)", "color": "#93B8C5" }
+      ]
+    },
+    {
+      "name": "Plastic Containers",
+      "containers": [
+        { "id": "plastic-oxo-large", "name": "OXO Large", "color": "#2D4739" },
+        { "id": "plastic-flip", "name": "Flip Top", "color": "#3D5A4B" },
+        { "id": "plastic-clamp-large", "name": "Clamp Top (Large)", "color": "#4D6A5B" },
+        { "id": "plastic-clamp-tall", "name": "Clamp Top (Tall)", "color": "#5D7A6B" }
+      ]
+    },
+    {
+      "name": "Glass Spice Jars",
+      "containers": [
+        { "id": "spice-hex-large", "name": "Hex (Large)", "color": "#8B7355" },
+        { "id": "spice-hex-small", "name": "Hex (Small)", "color": "#A08668" },
+        { "id": "spice-flip-tiny", "name": "Flip Top (Tiny)", "color": "#B5997B" }
+      ]
+    },
+    {
+      "name": "Other",
+      "containers": [
+        { "id": "original-package", "name": "Original Packaging", "color": "#9A9590" }
+      ]
+    }
+  ]
+}
diff --git a/deploy b/deploy
new file mode 100755
index 0000000..3365eba
--- /dev/null
+++ b/deploy
@@ -0,0 +1,24 @@
+#!/bin/sh
+USER=admin
+HOST=social
+DIR=/var/www/my_webapp__2/www
+
+# Deploy code files
+rsync -avz --no-t --no-p --delete \
+    --exclude 'data/' \
+    index.html api.php containers.json og-image.png ${HOST}:${DIR}
+
+# Handle data files
+if [ "$1" = "--reset-data" ]; then
+    echo "Pushing local data to server..."
+    rsync -avz --no-t --no-p \
+        data/ ${HOST}:${DIR}/data/
+else
+    echo "Pulling data from server..."
+    mkdir -p data
+    rsync -avz --no-t --no-p \
+        --exclude 'pin.txt' \
+        ${HOST}:${DIR}/data/ data/
+fi
+
+exit 0
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ca3374f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pantry Inventory</title>
+
+    <!-- OpenGraph -->
+    <meta property="og:title" content="Pantry">
+    <meta property="og:description" content="Kitchen Inventory Tracker">
+    <meta property="og:image" content="https://pantry.kestrelsnest.social/og-image.png">
+    <meta property="og:url" content="https://pantry.kestrelsnest.social">
+    <meta property="og:type" content="website">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Pantry">
+    <meta name="twitter:description" content="Kitchen Inventory Tracker">
+    <meta name="twitter:image" content="https://pantry.kestrelsnest.social/og-image.png">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --cream: #F5F0E8;
+            --warm-white: #FDFCFA;
+            --terracotta: #C4684A;
+            --terracotta-light: #D4856B;
+            --forest: #2D4739;
+            --forest-light: #3D5A4B;
+            --oak: #8B7355;
+            --oak-light: #A89078;
+            --charcoal: #2C2C2C;
+            --soft-gray: #9A9590;
+            --border: rgba(139, 115, 85, 0.2);
+            --shadow: rgba(44, 44, 44, 0.08);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'DM Sans', sans-serif;
+            background: var(--cream);
+            color: var(--charcoal);
+            min-height: 100vh;
+            line-height: 1.5;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        header {
+            text-align: center;
+            padding: 40px 20px 30px;
+            background: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 100%);
+            border-bottom: 1px solid var(--border);
+        }
+
+        h1 {
+            font-family: 'Fraunces', serif;
+            font-weight: 700;
+            font-size: 2.2rem;
+            color: var(--forest);
+            letter-spacing: -0.02em;
+            margin-bottom: 4px;
+        }
+
+        .subtitle {
+            font-size: 0.9rem;
+            color: var(--soft-gray);
+            font-weight: 400;
+        }
+
+        .search-section {
+            padding: 20px;
+            background: var(--warm-white);
+            border-bottom: 1px solid var(--border);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .search-wrapper {
+            position: relative;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 14px 20px 14px 48px;
+            font-size: 1rem;
+            font-family: 'DM Sans', sans-serif;
+            border: 2px solid var(--border);
+            border-radius: 12px;
+            background: var(--cream);
+            color: var(--charcoal);
+            transition: all 0.2s ease;
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: var(--forest);
+            background: var(--warm-white);
+        }
+
+        .search-input::placeholder {
+            color: var(--soft-gray);
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            color: var(--soft-gray);
+        }
+
+        .nav-tabs {
+            display: flex;
+            gap: 8px;
+            padding: 16px 20px;
+            background: var(--warm-white);
+            border-bottom: 1px solid var(--border);
+            overflow-x: auto;
+        }
+
+        .nav-tab {
+            padding: 8px 16px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            white-space: nowrap;
+            background: var(--cream);
+            color: var(--charcoal);
+        }
+
+        .nav-tab:hover {
+            background: var(--oak-light);
+            color: white;
+        }
+
+        .nav-tab.active {
+            background: var(--forest);
+            color: white;
+        }
+
+        .inventory-list {
+            padding: 16px 20px;
+        }
+
+        .inventory-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px;
+            margin-bottom: 10px;
+            background: var(--warm-white);
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .inventory-item:hover {
+            border-color: var(--oak-light);
+            box-shadow: 0 4px 12px var(--shadow);
+        }
+
+        .inventory-item.out-of-stock {
+            opacity: 0.5;
+            background: var(--cream);
+        }
+
+        .item-info {
+            flex: 1;
+        }
+
+        .item-name {
+            font-family: 'Fraunces', serif;
+            font-weight: 600;
+            font-size: 1.1rem;
+            color: var(--charcoal);
+            margin-bottom: 4px;
+        }
+
+        .item-container {
+            font-size: 0.8rem;
+            color: var(--soft-gray);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .container-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+        }
+
+        .status-badge {
+            padding: 4px 10px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            border-radius: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.03em;
+        }
+
+        .status-in-stock {
+            background: rgba(45, 71, 57, 0.1);
+            color: var(--forest);
+        }
+
+        .status-out {
+            background: rgba(196, 104, 74, 0.1);
+            color: var(--terracotta);
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--soft-gray);
+        }
+
+        .empty-state svg {
+            width: 64px;
+            height: 64px;
+            margin-bottom: 16px;
+            opacity: 0.4;
+        }
+
+        .fab {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            width: 56px;
+            height: 56px;
+            border-radius: 16px;
+            border: none;
+            background: var(--terracotta);
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            box-shadow: 0 4px 16px rgba(196, 104, 74, 0.4);
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .fab:hover {
+            background: var(--terracotta-light);
+            transform: translateY(-2px);
+        }
+
+        .fab.locked {
+            background: var(--soft-gray);
+            box-shadow: 0 4px 16px var(--shadow);
+        }
+
+        /* Modal Styles */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(44, 44, 44, 0.6);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            padding: 20px;
+            backdrop-filter: blur(4px);
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal {
+            background: var(--warm-white);
+            border-radius: 20px;
+            width: 100%;
+            max-width: 420px;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 20px 60px rgba(44, 44, 44, 0.3);
+        }
+
+        .modal-header {
+            padding: 24px 24px 16px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-title {
+            font-family: 'Fraunces', serif;
+            font-weight: 600;
+            font-size: 1.3rem;
+            color: var(--forest);
+        }
+
+        .modal-close {
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: var(--cream);
+            border-radius: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--charcoal);
+            transition: background 0.2s ease;
+        }
+
+        .modal-close:hover {
+            background: var(--border);
+        }
+
+        .modal-body {
+            padding: 24px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: var(--charcoal);
+            margin-bottom: 8px;
+        }
+
+        .form-input, .form-select {
+            width: 100%;
+            padding: 12px 16px;
+            font-size: 1rem;
+            font-family: 'DM Sans', sans-serif;
+            border: 2px solid var(--border);
+            border-radius: 10px;
+            background: var(--cream);
+            color: var(--charcoal);
+            transition: all 0.2s ease;
+        }
+
+        .form-input:focus, .form-select:focus {
+            outline: none;
+            border-color: var(--forest);
+            background: var(--warm-white);
+        }
+
+        .form-select {
+            cursor: pointer;
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9590' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+            padding-right: 40px;
+        }
+
+        .btn {
+            padding: 14px 24px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            font-family: 'DM Sans', sans-serif;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            width: 100%;
+        }
+
+        .btn-primary {
+            background: var(--forest);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--forest-light);
+        }
+
+        .btn-danger {
+            background: var(--terracotta);
+            color: white;
+            margin-top: 12px;
+        }
+
+        .btn-danger:hover {
+            background: var(--terracotta-light);
+        }
+
+        .btn-secondary {
+            background: var(--cream);
+            color: var(--charcoal);
+            border: 2px solid var(--border);
+        }
+
+        .btn-secondary:hover {
+            border-color: var(--oak);
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .checkbox-group input {
+            width: 20px;
+            height: 20px;
+            accent-color: var(--forest);
+        }
+
+        .pin-input {
+            letter-spacing: 8px;
+            text-align: center;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        /* QR Code Section */
+        .qr-section {
+            padding: 40px 20px;
+            text-align: center;
+        }
+
+        #qrcode {
+            display: inline-block;
+            padding: 20px;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 4px 20px var(--shadow);
+            margin-bottom: 20px;
+        }
+
+        #qrcode img {
+            display: block;
+        }
+
+        .qr-url {
+            font-size: 0.85rem;
+            color: var(--soft-gray);
+            word-break: break-all;
+            margin-bottom: 20px;
+        }
+
+        .stats-bar {
+            display: flex;
+            justify-content: center;
+            gap: 24px;
+            padding: 16px 20px;
+            background: var(--forest);
+            color: white;
+        }
+
+        .stat {
+            text-align: center;
+        }
+
+        .stat-number {
+            font-family: 'Fraunces', serif;
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+
+        .stat-label {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .stat-clickable {
+            cursor: pointer;
+            transition: transform 0.1s ease;
+        }
+
+        .stat-clickable:hover {
+            transform: scale(1.05);
+        }
+
+        .stat-clickable:active {
+            transform: scale(0.95);
+        }
+
+        .lock-indicator {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 8px 14px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            z-index: 50;
+        }
+
+        .lock-indicator.locked {
+            background: var(--cream);
+            color: var(--soft-gray);
+            border: 1px solid var(--border);
+        }
+
+        .lock-indicator.unlocked {
+            background: var(--forest);
+            color: white;
+        }
+
+        .container-legend {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+            padding: 16px 20px;
+            background: var(--warm-white);
+            border-bottom: 1px solid var(--border);
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.8rem;
+            color: var(--soft-gray);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: all 0.15s ease;
+        }
+
+        .legend-item:hover {
+            background: var(--oak-light);
+            color: white;
+        }
+
+        .legend-item.active {
+            background: var(--forest);
+            color: white;
+        }
+
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(253, 252, 250, 0.9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+        }
+
+        .loading-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid var(--border);
+            border-top-color: var(--forest);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .error-banner {
+            background: var(--terracotta);
+            color: white;
+            padding: 12px 20px;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--charcoal);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            z-index: 3000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .toast.show {
+            opacity: 1;
+        }
+
+        @media (max-width: 480px) {
+            h1 {
+                font-size: 1.8rem;
+            }
+
+            .container-legend {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="loading-spinner"></div>
+    </div>
+
+    <div class="error-banner" id="errorBanner" style="display: none;"></div>
+
+    <header>
+        <h1>🫙 Pantry</h1>
+        <p class="subtitle">Kitchen Inventory Tracker</p>
+    </header>
+
+    <div class="stats-bar">
+        <div class="stat">
+            <div class="stat-number" id="totalCount">0</div>
+            <div class="stat-label">Total Items</div>
+        </div>
+        <div class="stat">
+            <div class="stat-number" id="inStockCount">0</div>
+            <div class="stat-label">In Stock</div>
+        </div>
+        <div class="stat stat-clickable" id="outStat" onclick="copyShoppingList()" title="Tap to copy shopping list">
+            <div class="stat-number" id="outCount">0</div>
+            <div class="stat-label">Out of Stock 📋</div>
+        </div>
+    </div>
+
+    <div class="search-section">
+        <div class="search-wrapper">
+            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input type="text" class="search-input" id="searchInput" placeholder="Search ingredients...">
+        </div>
+    </div>
+
+    <div class="nav-tabs" id="navTabs">
+        <button class="nav-tab active" data-filter="all">All</button>
+        <button class="nav-tab" data-filter="in-stock">In Stock</button>
+        <button class="nav-tab" data-filter="out">Out of Stock</button>
+        <button class="nav-tab" data-filter="spices">Spices</button>
+        <button class="nav-tab" data-filter="qr">QR Code</button>
+    </div>
+
+    <div class="container-legend" id="containerLegend"></div>
+
+    <div class="inventory-list" id="inventoryList"></div>
+
+    <div class="qr-section" id="qrSection" style="display: none;">
+        <h2 style="font-family: 'Fraunces', serif; color: var(--forest); margin-bottom: 20px;">Scan to Access Pantry</h2>
+        <div id="qrcode"></div>
+        <p class="qr-url" id="qrUrl"></p>
+        <p style="font-size: 0.9rem; color: var(--soft-gray);">Print this QR code and place it on your pantry shelf for quick access.</p>
+    </div>
+
+    <button class="lock-indicator locked" id="lockIndicator" onclick="toggleLock()">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+        </svg>
+        <span id="lockText">View Only</span>
+    </button>
+
+    <button class="fab locked" id="fab" onclick="openAddModal()">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+    </button>
+
+    <div class="toast" id="toast"></div>
+
+    <!-- PIN Modal -->
+    <div class="modal-overlay" id="pinModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title">Enter PIN to Edit</h3>
+                <button class="modal-close" onclick="closeModal('pinModal')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label class="form-label">4-Digit PIN</label>
+                    <input type="password" class="form-input pin-input" id="pinInput" maxlength="4" placeholder="••••" inputmode="numeric">
+                </div>
+                <button class="btn btn-primary" onclick="verifyPin()">Unlock</button>
+                <p id="pinHelpText" style="text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--soft-gray);"></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Set PIN Modal -->
+    <div class="modal-overlay" id="setPinModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title">Set Edit PIN</h3>
+                <button class="modal-close" onclick="closeModal('setPinModal')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p style="margin-bottom: 20px; color: var(--soft-gray); font-size: 0.9rem;">
+                    Set a PIN that your household will use to edit the inventory. Anyone can view without the PIN.
+                </p>
+                <div class="form-group">
+                    <label class="form-label">New 4-Digit PIN</label>
+                    <input type="password" class="form-input pin-input" id="newPinInput" maxlength="4" placeholder="••••" inputmode="numeric">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Confirm PIN</label>
+                    <input type="password" class="form-input pin-input" id="confirmPinInput" maxlength="4" placeholder="••••" inputmode="numeric">
+                </div>
+                <button class="btn btn-primary" onclick="setPin()">Save PIN</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add/Edit Item Modal -->
+    <div class="modal-overlay" id="itemModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title" id="itemModalTitle">Add Item</h3>
+                <button class="modal-close" onclick="closeModal('itemModal')">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label class="form-label">Item Name</label>
+                    <input type="text" class="form-input" id="itemName" placeholder="e.g., All Purpose Flour">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Container Type</label>
+                    <select class="form-select" id="itemContainer">
+                        <!-- Options loaded from containers.json -->
+                    </select>
+                </div>
+                <div class="form-group">
+                    <div class="checkbox-group">
+                        <input type="checkbox" id="itemOutOfStock">
+                        <label for="itemOutOfStock">Out of Stock</label>
+                    </div>
+                </div>
+                <input type="hidden" id="editingItemId">
+                <button class="btn btn-primary" onclick="saveItem()">Save Item</button>
+                <button class="btn btn-danger" id="deleteBtn" style="display: none;" onclick="deleteItem()">Delete Item</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const API_URL = 'api.php';
+        
+        // Container types - loaded from containers.json
+        let containerTypes = {};
+        let containerCategories = [];
+
+        let inventory = [];
+        let isUnlocked = false;
+        let currentFilter = 'all';
+        let containerFilter = null;
+        let hasPinSet = false;
+
+        // API calls
+        async function apiCall(action, data = {}) {
+            try {
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ action, ...data })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                
+                return await response.json();
+            } catch (error) {
+                console.error('API Error:', error);
+                showError('Connection error. Please try again.');
+                throw error;
+            }
+        }
+
+        function showError(message) {
+            const banner = document.getElementById('errorBanner');
+            banner.textContent = message;
+            banner.style.display = 'block';
+            setTimeout(() => banner.style.display = 'none', 5000);
+        }
+
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 2000);
+        }
+
+        function hideLoading() {
+            document.getElementById('loadingOverlay').style.display = 'none';
+        }
+
+        function showLoading() {
+            document.getElementById('loadingOverlay').style.display = 'flex';
+        }
+
+        // Load container types from JSON file
+        async function loadContainers() {
+            try {
+                const response = await fetch('containers.json');
+                const data = await response.json();
+                containerCategories = data.categories;
+
+                // Build flat lookup object
+                containerCategories.forEach(cat => {
+                    cat.containers.forEach(c => {
+                        containerTypes[c.id] = { name: c.name, color: c.color, category: cat.name };
+                    });
+                });
+
+                // Build the dropdown
+                buildContainerDropdown();
+            } catch (error) {
+                console.error('Error loading containers:', error);
+            }
+        }
+
+        // Build the container dropdown with optgroups
+        function buildContainerDropdown() {
+            const select = document.getElementById('itemContainer');
+            select.replaceChildren();
+            containerCategories.forEach(cat => {
+                const optgroup = document.createElement('optgroup');
+                optgroup.label = cat.name;
+                cat.containers.forEach(c => {
+                    const option = document.createElement('option');
+                    option.value = c.id;
+                    option.textContent = c.name;
+                    optgroup.appendChild(option);
+                });
+                select.appendChild(optgroup);
+            });
+        }
+
+        // Initialize
+        async function init() {
+            try {
+                await loadContainers();
+
+                const result = await apiCall('get');
+                inventory = result.inventory || [];
+                hasPinSet = result.hasPin || false;
+
+                renderContainerLegend();
+                renderInventory();
+                updateStats();
+                generateQRCode();
+                setupEventListeners();
+
+                // Update PIN help text
+                updatePinHelpText();
+            } catch (error) {
+                console.error('Init error:', error);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        function updatePinHelpText() {
+            const helpText = document.getElementById('pinHelpText');
+            if (!hasPinSet) {
+                helpText.innerHTML = 'No PIN set yet. <a href="#" onclick="openSetPinModal(); return false;" style="color: var(--terracotta);">Set one now</a>';
+            } else {
+                helpText.innerHTML = '';
+            }
+        }
+
+        function renderContainerLegend() {
+            const legend = document.getElementById('containerLegend');
+            legend.replaceChildren();
+
+            // Count items per container type
+            const counts = {};
+            inventory.forEach(item => {
+                counts[item.container] = (counts[item.container] || 0) + 1;
+            });
+
+            Object.entries(containerTypes).forEach(([key, value]) => {
+                const count = counts[key] || 0;
+                const item = document.createElement('div');
+                item.className = 'legend-item' + (containerFilter === key ? ' active' : '');
+                item.onclick = () => {
+                    containerFilter = containerFilter === key ? null : key;
+                    renderContainerLegend();
+                    renderInventory();
+                };
+                const dot = document.createElement('div');
+                dot.className = 'container-dot';
+                dot.style.background = value.color;
+                const span = document.createElement('span');
+                span.textContent = `${value.category}: ${value.name} (${count})`;
+                item.appendChild(dot);
+                item.appendChild(span);
+                legend.appendChild(item);
+            });
+        }
+
+        function renderInventory() {
+            const list = document.getElementById('inventoryList');
+            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            
+            let filtered = inventory.filter(item => {
+                const matchesSearch = item.name.toLowerCase().includes(searchTerm);
+                const matchesFilter = currentFilter === 'all' ||
+                    (currentFilter === 'in-stock' && !item.outOfStock) ||
+                    (currentFilter === 'out' && item.outOfStock) ||
+                    (currentFilter === 'spices' && item.container.startsWith('spice-'));
+                const matchesContainer = !containerFilter || item.container === containerFilter;
+                return matchesSearch && matchesFilter && matchesContainer;
+            });
+
+            // Sort: in-stock first, then alphabetically
+            filtered.sort((a, b) => {
+                if (a.outOfStock !== b.outOfStock) return a.outOfStock ? 1 : -1;
+                return a.name.localeCompare(b.name);
+            });
+
+            if (filtered.length === 0) {
+                list.innerHTML = `
+                    <div class="empty-state">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        </svg>
+                        <p>No items found</p>
+                    </div>
+                `;
+                return;
+            }
+
+            list.innerHTML = filtered.map(item => `
+                <div class="inventory-item ${item.outOfStock ? 'out-of-stock' : ''}" onclick="openEditModal(${item.id})">
+                    <div class="item-info">
+                        <div class="item-name">${escapeHtml(item.name)}</div>
+                        <div class="item-container">
+                            <div class="container-dot" style="background: ${containerTypes[item.container]?.color || '#ccc'}"></div>
+                            ${containerTypes[item.container] ? `${containerTypes[item.container].category}: ${containerTypes[item.container].name}` : 'Unknown'}
+                        </div>
+                    </div>
+                    <span class="status-badge ${item.outOfStock ? 'status-out' : 'status-in-stock'}">
+                        ${item.outOfStock ? 'Out' : 'In Stock'}
+                    </span>
+                </div>
+            `).join('');
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function updateStats() {
+            const total = inventory.length;
+            const inStock = inventory.filter(i => !i.outOfStock).length;
+            const out = inventory.filter(i => i.outOfStock).length;
+
+            document.getElementById('totalCount').textContent = total;
+            document.getElementById('inStockCount').textContent = inStock;
+            document.getElementById('outCount').textContent = out;
+
+            renderContainerLegend();
+        }
+
+        function copyShoppingList() {
+            const outOfStock = inventory
+                .filter(i => i.outOfStock)
+                .map(i => i.name)
+                .sort()
+                .join('\n');
+
+            if (!outOfStock) {
+                showToast('Nothing out of stock!');
+                return;
+            }
+
+            navigator.clipboard.writeText(outOfStock).then(() => {
+                showToast('Shopping list copied!');
+            }).catch(() => {
+                showToast('Could not copy to clipboard');
+            });
+        }
+
+        function generateQRCode() {
+            const qrContainer = document.getElementById('qrcode');
+            const url = window.location.href.split('?')[0];
+            qrContainer.innerHTML = '';
+            
+            new QRCode(qrContainer, {
+                text: url,
+                width: 200,
+                height: 200,
+                colorDark: '#2D4739',
+                colorLight: '#ffffff',
+                correctLevel: QRCode.CorrectLevel.M
+            });
+            
+            document.getElementById('qrUrl').textContent = url;
+        }
+
+        function setupEventListeners() {
+            document.getElementById('searchInput').addEventListener('input', renderInventory);
+            
+            document.querySelectorAll('.nav-tab').forEach(tab => {
+                tab.addEventListener('click', () => {
+                    document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+                    tab.classList.add('active');
+                    
+                    const filter = tab.dataset.filter;
+                    currentFilter = filter;
+                    
+                    if (filter === 'qr') {
+                        document.getElementById('inventoryList').style.display = 'none';
+                        document.getElementById('containerLegend').style.display = 'none';
+                        document.getElementById('qrSection').style.display = 'block';
+                    } else {
+                        document.getElementById('inventoryList').style.display = 'block';
+                        document.getElementById('containerLegend').style.display = 'grid';
+                        document.getElementById('qrSection').style.display = 'none';
+                        renderInventory();
+                    }
+                });
+            });
+
+            // Close modals on overlay click
+            document.querySelectorAll('.modal-overlay').forEach(modal => {
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) closeModal(modal.id);
+                });
+            });
+
+            // Enter key for PIN inputs
+            document.getElementById('pinInput').addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') verifyPin();
+            });
+        }
+
+        function toggleLock() {
+            if (isUnlocked) {
+                isUnlocked = false;
+                updateLockUI();
+                showToast('Locked');
+            } else {
+                openModal('pinModal');
+                document.getElementById('pinInput').focus();
+            }
+        }
+
+        function openModal(id) {
+            document.getElementById(id).classList.add('active');
+        }
+
+        function closeModal(id) {
+            document.getElementById(id).classList.remove('active');
+        }
+
+        async function verifyPin() {
+            const pin = document.getElementById('pinInput').value;
+            
+            if (!hasPinSet) {
+                closeModal('pinModal');
+                openSetPinModal();
+                return;
+            }
+            
+            try {
+                const result = await apiCall('verifyPin', { pin });
+                
+                if (result.success) {
+                    isUnlocked = true;
+                    updateLockUI();
+                    closeModal('pinModal');
+                    document.getElementById('pinInput').value = '';
+                    showToast('Unlocked');
+                } else {
+                    showToast('Incorrect PIN');
+                    document.getElementById('pinInput').value = '';
+                }
+            } catch (error) {
+                console.error('PIN verify error:', error);
+            }
+        }
+
+        function openSetPinModal() {
+            closeModal('pinModal');
+            openModal('setPinModal');
+            document.getElementById('newPinInput').focus();
+        }
+
+        async function setPin() {
+            const newPin = document.getElementById('newPinInput').value;
+            const confirmPin = document.getElementById('confirmPinInput').value;
+            
+            if (newPin.length !== 4 || !/^\d+$/.test(newPin)) {
+                showToast('PIN must be 4 digits');
+                return;
+            }
+            
+            if (newPin !== confirmPin) {
+                showToast('PINs do not match');
+                return;
+            }
+            
+            try {
+                const result = await apiCall('setPin', { pin: newPin });
+                
+                if (result.success) {
+                    hasPinSet = true;
+                    isUnlocked = true;
+                    updateLockUI();
+                    closeModal('setPinModal');
+                    document.getElementById('newPinInput').value = '';
+                    document.getElementById('confirmPinInput').value = '';
+                    showToast('PIN set! You are now in edit mode.');
+                }
+            } catch (error) {
+                console.error('Set PIN error:', error);
+            }
+        }
+
+        function updateLockUI() {
+            const indicator = document.getElementById('lockIndicator');
+            const fab = document.getElementById('fab');
+            const lockText = document.getElementById('lockText');
+            
+            if (isUnlocked) {
+                indicator.classList.remove('locked');
+                indicator.classList.add('unlocked');
+                fab.classList.remove('locked');
+                lockText.textContent = 'Edit Mode';
+            } else {
+                indicator.classList.remove('unlocked');
+                indicator.classList.add('locked');
+                fab.classList.add('locked');
+                lockText.textContent = 'View Only';
+            }
+        }
+
+        function openAddModal() {
+            if (!isUnlocked) {
+                toggleLock();
+                return;
+            }
+            
+            document.getElementById('itemModalTitle').textContent = 'Add Item';
+            document.getElementById('itemName').value = '';
+            document.getElementById('itemContainer').selectedIndex = 0;
+            document.getElementById('itemOutOfStock').checked = false;
+            document.getElementById('editingItemId').value = '';
+            document.getElementById('deleteBtn').style.display = 'none';
+            openModal('itemModal');
+            document.getElementById('itemName').focus();
+        }
+
+        function openEditModal(id) {
+            if (!isUnlocked) {
+                return; // View only mode
+            }
+            
+            const item = inventory.find(i => i.id === id);
+            if (!item) return;
+            
+            document.getElementById('itemModalTitle').textContent = 'Edit Item';
+            document.getElementById('itemName').value = item.name;
+            document.getElementById('itemContainer').value = item.container;
+            document.getElementById('itemOutOfStock').checked = item.outOfStock;
+            document.getElementById('editingItemId').value = id;
+            document.getElementById('deleteBtn').style.display = 'block';
+            openModal('itemModal');
+        }
+
+        async function saveItem() {
+            const name = document.getElementById('itemName').value.trim();
+            const container = document.getElementById('itemContainer').value;
+            const outOfStock = document.getElementById('itemOutOfStock').checked;
+            const editingId = document.getElementById('editingItemId').value;
+            
+            if (!name) {
+                showToast('Please enter an item name');
+                return;
+            }
+            
+            showLoading();
+            
+            try {
+                if (editingId) {
+                    // Update existing
+                    await apiCall('update', {
+                        id: parseInt(editingId),
+                        name,
+                        container,
+                        outOfStock
+                    });
+                    
+                    const item = inventory.find(i => i.id === parseInt(editingId));
+                    if (item) {
+                        item.name = name;
+                        item.container = container;
+                        item.outOfStock = outOfStock;
+                    }
+                    showToast('Item updated');
+                } else {
+                    // Add new
+                    const result = await apiCall('add', { name, container, outOfStock });
+                    
+                    if (result.success && result.item) {
+                        inventory.push(result.item);
+                    }
+                    showToast('Item added');
+                }
+                
+                renderInventory();
+                updateStats();
+                closeModal('itemModal');
+            } catch (error) {
+                console.error('Save error:', error);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        async function deleteItem() {
+            const editingId = document.getElementById('editingItemId').value;
+            if (!editingId) return;
+            
+            if (!confirm('Are you sure you want to delete this item?')) return;
+            
+            showLoading();
+            
+            try {
+                await apiCall('delete', { id: parseInt(editingId) });
+                
+                inventory = inventory.filter(i => i.id !== parseInt(editingId));
+                renderInventory();
+                updateStats();
+                closeModal('itemModal');
+                showToast('Item deleted');
+            } catch (error) {
+                console.error('Delete error:', error);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        // Initialize on load
+        init();
+    </script>
+</body>
+</html>
diff --git a/og-image.png b/og-image.png
new file mode 100644
index 0000000..7927d97
Binary files /dev/null and b/og-image.png differ
diff --git a/og-image.svg b/og-image.svg
new file mode 100644
index 0000000..5ceda45
--- /dev/null
+++ b/og-image.svg
@@ -0,0 +1,20 @@
+<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#FAF8F5"/>
+      <stop offset="100%" style="stop-color:#F5F0E8"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bg)"/>
+
+  <!-- Jar emoji as text (large) -->
+  <text x="600" y="280" font-size="180" text-anchor="middle" dominant-baseline="middle">🫙</text>
+
+  <!-- Title -->
+  <text x="600" y="420" font-family="Georgia, serif" font-size="72" font-weight="600" fill="#2D5A3D" text-anchor="middle">Pantry</text>
+
+  <!-- Subtitle -->
+  <text x="600" y="490" font-family="Arial, sans-serif" font-size="32" fill="#8B7355" text-anchor="middle">Kitchen Inventory Tracker</text>
+</svg>