Composant Visionneuse de fichiers - Musique/Audio
Un composant de visionneuse de fichiers complexe et réactif conçu pour les plateformes musicales et audio, doté d’une esthétique Material Design avec des couleurs vives et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex">
<!-- Left Pane: Navigation/Categories -->
<div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-400">My Music</h2>
<ul class="space-y-3">
<li>
<a href="#" class="flex items-center p-3 rounded-xl bg-blue-100 text-blue-900 dark:bg-blue-800 dark:text-blue-100 font-semibold shadow-md transition-all duration-300 hover:bg-blue-200 dark:hover:bg-blue-700">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
Home
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></svg>
Playlists
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
Albums
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
Artists
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9c0-4.97-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1-8V7h2v4h4v2h-4v4h-2v-4H7v-2h4z"></path></svg>
Add New
</a>
</li>
</ul>
</div>
<!-- Right Pane: Main Content -->
<div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 flex flex-col">
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-extrabold text-indigo-900 dark:text-indigo-400">Recently Played</h1>
<div class="flex items-center space-x-3">
<input type="text" placeholder="Search music..." class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-500 transition-all duration-300 w-32 sm:w-48 md:w-64">
<button class="p-2 rounded-full bg-violet-600 text-white shadow-lg transform active:scale-95 transition-all duration-200 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zM3 11V9h10v2H3zm0 3h7v2H3v-2zM3 7h14V5H3v2z"></path></svg>
</button>
</div>
</div>
<!-- File/Track Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 flex-grow">
<!-- Track Card 1 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Journey's End</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Melodies of the Sky</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">3:45</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 2 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Echoes of the Past</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">The Whispering Woods</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">4:10</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 3 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Moonlit Serenade</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nightfall Orchestra</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">5:00</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 4 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">City Lights Dream</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Urban Harmonics</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">3:15</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 5 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=5" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Forest Lullaby</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nature's Symphony</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">2:58</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
</div>
<!-- Paginator (Example) -->
<div class="flex justify-center mt-8">
<nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-indigo-600 text-sm font-medium text-white z-10 dark:border-indigo-500 dark:bg-indigo-600">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
10
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
<!-- Floating Action Button (FAB) / Global Player Control -->
<div class="fixed bottom-6 right-6 z-50">
<button class="w-16 h-16 rounded-full bg-gradient-to-r from-teal-400 to-cyan-600 text-white flex items-center justify-center shadow-2xl transform active:scale-90 transition-all duration-300 hover:shadow-cyan-400/50 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-cyan-700">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
<span class="sr-only">Play Now</span>
</button>
</div>
</div>Composants associés
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers avec conception 3D, effets réactifs et prise en charge du mode sombre.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers complexe et réactif avec un design inspiré du Bauhaus utilisant des couleurs analogues, adapté aux sites d’emploi et aux plateformes de développement de carrière. Inclut la prise en charge du mode sombre.
Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec mode sombre