|
<!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> |
