# ThrillWiki Design System

## Overview
This document details the design system implementation for the Laravel/Livewire version of ThrillWiki, ensuring visual and functional parity with the Django version.

## Core Design Elements

### Colors
- Primary: Indigo-500 (#6366f1)
- Secondary: Violet-500 (#8b5cf6)
- Full color scale defined in `tailwind.config.js`

### Typography
- Primary Font: Poppins (400, 500, 600, 700)
- System applied via Tailwind configuration

### Components

#### Navigation
- `.nav-link`: Primary navigation links
- `.site-logo`: Site logo styling
- `.menu-item`: Dropdown menu items

#### Forms
- `.form-input`: Standard form inputs
- Button variants:
  - `.btn`: Primary button
  - `.btn-secondary`: Secondary button

#### Alerts
- `.alert`: Base alert styling
- Variants:
  - `.alert-success`
  - `.alert-error`
  - `.alert-warning`
  - `.alert-info`

### Theme System

#### Dark Mode Implementation
1. System detection:
```javascript
window.matchMedia("(prefers-color-scheme: dark)")
```

2. User preference storage:
```javascript
localStorage.getItem("theme")
```

3. Class toggle:
```javascript
document.documentElement.classList.toggle("dark")
```

### Asset Organization

#### Directory Structure
```
public/
├── images/
│   ├── default-avatar.png
│   ├── discord-icon.svg
│   ├── favicon.png
│   ├── google-icon.svg
│   └── placeholders/
│       ├── dark-ride.jpg
│       ├── default-park.jpg
│       ├── default-ride.jpg
│       ├── flat-ride.jpg
│       ├── other-ride.jpg
│       ├── roller-coaster.jpg
│       ├── transport.jpg
│       └── water-ride.jpg
resources/
├── css/
│   ├── app.css
│   ├── alerts.css
│   └── src/
│       └── input.css
└── js/
    ├── app.js
    └── modules/
        ├── alerts.js
        ├── location-autocomplete.js
        ├── main.js
        ├── park-map.js
        ├── photo-gallery.js
        └── search.js
```

### Build System Configuration

#### Vite Setup
- Entry points configured in `vite.config.js`
- Source maps enabled for development
- Vendor chunk splitting for optimal caching

#### Tailwind Configuration
- JIT mode enabled
- Custom color palette
- Extended theme configuration
- Plugins:
  - @tailwindcss/forms
  - @tailwindcss/typography
  - @tailwindcss/aspect-ratio

### CSS Architecture

#### Layer Organization
1. Base (`@tailwind base`)
   - HTML element defaults
   - Font settings
   - Scroll behavior

2. Components (`@tailwind components`)
   - Navigation elements
   - Form elements
   - Buttons
   - Alerts

3. Utilities (`@tailwind utilities`)
   - Custom utilities
   - Text gradient helpers

### Responsive Design

#### Breakpoints
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px

#### Container Padding
```javascript
{
  DEFAULT: '1rem',
  sm: '2rem',
  lg: '4rem',
  xl: '5rem',
  '2xl': '6rem',
}
```

### Animation System

#### Keyframes
```javascript
fadeIn: {
  '0%': { opacity: '0' },
  '100%': { opacity: '1' },
},
fadeOut: {
  '0%': { opacity: '1' },
  '100%': { opacity: '0' },
}
```

#### Utilities
- `animate-fade-in`
- `animate-fade-out`

## Implementation Progress

### Completed
- [x] Base layout template
- [x] Color system migration
- [x] Typography setup
- [x] Core component classes
- [x] Dark mode implementation
- [x] Asset organization
- [x] Build system configuration

### Verified Against Django
- [x] Component templates migration (matches Django implementation)
- [x] Interactive features (maintains feature parity)
- [x] Form implementations (preserves Django patterns)
- [x] Navigation system (identical structure)
- [x] Alert system (same functionality)

### Framework-specific Adaptations
- [x] Template syntax conversion (Django → Blade)
- [x] Asset compilation (static → Vite)
- [x] Authentication directives (Django auth → Laravel auth)
- [x] Route naming (Django URLs → Laravel routes)

### Pending
- [ ] Modal system (in development)
- [ ] Photo gallery (planned)
- [ ] Map integration (planned)
- [ ] Search interface (planned)
- [ ] User profile components (planned)

## Next Steps
1. Implement remaining features:
   - Modal system
   - Photo gallery
   - Map integration
   - Search interface
   - User profile components

2. Quality Assurance:
   - Cross-browser testing
   - Performance benchmarking
   - Accessibility audit
   - Mobile responsiveness verification

3. Documentation:
   - Update component usage guides
   - Document Laravel-specific adaptations
   - Create migration guides for future components
   - Maintain feature parity tracking

4. Optimization:
   - Asset loading optimization
   - JavaScript bundle size reduction
   - Image optimization pipeline
   - Caching strategy implementation