CON-052 | Image Gallery

Screen Overview

• Type: Full-screen overlay (no navigation, no status bar chrome)
• Purpose: Full-screen product image viewer with swipe and zoom capabilities
• Previous: CON-050-product-detail.html (Product Detail, image area tap)
• Close: X button returns to product detail

Layout Specifications

• Background: #000000 (solid black)
• Header overlay: Counter pill (top-left) + close button (top-right), semi-transparent backgrounds
• Main image: Centered in viewport, max 320px wide for wireframe
• Thumbnail strip: 64px thumbnails, centered, 80% black background, bottom of screen
• No bottom navigation: Full-screen immersive overlay

Component Specs

• Counter pill: Alexandria 16px semi-bold, white text, rgba(0,0,0,0.5) background, 20px radius
• Close button: 40px circle, rgba(0,0,0,0.5) background, white X icon
• Swipe dots: 8px circles, active = white + 24px pill, inactive = 30% white
• Thumbnails: 64px square, 8px radius, #2a2a2a background, active = 2px white border
• Zoom hint: 12% white background pill, 13px text, magnifier icon

Behavior Notes

• Horizontal swipe navigates between images (3 total)
• Pinch-to-zoom enabled on main image area
• Tapping a thumbnail jumps to that image
• Counter updates dynamically: "1 / 3", "2 / 3", "3 / 3"
• Zoom hint fades out after 3 seconds or first pinch gesture
• Swipe down gesture can also close the gallery (optional)
• X button always returns to CON-050

Accessibility

• Close button has aria-label="Close gallery"
• Images should have descriptive alt text when loaded
• Counter provides programmatic image position context
• Ensure sufficient contrast for overlaid controls on dark background