From 97e864bd0626bd144ecb46cfa8c364b972321de6 Mon Sep 17 00:00:00 2001
From: dexx <lenelena122@gmail.com>
Date: Fri, 5 Jun 2026 22:16:54 +0300
Subject: [PATCH] Add lightbox for full-size image viewing

Clicking a card image now opens it full-screen in an overlay.
Click anywhere or press Escape to close.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/site/src/pages/index.astro | 65 +++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/apps/site/src/pages/index.astro b/apps/site/src/pages/index.astro
index 2a8ffa1..e7813be 100644
--- a/apps/site/src/pages/index.astro
+++ b/apps/site/src/pages/index.astro
@@ -38,6 +38,47 @@ const adminUrl = `${apiUrl}/admin`;
       </section>
     </main>
 
+    <div class="lightbox" id="lightbox" aria-hidden="true">
+      <button class="lightbox-close" aria-label="Close">&times;</button>
+      <img id="lightbox-img" src="" alt="" />
+    </div>
+
+    <style>
+      .lightbox {
+        display: none;
+        position: fixed;
+        inset: 0;
+        z-index: 1000;
+        background: rgba(0, 0, 0, 0.9);
+        align-items: center;
+        justify-content: center;
+        cursor: zoom-out;
+      }
+      .lightbox.open {
+        display: flex;
+      }
+      .lightbox img {
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        border-radius: 4px;
+      }
+      .lightbox-close {
+        position: absolute;
+        top: 16px;
+        right: 24px;
+        font-size: 2.5rem;
+        color: #fff;
+        background: none;
+        border: none;
+        cursor: pointer;
+        line-height: 1;
+      }
+      .photoCard img {
+        cursor: zoom-in;
+      }
+    </style>
+
     <script define:vars={{ apiUrl }}>
       const API = apiUrl;
 
@@ -83,6 +124,30 @@ const adminUrl = `${apiUrl}/admin`;
       }
 
       loadCards();
+
+      const lightbox = document.getElementById("lightbox");
+      const lightboxImg = document.getElementById("lightbox-img");
+
+      document.getElementById("board").addEventListener("click", (e) => {
+        const img = e.target.closest(".photoCard img");
+        if (!img) return;
+        lightboxImg.src = img.src;
+        lightboxImg.alt = img.alt;
+        lightbox.classList.add("open");
+        lightbox.setAttribute("aria-hidden", "false");
+      });
+
+      lightbox.addEventListener("click", () => {
+        lightbox.classList.remove("open");
+        lightbox.setAttribute("aria-hidden", "true");
+      });
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && lightbox.classList.contains("open")) {
+          lightbox.classList.remove("open");
+          lightbox.setAttribute("aria-hidden", "true");
+        }
+      });
     </script>
   </body>
 </html>