Skeuomorphic_Farm_Video_Player

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-gray-300 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000">
    <!-- Top Bezel / Screen Area -->
    <div class="relative bg-black rounded-xl overflow-hidden shadow-inner-lg shadow-gray-400/30 dark:shadow-black/50 aspect-video mb-6">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="object-cover w-full h-full" />
      <!-- Play Button Overlay -->
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
        <button class="w-24 h-24 rounded-full bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-opacity-75 transition-all duration-300 transform active:scale-95 shadow-lg shadow-green-500/50 flex items-center justify-center group">
          <svg class="w-12 h-12 text-white group-hover:scale-110 transition-transform duration-300" 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>

    <!-- Controls Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Left Controls: Playback & Volume -->
      <div class="flex justify-around items-center bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
        <button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full bg-green-500 dark:bg-green-600 shadow-md shadow-green-500/40 dark:shadow-green-700/60 hover:bg-green-600 dark:hover:bg-green-700 transition-colors active:scale-95 transform">
          <svg class="w-8 h-8 text-white" 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-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
        </button>
      </div>

      <!-- Right Controls: Progress Bar & More Options -->
      <div class="flex flex-col justify-between bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
        <div class="relative w-full h-4 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inset-sm shadow-gray-500/30 dark:shadow-black/40">
          <div class="absolute h-full w-3/4 bg-green-500 rounded-full shadow-md shadow-green-500/50 dark:shadow-green-700/60"></div>
          <div class="absolute h-6 w-6 -right-1 top-1/2 -translate-y-1/2 bg-white dark:bg-gray-200 rounded-full border-2 border-green-500 dark:border-green-600 shadow-lg shadow-black/30 dark:shadow-black/50 cursor-pointer"></div>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold mr-2">0:45 / 2:30</span>
          <button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
            <svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM17 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4z"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
            <svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.546 15.58a.75.75 0 01.442.263l6.5-6.5a.75.75 0 011.06 1.06l-6.208 6.207a2.25 2.25 0 01-3.182 0l-4.25-4.25a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 001.06 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.5 10.5a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H5.25a.75.75 0 01-.75-.75z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom shadow utilities for skeuomorphism */
  .shadow-inner-lg {
    box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.4), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.6), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.05), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .shadow-inset-sm {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inset-sm {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  }
  /* Perspective for a slight 3D tilt */
  .perspective-1000 {
    transform: rotateX(2deg) rotateY(0deg);
  }
  @media (max-width: 639px) {
    .perspective-1000 {
      transform: none; /* Disable perspective on small screens */
    }
  }
</style>