fixed buttons

static/css/style.css

@@ -123,15 +123,23 @@ main {
     padding: 1rem;
     border-bottom: 1px solid var(--border);
 }
-.dl-btn {
+
+/* Button style */
+.btn {
     border: 1px solid var(--accent);
     color: var(--accent);
     padding: 0.2rem 0.5rem;
     border-radius: 4px;
     font-size: 0.7rem;
     text-decoration: none;
+    background: transparent;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    transition: background 0.2s, color 0.2s;
 }
-.dl-btn:hover {
+
+.btn:hover {
     background: var(--accent);
     color: #fff;
 }

static/js/modal.js

@@ -1,71 +1,72 @@
 // Modal functionality for ISO info popups
 
 document.addEventListener("DOMContentLoaded", function () {
-  // Get modal elements
+    // Get modal elements
-  const modal = document.getElementById("isoModal");
+    const modal = document.getElementById("isoModal");
-  const modalContent = document.getElementById("modalContent");
+    const modalContent = document.getElementById("modalContent");
-  const closeBtn = document.querySelector(".close-btn");
+    const closeBtn = document.querySelector(".close-btn");
-  const modalOverlay = document.querySelector(".modal-overlay");
+    const modalOverlay = document.querySelector(".modal-overlay");
 
-  // Function to open modal with ISO info
+    // Function to open modal with ISO info
-  function openModal(title, description, imageSrc) {
+    function openModal(title, description, imageSrc) {
-    document.getElementById("modalTitle").textContent = title;
+        document.getElementById("modalTitle").textContent = title;
-    document.getElementById("modalDescription").textContent =
+        document.getElementById("modalDescription").textContent = description ||
-      description || "No description available";
+            "No description available";
 
-    const modalImage = document.getElementById("modalImage");
+        const modalImage = document.getElementById("modalImage");
-    if (imageSrc) {
+        if (imageSrc) {
-      modalImage.src = imageSrc;
+            modalImage.src = imageSrc;
-      modalImage.style.display = "block";
+            modalImage.style.display = "block";
-    } else {
+        } else {
-      modalImage.style.display = "none";
+            modalImage.style.display = "none";
+        }
+
+        modal.classList.add("visible");
+        document.body.style.overflow = "hidden";
     }
 
-    modal.classList.add("visible");
+    // Function to close modal
-    document.body.style.overflow = "hidden";
+    function closeModal() {
-  }
+        modal.classList.remove("visible");
-
+        document.body.style.overflow = "";
-  // Function to close modal
-  function closeModal() {
-    modal.classList.remove("visible");
-    document.body.style.overflow = "";
-  }
-
-  // Event listeners for close button and overlay
-  if (closeBtn) {
-    closeBtn.addEventListener("click", closeModal);
-  }
-
-  if (modalOverlay) {
-    modalOverlay.addEventListener("click", function (e) {
-      if (e.target === modalOverlay) {
-        closeModal();
-      }
-    });
-  }
-
-  // Close modal when Escape key is pressed
-  document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape" && modal.style.display === "block") {
-      closeModal();
     }
-  });
 
-  // Add click handlers to all ISO info buttons
+    // Event listeners for close button and overlay
-  const infoButtons = document.querySelectorAll(".info-btn");
+    if (closeBtn) {
-  infoButtons.forEach((button) => {
+        closeBtn.addEventListener("click", closeModal);
-    button.addEventListener("click", function (e) {
+    }
-      e.preventDefault();
 
-      const isoName = this.getAttribute("data-iso-name");
+    if (modalOverlay) {
-      const description = this.getAttribute("data-description");
+        modalOverlay.addEventListener("click", function (e) {
-      const imageSrc = this.getAttribute("data-image-src");
+            if (e.target === modalOverlay) {
+                closeModal();
+            }
+        });
+    }
 
-      openModal(isoName, description, imageSrc);
+    // Close modal when Escape key is pressed
+    document.addEventListener("keydown", function (e) {
+        // Change: Check for the "visible" class instead of style.display
+        if (e.key === "Escape" && modal.classList.contains("visible")) {
+            closeModal();
+        }
     });
-  });
 
-  // Expose functions to global scope for potential future use
+    // Add click handlers to all ISO info buttons
-  window.openISOModal = openModal;
+    // Change: Use the new ".info-trigger" class you added to the HTML
-  window.closeISOModal = closeModal;
+    const infoButtons = document.querySelectorAll(".info-trigger");
+    infoButtons.forEach((button) => {
+        button.addEventListener("click", function (e) {
+            e.preventDefault();
+
+            const isoName = this.getAttribute("data-iso-name");
+            const description = this.getAttribute("data-description");
+            const imageSrc = this.getAttribute("data-image-src");
+
+            openModal(isoName, description, imageSrc);
+        });
+    });
+    // Expose functions to global scope for potential future use
+    window.openISOModal = openModal;
+    window.closeISOModal = closeModal;
 });

templates/index.html

@@ -63,29 +63,25 @@
                             {{if .Description}}{{.Description}}{{else}}ISO Disk
                             Image{{end}}
                         </p>
-                        <div
+                        <div style="margin-top: 1rem; display: flex; gap: 0.5rem">
-                            style="margin-top: 1rem; display: flex; gap: 0.5rem"
-                        >
                             <button
-                                class="info-btn dl-btn"
+                                class="btn info-trigger" 
                                 data-iso-name="{{.Name}}"
                                 data-description="{{if .Description}}{{.Description}}{{else}}No description available{{end}}"
-                                {{if
+                                {{if .HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"{{end}}
-                                .HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"
-                                {{end}}
                             >
                                 Info
                             </button>
                             <a
                                 href="/browse/{{urlenc .RelativePath}}"
-                                class="dl-btn"
+                                class="btn"
                                 >Browse</a
                             >
                             <a
                                 href="/raw/{{urlenc .RelativePath}}"
-                                class="dl-btn"
+                                class="btn"
                                 download
-                                >ISO</a
+                                >Download ISO</a
                             >
                         </div>
                     </div>