Luxury_Medical_Audio_Player
Un composant de lecteur audio complexe, réactif et luxueux pour les applications de santé, doté d’une typographie sophistiquée, de palettes de couleurs raffinées (triadiques) et d’une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 font-serif">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
<div class="p-6 sm:p-8 md:p-10">
<div class="flex flex-col sm:flex-row items-center sm:items-start space-y-6 sm:space-y-0 sm:space-x-8">
<div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-52 md:h-52 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-600 group relative">
<img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600/70 via-purple-600/70 to-pink-600/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<p class="text-white text-xs text-center font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150">Therapeutic Sounds</p>
</div>
</div>
<div class="flex-grow text-center sm:text-left">
<h3 class="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize leading-snug mb-1 sm:mb-2">
Mindfulness Meditation for Stress Relief
</h3>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 font-medium opacity-90 mb-3 sm:mb-4 px-2 sm:px-0">
Dr. Eleanor Vance, Clinical Psychologist
</p>
<div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-500 dark:text-gray-400 text-xs sm:text-sm opaciy-80">
<svg class="w-4 h-4" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M6 18H4a2 2 0 01-2-2V8.307l2.748 1.924A2 2 0 007.5 9h10a2 2 0 011.5 1.076L22 8.307V16a2 2 0 01-2 2h-2M15 9V7a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 5a2 2 0 01-2 2H7a2 2 0 01-2-2v-2a2 2 0 012-2h6a2 2 0 012 2v2z"></path></svg>
<span>Session 1 of 5</span>
<span class="h-1 w-1 bg-gray-400 dark:bg-gray-500 rounded-full"></span>
<span>30 min</span>
</div>
</div>
</div>
<div class="mt-8">
<div class="relative h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full">
<div class="absolute top-0 left-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:to-purple-400 rounded-full" style="width: 45%;"></div>
<div class="absolute top-1/2 -mt-2 -ml-2 w-4 h-4 bg-purple-600 dark:bg-purple-500 rounded-full shadow-lg cursor-pointer transform -translate-x-1/2" style="left: 45%;"></div>
</div>
<div class="flex justify-between text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium opacity-80">
<span>0:14</span>
<span>29:46</span>
</div>
</div>
<div class="flex items-center justify-center space-x-6 sm:space-x-8 mt-6 sm:mt-8">
<button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
<svg class="w-6 h-6" 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="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
</button>
<button class="p-2 sm:p-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 text-white shadow-lg transform hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700">
<svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75zM14.25 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
<svg class="w-6 h-6" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</button>
</div>
<div class="mt-8 border-t border-gray-100 dark:border-gray-700 pt-6 sm:pt-8">
<h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white mb-4 opacity-95">Upcoming Sessions</h4>
<ul class="space-y-4">
<li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
<img src="https://picsum.photos/100/100?random=2" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-yellow-500 opacity-20"></div>
</div>
<div>
<p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Breathing Exercises for Anxiety</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 25 min</p>
</div>
</div>
<button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
<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="M9 5l7 7-7 7"></path></svg>
</button>
</li>
<li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
<img src="https://picsum.photos/100/100?random=3" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
<div class="absolute inset-0 bg-pink-500 opacity-20"></div>
</div>
<div>
<p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Guided Imagery for Pain Management</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 40 min</p>
</div>
</div>
<button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
<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="M9 5l7 7-7 7"></path></svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>Composants associés
Lecteur audio rétro
Composant Implémentation d’un lecteur audio avec un design rétro/vintage, des effets réactifs et la prise en charge du thème sombre.
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 réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres et froides, une prise en charge du mode sombre et des fonctionnalités interactives adaptées aux plates-formes de divertissement et de médias.