# Serenity Massage Clinic - Online Booking System

## Concept & Vision

A tranquil, professional online booking system for "Serenity Massage Clinic" that mirrors the calm, restorative experience of the services offered. The interface evokes spa-like serenity with soft earth tones, generous whitespace, and fluid animations that create a sense of calm. Every interaction should feel unhurried yet efficient—like stepping into a peaceful space where your well-being is the priority.

## Design Language

### Aesthetic Direction
Inspired by Japanese minimalism meets Scandinavian warmth. Clean lines, natural textures (subtle paper grain), and organic shapes that soften the digital experience. Think: a modern wellness retreat brochure brought to life.

### Color Palette
```
Primary:      #5B8A72 (Sage Green - trust, nature, healing)
Secondary:    #8B7355 (Warm Taupe - grounded, natural)
Accent:       #D4A574 (Soft Gold - warmth, premium feel)
Background:   #FAF8F5 (Warm Off-White - clean, inviting)
Surface:      #FFFFFF (Pure White - cards, inputs)
Text Primary: #2D3436 (Near Black - readability)
Text Secondary: #636E72 (Warm Gray - supporting text)
Success:      #00B894 (Teal Green)
Error:        #E17055 (Coral Red)
Border:       #E8E4E0 (Warm Light Gray)
```

### Typography
- **Headings:** "Cormorant Garamond" (serif) - elegant, spa-like
- **Body:** "Nunito Sans" (sans-serif) - friendly, readable
- **Accent/Labels:** "Nunito Sans" 600 weight
- **Scale:** 14px base, 1.5 line-height, modular scale 1.25

### Spatial System
- Base unit: 8px
- Spacing: 8, 16, 24, 32, 48, 64, 96px
- Max content width: 1200px
- Card padding: 32px
- Section padding: 80px vertical

### Motion Philosophy
- Transitions: 300ms ease-out (calm, not abrupt)
- Hover lifts: translateY(-4px) with subtle shadow
- Page loads: fade-in from opacity 0, staggered 100ms
- Form focus: border color transition 200ms
- Success states: gentle pulse animation

### Visual Assets
- Icons: Lucide Icons (line style, 1.5px stroke)
- Decorative: Subtle SVG botanical accents
- Images: Soft, warm-toned stock massage/spa imagery
- Patterns: Optional subtle organic wave dividers

## Layout & Structure

### Page Structure
1. **Header** - Sticky, transparent → solid on scroll, logo left, nav center, CTA right
2. **Hero** - Full viewport height with parallax background, centered headline, scroll indicator
3. **Services Section** - Card grid (3 columns desktop, 1 mobile), hover reveals
4. **How It Works** - Horizontal timeline on desktop, vertical on mobile
5. **Testimonials** - Slider with soft quotes, client photos
6. **Booking Section** - Multi-step form in a contained card
7. **Contact/Footer** - Split layout, map left, contact info right

### Responsive Strategy
- Desktop: 1200px+ (full experience)
- Tablet: 768-1199px (2-column grids)
- Mobile: <768px (single column, larger touch targets)

## Features & Interactions

### Core Features

#### 1. Service Selection
- Display 6 massage services with duration, price, description
- Hover: card lifts, reveals "Book Now" button
- Click: scrolls to booking section with service pre-selected
- Services: Swedish, Deep Tissue, Hot Stone, Aromatherapy, Sports, Couples

#### 2. Multi-Step Booking Form
**Step 1: Select Service**
- Visual service cards with selection state
- Selected state: sage green border, checkmark

**Step 2: Choose Date & Time**
- Calendar widget showing next 30 days
- Available slots highlighted, unavailable grayed
- Time slots in 30-min increments (9am-6pm)
- Past dates disabled

**Step 3: Your Details**
- Fields: Name, Email, Phone, Special Requests (textarea)
- Inline validation on blur
- Real-time feedback (green check / red warning)

**Step 4: Confirmation**
- Summary card showing all selections
- "Confirm Booking" button
- Success: confetti animation + confirmation message

#### 3. Admin Dashboard
- Protected by simple auth (session-based)
- View all bookings in sortable table
- Filter by date, service, status
- Mark as confirmed/completed/cancelled
- Export to CSV

#### 4. Email Notifications
- Confirmation email to client on booking
- Notification email to clinic admin
- Using PHP mail() function

### Interaction Details
- **Form validation:** Real-time, show error below field
- **Empty states:** Friendly message + CTA for no bookings
- **Loading states:** Skeleton cards, spinner on buttons
- **Error handling:** Toast notifications, inline form errors

