diff --git a/src/public/index.html b/src/public/index.html
index b52b9f8..f5fc353 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -9,483 +9,695 @@
     <meta name="color-scheme" content="dark light">
     <title>Github文件加速</title>
     <link rel="icon" href="./favicon.ico">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
     <style>
+        /* 现代化设计系统 */
         :root {
-            --color: #fafafa;
-            --fontcolor: #333;
-            --inputcolor: #f5f5f5;
-            --inputcolor-font: #333;
-            --card-bg: #f8f9fa;
-            --border-color: #dee2e6;
+            --background: #ffffff;
+            --foreground: #0f172a;
+            --card: #ffffff;
+            --card-foreground: #0f172a;
+            --primary: #2563eb;
+            --primary-foreground: #f8fafc;
+            --secondary: #f1f5f9;
+            --secondary-foreground: #0f172a;
+            --muted: #f1f5f9;
+            --muted-foreground: #64748b;
+            --accent: #f1f5f9;
+            --accent-foreground: #0f172a;
+            --border: #e2e8f0;
+            --input: #ffffff;
+            --ring: #2563eb;
+            --radius: 0.5rem;
+        }
+
+        .dark {
+            --background: #0f172a;
+            --foreground: #f8fafc;
+            --card: #1e293b;
+            --card-foreground: #f8fafc;
+            --primary: #3b82f6;
+            --primary-foreground: #f8fafc;
+            --secondary: #1e293b;
+            --secondary-foreground: #f8fafc;
+            --muted: #1e293b;
+            --muted-foreground: #94a3b8;
+            --accent: #1e293b;
+            --accent-foreground: #f8fafc;
+            --border: #334155;
+            --input: #1e293b;
+            --ring: #3b82f6;
         }
 
         @media (prefers-color-scheme: dark) {
             :root {
-                --color: #53535338;
-                --fontcolor: #b8b8b8;
-                --inputcolor: #012333;
-                --inputcolor-font: #969696d8;
-                --card-bg: #012333;
-                --border-color: #2d3338;
+                --background: #0f172a;
+                --foreground: #f8fafc;
+                --card: #1e293b;
+                --card-foreground: #f8fafc;
+                --primary: #3b82f6;
+                --primary-foreground: #f8fafc;
+                --secondary: #1e293b;
+                --secondary-foreground: #f8fafc;
+                --muted: #1e293b;
+                --muted-foreground: #94a3b8;
+                --accent: #1e293b;
+                --accent-foreground: #f8fafc;
+                --border: #334155;
+                --input: #1e293b;
+                --ring: #3b82f6;
             }
         }
 
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
         body {
-            background-color: var(--color);
-            color: var(--fontcolor);
-            font-family: 'Misans', Arial, sans-serif;
-            padding: 30px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            background-color: var(--background);
+            color: var(--foreground);
+            line-height: 1.5;
             min-height: 100vh;
-            margin: 0;
+            display: flex;
+            flex-direction: column;
+            transition: background-color 0.3s, color 0.3s;
         }
 
