feat: Modernisation complète UI/UX du site web
Design & Animations: - ✨ Background animé avec gradients qui se déplacent - 🎨 Glassmorphism (backdrop-filter blur) sur tous les éléments - ⚡ Animations fluides (cubic-bezier easing) sur toutes les interactions - 🌟 Effets néon glow améliorés avec ombres colorées - 📱 Responsive design perfectionné (mobile, tablette, desktop) Améliorations CSS: - Spinner double rotation (cyan + violet) - Logo avec animation glow cyclique (3 couleurs) - Formulaires avec icônes FontAwesome intégrées - Boutons avec effet shine au hover - Cartes avec barre supérieure animée - Scrollbar custom néon - Animations: fadeIn, slideIn, pulse, shimmer, shake Nouvelles Fonctionnalités HTML: - 🎉 Toast notifications container - 📱 Bouton menu mobile - ❤️ Section "Titres likés" - ⏰ Section "Récemment écoutées" - 🔀 Contrôles player: shuffle, repeat, mute, like, add to playlist - 🔊 Bouton volume interactif - 🎯 Attributs autocomplete sur les formulaires Nouveaux Contrôles Player: - Bouton shuffle (aléatoire) - Bouton repeat (répéter) - Bouton mute (couper le son) - Bouton like (aimer) - Bouton add to playlist - Times affichés de chaque côté du progress bar Micro-interactions: - Hover states sur tous les éléments cliquables - Transformations scale/translate au hover - Transitions 0.3s cubic-bezier fluides - Focus states avec glow sur les inputs - Loading states avec skeleton shimmer Accessibilité: - Attributs autocomplete pour les formulaires - Titles sur tous les boutons - Input types corrects (email, password) - Labels sémantiques 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
File diff suppressed because it is too large
Load Diff
@@ -8,6 +8,9 @@
|
||||
<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 -->
|
||||
@@ -24,12 +27,14 @@
|
||||
</h1>
|
||||
<form id="login-form" class="login-form">
|
||||
<div class="form-group">
|
||||
<input type="text" id="login-email" placeholder="Email" required>
|
||||
<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>
|
||||
<input type="password" id="login-password" placeholder="Mot de passe" required autocomplete="current-password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Se connecter</button>
|
||||
<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>
|
||||
@@ -45,7 +50,9 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -57,8 +64,13 @@
|
||||
|
||||
<!-- 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">
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h1 class="logo">
|
||||
<i class="fas fa-headphones"></i> AudiOhm
|
||||
@@ -89,12 +101,12 @@
|
||||
<!-- Home Page -->
|
||||
<div id="home-page" class="page active">
|
||||
<div class="page-header">
|
||||
<h1>Bienvenue sur AudiOhm</h1>
|
||||
<h1>Bienvenue sur AudiOhm 🎵</h1>
|
||||
<p>Votre alternative à Spotify avec streaming YouTube</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<h2>Recherche rapide</h2>
|
||||
<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">
|
||||
@@ -104,9 +116,19 @@
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Musiques tendance</h2>
|
||||
<h2><i class="fas fa-fire"></i> Musiques tendance</h2>
|
||||
<div class="track-list" id="trending-tracks">
|
||||
<div class="loading">Chargement...</div>
|
||||
<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>
|
||||
@@ -114,7 +136,7 @@
|
||||
<!-- Search Page -->
|
||||
<div id="search-page" class="page">
|
||||
<div class="page-header">
|
||||
<h1>Recherche</h1>
|
||||
<h1><i class="fas fa-search"></i> Recherche</h1>
|
||||
</div>
|
||||
|
||||
<div class="search-bar">
|
||||
@@ -130,13 +152,23 @@
|
||||
<!-- Library Page -->
|
||||
<div id="library-page" class="page">
|
||||
<div class="page-header">
|
||||
<h1>Ma Bibliothèque</h1>
|
||||
<h1><i class="fas fa-music"></i> Ma Bibliothèque</h1>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<h2>Mes Playlists</h2>
|
||||
<h2><i class="fas fa-list"></i> Mes Playlists</h2>
|
||||
<div class="playlist-list" id="my-playlists">
|
||||
<div class="loading">Chargement...</div>
|
||||
<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>
|
||||
@@ -154,28 +186,45 @@
|
||||
</div>
|
||||
|
||||
<div class="player-controls">
|
||||
<button class="btn-control" id="prev-btn">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<input type="range" id="progress-bar" min="0" max="100" value="0" class="progress-bar">
|
||||
<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">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user