# Swizzle Events - HTML Templates Implementation Plan

## Overview
Create static HTML/CSS mockups for client approval before Laravel development begins.

**Scope:** Account-side pages only (no Super Admin pages for now)

**Tech Stack:** Tailwind CSS (via CDN for static HTML)

**Color Palette (from logo):**
- Primary Gradient: `#F5A962` (coral) → `#E88AB4` (pink) → `#9B8AC4` (purple)
- Text/Dark: `#1E2A4A` (navy)
- Accent: `#F5E06D` (yellow)
- Background: `#FFFFFF` and `#F8FAFC` (light gray)

---

## File Structure
```
html/
├── assets/
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       └── logo.png
│
├── auth/
│   ├── login.html
│   ├── forgot-password.html
│   └── reset-password.html
│
├── account/                     # Account Admin pages
│   ├── dashboard.html
│   ├── events-list.html
│   ├── event-create.html
│   ├── event-edit.html
│   ├── event-view.html
│   ├── checkin-points.html
│   ├── participants-list.html
│   ├── participant-create.html
│   ├── participant-import.html
│   ├── participant-view.html
│   ├── staff-list.html
│   ├── staff-create.html
│   └── reports.html
│
├── staff/                       # Staff pages
│   ├── events-list.html
│   ├── event-view.html
│   └── checkin-scan.html
│
├── public/                      # Public pages
│   ├── register.html
│   ├── thank-you.html
│   └── download-qr.html
│
└── index.html                   # Navigation index
```

---

## Pages to Create (22 total)

### 1. Authentication (3 pages)
| Page | Description |
|------|-------------|
| `login.html` | Login form with email/password, remember me, forgot password link |
| `forgot-password.html` | Email input to request password reset |
| `reset-password.html` | New password form with confirmation |

### 2. Account Admin Dashboard (13 pages)
| Page | Description |
|------|-------------|
| `dashboard.html` | Account overview: events count, participants, today's check-ins |
| `events-list.html` | List of events with status badges, search, quick actions |
| `event-create.html` | Create event: name, description, location, dates, logo upload |
| `event-edit.html` | Edit event with same fields |
| `event-view.html` | Event detail with tabs: overview, participants, check-in points, QR code |
| `checkin-points.html` | Manage check-in points (add, edit, reorder, set mandatory) |
| `participants-list.html` | Participant table with check-in status indicators per point |
| `participant-create.html` | Manual add participant form (name, email, phone, address) |
| `participant-import.html` | CSV upload with preview table |
| `participant-view.html` | Participant details with full check-in history timeline |
| `staff-list.html` | Staff members list with roles (Admin/Staff) |
| `staff-create.html` | Invite new staff member form |
| `reports.html` | Attendance reports with date filters, export button |

### 3. Staff Pages (3 pages)
| Page | Description |
|------|-------------|
| `events-list.html` | Simplified event list for staff (card view) |
| `event-view.html` | Event overview with participant count and check-in button |
| `checkin-scan.html` | **Mobile-optimized** - Participant details + check-in point selection |

### 4. Public Pages (3 pages)
| Page | Description |
|------|-------------|
| `register.html` | Event registration form with event branding header |
| `thank-you.html` | Confirmation with QR code display and download button |
| `download-qr.html` | Direct QR code download page |

---

## Key Screen Details

### Event View Page (`account/event-view.html`)
**Tabs:**
1. **Overview** - Event details, dates, location, registration QR code
2. **Participants** - Quick list with bulk actions (email all, export)
3. **Check-in Points** - List with attendance counts per point
4. **Settings** - Toggle registration open/closed

### Check-in Scan Page (`staff/checkin-scan.html`) - MOBILE PRIORITY
**Layout:**
- Event name header
- Participant info card (name, email, phone)
- Check-in point selector (dropdown or button list)
- Large "CHECK IN" button
- Status: Already checked in points shown as disabled/green
- Success/error toast messages

### Participants List (`account/participants-list.html`)
**Columns:**
- Checkbox (for bulk actions)
- Name
- Email
- Phone
- Registration Date
- Check-in Status (colored dots per check-in point)
- Actions (view, resend email, delete)

**Features:**
- Search bar
- Filter by check-in status
- Bulk actions: Send email, Export CSV
- Pagination

### Registration Form (`public/register.html`)
**Header:**
- Event logo
- Event name
- Event dates & location

**Form Fields:**
- First Name*
- Last Name*
- Email*
- Phone
- Address

**Footer:**
- "Powered by Swizzle"

---

## Sample Data for Mockups

**Account:** MedEvents Pro

**Events:**
- "Annual Cardiology Conference 2026" - Jan 15-17, 2026
- "CME Workshop: Advanced Diagnostics" - Feb 8, 2026
- "Pharma Summit Dubai" - Mar 20-22, 2026

**Check-in Points (for Cardiology Conference):**
- Registration Counter (mandatory)
- Day 1 - Breakfast
- Day 1 - Main Hall Session
- Day 1 - Lunch
- Day 2 - Breakfast
- Day 2 - Workshop

**Participants:**
- Dr. Sarah Johnson | sarah.johnson@hospital.com | +1 555-0101
- Dr. Ahmed Al-Rahman | ahmed.r@medcenter.ae | +971 50 123 4567
- Dr. Emily Chen | e.chen@clinic.sg | +65 9123 4567
