레트로 다크 모드 비디오 플레이어 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-900 text-gray-200 dark:text-gray-200 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gray-800 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden border border-gray-700 dark:border-gray-700">
    <!-- Video Player Section -->
    <div class="relative pb-[56.25%] h-0 overflow-hidden bg-black flex items-center justify-center">
      <video class="absolute top-0 left-0 w-full h-full object-cover" controls poster="https://picsum.photos/1280/720?random=1">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <!-- Play Button Overlay (Optional - if actual video element is used, this is not needed) -->
      <!-- <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <button class="p-4 rounded-full bg-orange-600 dark:bg-orange-700 text-white dark:text-gray-100 hover:scale-105 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div> -->
    </div>

    <!-- Video Controls & Info Section -->
    <div class="p-4 sm:p-5 md:p-6 flex flex-col space-y-4">
      <!-- Playback Controls -->
      <div class="flex items-center justify-between text-gray-400 dark:text-gray-400">
        <div class="flex items-center space-x-3 sm:space-x-4">
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <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="M15.75 19.5L8.25 12l7.5-7.5"></path></svg>
          </button>
          <button class="p-2 rounded-full text-amber-500 dark:text-amber-400 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <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="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
          </button>
        </div>
        <div class="flex items-center space-x-3 sm:space-x-4">
          <span class="text-sm sm:text-base">0:00 / 0:00</span>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 hidden sm:block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.823 2 12 2c5.177 0 10.268 3.552 11.542 8-.262.285-.544.545-.845.787A5.94 5.94 0 0112 18c-2.072 0-3.957-.78-5.328-2.075C5.814 14.887 4.19 13.067 2.658 11.413a1.458 1.458 0 010-2.826c1.532-1.654 3.156-3.474 4.872-4.889C8.043 3.78 9.928 3 12 3c1.785 0 3.42.474 4.88 1.282A7.173 7.173 0 0012 17a6.002 6.002 0 01-3.672-1.295A13.918 13.918 0 00.458 10z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <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="M4 7v10l2 2h12a2 2 0 002-2V9.957a2 2 0 00-.573-1.424L16.435 4.542A2 2 0 0014.957 4H7a2 2 0 00-2 2z"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5-5"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full h-2 bg-gray-700 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer group">
        <div class="h-full bg-amber-600 dark:bg-amber-600 rounded-full" style="width: 30%;"></div>
        <div class="absolute top-1/2 left-[30%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-amber-500 dark:bg-amber-500 shadow-md transform scale-0 group-hover:scale-100 transition-transform duration-200"></div>
      </div>

      <!-- Video Title & Description -->
      <div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-100 dark:text-gray-100 mb-2 leading-tight">
          Retro Game Day Highlights: Championship Match
        </h3>
        <p class="text-gray-300 dark:text-gray-300 text-sm sm:text-base leading-snug">
          Relive the thrilling moments of the championship final. Epic plays, incredible goals, and unforgettable victories from last season's top teams. A must-watch for all fitness enthusiasts!
        </p>
      </div>

      <!-- Action Buttons -->
      <div class="flex flex-wrap gap-3 pt-2">
        <button class="flex-1 sm:flex-none px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white dark:text-gray-100 rounded-md hover:bg-amber-700 dark:hover:bg-amber-800 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">Share </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.4 3.2m-6.4-6.4l6.4-3.2m2.59-2.59a3 3 0 11-4.242 4.242A3 3 0 0117.842 5.05zM9 12a3 3 0 11-6 0 3 3 0 016 0zm6 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </button>
        <button class="flex-1 sm:flex-none px-4 py-2 bg-gray-700 dark:bg-gray-700 text-gray-200 dark:text-gray-200 rounded-md hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">Save </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path></svg>
        </button>
        <button class="flex-1 sm:flex-none px-4 py-2 bg-gray-700 dark:bg-gray-700 text-gray-200 dark:text-gray-200 rounded-md hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">More </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
        </button>
      </div>

      <!-- Other Videos Section (Conceptual, for context) -->
      <div class="pt-4 border-t border-gray-700 dark:border-gray-700 mt-4">
        <h4 class="text-lg sm:text-xl font-bold text-gray-200 dark:text-gray-200 mb-3">More Highlights</h4>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center space-x-3 bg-gray-700 dark:bg-gray-700 rounded-lg p-2 hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 cursor-pointer">
            <img src="https://picsum.photos/100/60?random=2" alt="Thumbnail" class="w-20 h-12 sm:w-24 sm:h-14 object-cover rounded-md flex-shrink-0">
            <div>
              <p class="text-gray-100 dark:text-gray-100 font-semibold text-sm sm:text-base">Intense Training Session</p>
              <p class="text-gray-400 dark:text-gray-400 text-xs sm:text-sm">5 days ago | 12:34</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 bg-gray-700 dark:bg-gray-700 rounded-lg p-2 hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 cursor-pointer">
            <img src="https://picsum.photos/100/60?random=3" alt="Thumbnail" class="w-20 h-12 sm:w-24 sm:h-14 object-cover rounded-md flex-shrink-0">
            <div>
              <p class="text-gray-100 dark:text-gray-100 font-semibold text-sm sm:text-base">Athlete Spotlight: Rise of a Champion</p>
              <p class="text-gray-400 dark:text-gray-400 text-xs sm:text-sm">2 weeks ago | 8:15</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>