From 4ba3491484be8e669a4ec68f7fe881b18909599e Mon Sep 17 00:00:00 2001
From: dqzboy <coolboydqz@gmail.com>
Date: Wed, 22 Jan 2025 17:40:35 +0800
Subject: [PATCH] feat: Redesigned the front - end and back - end styles of
 hubcmdui.

---
 README.md               |   12 +-
 hubcmdui/README.md      |   20 +-
 hubcmdui/web/admin.html |  433 +++++++-----
 hubcmdui/web/index.html | 1376 ++++++++++++++++++++++++---------------
 4 files changed, 1133 insertions(+), 708 deletions(-)

diff --git a/README.md b/README.md
index 1ea4d74..1b32d64 100644
--- a/README.md
+++ b/README.md
@@ -221,19 +221,19 @@ docker pull gcr.your_domain_name/google-containers/pause:3.1
 <table>
     <tr>
       <td width="50%" align="center"><b>Docker Registry UI</b></td>
-      <td width="50%" align="center"><b>Docker-Proxy CmdUI</b></td>
+      <td width="50%" align="center"><b>Docker HubCMD UI</b></td>
     </tr>
     <tr>
         <td width="50%" align="center"><img src="https://github.com/dqzboy/Docker-Proxy/assets/42825450/0ddb041b-64f6-4d93-b5bf-85ad3b53d0e0?raw=true"></td>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/c7e368ca-7f1a-4311-9a10-a5f4f06d86d8?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/f394041e-954c-4b04-9cbb-d61c43290db6?raw=true"></td>
     </tr>
     <tr>
-      <td width="50%" align="center"><b>Docker官方镜像搜索</b></td>
-      <td width="50%" align="center"><b>Docker容器服务管理</b></td>
+      <td width="50%" align="center"><b>文档教程管理</b></td>
+      <td width="50%" align="center"><b>HubCMD-UI后台</b></td>
     </tr>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/8569c5c4-4ce6-4cd4-8547-fa9816019049?raw=true"></td>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/fb30f747-a2af-4fc8-b3cc-05c71a044da0?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/6f34d717-95c8-47b4-89b8-812151904448?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/816c95af-dbd1-46ce-b550-87e0853f23e2?raw=true"></td>
     </tr>
 </table>
 
diff --git a/hubcmdui/README.md b/hubcmdui/README.md
index 25c2677..ddb222b 100644
--- a/hubcmdui/README.md
+++ b/hubcmdui/README.md
@@ -91,25 +91,25 @@ docker logs -f [容器ID或名称]
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/c7e368ca-7f1a-4311-9a10-a5f4f06d86d8"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/f394041e-954c-4b04-9cbb-d61c43290db6"?raw=true"></td>
     </tr>
 </table>
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/0024d3e7-3b9d-4a10-9079-f2b91633a5f5"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/75c40b0b-d75b-4065-9678-d6fc8d2d282a"?raw=true"></td>
     </tr>
 </table>
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/8569c5c4-4ce6-4cd4-8547-fa9816019049"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/33eace7f-a7dc-4e9e-bfff-6487a3df5b1c"?raw=true"></td>
     </tr>
 </table>
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/b7efcd39-8757-46f9-ae68-02ca6add40e7"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/6f34d717-95c8-47b4-89b8-812151904448"?raw=true"></td>
     </tr>
 </table>
 
@@ -123,25 +123,19 @@ docker logs -f [容器ID或名称]
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/3ffe6a5d-da8c-436a-ae28-033fecf52770"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/816c95af-dbd1-46ce-b550-87e0853f23e2"?raw=true"></td>
     </tr>
 </table>
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/fb30f747-a2af-4fc8-b3cc-05c71a044da0"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/bee29cb2-e374-40a2-a730-b7034d3e4929"?raw=true"></td>
     </tr>
 </table>
 
 <table>
     <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/b36d9b53-0696-4e44-b847-1019e7739201"?raw=true"></td>
-    </tr>
-</table>
-
-<table>
-    <tr>
-        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/7a63c464-adde-4775-9a30-d70b14aa0d1e"?raw=true"></td>
+        <td width="50%" align="center"><img src="https://github.com/user-attachments/assets/a7fa29a4-5cb3-470a-827b-38bf3b7c8086"?raw=true"></td>
     </tr>
 </table>
 
diff --git a/hubcmdui/web/admin.html b/hubcmdui/web/admin.html
index 3409fc0..96363dc 100644
--- a/hubcmdui/web/admin.html
+++ b/hubcmdui/web/admin.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css">
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>
+    <!-- 添加Font Awesome图标库 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@@ -587,6 +589,241 @@
             left: 50%;
             transform: translate(-50%, -50%);
         }
