移动端优化

src/public/index.html

@@ -495,7 +495,44 @@
             }
             
             .nav-links {
-                display: none;
+                position: fixed;
+                top: 70px;
+                left: 0;
+                right: 0;
+                background: var(--background);
+                border: 1px solid var(--border);
+                border-top: none;
+                border-radius: 0 0 12px 12px;
+                padding: 1rem;
+                flex-direction: column;
+                gap: 0.5rem;
+                z-index: 1000;
+                transform: translateY(-100vh);
+                transition: transform 0.3s ease;
+            }
+            
+            .nav-links.active {
+                transform: translateY(0);
+            }
+            
+            .mobile-menu-toggle {
+                display: block !important;
+                background: none;
+                border: none;
+                color: var(--foreground);
+                font-size: 1.5rem;
+                cursor: pointer;
+                padding: 0.5rem;
+                border-radius: var(--radius);
+                transition: background-color 0.2s;
+            }
+            
+            .mobile-menu-toggle:hover {
+                background-color: var(--muted);
+            }
+            
+            .navbar-container {
+                justify-content: space-between !important;
             }
             
             .container {
@@ -506,6 +543,10 @@
                 padding: 1.5rem;
             }
         }
+        
+        .mobile-menu-toggle {
+            display: none;
+        }
     </style>
 </head>
 
@@ -520,7 +561,11 @@
                 加速服务
             </a>
             
-            <div class="nav-links">
+            <button class="mobile-menu-toggle" id="mobileMenuToggle">
+                ☰
+            </button>
+            
+            <div class="nav-links" id="navLinks">
                 <a href="/" class="nav-link active">🚀 GitHub加速</a>
                 <a href="/skopeo.html" class="nav-link">🐳 镜像下载</a>
                 <a href="/search.html" class="nav-link">🔍 镜像搜索</a>
@@ -756,6 +801,23 @@
                 formatGithubLink();
             }
         });
+
+        // 移动端菜单切换
+        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+        const navLinks = document.getElementById('navLinks');
+        
+        mobileMenuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            mobileMenuToggle.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
+        });
+        
+        // 点击页面其他地方关闭菜单
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.navbar') && navLinks.classList.contains('active')) {
+                navLinks.classList.remove('active');
+                mobileMenuToggle.textContent = '☰';
+            }
+        });
     </script>
 </body>
 

src/public/search.html

@@ -212,14 +212,18 @@
         .input-group {
             position: relative;
             display: flex;
-            flex-wrap: wrap;
+            flex-direction: column;
-            align-items: stretch;
+            align-items: center;
+            gap: 15px;
             width: 100%;
+            max-width: 600px;
+            margin: 0 auto;
         }
 
         .input-group-append {
-            margin-left: -1px;
             display: flex;
+            width: 100%;
+            justify-content: center;
         }
 
         .form-control {
@@ -229,9 +233,10 @@
             color: var(--foreground);
             border: 1px solid var(--border);
             border-radius: 20px;
-            padding: 10px 20px;
+            padding: 12px 20px;
             height: 46px;
             transition: all 0.2s;
+            font-size: 1rem;
         }
 
         .form-control:focus {
@@ -244,13 +249,16 @@
 
         .search-button {
             border-radius: 20px;
-            padding: 10px 30px;
+            padding: 12px 40px;
             background-color: var(--primary);
             color: var(--primary-foreground);
             border: none;
             transition: all 0.3s ease;
             height: 46px;
-            margin-left: 10px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            min-width: 120px;
         }
 
         .search-button:hover {
@@ -653,6 +661,61 @@
                 text-align: left;
                 width: 100%;
             }
+            
+            .nav-links {
+                position: fixed;
+                top: 70px;
+                left: 0;
+                right: 0;
+                background: var(--background);
+                border: 1px solid var(--border);
+                border-top: none;
+                border-radius: 0 0 12px 12px;
+                padding: 1rem;
+                flex-direction: column;
+                gap: 0.5rem;
+                z-index: 1000;
+                transform: translateY(-100vh);
+                transition: transform 0.3s ease;
+            }
+            
+            .nav-links.active {
+                transform: translateY(0);
+            }
+            
+            .mobile-menu-toggle {
+                display: block !important;
+                background: none;
+                border: none;
+                color: var(--foreground);
+                font-size: 1.5rem;
+                cursor: pointer;
+                padding: 0.5rem;
+                border-radius: var(--radius);
+                transition: background-color 0.2s;
+            }
+            
+            .mobile-menu-toggle:hover {
+                background-color: var(--muted);
+            }
+            
+            .navbar-container {
+                justify-content: space-between !important;
+            }
+            
+            .input-group {
+                max-width: 100%;
+                padding: 0 10px;
+            }
+            
+            .search-button {
+                width: 100%;
+                max-width: 200px;
+            }
+        }
+        
+        .mobile-menu-toggle {
+            display: none;
         }
 
         .icon {
@@ -674,7 +737,11 @@
                 加速服务
             </a>
             
-            <div class="nav-links">
+            <button class="mobile-menu-toggle" id="mobileMenuToggle">
+                ☰
+            </button>
+            
+            <div class="nav-links" id="navLinks">
                 <a href="/" class="nav-link">🚀 GitHub加速</a>
                 <a href="/skopeo.html" class="nav-link">🐳 镜像下载</a>
                 <a href="/search.html" class="nav-link active">🔍 镜像搜索</a>
@@ -1263,6 +1330,23 @@
             themeToggle.textContent = isDark ? '☀️' : '🌙';
             localStorage.setItem('theme', isDark ? 'dark' : 'light');
         });
