add modal on click

Author: Dmitrii Tarasov

project/index.html

@@ -332,6 +332,46 @@ <h2 class="title">BibTeX</h2>
 
   <!-- End of Statcounter Code -->
 
+  <!-- Add modal HTML structure -->
+  <div id="imageModal" class="modal">
+    <span class="modal-close">&times;</span>
+    <img class="modal-content" id="modalImage">
+  </div>
+
+  <script>
+    // Get the modal
+    const modal = document.getElementById("imageModal");
+    const modalImg = document.getElementById("modalImage");
+    const closeBtn = document.getElementsByClassName("modal-close")[0];
+
+    // Add click event to all images
+    document.querySelectorAll('.image.is-16by9 img').forEach(img => {
+      img.onclick = function() {
+        modal.style.display = "block";
+        modalImg.src = this.src;
+      }
+    });
+
+    // Close modal when clicking the close button
+    closeBtn.onclick = function() {
+      modal.style.display = "none";
+    }
+
+    // Close modal when clicking outside the image
+    window.onclick = function(event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+
+    // Close modal with Escape key
+    document.addEventListener('keydown', function(event) {
+      if (event.key === "Escape") {
+        modal.style.display = "none";
+      }
+    });
+  </script>
+
 </body>
 
 </html>

project/static/css/index.css

@@ -161,8 +161,6 @@ body {
   padding-top: 56.25%;
   position: relative;
   overflow: hidden;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .image.is-16by9 img {
@@ -172,6 +170,12 @@ body {
   width: 100%;
   height: 100%;
   object-fit: contain;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+}
+
+.image.is-16by9 img:hover {
+  opacity: 0.9;
 }
 
 .mb-6 {
@@ -197,5 +201,36 @@ body {
   }
 }
 
+/* Modal styles */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  overflow: auto;
+}
+
+.modal-content {
+  margin: auto;
+  display: block;
+  max-width: 90%;
+  max-height: 90vh;
+  object-fit: contain;
+}
+
+.modal-close {
+  position: absolute;
+  top: 15px;
+  right: 35px;
+  color: #f1f1f1;
+  font-size: 40px;
+  font-weight: bold;
+  cursor: pointer;
+}
+