3D_Candy_Music_Player_Progress
Un composant d’indicateur de progression de lecteur de musique complexe, inspiré de la 3D, avec des couleurs sucrées, adapté au streaming musical et aux plateformes audio. Dispose d’une réactivité et d’une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-xl p-6 md:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out
border border-pink-200 dark:border-gray-700
hover:shadow-2xl hover:scale-[1.01]
relative
before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-pink-50 before:via-purple-50 before:to-blue-50 before:opacity-0 hover:before:opacity-100 dark:before:from-gray-800 dark:before:via-gray-700 dark:before:to-gray-600 dark:hover:before:opacity-5">
<!-- Background '3D' elements -->
<div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-300 dark:bg-fuchsia-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
<div class="absolute -bottom-8 -right-8 w-40 h-40 bg-purple-300 dark:bg-violet-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
<div class="absolute top-1/4 right-5 w-24 h-24 bg-blue-300 dark:bg-cyan-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>
<div class="relative z-10 space-y-6">
<!-- Song Info & Album Art -->
<div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
<div class="relative w-32 h-32 sm:w-24 sm:h-24 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 ease-in-out
bg-gradient-to-br from-pink-300 to-purple-300 dark:from-fuchsia-700 dark:to-violet-700
hover:scale-105 hover:rotate-3">
<!-- 3D effect border -->
<div class="absolute inset-0.5 rounded-2xl overflow-hidden">
<img src="https://picsum.photos/id/1043/300/300" alt="Album Art" class="w-full h-full object-cover" />
</div>
<div class="absolute inset-0.5 rounded-2xl border-4 border-white border-opacity-30 dark:border-gray-800 dark:border-opacity-30"></div>
</div>
<div class="text-center sm:text-left">
<h3 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-1 leading-tight tracking-wider transform transition-colors duration-300">
Dreamy Synthwave
</h3>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-300 tracking-wide transform transition-colors duration-300">
<span class="font-semibold text-purple-600 dark:text-purple-400">Synthwave Artist</span> - Album Name
</p>
</div>
</div>
<!-- Progress Bar -->
<div class="relative py-4">
<div class="w-full h-4 relative rounded-full bg-pink-200 dark:bg-gray-700 shadow-inner overflow-hidden">
<!-- 3D 'track' -->
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-100 via-purple-100 to-blue-100 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 h-2 bg-pink-300 dark:bg-gray-900 rounded-b-full opacity-30"></div>
<!-- Progress fill -->
<div class="absolute top-0 left-0 h-4 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 dark:from-fuchsia-600 dark:to-violet-600 shadow-lg glow-pink-purple transition-all duration-500 ease-out"
style="width: 65%;">
<!-- Inner 3D sparkle -->
<div class="absolute inset-0 rounded-full bg-white opacity-20 dark:opacity-10 glow-white"></div>
<!-- 3D 'edge' -->
<div class="absolute bottom-0 left-0 right-0 h-2 bg-purple-500 dark:bg-violet-800 rounded-b-full opacity-50"></div>
</div>
<!-- Playhead 'knob' -->
<div class="absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-gradient-to-tr from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 shadow-xl
flex items-center justify-center glow-pink-purple transition-all duration-500 ease-out"
style="left: 65%; transform: translateX(-50%) translateY(-50%);">
<div class="w-3 h-3 rounded-full bg-white dark:bg-gray-100 shadow-md"></div>
</div>
</div>
<div class="flex justify-between text-sm mt-2 text-gray-500 dark:text-gray-400">
<span class="font-medium">2:35</span>
<span class="font-medium">3:45</span>
</div>
</div>
<!-- Volume/Playback Speed Bars (mini-progress indicators) -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
<div>
<label for="volume-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Volume</label>
<div class="w-full h-3 relative rounded-full bg-teal-100 dark:bg-gray-700 shadow-inner overflow-hidden">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 h-1.5 bg-teal-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>
<div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-teal-400 to-emerald-400 dark:from-emerald-600 dark:to-teal-600 shadow-md glow-teal-emerald"
style="width: 80%;"></div>
</div>
</div>
<div>
<label for="speed-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Speed</label>
<div class="w-full h-3 relative rounded-full bg-orange-100 dark:bg-gray-700 shadow-inner overflow-hidden">
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
<div class="absolute bottom-0 left-0 right-0 h-1.5 bg-orange-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>
<div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-orange-400 to-amber-400 dark:from-amber-600 dark:to-orange-600 shadow-md glow-orange-amber"
style="width: 50%;"></div>
</div>
</div>
</div>
<!-- Controls (example, not focus of progress) -->
<div class="flex justify-around items-center pt-6 text-gray-500 dark:text-gray-400">
<button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
<!-- < Previous Icon -->
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
</svg>
</button>
<button class="p-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 text-white shadow-xl glow-pink-purple
transition-all duration-300 ease-in-out transform hover:scale-105 hover:rotate-3 active:scale-95
relative overflow-hidden group"
aria-label="Play">
<div class="absolute inset-0 rounded-full bg-white opacity-10 dark:opacity-5 group-hover:opacity-20 transition-opacity duration-300"></div>
<!-- Play Icon -->
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
<!-- Next Icon -->
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Custom Styles for 3D effect and animations -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.6, 0.4, 0.4, 0.8);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Glow effects */
.glow-pink-purple {
filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
}
.dark .glow-pink-purple {
filter: drop-shadow(0 4px 8px rgba(186, 104, 200, 0.3)) drop-shadow(0 2px 4px rgba(126, 75, 140, 0.2)); /* Darker glow for dark mode */
}
.glow-teal-emerald {
filter: drop-shadow(0 2px 4px rgba(20, 184, 166, 0.3)) drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
}
.dark .glow-teal-emerald {
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)) drop-shadow(0 1px 2px rgba(20, 184, 166, 0.1));
}
.glow-orange-amber {
filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3)) drop-shadow(0 1px 2px rgba(245, 158, 11, 0.2));
}
.dark .glow-orange-amber {
filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)) drop-shadow(0 1px 2px rgba(249, 115, 22, 0.1));
}
.glow-white {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}
</style>Composants associés
Playful_Job_Application_Progress_Indicator
Un composant d’indicateur de progression complexe, ludique et réactif pour les flux de travail des candidatures, avec une palette de couleurs bonbon/sucré et la prise en charge du mode sombre. Conçu pour les sites d’emploi et les plateformes de développement de carrière, il représente visuellement plusieurs étapes de candidature avec des transitions animées et des messages encourageants.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style brutaliste à fort contraste, mettant en valeur le travail ou les produits d’un portefeuille. Il dispose d’une interface riche avec plusieurs éléments interactifs, conçue pour être réactive avec la prise en charge du thème sombre à l’aide de Tailwind CSS.
Volet Indicateurs de progrès
Un indicateur de progression simple conçu avec un effet de glassmorphism, adapté aux sites Web de commerce électronique avec prise en charge du mode sombre et une palette de couleurs monochromatiques.