Componenti Lettore audio Componente lettore audio

Componente lettore audio

Un componente del lettore audio brutalista con combinazione di colori triadica e complessità moderata, adatto per un cruscotto. Presenta un design reattivo con supporto per il tema scuro, implementato con Tailwind CSS.

Anteprima

Codice HTML

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
    <div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
      <h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
      <div class="text-black dark:text-white text-lg font-bold">🔊</div>
    </div>
    
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
        <img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
      </div>
      <div class="flex-grow">
        <h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
        <p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
      </div>
    </div>
    
    <div class="mb-6">
      <div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
        <div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white text-sm font-semibold">
        <span>2:30</span>
        <span>-1:45</span>
      </div>
    </div>
    
    <div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏪
      </button>
      <button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ▶
      </button>
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏩
      </button>
    </div>
    
    <div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
      <div class="flex justify-between items-center mb-2">
        <span class="text-black dark:text-white font-bold text-sm">Volume</span>
        <span class="text-black dark:text-white text-sm">75%</span>
      </div>
      <div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
        <div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
    </div>
    
  </div>
</div>

Componenti correlati

Lettore audio di lusso/premium

Un componente per lettore audio semplice ed elegante progettato per piattaforme di forum o community, caratterizzato da uno stile lussuoso/premium con una combinazione di colori autunnali e una reattività completa con supporto per la modalità scura.

Aperto

Componente lettore audio Bauhaus

Un componente lettore audio complesso e reattivo progettato secondo i principi Bauhaus per applicazioni sportive/fitness, caratterizzato da una base in bianco e nero con un sorprendente colore d'accento. Include i controlli di riproduzione, la barra di avanzamento, il controllo del volume, l'elenco tracce e il supporto per la modalità oscura.

Aperto

Lettore audio retrò

Componente Implementazione di un lettore audio con design retrò/vintage, effetti reattivi e supporto per temi scuri.

Aperto