Implement mobile navigation menu and enhance navbar responsiveness

index.html

@@ -16,20 +16,38 @@
     <!-- Navbar -->
     <nav class="navbar">
         <div class="nav-content">
+            <button class="mobile-toggle" id="mobile-toggle" aria-label="菜单">
+                <i class="fas fa-bars"></i>
+            </button>
             <div class="logo">
+                <a href="/">
                     <img src="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png" alt="白鹿原 Logo">
+                </a>
             </div>
-            <div class="nav-links">
+            <div class="nav-links desktop-only">
                 <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
                 <a href="https://mcmap.lunadeer.cn/">地图</a>
                 <a href="https://mcphoto.lunadeer.cn/">相册</a>
                 <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
                 <a href="/stats.html">数据</a>
+            </div>
+            <div class="nav-cta-container">
                 <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
             </div>
         </div>
     </nav>
 
+    <!-- Mobile Menu -->
+    <div class="mobile-menu" id="mobile-menu">
+        <div class="mobile-menu-links">
+            <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
+            <a href="https://mcmap.lunadeer.cn/">地图</a>
+            <a href="https://mcphoto.lunadeer.cn/">相册</a>
+            <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
+            <a href="/stats.html">数据</a>
+        </div>
+    </div>
+
     <!-- Hero Section -->
     <header class="hero" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');">
         <div class="hero-overlay"></div>

script.js

@@ -29,8 +29,45 @@ document.addEventListener('DOMContentLoaded', () => {
     setupModal();
     fetchServerStatus();
     startRuntimeTimer();
+    setupMobileMenu();
 });
 
+function setupMobileMenu() {
+    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');
+                }
+            }
+        });
+        
+        menu.querySelectorAll('a').forEach(link => {
+            link.addEventListener('click', () => {
+                menu.classList.remove('active');
+                document.body.classList.remove('menu-open');
+                if(icon) {
+                    icon.classList.remove('fa-times');
+                    icon.classList.add('fa-bars');
+                }
+            });
+        });
+    }
+}
+
 function startRuntimeTimer() {
     const startTime = new Date("2021-09-14T09:57:59").getTime();
 

stats.html

@@ -235,22 +235,38 @@
     <!-- Navbar -->
     <nav class="navbar">
         <div class="nav-content">
+            <button class="mobile-toggle" id="mobile-toggle" aria-label="菜单">
+                <i class="fas fa-bars"></i>
+            </button>
             <div class="logo">
                 <a href="/">
                     <img src="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png" alt="白鹿原 Logo">
                 </a>
             </div>
-            <div class="nav-links">
+            <div class="nav-links desktop-only">
                 <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
                 <a href="https://mcmap.lunadeer.cn/">地图</a>
                 <a href="https://mcphoto.lunadeer.cn/">相册</a>
                 <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
                 <a href="/stats.html" style="opacity: 1; font-weight: 600;">数据</a>
+            </div>
+            <div class="nav-cta-container">
                 <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
             </div>
         </div>
     </nav>
 
+    <!-- Mobile Menu -->
+    <div class="mobile-menu" id="mobile-menu">
+        <div class="mobile-menu-links">
+            <a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
+            <a href="https://mcmap.lunadeer.cn/">地图</a>
+            <a href="https://mcphoto.lunadeer.cn/">相册</a>
+            <a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
+            <a href="/stats.html" style="font-weight: 600;">数据</a>
+        </div>
+    </div>
+
     <!-- Hero Section -->
     <header class="hero stats-hero" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');">
         <div class="hero-overlay"></div>

stats_script.js

@@ -3,8 +3,45 @@ document.addEventListener('DOMContentLoaded', () => {
     setupModal();
     setupSearch();
     setupLoadMore();
+    setupMobileMenu();
 });
 
+function setupMobileMenu() {
+    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');
+                }
+            }
+        });
+        
+        menu.querySelectorAll('a').forEach(link => {
+            link.addEventListener('click', () => {
+                menu.classList.remove('active');
+                document.body.classList.remove('menu-open');
+                if(icon) {
+                    icon.classList.remove('fa-times');
+                    icon.classList.add('fa-bars');
+                }
+            });
+        });
+    }
+}
+
 let allPlayers = [];
 let displayedPlayers = [];
 let currentPage = 1;

style.css

@@ -48,12 +48,21 @@ body {
     font-size: 12px;
 }
 
+.logo a {
+    display: block;
+}
+
 .logo img {
     height: 32px;
     width: auto;
     display: block;
 }
 
+.nav-links {
+    display: flex;
+    align-items: center;
+}
+
 .nav-links a {
     text-decoration: none;
     color: var(--text-primary);
@@ -66,6 +75,12 @@ body {
     opacity: 1;
 }
 
+.nav-cta-container {
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+}
+
 .nav-cta {
     background: #0071e3;
     color: white !important;
@@ -75,6 +90,7 @@ body {
     font-weight: 500;
     opacity: 1 !important;
     transition: all 0.2s;
+    text-decoration: none;
 }
 
 .nav-cta:hover {
@@ -705,3 +721,130 @@ footer {
 #sponsors-table tr:hover {
     background-color: #f5f5f7;
 }
+
+/* Mobile Navbar Optimization */
+.mobile-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background 0.2s;
+}
+
+.mobile-toggle:hover {
+    background: rgba(0,0,0,0.05);
+}
+
+.mobile-menu {
+    position: fixed;
+    top: 44px;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    overflow: hidden;
+    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 998;
+}
+
+.mobile-menu.active {
+    height: calc(100vh - 44px);
+    opacity: 1;
+    visibility: visible;
+}
+
+.mobile-menu-links {
+    padding: 24px 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.mobile-menu-links a {
+    display: block;
+    font-size: 24px;
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--text-primary);
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    opacity: 0; 
+    transform: translateY(-20px);
+    transition: all 0.4s ease;
+}
+
+.mobile-menu.active .mobile-menu-links a {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Stagger animation */
+.mobile-menu.active .mobile-menu-links a:nth-child(1) { transition-delay: 0.1s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(2) { transition-delay: 0.15s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(3) { transition-delay: 0.2s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(4) { transition-delay: 0.25s; }
+.mobile-menu.active .mobile-menu-links a:nth-child(5) { transition-delay: 0.3s; }
+
+/* Desktop Adjustment to keep alignment with split items */
+@media (min-width: 769px) {
+    .nav-links.desktop-only {
+        margin-left: auto; /* Push links and CTA to right */
+    }
+    .nav-cta-container {
+        margin-left: 24px;
+    }
+}
+
+/* Responsive Navbar Adjustments */
+@media (max-width: 768px) {
+    .nav-content {
+        justify-content: space-between;
+        padding: 0 15px;
+    }
+
+    .desktop-only {
+        display: none !important;
+    }
+
+    .mobile-toggle {
+        display: flex;
+        order: 1; /* Left */
+    }
+    
+    .logo {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        order: 2; /* Center */
+        margin: 0;
+    }
+    
+    .nav-cta-container {
+        order: 3; /* Right */
+        margin: 0;
+    }
+
+    .nav-cta {
+        padding: 6px 12px;
+        font-size: 11px;
+    }
+    
+    /* Prevent body scroll when menu is open */
+    body.menu-open {
+        overflow: hidden;
+    }
+}