+        
+        // 移动端菜单切换
+        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+        const navLinks = document.getElementById('navLinks');
+        
+        mobileMenuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            mobileMenuToggle.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
+        });
+        
+        // 点击页面其他地方关闭菜单
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.navbar') && navLinks.classList.contains('active')) {
+                navLinks.classList.remove('active');
+                mobileMenuToggle.textContent = '☰';
+            }
+        });
     </script>
     </main> <!-- 关闭 main -->
 </body>

src/public/skopeo.html

@@ -260,14 +260,62 @@
         }
 
         @media (max-width: 768px) {
-            .container {
+            .hero-title {
-                max-width: 100%;
+                font-size: 2rem;
-                font-size: 0.8rem;
             }
             
             .nav-links {
-                display: none;
+                position: fixed;
+                top: 70px;
+                left: 0;
+                right: 0;
+                background: var(--background);
+                border: 1px solid var(--border);
+                border-top: none;
+                border-radius: 0 0 12px 12px;
+                padding: 1rem;
+                flex-direction: column;
+                gap: 0.5rem;
+                z-index: 1000;
+                transform: translateY(-100vh);
+                transition: transform 0.3s ease;
             }
+            
+            .nav-links.active {
+                transform: translateY(0);
+            }
+            
+            .mobile-menu-toggle {
+                display: block !important;
+                background: none;
+                border: none;
+                color: var(--foreground);
+                font-size: 1.5rem;
+                cursor: pointer;
+                padding: 0.5rem;
+                border-radius: var(--radius);
+                transition: background-color 0.2s;
+            }
+            
+            .mobile-menu-toggle:hover {
+                background-color: var(--muted);
+            }
+            
+            .navbar-container {
+                justify-content: space-between !important;
+            }
+            
+            .container {
+                padding: 0 1rem;
+            }
+            
+            .modal-content {
+                padding: 1.5rem;
+            }
+        }
+        
+        .mobile-menu-toggle {
+            display: none;
         }
 
         @media (min-width: 768px) {
@@ -457,7 +505,11 @@
                 加速服务
             </a>
             
-            <div class="nav-links">
+            <button class="mobile-menu-toggle" id="mobileMenuToggle">
+                ☰
+            </button>
+            
+            <div class="nav-links" id="navLinks">
                 <a href="/" class="nav-link">🚀 GitHub加速</a>
                 <a href="/skopeo.html" class="nav-link active">🐳 镜像下载</a>
                 <a href="/search.html" class="nav-link">🔍 镜像搜索</a>
@@ -710,6 +762,23 @@
                 themeToggle.textContent = isDark ? '☀️' : '🌙';
                 localStorage.setItem('theme', isDark ? 'dark' : 'light');
             });
+            
+            // 移动端菜单切换
+            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
+            const navLinks = document.getElementById('navLinks');
+            
+            mobileMenuToggle.addEventListener('click', () => {
+                navLinks.classList.toggle('active');
+                mobileMenuToggle.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
+            });
+            
+            // 点击页面其他地方关闭菜单
+            document.addEventListener('click', (e) => {
+                if (!e.target.closest('.navbar') && navLinks.classList.contains('active')) {
+                    navLinks.classList.remove('active');
+                    mobileMenuToggle.textContent = '☰';
+                }
+            });
         });
     </script>
     </main> <!-- 关闭 main -->