+
+        /* 侧边栏样式优化 */
+        .sidebar {
+            background: #2c3e50;
+            color: #ecf0f1;
+            min-width: 250px;
+            padding: 2rem 0;
+            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+        }
+
+        .sidebar h2 {
+            color: #ecf0f1;
+            padding: 0 2rem;
+            margin-bottom: 2rem;
+            font-size: 1.4rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .sidebar h2 i {
+            color: #3498db;
+        }
+
+        .sidebar ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .sidebar li {
+            padding: 1rem 2rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: #bdc3c7;
+            transition: all 0.3s ease;
+        }
+
+        .sidebar li i {
+            width: 20px;
+            text-align: center;
+        }
+
+        .sidebar li:hover {
+            background-color: #34495e;
+            color: #3498db;
+        }
+
+        .sidebar li.active {
+            background-color: #3498db;
+            color: #ffffff;
+        }
+
+        /* 内容区域样式优化 */
+        .content-section {
+            background: #ffffff;
+            border-radius: 12px;
+            padding: 2rem;
+            margin: 1rem;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+
+        .content-section h1.admin-title {
+            color: #2c3e50;
+            font-size: 1.8rem;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 2px solid #ecf0f1;
+        }
+
+        /* 表单元素样式优化 */
+        .content-section input[type="text"],
+        .content-section input[type="url"],
+        .content-section input[type="password"],
+        .content-section select {
+            width: 100%;
+            max-width: 400px;
+            padding: 0.8rem;
+            border: 1px solid #dcdde1;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+
+        .content-section input:focus,
+        .content-section select:focus {
+            border-color: #3498db;
+            outline: none;
+        }
+
+        .content-section button {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            padding: 0.8rem 1.5rem;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s ease;
+        }
+
+        .content-section button:hover {
+            background-color: #2980b9;
+        }
+
+        /* 表格样式优化 */
+        .content-section table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin-top: 1.5rem;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .content-section th {
+            background-color: #f8f9fa;
+            font-weight: 600;
+            color: #2c3e50;
+            padding: 1rem;
+        }
+
+        .content-section td {
+            padding: 1rem;
+            border-bottom: 1px solid #ecf0f1;
+        }
+
+        .content-section tr:hover {
+            background-color: #f8f9fa;
+        }
+
+        /* 其他现有样式保持不变... */
+    </style>
+    <!-- 使用与前端相同的根变量 -->
+    <style>
+        :root {
+            --primary-color: #2196F3;
+            --secondary-color: #1976D2;
+            --background-color: #f8f9fa;
+            --container-bg: #ffffff;
+            --text-color: #333333;
+            --border-color: #e0e0e0;
+        }
+
+        /* 侧边栏样式 */
+        .sidebar {
+            background: var(--container-bg);
+            border-right: 1px solid var(--border-color);
+            min-width: 220px;
+            padding: 2rem 0;
+        }
+
+        .sidebar h2 {
+            color: var(--primary-color);
+            padding: 0 2rem;
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+        }
+
+        .sidebar li {
+            padding: 0.8rem 2rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .sidebar li:hover {
+            background-color: var(--background-color);
+            color: var(--primary-color);
+        }
+
+        .sidebar li.active {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        /* 内容区域样式 */
+        .content-section {
+            background: var(--container-bg);
+            border-radius: 8px;
+            padding: 2rem;
+            margin-bottom: 1rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        /* 表单元素样式 */
+        input[type="text"],
+        input[type="url"],
+        input[type="password"],
+        select {
+            width: 100%;
+            max-width: 400px;
+            padding: 0.75rem;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            margin-bottom: 1rem;
+            font-size: 0.95rem;
+        }
+
+        /* 按钮样式 */
+        button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.95rem;
+            transition: all 0.3s ease;
+        }
+
+        button:hover {
+            background-color: var(--secondary-color);
+        }
+
+        /* 表格样式 */
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin-top: 1rem;
+        }
+
+        th, td {
+            padding: 1rem;
+            border: 1px solid var(--border-color);
+        }
+
+        th {
+            background-color: var(--background-color);
+            font-weight: 500;
+            color: var(--text-color);
+        }
     </style>
 </head>
 <body>
@@ -596,16 +833,29 @@
     </div>
     <div class="admin-container" id="adminContainer" style="display: none;">
         <div class="sidebar">
-            <h2>管理面板</h2>
+            <h2><i class="fas fa-cogs"></i>管理面板</h2>
             <ul>
-                <li class="active" data-section="basic-config">基本配置</li>
-                <li data-section="menu-management">菜单管理</li>
-                <li data-section="ad-management">广告管理</li>
-                <li data-section="documentation-management">文档管理</li>            
-                <li data-section="password-change">修改密码</li>
-                <li data-section="network-test">网络测试</li>
-                <li data-section="docker-status">容器管理</li>
-                <li data-section="docker-monitoring">容器监控</li>
+                <li data-section="basic-config" class="active">
+                    <i class="fas fa-wrench"></i>基本配置
+                </li>
+                <li data-section="menu-management">
+                    <i class="fas fa-bars"></i>菜单管理
+                </li>
+                <li data-section="documentation-management">
+                    <i class="fas fa-file-alt"></i>文档管理
+                </li>
+                <li data-section="network-test">
+                    <i class="fas fa-network-wired"></i>网络测试
+                </li>
+                <li data-section="docker-status">
+                    <i class="fab fa-docker"></i>容器管理
+                </li>
+                <li data-section="docker-monitoring">
+                    <i class="fas fa-chart-line"></i>容器监控
+                </li>
+                <li data-section="password-change">
+                    <i class="fas fa-key"></i>修改密码
+                </li>
             </ul>
         </div>
         <div class="content-area">
@@ -638,23 +888,6 @@
                     </table>
                     <button type="button" class="add-btn" onclick="showNewMenuItemRow()">添加菜单项</button>
                 </div>
-                
-                <div id="ad-management" class="content-section">
-                    <h2 class="menu-label">广告管理</h2>
-                    <table id="adTable">
-                        <thead>
-                            <tr>
-                                <th>广告图片URL</th>
-                                <th>跳转URL</th>
-                                <th>操作</th>
-                            </tr>
-                        </thead>
-                        <tbody id="adTableBody">
-                            <!-- 广告项将在这里动态添加 -->
-                        </tbody>
-                    </table>
-                    <button type="button" class="add-btn" onclick="showNewAdRow()">添加广告</button>
-                </div>
   
                 <!-- 文档管理部分 -->
                 <div id="documentation-management" class="content-section">
@@ -707,7 +940,7 @@
                             <option value="k8s.gcr.io">k8s.gcr.io</option>
                             <option value="registry.k8s.io">registry.k8s.io</option>
                             <option value="mcr.microsoft.com">mcr.microsoft.com</option>
-                            <option value="docker.elastic.com">docker.elastic.com</option>
+                            <option value="docker.elastic.co">docker.elastic.co</option>
                             <option value="registry-1.docker.io">registry-1.docker.io</option>
                         </select>
                     </div>
@@ -824,7 +1057,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
     <script>
         let menuItems = [];
-        let adImages = [];
         let isLoggedIn = false;
         let editingIndex = -1; // 用于记录当前编辑的菜单项索引
         let editor;
@@ -1139,109 +1371,6 @@
             }
         }
 
-        function showNewAdRow() {
-            const tbody = document.getElementById('adTableBody');
-            const newRow = `
-                <tr id="newAdRow">
-                    <td><input type="url" id="newAdUrl" placeholder="广告图片URL"></td>
-                    <td><input type="url" id="newAdLink" placeholder="跳转URL"></td>
-                    <td>
-                        <button type="button" class="action-btn" onclick="saveNewAd()">保存</button>
-                        <button type="button" class="action-btn" onclick="cancelNewAd()">取消</button>
-                    </td>
-                </tr>
-            `;
-            tbody.insertAdjacentHTML('beforeend', newRow);
-        }
-
-        function renderAdItems() {
-            console.log('Rendering ad items:', adImages);
-            const tbody = document.getElementById('adTableBody');
-            tbody.innerHTML = '';
-            adImages.forEach((ad, index) => {
-                const row = `
-                    <tr data-index="${index}">
-                        <td><input type="url" class="ad-url" value="${ad.url || ''}" disabled></td>
-                        <td><input type="url" class="ad-link" value="${ad.link || ''}" disabled></td>
-                        <td>
-                            <button type="button" class="action-btn edit-btn">编辑</button>
-                            <button type="button" class="action-btn delete-btn ad-delete-btn">删除</button>
-                        </td>
-                    </tr>
-                `;
-                tbody.innerHTML += row;
-            });
-            setupAdEditButtons();
-            setupAdDeleteButtons();
-        }
-
-        function setupAdEditButtons() {
-            const editButtons = document.querySelectorAll('.edit-btn');
-            editButtons.forEach((button) => {
-                button.addEventListener('click', () => {
-                    const row = button.closest('tr');
-                    const urlInput = row.querySelector('.ad-url');
-                    const linkInput = row.querySelector('.ad-link');
-
-                    if (urlInput.disabled) {
-                        urlInput.disabled = false;
-                        linkInput.disabled = false;
-                        button.textContent = '保存';
-                    } else {
-                        const index = parseInt(row.getAttribute('data-index'));
-                        const url = urlInput.value || '';
-                        const link = linkInput.value || '';
-
-                        if (url) {
-                            adImages[index] = { url, link };
-                            saveAd(index, { url, link });
-                            urlInput.disabled = true;
-                            linkInput.disabled = true;
-                            button.textContent = '编辑';
-                        } else {
-                            alert('广告URL不能为空');
-                        }
-                    }
-                });
-            });
-        }
-
-        function setupAdDeleteButtons() {
-            const deleteButtons = document.querySelectorAll('.ad-delete-btn');
-            deleteButtons.forEach((button) => {
-                button.addEventListener('click', () => {
-                    const row = button.closest('tr');
-                    const index = parseInt(row.getAttribute('data-index'));
-                    const adUrl = row.querySelector('.ad-url').value;
-                    if (confirm(`确定要删除广告 "${adUrl}" 吗？`)) {
-                        deleteAd(index);
-                    }
-                });
-            });
-        }
-
-        function saveNewAd() {
-            const url = document.getElementById('newAdUrl').value || '';
-            const link = document.getElementById('newAdLink').value || '';
-
-            if (!url) {
-                alert('广告图片URL为必填项');
-                return;
-            }
-
-            const newAd = { url, link };
-            adImages.push(newAd);
-            saveAd(adImages.length - 1, newAd);
-            cancelNewAd();
-        }
-
-        function cancelNewAd() {
-            const newRow = document.getElementById('newAdRow');
-            if (newRow) {
-                newRow.remove();
-            }
-        }
-
         async function saveLogo() {
             const logoUrl = document.getElementById('logoUrl').value;
             if (!logoUrl) {
@@ -1296,46 +1425,6 @@
             }
         }
 
-        async function saveAd(index, ad) {
-            console.log(`Saving ad at index ${index}:`, ad);
-            try {
-                const response = await fetch('/api/config', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ adImages: adImages })
-                });
-                if (response.ok) {
-                    console.log('Ad saved successfully');
-                    renderAdItems(); // 重新渲染广告项
-                } else {
-                    throw new Error('Failed to save ad');
-                }
-            } catch (error) {
-                console.error('保存广告失败:', error);
-                alert('保存广告失败: ' + error.message);
-            }
-        }
-
-        async function deleteAd(index) {
-            try {
-                adImages.splice(index, 1);
-                const response = await fetch('/api/config', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ adImages: adImages })
-                });
-                if (response.ok) {
-                    console.log('Ad deleted successfully');
-                    renderAdItems(); // 重新渲染广告项
-                } else {
-                    throw new Error('Failed to delete ad');
-                }
-            } catch (error) {
-                console.error('删除广告项失败:', error);
-                alert('删除广告项失败: ' + error.message);
-            }
-        }
-
         async function saveConfig(partialConfig) {
             try {
                 const response = await fetch('/api/config', {
@@ -1422,8 +1511,6 @@
                 document.getElementById('logoUrl').value = config.logo || '';
                 document.getElementById('proxyDomain').value = config.proxyDomain || '';
                 setMenuItems(config.menuItems || []);
-                adImages = config.adImages || [];
-                renderAdItems();
                 loadDocumentation(); // 新增：加载文档
             } catch (error) {
                 console.error('加载配置失败:', error);
diff --git a/hubcmdui/web/index.html b/hubcmdui/web/index.html
index c01af65..785e537 100644
--- a/hubcmdui/web/index.html
+++ b/hubcmdui/web/index.html
@@ -7,466 +7,848 @@
     <link rel="icon" href="https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy.png" type="image/png">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
+        :root {
+            --primary-color: #2196F3;
+            --secondary-color: #1976D2;
+            --background-color: #f8f9fa;
+            --container-bg: #ffffff;
+            --text-color: #333333;
+            --border-color: #e0e0e0;
+        }
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
             line-height: 1.6;
-            color: #24292e;
             margin: 0;
             padding: 0;
-            background-color: #f6f8fa;
-            display: flex;
-            flex-direction: column;
+            background-color: var(--background-color);
+            color: var(--text-color);
             min-height: 100vh;
-        }
-        .header {
-            background-color: #ffffff;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-            padding: 10px 30px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .header-content {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-            max-width: 1200px;
-        }
-        .logo {
-            max-height: 70px;
-        }
-        .logo-link {
-            display: inline-block;
-            text-decoration: none;
-        }
-
-        .logo-link:hover {
-            opacity: 0.8;
-            transition: opacity 0.3s ease;
-        }
-        .nav-menu {
-            display: flex;
-            gap: 10px;
-            font-size: 18px;
-            margin-left: auto;
-        }
-
-        .nav-menu a {
-            color: #0366d6;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            padding: 8px 12px;
-            border-radius: 5px;
-            position: relative;
-        }
-
-        .nav-menu a:hover {
-            color: #0366d6;
-            background-color: rgba(3, 102, 214, 0.1);
-        }
-
-        .nav-menu a::after {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 2px;
-            bottom: 0;
-            left: 50%;
-            background-color: #0366d6;
-            transition: all 0.3s ease;
-        }
-
-        .nav-menu a:hover::after {
-            width: 100%;
-            left: 0;
-        }
-        .container {
-            max-width: 800px;
-            width: 90%;
-            margin: 20px auto;
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            flex-grow: 1;
-            position: relative;
-        }
-        h1, h2 {
-            border-bottom: 2px solid #eaecef;
-            padding-bottom: 0.5em;
-            margin-bottom: 1em;
-            color: #0366d6;
-        }
-        .input-group {
-            margin-bottom: 30px;
             display: flex;
             flex-direction: column;
         }
-        input[type="text"] {
-            width: 100%;
-            padding: 12px;
-            font-size: 16px;
-            border: 1px solid #d1d5da;
-            border-radius: 4px;
-            margin-bottom: 15px;
-            box-sizing: border-box;
-        }
-        button {
-            padding: 12px 20px;
-            background-color: #2ea44f;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s;
-            align-self: flex-start;
-        }
-        button:hover {
-            background-color: #2c974b;
-        }
-        .carousel {
-            width: 100%;
-            height: 300px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            perspective: 1000px;
-            position: relative;
-            margin-top: 30px;
-            margin-bottom: 30px;
-        }
-        .carousel-inner {
-            position: relative;
-            width: 50%;
-            height: 100%;
-            transform-style: preserve-3d;
-            transform: translateZ(-300px);
-            transition: transform 1s;
-        }
-        .carousel-item {
-            position: absolute;
-            width: 70%;
-            height: 100%;
-            left: 50%;
+
+        .header {
+            background-color: var(--container-bg);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            position: sticky;
             top: 0;
-            transform-origin: center center;
-            transition: transform 1s, opacity 1s;
-            opacity: 0.5;
-        }
-        .carousel-item.active {
-            transform: translateX(-50%) translateZ(300px);
-            opacity: 1;
-        }
-        .carousel-item.left {
-            transform: translateX(-150%) translateZ(100px) rotateY(30deg);
-        }
-        .carousel-item.right {
-            transform: translateX(50%) translateZ(100px) rotateY(-30deg);
-        }
-        .carousel-control {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 2em;
-            cursor: pointer;
-        }
-        .carousel-control.left {
-            left: 10px;
-        }
-        .carousel-control.right {
-            right: 10px;
-        }
-        pre {
-            background-color: #f6f8fa;
-            border-radius: 4px;
-            padding: 16px;
-            overflow: auto;
-            font-size: 14px;
-            border: 1px solid #e1e4e8;
-            position: relative;
-        }
-        .copy-btn {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            padding: 6px 12px;
-            font-size: 12px;
-            background-color: #f0f0f0;
-            color: #333;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s;
-            font-family: 'Arial', sans-serif;
-            font-weight: 500;
-            border-radius: 12px;
-        }
-        .copy-btn:hover {
-            background-color: #e0e0e0;
-            color: #000;
-        }
-        .step {
-            margin-bottom: 25px;
-            background-color: #fff;
-            border: 1px solid #e1e4e8;
-            border-radius: 6px;
-            padding: 20px;
-        }
-        .step h3 {
-            margin-top: 0;
-            color: #24292e;
-        }
-        .footer {
-            background-color: #f6f8fa;
-            color: #6a737d;
-            text-align: center;
-            padding: 20px;
-            margin-top: 20px;
-        }
-        .footer a {
-            color: #58a6ff;
-            text-decoration: none;
-        }
-        .footer a:hover {
-            text-decoration: underline;
-        }
-        #backToTopBtn {
-            display: none;
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 100;
-            font-size: 16px;
-            padding: 10px;
-            background-color: #0366d6;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        #backToTopBtn:hover {
-            background-color: #0256b9;
-        }
-        #backToTopBtn::after {
-            content: '返回顶部';
-            display: none;
-            position: absolute;
-            bottom: 50px;
-            right: 0;
-            padding: 5px 10px;
-            background-color: #333;
-            color: white;
-            border-radius: 5px;
-            white-space: nowrap;
-        }
-        #backToTopBtn:hover::after {
-            display: block;
-        }
-        @media (max-width: 768px) {
-            .nav-menu {
-                display: none;
-                flex-direction: column;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                width: 100%;
-                background-color: #ffffff;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-                padding: 10px 0;
-            }
-
-            .nav-menu.active {
-                display: flex;
-            }
-
-            .nav-menu a {
-                padding: 10px 20px;
-            }
-
-            .menu-toggle {
-                display: block;
-                font-size: 24px;
-                cursor: pointer;
-            }
-        }
-
-        @media (min-width: 769px) {
-            .menu-toggle {
-                display: none;
-            }
-        }
-        .notification {
-            display: none;
-            position: absolute;
-            top: 7px;
-            left: 87%;
-            transform: translateX(-50%);
-            background-color: #333;
-            color: #fff;
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 12px;
-            opacity: 0;
-            transition: opacity 0.5s ease-in-out;
             z-index: 1000;
         }
 
-        /* 搜索样式 */
-        .search-container {
-            margin-top: 20px;
+        /* 调整顶部导航样式 */
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0.5rem 1rem;  /* 减小上下内边距 */
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
         }
-        #searchResults {
-            margin-top: 20px;
+
+        .logo {
+            height: 40px;  /* 稍微减小logo大小 */
+            width: auto;
+        }
+
+        .nav-menu {
+            display: flex;
+            gap: 0.8rem;  /* 减小菜单项之间的间距 */
+        }
+
+        .nav-menu a {
+            color: var(--text-color);
+            text-decoration: none;
+            padding: 0.35rem 0.8rem;  /* 减小菜单项的内边距 */
+            border-radius: 4px;
+            transition: all 0.3s ease;
+            font-size: 0.95rem;  /* 稍微调整字体大小 */
+        }
+
+        .nav-menu a:hover {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .container {
+            width: 80%; /* 设置固定比例宽度 */
+            min-width: 1000px; /* 设置最小宽度 */
+            max-width: 1400px; /* 设置最大宽度 */
+            margin: 2rem auto;
+            padding: 0;
+            flex: 1 0 auto;
+            display: flex;
+            flex-direction: column;
+            min-height: calc(100vh - 180px); /* 减去header和footer的高度 */
+        }
+
+        .tab-container {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            border-bottom: 2px solid var(--border-color);
+            padding-bottom: 0.5rem;
+        }
+
+        .tab {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            background: none;
+            color: var(--text-color);
+            cursor: pointer;
+            font-weight: 500;
+            position: relative;
+        }
+
+        .tab.active {
+            color: var(--primary-color);
+        }
+
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -0.5rem;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: var(--primary-color);
+        }
+
+        .content {
             display: none;
+            background: var(--container-bg);
+            padding: 3rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            flex: 1;
+            min-height: calc(100vh - 300px); /* 确保最小高度 */
+            width: 100%;
+            box-sizing: border-box;
         }
-        .search-result-item {
-            border: 1px solid #e1e4e8;
-            border-radius: 6px;
-            padding: 10px;
-            margin-bottom: 10px;
+
+        .content.active {
+            display: flex;
+            flex-direction: column;
         }
-        .search-result-item h3 {
-            margin-top: 0;
+
+        input[type="text"] {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            margin-bottom: 1rem;
+            font-size: 1rem;
         }
-        .search-result-item p {
-            margin-bottom: 5px;
-        }
-        .use-image-btn {
-            background-color: #0366d6;
+
+        button {
+            background-color: var(--primary-color);
             color: white;
             border: none;
-            padding: 5px 10px;
+            padding: 0.75rem 1.5rem;
             border-radius: 4px;
             cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s ease;
         }
-        .use-image-btn:hover {
-            background-color: #0256b9;
+
+        button:hover {
+            background-color: var(--secondary-color);
         }
-        .official-image {
-            background-color: #e6f3ff;
-            border-left: 5px solid #0366d6;
-            padding-left: 15px;
+
+        pre {
+            background-color: #f6f8fa;
+            padding: 1rem;
+            border-radius: 4px;
+            overflow-x: auto;
+            position: relative;
         }
+
+        .copy-btn {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.875rem;
+            background-color: #e9ecef;
+            color: var(--text-color);
+        }
+
         .search-result-item {
-            margin-bottom: 15px;
-            padding: 10px;
-            border: 1px solid #e1e4e8;
-            border-radius: 6px;
-        }
-        .search-result-item h3 {
-            margin-top: 0;
-            color: #0366d6;
+            margin-bottom: 1rem;
+            padding: 1rem;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
         }
+
         .official-badge {
             background-color: #28a745;
             color: white;
-            padding: 2px 5px;
+            padding: 0.25rem 0.5rem;
             border-radius: 3px;
-            font-size: 12px;
-            margin-left: 10px;
+            font-size: 0.75rem;
+            margin-left: 0.5rem;
         }
-        .stars {
-            color: #586069;
-            font-size: 14px;
+
+        .footer {
+            background-color: var(--container-bg);
+            padding: 1.5rem;
+            text-align: center;
+            border-top: 1px solid var(--border-color);
+            margin-top: auto; /* 将 footer 推到底部 */
+            flex-shrink: 0; /* 防止 footer 被压缩 */
         }
-        .tab-container {
-            display: flex;
-            justify-content: center;
-            margin-bottom: 20px;
-        }
-        .tab {
-            padding: 10px 20px;
-            cursor: pointer;
-            border: 1px solid #d1d5da;
-            background-color: #f6f8fa;
-            color: #24292e;
-        }
-        .tab.active {
-            background-color: #0366d6;
+
+        /* 返回顶部按钮样式优化 */
+        #backToTopBtn {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 44px;
+            height: 44px;
+            background: linear-gradient(145deg, #2196F3, #1976D2);
             color: white;
-            border-color: #0366d6;
+            border: none;
+            border-radius: 12px;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+            transition: all 0.3s ease;
+            z-index: 1000;
+            padding: 0;
+            font-size: 24px;
+            line-height: 1;
         }
-        .content {
+
+        #backToTopBtn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
+        }
+
+        @media (max-width: 768px) {
+            .header-content {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            .nav-menu {
+                margin-top: 1rem;
+                flex-direction: column;
+                width: 100%;
+            }
+
+            .tab-container {
+                flex-wrap: wrap;
+            }
+
+            .container {
+                padding: 1rem;
+                min-height: calc(100vh - 140px);
+            }
+        }
+
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 4px;
+            display: none;
+            z-index: 1000;
+            animation: fadeInOut 2s ease-in-out;
+        }
+
+        @keyframes fadeInOut {
+            0% { opacity: 0; }
+            15% { opacity: 1; }
+            85% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        /* 搜索结果容器样式 */
+        #searchResults {
+            flex: 1;
+            overflow-y: auto;
+            margin-top: 1rem;
+        }
+
+        /* 文档内容容器样式 */
+        #documentationContent {
             display: none;
         }
-        .content.active {
+
+        #documentationContent.active {
+            display: grid;
+            grid-template-columns: 250px 1fr;
+            gap: 2rem;
+        }
+
+        #documentList {
+            border-right: 1px solid var(--border-color);
+            padding-right: 1rem;
+        }
+
+        #documentationText {
+            flex: 1;
+            overflow-y: auto;
+        }
+
+        /* 镜像加速内容样式 */
+        #accelerateContent .input-group {
+            margin-bottom: 2rem;
+        }
+
+        #result {
+            flex: 1;
+        }
+
+        #commandsContainer {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .step {
+            background: #fff;
+            padding: 1.5rem;
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            margin-bottom: 1rem;
+        }
+
+        .step h3 {
+            color: var(--primary-color);
+            margin-top: 0;
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 0.5rem;
+        }
+
+        .step pre {
+            background: #1e1e1e;
+            color: #fff;
+            padding: 1rem;
+            border-radius: 4px;
+            margin: 0;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+            font-size: 0.9rem;
+        }
+
+        .step pre code {
+            color: #fff;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            padding: 0.35rem 0.75rem;
+            font-size: 0.8rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #fff;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .copy-btn:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+
+        /* 适配移动端 */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+                min-height: calc(100vh - 140px);
+            }
+
+            #documentationContent.active {
+                grid-template-columns: 1fr;
+            }
+
+            #documentList {
+                border-right: none;
+                border-bottom: 1px solid var(--border-color);
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+            }
+        }
+
+        /* 适配移动端 */
+        @media (max-width: 1024px) {
+            .container {
+                width: 95%;
+                min-width: auto;
+                padding: 0 1rem;
+            }
+
+            .content {
+                padding: 1.5rem;
+            }
+        }
+
+        .quick-guide {
+            background: #f8f9fa;
+            padding: 1.5rem;
+            border-radius: 8px;
+            margin: 2rem 0;
+            border: 1px solid var(--border-color);
+        }
+
+        .popular-images {
+            margin-top: 2rem;
+        }
+
+        .image-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+
+        .image-card {
+            background: #fff;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 1rem;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .image-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+
+        .image-card h3 {
+            margin: 0 0 0.5rem 0;
+            color: var(--primary-color);
+        }
+
+        .image-card .description {
+            font-size: 0.9rem;
+            color: #666;
+            margin-bottom: 1rem;
+        }
+
+        .command-terminal {
+            background: #2D2D2D;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+
+        .terminal-header {
+            background: #404040;
+            padding: 8px 15px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .terminal-button {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+
+        .button-red {
+            background: #FF5F56;
+        }
+
+        .button-yellow {
+            background: #FFBD2E;
+        }
+
+        .button-green {
+            background: #27C93F;
+        }
+
+        .step {
+            margin-bottom: 1rem;
+        }
+
+        .step h3 {
+            color: var(--primary-color);
+            margin: 0 0 0.5rem 0;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+
+        .step pre {
+            background: #2D2D2D;
+            margin: 0;
+            padding: 0;
+        }
+
+        .step pre code {
             display: block;
+            padding: 12px 15px;
+            color: #fff;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.9rem;
+            line-height: 1.4;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 50%;
+            right: 10px;
+            transform: translateY(-50%);
+            padding: 4px 8px;
+            font-size: 0.8rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        .step pre:hover .copy-btn {
+            opacity: 1;
+        }
+
+        .command-terminal pre {
+            margin: 0;
+            padding: 8px 0;  /* 增加上下内边距 */
+            background: transparent;
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        .command-terminal pre code {
+            display: block;
+            padding: 12px 15px;  /* 增加内边距 */
+            color: #fff;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.9rem;
+            line-height: 1.2;
+            white-space: pre;
+            flex: 1;
+        }
+
+        .command-terminal .copy-btn {
+            position: relative;
+            top: auto;
+            right: auto;
+            transform: none;
+            margin: 0 10px;  /* 调整按钮边距 */
+            padding: 4px 8px;
+            font-size: 0.8rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            opacity: 1;
+            height: fit-content;
+        }
+
+        .copy-success {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            border-radius: 4px;
+            animation: fadeInOut 1.5s ease-in-out;
+            pointer-events: none;
+        }
+
+        @keyframes fadeInOut {
+            0% { opacity: 0; }
+            20% { opacity: 1; }
+            80% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        #documentationText pre {
+            background: #2D2D2D;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-bottom: 1rem;
+            position: relative;
+        }
+
+        #documentationText pre code {
+            display: block;
+            padding: 12px 15px;
+            color: #fff;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.9rem;
+            line-height: 1.2;
+            background: transparent;
+        }
+
+        #documentationText .command-terminal {
+            background: #2D2D2D;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+
+        #documentationText pre {
+            position: relative;
+            margin: 0;
+        }
+
+        #documentationText pre .copy-btn {
+            position: absolute;
+            top: 50%;
+            right: 10px;
+            transform: translateY(-50%);
+            padding: 4px 8px;
+            font-size: 0.8rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 0.2s;
+            cursor: pointer;
+        }
+
+        #documentationText pre:hover .copy-btn {
+            opacity: 1;
+        }
+
+        /* 修改文档代码块中复制按钮的样式 */
+        #documentationText .command-terminal pre {
+            position: relative;
+        }
+
+        #documentationText .command-terminal .copy-btn {
+            position: absolute;
+            top: 8px;           /* 调整到右上角 */
+            right: 8px;
+            transform: none;    /* 移除垂直居中变换 */
+            margin: 0;
+            padding: 4px 8px;
+            font-size: 0.8rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 0.2s;
+            cursor: pointer;
+            z-index: 10;        /* 确保按钮始终在上层 */
+        }
+
+        #documentationText .command-terminal pre:hover .copy-btn {
+            opacity: 1;
+        }
+
+        /* 调整代码块内边距，避免与复制按钮重叠 */
+        #documentationText .command-terminal pre code {
+            padding: 12px 15px;
+            padding-right: 60px;  /* 为复制按钮留出空间 */
+        }
+
+        /* 文档列表样式优化 */
+        #documentList {
+            border-right: 1px solid var(--border-color);
+            padding-right: 2rem;
+            min-width: 200px;
+        }
+
+        #documentList h2 {
+            color: var(--primary-color);
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid var(--border-color);
+        }
+
+        #documentList ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        #documentList li {
+            margin-bottom: 0.8rem;
+        }
+
+        #documentList a {
+            color: var(--text-color);
+            text-decoration: none;
+            display: block;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            transition: all 0.3s ease;
+            font-size: 0.95rem;
+            border: 1px solid transparent;
+        }
+
+        #documentList a:hover {
+            background-color: var(--background-color);
+            color: var(--primary-color);
+            border: 1px solid var(--border-color);
+        }
+
+        #documentList a.active {
+            background-color: var(--primary-color);
+            color: white;
+            border: 1px solid var(--primary-color);
+        }
+
+        /* 响应式调整 */
+        @media (max-width: 768px) {
+            #documentList {
+                border-right: none;
+                border-bottom: 1px solid var(--border-color);
+                padding-right: 0;
+                padding-bottom: 1rem;
+                margin-bottom: 1.5rem;
+            }
+
+            #documentList ul {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0.5rem;
+            }
+
+            #documentList li {
+                margin-bottom: 0;
+            }
         }
     </style>
 </head>
 <body>
