feldenr
9c504d2c3d
Features: - Frontend Flutter avec thème néon cyberpunk - Backend FastAPI avec streaming YouTube - Base de données PostgreSQL + Redis - Authentification JWT complète - Recherche multi-source (DB + YouTube) - Playlists CRUD avec drag & drop - Queue management - Settings avec audio quality - Interface adaptative (Desktop + Mobile) Tech Stack: - Frontend: Flutter 3.2+, Riverpod - Backend: Python 3.11+, FastAPI - Database: PostgreSQL 15+ - Cache: Redis 7+ - Streaming: yt-dlp + FFmpeg 🚀 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
9.7 KiB
9.7 KiB
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