diff --git a/isosilo b/isosilo new file mode 100755 index 0000000..e0a5956 Binary files /dev/null and b/isosilo differ diff --git a/static/css/style.css b/static/css/style.css index ae0d3b5..d20bcb0 100644 --- a/static/css/style.css +++ b/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; } diff --git a/static/js/modal.js b/static/js/modal.js index 1a10e1c..c3eeb9a 100644 --- a/static/js/modal.js +++ b/static/js/modal.js @@ -1,71 +1,72 @@ // Modal functionality for ISO info popups document.addEventListener("DOMContentLoaded", function () { - // Get modal elements - const modal = document.getElementById("isoModal"); - const modalContent = document.getElementById("modalContent"); - const closeBtn = document.querySelector(".close-btn"); - const modalOverlay = document.querySelector(".modal-overlay"); + // Get modal elements + const modal = document.getElementById("isoModal"); + const modalContent = document.getElementById("modalContent"); + const closeBtn = document.querySelector(".close-btn"); + const modalOverlay = document.querySelector(".modal-overlay"); - // Function to open modal with ISO info - function openModal(title, description, imageSrc) { - document.getElementById("modalTitle").textContent = title; - document.getElementById("modalDescription").textContent = - description || "No description available"; + // Function to open modal with ISO info + function openModal(title, description, imageSrc) { + document.getElementById("modalTitle").textContent = title; + document.getElementById("modalDescription").textContent = description || + "No description available"; - const modalImage = document.getElementById("modalImage"); - if (imageSrc) { - modalImage.src = imageSrc; - modalImage.style.display = "block"; - } else { - modalImage.style.display = "none"; + const modalImage = document.getElementById("modalImage"); + if (imageSrc) { + modalImage.src = imageSrc; + modalImage.style.display = "block"; + } else { + modalImage.style.display = "none"; + } + + modal.classList.add("visible"); + document.body.style.overflow = "hidden"; } - modal.classList.add("visible"); - document.body.style.overflow = "hidden"; - } - - // 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(); + // Function to close modal + function closeModal() { + modal.classList.remove("visible"); + document.body.style.overflow = ""; } - }); - // Add click handlers to all ISO info buttons - const infoButtons = document.querySelectorAll(".info-btn"); - infoButtons.forEach((button) => { - button.addEventListener("click", function (e) { - e.preventDefault(); + // Event listeners for close button and overlay + if (closeBtn) { + closeBtn.addEventListener("click", closeModal); + } - const isoName = this.getAttribute("data-iso-name"); - const description = this.getAttribute("data-description"); - const imageSrc = this.getAttribute("data-image-src"); + if (modalOverlay) { + modalOverlay.addEventListener("click", function (e) { + 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 - window.openISOModal = openModal; - window.closeISOModal = closeModal; + // Add click handlers to all ISO info buttons + // Change: Use the new ".info-trigger" class you added to the HTML + 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; }); diff --git a/templates/index.html b/templates/index.html index 7f5b57f..5f796b6 100644 --- a/templates/index.html +++ b/templates/index.html @@ -63,29 +63,25 @@ {{if .Description}}{{.Description}}{{else}}ISO Disk Image{{end}}
-