feat: Add responsive styles for auth and keys status pages

- Implement media queries to improve layout and UI for smaller screen sizes on `auth.html` and `keys_status.html`. - Adjust container widths, font sizes, padding, and other styles for screen widths below 768px and 480px. - Enhance mobile usability by making elements stack vertically, resizing fonts, and optimizing spacing for better readability and interaction.
Refactor keys_status.html for improved layout and scrolling behavior
2026-07-04 14:21:27 +08:00 · 2025-02-12 15:46:37 +08:00 · 2025-02-12 15:30:44 +08:00 · 2025-02-12 15:16:22 +08:00 · 2025-02-12 14:46:34 +08:00 · 2025-02-12 14:20:46 +08:00
4 changed files with 467 additions and 80 deletions
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -2,7 +2,7 @@ name: Docker Image CI

 on:
  push:
-    branches: [ "main" ]
+    # branches: [ "main" ]
    tags: [ 'v*.*.*' ]
  pull_request:
    branches: [ "main" ]
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -24,10 +24,6 @@ jobs:
        with:
          tag_name: ${{ github.ref_name }}
          release_name: ${{ github.ref_name }}
-          body: |
-            ## Release Notes
-            - 自动发布版本。
-            - 请根据需求更新对应内容。
          draft: false
          prerelease: false
      
@@ -45,4 +41,4 @@ jobs:
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          asset_path: ./gemini-balance.zip # 替换为你的构建文件路径
          asset_name: gemini-balance.zip  # 替换为你的文件名
-          asset_content_type: application/zip
+          asset_content_type: application/zip
--- a/app/templates/auth.html
+++ b/app/templates/auth.html
@@ -5,13 +5,14 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证页面</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
@@ -20,66 +21,205 @@
        .container {
            max-width: 400px;
            width: 90%;
-            background: white;
+            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+            backdrop-filter: blur(10px);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                width: 85%;
+                padding: 30px;
+            }
+            .logo i {
+                font-size: 40px;
+            }
+            h2 {
+                font-size: 22px;
+            }
+            input {
+                padding: 10px 10px 10px 35px;
+                font-size: 15px;
+            }
+            .input-group i {
+                font-size: 16px;
+            }
+            button {
+                padding: 12px;
+                font-size: 15px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                width: 90%;
+                padding: 25px;
+            }
+            .logo i {
+                font-size: 36px;
+            }
+            h2 {
+                font-size: 20px;
+                margin-bottom: 25px;
+            }
+            form {
+                gap: 15px;
+            }
+            input {
+                padding: 10px 10px 10px 32px;
+                font-size: 14px;
+            }
+            .input-group i {
+                font-size: 15px;
+                left: 10px;
+            }
+            button {
+                padding: 10px;
+                font-size: 14px;
+            }
+            .error-message {
+                font-size: 14px;
+                padding: 8px;
+                margin-top: 12px;
+            }
        }
        .container:hover {
            transform: translateY(-5px);
-            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
+        }
+        .logo {
+            text-align: center;
+            margin-bottom: 30px;
+            animation: fadeIn 1s ease;
+        }
+        .logo i {
+            font-size: 48px;
+            color: #764ba2;
+            margin-bottom: 15px;
        }
        h2 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
