From 905113d240fc8ff53b728ea266ff56ce296fd193 Mon Sep 17 00:00:00 2001
From: zhangyuheng <zhangyuheng@lunadeer.cn>
Date: Fri, 27 Feb 2026 11:32:41 +0800
Subject: [PATCH] feat: Refactor mobile menu and modal logic into setupUI
 function for improved organization

---
 sponsor.html      | 70 --------------------------------------------
 sponsor_script.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 70 deletions(-)

diff --git a/sponsor.html b/sponsor.html
index 6bdadab..f729445 100644
--- a/sponsor.html
+++ b/sponsor.html
@@ -640,75 +640,5 @@
     </div>
 
     <script src="sponsor_script.js"></script>
-
-    <script>
-        // Inline script for mobile menu toggling (copied from script.js)
-        // Since we are not using the full script.js which might have index-specific logic
-        document.addEventListener('DOMContentLoaded', () => {
-             const toggle = document.getElementById('mobile-toggle');
-            const menu = document.getElementById('mobile-menu');
-            
-            if (toggle && menu) {
-                const icon = toggle.querySelector('i');
-                toggle.addEventListener('click', () => {
-                    menu.classList.toggle('active');
-                    document.body.classList.toggle('menu-open');
-                    
-                    if (menu.classList.contains('active')) {
-                        if(icon) {
-                            icon.classList.remove('fa-bars');
-                            icon.classList.add('fa-times');
-                        }
-                    } else {
-                        if(icon) {
-                            icon.classList.remove('fa-times');
-                            icon.classList.add('fa-bars');
-                        }
-                    }
-                });
-            }
-
-            // Modal Logic
-            const modal = document.getElementById('sponsor-modal');
-            const btn = document.getElementById('open-sponsor-modal');
-            const span = document.getElementsByClassName('close-modal')[0];
-            const desktopView = document.getElementById('desktop-qr-view');
-            const mobileView = document.getElementById('mobile-btn-view');
-
-            // Detect Mobile
-            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
-
-            if (isMobile) {
-                if(desktopView) desktopView.style.display = 'none';
-                if(mobileView) mobileView.style.display = 'block';
-            } else {
-                if(desktopView) desktopView.style.display = 'block';
-                if(mobileView) mobileView.style.display = 'none';
-            }
-
-            btn.onclick = function() {
-                modal.style.display = "flex";
-                // Trigger reflow
-                void modal.offsetWidth; 
-                modal.classList.add('show');
-            }
-
-            span.onclick = function() {
-                modal.classList.remove('show');
-                setTimeout(() => {
-                    modal.style.display = "none";
-                }, 300);
-            }
-
-            window.onclick = function(event) {
-                if (event.target == modal) {
-                    modal.classList.remove('show');
-                    setTimeout(() => {
-                        modal.style.display = "none";
-                    }, 300);
-                }
-            }
-        });
-    </script>
 </body>
 </html>
diff --git a/sponsor_script.js b/sponsor_script.js
index 97375d5..1d368d4 100644
--- a/sponsor_script.js
+++ b/sponsor_script.js
@@ -5,8 +5,82 @@ let filterState = { search: '', project: 'all' };
 document.addEventListener('DOMContentLoaded', () => {
     fetchSponsorsData();
     setupListeners();
+    setupUI();
 });
 
+function setupUI() {
+    // Mobile menu toggle
+    const toggle = document.getElementById('mobile-toggle');
+    const menu = document.getElementById('mobile-menu');
+    
+    if (toggle && menu) {
+        const icon = toggle.querySelector('i');
+        toggle.addEventListener('click', () => {
+            menu.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
+            
+            if (menu.classList.contains('active')) {
+                if(icon) {
+                    icon.classList.remove('fa-bars');
+                    icon.classList.add('fa-times');
+                }
+            } else {
+                if(icon) {
+                    icon.classList.remove('fa-times');
+                    icon.classList.add('fa-bars');
+                }
+            }
+        });
+    }
+
+    // Modal Logic
+    const modal = document.getElementById('sponsor-modal');
+    const btn = document.getElementById('open-sponsor-modal');
+    const span = document.querySelector('.close-modal');
+    const desktopView = document.getElementById('desktop-qr-view');
+    const mobileView = document.getElementById('mobile-btn-view');
+
+    // Detect Mobile
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
+
+    if (isMobile) {
+        if(desktopView) desktopView.style.display = 'none';
+        if(mobileView) mobileView.style.display = 'block';
+    } else {
+        if(desktopView) desktopView.style.display = 'block';
+        if(mobileView) mobileView.style.display = 'none';
+    }
+
+    if (modal && btn) {
+        btn.addEventListener('click', (e) => {
+            e.preventDefault(); // Prevent accidental form submission
+            modal.style.display = "flex";
+            // Trigger reflow
+            void modal.offsetWidth; 
+            modal.classList.add('show');
+        });
+    }
+
+    if (span && modal) {
+        span.addEventListener('click', () => {
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = "none";
+            }, 300);
+        });
+    }
+
+    window.addEventListener('click', (event) => {
+        if (modal && event.target == modal) {
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = "none";
+            }, 300);
+        }
+    });
+}
+
+
 function setupListeners() {
     const searchInput = document.getElementById('sponsor-search');
     const filterContainer = document.getElementById('project-filters');