prod: UI Optimisée mise en production
- Documentation archivée et réorganisée - Backend: Ajout tests, migrations, library service, rate limiting - Frontend: Suppression Flutter, focus sur interface web HTML/JS - Tailwind CSS ajouté pour le style - Améliorations UX et corrections bugs 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>
This commit is contained in:
root
@@ -0,0 +1,470 @@
|
||||
# 🎯 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é**
|
||||
|
||||
```css
|
||||
/* ============================================
|
||||
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**
|
||||
|
||||
```css
|
||||
/* 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**
|
||||
|
||||
```css
|
||||
@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**
|
||||
|
||||
```html
|
||||
<!-- 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)**
|
||||
|
||||
```html
|
||||
<!-- ❌ Ne pas utiliser -->
|
||||
<span>🎵</span>
|
||||
|
||||
<!-- ✅ Utiliser -->
|
||||
<i class="fas fa-music" aria-hidden="true"></i>
|
||||
```
|
||||
|
||||
**2.3 Optimiser la structure sémantique**
|
||||
|
||||
```html
|
||||
<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**
|
||||
|
||||
```javascript
|
||||
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**
|
||||
|
||||
```javascript
|
||||
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**
|
||||
|
||||
```javascript
|
||||
// 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**
|
||||
|
||||
```javascript
|
||||
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**
|
||||
|
||||
```css
|
||||
.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**
|
||||
|
||||
```css
|
||||
.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**
|
||||
|
||||
```css
|
||||
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
|
||||
|
||||
```css
|
||||
.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
|
||||
|
||||
```css
|
||||
.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
|
||||
|
||||
```css
|
||||
.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
|
||||
Reference in New Issue
Block a user