+            font-size: 24px;
+            animation: slideDown 0.5s ease;
        }
        form {
            display: flex;
            flex-direction: column;
+            gap: 20px;
+        }
+        .input-group {
+            position: relative;
+            animation: slideUp 0.5s ease;
+        }
+        .input-group i {
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #764ba2;
+            font-size: 18px;
        }
        input {
-            margin: 10px 0;
-            padding: 12px;
-            border: 1px solid #e0e0e0;
-            border-radius: 5px;
+            width: 100%;
+            padding: 12px 12px 12px 40px;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
            font-size: 16px;
+            box-sizing: border-box;
            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.9);
        }
        input:focus {
-            border-color: #3498db;
-            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+            border-color: #764ba2;
+            box-shadow: 0 0 10px rgba(118, 75, 162, 0.2);
+            outline: none;
        }
        button {
-            background-color: #3498db;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
-            padding: 12px;
-            border-radius: 5px;
+            padding: 14px;
+            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
-            transition: background-color 0.3s ease;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
        }
        button:hover {
-            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        button::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        button:active::after {
+            width: 200px;
+            height: 200px;
+            opacity: 0;
        }
        .error-message {
            color: #e74c3c;
            margin-top: 15px;
            text-align: center;
            font-weight: bold;
+            padding: 10px;
+            border-radius: 5px;
+            background: rgba(231, 76, 60, 0.1);
+            animation: shake 0.5s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes slideDown {
+            from { transform: translateY(-20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            75% { transform: translateX(5px); }
        }
    </style>
 </head>
 <body>
    <div class="container">
-        <h2>请输入验证令牌</h2>
+        <div class="logo">
+            <i class="fas fa-shield-alt"></i>
+        </div>
+        <h2>安全验证</h2>
        <form id="auth-form" action="/auth" method="post">
-            <input type="password" id="auth-token" name="auth_token" required placeholder="输入验证令牌">
-            <button type="submit">提交</button>
+            <div class="input-group">
+                <i class="fas fa-key"></i>
+                <input type="password" id="auth-token" name="auth_token" required placeholder="请输入验证令牌">
+            </div>
+            <button type="submit">
+                验证访问
+            </button>
        </form>
        {% if error %}
        <p class="error-message">{{ error }}</p>
--- a/app/templates/keys_status.html
+++ b/app/templates/keys_status.html
@@ -5,107 +5,290 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API密钥状态</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            margin: 0;
-            padding: 0;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
        }
        .container {
            max-width: 900px;
-            width: 90%;
-            background: white;
+            width: 95%;
+            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+            backdrop-filter: blur(10px);
+            position: relative;
+            margin: 20px auto;
        }
-        .container:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+
+        @media (max-width: 768px) {
+            .container {
+                width: 100%;
+                padding: 20px;
+                margin: 10px auto;
+            }
+            body {
+                padding: 10px;
+            }
+            h1 {
+                font-size: 24px;
+            }
+            .key-list h2 {
+                font-size: 1.2em;
+                flex-direction: column;
+                gap: 10px;
+                align-items: flex-start;
+            }
+            .key-info {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+            li {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .copy-btn {
+                width: 100%;
+                justify-content: center;
+            }
+            .key-text {
+                word-break: break-all;
+            }
+            .scroll-buttons {
+                right: 10px;
+                bottom: 10px;
+            }
+            .scroll-btn {
+                width: 35px;
+                height: 35px;
+                font-size: 16px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                padding: 15px;
+            }
+            h1 {
+                font-size: 20px;
+            }
+            .key-list {
+                padding: 15px;
+            }
+            .status-badge {
+                padding: 3px 8px;
+                font-size: 0.8em;
+            }
+            .fail-count {
+                font-size: 0.8em;
+            }
+            .total {
+                font-size: 1em;
+                padding: 12px 20px;
+            }
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
+            font-size: 32px;
+            position: relative;
+            padding-bottom: 15px;
+        }
+        h1::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 4px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 2px;
        }
        .key-list {
            margin-bottom: 30px;
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 10px;
+            background: rgba(248, 249, 250, 0.9);
+            padding: 25px;
+            border-radius: 15px;
            transition: all 0.3s ease;
+            border: 1px solid rgba(0,0,0,0.1);
        }
        .key-list:hover {
-            background: #e9ecef;
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .key-list h2 {
            color: #2c3e50;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.5em;
+            padding-bottom: 10px;
+            border-bottom: 2px solid rgba(0,0,0,0.1);
        }
        ul {
            list-style-type: none;
            padding: 0;
+            margin: 0;
        }
        li {
            background: white;
-            border: 1px solid #e0e0e0;
-            margin-bottom: 10px;
-            padding: 12px;
-            border-radius: 5px;
-            transition: all 0.2s ease;
+            border: 1px solid rgba(0,0,0,0.1);
+            margin-bottom: 12px;
+            padding: 15px;
+            border-radius: 10px;
+            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        li:hover {
            transform: translateX(5px);
-            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
-        .total {
-            font-weight: bold;
-            margin-top: 20px;
-            text-align: center;
-            font-size: 1.2em;
+        .key-info {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex: 1;
+        }
+        .key-text {
+            font-family: 'Roboto Mono', monospace;
            color: #2c3e50;
        }
+        .fail-count {
+            background: rgba(231, 76, 60, 0.1);
+            color: #e74c3c;
+            padding: 4px 10px;
+            border-radius: 15px;
+            font-size: 0.85em;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .fail-count i {
+            font-size: 12px;
+        }
        .copy-btn {
-            background-color: #3498db;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 8px 15px;
-            border-radius: 5px;
+            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
-            transition: background-color 0.3s ease;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 5px;
        }
        .copy-btn:hover {
-            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3);
+        }
+        .copy-btn:active {
+            transform: translateY(0);
+        }
+        .copy-btn i {
+            font-size: 14px;
+        }
+        .total {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 10px;
+            font-weight: bold;
+            text-align: center;
+            font-size: 1.2em;
+            margin-top: 30px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        #copyStatus {
-            text-align: center;
-            margin-top: 20px;
-            color: #27ae60;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(39, 174, 96, 0.95);
+            color: white;
+            padding: 15px 30px;
+            border-radius: 25px;
            font-weight: bold;
            opacity: 0;
-            transition: opacity 0.3s ease;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            z-index: 1000;
+            text-align: center;
+            min-width: 200px;
        }
-        .fail-count {
-            color: #e74c3c;
+        .status-badge {
+            padding: 4px 12px;
+            border-radius: 15px;
            font-size: 0.9em;
-            margin-left: 10px;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+        .status-valid {
+            background: rgba(39, 174, 96, 0.1);
+            color: #27ae60;
+        }
+        .status-invalid {
+            background: rgba(231, 76, 60, 0.1);
+            color: #e74c3c;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .key-list {
+            animation: fadeIn 0.5s ease forwards;
+        }
+        .key-list:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1000;
+        }
+        .scroll-btn {
+            background: rgba(118, 75, 162, 0.9);
+            color: white;
+            width: 40px;
+            height: 40px;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+        }
+        .scroll-btn:hover {
+            background: rgba(102, 126, 234, 0.9);
+            transform: scale(1.1);
+        }
+        .scroll-btn:active {
+            transform: scale(0.95);
        }
    </style>
 </head>
@@ -114,40 +297,84 @@
        <h1>API密钥状态</h1>
        <div class="key-list">
            <h2>
-                有效密钥
-                <button class="copy-btn" onclick="copyKeys('valid')">一键复制</button>
+                <span>
+                    <i class="fas fa-check-circle" style="color: #27ae60;"></i>
+                    有效密钥
+                </span>
+                <button class="copy-btn" onclick="copyKeys('valid')">
+                    <i class="fas fa-copy"></i>
+                    批量复制
+                </button>
            </h2>
            <ul id="validKeys">
                {% for key, fail_count in valid_keys.items() %}
                    <li>
-                        <span>{{ key }}</span>
-                        <span class="fail-count">(失败次数: {{ fail_count }})</span>
-                        <button class="copy-btn" onclick="copyKey('{{ key }}')">复制</button>
+                        <div class="key-info">
+                            <span class="status-badge status-valid">
+                                <i class="fas fa-check"></i> 有效
+                            </span>
+                            <span class="key-text">{{ key }}</span>
+                            <span class="fail-count">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                失败: {{ fail_count }}
+                            </span>
+                        </div>
+                        <button class="copy-btn" onclick="copyKey('{{ key }}')">
+                            <i class="fas fa-copy"></i>
+                            复制
+                        </button>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="key-list">
            <h2>
-                无效密钥
-                <button class="copy-btn" onclick="copyKeys('invalid')">一键复制</button>
+                <span>
+                    <i class="fas fa-times-circle" style="color: #e74c3c;"></i>
+                    无效密钥
+                </span>
+                <button class="copy-btn" onclick="copyKeys('invalid')">
+                    <i class="fas fa-copy"></i>
+                    批量复制
+                </button>
            </h2>
            <ul id="invalidKeys">
                {% for key, fail_count in invalid_keys.items() %}
                    <li>
-                        <span>{{ key }}</span>
-                        <span class="fail-count">(失败次数: {{ fail_count }})</span>
-                        <button class="copy-btn" onclick="copyKey('{{ key }}')">复制</button>
+                        <div class="key-info">
+                            <span class="status-badge status-invalid">
+                                <i class="fas fa-times"></i> 无效
+                            </span>
+                            <span class="key-text">{{ key }}</span>
+                            <span class="fail-count">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                失败: {{ fail_count }}
+                            </span>
+                        </div>
+                        <button class="copy-btn" onclick="copyKey('{{ key }}')">
+                            <i class="fas fa-copy"></i>
+                            复制
+                        </button>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="total">
-            总密钥数：{{ total }}
+            <i class="fas fa-key"></i> 总密钥数：{{ total }}
        </div>
-        <div id="copyStatus"></div>
    </div>

+    <div class="scroll-buttons">
+        <button class="scroll-btn" onclick="scrollToTop()" title="回到顶部">
+            <i class="fas fa-chevron-up"></i>
+        </button>
+        <button class="scroll-btn" onclick="scrollToBottom()" title="滚动到底部">
+            <i class="fas fa-chevron-down"></i>
+        </button>
+    </div>
+
+    <div id="copyStatus"></div>
+
    <script>
        function copyToClipboard(text) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -177,12 +404,12 @@
        }

        function copyKeys(type) {
-            const keys = Array.from(document.querySelectorAll(`#${type}Keys li span:first-child`)).map(span => span.textContent.trim());
+            const keys = Array.from(document.querySelectorAll(`#${type}Keys .key-text`)).map(span => span.textContent.trim());
            const jsonKeys = JSON.stringify(keys);
            
            copyToClipboard(jsonKeys)
                .then(() => {
-                    showCopyStatus(`已成功复制 ${type === 'valid' ? '有效' : '无效'} 密钥到剪贴板`);
+                    showCopyStatus(`已成功复制${type === 'valid' ? '有效' : '无效'}密钥到剪贴板`);
                })
                .catch((err) => {
                    console.error('无法复制文本: ', err);
@@ -209,6 +436,30 @@
                statusElement.style.opacity = 0;
            }, 2000);
        }
+
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+
+        function scrollToBottom() {
+            window.scrollTo({
+                top: document.documentElement.scrollHeight,
+                behavior: 'smooth'
+            });
+        }
+
+        // 监听窗口滚动事件来显示/隐藏滚动按钮
+        window.addEventListener('scroll', function() {
+            const scrollButtons = document.querySelector('.scroll-buttons');
+            if (window.scrollY > 100) {
+                scrollButtons.style.display = 'flex';
+            } else {
+                scrollButtons.style.display = 'none';
+            }
+        });
    </script>
 </body>
 </html>
Author	SHA1	Message	Date
yinpeng	3aa4384b9d	feat: Add responsive styles for auth and keys status pages - Implement media queries to improve layout and UI for smaller screen sizes on `auth.html` and `keys_status.html`. - Adjust container widths, font sizes, padding, and other styles for screen widths below 768px and 480px. - Enhance mobile usability by making elements stack vertically, resizing fonts, and optimizing spacing for better readability and interaction.	2025-02-12 15:46:37 +08:00
yinpeng	6db4b56186	Refactor keys_status.html for improved layout and scrolling behavior - Removed duplicated padding and simplified CSS for `body`, ensuring proper spacing with 20px padding. - Adjusted `.container` styles: - Removed custom scrollbar styles and overflow-related attributes. - Centered the element with `margin: 20px auto`. - Updated scroll behavior: - Changed scroll functions to operate on `window` instead of `.container`. - Modified event listeners to use `window` for detecting scroll events. - Cleaned up redundant or unused styles and improved readability.	2025-02-12 15:30:44 +08:00
yinpeng	8e77773d5a	Enhance UI/UX for keys_status.html - Added smooth scroll functionality with "Scroll to Top" and "Scroll to Bottom" buttons. - Introduced a `scroll-buttons` section with styled buttons for scrolling. - Improved `#copyStatus` styling for better visibility and alignment. - Adjusted `.container` to support scrollable content with hidden scrollbars and a max-height. - Ensured proper z-index for new elements to prevent overlapping issues. - Enhanced hover and active states for scroll buttons to improve user experience. - Added event listeners to dynamically show/hide scroll buttons based on user scroll position.	2025-02-12 15:16:22 +08:00
yinpeng	343f40476a	feat: Improve UI/UX for API Key Status page and add enhancements - Updated the overall design aesthetics of the authentication page. - Added `fadeIn`, `slideDown`, `slideUp`, and `shake` animations for better user interaction. - Improved error message styling with a subtle background, padding, and animation. - Enhanced "API Key Status" page: - Implemented new theme with gradient backgrounds and glassmorphism effect. - Redesigned headings with underlines and improved hierarchy. - Added FontAwesome icons to improve the visual appeal and clarity (e.g., checkmarks, warnings, keys). - Applied better spacing, padding, and hover effects to list items and buttons. - Introduced animations for key lists to create fluid transitions on page load. - Differentiated valid and invalid keys using badges with appropriate colors and icons. - Copy Key Interaction: - Improved key copying functionality: - Added animations and hover effects to "Copy" buttons. - Updated the copied key selector logic to target `.key-text` for cleaner code. - Changed copy confirmation message for better clarity. - Styled the copy success message (`#copyStatus`) to appear fixed at the bottom with a blur effect. - Key List Enhancements: - Added fail count badges for individual keys with red warning styles. - Styled buttons for batch copying to display icons alongside text, matching the overall design. - Accessibility and Readability: - Refactored text sizes, weights, and alignments for smoother readability. - Enhanced color contrast and alignment for better accessibility. Notes: - New CSS animations have been smoothly integrated with no breaking changes. - All changes prioritize maintaining current functionality while enhancing user experience.	2025-02-12 14:46:34 +08:00
yinpeng	e024d55006	feat: update workflows for docker and release processes - Updated `.github/workflows/docker-publish.yml`: - Commented out the branch trigger for `main` in the `push` event to allow only tag-based Docker builds (tags like `v..*`). - Updated `.github/workflows/release.yml`: - Removed default release body template containing placeholder release notes. This simplifies the release creation process and avoids predefined content. - No functional changes to release asset upload configurations, minor format adjustment to ensure no missing newline at the file end.	2025-02-12 14:20:46 +08:00