3D_Forest_Audio_Player
Un composant de lecteur audio réactif avec des éléments de conception 3D, utilisant une palette de couleurs forêt/vert, adapté aux plates-formes éducatives prenant en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 to-green-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 rotateY-2 transition-all duration-300 ease-in-out hover:rotateX-0 hover:rotateY-0 border-t border-l border-green-200 dark:border-green-700 bg-gradient-to-br from-green-50/50 to-emerald-50/50 dark:from-gray-800/50 dark:to-gray-900/50" style="transform-style: preserve-3d; perspective: 1000px;">
<div class="p-6 md:p-8 lg:p-10 relative">
<!-- Top '3D' Bevel -->
<div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-600/20 dark:from-green-700/20 dark:to-emerald-800/20 rounded-3xl" style="transform: translateZ(-50px);"></div>
<div class="relative z-10">
<!-- Header -->
<div class="flex items-center justify-between mb-6">
<span class="text-xs md:text-sm uppercase tracking-wider text-green-700 dark:text-green-300 font-bold">Lesson Audio</span>
<button class="p-2 rounded-full text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</button>
</div>
<!-- Album Art / Thumbnail -->
<div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-lg mb-6 transform translateZ(20px)">
<img src="https://picsum.photos/600/350?random=1" alt="Course Thumbnail" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 ease-in-out hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-xl"></div>
<div class="absolute bottom-4 left-4 right-4 text-white">
<h3 class="text-lg md:text-xl font-bold mb-1 drop-shadow-md">Understanding Photosynthesis</h3>
<p class="text-sm text-gray-200 drop-shadow-sm">Biology Basics - Chapter 3</p>
</div>
</div>
<!-- Controls and Progress Bar -->
<div class="mb-6">
<div class="flex justify-between items-center text-sm font-medium text-green-800 dark:text-green-200 mb-2">
<span>1:23</span>
<span>-3:45</span>
</div>
<div class="w-full bg-green-200 dark:bg-green-700 rounded-full h-2.5 relative transform translateZ(10px)">
<div class="bg-green-500 dark:bg-green-400 h-2.5 rounded-full" style="width: 30%;"></div>
<div class="absolute -top-0.5 left-[calc(30%-8px)] w-4 h-4 bg-white dark:bg-gray-800 rounded-full shadow-md border-2 border-green-500 dark:border-green-400 transform translateZ(5px)"></div>
</div>
</div>
<div class="flex items-center justify-around mb-6 space-x-2">
<button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
<svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.817 4.218 2.155 5.74M15 9V3M9 15v6"></path></svg>
</button>
<button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
<svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
</button>
<button class="p-4 md:p-5 lg:p-6 rounded-full bg-green-500 dark:bg-green-600 text-white shadow-xl hover:scale-110 active:scale-90 transition-all duration-300 transform translateZ(25px) border-4 border-green-300 dark:border-green-500/50">
<svg class="w-8 h-8 md:w-9 md:h-9" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
<svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
</button>
<button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
<svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.746 12C12.9 8.7 10.6 5.4 8.7 2.1m-2.1 6.6c-1.3 2.1-2.6 4.2-3.9 6.3M21 12c-1.8 3.3-4.1 6.6-6 9.9m-2.1-6.6c1.3-2.1 2.6-4.2 3.9-6.3M12 12a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</button>
</div>
<!-- More Info -->
<div class="flex items-center space-x-4 bg-green-50 dark:bg-gray-700 p-4 rounded-xl shadow-inner transform translateZ(10px) border border-green-200 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor" class="w-12 h-12 rounded-full object-cover shadow-md">
<div>
<p class="text-sm font-semibold text-green-900 dark:text-green-100">Taught by Dr. Elara Vance</p>
<p class="text-xs text-green-700 dark:text-green-300">Botanist & Environmental Scientist</p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Lecteur audio skeuomorphe
Un composant de lecteur audio conçu avec un style Skeuomorphic, une palette de couleurs pastel et une interface complexe. Il prend en charge le mode sombre et est réactif, adapté aux sites de commerce électronique.
Lecteur audio Memphis Earth-toned
Un composant de lecteur audio modérément complexe conçu dans un style inspiré de Memphis avec une palette de couleurs terre, adapté à la documentation ou aux sites wiki. Présente des formes géométriques audacieuses, des motifs ludiques et une réactivité totale avec la prise en charge du mode sombre.
Lecteur audio monochromatique 3D
Composant de lecteur audio monochromatique 3D réactif pour portefeuille, avec prise en charge du mode sombre