-    <!-- 页眉 -->
     <header class="header">
         <div class="header-content">
             <a href="/" class="logo-link">
                 <img src="https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy.png" alt="Logo" class="logo">
             </a>
-            <div class="menu-toggle" id="menuToggle">☰</div>
             <nav class="nav-menu" id="navMenu">
                 <!-- 菜单项将通过 JavaScript 动态加载 -->
             </nav>
         </div>
     </header>
 
-    <!-- 内容容器 -->
     <div class="container">
         <h1>Docker 镜像加速和镜像搜索</h1>
-        <!-- 标签切换 -->
+        
         <div class="tab-container">
             <div class="tab active" onclick="switchTab('accelerate')">镜像加速</div>
             <div class="tab" onclick="switchTab('search')">镜像搜索</div>
             <div class="tab" onclick="switchTab('documentation')">文档教程</div>
         </div>
 
-        <!-- 镜像加速内容 -->
         <div id="accelerateContent" class="content active">
             <div class="input-group">
                 <input type="text" id="imageInput" placeholder="请输入 Docker 镜像名称，例如：nginx 或 mysql:5.7">
                 <button onclick="generateCommands(document.getElementById('imageInput').value.trim())">获取加速命令</button>
             </div>
-            <!-- 结果容器 -->
             <div id="result" style="display:none;">
                 <h2>加速命令</h2>
                 <div id="commandsContainer"></div>
             </div>