### Edge Cases
- Double-booking prevention (slot becomes unavailable on booking)
- Form abandonment: data saved to session
- Invalid date selection: tooltip explains why unavailable

## Component Inventory

### Navigation
- **Default:** Transparent bg, white text on hero
- **Scrolled:** White bg, shadow, dark text
- **Mobile:** Hamburger → slide-out drawer

### Service Card
- **Default:** White bg, subtle shadow, image top, content below
- **Hover:** Lift effect, shadow increase, reveal CTA
- **Selected:** Sage border, checkmark badge

### Form Input
- **Default:** White bg, warm gray border, 12px radius
- **Focus:** Sage green border, subtle glow
- **Error:** Coral red border, error message below
- **Success:** Green checkmark icon inside

### Button
- **Primary:** Sage green bg, white text, hover darken
- **Secondary:** White bg, sage border, hover fill
- **Ghost:** Text only, hover underline
- **Loading:** Spinner replaces text
- **Disabled:** 50% opacity, no pointer

### Calendar
- **Day Cell Default:** Light bg
- **Day Cell Hover:** Sage bg, white text
- **Day Cell Selected:** Dark sage bg
- **Day Cell Disabled:** Light gray, strikethrough

### Toast Notification
- **Success:** Green left border, checkmark icon
- **Error:** Red left border, X icon
- **Info:** Blue left border, info icon

## Technical Approach

### Stack
- **Backend:** PHP 8+ (procedural for simplicity, PDO for DB)
- **Database:** SQLite (file-based, no server setup needed)
- **Frontend:** Vanilla HTML/CSS/JS (no framework for speed)
- **Styling:** Custom CSS with CSS variables
- **Icons:** Lucide CDN

### Database Schema
```sql
-- Services table
CREATE TABLE services (
    id INTEGER PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    duration INTEGER NOT NULL, -- minutes
    price DECIMAL(10,2) NOT NULL,
    image VARCHAR(255),
    active BOOLEAN DEFAULT 1
);

-- Bookings table
CREATE TABLE bookings (
    id INTEGER PRIMARY KEY,
    service_id INTEGER REFERENCES services(id),
    client_name VARCHAR(100) NOT NULL,
    client_email VARCHAR(100) NOT NULL,
    client_phone VARCHAR(20),
    booking_date DATE NOT NULL,
    booking_time TIME NOT NULL,
    special_requests TEXT,
    status ENUM('pending', 'confirmed', 'completed', 'cancelled') DEFAULT 'pending',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- Admin users table
CREATE TABLE admins (
    id INTEGER PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    email VARCHAR(100),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```

### File Structure
```
public_html/
├── index.php              (Homepage)
├── services.php           (Services listing)
├── booking.php            (Booking flow)
├── booking-process.php    (Form handler)
├── confirmation.php       (Success page)
├── admin/
│   ├── index.php          (Dashboard)
│   ├── login.php          (Admin login)
│   ├── logout.php         (Logout handler)
│   └── bookings.php       (Booking management)
├── config/
│   ├── database.php       (DB connection)
│   └── functions.php      (Helper functions)
├── assets/
│   ├── css/
│   │   └── style.css      (Main styles)
│   └── js/
│       └── main.js        (Interactivity)
└── api/
    └── available-slots.php (AJAX time slots)
```

### Security
- Prepared statements for all SQL
- CSRF tokens on forms
- Session-based admin auth with password_hash
- Input sanitization on all user data
- XSS prevention with htmlspecialchars

### API Endpoints
```
GET /api/available-slots.php?date=YYYY-MM-DD&service_id=1
→ Returns JSON array of available time slots

POST /booking-process.php
→ Processes booking form, returns JSON
```

## Sample Content

### Services
1. **Swedish Massage** - 60min, $85 - Classic relaxation technique
2. **Deep Tissue** - 60min, $95 - Targets chronic tension
3. **Hot Stone** - 75min, $110 - Warm basalt stones
4. **Aromatherapy** - 60min, $90 - Essential oil fusion
5. **Sports Massage** - 45min, $75 - Athletic recovery
6. **Couples Massage** - 60min, $180 - Side-by-side relaxation

### Clinic Info
- **Name:** Serenity Massage Clinic
- **Address:** 123 Wellness Avenue, Suite 100
- **Phone:** (555) 234-5678
- **Hours:** Mon-Sat 9am-6pm, Sun closed
- **Email:** hello@serenityclinic.com