Add image modal functionality for full-size display

Implemented a modal overlay to display images in full size when clicked.

Makefile

@@ -4,7 +4,7 @@
 
 SHELL=bash
 
-VERSION="v0.11.0"
+VERSION="v0.12.0"
 
 # make will interpret non-option arguments in the command line as targets.
 # This turns them into do-nothing targets, so make won't complain:

internal/previewserver/web/index.html

@@ -28,6 +28,10 @@
       </details>
     </div>
     <div id="content"></div>
+    <div id="imageModal">
+      <span id="closeModal">&times;</span>
+      <img id="modalImage" />
+    </div>
     <script type="module">
       import mermaid from "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.2.1/mermaid.esm.mjs";
       mermaid.initialize({ startonload: false, theme: "%s" });

internal/previewserver/web/styles.css

@@ -41,6 +41,33 @@ img {
   max-width: 100%;
 }
 
+#imageModal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+}
+
+#closeModal {
+  color: white;
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+#modalImage {
+  max-width: 95%;
+  max-height: 95%;
+}
+
 pre {
   padding: 10px;
   max-width: 100%;

internal/previewserver/web/ws.js

@@ -21,6 +21,32 @@ document.addEventListener("DOMContentLoaded", () => {
     // console.log(renderedHtml);
   }
 
+  function initializeImageModal() {
+    const images = document.querySelectorAll("img");
+
+    const modal = document.getElementById("imageModal");
+    const modalImage = document.getElementById("modalImage");
+    const closeModal = document.getElementById("closeModal");
+
+    images.forEach((img) => {
+      img.addEventListener("click", function () {
+        modalImage.src = img.src;
+        modal.style.display = "flex";
+      });
+    });
+
+    closeModal.addEventListener("click", function () {
+      modal.style.display = "none";
+    });
+
+    // Close the modal when clicking outside the image
+    modal.addEventListener("click", function (event) {
+      if (event.target === modal) {
+        modal.style.display = "none";
+      }
+    });
+  }
+
   const renderMermaid = async () => {
     const mermaidElements = document.querySelectorAll(".language-mermaid");
     if (mermaidElements.length > 0) {
@@ -80,6 +106,8 @@ document.addEventListener("DOMContentLoaded", () => {
     updateContent(renderedHtml);
     saveContentToLocalStorage(renderedHtml);
 
+    initializeImageModal();
+
     renderMermaid();
 
     if (section) {