+            
+            <div class="quick-guide">
+                <h3>快速使用指南</h3>
+                <ol>
+                    <li>输入需要拉取的 Docker 镜像名称（例如：nginx, mysql:5.7）</li>
+                    <li>点击"获取加速命令"按钮生成加速命令</li>
+                    <li>复制并执行命令以加速拉取镜像</li>
+                    <li>等待镜像下载完成即可使用</li>
+                </ol>
+            </div>
+            
+            <div class="popular-images">
+                <h3>热门镜像推荐</h3>
+                <div class="image-grid">
+                    <div class="image-card" onclick="useImage('nginx')">
+                        <h3>Nginx</h3>
+                        <div class="description">高性能的HTTP和反向代理服务器</div>
+                        <button class="use-image-btn">使用此镜像</button>
+                    </div>
+                    <div class="image-card" onclick="useImage('mysql')">
+                        <h3>MySQL</h3>
+                        <div class="description">流行的关系型数据库管理系统</div>
+                        <button class="use-image-btn">使用此镜像</button>
+                    </div>
+                    <div class="image-card" onclick="useImage('redis')">
+                        <h3>Redis</h3>
+                        <div class="description">开源的内存数据存储系统</div>
+                        <button class="use-image-btn">使用此镜像</button>
+                    </div>
+                    <div class="image-card" onclick="useImage('mongodb')">
+                        <h3>MongoDB</h3>
+                        <div class="description">流行的 NoSQL 数据库</div>
+                        <button class="use-image-btn">使用此镜像</button>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <!-- 镜像搜索内容 -->
         <div id="searchContent" class="content">
             <div class="search-container">
                 <input type="text" id="searchInput" placeholder="请输入 Docker 镜像名称进行搜索">
                 <button onclick="searchDockerHub()">搜索Docker镜像</button>
             </div>
