사이버펑크 농업 이미지 라이트박스

<div class="min-h-screen bg-neutral-950 dark:bg-black text-violet-200 p-4 font-mono antialiased">

  <!-- Grid of thumbnail images -->
  <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-600 drop-shadow-md">Neural Crop Database // Image Log</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-10">
    <!-- Image Thumbnail 1 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/100/1280/720', 'Hydroponic Greens Farm', 'Automated vertical farm cultivating a variety of leafy greens in a controlled environment.', 'Harvest Date: 2077-10-23', 'Sensor Readings: Optimal', 'Operator: Unit 734-Alpha')">
      <img src="https://picsum.photos/id/100/300/200" alt="Hydroponic Greens" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Hydroponic Greens</p>
      </div>
    </div>
    <!-- Image Thumbnail 2 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/101/1280/720', 'Automated Drone Irrigation', 'Precision irrigation drones deployed over a vast bio-engineered wheat field.', 'Last Flight: 2077-10-22', 'Fuel Cell: 98%', 'Unit ID: Drone-004')">
      <img src="https://picsum.photos/id/101/300/200" alt="Automated Drone Irrigation" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Drone Irrigation</p>
      </div>
    </div>
    <!-- Image Thumbnail 3 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/102/1280/720', 'Subterranean Myco-Farm', 'Advanced fungal cultivation in a controlled subterranean environment.', 'Harvest Cycle: Weekly', 'Humidity: 95%', 'Strain: Myco-Synth 001')">
      <img src="https://picsum.photos/id/102/300/200" alt="Subterranean Myco-Farm" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Myco-Farm</p>
      </div>
    </div>
     <!-- Image Thumbnail 4 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/103/1280/720', 'Bioluminescent Algae Tanks', 'Energy-efficient algae bioreactors producing biofuel and agricultural supplements.', 'Biomass Output: High', 'Temp: 28°C', 'Project: Bio-Fuel Nexus')">
      <img src="https://picsum.photos/id/103/300/200" alt="Bioluminescent Algae Tanks" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Algae Tanks</p>
      </div>
    </div>
    <!-- Image Thumbnail 5 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/104/1280/720', 'Urban Vertical Garden', 'Compact automated vertical farm integrated into an urban skyscraper.', 'Crops: Mixed Greens', 'Water Usage: Minimal', 'Location: Sector 7, Rooftop A')">
      <img src="https://picsum.photos/id/104/300/200" alt="Urban Vertical Garden" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Urban Garden</p>
      </div>
    </div>
  </div>

  <!-- The Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 z-50 hidden bg-neutral-950/70 dark:bg-black/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 opacity-0">
    <div class="relative w-full max-w-5xl bg-neutral-900 dark:bg-neutral-800 rounded-lg shadow-2xl border border-purple-800 dark:border-fuchsia-900 transform transition-all duration-300 scale-95">
      <!-- Close button -->
      <button class="absolute top-3 right-3 text-violet-300 hover:text-fuchsia-400 text-3xl font-bold leading-none z-10 transition-colors duration-200" onclick="closeLightbox()">
        &times;
      </button>

      <div class="flex flex-col lg:flex-row">
        <!-- Lightbox Image -->
        <div class="flex-shrink-0 lg:w-2/3 p-4">
          <img id="lightbox-image" src="" alt="" class="w-full h-auto object-contain rounded-md border border-purple-700 dark:border-fuchsia-800">
        </div>

        <!-- Image Details -->
        <div class="lg:w-1/3 p-4 flex flex-col justify-between overflow-y-auto max-h-[80vh]">
          <div>
            <h3 id="lightbox-title" class="text-xl md:text-2xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-500 drop-shadow-sm"></h3>
            <p id="lightbox-description" class="text-sm md:text-base text-violet-300 mb-4"></p>

            <div class="space-y-1 text-xs md:text-sm text-violet-400/80">
              <p><strong class="text-purple-300">// Date:</strong> <span id="lightbox-meta1"></span></p>
              <p><strong class="text-purple-300">// Status:</strong> <span id="lightbox-meta2"></span></p>
              <p><strong class="text-purple-300">// Ref_ID:</strong> <span id="lightbox-meta3"></span></p>
            </div>
          </div>

          <!-- Action Buttons / Other Info -->
          <div class="mt-6 pt-4 border-t border-purple-800/50">
            <button class="w-full bg-gradient-to-r from-purple-700 to-fuchsia-700 hover:from-purple-600 hover:to-fuchsia-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300 drop-shadow-lg text-sm md:text-base">
              Download Log Data <span class="ml-1">&gt;</span>
            </button>
            <p class="text-xs text-violet-500 mt-2 text-center">Secure Protocol v3.1_AX</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Simple toggle for dark mode (for demonstration) -->
  <div class="fixed bottom-4 left-4 p-2 bg-neutral-800/70 border border-purple-800 rounded-lg shadow-lg flex items-center space-x-2">
    <label for="dark-mode-toggle" class="text-violet-300 text-xs md:text-sm">Dark Mode</label>
    <input type="checkbox" id="dark-mode-toggle" class="w-4 h-4 text-fuchsia-500 bg-neutral-700 border-purple-600 rounded focus:ring-fuchsia-500" onclick="document.documentElement.classList.toggle('dark')">
  </div>

  <script>
    function openLightbox(imageUrl, title, description, meta1, meta2, meta3) {
      const lightbox = document.getElementById('lightbox-modal');
      document.getElementById('lightbox-image').src = imageUrl;
      document.getElementById('lightbox-title').textContent = title;
      document.getElementById('lightbox-description').textContent = description;
      document.getElementById('lightbox-meta1').textContent = meta1;
      document.getElementById('lightbox-meta2').textContent = meta2;
      document.getElementById('lightbox-meta3').textContent = meta3;
      lightbox.classList.remove('hidden', 'opacity-0');
      lightbox.classList.add('flex');
      setTimeout(() => {
        lightbox.classList.remove('opacity-0');
        document.querySelector('#lightbox-modal > div').classList.remove('scale-95');
        document.querySelector('#lightbox-modal > div').classList.add('scale-100');
      }, 50);
    }

    function closeLightbox() {
      const lightbox = document.getElementById('lightbox-modal');
       document.querySelector('#lightbox-modal > div').classList.remove('scale-100');
       document.querySelector('#lightbox-modal > div').classList.add('scale-95');
      lightbox.classList.add('opacity-0');
      setTimeout(() => {
        lightbox.classList.remove('flex');
        lightbox.classList.add('hidden');
      }, 300);
    }

    // Close lightbox on escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        closeLightbox();
      }
    });

    // Close lightbox when clicking outside the content
    document.getElementById('lightbox-modal').addEventListener('click', (e) => {
      if (e.target.id === 'lightbox-modal') {
        closeLightbox();
      }
    });
  </script>
</div>