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.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-800 transition-colors duration-300 min-h-screen flex items-center justify-center font-sans">
<div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-amber-200 to-yellow-300 dark:from-zinc-700 dark:to-zinc-900
border-4 border-amber-500 dark:border-zinc-500">
<!-- Memphis Pattern Background -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<pattern id="memphis-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" fill="#6b4e4e" class="dark:fill-zinc-600" />
<circle cx="15" cy="5" r="3" fill="#a0522d" class="dark:fill-zinc-400" />
<rect x="5" y="10" width="10" height="7" fill="#d2b48c" class="dark:fill-zinc-500" />
<path d="M0 0 L10 20 L20 0 Z" fill="#7f5539" class="dark:fill-zinc-700" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#memphis-pattern)" />
</svg>
</div>
<!-- Player Content -->
<div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col items-center space-y-6 sm:space-y-8">
<!-- Top Section: Album Art & Info -->
<div class="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left w-full space-y-4 sm:space-y-0 sm:space-x-6">
<div class="relative w-32 h-32 sm:w-40 sm:h-40 flex-shrink-0 rounded-tl-3xl rounded-br-3xl overflow-hidden shadow-lg border-4 border-amber-600 dark:border-zinc-600 transition-all duration-300">
<img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute bottom-0 right-0 p-2 bg-amber-600 dark:bg-zinc-600 text-amber-50 dark:text-zinc-50 text-xs font-semibold rounded-tl-lg shadow-md">Live</div>
</div>
<div class="flex flex-col flex-grow mt-2 sm:mt-0">
<p class="text-xs sm:text-sm text-amber-900 dark:text-zinc-300 font-semibold mb-1 uppercase tracking-wider">Now Playing</p>
<h3 class="text-2xl sm:text-3xl font-extrabold text-amber-800 dark:text-zinc-100 leading-tight mb-2">
The Earth's Embrace
</h3>
<p class="text-lg sm:text-xl text-amber-700 dark:text-zinc-200 font-medium">
<span class="block sm:inline-block">By </span>
<span class="font-semibold border-b-2 border-dashed border-amber-600 dark:border-zinc-400 pb-0.5">Gaia Echoes</span>
</p>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full flex items-center space-x-3 mt-6">
<span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">0:45</span>
<div class="flex-grow h-3 bg-amber-400 dark:bg-zinc-600 rounded-full overflow-hidden relative shadow-inner">
<div class="h-full w-[45%] bg-amber-700 dark:bg-zinc-400 rounded-full relative">
<div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-amber-900 dark:bg-zinc-100 rounded-full shadow-md border-2 border-amber-500 dark:border-zinc-500"></div>
</div>
</div>
<span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">3:20</span>
</div>
<!-- Controls -->
<div class="w-full flex justify-around items-center text-amber-900 dark:text-zinc-200 mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
<button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>
<button class="p-4 sm:p-5 rounded-full bg-amber-500 dark:bg-zinc-400 text-amber-50 dark:text-zinc-900 shadow-lg transform transition-all duration-200 hover:scale-110 active:scale-95
border-2 border-amber-700 dark:border-zinc-300 focus:outline-none focus:ring-4 focus:ring-amber-700/50 dark:focus:ring-zinc-300/50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M16 18h2V6h-2zM6 18l8.5-6L6 6z"/></svg>
</button>
</div>
<!-- Volume and Settings -->
<div class="w-full flex justify-between items-center mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
<div class="flex items-center space-x-2 text-amber-800 dark:text-zinc-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M14 3.23c-.27-.2-.59-.3-.92-.3h-3.85c-.91 0-1.7.55-2.06 1.47L2 12l5.17 7.37c.36.92 1.15 1.47 2.06 1.47h3.85c.33 0 .65-.11.92-.3L22 12 14 3.23zm-.12 1.42L20 12l-7.12 7.35-.13-.13V4.65z"/></svg>
<input type="range" class="w-24 sm:w-32 h-2 rounded-full bg-amber-400 dark:bg-zinc-600 appearance-none cursor-pointer
[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-amber-700 dark:[&::-webkit-slider-thumb]:bg-zinc-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-amber-500 dark:[&::-webkit-slider-thumb]:border-zinc-500 [&::-webkit-slider-thumb]:appearance-none
[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-amber-700 dark:[&::-moz-range-thumb]:bg-zinc-400 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-amber-500 dark:[&::-moz-range-thumb]:border-zinc-500">
</div>
<button class="p-2 sm:p-3 rounded-full bg-amber-300 dark:bg-zinc-700 text-amber-900 dark:text-zinc-200 shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95
border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><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"/></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.
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.
Memphis_Audio_Player_Component
Un composant de lecteur audio réactif inspiré du design de Memphis, avec des formes géométriques audacieuses et des couleurs neutres chaudes, avec prise en charge du mode sombre.