+            <div class="quick-guide">
+                <h3>搜索提示</h3>
+                <ul>
+                    <li>输入完整的镜像名称可以获得精确结果（例如：nginx, mysql）</li>
+                    <li>可以通过关键词搜索相关镜像</li>
+                    <li>官方镜像会显示"官方"标记</li>
+                    <li>结果会显示镜像的描述和星标数量</li>
+                </ul>
+            </div>
             <div id="searchResults"></div>
+            
+            <div class="popular-images">
+                <h3>热门搜索</h3>
+                <div class="image-grid">
+                    <div class="image-card" onclick="document.getElementById('searchInput').value='nginx'; searchDockerHub();">
+                        <h3>Web 服务器</h3>
+                        <div class="description">包括 Nginx、Apache、Httpd 等Web服务器</div>
+                        <button class="use-image-btn">搜索相关</button>
+                    </div>
+                    <div class="image-card" onclick="document.getElementById('searchInput').value='mysql'; searchDockerHub();">
+                        <h3>数据库</h3>
+                        <div class="description">MySQL、PostgreSQL、MongoDB 等数据库</div>
+                        <button class="use-image-btn">搜索相关</button>
+                    </div>
+                    <div class="image-card" onclick="document.getElementById('searchInput').value='redis'; searchDockerHub();">
+                        <h3>缓存服务</h3>
+                        <div class="description">Redis、Memcached 等缓存服务</div>
+                        <button class="use-image-btn">搜索相关</button>
+                    </div>
+                    <div class="image-card" onclick="document.getElementById('searchInput').value='rabbitmq'; searchDockerHub();">
+                        <h3>消息队列</h3>
+                        <div class="description">RabbitMQ、Kafka 等消息队列服务</div>
+                        <button class="use-image-btn">搜索相关</button>
+                    </div>
+                </div>
+            </div>
         </div>
 
