# Kiosk Display - Template-Based System

This directory contains a template-based kiosk display system that works both online and offline.

## How It Works

Instead of generating hundreds of static HTML files, this system uses **3 template files** with **embedded JSON data** that work perfectly offline (no fetch/CORS issues).

### Template Files

1. **index.html** - Home page
   - Categories data embedded directly in HTML
   - Displays category cards
   - Links to: `category.html?id={category_id}`

2. **category.html** - Category page
   - Accepts `?id=334` query parameter
   - Listings and categories data embedded in HTML
   - Filters products by category ID
   - Links to: `product.html?id={product_id}`

3. **product.html** - Product page
   - Accepts `?id=3944` query parameter
   - Listings data embedded in HTML
   - Displays full product details
   - Image gallery with thumbnails

## Access Methods

### Web Server (Development)
```
https://kioskfetcher.test/Kiosk/index.html
https://kioskfetcher.test/Kiosk/category.html?id=334
https://kioskfetcher.test/Kiosk/product.html?id=3944
```

### Offline (Kiosk Mode)
```
file:///path/to/project/public/Kiosk/index.html
```

The same files work in both modes! No special configuration needed.

## Benefits

✅ **Only 3 HTML files** - Not hundreds of static pages  
✅ **Query string navigation** - Clean URLs with parameters  
✅ **Embedded data** - No fetch() calls, no CORS issues  
✅ **Works offline** - Perfect for file:// protocol  
✅ **Easy to maintain** - Update one template, not hundreds of files  
✅ **Scalable** - Add 1000 products, still only 3 HTML files  
✅ **Self-contained** - All data and images included  

## File Structure

```
public/Kiosk/
├── index.html         # Home page template (6.5 KB)
├── category.html      # Category template (8.6 KB)
├── product.html       # Product template (9.9 KB)
├── categories.json    # Category data
├── listings.json      # Product data
└── images/           # All product and category images
```

## Refresh Data

To fetch latest data from the API:
```bash
php artisan kiosk:fetch
```

This will:
1. Download latest data from OrderGem API
2. Download all images
3. Update JSON files
4. Regenerate the 3 template HTML files
5. Create Kiosk.zip for deployment

## Deployment

After running the fetch command, download `Kiosk.zip` which contains everything:
- All HTML template files
- All images
- All JSON data
- README documentation

Simply extract and open `index.html` - works anywhere!

## Navigation Flow

```
index.html (Browse Categories)
    ↓ (click category card)
category.html?id=334 (View products in category)
    ↓ (click product card)
product.html?id=3944 (View product details)
    ↓ (click back button)
Uses browser's native back button
```

Simple, clean, and it just works! 🎉

