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 de lecteur audio
Un composant de lecteur audio brutaliste avec une palette de couleurs pastel, une mise en page complexe et un design réactif avec prise en charge du thème sombre, adapté aux sites Web d’entreprise. Il utilise Tailwind CSS pour le style et comprend des commandes pour la lecture/pause, le volume et une barre de progression.
Composant de lecteur audio
Un composant de lecteur audio complexe et minimaliste avec une palette de couleurs rétro/vintage, conçu pour les plateformes de rencontres/sociales. Les fonctionnalités incluent les commandes de lecture, la barre de progression, le contrôle du volume, les informations sur les pistes et la prise en charge du mode sombre.
Retro_Gaming_Audio_Player
Un composant de lecteur audio à thème rétro/vintage conçu pour les sites Web de jeux, avec une palette de couleurs complémentaire, une mise en page réactive et une prise en charge du mode sombre. Il imite l’esthétique des années 80/90 avec un visuel de cassette.