-         <!-- 文档教程内容 -->
-         <div id="documentationContent" class="content">
+        <div id="documentationContent" class="content">
             <div id="documentList"></div>
             <div id="documentationText"></div>
         </div>
-
-        <!-- 广告容器 -->
-        <div class="carousel" id="carousel">
-            <div class="carousel-inner" id="carouselInner">
-                <!-- 图片将在 JavaScript 中加载 -->
-            </div>
-            <div class="carousel-control left" onclick="prevSlide()">&#10094;</div>
-            <div class="carousel-control right" onclick="nextSlide()">&#10095;</div>
-        </div>
     </div>
-    <!-- 页脚 -->
+
     <footer class="footer">
-        <p>Copyright © <span id="currentYear"></span> All Rights Reserved. <a href="https://github.com/dqzboy/Docker-Proxy" target="_blank" rel="noopener noreferrer">Docker-Proxy</a> 版权所有</p>
+        <p>Copyright © <span id="currentYear"></span> All Rights Reserved. <a href="https://github.com/dqzboy/Docker-Proxy" target="_blank" rel="noopener noreferrer">Docker-Proxy</a></p>
     </footer>
 
-    <!-- 返回顶部按钮 -->
-    <button id="backToTopBtn" onclick="scrollToTop()">⌃</button>
+    <button id="backToTopBtn" onclick="scrollToTop()" aria-label="返回顶部">▲</button>
 
     <script>
         // 设置当前年份
