Update index.html

index.html

@@ -251,6 +251,7 @@
         .image-card:nth-child(4) { animation-delay: 0.3s; }
         .image-card:nth-child(5) { animation-delay: 0.4s; }
         .image-card:nth-child(6) { animation-delay: 0.5s; }
+        .image-card:nth-child(7) { animation-delay: 0.6s; }
 
         @keyframes fadeInUp {
             to {
@@ -328,17 +329,20 @@
             border-color: var(--text-muted);
         }
 
-        /* Compare Grid - 2 rows of 3 */
+        /* Compare Grid - 4 columns for 7 models (4+3 layout, centered) */
         .compare-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
             gap: 1.5rem;
-            max-width: 1100px;
+            max-width: 1300px;
             margin: 0 auto;
         }
 
         .compare-grid .image-card {
             max-width: none;
+            width: calc(25% - 1.2rem);
+            flex-shrink: 0;
         }
 
         .compare-grid .image-card img {
@@ -478,9 +482,18 @@
         }
 
         /* Responsive */
+        @media (max-width: 1100px) {
+            .compare-grid .image-card {
+                width: calc(33.333% - 1rem);
+            }
+        }
+
         @media (max-width: 900px) {
+            .compare-grid .image-card {
+                width: calc(50% - 0.75rem);
+            }
+            
             .compare-grid {
-                grid-template-columns: repeat(2, 1fr);
                 gap: 1rem;
             }
 
@@ -612,8 +625,11 @@
         }
 
         @media (max-width: 500px) {
+            .compare-grid .image-card {
+                width: calc(50% - 0.5rem);
+            }
+            
             .compare-grid {
-                grid-template-columns: repeat(2, 1fr);
                 gap: 0.75rem;
             }
 
@@ -698,8 +714,9 @@
             { 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: 'zimage', name: 'Z-Image Turbo', year: '2025', folder: 'z_image', link: 'https://huggingface.co/spaces/Tongyi-MAI/Z-Image-Turbo' },
+            { id: 'qwen', name: 'Qwen-Image', year: '2025', folder: 'qwen_image', link: 'https://huggingface.co/spaces/Qwen/Qwen-Image-2512' },
             { 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 = [