Update index.html

index.html

@@ -84,10 +84,46 @@
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
         }
+        /* Updated image styling for zoom capability */
         .chart img {
             width: 100%;
             height: auto;
             border-radius: 4px;
+            cursor: zoom-in;
+            transition: transform 0.3s ease;
+        }
+        /* Modal styles for zoomed image */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.9);
+        }
+        .modal-content {
+            margin: auto;
+            display: block;
+            max-width: 90%;
+            max-height: 90%;
+        }
+        .close {
+            position: absolute;
+            top: 15px;
+            right: 35px;
+            color: #f1f1f1;
+            font-size: 40px;
+            font-weight: bold;
+            transition: 0.3s;
+            cursor: pointer;
+        }
+        .close:hover,
+        .close:focus {
+            color: #bbb;
+            text-decoration: none;
         }
         .chart-caption {
             text-align: center;
@@ -180,15 +216,21 @@
         
         <div class="chart-container">
             <div class="chart">
-                <img src="8d6951f7-dafc-44b4-bd85-c213d2ae77a6.png" alt="Chart showing model accuracy by operation type">
+                <img src="8d6951f7-dafc-44b4-bd85-c213d2ae77a6.png" alt="Chart showing model accuracy by operation type" class="zoomable">
                 <div class="chart-caption">Figure 1: Accuracy by Operation Type (%)</div>
             </div>
             <div class="chart">
-                <img src="e7692aaa-7623-4e6f-b9f2-23ef0531ebe0.png" alt="Chart showing model performance on math problems">
+                <img src="e7692aaa-7623-4e6f-b9f2-23ef0531ebe0.png" alt="Chart showing model performance on math problems" class="zoomable">
                 <div class="chart-caption">Figure 2: Correct vs Incorrect Answers (1000 questions each)</div>
             </div>
         </div>
 
+        <!-- Modal for image zoom -->
+        <div id="imageModal" class="modal">
+            <span class="close">&times;</span>
+            <img class="modal-content" id="zoomedImage">
+        </div>
+
         <h2>Detailed Accuracy Results</h2>
         
         <table>
@@ -287,5 +329,37 @@
             <p>© 2025 • Created for educational purposes</p>
         </div>
     </div>
+
+    <script>
+        // Get the modal
+        var modal = document.getElementById("imageModal");
+        
+        // Get the image and insert it inside the modal
+        var zoomableImages = document.getElementsByClassName("zoomable");
+        var modalImg = document.getElementById("zoomedImage");
+        
+        // Add click event to all zoomable images
+        for (var i = 0; i < zoomableImages.length; i++) {
+            zoomableImages[i].onclick = function() {
+                modal.style.display = "flex";
+                modalImg.src = this.src;
+            }
+        }
+        
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+        
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() { 
+            modal.style.display = "none";
+        }
+        
+        // Close the modal when clicking outside the image
+        modal.onclick = function(event) {
+            if (event.target === modal) {
+                modal.style.display = "none";
+            }
+        }
+    </script>
 </body>
 </html>