-        *::-webkit-scrollbar {
-            height: 10px;
-            margin-top: 0px;
+        /* 现代化导航栏 */
+        .navbar {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            width: 100%;
+            border-bottom: 1px solid var(--border);
+            background-color: var(--background);
+            backdrop-filter: blur(8px);
+            background-color: rgba(255, 255, 255, 0.95);
         }
 
-        *::-webkit-scrollbar-track {
-            background-color: black;
+        .dark .navbar {
+            background-color: rgba(15, 23, 42, 0.95);
         }
 
-        *::-webkit-scrollbar-thumb {
-            background: #39c5bb;
-            border-radius: 10px;
+        .navbar-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 4rem;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            color: var(--foreground);
+            font-weight: 600;
+            font-size: 1.125rem;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            border-radius: 0.5rem;
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+
+        .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .nav-link {
+            padding: 0.5rem 1rem;
+            border-radius: var(--radius);
+            text-decoration: none;
+            color: var(--muted-foreground);
+            transition: all 0.2s;
+            font-weight: 500;
+        }
+
+        .nav-link:hover,
+        .nav-link.active {
+            color: var(--foreground);
+            background-color: var(--muted);
+        }
+
+        .theme-toggle {
+            padding: 0.5rem;
+            border: none;
+            border-radius: var(--radius);
+            background-color: transparent;
+            color: var(--muted-foreground);
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .theme-toggle:hover {
+            background-color: var(--muted);
+            color: var(--foreground);
+        }
+
+        /* 主要内容区域 */
+        .main {
+            flex: 1;
+            padding: 2rem 1rem;
         }
 
         .container {
-            max-width: 80%;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .hero {
             text-align: center;
-            min-height: 65%;
-            line-height: 1.25;
-            margin-top: 60px;
+            margin-bottom: 3rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out forwards;
         }
 
-        h1 {
-            color: var(--fontcolor);
-            font-weight: bold;
-            margin-bottom: 20%;
+        .hero-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .rounded-button {
-            border-radius: 6px;
-            transition: background-color 0.3s, transform 0.2s;
-            padding: 10px 30px;
-            background-color: #555c5c;
-            color: rgb(255, 255, 255);
-            border: none;
-            margin-bottom: 3%;
+        .hero-subtitle {
+            font-size: 1.125rem;
+            color: var(--muted-foreground);
+            max-width: 600px;
+            margin: 0 auto;
         }
 
-        .rounded-button:hover {
-            background-color: #39c5bcda;
-            transform: scale(1.05);
+        /* 现代化卡片设计 */
+        .card {
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out 0.2s forwards;
         }
 
-        .tips>p:first-child::before {
-            position: sticky;
-            color: #7b7b7b;
-            margin-bottom: 1%;
-            font-size: 60%;
+        .card-header {
+            margin-bottom: 1.5rem;
         }
 
-        footer {
-            position: fixed;
-            bottom: 20px;
-            left: 0;
-            right: 0;
-            text-align: center;
-            padding: 10px;
-            line-height: 1.25;
-            margin-top: 20px;
-        }
-
-        pre {
-            background: #012333;
-            color: #39c5bc;
-            padding: 15px 20px 15px 20px;
-            margin: 0px 0;
-            border-radius: 0.5rem;
-            overflow-x: auto;
-            position: relative;
-        }
-
-        pre::before {
-            content: " ";
-            display: block;
-            position: absolute;
-            top: 6px;
-            left: 6px;
-            width: 10px;
-            height: 10px;
-            background: #bd3c35;
-            border-radius: 50%;
-            box-shadow: 20px 0 0 #d69f27, 40px 0 0 #39c5bb;
-        }
-
-        code {
-            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-            font-size: 0.9em;
-            margin-bottom: 0px;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                max-width: 100%;
-                font-size: 0.8rem;
-            }
-        }
-
-        @media (min-width: 768px) {
-            .container {
-                max-width: 65%;
-                font-size: 1rem;
-            }
-
-            h1 {
-                margin-bottom: 10%;
-            }
-        }
-
-        .form-group {
-            margin-bottom: 3%;
-        }
-
-        .form-control {
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
-        }
-
-        .form-control:focus {
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
-        }
-
-        .tips-content {
-            margin-bottom: 0px;
-            margin-top: 20px;
-            font-size: clamp(0.8rem, 2vw, 1.1rem);
-        }
-
-        .status-container {
+        .card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
             display: flex;
-            justify-content: center;
             align-items: center;
-            margin-bottom: 1px;
-            margin-top: -2%;
-            font-size: clamp(0.8rem, 2vw, 1.05rem);
+            gap: 0.5rem;
         }
 
-        .code {
+        .card-description {
+            color: var(--muted-foreground);
+            font-size: 0.875rem;
+        }
+
+        /* 现代化表单设计 */
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .input-container {
             position: relative;
-            padding-right: 0px;
+            display: flex;
+            gap: 0.75rem;
         }
 
-        .copy-button {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 217, 224, 0.822);
-            color: white;
+        .input {
+            flex: 1;
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--input);
+            color: var(--foreground);
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+
+        .input:focus {
+            outline: none;
+            border-color: var(--ring);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+        }
+
+        .input::placeholder {
+            color: var(--muted-foreground);
+        }
+
+        .button {
+            padding: 0.75rem 1.5rem;
             border: none;
-            padding: 5px 10px;
-            border-radius: 5px;
+            border-radius: var(--radius);
+            font-weight: 500;
             cursor: pointer;
-            transition: opacity 0.3s;
-            z-index: 1;
-            font-size: 0.85rem;
-            display: none;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
-        .redir-button {
-            position: absolute;
-            top: 10px;
-            right: 65px;
-            background: rgba(0, 217, 224, 0.822);
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: opacity 0.3s;
-            z-index: 1;
-            font-size: 0.85rem;
-            display: none;
+        .button-primary {
+            background-color: var(--primary);
+            color: var(--primary-foreground);
         }
 
-        pre:hover .copy-button {
+        .button-primary:hover {
+            background-color: #1d4ed8;
+            transform: translateY(-1px);
+        }
+
+        .button-secondary {
+            background-color: var(--secondary);
+            color: var(--secondary-foreground);
+        }
+
+        .button-secondary:hover {
+            background-color: var(--muted);
+        }
+
+        /* 输出区域 */
+        .output-container {
+            margin-top: 1.5rem;
+            display: none;
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all 0.3s;
+        }
+
+        .output-container.show {
+            display: block;
             opacity: 1;
+            transform: translateY(0);
         }
 
-        #visitor-info {
-            margin-top: 10px;
-            text-align: center;
-            line-height: 0;
+        .success-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1rem;
+            color: #059669;
         }
 
-        #toast {
-            position: fixed;
-            top: 10%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: #39c5bcde;
-            color: white;
-            padding: 15px 20px;
-            border-radius: 10px;
-            font-size: 90%;
-            z-index: 1000;
+        .output-box {
+            background-color: var(--muted);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            padding: 1rem;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.875rem;
+            word-break: break-all;
+            position: relative;
+            margin-bottom: 1rem;
+        }
+
+        .output-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        /* Docker 信息卡片 */
+        .docker-info {
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out 0.4s forwards;
         }
 
         .docker-button {
-            width: 200px;
-            height: 50px;
-            border-radius: 10px;
-            background-color: #f6f6f6;
-            border: 2px solid #ececec;
-            color: #333;
-            font-size: 16px;
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
             cursor: pointer;
-            transition: all 0.3s ease;
-            margin-top: 20px;
+            transition: all 0.3s;
+            font-size: 1rem;
+            font-weight: 500;
+            color: var(--foreground);
         }
 
         .docker-button:hover {
-            background-color: #39c5bc;
-            color: white;
-            transform: scale(1.05);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
+        /* 模态框设计 */
         .modal {
-            display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
             z-index: 1000;
+            backdrop-filter: blur(4px);
         }
 
         .modal-content {
-            position: relative;
-            background-color: #fff;
-            margin: 10% auto;
-            padding: 30px;
-            width: 80%;
+            background-color: var(--card);
+            border-radius: 0.75rem;
+            padding: 2rem;
             max-width: 600px;
-            border-radius: 15px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+            position: relative;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+
+        .modal-header {
             text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .modal-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
         }
 
         .close-button {
             position: absolute;
-            right: 20px;
-            top: 15px;
-            font-size: 24px;
+            top: 1rem;
+            right: 1rem;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
             cursor: pointer;
-            color: #666;
+            color: var(--muted-foreground);
+            padding: 0.25rem;
+            border-radius: var(--radius);
         }
 
-        .domain-container {
-            margin-top: 30px;
-            text-align: center;
+        .close-button:hover {
+            background-color: var(--muted);
         }
 
-        .domain-item {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            align-items: center;
-            padding: 15px;
-            margin: 10px 0;
-            background-color: #f5f5f5;
-            border-radius: 8px;
-            transition: all 0.3s ease;
+        .domain-examples {
+            background-color: var(--muted);
+            border-radius: var(--radius);
+            padding: 1rem;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.875rem;
+            line-height: 1.6;
         }
 
-        .domain-item:hover {
-            background-color: #e9e9e9;
+        .domain-examples strong {
+            color: var(--foreground);
+            display: block;
+            margin: 1rem 0 0.5rem 0;
         }
 
-        .domain-text {
-            font-family: 'Consolas', monospace;
-            color: #333;
-            font-size: 16px;
-            text-align: center;
+        .domain-examples strong:first-child {
+            margin-top: 0;
         }
 
-        .modal h1 {
-            color: #333;
-            font-size: 24px;
-            margin-bottom: 20px;
-            text-align: center;
-        }
-
-        .hosts-button {
+        /* Toast 通知 */
+        .toast {
             position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 2px 8px;
-            background-color: #f5f5f5;
-            border: 0px solid #fafafa;
-            color: #333;
-            border-radius: 10px;
-            cursor: pointer;
+            top: 1rem;
+            right: 1rem;
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+            padding: 1rem 1.5rem;
+            border-radius: var(--radius);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            z-index: 1001;
+            display: none;
+            opacity: 0;
+            transform: translateX(100%);
             transition: all 0.3s ease;
-            font-size: 14px;
-            text-decoration: none;
         }
 
-        .hosts-button:hover {
-            background-color: #39c5bc;
-            color: white;
-            transform: scale(1.05);
-            text-decoration: none;
+        .toast.show {
+            display: block;
+            opacity: 1;
+            transform: translateX(0);
         }
 
-        .download-button {
-            position: fixed;
-            top: 20px;
-            right: 80px;
-            padding: 2px 8px;
-            background-color: #f5f5f5;
-            border: 0px solid #fafafa;
-            color: #333;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-            text-decoration: none;
-        }
-        
-        .download-button:hover {
-            background-color: #39c5bc;
-            color: white;
-            transform: scale(1.05);
-            text-decoration: none;
+        /* 页脚 */
+        .footer {
+            padding: 2rem 1rem;
+            text-align: center;
+            border-top: 1px solid var(--border);
         }
 
         .github-link {
-            display: inline-block;
-            position: static;
-            color: var(--fontcolor);
-            opacity: 0.7;
-            transition: opacity 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--muted-foreground);
+            text-decoration: none;
+            transition: color 0.2s;
         }
 
         .github-link:hover {
-            opacity: 1;
+            color: var(--foreground);
         }
 
-        .github-link svg {
-            width: 20px;
-            height: 20px;
+        /* 动画 */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2rem;
+            }
+            
+            .nav-links {
+                display: none;
+            }
+            
+            .container {
+                padding: 0 1rem;
+            }
+            
+            .modal-content {
+                padding: 1.5rem;
+            }
         }
     </style>
 </head>
 
 <body>
-    <a href="https://gitee.com/if-the-wind/github-hosts/raw/main/hosts" target="_blank" class="hosts-button">hosts</a>
-    <a href="/skopeo.html" class="download-button">镜像包下载</a>
-    <a href="/search.html" style="right: 180px;" class="download-button">镜像搜索</a>
-    <div class="container">
-        <h1>Github文件加速</h1>
-        <div class="form-group">
-            <input type="text" class="form-control" id="githubLinkInput" placeholder="输入需要加速的Github链接">
-        </div>
-        <button class="btn rounded-button" id="formatButton">获取加速链接</button>
-
-        <div class="code" id="outputBlock">
-            <button class="copy-button" id="copyButton">复制</button>
-            <button class="redir-button" id="redirButton">打开</button>
-            <pre id="formattedLinkOutput"></pre>
-        </div>
-        <div class="tips">
-            <div class="tips-content">
-                <p>支持release、archive文件，支持git clone、wget、curl等等操作<br>支持Al模型库Hugging Face</p><br>
+    <!-- 现代化导航栏 -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="/" class="logo">
+                <div class="logo-icon">
+                    ⚡
+                </div>
+                加速服务
+            </a>
+            
+            <div class="nav-links">
+                <a href="/" class="nav-link active">🚀 GitHub加速</a>
+                <a href="/skopeo.html" class="nav-link">🐳 镜像下载</a>
+                <a href="/search.html" class="nav-link">🔍 镜像搜索</a>
+                <a href="https://gitee.com/if-the-wind/github-hosts/raw/main/hosts" target="_blank" class="nav-link">📄 Hosts</a>
+                
+                <button class="theme-toggle" id="themeToggle">
+                    🌙
+                </button>
             </div>
         </div>
+    </nav>
 
-        <button class="docker-button" id="dockerButton">镜像加速提示</button>
-    </div>
+    <!-- 主要内容 -->
+    <main class="main">
+        <div class="container">
+            <!-- Hero 区域 -->
+            <div class="hero">
+                <h1 class="hero-title">GitHub 文件加速</h1>
+                <p class="hero-subtitle">
+                    快速下载GitHub上的文件和仓库，解决国内访问GitHub速度慢的问题，支持AI模型库Hugging Face
+                </p>
+            </div>
 
-    <div id="dockerModal" class="modal">
-        <div class="modal-content">
-            <span class="close-button" id="closeModal">&times;</span>
-            <h1>Docker镜像加速</h1>
-            <h5>支持多种Registry，在镜像名前添加本站域名即可</h5>
-            <div class="domain-container">
-                <div class="domain-text">
-                    <strong>Docker Hub 官方镜像：</strong><br>
-                    docker pull <span class="domain-base"></span>/nginx<br><br>
-                    
-                    <strong>Docker Hub 第三方镜像：</strong><br>
-                    docker pull <span class="domain-base"></span>/user/image<br><br>
-                    
-                    <strong>GitHub Container Registry：</strong><br>
-                    docker pull <span class="domain-base"></span>/ghcr.io/user/image<br><br>
-                    
-                    
-                    <strong>Quay.io Registry：</strong><br>
-                    docker pull <span class="domain-base"></span>/quay.io/org/image<br><br>
-                    
-                    <strong>Kubernetes Registry：</strong><br>
-                    docker pull <span class="domain-base"></span>/registry.k8s.io/pause:3.8
+            <!-- 主功能卡片 -->
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        ⚡ 快速生成加速链接
+                    </h2>
+                    <p class="card-description">
+                        输入GitHub文件或仓库链接，自动生成加速下载链接
+                    </p>
+                </div>
+
+                <div class="form-group">
+                    <div class="input-container">
+                        <input 
+                            type="text" 
+                            class="input" 
+                            id="githubLinkInput" 
+                            placeholder="请输入GitHub链接，例如：https://github.com/user/repo/releases/download/..."
+                        >
+                        <button class="button button-primary" id="formatButton">
+                            获取加速链接
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 输出区域 -->
+                <div class="output-container" id="outputBlock">
+                    <div class="success-header">
+                        <span>✅</span>
+                        <strong>加速链接已生成</strong>
+                    </div>
+                    <div class="output-box" id="formattedLinkOutput"></div>
+                    <div class="output-actions">
+                        <button class="button button-secondary" id="copyButton">
+                            📋 复制链接
+                        </button>
+                        <button class="button button-secondary" id="redirButton">
+                            🔗 打开链接
+                        </button>
+                    </div>
                 </div>
             </div>
+
+            <!-- Docker 信息卡片 -->
+            <div class="card docker-info">
+                <div class="card-header">
+                    <h3 class="card-title">
+                        🐳 Docker 镜像加速
+                    </h3>
+                    <p class="card-description">
+                        支持多种Registry，在镜像名前添加本站域名即可加速下载
+                    </p>
+                </div>
+                
+                <button class="docker-button" id="dockerButton">
+                    查看 Docker 镜像加速配置
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <!-- Docker 模态框 -->
+    <div id="dockerModal" class="modal">
+        <div class="modal-content">
+            <button class="close-button" id="closeModal">&times;</button>
+            <div class="modal-header">
+                <h2 class="modal-title">Docker 镜像加速</h2>
+                <p>支持多种Registry，在镜像名前添加本站域名即可</p>
+            </div>
+            
+            <div class="domain-examples">
+                <strong>Docker Hub 官方镜像：</strong>
+                docker pull <span class="domain-base"></span>/nginx
+
+                <strong>Docker Hub 第三方镜像：</strong>
+                docker pull <span class="domain-base"></span>/user/image
+
+                <strong>GitHub Container Registry：</strong>
+                docker pull <span class="domain-base"></span>/ghcr.io/user/image
+
+                <strong>Quay.io Registry：</strong>
+                docker pull <span class="domain-base"></span>/quay.io/org/image
+
+                <strong>Kubernetes Registry：</strong>
+                docker pull <span class="domain-base"></span>/registry.k8s.io/pause:3.8
+            </div>
         </div>
     </div>
-    <div id="toast" style="display:none;">
+
+    <!-- Toast 通知 -->
+    <div id="toast" class="toast">
         链接已复制到剪贴板
     </div>
 
-    <footer>
+    <!-- 页脚 -->
+    <footer class="footer">
         <a href="https://github.com/sky22333/hubproxy" target="_blank" class="github-link">
-            <svg height="32" viewBox="0 0 16 16" width="32">
-                <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+            <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
             </svg>
+            GitHub
         </a>
     </footer>
 
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            function getFullDomain() {
-                // 获取完整的域名（包括端口号）
-                return window.location.host;
-            }
+        // 主题管理
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        // 初始化主题
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+            html.classList.add('dark');
+            themeToggle.textContent = '☀️';
+        }
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            themeToggle.textContent = isDark ? '☀️' : '🌙';
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
 
-            let fullDomain = getFullDomain();
+        // 域名设置
+        document.addEventListener('DOMContentLoaded', function() {
+            const fullDomain = window.location.host;
             document.querySelectorAll('.domain-base').forEach(span => {
                 span.textContent = fullDomain;
             });
 
+            // 模态框管理
             const modal = document.getElementById('dockerModal');
             const dockerButton = document.getElementById('dockerButton');
             const closeButton = document.getElementById('closeModal');
 
-            dockerButton.onclick = function() {
-                modal.style.display = "block";
-            }
-
-            closeButton.onclick = function() {
-                modal.style.display = "none";
-            }
-
-            window.onclick = function(event) {
-                if (event.target == modal) {
-                    modal.style.display = "none";
-                }
-            }
+            dockerButton.onclick = () => modal.style.display = "flex";
+            closeButton.onclick = () => modal.style.display = "none";
+            window.onclick = (event) => {
+                if (event.target == modal) modal.style.display = "none";
+            };
         });
 
+        // GitHub链接格式化功能
         function formatGithubLink() {
-            var githubLinkInput = document.getElementById('githubLinkInput');
-            var currentHost = window.location.host;
-            var formattedLink = "";
-            var link = githubLinkInput.value.trim();
+            const githubLinkInput = document.getElementById('githubLinkInput');
+            const currentHost = window.location.host;
+            let formattedLink = "";
+            const link = githubLinkInput.value.trim();
         
             if (link.startsWith("https://") || link.startsWith("http://")) {
                 formattedLink = "https://" + currentHost + "/" + link;
@@ -503,47 +715,62 @@
                 return;
             }
         
-            var formattedLinkOutput = document.getElementById('formattedLinkOutput');
+            const formattedLinkOutput = document.getElementById('formattedLinkOutput');
             formattedLinkOutput.textContent = formattedLink;
-            displayButton();
+            
+            const outputBlock = document.getElementById('outputBlock');
+            outputBlock.classList.add('show');
         }
 
-
-        function displayButton() {
-            var copyButton = document.getElementById('copyButton');
-            var redirButton = document.getElementById('redirButton');
-            copyButton.style.display = 'block';
-            redirButton.style.display = 'block';
+        // 复制功能
+        function copyToClipboard() {
+            const output = document.getElementById('formattedLinkOutput');
+            const text = output.textContent;
+            
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(text).then(() => {
+                    showToast('链接已复制到剪贴板');
+                });
+            } else {
+                // 降级方案
+                const range = document.createRange();
+                range.selectNode(output);
+                window.getSelection().removeAllRanges();
+                window.getSelection().addRange(range);
+                document.execCommand('copy');
+                window.getSelection().removeAllRanges();
+                showToast('链接已复制到剪贴板');
+            }
         }
 
-        function redirToFormattedLink() {
-            var formattedLinkOutput = document.getElementById('formattedLinkOutput');
-            console.log(formattedLinkOutput.textContent);
+        // 打开链接
+        function openLink() {
+            const formattedLinkOutput = document.getElementById('formattedLinkOutput');
             window.open(formattedLinkOutput.textContent);
         }
 
-        document.getElementById('formatButton').addEventListener('click', formatGithubLink);
-        document.getElementById('copyButton').addEventListener('click', function () {
-            const output = document.getElementById('formattedLinkOutput');
-            const range = document.createRange();
-            range.selectNode(output);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-            document.execCommand('copy');
-            window.getSelection().removeAllRanges();
-            showToast('链接已复制到剪贴板');
-        });
-        document.getElementById('redirButton').addEventListener('click', redirToFormattedLink);
-
+        // Toast 通知
         function showToast(message) {
             const toast = document.getElementById('toast');
             toast.textContent = message;
-            toast.style.display = 'block';
+            toast.classList.add('show');
 
             setTimeout(() => {
-                toast.style.display = 'none';
-            }, 2000);
+                toast.classList.remove('show');
+            }, 3000);
         }
+
+        // 事件监听
+        document.getElementById('formatButton').addEventListener('click', formatGithubLink);
+        document.getElementById('copyButton').addEventListener('click', copyToClipboard);
+        document.getElementById('redirButton').addEventListener('click', openLink);
+        
+        // 回车键支持
+        document.getElementById('githubLinkInput').addEventListener('keyup', function(event) {
+            if (event.key === 'Enter') {
+                formatGithubLink();
+            }
+        });
     </script>
 </body>
 
diff --git a/src/public/search.html b/src/public/search.html
index 91612bd..cb8b3dd 100644
--- a/src/public/search.html
+++ b/src/public/search.html
@@ -8,231 +8,287 @@
     <meta name="color-scheme" content="dark light">
     <title>Docker镜像搜索</title>
     <link rel="icon" href="./favicon.ico">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
     <style>
+        /* 现代化设计系统 */
         :root {
-            --color: #fafafa;
-            --fontcolor: #333;
-            --inputcolor: #f5f5f5;
-            --inputcolor-font: #333;
-            --card-bg: #f8f9fa;
-            --border-color: #dee2e6;
+            --background: #ffffff;
+            --foreground: #0f172a;
+            --card: #ffffff;
+            --card-foreground: #0f172a;
+            --primary: #2563eb;
+            --primary-foreground: #f8fafc;
+            --secondary: #f1f5f9;
+            --secondary-foreground: #0f172a;
+            --muted: #f1f5f9;
+            --muted-foreground: #64748b;
+            --accent: #f1f5f9;
+            --accent-foreground: #0f172a;
+            --border: #e2e8f0;
+            --input: #ffffff;
+            --ring: #2563eb;
+            --radius: 0.5rem;
+            --success: #059669;
+            --warning: #d97706;
+            --error: #dc2626;
+        }
+
+        .dark {
+            --background: #0f172a;
+            --foreground: #f8fafc;
+            --card: #1e293b;
+            --card-foreground: #f8fafc;
+            --primary: #3b82f6;
+            --primary-foreground: #f8fafc;
+            --secondary: #1e293b;
+            --secondary-foreground: #f8fafc;
+            --muted: #1e293b;
+            --muted-foreground: #94a3b8;
+            --accent: #1e293b;
+            --accent-foreground: #f8fafc;
+            --border: #334155;
+            --input: #1e293b;
+            --ring: #3b82f6;
         }
 
         @media (prefers-color-scheme: dark) {
             :root {
-                --color: #53535338;
-                --fontcolor: #b8b8b8;
-                --inputcolor: #012333;
-                --inputcolor-font: #969696d8;
-                --card-bg: #012333;
-                --border-color: #2d3338;
+                --background: #0f172a;
+                --foreground: #f8fafc;
+                --card: #1e293b;
+                --card-foreground: #f8fafc;
+                --primary: #3b82f6;
+                --primary-foreground: #f8fafc;
+                --secondary: #1e293b;
+                --secondary-foreground: #f8fafc;
+                --muted: #1e293b;
+                --muted-foreground: #94a3b8;
+                --accent: #1e293b;
+                --accent-foreground: #f8fafc;
+                --border: #334155;
+                --input: #1e293b;
+                --ring: #3b82f6;
             }
         }
 
-        body {
-            background-color: var(--color);
-            color: var(--fontcolor);
-            font-family: 'Misans', Arial, sans-serif;
-            padding: 30px;
-            min-height: 100vh;
+        * {
+            box-sizing: border-box;
             margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            background-color: var(--background);
+            color: var(--foreground);
+            line-height: 1.5;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        /* 现代化导航栏 */
+        .navbar {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            width: 100%;
+            border-bottom: 1px solid var(--border);
+            background-color: var(--background);
+            backdrop-filter: blur(8px);
+            background-color: rgba(255, 255, 255, 0.95);
+        }
+
+        .dark .navbar {
+            background-color: rgba(15, 23, 42, 0.95);
+        }
+
+        .navbar-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 4rem;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            color: var(--foreground);
+            font-weight: 600;
+            font-size: 1.125rem;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            border-radius: 0.5rem;
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+
+        .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .nav-link {
+            padding: 0.5rem 1rem;
+            border-radius: var(--radius);
+            text-decoration: none;
+            color: var(--muted-foreground);
+            transition: all 0.2s;
+            font-weight: 500;
+        }
+
+        .nav-link:hover,
+        .nav-link.active {
+            color: var(--foreground);
+            background-color: var(--muted);
+        }
+
+        .theme-toggle {
+            padding: 0.5rem;
+            border: none;
+            border-radius: var(--radius);
+            background-color: transparent;
+            color: var(--muted-foreground);
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .theme-toggle:hover {
+            background-color: var(--muted);
+            color: var(--foreground);
+        }
+
+        /* 主要内容区域 */
+        .main {
+            flex: 1;
+            padding: 2rem 1rem;
         }
 
         .container {
             max-width: 1200px;
-            padding: 20px;
-            margin-top: 60px;
+            margin: 0 auto;
         }
 
-        h1 {
-            color: var(--fontcolor);
-            font-weight: bold;
-            margin-bottom: 30px;
+        .hero {
             text-align: center;
+            margin-bottom: 3rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out forwards;
+        }
+
+        .hero-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .hero-subtitle {
+            font-size: 1.125rem;
+            color: var(--muted-foreground);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        /* 搜索区域 */
+        .search-card {
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out 0.2s forwards;
         }
 
         .search-container {
-            margin-bottom: 30px;
+            display: flex;
+            gap: 0.75rem;
+            align-items: stretch;
         }
 
-        .form-control {
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
-            border-radius: 20px;
-            padding: 10px 20px;
-            height: 46px;
+        .search-input {
+            flex: 1;
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--input);
+            color: var(--foreground);
+            font-size: 1rem;
+            transition: all 0.2s;
         }
 
-        .form-control:focus {
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
+        .search-input:focus {
+            outline: none;
+            border-color: var(--ring);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+        }
+
+        .search-input::placeholder {
+            color: var(--muted-foreground);
         }
 
         .search-button {
-            border-radius: 20px;
-            padding: 10px 30px;
-            background-color: #39c5bc;
-            color: white;
+            padding: 0.75rem 1.5rem;
             border: none;
-            transition: all 0.3s ease;
-            height: 46px;
-            margin-left: 10px;
+            border-radius: var(--radius);
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
         .search-button:hover {
-            transform: scale(1.05);
-            background-color: #2ea8a0;
+            background-color: #1d4ed8;
+            transform: translateY(-1px);
         }
 
-        .input-group {
-            display: flex;
-            align-items: center;
-        }
-
-        .input-group-append {
-            display: flex;
-            align-items: center;
-        }
-
-        .result-card {
-            background-color: var(--card-bg);
-            border-radius: 10px;
-            padding: 20px;
-            margin-bottom: 20px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 1px solid var(--border-color);
-        }
-
-        .result-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-        }
-
-        .result-title {
-            font-size: 1.2rem;
-            font-weight: 500;
-            margin-bottom: 10px;
-            color: #0091e2;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-
-        .result-description {
-            color: var(--fontcolor);
-            margin: 10px 0;
-            font-size: 0.95rem;
-            line-height: 1.5;
-            opacity: 0.9;
-        }
-
-        .result-meta {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            font-size: 0.9rem;
-            color: var(--fontcolor);
-            opacity: 0.8;
-            margin-top: 15px;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-
-        .meta-stats {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            flex-wrap: wrap;
-            font-size: 0.95rem;
-        }
-
-        .meta-pulls {
-            font-size: 0.85rem;
-            color: #666;
-            text-align: right;
-        }
-
-        .meta-pulls .pulls-count {
-            font-size: 1rem;
-            color: #333;
-            margin-top: 4px;
-        }
-
-        .badge {
-            padding: 3px 8px;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            font-weight: normal;
-            white-space: nowrap;
-        }
-
-        .badge-official {
-            background-color: #28a745;
-            color: white;
-        }
-
-        .badge-organization {
-            background-color: #6c757d;
-            color: white;
-            font-weight: normal;
-        }
-
-        .badge-automated {
-            background-color: #17a2b8;
-            color: white;
-        }
-
-        .meta-item {
-            display: inline-flex;
-            align-items: center;
-            white-space: nowrap;
-            color: #666;
-        }
-
-        .meta-item .icon {
-            opacity: 0.7;
-        }
-
-        .back-button {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            padding: 2px 8px;
-            background-color: #f5f5f5;
-            border: 0px solid #fafafa;
-            color: #333;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-            text-decoration: none;
-        }
-
-        .back-button:hover {
-            background-color: #39c5bc;
-            color: white;
-            transform: scale(1.05);
-            text-decoration: none;
+        .search-button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
         }
 
+        /* 加载状态 */
         .loading {
-            text-align: center;
-            padding: 20px;
             display: none;
+            text-align: center;
+            padding: 3rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.3s ease-out forwards;
         }
 
         .loading-spinner {
-            width: 40px;
-            height: 40px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #39c5bc;
+            width: 3rem;
+            height: 3rem;
+            border: 3px solid var(--muted);
+            border-top: 3px solid var(--primary);
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            margin: 0 auto;
+            margin: 0 auto 1rem;
         }
 
         @keyframes spin {
@@ -240,832 +296,790 @@
             100% { transform: rotate(360deg); }
         }
 
-        #toast {
-            position: fixed;
-            top: 10%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: #39c5bcde;
-            color: white;
-            padding: 15px 20px;
-            border-radius: 10px;
-            font-size: 90%;
-            z-index: 1000;
-            display: none;
+        /* 结果区域 */
+        .results-container {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.3s;
         }
 
+        .results-container.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .results-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+        }
+
+        .results-count {
+            color: var(--muted-foreground);
+            font-size: 0.875rem;
+        }
+
+        /* 结果卡片 */
+        .result-card {
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            transition: all 0.2s;
+            cursor: pointer;
+        }
+
+        .result-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            border-color: var(--primary);
+        }
+
+        .result-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+        }
+
+        .badge {
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+            white-space: nowrap;
+        }
+
+        .badge-official {
+            background-color: var(--success);
+            color: white;
+        }
+
+        .badge-organization {
+            background-color: var(--muted);
+            color: var(--muted-foreground);
+        }
+
+        .badge-automated {
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+        }
+
+        .result-description {
+            color: var(--foreground);
+            margin-bottom: 1rem;
+            line-height: 1.6;
+            opacity: 0.9;
+        }
+
+        .result-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+            font-size: 0.875rem;
+            color: var(--muted-foreground);
+        }
+
+        .meta-stats {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+
+        /* 分页 */
         .pagination {
             display: flex;
             justify-content: center;
-            margin-top: 20px;
+            gap: 1rem;
+            margin-top: 2rem;
         }
 
-        .pagination button {
-            margin: 0 5px;
-            padding: 5px 15px;
-            border: none;
-            border-radius: 5px;
-            background-color: #39c5bc;
-            color: white;
+        .pagination-button {
+            padding: 0.5rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--card);
+            color: var(--foreground);
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all 0.2s;
+            font-weight: 500;
         }
 
-        .pagination button:disabled {
-            background-color: #cccccc;
+        .pagination-button:hover:not(:disabled) {
+            background-color: var(--muted);
+            border-color: var(--primary);
+        }
+
+        .pagination-button:disabled {
+            opacity: 0.5;
             cursor: not-allowed;
         }
 
-        .pagination button:hover:not(:disabled) {
-            transform: scale(1.05);
-            background-color: #2ea8a0;
-        }
-
+        /* 标签详情 */
         .tag-list {
-            margin-top: 20px;
             display: none;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.3s;
         }
 
-        .tag-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 15px;
-            padding: 20px;
-            background-color: var(--card-bg);
-            border-radius: 10px;
-            border: 1px solid var(--border-color);
-            flex-direction: column;
-        }
-
-        .tag-info {
-            flex: 1;
-            width: 100%;
+        .tag-list.show {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
         }
 
         .tag-search-container {
-            width: 100%;
-            margin: 15px 0 20px 0;
-            position: relative;
-            background: var(--card-bg);
-            padding: 15px;
-            border-radius: 10px;
-            border: 2px solid #39c5bc;
-            box-shadow: 0 2px 8px rgba(57, 197, 188, 0.1);
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
         }
 
-        .tag-search-container::before {
-            content: '🔍 标签搜索';
-            display: block;
-            margin-bottom: 10px;
-            color: #39c5bc;
-            font-weight: bold;
-            font-size: 0.9rem;
+        .tag-search-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            color: var(--primary);
+            font-weight: 600;
         }
 
         .tag-search-input {
             width: 100%;
-            padding: 12px 40px 12px 15px;
-            border-radius: 8px;
-            border: 1px solid var(--border-color);
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--input);
+            color: var(--foreground);
             font-size: 1rem;
-            transition: all 0.3s ease;
+            transition: all 0.2s;
         }
 
         .tag-search-input:focus {
             outline: none;
-            border-color: #39c5bc;
-            box-shadow: 0 0 0 3px rgba(57, 197, 188, 0.2);
+            border-color: var(--ring);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
         }
 
-        .tag-search-input::placeholder {
-            color: #888;
-            font-style: italic;
-        }
-
-        .tag-search-clear {
-            position: absolute;
-            right: 25px;
-            top: 50%;
-            transform: translateY(-5%);
-            background: none;
-            border: none;
-            color: var(--fontcolor);
-            cursor: pointer;
-            padding: 8px;
-            opacity: 0.6;
-            font-size: 1.2rem;
-            transition: all 0.3s ease;
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .tag-search-clear:hover {
-            opacity: 1;
-            background-color: rgba(57, 197, 188, 0.1);
-            transform: translateY(-5%) scale(1.1);
-        }
-
-        @media (prefers-color-scheme: dark) {
-            .tag-search-container {
-                border-color: #39c5bc;
-                box-shadow: 0 2px 8px rgba(57, 197, 188, 0.2);
-            }
-            
-            .tag-search-input::placeholder {
-                color: #666;
-            }
+        .tag-info {
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
         }
 
         .tag-title {
             font-size: 1.5rem;
-            margin-bottom: 10px;
+            font-weight: 700;
+            margin-bottom: 0.75rem;
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 0.75rem;
         }
 
         .tag-description {
-            color: var(--fontcolor);
-            opacity: 0.8;
+            color: var(--muted-foreground);
+            margin-bottom: 1rem;
         }
 
         .tag-pull-command {
-            background-color: var(--inputcolor);
-            padding: 10px 15px;
-            border-radius: 5px;
-            font-family: monospace;
-            margin-top: 10px;
+            background-color: var(--muted);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            padding: 1rem;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.875rem;
             position: relative;
+            word-break: break-all;
         }
 
         .copy-button {
             position: absolute;
-            right: 5px;
-            top: 5px;
-            background: #39c5bc;
-            color: white;
+            top: 0.5rem;
+            right: 0.5rem;
+            padding: 0.25rem 0.5rem;
+            background-color: var(--primary);
+            color: var(--primary-foreground);
             border: none;
-            padding: 2px 8px;
-            border-radius: 3px;
+            border-radius: 0.25rem;
             cursor: pointer;
-            font-size: 0.8rem;
+            font-size: 0.75rem;
+            transition: all 0.2s;
         }
 
+        .copy-button:hover {
+            background-color: #1d4ed8;
+        }
+
+        /* 标签项 */
         .tag-item {
-            background-color: var(--card-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            padding: 15px;
-            margin-bottom: 15px;
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            transition: all 0.2s;
+        }
+
+        .tag-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         .tag-name {
-            font-size: 1.1rem;
-            font-weight: bold;
-            margin-bottom: 10px;
-            color: #39c5bc;
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: var(--primary);
         }
 
         .tag-meta {
-            font-size: 0.9rem;
-            color: var(--fontcolor);
-            opacity: 0.8;
-            margin-bottom: 10px;
+            font-size: 0.875rem;
+            color: var(--muted-foreground);
+            margin-bottom: 0.75rem;
         }
 
         .tag-architectures {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 10px;
+            gap: 0.5rem;
         }
 
         .arch-item {
-            background-color: var(--inputcolor);
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 0.8rem;
-        }
-
-        .vulnerability-indicator {
-            display: inline-flex;
-            gap: 5px;
-            margin-left: 10px;
-        }
-
-        .vulnerability-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            display: inline-block;
-        }
-
-        .vulnerability-critical { background-color: #dc3545; }
-        .vulnerability-high { background-color: #fd7e14; }
-        .vulnerability-medium { background-color: #ffc107; }
-        .vulnerability-low { background-color: #28a745; }
-        .vulnerability-unknown { background-color: #6c757d; }
-
-        .search-results {
-            transition: all 0.3s ease;
+            background-color: var(--muted);
+            color: var(--muted-foreground);
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
         }
 
+        /* 返回按钮 */
         .back-to-search {
-            margin-bottom: 20px;
-            color: #39c5bc;
-            cursor: pointer;
             display: none;
+            margin-bottom: 1.5rem;
+            color: var(--primary);
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.2s;
         }
 
         .back-to-search:hover {
             text-decoration: underline;
         }
 
+        .back-to-search.show {
+            display: block;
+        }
+
+        /* Toast 通知 */
+        .toast {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+            padding: 1rem 1.5rem;
+            border-radius: var(--radius);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            z-index: 1001;
+            display: none;
+            opacity: 0;
+            transform: translateX(100%);
+            transition: all 0.3s ease;
+        }
+
+        .toast.show {
+            display: block;
+            opacity: 1;
+            transform: translateX(0);
+        }
+
+        /* 动画 */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* 响应式设计 */
         @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2rem;
+            }
+            
+            .nav-links {
+                display: none;
+            }
+            
+            .search-container {
+                flex-direction: column;
+            }
+            
             .result-meta {
                 flex-direction: column;
                 align-items: flex-start;
             }
             
-            .meta-pulls {
-                text-align: left;
-                width: 100%;
+            .pagination {
+                flex-direction: column;
+                align-items: center;
             }
         }
-
-        .icon {
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 4px;
-            margin-top: -2px;
-        }
     </style>
 </head>
 <body>
-    <a href="/" class="back-button">返回</a>
-    <div class="container">
-        <h1>Docker镜像搜索</h1>
-        
-        <div class="search-container">
-            <div class="input-group">
-                <input type="text" class="form-control" id="searchInput" placeholder="输入镜像名称搜索...">
-                <div class="input-group-append">
-                    <button class="btn search-button" id="searchButton">搜索</button>
+    <!-- 现代化导航栏 -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="/" class="logo">
+                <div class="logo-icon">
+                    ⚡
+                </div>
+                加速服务
+            </a>
+            
+            <div class="nav-links">
+                <a href="/" class="nav-link">🚀 GitHub加速</a>
+                <a href="/skopeo.html" class="nav-link">🐳 镜像下载</a>
+                <a href="/search.html" class="nav-link active">🔍 镜像搜索</a>
+                <a href="https://gitee.com/if-the-wind/github-hosts/raw/main/hosts" target="_blank" class="nav-link">📄 Hosts</a>
+                
+                <button class="theme-toggle" id="themeToggle">
+                    🌙
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- 主要内容 -->
+    <main class="main">
+        <div class="container">
+            <!-- Hero 区域 -->
+            <div class="hero">
+                <h1 class="hero-title">Docker 镜像搜索</h1>
+                <p class="hero-subtitle">
+                    搜索 Docker Hub 上的镜像，查看详细信息和标签版本
+                </p>
+            </div>
+
+            <!-- 搜索卡片 -->
+            <div class="search-card">
+                <div class="search-container">
+                    <input 
+                        type="text" 
+                        class="search-input" 
+                        id="searchInput" 
+                        placeholder="输入镜像名称搜索，例如：nginx, mysql, ubuntu..."
+                    >
+                    <button class="search-button" id="searchButton">
+                        🔍 搜索镜像
+                    </button>
                 </div>
             </div>
-        </div>
 
-        <div class="loading">
-            <div class="loading-spinner"></div>
-            <p>正在加载...</p>
-        </div>
+            <!-- 加载状态 -->
+            <div class="loading" id="loading">
+                <div class="loading-spinner"></div>
+                <p>正在搜索镜像...</p>
+            </div>
 
-        <div class="back-to-search">← 返回搜索结果</div>
+            <!-- 返回搜索按钮 -->
+            <div class="back-to-search" id="backToSearch">
+                ← 返回搜索结果
+            </div>
 
-        <div class="search-results">
-            <div id="searchResults"></div>
-            
-            <div class="pagination">
-                <button id="prevPage" disabled>上一页</button>
-                <button id="nextPage" disabled>下一页</button>
+            <!-- 搜索结果 -->
+            <div class="results-container" id="searchResults">
+                <div class="results-header">
+                    <h2 class="results-title">搜索结果</h2>
+                    <span class="results-count" id="resultsCount"></span>
+                </div>
+                
+                <div id="resultsList"></div>
+                
+                <!-- 分页 -->
+                <div class="pagination">
+                    <button class="pagination-button" id="prevPage" disabled>
+                        ← 上一页
+                    </button>
+                    <button class="pagination-button" id="nextPage" disabled>
+                        下一页 →
+                    </button>
+                </div>
+            </div>
+
+            <!-- 标签列表 -->
+            <div class="tag-list" id="tagList">
+                <!-- 标签搜索 -->
+                <div class="tag-search-container">
+                    <div class="tag-search-header">
+                        🔍 标签搜索
+                    </div>
+                    <input 
+                        type="text" 
+                        class="tag-search-input" 
+                        id="tagSearchInput" 
+                        placeholder="过滤标签..."
+                    >
+                </div>
+
+                <!-- 镜像信息 -->
+                <div class="tag-info" id="tagInfo"></div>
+
+                <!-- 标签项 -->
+                <div id="tagItems"></div>
             </div>
         </div>
+    </main>
 
-        <div class="tag-list" id="tagList"></div>
-    </div>
-
-    <div id="toast"></div>
+    <!-- Toast 通知 -->
+    <div id="toast" class="toast"></div>
 
     <script>
-        // 添加统一的格式化工具对象
+        // 主题管理
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        // 初始化主题
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+            html.classList.add('dark');
+            themeToggle.textContent = '☀️';
+        }
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            themeToggle.textContent = isDark ? '☀️' : '🌙';
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+
+        // 全局变量
+        let currentPage = 1;
+        let isLoading = false;
+        let currentSearchTerm = '';
+        let searchResults = [];
+        let allTags = [];
+
+        // DOM 元素
+        const elements = {
+            searchInput: document.getElementById('searchInput'),
+            searchButton: document.getElementById('searchButton'),
+            loading: document.getElementById('loading'),
+            searchResults: document.getElementById('searchResults'),
+            resultsList: document.getElementById('resultsList'),
+            resultsCount: document.getElementById('resultsCount'),
+            prevPage: document.getElementById('prevPage'),
+            nextPage: document.getElementById('nextPage'),
+            tagList: document.getElementById('tagList'),
+            tagInfo: document.getElementById('tagInfo'),
+            tagItems: document.getElementById('tagItems'),
+            tagSearchInput: document.getElementById('tagSearchInput'),
+            backToSearch: document.getElementById('backToSearch'),
+            toast: document.getElementById('toast')
+        };
+
+        // 格式化工具
         const formatUtils = {
             formatNumber(num) {
-                if (num >= 1000000000) return (num / 1000000000).toFixed(1) + 'B+';
-                if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M+';
-                if (num >= 1000) return (num / 1000).toFixed(1) + 'K+';
+                if (num >= 1000000000) return (num / 1000000000).toFixed(1) + 'B';
+                if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+                if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
                 return num.toString();
             },
-            formatTimeAgo(dateString) {
-                if (!dateString) return '未知时间';
-                try {
-                    let date;
-                    date = new Date(dateString);
-                    if (isNaN(date.getTime())) {
-                        const formats = [
-                            { regex: /^(\d{4})-(\d{2})-(\d{2})$/, handler: (m) => new Date(m[1], m[2] - 1, m[3]) },
-                            { regex: /^(\d{4})\/(\d{2})\/(\d{2})$/, handler: (m) => new Date(m[1], m[2] - 1, m[3]) },
-                            { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, handler: (m) => new Date(m[3], m[1] - 1, m[2]) }
-                        ];
-                        
-                        for (const format of formats) {
-                            const match = dateString.match(format.regex);
-                            if (match) {
-                                date = format.handler(match);
-                                if (!isNaN(date.getTime())) break;
-                            }
-                        }
-                        
-                        if (isNaN(date.getTime())) {
-                            return '未知时间';
-                        }
-                    }
-                    
-                    const now = new Date();
-                    const diffTime = Math.abs(now - date);
-                    const diffMinutes = Math.floor(diffTime / (1000 * 60));
-                    const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
-                    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-                    const diffMonths = Math.floor(diffDays / 30);
-                    const diffYears = Math.floor(diffDays / 365);
-                    
-                    if (diffMinutes < 1) return '刚刚';
-                    if (diffMinutes < 60) return `${diffMinutes}分钟前`;
-                    if (diffHours < 24) return `${diffHours}小时前`;
-                    if (diffDays < 7) return `${diffDays}天前`;
-                    if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`;
-                    if (diffMonths < 12) return `${diffMonths}个月前`;
-                    if (diffYears < 1) return '近1年';
-                    return `${diffYears}年前`;
-                } catch (error) {
-                    console.warn('日期处理错误:', error);
-                    return '未知时间';
-                }
-            },
             formatSize(bytes) {
-                const units = ['B', 'KB', 'MB', 'GB'];
-                let size = bytes;
-                let unitIndex = 0;
-                while (size >= 1024 && unitIndex < units.length - 1) {
-                    size /= 1024;
-                    unitIndex++;
-                }
-                return `${size.toFixed(2)} ${units[unitIndex]}`;
+                const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+                if (bytes === 0) return '0 B';
+                const i = Math.floor(Math.log(bytes) / Math.log(1024));
+                return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+            },
+            formatDate(dateString) {
+                return new Date(dateString).toLocaleDateString('zh-CN');
             }
         };
 
-        let currentPage = 1;
-        let totalPages = 1;
-        let currentQuery = '';
-        let currentRepo = null;
-
-        document.getElementById('searchButton').addEventListener('click', () => {
-            currentPage = 1;
-            performSearch();
-        });
-
-        document.getElementById('searchInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                currentPage = 1;
-                performSearch();
-            }
-        });
-
-        document.getElementById('prevPage').addEventListener('click', () => {
-            if (currentPage > 1) {
-                currentPage--;
-                performSearch();
-            }
-        });
-
-        document.getElementById('nextPage').addEventListener('click', () => {
-            if (currentPage < totalPages) {
-                currentPage++;
-                performSearch();
-            }
-        });
-
-        document.querySelector('.back-to-search').addEventListener('click', () => {
-            showSearchResults();
-        });
-
-        function showLoading() {
-            document.querySelector('.loading').style.display = 'block';
-        }
-
-        function hideLoading() {
-            document.querySelector('.loading').style.display = 'none';
-        }
-
-        function showToast(message) {
-            const toast = document.getElementById('toast');
+        // Toast 通知
+        function showToast(message, type = 'info') {
+            const toast = elements.toast;
             toast.textContent = message;
-            toast.style.display = 'block';
+            toast.classList.add('show');
+
             setTimeout(() => {
-                toast.style.display = 'none';
+                toast.classList.remove('show');
             }, 3000);
         }
 
-        function updatePagination() {
-            const prevButton = document.getElementById('prevPage');
-            const nextButton = document.getElementById('nextPage');
+        // 搜索功能
+        async function searchImages(term, page = 1) {
+            if (isLoading) return;
             
-            prevButton.disabled = currentPage <= 1;
-            nextButton.disabled = currentPage >= totalPages;
+            isLoading = true;
+            currentSearchTerm = term;
+            currentPage = page;
             
-            // 添加页码显示和快速跳转
-            const paginationDiv = document.querySelector('.pagination');
-            let pageInfo = document.getElementById('pageInfo');
-            if (!pageInfo) {
-                const container = document.createElement('div');
-                container.id = 'pageInfo';
-                container.style.margin = '0 10px';
-                container.style.display = 'flex';
-                container.style.alignItems = 'center';
-                container.style.gap = '10px';
-                
-                // 页码显示
-                const pageText = document.createElement('span');
-                pageText.id = 'pageText';
-                
-                // 跳转输入框
-                const jumpInput = document.createElement('input');
-                jumpInput.type = 'number';
-                jumpInput.min = '1';
-                jumpInput.id = 'jumpPage';
-                jumpInput.style.width = '60px';
-                jumpInput.style.padding = '4px';
-                jumpInput.style.borderRadius = '4px';
-                jumpInput.style.border = '1px solid var(--border-color)';
-                jumpInput.style.backgroundColor = 'var(--inputcolor)';
-                jumpInput.style.color = 'var(--inputcolor-font)';
-                
-                // 跳转按钮
-                const jumpButton = document.createElement('button');
-                jumpButton.textContent = '跳转';
-                jumpButton.className = 'btn search-button';
-                jumpButton.style.padding = '4px 8px';
-                jumpButton.onclick = () => {
-                    const page = parseInt(jumpInput.value);
-                    if (page && page >= 1 && page <= totalPages) {
-                        currentPage = page;
-                        performSearch();
-                    } else {
-                        showToast('请输入有效的页码');
-                    }
-                };
-                
-                container.appendChild(pageText);
-                container.appendChild(jumpInput);
-                container.appendChild(jumpButton);
-                
-                // 插入到分页区域
-                paginationDiv.insertBefore(container, nextButton);
-                pageInfo = container;
-            }
-            
-            // 更新页码显示
-            const pageText = document.getElementById('pageText');
-            pageText.textContent = `第 ${currentPage} / ${totalPages || 1} 页 共 ${totalPages || 1} 页`;
-            
-            // 更新跳转输入框
-            const jumpInput = document.getElementById('jumpPage');
-            if (jumpInput) {
-                jumpInput.max = totalPages;
-                jumpInput.value = currentPage;
-            }
-            
-            // 显示或隐藏分页区域
-            paginationDiv.style.display = totalPages > 1 ? 'flex' : 'none';
-        }
-
-        function showSearchResults() {
-            document.querySelector('.search-results').style.display = 'block';
-            document.querySelector('.tag-list').style.display = 'none';
-            document.querySelector('.back-to-search').style.display = 'none';
-            document.querySelector('.search-container').style.display = 'block';
-        }
-
-        function showTagList() {
-            document.querySelector('.search-results').style.display = 'none';
-            document.querySelector('.tag-list').style.display = 'block';
-            document.querySelector('.back-to-search').style.display = 'block';
-            document.querySelector('.search-container').style.display = 'none';
-        }
-
-        async function performSearch() {
-            const query = document.getElementById('searchInput').value.trim();
-            if (!query) {
-                showToast('请输入搜索关键词');
-                return;
-            }
-
-            currentQuery = query;
-            showLoading();
+            elements.loading.style.display = 'block';
+            elements.searchResults.classList.remove('show');
+            elements.tagList.classList.remove('show');
+            elements.backToSearch.classList.remove('show');
 
             try {
-                // 处理搜索查询
-                let searchQuery = query;
-                let targetRepo = '';
-                if (query.includes('/')) {
-                    const [namespace, repo] = query.split('/');
-                    searchQuery = namespace; // 只使用斜杠前面的用户空间
-                    targetRepo = repo.toLowerCase(); // 保存目标仓库名用于排序
-                }
-
-                const response = await fetch(`/search?q=${encodeURIComponent(searchQuery)}&page=${currentPage}&page_size=25`);
+                const response = await fetch(`/api/search?q=${encodeURIComponent(term)}&page=${page}`);
                 const data = await response.json();
 
-                if (!response.ok) {
-                    throw new Error(data.error || '搜索请求失败');
+                if (data.success) {
+                    searchResults = data.results;
+                    displaySearchResults(data.results, data.total, page);
+                } else {
+                    showToast('搜索失败：' + (data.message || '未知错误'), 'error');
                 }
-                
-                // 更新总页数和分页状态
-                totalPages = Math.ceil(data.count / 25);
-                updatePagination();
-                
-                // 传入目标仓库名进行排序
-                displayResults(data.results, targetRepo);
             } catch (error) {
                 console.error('搜索错误:', error);
-                showToast(error.message || '搜索失败，请稍后重试');
+                showToast('搜索失败，请检查网络连接', 'error');
             } finally {
-                hideLoading();
+                isLoading = false;
+                elements.loading.style.display = 'none';
             }
         }
 
-        function displayResults(results, targetRepo = '') {
-            const resultsContainer = document.getElementById('searchResults');
-            resultsContainer.innerHTML = '';
-
-            if (!results || results.length === 0) {
-                resultsContainer.innerHTML = '<div class="text-center">未找到相关镜像</div>';
-                return;
-            }
-
-            // 对结果进行排序
-            results.sort((a, b) => {
-                // 如果有目标仓库名，将匹配的排在最前面
-                if (targetRepo) {
-                    const aName = (a.name || a.repo_name || '').toLowerCase();
-                    const bName = (b.name || b.repo_name || '').toLowerCase();
-                    const aMatch = aName === targetRepo || aName.endsWith('/' + targetRepo);
-                    const bMatch = bName === targetRepo || bName.endsWith('/' + targetRepo);
-                    
-                    if (aMatch && !bMatch) return -1;
-                    if (!aMatch && bMatch) return 1;
-                }
-                
-                // 其次按照官方镜像排序
-                if (a.is_official !== b.is_official) {
-                    return b.is_official - a.is_official;
-                }
-                
-                // 最后按照拉取次数排序
-                return b.pull_count - a.pull_count;
-            });
+        // 显示搜索结果
+        function displaySearchResults(results, total, page) {
+            elements.resultsList.innerHTML = '';
+            elements.resultsCount.textContent = `共找到 ${total} 个镜像`;
 
             results.forEach(result => {
-                const card = document.createElement('div');
-                card.className = 'result-card';
-                
-                // 构建显示名称
-                let displayName = '';
-                if (result.is_official) {
-                    // 对于官方镜像，去掉 library/ 前缀
-                    displayName = (result.name || result.repo_name || '').replace('library/', '');
-                } else {
-                    // 对于非官方镜像，显示完整路径
-                    const name = result.name || result.repo_name || '';
-                    displayName = result.namespace ? `${result.namespace}/${name}` : name;
-                }
-
-                const description = result.short_description || '暂无描述';
-                const starCount = result.star_count || 0;
-                const pullCount = result.pull_count || 0;
-                const pullsLastWeek = result.pulls_last_week || 0;
-                const lastUpdated = result.last_updated || '';
-                const organization = result.affiliation || '';
-
-                const badges = [];
-                if (result.is_official) badges.push('<span class="badge badge-official">官方</span>');
-                if (organization) badges.push(`<span class="badge badge-organization">By ${organization}</span>`);
-
-                const stats = [];
-                if (starCount > 0) stats.push(`<span class="meta-item">⭐ ${formatUtils.formatNumber(starCount)}</span>`);
-                if (pullCount > 0) stats.push(`<span class="meta-item">⬇️ ${formatUtils.formatNumber(pullCount)}+</span>`);
-
-                card.innerHTML = `
-                    <div class="result-title">
-                        ${displayName}
-                        ${badges.join(' ')}
-                    </div>
-                    <div class="result-description">${description}</div>
-                    <div class="result-meta">
-                        <div class="meta-stats">
-                            ${stats.join(' ')}
-                            ${lastUpdated ? `<span class="meta-item">更新于 ${formatUtils.formatTimeAgo(lastUpdated)}</span>` : ''}
-                        </div>
-                        ${pullsLastWeek > 0 ? `
-                        <div class="meta-pulls">
-                            <div>本周拉取次数</div>
-                            <div class="pulls-count">${formatUtils.formatNumber(pullsLastWeek)}</div>
-                        </div>
-                        ` : ''}
-                    </div>
-                `;
-
-                card.addEventListener('click', () => {
-                    currentRepo = result;
-                    const namespace = result.namespace || (result.is_official ? 'library' : '');
-                    const name = result.name || result.repo_name || '';
-                    const repoName = name.replace('library/', '');
-                    if (!namespace || !repoName) {
-                        showToast('无效的仓库信息');
-                        return;
-                    }
-                    loadTags(namespace, repoName);
-                });
-
-                resultsContainer.appendChild(card);
+                const resultCard = createResultCard(result);
+                elements.resultsList.appendChild(resultCard);
             });
+
+            // 更新分页按钮
+            elements.prevPage.disabled = page <= 1;
+            elements.nextPage.disabled = results.length < 25;
+
+            elements.searchResults.classList.add('show');
         }
 
-        async function loadTags(namespace, name) {
-            showLoading();
-            try {
-                if (!namespace || !name) {
-                    showToast('命名空间和镜像名称不能为空');
-                    return;
-                }
+        // 创建结果卡片
+        function createResultCard(result) {
+            const card = document.createElement('div');
+            card.className = 'result-card';
+            card.onclick = () => viewImageTags(result.name);
 
-                const response = await fetch(`/tags/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`);
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    throw new Error(errorText || '获取标签信息失败');
-                }
+            const badges = [];
+            if (result.is_official) badges.push('<span class="badge badge-official">官方</span>');
+            if (result.is_automated) badges.push('<span class="badge badge-automated">自动构建</span>');
 
-                const data = await response.json();
-                displayTags(data);
-                showTagList();
-            } catch (error) {
-                console.error('加载标签错误:', error);
-                showToast(error.message || '获取标签信息失败，请稍后重试');
-            } finally {
-                hideLoading();
-            }
-        }
-
-        function displayTags(tags) {
-            const tagList = document.getElementById('tagList');
-            const namespace = currentRepo.namespace || (currentRepo.is_official ? 'library' : '');
-            const name = currentRepo.name || currentRepo.repo_name || '';
-            // 移除可能重复的 library/ 前缀
-            const cleanName = name.replace(/^library\//, '');
-            const fullRepoName = currentRepo.is_official ? cleanName : `${namespace}/${cleanName}`;
-            
-            let header = `
-                <div class="tag-header">
-                    <div class="tag-info">
-                        <div class="tag-title">
-                            ${fullRepoName}
-                            ${currentRepo.is_official ? '<span class="badge badge-official">官方</span>' : ''}
-                            ${currentRepo.affiliation ? `<span class="badge badge-organization">By ${currentRepo.affiliation}</span>` : ''}
+            card.innerHTML = `
+                <div class="result-title">
+                    🐳 ${result.name}
+                    ${badges.join('')}
+                </div>
+                <div class="result-description">
+                    ${result.description || '暂无描述'}
+                </div>
+                <div class="result-meta">
+                    <div class="meta-stats">
+                        <div class="meta-item">
+                            <span>📈</span>
+                            ${formatUtils.formatNumber(result.star_count)} Stars
                         </div>
-                        <div class="tag-description">${currentRepo.short_description || '暂无描述'}</div>
-                        <div class="tag-meta">
-                            ${currentRepo.star_count > 0 ? `<span class="meta-item">⭐ ${formatUtils.formatNumber(currentRepo.star_count)}</span>` : ''}
-                            ${currentRepo.pull_count > 0 ? `<span class="meta-item">⬇️ ${formatUtils.formatNumber(currentRepo.pull_count)}+</span>` : ''}
-                            ${currentRepo.last_updated ? `<span class="meta-item">更新于 ${formatUtils.formatTimeAgo(currentRepo.last_updated)}</span>` : ''}
-                        </div>
-                        <div class="tag-pull-command">
-                            docker pull ${fullRepoName}
-                            <button class="copy-button" onclick="copyToClipboard('docker pull ${fullRepoName}')">复制</button>
+                        <div class="meta-item">
+                            <span>📥</span>
+                            ${formatUtils.formatNumber(result.pull_count)} Pulls
                         </div>
                     </div>
                 </div>
-                <div class="tag-search-container">
-                    <input type="text" class="tag-search-input" placeholder="输入关键词搜索标签，支持模糊匹配..." oninput="filterTags(this.value)">
-                    <button class="tag-search-clear" onclick="clearTagSearch()">×</button>
-                </div>
-                <div id="tagsContainer"></div>
             `;
 
-            tagList.innerHTML = header;
+            return card;
+        }
+
+        // 查看镜像标签
+        async function viewImageTags(imageName) {
+            if (isLoading) return;
+
+            isLoading = true;
+            elements.loading.style.display = 'block';
+            elements.searchResults.classList.remove('show');
+
+            try {
+                const response = await fetch(`/api/tags?image=${encodeURIComponent(imageName)}`);
+                const data = await response.json();
+
+                if (data.success) {
+                    allTags = data.tags;
+                    displayImageTags(imageName, data.tags);
+                    elements.backToSearch.classList.add('show');
+                } else {
+                    showToast('获取标签失败：' + (data.message || '未知错误'), 'error');
+                }
+            } catch (error) {
+                console.error('获取标签错误:', error);
+                showToast('获取标签失败，请检查网络连接', 'error');
+            } finally {
+                isLoading = false;
+                elements.loading.style.display = 'none';
+            }
+        }
+
+        // 显示镜像标签
+        function displayImageTags(imageName, tags) {
+            const fullDomain = window.location.host;
             
-            // 存储所有标签数据供搜索使用
-            window.allTags = tags;
-            // 初始显示所有标签
-            renderFilteredTags(tags);
+            elements.tagInfo.innerHTML = `
+                <div class="tag-title">
+                    🐳 ${imageName}
+                </div>
+                <div class="tag-description">
+                    共 ${tags.length} 个标签版本
+                </div>
+                <div class="tag-pull-command">
+                    docker pull ${fullDomain}/${imageName}
+                    <button class="copy-button" onclick="copyCommand('docker pull ${fullDomain}/${imageName}')">
+                        复制
+                    </button>
+                </div>
+            `;
+
+            displayFilteredTags(tags);
+            elements.tagList.classList.add('show');
         }
 
-        function renderFilteredTags(filteredTags) {
-            const tagsContainer = document.getElementById('tagsContainer');
-            const namespace = currentRepo.namespace || (currentRepo.is_official ? 'library' : '');
-            const name = currentRepo.name || currentRepo.repo_name || '';
-            const cleanName = name.replace(/^library\//, '');
-            const fullRepoName = currentRepo.is_official ? cleanName : `${namespace}/${cleanName}`;
+        // 显示过滤后的标签
+        function displayFilteredTags(tags) {
+            elements.tagItems.innerHTML = '';
 
-            let tagsHtml = filteredTags.map(tag => {
-                const vulnIndicators = Object.entries(tag.vulnerabilities || {})
-                    .map(([level, count]) => count > 0 ? `<span class="vulnerability-dot vulnerability-${level.toLowerCase()}" title="${level}: ${count}"></span>` : '')
-                    .join('');
-
-                const images = tag.images || [];
-                const architectures = images.map(img => {
-                    const arch = `${img.os}/${img.architecture}${img.variant ? '/' + img.variant : ''}`;
-                    const size = formatUtils.formatSize(img.size);
-                    return `<div class="arch-item" title="大小: ${size}">${arch}</div>`;
-                }).join('');
-
-                return `
-                    <div class="tag-item">
-                        <div class="tag-name">
-                            ${tag.name}
-                            ${vulnIndicators ? `<div class="vulnerability-indicator">${vulnIndicators}</div>` : ''}
-                        </div>
-                        <div class="tag-meta">
-                            <span>最后更新: ${formatUtils.formatTimeAgo(tag.last_updated)}</span>
-                            ${tag.last_pusher ? `<span>由 ${tag.last_pusher} 推送</span>` : ''}
-                            ${tag.full_size ? `<span>大小: ${formatUtils.formatSize(tag.full_size)}</span>` : ''}
-                        </div>
-                        <div class="tag-pull-command">
-                            docker pull ${fullRepoName}:${tag.name}
-                            <button class="copy-button" onclick="copyToClipboard('docker pull ${fullRepoName}:${tag.name}')">复制</button>
-                        </div>
-                        ${architectures ? `<div class="tag-architectures">${architectures}</div>` : ''}
-                    </div>
-                `;
-            }).join('');
-
-            if (filteredTags.length === 0) {
-                tagsHtml = '<div class="text-center" style="padding: 20px;">未找到匹配的标签</div>';
-            }
-
-            tagsContainer.innerHTML = tagsHtml;
-        }
-
-        function filterTags(searchText) {
-            if (!window.allTags) return;
-
-            const searchLower = searchText.toLowerCase();
-            let filteredTags;
-
-            if (!searchText) {
-                filteredTags = window.allTags;
-            } else {
-                // 对标签进行评分和排序
-                const scoredTags = window.allTags.map(tag => {
-                    const name = tag.name.toLowerCase();
-                    let score = 0;
-
-                    // 完全匹配
-                    if (name === searchLower) {
-                        score += 100;
-                    }
-                    // 前缀匹配
-                    else if (name.startsWith(searchLower)) {
-                        score += 50;
-                    }
-                    // 包含匹配
-                    else if (name.includes(searchLower)) {
-                        score += 30;
-                    }
-                    // 部分匹配（按单词）
-                    else if (searchLower.split(/\s+/).some(word => name.includes(word))) {
-                        score += 10;
-                    }
-
-                    return { tag, score };
-                }).filter(item => item.score > 0);
-
-                // 按分数排序
-                scoredTags.sort((a, b) => b.score - a.score);
-                filteredTags = scoredTags.map(item => item.tag);
-            }
-
-            renderFilteredTags(filteredTags);
-        }
-
-        function clearTagSearch() {
-            const searchInput = document.querySelector('.tag-search-input');
-            if (searchInput) {
-                searchInput.value = '';
-                filterTags('');
-            }
-        }
-
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text).then(() => {
-                showToast('已复制到剪贴板');
-            }).catch(() => {
-                showToast('复制失败');
+            tags.forEach(tag => {
+                const tagItem = createTagItem(tag);
+                elements.tagItems.appendChild(tagItem);
             });
         }
 
-        // 初始加载
-        const urlParams = new URLSearchParams(window.location.search);
-        const initialQuery = urlParams.get('q');
-        if (initialQuery) {
-            document.getElementById('searchInput').value = initialQuery;
-            performSearch();
+        // 创建标签项
+        function createTagItem(tag) {
+            const item = document.createElement('div');
+            item.className = 'tag-item';
+
+            const architectures = tag.images?.map(img => img.architecture).join(', ') || '未知';
+            const size = tag.images?.[0]?.size ? formatUtils.formatSize(tag.images[0].size) : '未知';
+            const lastUpdated = tag.last_updated ? formatUtils.formatDate(tag.last_updated) : '未知';
+
+            item.innerHTML = `
+                <div class="tag-name">${tag.name}</div>
+                <div class="tag-meta">
+                    📅 更新时间: ${lastUpdated} | 📦 大小: ${size}
+                </div>
+                <div class="tag-architectures">
+                    ${architectures.split(', ').map(arch => 
+                        `<span class="arch-item">${arch}</span>`
+                    ).join('')}
+                </div>
+            `;
+
+            return item;
         }
+
+        // 复制命令
+        function copyCommand(command) {
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(command).then(() => {
+                    showToast('命令已复制到剪贴板');
+                });
+            } else {
+                // 降级方案
+                const textarea = document.createElement('textarea');
+                textarea.value = command;
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textarea);
+                showToast('命令已复制到剪贴板');
+            }
+        }
+
+        // 标签搜索过滤
+        function filterTags(searchTerm) {
+            const filtered = allTags.filter(tag => 
+                tag.name.toLowerCase().includes(searchTerm.toLowerCase())
+            );
+            displayFilteredTags(filtered);
+        }
+
+        // 事件监听
+        elements.searchButton.addEventListener('click', () => {
+            const term = elements.searchInput.value.trim();
+            if (term) {
+                searchImages(term);
+            }
+        });
+
+        elements.searchInput.addEventListener('keyup', (event) => {
+            if (event.key === 'Enter') {
+                const term = elements.searchInput.value.trim();
+                if (term) {
+                    searchImages(term);
+                }
+            }
+        });
+
+        elements.prevPage.addEventListener('click', () => {
+            if (currentPage > 1) {
+                searchImages(currentSearchTerm, currentPage - 1);
+            }
+        });
+
+        elements.nextPage.addEventListener('click', () => {
+            searchImages(currentSearchTerm, currentPage + 1);
+        });
+
+        elements.tagSearchInput.addEventListener('input', (event) => {
+            filterTags(event.target.value);
+        });
+
+        elements.backToSearch.addEventListener('click', () => {
+            elements.tagList.classList.remove('show');
+            elements.backToSearch.classList.remove('show');
+            elements.searchResults.classList.add('show');
+        });
+
+        // 页面初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            // 隐藏初始状态的元素
+            elements.searchResults.classList.remove('show');
+            elements.tagList.classList.remove('show');
+            elements.backToSearch.classList.remove('show');
+        });
     </script>
 </body>
 </html> 
\ No newline at end of file
diff --git a/src/public/skopeo.html b/src/public/skopeo.html
index df5e135..39fbbba 100644
--- a/src/public/skopeo.html
+++ b/src/public/skopeo.html
@@ -8,498 +8,1054 @@
     <meta name="color-scheme" content="dark light">
     <title>Docker镜像批量下载</title>
     <link rel="icon" href="./favicon.ico">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans">
     <style>
+        /* 现代化设计系统 */
         :root {
-            --color: #fafafa;
-            --fontcolor: #333;
-            --inputcolor: #f5f5f5;
-            --inputcolor-font: #333;
-            --card-bg: #f8f9fa;
-            --border-color: #dee2e6;
+            --background: #ffffff;
+            --foreground: #0f172a;
+            --card: #ffffff;
+            --card-foreground: #0f172a;
+            --primary: #2563eb;
+            --primary-foreground: #f8fafc;
+            --secondary: #f1f5f9;
+            --secondary-foreground: #0f172a;
+            --muted: #f1f5f9;
+            --muted-foreground: #64748b;
+            --accent: #f1f5f9;
+            --accent-foreground: #0f172a;
+            --border: #e2e8f0;
+            --input: #ffffff;
+            --ring: #2563eb;
+            --radius: 0.5rem;
+            --success: #059669;
+            --warning: #d97706;
+            --error: #dc2626;
+        }
+
+        .dark {
+            --background: #0f172a;
+            --foreground: #f8fafc;
+            --card: #1e293b;
+            --card-foreground: #f8fafc;
+            --primary: #3b82f6;
+            --primary-foreground: #f8fafc;
+            --secondary: #1e293b;
+            --secondary-foreground: #f8fafc;
+            --muted: #1e293b;
+            --muted-foreground: #94a3b8;
+            --accent: #1e293b;
+            --accent-foreground: #f8fafc;
+            --border: #334155;
+            --input: #1e293b;
+            --ring: #3b82f6;
         }
 
         @media (prefers-color-scheme: dark) {
             :root {
-                --color: #53535338;
-                --fontcolor: #b8b8b8;
-                --inputcolor: #012333;
-                --inputcolor-font: #969696d8;
-                --card-bg: #012333;
-                --border-color: #2d3338;
+                --background: #0f172a;
+                --foreground: #f8fafc;
+                --card: #1e293b;
+                --card-foreground: #f8fafc;
+                --primary: #3b82f6;
+                --primary-foreground: #f8fafc;
+                --secondary: #1e293b;
+                --secondary-foreground: #f8fafc;
+                --muted: #1e293b;
+                --muted-foreground: #94a3b8;
+                --accent: #1e293b;
+                --accent-foreground: #f8fafc;
+                --border: #334155;
+                --input: #1e293b;
+                --ring: #3b82f6;
             }
         }
 
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
         body {
-            background-color: var(--color);
-            color: var(--fontcolor);
-            font-family: 'Misans', Arial, sans-serif;
-            padding: 30px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            background-color: var(--background);
+            color: var(--foreground);
+            line-height: 1.5;
             min-height: 100vh;
-            margin: 0;
+            display: flex;
+            flex-direction: column;
+            transition: background-color 0.3s, color 0.3s;
         }
 
-        *::-webkit-scrollbar {
-            height: 10px;
-            margin-top: 0px;
+        /* 现代化导航栏 */
+        .navbar {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            width: 100%;
+            border-bottom: 1px solid var(--border);
+            background-color: var(--background);
+            backdrop-filter: blur(8px);
+            background-color: rgba(255, 255, 255, 0.95);
         }
 
-        *::-webkit-scrollbar-track {
-            background-color: black;
+        .dark .navbar {
+            background-color: rgba(15, 23, 42, 0.95);
         }
 
-        *::-webkit-scrollbar-thumb {
-            background: #39c5bb;
-            border-radius: 10px;
+        .navbar-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 4rem;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            color: var(--foreground);
+            font-weight: 600;
+            font-size: 1.125rem;
+        }
+
+        .logo-icon {
+            width: 2rem;
+            height: 2rem;
+            border-radius: 0.5rem;
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+
+        .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .nav-link {
+            padding: 0.5rem 1rem;
+            border-radius: var(--radius);
+            text-decoration: none;
+            color: var(--muted-foreground);
+            transition: all 0.2s;
+            font-weight: 500;
+        }
+
+        .nav-link:hover,
+        .nav-link.active {
+            color: var(--foreground);
+            background-color: var(--muted);
+        }
+
+        .theme-toggle {
+            padding: 0.5rem;
+            border: none;
+            border-radius: var(--radius);
+            background-color: transparent;
+            color: var(--muted-foreground);
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .theme-toggle:hover {
+            background-color: var(--muted);
+            color: var(--foreground);
+        }
+
+        /* 主要内容区域 */
+        .main {
+            flex: 1;
+            padding: 2rem 1rem;
         }
 
         .container {
-            max-width: 80%;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .hero {
             text-align: center;
-            min-height: 65%;
-            line-height: 1.25;
-            margin-top: 60px;
+            margin-bottom: 3rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out forwards;
         }
 
-        h1 {
-            color: var(--fontcolor);
-            font-weight: bold;
-            margin-bottom: 30px;
+        .hero-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, var(--primary), #3b82f6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .rounded-button {
-            border-radius: 6px;
-            transition: background-color 0.3s, transform 0.2s;
-            padding: 10px 30px;
-            background-color: #555c5c;
-            color: rgb(255, 255, 255);
-            border: none;
-            margin-bottom: 3%;
+        .hero-subtitle {
+            font-size: 1.125rem;
+            color: var(--muted-foreground);
+            max-width: 600px;
+            margin: 0 auto;
         }
 
-        .rounded-button:hover {
-            background-color: #39c5bcda;
-            transform: scale(1.05);
+        /* 现代化卡片设计 */
+        .card {
+            background-color: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.6s ease-out 0.2s forwards;
         }
 
-        footer {
-            position: fixed;
-            bottom: 20px;
-            left: 0;
-            right: 0;
-            text-align: center;
-            padding: 10px;
-            line-height: 1.25;
-            margin-top: 20px;
+        .card-header {
+            margin-bottom: 1.5rem;
         }
 
-        pre {
-            background: #012333;
-            color: #39c5bc;
-            padding: 15px 20px 15px 20px;
-            margin: 0px 0;
-            border-radius: 0.5rem;
-            overflow-x: auto;
-            position: relative;
-        }
-
-        pre::before {
-            content: " ";
-            display: block;
-            position: absolute;
-            top: 6px;
-            left: 6px;
-            width: 10px;
-            height: 10px;
-            background: #bd3c35;
-            border-radius: 50%;
-            box-shadow: 20px 0 0 #d69f27, 40px 0 0 #39c5bb;
-        }
-
-        code {
-            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-            font-size: 0.9em;
-            margin-bottom: 0px;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                max-width: 100%;
-                font-size: 0.8rem;
-            }
-        }
-
-        @media (min-width: 768px) {
-            .container {
-                max-width: 65%;
-                font-size: 1rem;
-            }
-
-            h1 {
-                margin-bottom: 30px;
-            }
-        }
-
-        .form-group {
-            margin-bottom: 3%;
-        }
-
-        .form-control {
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
-        }
-
-        .form-control:focus {
-            background-color: var(--inputcolor);
-            color: var(--inputcolor-font);
-        }
-
-        #toast {
-            position: fixed;
-            top: 10%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: #39c5bcde;
-            color: white;
-            padding: 15px 20px;
-            border-radius: 10px;
-            font-size: 90%;
-            z-index: 1000;
-        }
-
-        .back-button {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            padding: 2px 8px;
-            background-color: #f5f5f5;
-            border: 0px solid #fafafa;
-            color: #333;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-            text-decoration: none;
-        }
-
-        .back-button:hover {
-            background-color: #39c5bc;
-            color: white;
-            transform: scale(1.05);
-            text-decoration: none;
-        }
-
-        .progress-container {
-            margin-top: 20px;
-            display: none;
-        }
-
-        .total-progress-text {
-            font-size: 16px;
-            font-weight: bold;
-            margin-bottom: 20px;
-            padding: 10px;
-            background-color: var(--inputcolor);
-            border-radius: 10px;
-            display: inline-block;
-        }
-
-        .image-progress {
-            margin-top: 15px;
-            margin-bottom: 5px;
-        }
-
-        .image-progress-item {
+        .card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
             display: flex;
             align-items: center;
-            margin-bottom: 10px;
+            gap: 0.5rem;
         }
 
-        .image-progress-name {
-            flex: 0 0 200px;
-            text-align: left;
+        .card-description {
+            color: var(--muted-foreground);
+            font-size: 0.875rem;
+        }
+
+        /* 现代化表单设计 */
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: var(--foreground);
+        }
+
+        .input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--input);
+            color: var(--foreground);
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+
+        .input:focus {
+            outline: none;
+            border-color: var(--ring);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+        }
+
+        .input::placeholder {
+            color: var(--muted-foreground);
+        }
+
+        .textarea {
+            min-height: 120px;
+            resize: vertical;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.875rem;
+        }
+
+        .input-group {
+            display: flex;
+            gap: 0.75rem;
+            align-items: flex-end;
+        }
+
+        .select {
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--input);
+            color: var(--foreground);
+            font-size: 1rem;
+            transition: all 0.2s;
+            min-width: 120px;
+        }
+
+        .select:focus {
+            outline: none;
+            border-color: var(--ring);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+        }
+
+        .button {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: var(--radius);
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .button-primary {
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+        }
+
+        .button-primary:hover {
+            background-color: #1d4ed8;
+            transform: translateY(-1px);
+        }
+
+        .button-secondary {
+            background-color: var(--secondary);
+            color: var(--secondary-foreground);
+        }
+
+        .button-secondary:hover {
+            background-color: var(--muted);
+        }
+
+        .button-success {
+            background-color: var(--success);
+            color: white;
+        }
+
+        .button-success:hover {
+            background-color: #047857;
+        }
+
+        .button-warning {
+            background-color: var(--warning);
+            color: white;
+        }
+
+        .button-warning:hover {
+            background-color: #b45309;
+        }
+
+        .button-error {
+            background-color: var(--error);
+            color: white;
+        }
+
+        .button-error:hover {
+            background-color: #b91c1c;
+        }
+
+        .button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        /* 架构选择区域 */
+        .arch-buttons {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            margin-top: 0.5rem;
+        }
+
+        .arch-button {
+            padding: 0.5rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--card);
+            color: var(--foreground);
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.875rem;
+        }
+
+        .arch-button:hover,
+        .arch-button.selected {
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+            border-color: var(--primary);
+        }
+
+        /* 进度显示 */
+        .progress-container {
+            display: none;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.3s;
+        }
+
+        .progress-container.show {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .progress-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .progress-title {
+            font-weight: 600;
+            color: var(--foreground);
+        }
+
+        .progress-stats {
+            font-size: 0.875rem;
+            color: var(--muted-foreground);
+        }
+
+        .progress-bar-container {
+            background-color: var(--muted);
+            border-radius: var(--radius);
+            height: 8px;
             overflow: hidden;
-            text-overflow: ellipsis;
+            margin-bottom: 1rem;
+        }
+
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary), #3b82f6);
+            border-radius: var(--radius);
+            transition: width 0.3s ease;
+        }
+
+        /* 任务列表 */
+        .task-list {
+            max-height: 400px;
+            overflow-y: auto;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            background-color: var(--card);
+        }
+
+        .task-item {
+            padding: 1rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: background-color 0.2s;
+        }
+
+        .task-item:last-child {
+            border-bottom: none;
+        }
+
+        .task-item:hover {
+            background-color: var(--muted);
+        }
+
+        .task-info {
+            flex: 1;
+        }
+
+        .task-name {
+            font-weight: 500;
+            margin-bottom: 0.25rem;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.875rem;
+        }
+
+        .task-status {
+            font-size: 0.75rem;
+            color: var(--muted-foreground);
+        }
+
+        .task-badge {
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 500;
             white-space: nowrap;
         }
 
-        .image-progress-bar-container {
-            flex-grow: 1;
-            height: 15px;
-            background-color: #ddd;
-            border-radius: 5px;
-            margin: 0 10px;
+        .task-badge.pending {
+            background-color: var(--muted);
+            color: var(--muted-foreground);
         }
 
-        .image-progress-bar {
-            height: 100%;
-            background-color: #39c5bb;
-            border-radius: 5px;
-            width: 0%;
-        }
-
-        .image-progress-text {
-            flex: 0 0 50px;
-            text-align: right;
-        }
-        
-        .download-button {
-            display: none;
-            margin-top: 20px;
-            padding: 10px 20px;
-            background-color: #39c5bb;
+        .task-badge.running {
+            background-color: var(--warning);
             color: white;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 16px;
+        }
+
+        .task-badge.completed {
+            background-color: var(--success);
+            color: white;
+        }
+
+        .task-badge.failed {
+            background-color: var(--error);
+            color: white;
+        }
+
+        /* Toast 通知 */
+        .toast {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            background-color: var(--primary);
+            color: var(--primary-foreground);
+            padding: 1rem 1.5rem;
+            border-radius: var(--radius);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            z-index: 1001;
+            display: none;
+            opacity: 0;
+            transform: translateX(100%);
             transition: all 0.3s ease;
         }
-        
-        .download-button:hover {
-            background-color: #2ea89e;
-            transform: scale(1.05);
+
+        .toast.show {
+            display: block;
+            opacity: 1;
+            transform: translateX(0);
         }
 
-        textarea.form-control {
-            min-height: 150px;
-            resize: vertical;
+        .toast.success {
+            background-color: var(--success);
         }
 
-        .info-text {
-            font-size: 0.9rem;
-            color: var(--fontcolor);
-            opacity: 0.8;
-            margin-bottom: 15px;
-            text-align: left;
+        .toast.error {
+            background-color: var(--error);
+        }
+
+        .toast.warning {
+            background-color: var(--warning);
+        }
+
+        /* 页脚 */
+        .footer {
+            padding: 2rem 1rem;
+            text-align: center;
+            border-top: 1px solid var(--border);
+        }
+
+        .github-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--muted-foreground);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        .github-link:hover {
+            color: var(--foreground);
+        }
+
+        /* 动画 */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2rem;
+            }
+            
+            .nav-links {
+                display: none;
+            }
+            
+            .input-group {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            
+            .arch-buttons {
+                justify-content: center;
+            }
+            
+            .task-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
+            }
         }
     </style>
 </head>
-
 <body>
-    <a href="/" class="back-button">返回</a>
-    <div class="container">
-        <h1>Docker离线镜像包下载</h1>
-        
-        <div class="form-group">
-            <div class="info-text">每行输入一个镜像，跟docker pull的格式一样，多个镜像会自动打包到一起为zip包，单个镜像为tar包。导入镜像后需要手动为镜像添加名称和标签，例如：docker tag 1856948a5aa7 镜像名称:标签</div>
-            <textarea class="form-control" id="imageInput" placeholder="例如：&#10;nginx&#10;stilleshan/frpc&#10;stilleshan/frpc:0.62.1"></textarea>
-        </div>
-        
-        <div class="form-group">
-            <div class="info-text">镜像架构，默认为 amd64</div>
-            <input type="text" class="form-control" id="platformInput" placeholder="输入架构，例如：amd64, arm64等" value="amd64">
-        </div>
-        
-        <button class="btn rounded-button" id="downloadButton">开始下载</button>
-        
-        <div class="progress-container" id="progressContainer">
-            <div class="total-progress-text" id="totalProgressText">0/0 - 0%</div>
+    <!-- 现代化导航栏 -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <a href="/" class="logo">
+                <div class="logo-icon">
+                    ⚡
+                </div>
+                加速服务
+            </a>
             
-            <div class="image-progress" id="imageProgressList">
-                <!-- Image progress items will be added here -->
+            <div class="nav-links">
+                <a href="/" class="nav-link">🚀 GitHub加速</a>
+                <a href="/skopeo.html" class="nav-link active">🐳 镜像下载</a>
+                <a href="/search.html" class="nav-link">🔍 镜像搜索</a>
+                <a href="https://gitee.com/if-the-wind/github-hosts/raw/main/hosts" target="_blank" class="nav-link">📄 Hosts</a>
+                
+                <button class="theme-toggle" id="themeToggle">
+                    🌙
+                </button>
             </div>
-            
-            <button class="download-button" id="getFileButton">下载文件</button>
         </div>
-    </div>
-    
-    <div id="toast" style="display:none;"></div>
+    </nav>
+
+    <!-- 主要内容 -->
+    <main class="main">
+        <div class="container">
+            <!-- Hero 区域 -->
+            <div class="hero">
+                <h1 class="hero-title">Docker 镜像批量下载</h1>
+                <p class="hero-subtitle">
+                    批量下载和打包Docker镜像，支持多架构和自定义标签选择
+                </p>
+            </div>
+
+            <!-- 下载配置卡片 -->
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        📦 下载配置
+                    </h2>
+                    <p class="card-description">
+                        设置要下载的镜像列表、架构和输出格式
+                    </p>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">镜像列表</label>
+                    <textarea 
+                        class="input textarea" 
+                        id="imageListInput" 
+                        placeholder="每行一个镜像，例如：&#10;nginx:latest&#10;mysql:8.0&#10;redis:alpine&#10;ubuntu:20.04"
+                    ></textarea>
+                    <small style="color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.5rem; display: block;">
+                        每行输入一个镜像名称，支持标签。例如：nginx:latest, mysql:8.0, redis:alpine
+                    </small>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">架构选择</label>
+                    <div class="input-group">
+                        <input 
+                            type="text" 
+                            class="input" 
+                            id="architectureInput" 
+                            placeholder="输入架构，例如：linux/amd64"
+                            value="linux/amd64"
+                        >
+                    </div>
+                    <div class="arch-buttons">
+                        <button class="arch-button" data-arch="linux/amd64">linux/amd64</button>
+                        <button class="arch-button" data-arch="linux/arm64">linux/arm64</button>
+                        <button class="arch-button" data-arch="linux/arm/v7">linux/arm/v7</button>
+                        <button class="arch-button" data-arch="linux/386">linux/386</button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">输出格式</label>
+                    <select class="select" id="formatSelect">
+                        <option value="docker-archive">Docker Archive (.tar)</option>
+                        <option value="oci-archive">OCI Archive (.tar)</option>
+                        <option value="dir">目录格式</option>
+                    </select>
+                </div>
+
+                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+                    <button class="button button-primary" id="startDownload">
+                        🚀 开始下载
+                    </button>
+                    <button class="button button-warning" id="pauseDownload" disabled>
+                        ⏸️ 暂停下载
+                    </button>
+                    <button class="button button-error" id="stopDownload" disabled>
+                        ⏹️ 停止下载
+                    </button>
+                </div>
+            </div>
+
+            <!-- 进度显示卡片 -->
+            <div class="card progress-container" id="progressContainer">
+                <div class="card-header">
+                    <h3 class="card-title">
+                        📈 下载进度
+                    </h3>
+                </div>
+
+                <div class="progress-header">
+                    <div class="progress-title" id="progressTitle">准备中...</div>
+                    <div class="progress-stats" id="progressStats">0/0</div>
+                </div>
+
+                <div class="progress-bar-container">
+                    <div class="progress-bar" id="progressBar" style="width: 0%"></div>
+                </div>
+
+                <div class="task-list" id="taskList">
+                    <!-- 任务项将动态插入 -->
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast 通知 -->
+    <div id="toast" class="toast"></div>
+
+    <!-- 页脚 -->
+    <footer class="footer">
+        <a href="https://github.com/sky22333/hubproxy" target="_blank" class="github-link">
+            <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+            </svg>
+            GitHub
+        </a>
+    </footer>
 
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const imageInput = document.getElementById('imageInput');
-            const platformInput = document.getElementById('platformInput');
-            const downloadButton = document.getElementById('downloadButton');
-            const progressContainer = document.getElementById('progressContainer');
-            const totalProgressText = document.getElementById('totalProgressText');
-            const imageProgressList = document.getElementById('imageProgressList');
-            const getFileButton = document.getElementById('getFileButton');
-            
-            let images = [];
-            let currentTaskId = null;
-            let websocket = null;
-            
-            function parseImageList() {
-                const text = imageInput.value.trim();
-                if (!text) {
-                    return [];
-                }
+        // 主题管理
+        const themeToggle = document.getElementById('themeToggle');
+        const html = document.documentElement;
+        
+        // 初始化主题
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+            html.classList.add('dark');
+            themeToggle.textContent = '☀️';
+        }
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            const isDark = html.classList.contains('dark');
+            themeToggle.textContent = isDark ? '☀️' : '🌙';
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+
+        // 全局变量
+        let downloadTasks = [];
+        let isDownloading = false;
+        let currentTaskIndex = 0;
+        let downloadInterval = null;
+
+        // DOM 元素
+        const elements = {
+            imageListInput: document.getElementById('imageListInput'),
+            architectureInput: document.getElementById('architectureInput'),
+            formatSelect: document.getElementById('formatSelect'),
+            startDownload: document.getElementById('startDownload'),
+            pauseDownload: document.getElementById('pauseDownload'),
+            stopDownload: document.getElementById('stopDownload'),
+            progressContainer: document.getElementById('progressContainer'),
+            progressTitle: document.getElementById('progressTitle'),
+            progressStats: document.getElementById('progressStats'),
+            progressBar: document.getElementById('progressBar'),
+            taskList: document.getElementById('taskList'),
+            toast: document.getElementById('toast')
+        };
+
+        // Toast 通知
+        function showToast(message, type = 'info') {
+            const toast = elements.toast;
+            toast.textContent = message;
+            toast.className = `toast show ${type}`;
+
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+
+        // 架构按钮选择
+        document.querySelectorAll('.arch-button').forEach(button => {
+            button.addEventListener('click', () => {
+                // 移除其他按钮的选中状态
+                document.querySelectorAll('.arch-button').forEach(btn => {
+                    btn.classList.remove('selected');
+                });
                 
-                return text.split('\n')
-                    .map(line => line.trim())
-                    .filter(line => line.length > 0);
+                // 选中当前按钮
+                button.classList.add('selected');
+                elements.architectureInput.value = button.dataset.arch;
+            });
+        });
+
+        // 默认选中第一个架构
+        document.querySelector('.arch-button[data-arch="linux/amd64"]').classList.add('selected');
+
+        // 解析镜像列表
+        function parseImageList(input) {
+            return input.split('\n')
+                .map(line => line.trim())
+                .filter(line => line && !line.startsWith('#'))
+                .map(line => {
+                    // 基本格式验证
+                    if (!line.includes('/') && !line.includes(':')) {
+                        return line + ':latest'; // 默认添加 latest 标签
+                    }
+                    return line;
+                });
+        }
+
+        // 创建任务项
+        function createTaskItem(imageName, index) {
+            const item = document.createElement('div');
+            item.className = 'task-item';
+            item.id = `task-${index}`;
+            
+            item.innerHTML = `
+                <div class="task-info">
+                    <div class="task-name">${imageName}</div>
+                    <div class="task-status">等待开始...</div>
+                </div>
+                <div class="task-badge pending">等待中</div>
+            `;
+            
+            return item;
+        }
+
+        // 更新任务状态
+        function updateTaskStatus(index, status, message = '') {
+            const taskItem = document.getElementById(`task-${index}`);
+            if (!taskItem) return;
+
+            const statusElement = taskItem.querySelector('.task-status');
+            const badgeElement = taskItem.querySelector('.task-badge');
+
+            statusElement.textContent = message || getStatusMessage(status);
+            
+            badgeElement.className = `task-badge ${status}`;
+            badgeElement.textContent = getStatusText(status);
+        }
+
+        function getStatusMessage(status) {
+            switch (status) {
+                case 'pending': return '等待开始...';
+                case 'running': return '正在下载...';
+                case 'completed': return '下载完成';
+                case 'failed': return '下载失败';
+                default: return '';
             }
+        }
+
+        function getStatusText(status) {
+            switch (status) {
+                case 'pending': return '等待中';
+                case 'running': return '进行中';
+                case 'completed': return '已完成';
+                case 'failed': return '失败';
+                default: return '';
+            }
+        }
+
+        // 更新进度
+        function updateProgress() {
+            const total = downloadTasks.length;
+            const completed = downloadTasks.filter(task => 
+                task.status === 'completed' || task.status === 'failed'
+            ).length;
             
-            function startDownload() {
-                images = parseImageList();
-                
-                if (images.length === 0) {
-                    showToast('请至少输入一个镜像');
-                    return;
-                }
-                
-                const platform = platformInput.value.trim() || 'amd64';
-                const requestData = {
-                    images: images,
-                    platform: platform
-                };
-                
-                fetch('/api/download', {
+            const percentage = total > 0 ? (completed / total) * 100 : 0;
+            
+            elements.progressStats.textContent = `${completed}/${total}`;
+            elements.progressBar.style.width = `${percentage}%`;
+            
+            if (completed === total && total > 0) {
+                elements.progressTitle.textContent = '下载完成';
+                const successCount = downloadTasks.filter(task => task.status === 'completed').length;
+                showToast(`所有任务已完成！成功：${successCount}，失败：${total - successCount}`, 'success');
+                stopDownload();
+            } else if (isDownloading) {
+                elements.progressTitle.textContent = `正在下载 (${completed + 1}/${total})`;
+            }
+        }
+
+        // 开始下载
+        async function startDownload() {
+            const imageList = parseImageList(elements.imageListInput.value);
+            const architecture = elements.architectureInput.value.trim();
+            const format = elements.formatSelect.value;
+
+            if (imageList.length === 0) {
+                showToast('请输入要下载的镜像列表', 'error');
+                return;
+            }
+
+            if (!architecture) {
+                showToast('请选择架构', 'error');
+                return;
+            }
+
+            // 初始化任务
+            downloadTasks = imageList.map((image, index) => ({
+                id: index,
+                image: image,
+                architecture: architecture,
+                format: format,
+                status: 'pending'
+            }));
+
+            // 清空任务列表并重新创建
+            elements.taskList.innerHTML = '';
+            downloadTasks.forEach((task, index) => {
+                const taskItem = createTaskItem(task.image, index);
+                elements.taskList.appendChild(taskItem);
+            });
+
+            // 显示进度容器
+            elements.progressContainer.classList.add('show');
+            
+            // 更新按钮状态
+            elements.startDownload.disabled = true;
+            elements.pauseDownload.disabled = false;
+            elements.stopDownload.disabled = false;
+
+            isDownloading = true;
+            currentTaskIndex = 0;
+
+            elements.progressTitle.textContent = '开始下载...';
+            showToast('开始批量下载镜像', 'success');
+
+            // 开始处理任务
+            processNextTask();
+        }
+
+        // 处理下一个任务
+        async function processNextTask() {
+            if (!isDownloading || currentTaskIndex >= downloadTasks.length) {
+                return;
+            }
+
+            const task = downloadTasks[currentTaskIndex];
+            
+            // 更新任务状态为运行中
+            task.status = 'running';
+            updateTaskStatus(currentTaskIndex, 'running', '正在下载...');
+            updateProgress();
+
+            try {
+                // 调用后端API开始下载
+                const response = await fetch('/api/skopeo/download', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json'
                     },
-                    body: JSON.stringify(requestData)
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.taskId) {
-                        currentTaskId = data.taskId;
-                        showProgressUI();
-                        connectWebSocket(currentTaskId);
-                        
-                        const totalCount = data.totalCount || images.length;
-                        totalProgressText.textContent = `0/${totalCount} - 0%`;
-                    } else {
-                        showToast('下载任务创建失败');
-                    }
-                })
-                .catch(error => {
-                    showToast('请求失败: ' + error.message);
+                    body: JSON.stringify({
+                        image: task.image,
+                        architecture: task.architecture,
+                        format: task.format
+                    })
                 });
-            }
-            
-            function showProgressUI() {
-                progressContainer.style.display = 'block';
-                downloadButton.style.display = 'none';
-                imageInput.disabled = true;
-                platformInput.disabled = true;
-                
-                const totalCount = images.length;
-                totalProgressText.textContent = `0/${totalCount} - 0%`;
-                
-                imageProgressList.innerHTML = '';
-                images.forEach(image => {
-                    addImageProgressItem(image, 0);
-                });
-            }
-            
-            function addImageProgressItem(image, progress) {
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'image-progress-item';
-                itemDiv.id = `progress-${image.replace(/[\/\.:]/g, '_')}`;
-                
-                const nameDiv = document.createElement('div');
-                nameDiv.className = 'image-progress-name';
-                nameDiv.title = image;
-                nameDiv.textContent = image;
-                
-                const barContainerDiv = document.createElement('div');
-                barContainerDiv.className = 'image-progress-bar-container';
-                
-                const barDiv = document.createElement('div');
-                barDiv.className = 'image-progress-bar';
-                barDiv.style.width = `${progress}%`;
-                
-                const textDiv = document.createElement('div');
-                textDiv.className = 'image-progress-text';
-                textDiv.textContent = `${Math.round(progress)}%`;
-                
-                barContainerDiv.appendChild(barDiv);
-                itemDiv.appendChild(nameDiv);
-                itemDiv.appendChild(barContainerDiv);
-                itemDiv.appendChild(textDiv);
-                
-                imageProgressList.appendChild(itemDiv);
-            }
-            
-            function updateImageProgress(image, progress, status) {
-                const itemId = `progress-${image.replace(/[\/\.:]/g, '_')}`;
-                const item = document.getElementById(itemId);
-                
-                if (item) {
-                    const bar = item.querySelector('.image-progress-bar');
-                    const text = item.querySelector('.image-progress-text');
-                    
-                    bar.style.width = `${progress}%`;
-                    text.textContent = `${Math.round(progress)}%`;
-                    
-                    if (status === 'failed') {
-                        bar.style.backgroundColor = '#bd3c35';
-                        text.textContent = '失败';
-                    } else if (status === 'completed') {
-                        bar.style.backgroundColor = '#4CAF50';
-                        text.textContent = '完成';
-                    }
-                }
-            }
-            
-            function connectWebSocket(taskId) {
-                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-                const wsUrl = `${protocol}//${window.location.host}/ws/${taskId}`;
-                
-                websocket = new WebSocket(wsUrl);
-                
-                websocket.onopen = function() {
-                    console.log('ws');
-                };
-                
-                websocket.onmessage = function(event) {
-                    const data = JSON.parse(event.data);
-                    updateProgress(data);
-                };
-                
-                websocket.onerror = function(error) {
-                    console.error('WebSocket错误:', error);
-                    showToast('WebSocket连接错误');
-                };
-                
-                websocket.onclose = function() {
-                    console.log('WebSocket连接已关闭');
-                };
-            }
-            
-            function updateProgress(data) {
-                const progressPercent = data.totalCount > 0 ? (data.completedCount / data.totalCount) * 100 : 0;
-                totalProgressText.textContent = `${data.completedCount}/${data.totalCount} - ${Math.round(progressPercent)}%`;
 
-                data.images.forEach(imgData => {
-                    updateImageProgress(imgData.image, imgData.progress, imgData.status);
-                });
-                
-                if (data.status === 'completed') {
-                    getFileButton.style.display = 'inline-block';
-                    
-                    if (websocket) {
-                        websocket.close();
-                    }
+                const result = await response.json();
+
+                if (result.success) {
+                    task.status = 'completed';
+                    updateTaskStatus(currentTaskIndex, 'completed', '下载完成');
+                } else {
+                    task.status = 'failed';
+                    updateTaskStatus(currentTaskIndex, 'failed', result.message || '下载失败');
                 }
+            } catch (error) {
+                console.error('下载错误:', error);
+                task.status = 'failed';
+                updateTaskStatus(currentTaskIndex, 'failed', '网络错误');
             }
-            
-            function downloadFile() {
-                if (!currentTaskId) {
-                    showToast('没有可下载的文件');
-                    return;
-                }
-                
-                window.location.href = `/api/files/${currentTaskId}_file`;
+
+            updateProgress();
+            currentTaskIndex++;
+
+            // 继续下一个任务
+            if (isDownloading && currentTaskIndex < downloadTasks.length) {
+                setTimeout(() => processNextTask(), 1000); // 延迟1秒继续下一个
             }
+        }
+
+        // 暂停下载
+        function pauseDownload() {
+            isDownloading = false;
+            elements.startDownload.disabled = false;
+            elements.pauseDownload.disabled = true;
+            elements.progressTitle.textContent = '下载已暂停';
+            showToast('下载已暂停', 'warning');
+        }
+
+        // 停止下载
+        function stopDownload() {
+            isDownloading = false;
+            currentTaskIndex = 0;
             
-            function showToast(message) {
-                const toast = document.getElementById('toast');
-                toast.textContent = message;
-                toast.style.display = 'block';
-                
-                setTimeout(() => {
-                    toast.style.display = 'none';
-                }, 3000);
+            elements.startDownload.disabled = false;
+            elements.pauseDownload.disabled = true;
+            elements.stopDownload.disabled = true;
+            
+            if (downloadTasks.length > 0) {
+                elements.progressTitle.textContent = '下载已停止';
             }
-            
-            downloadButton.addEventListener('click', startDownload);
-            getFileButton.addEventListener('click', downloadFile);
+        }
+
+        // 恢复下载
+        function resumeDownload() {
+            if (downloadTasks.length === 0) {
+                showToast('没有可恢复的任务', 'error');
+                return;
+            }
+
+            isDownloading = true;
+            elements.startDownload.disabled = true;
+            elements.pauseDownload.disabled = false;
+            elements.stopDownload.disabled = false;
+
+            elements.progressTitle.textContent = '恢复下载...';
+            showToast('恢复下载', 'success');
+
+            processNextTask();
+        }
+
+        // 事件监听
+        elements.startDownload.addEventListener('click', () => {
+            if (downloadTasks.length > 0 && currentTaskIndex < downloadTasks.length) {
+                resumeDownload();
+            } else {
+                startDownload();
+            }
+        });
+
+        elements.pauseDownload.addEventListener('click', pauseDownload);
+        elements.stopDownload.addEventListener('click', stopDownload);
+
+        // 页面初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            // 示例镜像列表
+            elements.imageListInput.value = `nginx:latest
+mysql:8.0
+redis:alpine
+ubuntu:20.04`;
         });
     </script>
 </body>
-</html>
+</html> 
\ No newline at end of file