AudiOhm/frontend/lib/presentation/pages/settings/SETTINGS_PREVIEW.md

# Settings Page - Visual Preview & Features

## Visual Design

### Overall Theme
- **Background**: Deep dark blue (#0A0E27) with neon cyan accents
- **Cards**: Semi-transparent surfaces with cyan glow borders
- **Typography**: Outfit font family with neon color highlights
- **Effects**: Subtle gradients, glow shadows, smooth transitions

## Section Breakdown

### 1. Profile Section (Top)
```
┌─────────────────────────────────────────────────┐
│  ┌────┐  John Doe                   [PREMIUM]  │
│  │ 👤 │  john.doe@email.com                    │
│  └────┘  @johndoe                              │
│                                                  │
│  [           Edit Profile          ]            │
└─────────────────────────────────────────────────┘
```

Features:
- Circular avatar with gradient glow
- Premium badge with violet/rose gradient
- Display name, email, username
- Edit Profile button (cyan outlined)

### 2. Audio Quality Section
```
┌─────────────────────────────────────────────────┐
│ AUDIO                                           │
├─────────────────────────────────────────────────┤
│  🎵 Audio Quality                               │
│     Higher quality uses more data               │
│  ────────────────────────────────────────────  │
│  Low                     [96 kbps] Best for...  │
│  Medium                  [160 kbps] Good...     │
│  High                    [320 kbps] Best... ✓   │
│  Lossless                [FLAC] Requires... [🔒]│
└─────────────────────────────────────────────────┘
```

Features:
- Radio-style selection
- Bitrate badges
- Quality descriptions
- Premium lock on Lossless
- Selection indicator (cyan checkmark)

### 3. Playback Section
```
┌─────────────────────────────────────────────────┐
│ PLAYBACK                                        │
├─────────────────────────────────────────────────┤
│  🎚️  Crossfade                       [○]       │
│       Smooth transition between tracks          │
│                                                  │
│       Crossfade Duration: 5s                    │
│       ━━━━━━━━●━━━━━━━━━━━━━━━━━━━━━           │
│                                                  │
│  ────────────────────────────────────────────  │
│  ♾️  Gapless Playback               [●]       │
│       No gap between tracks                     │
│                                                  │
│  ────────────────────────────────────────────  │
│  🔊  Normalize Volume                [○]       │
│       Set same volume for all tracks            │
└─────────────────────────────────────────────────┘
```

Features:
- Toggle switches with cyan active color
- Crossfade duration slider (1-12 seconds)
- Descriptive subtitles
- Icon indicators

### 4. Downloads Section
```
┌─────────────────────────────────────────────────┐
│ DOWNLOADS                                       │
├─────────────────────────────────────────────────┤
│  📥  Download on Mobile Data       [○]          │
│       May use extra data                         │
│                                                  │
│  ────────────────────────────────────────────  │
│  🔞  Show Explicit Content          [●]          │
│       Display explicit content in search        │
└─────────────────────────────────────────────────┘
```

### 5. Storage Section
```
┌─────────────────────────────────────────────────┐
│  💾  Storage                                     │
│      Cache and offline data                     │
│                                                  │
│  ┌─────────────────────────────────────────┐   │
│  │ Cache Size                    📁        │   │
│  │ 245.3 MB                                 │   │
│  └─────────────────────────────────────────┘   │
│                                                  │
│  [        Clear Cache            ]               │
└─────────────────────────────────────────────────┘
```

Features:
- Large cache size display (cyan)
- Folder icon
- Clear cache button (rose outlined)
- Confirmation dialog

### 6. About Section
```
┌─────────────────────────────────────────────────┐
│ ABOUT                                           │
├─────────────────────────────────────────────────┤
│  ℹ️  App Version                                 │
│      1.0.0+1                                    │
│                                                  │
│  ────────────────────────────────────────────  │
│  📄  Licenses                                    │
│      Open source licenses                       │
└─────────────────────────────────────────────────┘
```

### 7. Logout Button
```
┌─────────────────────────────────────────────────┐
│  [  🚪            Log Out            ]          │
└─────────────────────────────────────────────────┘
```

Features:
- Rose outlined button
- Confirmation dialog
- Logout icon

## Color Palette

### Primary Colors
- **Cyan**: #00F0FF (primary accent)
- **Violet**: #BF00FF (secondary accent)
- **Rose**: #FF006E (error/danger)
- **Green**: #39FF14 (success)

### Backgrounds
- **Primary**: #0A0E27 (main background)
- **Surface**: #1A1F3A (cards)
- **Surface Variant**: #252B4A (elevated)

### Text Colors
- **On Background**: #E0E6FF (primary text)
- **On Surface**: #B0B8D4 (secondary text)
- **Muted**: #6A7294 (disabled/hints)

## Interactive Elements

### Toggle Switches
- Active: Cyan with glow
- Inactive: Grey
- Smooth animations

### Buttons
- **Elevated**: Cyan gradient with glow shadow
- **Outlined**: Cyan/rose border with transparent bg
- **Text**: Cyan with underline effect

### Cards
- 1px cyan border (15% opacity)
- Subtle glow shadow
- 16px border radius
- Smooth hover effects

## Animations

### Page Transitions
- Smooth slide-in from right
- Fade-in for content
- Staggered section animations

### Micro-interactions
- Ripple effects on taps
- Scale animations on buttons
- Color transitions on toggles
- Slide-up dialogs

## Dialogs

### Edit Profile Dialog
- Centered, rounded corners
- Avatar with camera overlay
- Text input with cyan border
- Save/Cancel buttons

### Clear Cache Dialog
- Warning icon (rose)
- Confirmation text
- Cancel/Clear buttons

### Logout Dialog
- Logout icon (rose)
- Confirmation message
- Cancel/Logout buttons

## Snackbar Notifications

### Success
- Green background
- White text
- Checkmark icon
- 3 second duration

### Error
- Red background
- White text
- Error icon
- Auto-dismiss

### Info
- Cyan background
- White text
- Info icon
- Extended duration for tips

## Responsive Design

### Mobile (< 600px)
- Full-width cards
- 16px horizontal padding
- Bottom navigation or drawer
- Compact spacing

### Tablet (600-900px)
- Centered content (max 600px)
- Larger touch targets
- Side navigation optional

### Desktop (> 900px)
- Centered column (max 800px)
- Larger fonts
- Side navigation
- More spacing

## Accessibility

- High contrast ratios (WCAG AA)
- Large touch targets (44px min)
- Clear visual hierarchy
- Screen reader labels
- Keyboard navigation support
- Focus indicators

## Performance

- Lazy loading for images
- Efficient state management
- Optimized rebuilds with Riverpod
- Smooth 60fps animations
- Minimal memory usage