Commandes du lecteur de musique Glassmorphic
Un composant de contrôle de lecteur de musique glassmorphic avec des tons sépia/brun, avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il est réactif, prend en charge le mode sombre et convient au streaming musical et aux plateformes audio.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-stone-900 dark:to-stone-700 font-sans">
<div class="w-full max-w-md p-6 rounded-3xl backdrop-filter backdrop-blur-xl bg-white/20 dark:bg-stone-800/30 border border-t-white/30 border-l-white/30 border-b-white/10 border-r-white/10 dark:border-t-stone-700/30 dark:border-l-stone-700/30 dark:border-b-stone-900/40 dark:border-r-stone-900/40 shadow-xl overflow-hidden transition-all duration-300 ease-in-out sm:p-8">
<div class="flex items-center space-x-4 mb-6">
<img src="https://picsum.photos/seed/music_album/100/100" alt="Album Art" class="w-20 h-20 rounded-xl shadow-lg ring-2 ring-white/30 dark:ring-stone-600/50 object-cover">
<div class="flex-1">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-1 leading-tight sm:text-2xl">Lost in the Echoes</h3>
<p class="text-sm text-stone-700 dark:text-stone-300 sm:text-base">The Echoes of Light</p>
</div>
</div>
<div class="w-full bg-stone-300/50 dark:bg-stone-700/50 rounded-full h-2 mb-4 relative overflow-hidden">
<div class="bg-amber-700 dark:bg-amber-500 h-full rounded-full" style="width: 65%;"></div>
<div class="w-3 h-3 rounded-full bg-stone-900 dark:bg-stone-50 absolute top-1/2 -translate-y-1/2" style="left: 65%; transform: translateX(-50%) translateY(-50%);"></div>
</div>
<div class="flex justify-between text-xs text-stone-700 dark:text-stone-300 mb-6">
<span>2:45</span>
<span>-1:15</span>
</div>
<div class="flex items-center justify-around space-x-6 mb-6">
<button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M20.25 12a.75.75 0 01-.75.75H6.31l5.47 5.47a.75.75 0 11-1.06 1.06l-6.75-6.75a.75.75 0 010-1.06l6.75-6.75a.75.75 0 111.06 1.06l-5.47 5.47H19.5a.75.75 0 01.75.75z" clip-rule="evenodd" />
</svg>
</button>
<button class="flex items-center justify-center w-16 h-16 rounded-full backdrop-filter backdrop-blur-md bg-amber-600/70 dark:bg-amber-700 text-white shadow-lg transition-all duration-200 ease-in-out hover:scale-105 hover:bg-amber-700/80 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-stone-800/40">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
<path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75H16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
</svg>
<!-- Play icon (uncomment to show instead of pause) -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
<path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.38 2.724-1.638L18.897 12l-11.673 7.985c-1.196.812-2.724-.136-2.724-1.638V5.653z" clip-rule="evenodd" />
</svg> -->
</button>
<button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center justify-between mt-8 pt-4 border-t border-t-white/30 dark:border-t-stone-700/30">
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path d="M18 5.25a2.25 2.25 0 00-2.25-2.25H13.5V6a.75.75 0 01-.75.75H10.5a.75.75 0 01-.75-.75V3H6.75A2.25 2.25 0 004.5 5.25v9.75A2.25 2.25 0 006.75 17.25h11.25A2.25 2.25 0 0020.25 15V5.25z" />
<path fill-rule="evenodd" d="M5.841 20.352a.75.75 0 01.11.919l-1.396 2.41a.75.75 0 01-1.072.247 5.25 5.25 0 01-2.73-4.226c-.705-2.365 1.01-4.784 3.003-5.264a.75.75 0 01.378.143l1.395 2.41a.75.75 0 01-.069.813 2.998 2.998 0 00-1.029 2.012 2.998 2.998 0 002.585 2.934c.333.035.653.073.955.11z" clip-rule="evenodd" />
</svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path d="M13.5 4.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM12 18.75h9v-1.5h-9v1.5zM12 13.5h9v-1.5h-9v1.5zM12 8.25h9V6.75h-9v1.5z" />
<path d="M9 12a2.25 2.25 0 00-2.25 2.25V17.5L7.5 18H5.25A2.25 2.25 0 013 15.75v-1.5A2.25 2.25 0 015.25 12H9z" />
</svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M9.401 3.003L9.401 3.003c.88-1.523 2.65-1.926 4.172-1.045l1.474.851a9.966 9.966 0 013.255.474c1.196.356 2.052 1.517 1.906 2.709a1.597 1.597 0 00.26 1.056c.408.54.912 1.037 1.463 1.49l1.4.966c1.1.758 1.45 2.201.838 3.419C20.334 16.146 17.518 19 12 19c-3.149 0-5.91-.904-8.082-2.397-1.121-.795-1.874-2.234-1.637-3.666 4.792-.783 7.039-4.717 7.039-4.717z" clip-rule="evenodd" />
<path d="M11.94 9.141a.75.75 0 10-1.39-.72l.432.842 1.39-.72-.432-.843z" />
</svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path d="M19.006 3.705a.75.75 0 00-.512-1.113L4.625 1.25A4.5 4.5 0 002.25 5.5V16.5a3 3 0 003 3h.75v3.375c0 .621.504 1.125 1.125 1.125h2.25a.75.75 0 00.75-.75v-3.75H12a.75.75 0 00.75-.75V14.25h.375c2.213 0 4.309-.655 6.004-1.764a.75.75 0 00.186-.135l3.42-3.037a.75.75 0 00.112-.868V4.5a.75.75 0 00-.91-.795zM16.793 9.782l-3.674 3.261a1.5 1.5 0 01-.587.232l-.23.03A.75.75 0 0012 13.5H9.75V5.5c0-.103.003-.205.009-.306C9.916 4.965 10.12 4.5 10.5 4.5h3C4.625 1.25 15.375 1.25 18.04 2.802a.75.75 0 00.41-.013c.962-.438 2.407-.942 3.605-1.124A.75.75 0 0022.5 1.5h.023a.75.75 0 00.046-1.498 7.502 7.502 0 00-6.191 1.026v1.312c0 2.226-1.501 4.25-3.765 4.25h-.548A9.75 9.75 0 014.5 8.25V5.5c0-.853.64-1.564 1.47-.788l11.751 2.35L19.006 3.705z" />
</svg>
</button>
</div>
</div>
</div>Composants associés
Carte d’inscription immobilière
Une carte d’annonce immobilière complexe, inspirée du papier/de l’impression avec des tons bleus d’entreprise, conçue pour les plateformes d’annonces immobilières. Il propose une mise en page réactive, une prise en charge du mode sombre et de multiples détails sur une propriété.
Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.
Carte de réservation inspirée du papier/de l’impression
Un composant de carte de réservation/réservation simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs terre, avec prise en charge du mode sombre. Convient pour afficher les créneaux de rendez-vous ou les détails de la réservation.