AudiOhm/archives/docs/REFACTOR_GUIDE.md

🎯 Guide de Refonte UI/UX - AudiOhm Web

Date: 2026-01-19 Status: Prêt à implémenter Version: 2.0

---

📊 Analyse Actuelle

✅ Ce qui marche bien

• Thème cyberpunk néon cohérent
• Animations déjà présentes
• Glassmorphism implémenté
• Structure HTML sémantique
• Responsive design fonctionnel

⚠️ Points à améliorer

1. Performance: Trop d'animations simultanées
2. Accessibilité: Contraste à vérifier en mode clair
3. JavaScript: Logique manquante pour nouvelles fonctionnalités
4. Icons: Certains emojis peuvent être remplacés par des SVG
5. Loading States: Squelettes loading pas complètement implémentés

---

🎯 Objectifs de la Refonte

1. Moderniser le Design System

• Passer à un design system plus structuré
• Améliorer la cohérence des espacements
• Optimiser les animations pour la performance
• Standardiser les composants

2. Améliorer l'Accessibilité

• Vérifier tous les contrastes de couleurs (4.5:1 minimum)
• Ajouter des états focus visibles
• Implémenter prefers-reduced-motion
• Ajouter des labels ARIA

3. Optimiser les Performances

• Réduire le nombre d'animations continues
• Utiliser transform et opacity uniquement
• Lazy loading des images
• Minifier CSS en production

4. Compléter les Fonctionnalités

• Logique JavaScript complète
• Toast notifications fonctionnelles
• Contrôles player actifs
• Navigation mobile

---

🚀 Plan d'Implémentation

Phase 1: CSS - Optimisations (1-2 heures)

1.1 Créer un fichier CSS structuré

/* ============================================
   AUDIOHM DESIGN SYSTEM V2
   ============================================ */

/* 1. VARIABLES */
:root {
    /* Colors */
    --primary: #00F0FF;
    --secondary: #BF00FF;
    --accent: #FF006E;
    --success: #00FF88;

    /* Backgrounds */
    --bg-dark: #0A0E27;
    --bg-darker: #050814;
    --bg-card: rgba(15, 23, 50, 0.6);

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0C0;

    /* Effects */
    --glow-primary: 0 0 20px rgba(0, 240, 255, 0.5);
    --glow-secondary: 0 0 20px rgba(191, 0, 255, 0.5);

    /* Spacing */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
}

/* 2. RESET & BASE */
/* 3. UTILITIES */
/* 4. COMPONENTS */
/* 5. ANIMATIONS */
/* 6. RESPONSIVE */

1.2 Optimiser les animations

/* Supprimer les animations continues inutiles */
/* Conserver seulement: */
- Loading spinner
- Background gradient (20s, très lent)
- Hover states (150-300ms)

1.3 Ajouter prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Phase 2: HTML - Améliorations (1 heure)

2.1 Ajouter des attributs ARIA

<!-- Navigation -->
<nav aria-label="Navigation principale">
    <a href="#" aria-current="page">Accueil</a>
</nav>

<!-- Player -->
<div role="region" aria-label="Lecteur audio">
    <button aria-label="Lecture/Pause">
        <i class="fas fa-play"></i>
    </button>
</div>

<!-- Formulaires -->
<form aria-label="Connexion">
    <label for="login-email">Email</label>
    <input id="login-email" type="email" required autocomplete="email">
</form>

2.2 Remplacer les emojis par des SVG (si présents)

<!-- ❌ Ne pas utiliser -->
<span>🎵</span>

<!-- ✅ Utiliser -->
<i class="fas fa-music" aria-hidden="true"></i>

2.3 Optimiser la structure sémantique

<main role="main">
    <section aria-labelledby="trending-heading">
        <h2 id="trending-heading">Musiques tendance</h2>
    </section>
</main>

Phase 3: JavaScript - Fonctionnalités (2-3 heures)

3.1 Toast Notifications

