Update index.html

index.html

@@ -242,6 +242,7 @@
             opacity: 0;
             transform: translateY(20px);
             animation: fadeInUp 0.5s ease forwards;
+            cursor: pointer;
         }
 
         .image-card:nth-child(1) { animation-delay: 0s; }
@@ -283,6 +284,17 @@
             font-size: 0.9rem;
         }
 
+        .model-name a {
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        .model-name a:hover {
+            color: var(--accent);
+            text-decoration: underline;
+        }
+
         .model-year {
             font-family: 'Space Mono', monospace;
             font-size: 0.75rem;
@@ -333,6 +345,121 @@
             aspect-ratio: 1;
         }
 
+        /* Lightbox Modal */
+        .lightbox {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.95);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+        }
+
+        .lightbox.active {
+            display: flex;
+        }
+
+        .lightbox-content {
+            position: relative;
+            max-width: 90vw;
+            max-height: 90vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .lightbox-content img {
+            max-width: 100%;
+            max-height: calc(90vh - 80px);
+            object-fit: contain;
+            border-radius: 12px;
+        }
+
+        .lightbox-meta {
+            margin-top: 1rem;
+            text-align: center;
+            color: var(--text-primary);
+        }
+
+        .lightbox-meta .model-name {
+            font-size: 1.1rem;
+            margin-bottom: 0.25rem;
+        }
+
+        .lightbox-meta .model-name a {
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        .lightbox-meta .model-name a:hover {
+            color: var(--accent);
+            text-decoration: underline;
+        }
+
+        .lightbox-meta .model-year {
+            display: inline-block;
+        }
+
+        .lightbox-close {
+            position: absolute;
+            top: -50px;
+            right: 0;
+            width: 40px;
+            height: 40px;
+            border: none;
+            background: var(--bg-card);
+            color: var(--text-primary);
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+
+        .lightbox-close:hover {
+            background: var(--bg-secondary);
+            transform: scale(1.1);
+        }
+
+        .lightbox-nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50px;
+            height: 50px;
+            border: 1px solid var(--border);
+            background: var(--bg-card);
+            color: var(--text-primary);
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+
+        .lightbox-nav:hover {
+            background: var(--bg-secondary);
+            border-color: var(--text-muted);
+        }
+
+        .lightbox-prev {
+            left: -70px;
+        }
+
+        .lightbox-next {
+            right: -70px;
+        }
+
         /* Footer */
         footer {
             padding: 4rem 3rem;
@@ -354,43 +481,155 @@
         @media (max-width: 900px) {
             .compare-grid {
                 grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+            }
+
+            .lightbox-prev {
+                left: 10px;
+            }
+
+            .lightbox-next {
+                right: 10px;
+            }
+
+            .lightbox-nav {
+                width: 40px;
+                height: 40px;
+                font-size: 1.25rem;
+                background: rgba(26, 26, 31, 0.9);
             }
         }
 
         @media (max-width: 768px) {
             header {
                 padding: 1rem 1.5rem;
+                flex-direction: column;
+                gap: 1rem;
+                align-items: flex-start;
+            }
+
+            .header-title {
+                font-size: 0.85rem;
+                line-height: 1.4;
+            }
+
+            .nav-links {
+                align-self: flex-end;
+                margin-top: -2rem;
             }
 
             .prompt-section {
-                padding: 2rem 1.5rem;
+                padding: 1.5rem 1rem;
             }
 
             .prompt-row {
                 flex-direction: column;
-                gap: 1.5rem;
+                gap: 1rem;
+                margin-bottom: 1.5rem;
+                padding-bottom: 1.5rem;
+            }
+
+            .prompt-text {
+                font-size: 1.1rem;
             }
 
             .prompt-nav {
                 align-self: flex-start;
             }
 
+            .nav-btn {
+                width: 40px;
+                height: 40px;
+                font-size: 1rem;
+            }
+
+            .prompt-indicator {
+                font-size: 0.75rem;
+                min-width: 60px;
+            }
+
+            .view-toggle {
+                margin-bottom: 1.5rem;
+            }
+
+            .view-btn {
+                padding: 0.4rem 0.75rem;
+                font-size: 0.7rem;
+            }
+
             .timeline {
                 gap: 0.25rem;
+                margin-bottom: 1.5rem;
             }
 
             .timeline-btn {
-                padding: 0.5rem 1rem;
+                padding: 0.5rem 0.75rem;
             }
 
-            .header-title {
-                font-size: 0.9rem;
+            .timeline-btn .year {
+                font-size: 0.8rem;
+            }
+
+            .timeline-btn .model {
+                font-size: 0.6rem;
+            }
+
+            .image-card {
+                border-radius: 12px;
+            }
+
+            .image-meta {
+                padding: 0.75rem 1rem;
+            }
+
+            .model-name {
+                font-size: 0.8rem;
+            }
+
+            .model-year {
+                font-size: 0.65rem;
+                padding: 0.2rem 0.5rem;
+            }
+
+            footer {
+                padding: 2rem 1.5rem;
+                margin-top: 3rem;
+            }
+
+            footer p {
+                font-size: 0.75rem;
+            }
+
+            .lightbox-close {
+                top: 10px;
+                right: 10px;
+                position: fixed;
+            }
+
+            .lightbox-content {
+                max-width: 95vw;
             }
         }
 
-        @media (max-width: 600px) {
+        @media (max-width: 500px) {
             .compare-grid {
-                grid-template-columns: 1fr;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 0.75rem;
+            }
+
+            .image-meta {
+                padding: 0.5rem 0.75rem;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.25rem;
+            }
+
+            .model-name {
+                font-size: 0.7rem;
+            }
+
+            .model-year {
+                font-size: 0.6rem;
             }
         }
     </style>
@@ -428,6 +667,20 @@
         <div class="image-container" id="imageContainer"></div>
     </main>
 
+    <!-- Lightbox Modal -->
+    <div class="lightbox" id="lightbox">
+        <div class="lightbox-content">
+            <button class="lightbox-close" id="lightboxClose">×</button>
+            <button class="lightbox-nav lightbox-prev" id="lightboxPrev">←</button>
+            <button class="lightbox-nav lightbox-next" id="lightboxNext">→</button>
+            <img src="" alt="" id="lightboxImg">
+            <div class="lightbox-meta">
+                <div class="model-name" id="lightboxModel"></div>
+                <span class="model-year" id="lightboxYear"></span>
+            </div>
+        </div>
+    </div>
+
     <footer>
         <p>Inspired by <a href="https://progress.openai.com" target="_blank">OpenAI's Progress highlights page</a></p>
         <p style="margin-top: 0.5rem;">
@@ -441,12 +694,12 @@
         
         // Data
         const models = [
-            { id: 'dalle_mini', name: 'DALL-E Mini', year: '2022', folder: 'dalle_mini' },
-            { id: 'sd15', name: 'SD 1.5', year: '2022', folder: 'sd1.5' },
-            { id: 'sdxl', name: 'SDXL', year: '2023', folder: 'sdxl' },
-            { id: 'flux1', name: 'FLUX.1 Dev', year: '2024', folder: 'flux1_dev' },
-            { id: 'flux2', name: 'FLUX.2 Dev Turbo', year: '2025', folder: 'flux2_turbo' },
-            { id: 'qwen', name: 'Qwen-Image 2512', year: '2025', folder: 'qwen_image' },
+            { id: 'dalle_mini', name: 'DALL-E Mini', year: '2022', folder: 'dalle_mini', link: 'https://huggingface.co/spaces/dalle-mini/dalle-mini' },
+            { id: 'sd15', name: 'SD 1.5', year: '2022', folder: 'sd1.5', link: 'https://huggingface.co/stable-diffusion-v1-5/stable-diffusion-v1-5' },
+            { id: 'sdxl', name: 'SDXL', year: '2023', folder: 'sdxl', link: 'https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0' },
+            { id: 'flux1', name: 'FLUX.1 Dev', year: '2024', folder: 'flux1_dev', link: 'https://huggingface.co/spaces/black-forest-labs/FLUX.1-dev' },
+            { id: 'flux2', name: 'FLUX.2 Dev Turbo', year: '2025', folder: 'flux2_turbo', link: 'https://huggingface.co/spaces/multimodalart/FLUX.2-dev-turbo' },
+            { id: 'qwen', name: 'Qwen-Image 2512', year: '2025', folder: 'qwen_image', link: 'https://huggingface.co/spaces/Qwen/Qwen-Image-2512' },
         ];
 
         const prompts = [
@@ -504,8 +757,10 @@
 
         // State
         let currentPromptIndex = 0;
-        let currentModelIndex = models.length - 1; // Start with latest
-        let viewMode = 'compare'; // Default to compare mode
+        let currentModelIndex = models.length - 1;
+        let viewMode = 'compare';
+        let lightboxImages = [];
+        let lightboxCurrentIndex = 0;
 
         // DOM Elements
         const promptText = document.getElementById('promptText');
@@ -517,12 +772,22 @@
         const nextBtn = document.getElementById('nextPrompt');
         const viewBtns = document.querySelectorAll('.view-btn');
 
+        // Lightbox Elements
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = document.getElementById('lightboxImg');
+        const lightboxModel = document.getElementById('lightboxModel');
+        const lightboxYear = document.getElementById('lightboxYear');
+        const lightboxClose = document.getElementById('lightboxClose');
+        const lightboxPrev = document.getElementById('lightboxPrev');
+        const lightboxNext = document.getElementById('lightboxNext');
+
         // Initialize
         function init() {
             totalPrompts.textContent = prompts.length;
             renderTimeline();
             renderPrompt();
             setupEventListeners();
+            setupLightbox();
             
             // Hide timeline initially since we start in compare mode
             timeline.style.display = 'none';
@@ -574,34 +839,99 @@
         function renderSingleView(prompt) {
             const model = models[currentModelIndex];
             const images = [
-                `${BASE_URL}/${model.folder}/${prompt.file}.png`,
-                `${BASE_URL}/${model.folder}/${prompt.file}_2.png`,
-                `${BASE_URL}/${model.folder}/${prompt.file}_3.png`
+                { src: `${BASE_URL}/${model.folder}/${prompt.file}.png`, model: model.name, year: model.year, link: model.link },
+                { src: `${BASE_URL}/${model.folder}/${prompt.file}_2.png`, model: model.name, year: model.year, link: model.link },
+                { src: `${BASE_URL}/${model.folder}/${prompt.file}_3.png`, model: model.name, year: model.year, link: model.link }
             ];
 
+            lightboxImages = images;
+
             imageContainer.className = 'image-container';
-            imageContainer.innerHTML = images.map((src, i) => `
-                <div class="image-card" style="animation-delay: ${i * 0.1}s">
-                    <img src="${src}" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
+            imageContainer.innerHTML = images.map((img, i) => `
+                <div class="image-card" data-index="${i}" style="animation-delay: ${i * 0.1}s">
+                    <img src="${img.src}" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
                     <div class="image-meta">
-                        <span class="model-name">${model.name}</span>
-                        <span class="model-year">${model.year}</span>
+                        <span class="model-name"><a href="${img.link}" target="_blank" onclick="event.stopPropagation()">${img.model}</a></span>
+                        <span class="model-year">${img.year}</span>
                     </div>
                 </div>
             `).join('');
+
+            attachImageClickHandlers();
         }
 
         function renderCompareView(prompt) {
+            lightboxImages = models.map(model => ({
+                src: `${BASE_URL}/${model.folder}/${prompt.file}.png`,
+                model: model.name,
+                year: model.year,
+                link: model.link
+            }));
+
             imageContainer.className = 'image-container compare-grid';
             imageContainer.innerHTML = models.map((model, i) => `
-                <div class="image-card" style="animation-delay: ${i * 0.1}s">
+                <div class="image-card" data-index="${i}" style="animation-delay: ${i * 0.1}s">
                     <img src="${BASE_URL}/${model.folder}/${prompt.file}.png" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
                     <div class="image-meta">
-                        <span class="model-name">${model.name}</span>
+                        <span class="model-name"><a href="${model.link}" target="_blank" onclick="event.stopPropagation()">${model.name}</a></span>
                         <span class="model-year">${model.year}</span>
                     </div>
                 </div>
             `).join('');
+
+            attachImageClickHandlers();
+        }
+
+        function attachImageClickHandlers() {
+            document.querySelectorAll('.image-card').forEach(card => {
+                card.addEventListener('click', (e) => {
+                    // Don't open lightbox if clicking on the link
+                    if (e.target.tagName === 'A') return;
+                    const index = parseInt(card.dataset.index);
+                    openLightbox(index);
+                });
+            });
+        }
+
+        function openLightbox(index) {
+            lightboxCurrentIndex = index;
+            updateLightboxContent();
+            lightbox.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeLightbox() {
+            lightbox.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+
+        function updateLightboxContent() {
+            const img = lightboxImages[lightboxCurrentIndex];
+            lightboxImg.src = img.src;
+            lightboxModel.innerHTML = `<a href="${img.link}" target="_blank">${img.model}</a>`;
+            lightboxYear.textContent = img.year;
+        }
+
+        function lightboxNavPrev() {
+            lightboxCurrentIndex = (lightboxCurrentIndex - 1 + lightboxImages.length) % lightboxImages.length;
+            updateLightboxContent();
+        }
+
+        function lightboxNavNext() {
+            lightboxCurrentIndex = (lightboxCurrentIndex + 1) % lightboxImages.length;
+            updateLightboxContent();
+        }
+
+        function setupLightbox() {
+            lightboxClose.addEventListener('click', closeLightbox);
+            lightboxPrev.addEventListener('click', lightboxNavPrev);
+            lightboxNext.addEventListener('click', lightboxNavNext);
+
+            lightbox.addEventListener('click', (e) => {
+                if (e.target === lightbox) {
+                    closeLightbox();
+                }
+            });
         }
 
         function setupEventListeners() {
@@ -630,6 +960,19 @@
 
             // Keyboard navigation
             document.addEventListener('keydown', (e) => {
+                // Lightbox navigation
+                if (lightbox.classList.contains('active')) {
+                    if (e.key === 'Escape') {
+                        closeLightbox();
+                    } else if (e.key === 'ArrowLeft') {
+                        lightboxNavPrev();
+                    } else if (e.key === 'ArrowRight') {
+                        lightboxNavNext();
+                    }
+                    return;
+                }
+
+                // Main navigation
                 if (e.key === 'ArrowLeft') {
                     currentPromptIndex = (currentPromptIndex - 1 + prompts.length) % prompts.length;
                     renderPrompt();