Lecteur audio monochromatique 3D
Composant de lecteur audio monochromatique 3D réactif pour portefeuille, avec prise en charge du mode sombre
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6 transform transition-all duration-300 hover:scale-105">
<!-- 3D Effect Base -->
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-lg opacity-50 transform translate-x-2 translate-y-2"></div>
<div class="relative z-10">
<!-- Album Art (Placeholder with 3D depth) -->
<div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-md mb-4 overflow-hidden relative">
<img src="https://picsum.photos/400/300" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110">
<!-- Simple Overlay for Depth -->
<div class="absolute inset-0 bg-black opacity-10"></div>
</div>
<!-- Song Title and Artist -->
<div class="text-center mb-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title Goes Here</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
</div>
<!-- Progress Bar (Simple 3D look) -->
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4 relative">
<div class="bg-blue-500 dark:bg-blue-400 h-2.5 rounded-full" style="width: 50%;"></div>
<!-- Simple highlight for 3D effect -->
<div class="absolute top-0 left-0 h-full bg-white opacity-20 rounded-full" style="width: 50%;"></div>
</div>
<!-- Controls (Simple, with potential for interactive 3D effect on hover) -->
<div class="flex justify-center space-x-6">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
<!-- Simple SVG Placeholder for Previous Button -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-125">
<!-- Simple SVG Placeholder for Play Button -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 14.17V9.83a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
<!-- Simple SVG Placeholder for Next Button -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
Composant du lecteur audio Bauhaus
Un composant de lecteur audio complexe et réactif conçu selon les principes du Bauhaus pour les applications de sport/fitness, avec une base en noir et blanc avec une couleur d’accentuation frappante. Comprend les commandes de lecture, la barre de progression, le contrôle du volume, la liste des pistes et la prise en charge du mode sombre.
Glassmorphism, composant du lecteur audio
Un composant de lecteur audio simple et réactif de style glassmorphism avec une palette de couleurs violet/violet, conçu pour les applications industrielles/manufacturières. Inclut la prise en charge du mode sombre.
Composant de lecteur audio ludique
Un composant de lecteur audio simple et ludique avec des tons sépia/brun chauds, des éléments arrondis et une esthétique joyeuse. Inclut la prise en charge du mode sombre et est entièrement réactif pour les plates-formes de divertissement et de médias.