feat: Création Design System V2 et fichiers optimisés

Design System V2: - 📚 MASTER.md complet avec variables, animations, composants - 🎨 Palette cyberpunk optimisée (cyan, violet, rose) - ✨ Système d'espacements et border radius - ⚡ Animations documentées avec keyframes - ♿ Guidelines accessibilité (WCAG AA 4.5:1) - 📱 Breakpoints responsive définis - 🎯 Z-index scale standardisé - 🚫 Anti-patterns documentés CSS Optimisé (style-optimized.css): - 🏗️ Architecture modulaire en 9 sections - 🎛️ CSS Variables pour tout le design system - 📐 Système d'espacement cohérent (--space-xs à --space-3xl) - 🎨 Variables de couleur sémantiques - ⚡ Utilitaires (flex, grid, gap, etc.) - 🔘 Composants réutilisables (btn, card, badge, form) - 🎬 Animations optimisées (transform/opacity uniquement) - 📱 Responsive mobile-first - ♿ prefers-reduced-motion implémenté - 🎯 Focus visible pour accessibilité JavaScript Optimisé (app-optimized.js): - 📦 State management centralisé (AppState) - 🎯 DOM elements cached pour performance - 🔐 Auth complète (login, register, logout) - 🧭 Navigation SPA fluide - 📱 Menu mobile fonctionnel - 🎵 Player controls complets: - Play/Pause avec icon update - Previous/Next (placeholders) - Shuffle/Repeat avec toggle - Progress bar avec seek - Volume control + mute - Like button avec animation - 🍞 Toast notifications système - ⌨️ Keyboard shortcuts (Space, Arrows, M) - 📊 API integration (playlists, tracks) - 🎵 Global playTrack function Guide de Refonte: - 📋 Analyse actuelle - 🎯 Objectifs clairs - 📅 Plan d'implémentation en 4 phases - ✅ Checklist pré-livraison - 💡 Exemples de code optimisés - ⏱️ Estimation temps: 4-6 heures Améliorations Clés: 1. Performance: Animations transform/opacity 2. Accessibilité: Focus states, reduced motion, ARIA 3. Maintenabilité: Code modulaire et documenté 4. Scalabilité: Système de variables cohérent 5. UX: Micro-interactions, feedback visuel Generated with [Claude Code](https://claude.com/claude-code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
2026-01-19 13:55:19 +00:00
parent 0f3652d871
commit 155577303d
4 changed files with 2293 additions and 0 deletions
@@ -0,0 +1,470 @@
+# AudiOhm Design System V2 - Modernisé
+
+**Version:** 2.0
+**Date:** 2026-01-19
+**Style:** Cyberpunk Neon Modernisé + Glassmorphism
+
+---
+
+## 🎨 Style Principal
+
+**Nom:** Cyberpunk Glass Modern
+**Mots-clés:** Néon, dark mode, glassmorphism, gradients animés, futuriste, énergique, bold
+
+**Palette Cyberpunk Optimisée:**
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| **Primary** | #00F0FF | Actions principales, liens, boutons |
+| **Secondary** | #BF00FF | Accents, hover states, éléments secondaires |
+| **Accent** | #FF006E | Alertes, actions destructives, CTA |
+| **Success** | #00FF88 | Success states, confirmations |
+| **Background** | #0A0E27 | Fond principal (dark navy) |
+| **Background Darker** | #050814 | Sidebars, footers |
+| **Card Background** | rgba(15, 23, 50, 0.6) | Cartes, conteneurs (glass) |
+| **Text Primary** | #FFFFFF | Titres, texte principal |
+| **Text Secondary** | #A0A0C0 | Descriptions, texte secondaire |
+| **Border** | rgba(0, 240, 255, 0.2) | Bordures, séparateurs |
+
+---
+
+## 🎯 Typographie
+
+**Font Pairing:**
+
+| Usage | Font | Poids | Taille |
+|-------|------|-------|--------|
+| **Titres** | Righteous | 400/700 | 2rem–4rem |
+| **Body** | Poppins | 300/400/500/600/700 | 1rem–1.2rem |
+| **UI Elements** | Poppins | 500/600 | 0.875rem–1rem |
+
+**Google Fonts Import:**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');
+```
+
+**CSS Variables:**
+```css
+--font-heading: 'Righteous', sans-serif;
+--font-body: 'Poppins', sans-serif;
+```
+
+**Line Heights:**
+- Titres: 1.1
+- Body: 1.6
+- UI Elements: 1.4
+
+---
+
+## ✨ Effets & Animations
+
+### Core Effects
+
+**1. Glassmorphism**
+```css
+background: rgba(15, 23, 50, 0.6);
+backdrop-filter: blur(20px);
+-webkit-backdrop-filter: blur(20px);
+border: 1px solid rgba(255, 255, 255, 0.1);
+```
+
+**2. Neon Glow**
+```css
+--glow-primary: 0 0 20px rgba(0, 240, 255, 0.5);
+--glow-secondary: 0 0 20px rgba(191, 0, 255, 0.5);
+--glow-accent: 0 0 20px rgba(255, 0, 110, 0.5);
+```
+
+**3. Gradient Animé (Background)**
+```css
+background: radial-gradient(circle at 20% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(191, 0, 255, 0.1) 0%, transparent 50%),
+            radial-gradient(circle at 40% 40%, rgba(255, 0, 110, 0.05) 0%, transparent 50%);
+animation: gradientShift 20s ease infinite;
+```
+
+### Animation Timings
+
+| Type | Duration | Easing | Usage |
+|------|----------|--------|-------|
+| **Micro-interactions** | 150ms | ease-out | Hover states, focus |
+| **Transitions standards** | 300ms | cubic-bezier(0.4, 0, 0.2, 1) | Navigation, modales |
+| **Page transitions** | 400ms | ease-out | Changement de page |
+| **Loading** | 1500ms | linear | Spinners, skeletons |
+| **Continuous animations** | 20s+ | ease-in-out | Background gradients |
+
+**Performance Rules:**
+✅ DO: Animer `transform`, `opacity`, `filter`
+❌ DON'T: Animer `width`, `height`, `top`, `left`
+
+---
+
+## 🎬 Animations Clés
+
+### 1. Fade In
+```css
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+```
+
+### 2. Slide In
+```css
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+```
+
+### 3. Pulse
+```css
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+```
+
+### 4. Shimmer (Skeleton Loading)
+```css
+@keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+```
+
+### 5. Spin (Double)
+```css
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+```
+
+### 6. Logo Glow
+```css
+@keyframes logoGlow {
+    0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.5)); }
+    33% { filter: drop-shadow(0 0 30px rgba(191, 0, 255, 0.7)); }
+    66% { filter: drop-shadow(0 0 25px rgba(255, 0, 110, 0.6)); }
+}
+```
+
+### 7. Gradient Shift
+```css
+@keyframes gradientShift {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    33% { transform: translate(30px, -30px) rotate(120deg); }
+    66% { transform: translate(-20px, 20px) rotate(240deg); }
+}
+```
+
+### 8. Shake (Erreur)
+```css
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20%, 60% { transform: translateX(-10px); }
+    40%, 80% { transform: translateX(10px); }
+}
+```
+
+---
+
+## 🔘 Composants UI
+
+### Boutons
+
+**Primary Button:**
+```css
+.btn-primary {
+    padding: 1rem;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border: none;
+    border-radius: 12px;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--glow-primary);
+}
+```
+
+**Secondary Button:**
+```css
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 0, 110, 0.1);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+```
+
+### Cartes
+
+**Track Card:**
+```css
+.track-card {
+    background: var(--bg-card);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border);
+    border-radius: 15px;
+    padding: 1.2rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.track-card:hover {
+    border-color: var(--primary);
+    box-shadow: var(--glow-primary);
+    transform: translateY(-3px) scale(1.01);
+}
+```
+
+### Form Inputs
+
+```css
+.form-group input {
+    padding: 1rem 1rem 1rem 3rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px solid var(--border);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.form-group input:focus {
+    border-color: var(--primary);
+    background: rgba(0, 240, 255, 0.05);
+    box-shadow: var(--glow-primary);
+}
+```
+
+---
+
+## 📐 Spacing & Layout
+
+### Spacing Scale
+```css
+--spacing-xs: 0.5rem;   /* 8px */
+--spacing-sm: 0.75rem;  /* 12px */
+--spacing-md: 1rem;     /* 16px */
+--spacing-lg: 1.5rem;   /* 24px */
+--spacing-xl: 2rem;     /* 32px */
+--spacing-2xl: 3rem;    /* 48px */
+--spacing-3xl: 4rem;    /* 64px */
+```
+
+### Container Widths
+```css
+--container-sm: 640px;
+--container-md: 768px;
+--container-lg: 1024px;
+--container-xl: 1280px;
+--container-2xl: 1536px;
+```
+
+### Border Radius
+```css
+--radius-sm: 8px;
+--radius-md: 12px;
+--radius-lg: 15px;
+--radius-xl: 20px;
+--radius-full: 50%;
+```
+
+---
+
+## 🎭 Z-Index Scale
+
+```css
+--z-dropdown: 1000;
+--z-sticky: 1020;
+--z-fixed: 1030;
+--z-modal-backdrop: 1040;
+--z-modal: 1050;
+--z-popover: 1060;
+--z-tooltip: 1070;
+```
+
+---
+
+## ♿ Accessibility
+
+### Color Contrast
+- **Text on background:** Minimum 4.5:1 (WCAG AA)
+- **Large text:** Minimum 3:1 (WCAG AA)
+- **UI components:** Minimum 3:1
+
+### Focus States
+```css
+:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+```
+
+### Reduced Motion
+```css
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+```
+
+### Touch Targets
+- Minimum size: **44x44px** (mobile)
+- Spacing between targets: **8px minimum**
+
+---
+
+## 📱 Responsive Breakpoints
+
+```css
+--breakpoint-sm: 640px;   /* Mobile */
+--breakpoint-md: 768px;   /* Tablet */
+--breakpoint-lg: 1024px;  /* Desktop */
+--breakpoint-xl: 1280px;  /* Wide */
+--breakpoint-2xl: 1536px; /* Extra wide */
+```
+
+---
+
+## 🚀 Anti-Patterns à Éviter
+
+❌ **Ne pas faire:**
+1. Utiliser des emojis comme icônes (utiliser SVG)
+2. Animer `width`, `height`, `top`, `left`
+3. Animations infinies sur les éléments décoratifs
+4. Surcharger d'animations trop simultanées
+5. Néon trop brillant qui fatigue les yeux
+6. Texte sans contraste suffisant en mode clair
+7. Layout qui change au hover (scale uniquement)
+
+✅ **Faire:**
+1. Utiliser des SVG icon (Heroicons, Lucide)
+2. Animer `transform`, `opacity`, `filter`
+3. Animations continues seulement pour les loaders
+4. Limiter à 1-2 animations par élément
+5. Utiliser des ombres néon subtiles
+6. Contraste 4.5:1 minimum
+7. Transitions fluides sans layout shift
+
+---
+
+## 🎨 Composants Spécifiques AudiOhm
+
+### Player Bar
+- Position: Fixed bottom
+- Height: 90px
+- Background: Glassmorphism
+- Border top: Gradient rainbow (2px)
+- Controls: Shuffle, Prev, Play/Pause, Next, Repeat
+- Progress bar: Custom range input avec thumb néon
+- Volume: Slider + bouton mute
+- Actions: Like, Add to playlist
+
+### Sidebar
+- Width: 280px (desktop)
+- Background: Dark avec ligne supérieure gradient
+- Navigation: 3 items (Accueil, Rechercher, Bibliothèque)
+- Active state: Background cyan/10 + barre latérale
+- Footer: Bouton déconnexion
+
+### Cards
+- Track card: Image + Titre + Artiste + Durée + Bouton play
+- Playlist card: Image carrée + Nom + Info tracks
+- Hover: Border cyan + Glow + Scale 1.01
+
+### Loading States
+- Spinner: Double rotation (cyan + violet)
+- Skeleton: Shimmer animation
+- Text: "Chargement..." animé
+
+---
+
+## 📦 Éléments de Marque
+
+### Logo
+- Icon: Casque audio (FontAwesome)
+- Text: "AudiOhm"
+- Font: Righteous
+- Animation: Glow cyclique (3 couleurs)
+
+### Couleurs de Marque
+- Primary: Cyan (#00F0FF)
+- Secondary: Violet (#BF00FF)
+- Accent: Rose (#FF006E)
+
+### Tone of Voice
+- Moderne
+- Énergique
+- Futuriste
+- Accessible
+- Fun
+
+---
+
+## 🎯 Priorités d'Implémentation
+
+### Phase 1 - Fondations (CRITICAL)
+1. ✅ Variables CSS définies
+2. ✅ Typographie importée
+3. ✅ Couleurs configurées
+4. ✅ Reset CSS
+
+### Phase 2 - Composants Base (HIGH)
+1. Boutons (primary, secondary)
+2. Form inputs
+3. Cards (track, playlist)
+4. Navigation
+
+### Phase 3 - Animations (MEDIUM)
+1. Hover states
+2. Transitions
+3. Loading states
+4. Micro-interactions
+
+### Phase 4 - Polish (LOW)
+1. Scroll animations
+2. Parallax effects
+3. Advanced hover effects
+4. Particle effects
+
+---
+
+## 📚 Ressources
+
+### Google Fonts
+https://fonts.google.com/share?selection?family=Poppins:wght@300;400;500;600;700|Righteous
+
+### Icon Libraries
+- Font Awesome 6.5: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css
+- Heroicons: https://heroicons.com/
+- Lucide: https://lucide.dev/
+
+### Documentation
+- CSS Tricks: https://css-tricks.com/
+- MDN Web Docs: https://developer.mozilla.org/
+- Web.dev: https://web.dev/
+
+---
+
+**Version:** 2.0
+**Last Updated:** 2026-01-19
+**Maintained by:** AudiOhm Design Team