From 7f2dd95e73225bbbf11de56197463cdb7b2b12bf Mon Sep 17 00:00:00 2001 From: DJP Date: Tue, 16 Dec 2025 09:27:38 -0500 Subject: [PATCH] Add lightbox modal for full-size image inspection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit UX Improvements: - Click main image to view full-size in lightbox modal - Dark overlay backdrop (95% opacity black) - Smooth zoom-in animation - Click outside or close button (×) to close - ESC key closes lightbox - Hover effect on main image (subtle scale) - Prevents background scrolling when open Modal Features: - Full-screen overlay (95% viewport) - Rounded corners and shadow on image - Animated close button (turns gold on hover) - Click-to-close on background - Responsive sizing (max 95% width/height) Perfect for inspecting generated images in detail! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 (1M context) --- index.php | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) diff --git a/index.php b/index.php index 10ad1ca..f7dc92a 100644 --- a/index.php +++ b/index.php @@ -682,6 +682,86 @@ $imageHistory = $sessionManager->getImageHistory(); padding: 30px; font-style: italic; } + + /* Lightbox Modal */ + .lightbox-modal { + display: none; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.95); + animation: fadeIn 0.3s; + } + + .lightbox-modal.show { + display: flex; + align-items: center; + justify-content: center; + } + + .lightbox-content { + position: relative; + max-width: 95%; + max-height: 95%; + animation: zoomIn 0.3s; + } + + .lightbox-content img { + max-width: 100%; + max-height: 95vh; + display: block; + border-radius: 8px; + box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8); + } + + .lightbox-close { + position: absolute; + top: 20px; + right: 30px; + color: #fff; + font-size: 40px; + font-weight: bold; + cursor: pointer; + z-index: 10000; + transition: all 0.3s; + background: rgba(0, 0, 0, 0.5); + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + } + + .lightbox-close:hover { + background: #FFC407; + color: #000; + } + + @keyframes zoomIn { + from { + transform: scale(0.8); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } + } + + /* Make main image clickable */ + #currentImage { + cursor: pointer; + transition: transform 0.3s; + } + + #currentImage:hover { + transform: scale(1.02); + } @@ -1020,6 +1100,14 @@ Session Directory: getSessionDir()); ?> + + +