@@ -500,11 +882,15 @@
             document.getElementById('searchResults').style.display = 'none';
             document.getElementById('result').style.display = 'none';
             document.getElementById('backToTopBtn').style.display = 'none';
-            document.getElementById('carousel').style.display = 'flex'; // 默认显示广告
 
             if (tabName === 'documentation') {
                 fetchDocumentation();
             } else if (tabName === 'accelerate') {
+                // 重置显示状态
+                document.querySelector('.quick-guide').style.display = 'block';
+                document.querySelector('.popular-images').style.display = 'block';
+                document.getElementById('result').style.display = 'none';
+                
                 const imageInput = document.getElementById('imageInput').value.trim();
                 if (imageInput) {
                     generateCommands(imageInput);
@@ -551,22 +937,34 @@
                 const cmdDiv = document.createElement('div');
                 cmdDiv.className = 'step';
                 cmdDiv.innerHTML = `
-                    <h3>${index + 1}. ${command.title}</h3> <pre><code>${command.cmd}</code><div id="copyNotification${index}" class="notification">已复制!</div><button class="copy-btn" onclick="copyToClipboard('${command.cmd}', 'copyNotification${index}')">复制</button></pre>
+                    <h3>${index + 1}. ${command.title}</h3>
+                    <div class="command-terminal">
+                        <div class="terminal-header">
+                            <div class="terminal-button button-red"></div>
+                            <div class="terminal-button button-yellow"></div>
+                            <div class="terminal-button button-green"></div>
+                        </div>
+                        <pre><code>${command.cmd}</code>
+                            <button class="copy-btn" onclick="copyToClipboard('${command.cmd}', this)">复制</button>
+                        </pre>
+                    </div>
                 `;
                 container.appendChild(cmdDiv);
             });
 
-            // 显示结果并隐藏广告
-            resultDiv.style.display = 'block';
-            document.getElementById('carousel').style.display = 'none';
+            // 显示结果并隐藏其他内容
+            resultDiv.style.display = 'flex';
+            resultDiv.style.flexDirection = 'column';
+            document.querySelector('.quick-guide').style.display = 'none';
+            document.querySelector('.popular-images').style.display = 'none';
             document.getElementById('backToTopBtn').style.display = 'block';
         }
 
         // 复制命令到剪贴板
-        function copyToClipboard(text, notificationId) {
+        function copyToClipboard(text, element) {
             if (navigator.clipboard && navigator.clipboard.writeText) {
                 navigator.clipboard.writeText(text).then(() => {
-                    showNotification(notificationId);
+                    showNotification(element.target || element);
                 }, (err) => {
                     console.error('无法复制文本: ', err);
                 });
@@ -577,22 +975,24 @@
                 textarea.select();
                 document.execCommand('copy');
                 document.body.removeChild(textarea);
-                showNotification(notificationId);
+                showNotification(element.target || element);
             }
         }
 
-        function showNotification(notificationId) {
-            var notification = document.getElementById(notificationId);
-            notification.style.display = 'block';
-            notification.style.opacity = '1';
+        function showNotification(cmdElement) {
+            const successDiv = document.createElement('div');
+            successDiv.className = 'copy-success';
+            successDiv.textContent = '已复制到剪贴板';
+            
+            // 获取命令所在的 pre 元素
+            const preElement = cmdElement.closest('pre');
+            preElement.style.position = 'relative';
+            preElement.appendChild(successDiv);
 
-            // 在2秒后隐藏提示
-            setTimeout(function() {
-                notification.style.opacity = '0';
-                setTimeout(function() {
-                    notification.style.display = 'none';
-                }, 500);
-            }, 2000);
+            // 1.5秒后移除提示
+            setTimeout(() => {
+                successDiv.remove();
+            }, 1500);
         }
 
         // 滚动到顶部
@@ -601,45 +1001,8 @@
                 top: 0,
                 behavior: 'smooth'
             });
-        }
-
-        let autoPlayTimer; // 用于存储自动播放的定时器
-
-        // 更新轮播图
-        function updateCarousel() {
-            items.forEach((item, index) => {
-                item.classList.remove('active', 'left', 'right');
-                if (index === currentIndex) {
-                    item.classList.add('active');
-                } else if (index === (currentIndex - 1 + items.length) % items.length) {
-                    item.classList.add('left');
-                } else if (index === (currentIndex + 1) % items.length) {
-                    item.classList.add('right');
-                }
-            });
-        }
-
-        function prevSlide() {
-            currentIndex = (currentIndex - 1 + items.length) % items.length;
-            updateCarousel();
-            resetAutoPlay(); // 重置自动播放计时器
-        }
-
-        function nextSlide() {
-            currentIndex = (currentIndex + 1) % items.length;
-            updateCarousel();
-            resetAutoPlay(); // 重置自动播放计时器
-        }
-
-        // 开始自动播放
-        function startAutoPlay() {
-            autoPlayTimer = setInterval(nextSlide, 10000); // 每10秒自动切换到下一张
-        }
- 
-        // 重置自动播放计时器
-        function resetAutoPlay() {
-            clearInterval(autoPlayTimer);
-            startAutoPlay();
+            // 滚动完成后隐藏按钮
+            document.getElementById('backToTopBtn').style.display = 'none';
         }
 
         // 搜索功能
@@ -656,7 +1019,6 @@
             // 显示和隐藏广告逻辑
             searchResults.style.display = 'block';
             document.getElementById('result').style.display = 'none';
