feat: Modernisation UI/UX et configuration Flutter multi-plateforme
Phase 1 - Corrections Critiques: - Fixed memory leaks dans music_provider.dart (stream subscriptions) - Fixed race conditions dans search_provider.dart (stale results) - Fixed token refresh errors dans api_service.dart - Improved error handling avec messages utilisateur - Changed API URL to HTTPS by default Phase 2 - Améliorations UX Desktop: - Ajouté cursor pointers sur tous les éléments cliquables - Implémenté hover states avec effets néon glow (200ms transitions) - Créé skeleton loading states avec shimmer animation - Ajouté widgets: ClickableWrapper, ErrorDisplay, SkeletonLoading - Enhanced visual feedback pour desktop users Phase 3 - Configuration Flutter: - Configuré Android (Gradle 8.1.0, Kotlin 1.9.0, minSdk 21, targetSdk 34) - Créé launcher icons cyberpunk néon (5 densités) - Configuré Windows desktop (structure complète) - Activé Linux desktop support - Ajouté package équatable pour entités de domaine - Corrigé imports (colors.dart, auth_provider.dart) - Fixed Dio API compatibility (RequestOptions) Documentation: - STYLE_GUIDE.md: Guide complet (100+ pages) - DESIGN_IMPLEMENTATION_GUIDE.md: Implémentation Flutter - BUILD_STATUS.md: Status builds + troubleshooting - QUICKSTART_BUILDS.md: Guide rapide - BUILD_INDEX.md: Index documentation - PHASE_1_CORRECTIONS.md: Corrections Phase 1 - PHASE_2_UX_IMPROVEMENTS.md: Améliorations Phase 2 - PR_REVIEW_SUMMARY.md: Revue code complète - CODE_ANALYSIS_AND_PRIORITIES.md: Analyse code Scripts & Builds: - BUILD_ALL.sh: Script automatisé builds multi-plateforme - builds/: Structure avec README par plateforme - design-system/: Système de design complet Backend: - Ajouté streaming HTTP Range pour audio progressif - Enhanced YouTube service avec métadonnées complètes - Improved error handling et validation 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,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AudiOhm - Web Player</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- App Container -->
|
||||
<div id="app">
|
||||
<!-- Loading Screen -->
|
||||
<div id="loading-screen" class="loading-screen">
|
||||
<div class="spinner"></div>
|
||||
<h2>Chargement de AudiOhm...</h2>
|
||||
</div>
|
||||
|
||||
<!-- Login Screen -->
|
||||
<div id="login-screen" class="screen hidden">
|
||||
<div class="login-container">
|
||||
<h1 class="logo">
|
||||
<i class="fas fa-headphones"></i> AudiOhm
|
||||
</h1>
|
||||
<form id="login-form" class="login-form">
|
||||
<div class="form-group">
|
||||
<input type="text" id="login-email" placeholder="Email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" id="login-password" placeholder="Mot de passe" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Se connecter</button>
|
||||
<p class="register-link">
|
||||
Pas encore de compte ? <a href="#" id="show-register">Créer un compte</a>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<form id="register-form" class="login-form hidden">
|
||||
<div class="form-group">
|
||||
<input type="text" id="register-username" placeholder="Nom d'utilisateur" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" id="register-email" placeholder="Email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" id="register-password" placeholder="Mot de passe" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Créer un compte</button>
|
||||
<p class="register-link">
|
||||
Déjà un compte ? <a href="#" id="show-login">Se connecter</a>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div id="auth-error" class="error-message hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main App -->
|
||||
<div id="main-app" class="screen hidden">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h1 class="logo">
|
||||
<i class="fas fa-headphones"></i> AudiOhm
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="#" class="nav-item active" data-page="home">
|
||||
<i class="fas fa-home"></i> Accueil
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="search">
|
||||
<i class="fas fa-search"></i> Rechercher
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="library">
|
||||
<i class="fas fa-music"></i> Bibliothèque
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button id="logout-btn" class="btn btn-secondary">
|
||||
<i class="fas fa-sign-out-alt"></i> Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- Home Page -->
|
||||
<div id="home-page" class="page active">
|
||||
<div class="page-header">
|
||||
<h1>Bienvenue sur AudiOhm</h1>
|
||||
<p>Votre alternative à Spotify avec streaming YouTube</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<h2>Recherche rapide</h2>
|
||||
<div class="search-bar">
|
||||
<input type="text" id="quick-search" placeholder="Rechercher une musique, un artiste...">
|
||||
<button class="btn btn-primary" id="quick-search-btn">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Musiques tendance</h2>
|
||||
<div class="track-list" id="trending-tracks">
|
||||
<div class="loading">Chargement...</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Search Page -->
|
||||
<div id="search-page" class="page">
|
||||
<div class="page-header">
|
||||
<h1>Recherche</h1>
|
||||
</div>
|
||||
|
||||
<div class="search-bar">
|
||||
<input type="text" id="search-input" placeholder="Que voulez-vous écouter ?">
|
||||
<button class="btn btn-primary" id="search-btn">
|
||||
<i class="fas fa-search"></i> Rechercher
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="search-results" class="search-results"></div>
|
||||
</div>
|
||||
|
||||
<!-- Library Page -->
|
||||
<div id="library-page" class="page">
|
||||
<div class="page-header">
|
||||
<h1>Ma Bibliothèque</h1>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<h2>Mes Playlists</h2>
|
||||
<div class="playlist-list" id="my-playlists">
|
||||
<div class="loading">Chargement...</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Player -->
|
||||
<div id="player" class="player">
|
||||
<div class="player-info">
|
||||
<img id="player-cover" src="/static/img/default-cover.png" alt="Cover" class="player-cover">
|
||||
<div class="player-details">
|
||||
<div id="player-title" class="player-title">Aucun titre</div>
|
||||
<div id="player-artist" class="player-artist">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-controls">
|
||||
<button class="btn-control" id="prev-btn">
|
||||
<i class="fas fa-step-backward"></i>
|
||||
</button>
|
||||
<button class="btn-control btn-play" id="play-btn">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
<button class="btn-control" id="next-btn">
|
||||
<i class="fas fa-step-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="player-progress">
|
||||
<input type="range" id="progress-bar" min="0" max="100" value="0" class="progress-bar">
|
||||
<span id="current-time" class="time">0:00</span>
|
||||
<span id="total-time" class="time">0:00</span>
|
||||
</div>
|
||||
|
||||
<div class="player-volume">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
<input type="range" id="volume-bar" min="0" max="100" value="100" class="volume-bar">
|
||||
</div>
|
||||
|
||||
<audio id="audio-player" preload="none"></audio>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Fallback: Hide loading screen after 5 seconds if JS fails
|
||||
setTimeout(function() {
|
||||
const loadingScreen = document.getElementById('loading-screen');
|
||||
if (loadingScreen) {
|
||||
console.error('Loading screen timeout - JS may have failed to load');
|
||||
loadingScreen.style.display = 'none';
|
||||
}
|
||||
}, 5000);
|
||||
</script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user