Glassmorphism 오디오 플레이어 컴포넌트

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-900 to-gray-900 dark:from-gray-900 dark:to-black p-4">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl p-6 md:p-8 lg:p-10 shadow-2xl relative overflow-hidden backdrop-filter backdrop-blur-lg border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700" style="background-color: rgba(255, 255, 255, 0.08); dark:background-color: rgba(0, 0, 0, 0.2);">
    <!-- Background elements for glassmorphism effect -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
    <div class="absolute bottom-0 left-0 w-32 h-32 bg-green-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-white text-center">
      <h2 class="text-2xl md:text-3xl font-extrabold mb-2 uppercase tracking-wide text-white dark:text-gray-100 drop-shadow-lg">Industrial Audio Feed</h2>
      <p class="text-sm md:text-base text-gray-200 dark:text-gray-400 mb-6 drop-shadow-md">Monitoring system broadcasts</p>

      <!-- Album Art / Waveform Placeholder -->
      <div class="w-full h-48 md:h-64 bg-gray-700 bg-opacity-40 rounded-2xl mb-8 flex items-center justify-center overflow-hidden shadow-inner-lg shadow-black/30 dark:shadow-gray-900/50">
        <img src="https://picsum.photos/400/300?random=1" alt="Industrial Sound Wave" class="object-cover w-full h-full opacity-70 blur-sm brightness-75 md:opacity-80 md:blur-none md:brightness-100" aria-hidden="true">
        <div class="absolute w-4/5 h-20 bg-gradient-to-r from-transparent via-blue-500/60 to-transparent rounded-full opacity-60 md:opacity-80" style="box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);"></div>
        <div class="absolute text-white text-3xl md:text-4xl font-bold tracking-wider opacity-90 drop-shadow-lg">
          <span class="uppercase">Live Feed</span>
        </div>
      </div>

      <!-- Track Info -->
      <div class="mb-6">
        <h3 class="text-xl md:text-2xl font-bold mb-1 text-white dark:text-gray-100 drop-shadow-lg">Turbine Gen 5 Status</h3>
        <p class="text-md md:text-lg text-gray-300 dark:text-gray-400 drop-shadow-md">Sector 7 - Control Room</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full mb-6">
        <div class="h-2 bg-white bg-opacity-20 rounded-full drop-shadow-sm">
          <div class="h-full bg-blue-500 rounded-full w-3/4 shadow-md" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-gray-300 dark:text-gray-400">
          <span>02:45</span>
          <span>03:20</span>
        </div>
      </div>

      <!-- Controls -->
      <div class="flex justify-around items-center mb-6">
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Previous track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 md:p-5 rounded-full bg-blue-600 bg-opacity-70 backdrop-filter backdrop-blur-sm hover:bg-opacity-90 transition-all duration-300 shadow-2xl text-white dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-70" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 md:h-10 md:w-10" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.73 5.485c-.975-1.077-2.73-1.077-3.705 0l-4.5 4.975c-.975 1.077-.975 2.828 0 3.905l4.5 4.975c.975 1.077 2.73 1.077 3.705 0l4.5-4.975c.975-1.077.975-2.828 0-3.905l-4.5-4.975z" />
          </svg>
        </button>
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Next track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Volume Control and Settings -->
      <div class="flex items-center justify-between text-gray-300 dark:text-gray-400">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A.999.999 0 0014 9H8a.999.999 0 00-.707 1.707L6 12l.707.707A.999.999 0 008 14h6a.999.999 0 001.536-.536l3.5-3.5a.999.999 0 000-1.414l-3.5-3.5z" />
          </svg>
          <input type="range" min="0" max="100" value="70" class="w-24 md:w-32 lg:w-40 h-1 rounded-full appearance-none outline-none bg-blue-400 transition-all duration-300" style="background: linear-gradient(to right, #60A5FA 70%, rgba(255,255,255,0.3) 70%);" aria-label="Volume slider">
        </div>
        <button class="p-2 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Audio settings">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>

      <div class="mt-8 pt-4 border-t border-white border-opacity-10 dark:border-gray-700 text-sm italic text-gray-400 dark:text-gray-500 select-none">
        <p>System v3.1.2 | <span class="font-semibold">Online</span></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for range input thumb (for better glassmorphism integration) */
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']:hover::-webkit-slider-thumb {
    background: #4B90F6; /* slightly darker blue */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  input[type='range']:hover::-moz-range-thumb {
    background: #4B90F6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  /* Keyframes for the blob animation */
  @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.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

</style>