-            document.getElementById('carousel').style.display = 'none';
             document.getElementById('backToTopBtn').style.display = 'block';
 
             try {
@@ -730,36 +1092,45 @@
                 const documents = await response.json();
                 console.log('Fetched documents:', documents);
 
-                const documentList = window.document.getElementById('documentList');
-                const documentationText = window.document.getElementById('documentationText');
+                const documentList = document.getElementById('documentList');
+                const documentationText = document.getElementById('documentationText');
                 
                 if (Array.isArray(documents) && documents.length > 0) {
                     documentList.innerHTML = '<h2>文档列表</h2>';
-                    const ul = window.document.createElement('ul');
+                    const ul = document.createElement('ul');
                     documents.forEach(doc => {
                         if (doc && doc.id && doc.title) {
-                            const li = window.document.createElement('li');
-                            li.innerHTML = `<a href="javascript:void(0);" onclick="showDocument('${doc.id}')">${doc.title}</a>`;
+                            const li = document.createElement('li');
+                            const link = document.createElement('a');
+                            link.href = 'javascript:void(0);';
+                            link.textContent = doc.title;
+                            link.onclick = () => {
+                                // 移除其他链接的active类
+                                document.querySelectorAll('#documentList a').forEach(a => a.classList.remove('active'));
+                                // 添加当前链接的active类
+                                link.classList.add('active');
+                                showDocument(doc.id);
+                            };
+                            li.appendChild(link);
                             ul.appendChild(li);
                         }
                     });
                     documentList.appendChild(ul);
                     
-                    // 默认显示第一篇文档
+                    // 默认选中第一个文档
                     if (documents[0] && documents[0].id) {
-                        showDocument(documents[0].id);
-                    } else {
-                        documentationText.innerHTML = '无法显示文档，文档 ID 无效';
+                        const firstLink = ul.querySelector('a');
+                        if (firstLink) {
+                            firstLink.classList.add('active');
+                            showDocument(documents[0].id);
+                        }
                     }
                 } else {
                     documentationText.innerHTML = '暂无文档内容';
                 }
-                window.document.getElementById('carousel').style.display = 'none';
             } catch (error) {
                 console.error('获取文档列表失败:', error);
-                const documentationText = window.document.getElementById('documentationText');
-                documentationText.innerHTML = '加载文档列表失败，请稍后再试。错误详情: ' + error.message;
-                window.document.getElementById('carousel').style.display = 'flex';
+                document.getElementById('documentationText').innerHTML = '加载文档列表失败，请稍后再试。错误详情: ' + error.message;
             }
         }
 
@@ -770,20 +1141,49 @@
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
-                const document = await response.json();
-                console.log('Fetched document:', document);
+                const documentData = await response.json();
+                console.log('Fetched document:', documentData);
 
-                const documentationText = window.document.getElementById('documentationText');
+                const documentationText = document.getElementById('documentationText');
                 
-                if (document && document.content && document.content.trim() !== '') {
-                    documentationText.innerHTML = `<h2>${document.title || '无标题'}</h2>` + marked.parse(document.content);
+                if (documentData && documentData.content && documentData.content.trim() !== '') {
+                    // 渲染文档内容
+                    documentationText.innerHTML = `<h2>${documentData.title || '无标题'}</h2>` + marked.parse(documentData.content);
+                    
+                    // 为所有代码块添加复制按钮和终端样式
+                    const codeBlocks = documentationText.querySelectorAll('pre code');
+                    codeBlocks.forEach((codeBlock) => {
+                        const pre = codeBlock.parentElement;
+                        const code = codeBlock.textContent;
+                        
+                        // 创建终端风格容器
+                        const wrapper = document.createElement('div');
+                        wrapper.className = 'command-terminal';
+                        wrapper.innerHTML = `
+                            <div class="terminal-header">
+                                <div class="terminal-button button-red"></div>
+                                <div class="terminal-button button-yellow"></div>
+                                <div class="terminal-button button-green"></div>
+                            </div>
+                        `;
+                        
+                        // 创建复制按钮
+                        const copyButton = document.createElement('button');
+                        copyButton.className = 'copy-btn';
+                        copyButton.textContent = '复制';
+                        copyButton.onclick = () => copyToClipboard(code, copyButton);
+                        
+                        // 正确的DOM操作顺序
+                        pre.parentNode.insertBefore(wrapper, pre);  // 1. 先将wrapper插入到pre前面
+                        wrapper.appendChild(pre);                   // 2. 将pre移动到wrapper内
+                        pre.appendChild(copyButton);               // 3. 将复制按钮添加到pre内
+                    });
                 } else {
                     documentationText.innerHTML = '该文档没有内容或格式不正确';
                 }
             } catch (error) {
                 console.error('获取文档内容失败:', error);
-                const documentationText = window.document.getElementById('documentationText');
-                documentationText.innerHTML = '加载文档内容失败，请稍后再试。错误详情: ' + error.message;
+                document.getElementById('documentationText').innerHTML = '加载文档内容失败，请稍后再试。错误详情: ' + error.message;
             }
         }
 
@@ -793,35 +1193,6 @@
                 const response = await fetch('/api/config');
                 const config = await response.json();
 
-                if (config.adImages && Array.isArray(config.adImages)) {
-                    const carouselInner = document.getElementById('carouselInner');
-                    carouselInner.innerHTML = ''; // 清空广告容器
-                    config.adImages.forEach((ad, index) => {
-                        const adItem = document.createElement('div');
-                        adItem.className = 'carousel-item';
-                        if (index === 0) {
-                            adItem.classList.add('active');
-                        }
-                        const adImage = document.createElement('img');
-                        adImage.src = ad.url;
-                        adImage.alt = ad.alt || '广告图片';
-                        adImage.style.width = "100%";
-                        adImage.style.height = "100%";
-                        adItem.appendChild(adImage);
-                        carouselInner.appendChild(adItem);
-
-                        // 添加点击事件监听器
-                        adItem.addEventListener('click', function() {
-                            window.open(ad.link, '_blank');
-                        });
-
-                        // 改变鼠标样式，表明可以点击
-                        adItem.style.cursor = 'pointer';
-                    });
-                    items = document.querySelectorAll('.carousel-item');
-                    updateCarousel();
-                    startAutoPlay(); // 启动自动播放
-                }
                 if (config.logo) {
                     document.querySelector('.logo').src = config.logo;
                 }
@@ -838,35 +1209,6 @@
                         navMenu.appendChild(a);
                     });
                 }
-                if (config.adImages && Array.isArray(config.adImages)) {
-                    const carouselInner = document.getElementById('carouselInner');
-                    carouselInner.innerHTML = ''; // 清空广告容器
-                    config.adImages.forEach((ad, index) => {
-                        const adItem = document.createElement('div');
-                        adItem.className = 'carousel-item';
-                        if (index === 0) {
-                            adItem.classList.add('active');
-                        }
-                        const adImage = document.createElement('img');
-                        adImage.src = ad.url;
-                        adImage.alt = ad.alt || '广告图片';
-                        adImage.style.width = "100%";
-                        adImage.style.height = "100%";
-                        adItem.appendChild(adImage);
-                        carouselInner.appendChild(adItem);
-
-                        // 添加点击事件监听器
-                        adItem.addEventListener('click', function() {
-                            window.open(ad.link, '_blank');
-                        });
-
-                        // 改变鼠标样式，表明可以点击
-                        adItem.style.cursor = 'pointer';
-                    });
-                    items = document.querySelectorAll('.carousel-item');
-                    updateCarousel();
-                    startAutoPlay(); // 启动自动播放
-                }
                 if (config.proxyDomain) {
                     proxyDomain = config.proxyDomain;
                 }
@@ -881,12 +1223,14 @@
         }
 
         loadConfig();
-        // 当页面不可见时暂停自动播放，可见时恢复
-        document.addEventListener("visibilitychange", function() {
-            if (document.hidden) {
-                clearInterval(autoPlayTimer);
+
+        // 添加滚动监听事件
+        window.addEventListener('scroll', function() {
+            const backToTopBtn = document.getElementById('backToTopBtn');
+            if (window.scrollY > 300) {
+                backToTopBtn.style.display = 'flex';
             } else {
-                startAutoPlay();
+                backToTopBtn.style.display = 'none';
             }
         });
     </script>