fixes error on home page pop up

fixed errors of home and members page pop up menu,
fixed the recruiting section.

Author: Razaib-Tariq

Members.html

@@ -9,6 +9,15 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 
+    <!-- Critical Helper: Defined in Head so inline 'onerror' can find it immediately -->
+    <script>
+        window.getImg = function(path) {
+            if (!path) return '';
+            // Cleans leading slashes to ensure paths work relative to the root in VS Code
+            return path.startsWith('/') ? path.substring(1) : path;
+        };
+    </script>
+
     <!-- Custom Shared Resources -->
     <link rel="stylesheet" href="css/style.css">
     <script src="js/common.js"></script>
@@ -100,8 +109,10 @@ <h5 class="member-header">Alumni</h5>
         </div>
     </div>
 
-    <!-- RECRUITMENT MODAL -->
-    <div id="join-modal">
+    <!-- RECRUITMENT MODAL 
+         Class 'member-popup' matches Section 13 in style.css to prevent collisions with index.html
+    -->
+    <div id="join-modal" class="member-popup">
         <div class="modal-content relative overflow-hidden">
             <button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
                 <i class="fas fa-times text-xl"></i>

_site/Members.html

@@ -9,6 +9,15 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 
+    <!-- Critical Helper: Defined in Head so inline 'onerror' can find it immediately -->
+    <script>
+        window.getImg = function(path) {
+            if (!path) return '';
+            // Cleans leading slashes to ensure paths work relative to the root in VS Code
+            return path.startsWith('/') ? path.substring(1) : path;
+        };
+    </script>
+
     <!-- Custom Shared Resources -->
     <link rel="stylesheet" href="css/style.css">
     <script src="js/common.js"></script>
@@ -100,8 +109,10 @@ <h5 class="member-header">Alumni</h5>
         </div>
     </div>
 
-    <!-- RECRUITMENT MODAL -->
-    <div id="join-modal">
+    <!-- RECRUITMENT MODAL 
+         Class 'member-popup' matches Section 13 in style.css to prevent collisions with index.html
+    -->
+    <div id="join-modal" class="member-popup">
         <div class="modal-content relative overflow-hidden">
             <button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
                 <i class="fas fa-times text-xl"></i>

_site/css/style.css

@@ -248,26 +248,68 @@ img, video {
 
 
 /* ==========================================================================
-   4. HOME PAGE SPECIFIC
+   4. HOME PAGE MODAL (Triggered by .home-popup class)
    ========================================================================== */
-#join-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999; }
-.modal-content { background: white; padding: 2.5rem; border-radius: 16px; max-width: 500px; width: 90%; position: relative; text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); animation: popIn 0.3s ease-out; }
-@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-.close-modal { position: absolute; top: 15px; right: 20px; font-size: 1.8rem; color: #777; cursor: pointer; transition: color 0.2s; }
+   #join-modal {
+    position: fixed;
+    inset: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+    padding: 20px;
+}
+
+#join-modal.active {
+    display: flex;
+}
+
+/* Scoped specifically for Home Page version */
+#join-modal.home-popup {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#join-modal.home-popup .modal-content {
+    background: white;
+    padding: 2.5rem;
+    border-radius: 16px;
+    max-width: 500px;
+    width: 90%;
+    position: relative;
+    text-align: center;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+    transform: scale(0.8);
+    opacity: 0;
+    transition: all 0.3s ease-out;
+}
+
+#join-modal.home-popup.active .modal-content {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.close-modal {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    font-size: 1.8rem;
+    color: #777;
+    cursor: pointer;
+    transition: color 0.2s;
+}
 .close-modal:hover { color: #333; }
 
+/* Home Feature Boxes */
 .feature-box {
     background: white; padding: 2rem; text-align: center; border-radius: 8px; 
     transition: all 0.3s ease; border: 1px solid #e5e7eb; height: 100%;
     display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
     text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
 }
 
-/* Glowing Animation */
 @keyframes glowing {
-    0% { box-shadow: 0 0 5px rgba(165, 180, 252, 0.4), 0 0 10px rgba(165, 180, 252, 0.2); border-color: #a5b4fc; }
-    50% { box-shadow: 0 0 10px rgba(165, 180, 252, 0.8), 0 0 20px rgba(165, 180, 252, 0.4); border-color: #a5b4fc; }
-    100% { box-shadow: 0 0 5px rgba(165, 180, 252, 0.4), 0 0 10px rgba(165, 180, 252, 0.2); border-color: #a5b4fc; }
+    0% { box-shadow: 0 0 5px rgba(165, 180, 252, 0.4); border-color: #a5b4fc; }
+    100% { box-shadow: 0 0 15px rgba(165, 180, 252, 0.7); border-color: #6366f1; }
 }
 
 .feature-box:hover { transform: translateY(-5px); animation: glowing 1.5s infinite alternate ease-in-out; border-color: #a5b4fc; }
@@ -782,37 +824,41 @@ input:checked + .slider:before { transform: translateX(26px); }
 }
 
 /* ==========================================================================
-   13. MODAL & RECRUITMENT UI -- undergraduate Members
+   13. MEMBERS PAGE MODAL (Triggered by .member-popup class)
    ========================================================================== */
 
-   #join-modal {
-    position: fixed;
-    inset: 0;
+/* Scoped specifically for Members Page version */
+#join-modal.member-popup {
     background-color: rgba(0, 30, 60, 0.8);
     backdrop-filter: blur(8px);
-    display: none;
-    justify-content: center;
-    align-items: center;
-    z-index: 10000;
-    padding: 20px;
 }
 
-#join-modal.active { display: flex; }
-
-.modal-content {
+#join-modal.member-popup .modal-content {
     background: white;
     padding: 2.5rem;
     border-radius: 24px;
     max-width: 500px;
     width: 100%;
     position: relative;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    /* Different scale behavior for member page */
     transform: scale(0.9);
     opacity: 0;
-    transition: all 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-#join-modal.active .modal-content {
+#join-modal.member-popup.active .modal-content {
     transform: scale(1);
     opacity: 1;
-}
+}
+
+/* Modal Internal Elements */
+.close-modal-icon {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    cursor: pointer;
+    color: #94a3b8;
+    transition: color 0.2s;
+}
+.close-modal-icon:hover { color: #1e293b; }