Fix: Info tooltips open and close on all project cards

Author: Alvi24-hub

web-app/css/styles.css

@@ -7152,4 +7152,10 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
 #generatePascal:active {
   transform: scale(0.95) !important;
   box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), 0 2px 10px rgba(34, 197, 94, 0.15) !important;
+}
+
+.info-modal-overlay.active {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
 }

web-app/index.html

@@ -1549,16 +1549,16 @@ <h3>${proj.title}</h3>
       console.log('✅ Focus error fixed');
     }, 100);
   </script>
-
+  
     <!-- Info Modal Popup -->
     <div id="infoModalOverlay" class="info-modal-overlay">
-      <div class="info-modal-content">
+    <div class="info-modal-content">
         <button class="info-modal-close" id="infoModalClose">&times;</button>
         <h3 id="infoModalTitle">How to Play</h3>
         <ul id="infoModalList"></ul>
         <button class="info-modal-btn" id="infoModalGotIt">Got it</button>
-      </div>
     </div>
+</div>
 
     <!-- Themed Confirm Modal (used for Clear All) -->
     <div id="confirmModalOverlay" class="confirm-modal-overlay" aria-hidden="true">

web-app/js/main.js

@@ -101,53 +101,78 @@ var projectCards = [];
 var recentSearches = JSON.parse(localStorage.getItem("recentSearches") || "[]");
 
 // ============================================
-// INFO MODAL FUNCTIONS
+// INFO MODAL FUNCTIONS - FIXED
 // ============================================
 
 function showInfoModal(title, steps) {
   var overlay = document.getElementById("infoModalOverlay");
   var titleEl = document.getElementById("infoModalTitle");
   var listEl = document.getElementById("infoModalList");
+  var closeBtn = document.getElementById("infoModalClose");
+  var gotItBtn = document.getElementById("infoModalGotIt");
 
   if (!overlay || !titleEl || !listEl) return;
 
   titleEl.textContent = title;
-  listEl.innerHTML = ""; // Safely clear the existing list
+  listEl.innerHTML = "";
   steps.forEach(function (step) {
     const li = document.createElement("li");
-    li.textContent = step; // textContent automatically escapes malicious scripts!
+    li.textContent = step;
     listEl.appendChild(li);
   });
 
-  const toggleBackToTopButton = () => {
-    if (!backToTopButton) return;
-    backToTopButton.classList.toggle('visible', window.scrollY > 300);
-  };
+  // Show modal
+  overlay.style.display = 'flex';
+  overlay.style.visibility = 'visible';
+  overlay.style.opacity = '1';
   overlay.classList.add("active");
+  overlay.setAttribute('aria-hidden', 'false');
 
   function closeModal() {
+    overlay.style.display = 'none';
+    overlay.style.visibility = 'hidden';
+    overlay.style.opacity = '0';
     overlay.classList.remove("active");
-    closeBtn.removeEventListener("click", closeModal);
-    gotItBtn.removeEventListener("click", closeModal);
+    overlay.setAttribute('aria-hidden', 'true');
+    // Clean up event listeners
+    if (closeBtn) closeBtn.removeEventListener("click", closeModal);
+    if (gotItBtn) gotItBtn.removeEventListener("click", closeModal);
     overlay.removeEventListener("click", overlayClick);
+    document.removeEventListener("keydown", escapeHandler);
   }
 
-  if (backToTopButton) {
-    backToTopButton.addEventListener('click', () => {
-      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-      window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
-    });
-  }
   function overlayClick(e) {
     if (e.target === overlay) closeModal();
   }
 
-  var closeBtn = document.getElementById("infoModalClose");
-  var gotItBtn = document.getElementById("infoModalGotIt");
+  function escapeHandler(e) {
+    if (e.key === 'Escape') closeModal();
+  }
+
+  // Add event listeners
+  if (closeBtn) {
+    // Remove old listeners by cloning
+    const newClose = closeBtn.cloneNode(true);
+    closeBtn.parentNode.replaceChild(newClose, closeBtn);
+    newClose.addEventListener("click", function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      closeModal();
+    });
+  }
+
+  if (gotItBtn) {
+    const newGotIt = gotItBtn.cloneNode(true);
+    gotItBtn.parentNode.replaceChild(newGotIt, gotItBtn);
+    newGotIt.addEventListener("click", function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      closeModal();
+    });
+  }
 
-  closeBtn.addEventListener("click", closeModal);
-  gotItBtn.addEventListener("click", closeModal);
   overlay.addEventListener("click", overlayClick);
+  document.addEventListener("keydown", escapeHandler);
 }
 
 // Themed confirmation modal (in-page) helper