root
801e6a050b
- 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>
245 lines
10 KiB
HTML
245 lines
10 KiB
HTML
<!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>
|
|
<!-- Toast Container -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<!-- 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="email" id="login-email" placeholder="Email" required autocomplete="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="password" id="login-password" placeholder="Mot de passe" required autocomplete="current-password">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-sign-in-alt"></i> 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">
|
|
<i class="fas fa-user-plus"></i> 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">
|
|
<!-- Mobile Menu Button -->
|
|
<button class="mobile-menu-btn" id="mobile-menu-btn">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="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><i class="fas fa-bolt"></i> 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><i class="fas fa-fire"></i> Musiques tendance</h2>
|
|
<div class="track-list" id="trending-tracks">
|
|
<div class="loading">
|
|
<div class="spinner" style="width: 40px; height: 40px; margin: 0 auto 1rem;"></div>
|
|
Chargement...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2><i class="fas fa-clock"></i> Récemment écoutées</h2>
|
|
<div class="track-list" id="recent-tracks">
|
|
<p style="color: var(--text-secondary);">Aucune écoute récente</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Search Page -->
|
|
<div id="search-page" class="page">
|
|
<div class="page-header">
|
|
<h1><i class="fas fa-search"></i> 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><i class="fas fa-music"></i> Ma Bibliothèque</h1>
|
|
</div>
|
|
|
|
<section class="section">
|
|
<h2><i class="fas fa-list"></i> Mes Playlists</h2>
|
|
<div class="playlist-list" id="my-playlists">
|
|
<div class="loading">
|
|
<div class="spinner" style="width: 40px; height: 40px; margin: 0 auto 1rem;"></div>
|
|
Chargement...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2><i class="fas fa-heart"></i> Titres likés</h2>
|
|
<div class="track-list" id="liked-tracks">
|
|
<p style="color: var(--text-secondary);">Aucun titre liké pour le moment</p>
|
|
</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="shuffle-btn" title="Aléatoire">
|
|
<i class="fas fa-random"></i>
|
|
</button>
|
|
<button class="btn-control" id="prev-btn" title="Précédent">
|
|
<i class="fas fa-step-backward"></i>
|
|
</button>
|
|
<button class="btn-control btn-play" id="play-btn" title="Play/Pause">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
<button class="btn-control" id="next-btn" title="Suivant">
|
|
<i class="fas fa-step-forward"></i>
|
|
</button>
|
|
<button class="btn-control" id="repeat-btn" title="Répéter">
|
|
<i class="fas fa-redo"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="player-progress">
|
|
<span id="current-time" class="time">0:00</span>
|
|
<input type="range" id="progress-bar" min="0" max="100" value="0" class="progress-bar">
|
|
<span id="total-time" class="time">0:00</span>
|
|
</div>
|
|
|
|
<div class="player-volume">
|
|
<button class="btn-control" id="mute-btn" title="Muet">
|
|
<i class="fas fa-volume-up"></i>
|
|
</button>
|
|
<input type="range" id="volume-bar" min="0" max="100" value="100" class="volume-bar">
|
|
</div>
|
|
|
|
<div class="player-actions">
|
|
<button class="btn-control" id="like-btn" title="J'aime">
|
|
<i class="far fa-heart"></i>
|
|
</button>
|
|
<button class="btn-control" id="playlist-btn" title="Ajouter à la playlist">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</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>
|