refactor(static): 将 CSS 和 JS 代码分离到单独的文件中

- 将 auth.html 中的 CSS 代码提取到 auth.css 文件中 - 将 auth.html 中的 JS 代码提取到 auth.js 文件中 - 更新 auth.html，引入外部的 CSS 和 JS 文件 - 新增 keys_status.css 和 keys_status.js 文件，用于 keys_status 页面
snailyp · Feb 13, 2025 · 7b433aa · 7b433aa
1 parent fc7280b
commit 7b433aa
Show file tree

Hide file tree

Showing 6 changed files with 831 additions and 771 deletions.
diff --git a/app/static/css/auth.css b/app/static/css/auth.css
@@ -0,0 +1,249 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    max-width: 400px;
+    width: 90%;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 40px;
+    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);
+}
+
+.container:hover {
+    transform: translateY(-5px);
+    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 {
+    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: #764ba2;
+    box-shadow: 0 0 10px rgba(118, 75, 162, 0.2);
+    outline: none;
+}
+
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 14px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+button:hover {
+    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;
+}
+
+.copyright {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 10px 0;
+    text-align: center;
+    font-size: 14px;
+    color: #2c3e50;
+    backdrop-filter: blur(5px);
+    border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.copyright a {
+    color: #764ba2;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.copyright a:hover {
+    color: #667eea;
+}
+
+.copyright img {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+@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); }
+}
+
+@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;
+    }
+}