| <!DOCTYPE html> |
| <html lang="zh"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>登录 - HF Space Manager</title> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-color: #00ff9d; |
| --primary-dark: #00cc7d; |
| --secondary-color: #ff00ff; |
| --background-color: #0a0b0f; |
| --card-background: #12141c; |
| --text-primary: #ffffff; |
| --text-secondary: #7f8ea3; |
| --border-color: #1e2029; |
| --card-border: 1px solid #2a2d3a; |
| --card-glow: 0 0 20px rgba(0, 255, 157, 0.1); |
| --border-radius: 12px; |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| } |
| |
| body { |
| background-color: var(--background-color); |
| background-image: |
| radial-gradient(circle at 10% 20%, rgba(0, 255, 157, 0.03) 0%, transparent 20%), |
| radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.03) 0%, transparent 20%); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| color: var(--text-primary); |
| } |
| |
| .container { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| padding: 2rem; |
| position: relative; |
| } |
| |
| .container::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle at center, rgba(0, 255, 157, 0.03) 0%, transparent 70%); |
| pointer-events: none; |
| } |
| |
| .logo { |
| font-size: 2.5rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 2rem; |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); |
| animation: glow 2s ease-in-out infinite alternate; |
| } |
| |
| @keyframes glow { |
| from { |
| text-shadow: 0 0 10px rgba(0, 255, 157, 0.3); |
| } |
| to { |
| text-shadow: 0 0 20px rgba(0, 255, 157, 0.5); |
| } |
| } |
| |
| .logo i { |
| color: var(--primary-color); |
| } |
| |
| .login-card { |
| background: var(--card-background); |
| padding: 2.5rem; |
| border-radius: var(--border-radius); |
| border: var(--card-border); |
| box-shadow: var(--card-glow); |
| width: 100%; |
| max-width: 400px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .login-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, var(--primary-color), transparent); |
| opacity: 0.5; |
| } |
| |
| .form-group { |
| margin-bottom: 1.5rem; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 0.5rem; |
| color: var(--text-primary); |
| font-weight: 500; |
| font-size: 0.9rem; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| input { |
| width: 100%; |
| padding: 0.75rem 1rem; |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid var(--border-color); |
| border-radius: 6px; |
| color: var(--text-primary); |
| font-size: 1rem; |
| transition: var(--transition); |
| } |
| |
| input:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.1); |
| } |
| |
| button { |
| width: 100%; |
| padding: 0.875rem; |
| background: rgba(0, 255, 157, 0.1); |
| border: 1px solid var(--primary-color); |
| border-radius: 6px; |
| color: var(--primary-color); |
| font-size: 1rem; |
| font-weight: 500; |
| cursor: pointer; |
| transition: var(--transition); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| } |
| |
| button:hover { |
| background: var(--primary-color); |
| color: var(--background-color); |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.3); |
| } |
| |
| .error-message { |
| background: rgba(255, 45, 85, 0.1); |
| border: 1px solid #ff2d55; |
| color: #ff2d55; |
| padding: 0.75rem 1rem; |
| border-radius: 6px; |
| margin-bottom: 1.5rem; |
| font-size: 0.9rem; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .footer { |
| text-align: center; |
| padding: 2rem; |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| background: rgba(18, 20, 28, 0.5); |
| backdrop-filter: blur(10px); |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .footer a { |
| color: var(--primary-color); |
| text-decoration: none; |
| transition: var(--transition); |
| } |
| |
| .footer a:hover { |
| text-shadow: 0 0 10px var(--primary-color); |
| } |
| |
| @media (max-width: 480px) { |
| .container { |
| padding: 1rem; |
| } |
| |
| .login-card { |
| padding: 1.5rem; |
| } |
| |
| .logo { |
| font-size: 2rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="logo"> |
| <i class="fas fa-server"></i> |
| HF Space Manager |
| </div> |
| <form method="post" class="login-card"> |
| <div class="form-group"> |
| <label for="username">用户名</label> |
| <input type="text" id="username" name="username" required autocomplete="username"> |
| </div> |
| <div class="form-group"> |
| <label for="password">密码</label> |
| <input type="password" id="password" name="password" required autocomplete="current-password"> |
| </div> |
| {% if error %} |
| <div class="error-message"> |
| <i class="fas fa-exclamation-circle"></i> |
| {{ error }} |
| </div> |
| {% endif %} |
| <button type="submit"> |
| <i class="fas fa-sign-in-alt"></i> |
| 登录 |
| </button> |
| </form> |
| </div> |
|
|
| <footer class="footer"> |
| <a href="https://github.com/ssfun/hf-space-manager">HF Space Manager</a> 由 |
| <a href="https://github.com/ssfun">ssfun</a> 构建，源代码遵循 |
| <a href="https://github.com/zhanghxiao">MistPeak</a> 二次开发遵循 |
| <a href="https://opensource.org/license/mit">MIT 协议</a> |
| </footer> |
| </body> |
| </html> |
