Merge pull request steam-bell-92#1367 from Alvi24-hub/main

Fix: Budget Tracker appears once

Author: steam-bell-92

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

@@ -1315,13 +1315,6 @@ <h3>Legal</h3>
             desc: "Converts values between different units",
             tags: "utility,tool",
           },
-          {
-            project: "budget-tracker",
-            title: "Budget Tracker",
-            category: "utilities",
-            desc: "Track your income and expenses with visual breakdowns",
-            tags: "utility,finance,tracker,money",
-          },
           {
             project: "tsp-visualizer",
             title: "TSP Visualizer",
@@ -1556,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

@@ -100,6 +100,80 @@ var selectedSuggestionIndex = -1;
 var projectCards = [];
 var recentSearches = JSON.parse(localStorage.getItem("recentSearches") || "[]");
 
+// ============================================
+// 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 = "";
+  steps.forEach(function (step) {
+    const li = document.createElement("li");
+    li.textContent = step;
+    listEl.appendChild(li);
+  });
+
+  // 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");
+    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);
+  }
+
+  function overlayClick(e) {
+    if (e.target === overlay) closeModal();
+  }
+
+  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();
+    });
+  }
+
+  overlay.addEventListener("click", overlayClick);
+  document.addEventListener("keydown", escapeHandler);
+}
 
 // Themed confirmation modal (in-page) helper
 function showConfirm(message, onConfirm, onCancel) {