function showToast(message, type = 'success') {
    const container = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        <span>${message}</span>
    `;
    container.appendChild(toast);

    setTimeout(() => {
        toast.style.animation = 'toastSlideOut 0.4s ease forwards';
        setTimeout(() => toast.remove(), 400);
    }, 3000);
}

3.2 Navigation Mobile

const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const sidebar = document.getElementById('sidebar');

mobileMenuBtn.addEventListener('click', () => {
    sidebar.classList.toggle('open');
});

// Fermer le menu en cliquant en dehors
document.addEventListener('click', (e) => {
    if (!sidebar.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
        sidebar.classList.remove('open');
    }
});

3.3 Player Controls

// Play/Pause
document.getElementById('play-btn').addEventListener('click', () => {
    const audio = document.getElementById('audio-player');
    const icon = document.querySelector('#play-btn i');

    if (audio.paused) {
        audio.play();
        icon.classList.remove('fa-play');
        icon.classList.add('fa-pause');
    } else {
        audio.pause();
        icon.classList.remove('fa-pause');
        icon.classList.add('fa-play');
    }
});

// Mute
document.getElementById('mute-btn').addEventListener('click', () => {
    const audio = document.getElementById('audio-player');
    const icon = document.querySelector('#mute-btn i');

    audio.muted = !audio.muted;

    if (audio.muted) {
        icon.className = 'fas fa-volume-mute';
    } else {
        icon.className = 'fas fa-volume-up';
    }
});

// Like button
document.getElementById('like-btn').addEventListener('click', function() {
    this.classList.toggle('liked');
    const icon = this.querySelector('i');

    if (this.classList.contains('liked')) {
        icon.classList.remove('far');
        icon.classList.add('fas');
        showToast('Ajouté aux titres likés', 'success');
    } else {
        icon.classList.remove('fas');
        icon.classList.add('far');
        showToast('Retiré des titres likés', 'success');
    }
});

3.4 Progress Bar

const audio = document.getElementById('audio-player');
const progressBar = document.getElementById('progress-bar');
const currentTimeEl = document.getElementById('current-time');
const totalTimeEl = document.getElementById('total-time');

// Update progress
audio.addEventListener('timeupdate', () => {
    const progress = (audio.currentTime / audio.duration) * 100;
    progressBar.value = progress;
    currentTimeEl.textContent = formatTime(audio.currentTime);
});

audio.addEventListener('loadedmetadata', () => {
    totalTimeEl.textContent = formatTime(audio.duration);
});

// Seek
progressBar.addEventListener('input', () => {
    const time = (progressBar.value / 100) * audio.duration;
    audio.currentTime = time;
});

function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
}

Phase 4: CSS - Finitions (1 heure)

4.1 Scrollbar Custom

.main-content::-webkit-scrollbar {
    width: 8px;
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

4.2 Improved Hover States

.track-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.track-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--glow-primary);
}

4.3 Focus States

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

---

📋 Checklist Pré-Livraison

Visual Quality

• Aucun emoji comme icône
• Icons cohérents (Font Awesome uniquement)
• Hover states sans layout shift
• Couleurs du thème utilisées directement
• Pas de transitions width/height

Interaction

• cursor-pointer sur éléments cliquables
• Feedback visuel au hover
• Transitions 150-300ms
• Focus states visibles

Accessibility

• Contraste 4.5:1 minimum
• Labels ARIA présents
• prefers-reduced-motion implémenté
• Navigation clavier fonctionnelle

Performance

• Animations optimisées (transform/opacity)
• Pas d'animations infinies décoratives
• Images lazy-loaded
• CSS minifié en prod

Responsive

• Mobile (375px) OK
• Tablet (768px) OK
• Desktop (1024px+) OK
• Pas de horizontal scroll

---

🎨 Exemples de Code Optimisé

Button Component

.btn {
    position: relative;
    overflow: hidden;
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-3px);
}

Card Component

.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    border-color: var(--primary);
    box-shadow: var(--glow-primary);
    transform: translateY(-3px);
}

Loading Skeleton

.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

---

🚀 Next Steps

1. Créer un nouveau fichier CSS structuré basé sur le design system
2. Implémenter les fonctionnalités JavaScript manquantes
3. Tester l'accessibilité avec un outil comme Lighthouse
4. Optimiser les performances avec Chrome DevTools
5. Tester sur mobile (375px, 768px)
6. Minifier et déployer

---

Version: 2.0 Statut: Prêt à implémenter Estimation: 4-6 heures de travail