240 lines
8.9 KiB
HTML
240 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>可乐 - 暗色极简登录</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
:root{
|
|
--bg:#0d1117;--surface:#161b22;--border:#21262d;
|
|
--text:#e6edf3;--text-dim:#8b949e;--text-muted:#484f58;
|
|
--accent:#58a6ff;--accent-glow:rgba(88,166,255,0.15);
|
|
--green:#3fb950;--green-glow:rgba(63,185,80,0.12);
|
|
--input-bg:#0d1117;--input-hover:#1c2128;
|
|
}
|
|
|
|
body{
|
|
font-family:'Noto Sans SC','JetBrains Mono',system-ui,sans-serif;
|
|
min-height:100vh;display:flex;align-items:center;justify-content:center;
|
|
background:var(--bg);color:var(--text);
|
|
}
|
|
|
|
/* 微妙网格背景 */
|
|
body::before{
|
|
content:'';position:fixed;inset:0;z-index:0;
|
|
background-image:
|
|
linear-gradient(rgba(88,166,255,0.03) 1px,transparent 1px),
|
|
linear-gradient(90deg,rgba(88,166,255,0.03) 1px,transparent 1px);
|
|
background-size:48px 48px;
|
|
}
|
|
|
|
.card{
|
|
position:relative;z-index:1;
|
|
width:380px;max-width:92vw;
|
|
padding:0;
|
|
}
|
|
|
|
/* Logo */
|
|
.header{text-align:center;margin-bottom:40px}
|
|
.header .logo{
|
|
display:inline-flex;align-items:center;justify-content:center;
|
|
width:48px;height:48px;border-radius:12px;margin-bottom:16px;
|
|
background:var(--surface);border:1px solid var(--border);
|
|
font-size:24px;
|
|
}
|
|
.header h1{font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px}
|
|
.header p{font-size:13px;color:var(--text-dim)}
|
|
|
|
/* Tab - 用下划线风格 */
|
|
.tabs{display:flex;margin-bottom:28px;border-bottom:1px solid var(--border)}
|
|
.tab{
|
|
flex:1;padding:10px 0;text-align:center;font-size:13px;font-weight:500;
|
|
color:var(--text-dim);background:none;border:none;cursor:pointer;
|
|
border-bottom:2px solid transparent;margin-bottom:-1px;
|
|
transition:all .15s;font-family:inherit;
|
|
}
|
|
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
|
|
.tab:hover:not(.active){color:var(--text)}
|
|
|
|
/* 表单 */
|
|
.form{display:none}
|
|
.form.active{display:block}
|
|
|
|
.input-group{margin-bottom:16px}
|
|
.input-group label{
|
|
display:block;font-size:12px;font-weight:500;color:var(--text-dim);
|
|
margin-bottom:6px;font-family:'JetBrains Mono',monospace;
|
|
letter-spacing:.3px;
|
|
}
|
|
.field{position:relative;display:flex;align-items:center}
|
|
.field input{
|
|
width:100%;padding:12px 14px;font-size:14px;
|
|
background:var(--input-bg);border:1px solid var(--border);
|
|
border-radius:8px;color:var(--text);font-family:inherit;
|
|
outline:none;transition:all .15s;
|
|
}
|
|
.field input:hover{border-color:#30363d;background:var(--input-hover)}
|
|
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
|
|
.field input::placeholder{color:var(--text-muted)}
|
|
|
|
.field .toggle-pwd{
|
|
position:absolute;right:12px;background:none;border:none;
|
|
color:var(--text-muted);cursor:pointer;font-size:16px;padding:4px;
|
|
}
|
|
.field .toggle-pwd:hover{color:var(--text-dim)}
|
|
|
|
.code-btn{
|
|
position:absolute;right:8px;
|
|
padding:6px 12px;border-radius:6px;border:1px solid var(--border);
|
|
background:var(--surface);color:var(--accent);font-size:12px;font-weight:500;
|
|
cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit;
|
|
}
|
|
.code-btn:hover{background:var(--accent-glow);border-color:var(--accent)}
|
|
.code-btn:disabled{opacity:.3;cursor:not-allowed}
|
|
|
|
.links{display:flex;justify-content:flex-end;margin-bottom:20px}
|
|
.links a{font-size:12px;color:var(--text-muted);text-decoration:none;transition:color .15s}
|
|
.links a:hover{color:var(--accent)}
|
|
|
|
/* 按钮 - Ghost 风格 */
|
|
.btn-primary{
|
|
width:100%;padding:12px;border:1px solid var(--green);border-radius:8px;
|
|
background:var(--green-glow);color:var(--green);font-size:14px;font-weight:600;
|
|
cursor:pointer;font-family:inherit;transition:all .15s;
|
|
}
|
|
.btn-primary:hover{background:var(--green);color:#000}
|
|
.btn-primary:active{opacity:.9}
|
|
|
|
.btn-secondary{
|
|
width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;
|
|
background:transparent;color:var(--text);font-size:14px;font-weight:500;
|
|
cursor:pointer;font-family:inherit;transition:all .15s;
|
|
}
|
|
.btn-secondary:hover{border-color:var(--text-muted);background:var(--surface)}
|
|
|
|
.btn-row{display:flex;gap:10px;margin-bottom:20px}
|
|
.btn-row>*{flex:1}
|
|
|
|
.divider{display:flex;align-items:center;gap:12px;margin:20px 0}
|
|
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
|
|
.divider span{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:1px}
|
|
|
|
.social{display:flex;justify-content:center;gap:10px}
|
|
.social-btn{
|
|
flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);
|
|
background:var(--surface);display:flex;align-items:center;justify-content:center;
|
|
gap:8px;cursor:pointer;transition:all .15s;font-size:13px;color:var(--text-dim);
|
|
font-family:inherit;
|
|
}
|
|
.social-btn:hover{border-color:var(--text-muted);background:var(--input-hover);color:var(--text)}
|
|
.social-btn .icon{font-size:16px}
|
|
|
|
.footer{text-align:center;margin-top:28px;font-size:11px;color:var(--text-muted)}
|
|
|
|
/* 邮箱验证登录方式 */
|
|
.email-login-section{margin-bottom:16px}
|
|
.email-login-tabs{display:flex;gap:0;margin-bottom:16px}
|
|
.email-tab{
|
|
padding:6px 14px;border-radius:20px;border:1px solid var(--border);
|
|
background:transparent;color:var(--text-dim);font-size:12px;
|
|
cursor:pointer;transition:all .15s;font-family:inherit;
|
|
}
|
|
.email-tab.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
|
|
.email-tab:hover:not(.active){border-color:var(--text-muted)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<div class="header">
|
|
<div class="logo">🥤</div>
|
|
<h1>欢迎回来</h1>
|
|
<p>登录你的可乐账号</p>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab active" onclick="switchTab('login')">登录</button>
|
|
<button class="tab" onclick="switchTab('register')">注册</button>
|
|
</div>
|
|
|
|
<!-- 登录 -->
|
|
<form class="form active" id="loginForm" onsubmit="return false">
|
|
<div class="input-group">
|
|
<label>ACCOUNT</label>
|
|
<div class="field"><input type="text" placeholder="用户名 / 邮箱" autofocus></div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>PASSWORD</label>
|
|
<div class="field">
|
|
<input type="password" id="loginPwd" placeholder="请输入密码">
|
|
<button type="button" class="toggle-pwd" onclick="togglePwd('loginPwd',this)">👁</button>
|
|
</div>
|
|
</div>
|
|
<div class="links"><a href="#">忘记密码?</a></div>
|
|
<div class="btn-row">
|
|
<button class="btn-primary" type="submit">登录</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- 注册 -->
|
|
<form class="form" id="registerForm" onsubmit="return false">
|
|
<div class="input-group">
|
|
<label>EMAIL</label>
|
|
<div class="field"><input type="email" placeholder="your@email.com"></div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>VERIFICATION CODE</label>
|
|
<div class="field">
|
|
<input type="text" placeholder="输入验证码" maxlength="8">
|
|
<button type="button" class="code-btn" onclick="sendCode(this)">发送</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>PASSWORD</label>
|
|
<div class="field">
|
|
<input type="password" id="regPwd" placeholder="至少6位密码">
|
|
<button type="button" class="toggle-pwd" onclick="togglePwd('regPwd',this)">👁</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary" type="submit" style="margin-top:4px">创建账号</button>
|
|
<div class="footer" style="margin-top:12px">
|
|
注册即同意 <a href="#" style="color:var(--accent);text-decoration:none">用户协议</a> & <a href="#" style="color:var(--accent);text-decoration:none">隐私政策</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="divider"><span>or</span></div>
|
|
|
|
<div class="social">
|
|
<div class="social-btn"><span class="icon">🐧</span> QQ</div>
|
|
<div class="social-btn"><span class="icon">💬</span> 微信</div>
|
|
<div class="social-btn"><span class="icon">🔴</span> 微博</div>
|
|
</div>
|
|
|
|
<div class="footer">© 2026 ChunYu Platform</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(type){
|
|
document.querySelectorAll('.tab').forEach((t,i)=>{
|
|
t.classList.toggle('active',(type==='login'?i===0:i===1))
|
|
})
|
|
document.getElementById('loginForm').classList.toggle('active',type==='login')
|
|
document.getElementById('registerForm').classList.toggle('active',type==='register')
|
|
}
|
|
function togglePwd(id,btn){
|
|
const inp=document.getElementById(id)
|
|
if(inp.type==='password'){inp.type='text';btn.textContent='🙈'}
|
|
else{inp.type='password';btn.textContent='👁'}
|
|
}
|
|
function sendCode(btn){
|
|
let sec=60;btn.disabled=true;
|
|
const tick=()=>{btn.textContent=sec+'s';if(--sec<0){btn.disabled=false;btn.textContent='发送'}}
|
|
tick();const t=setInterval(tick,1000);btn.onclick=()=>clearInterval(t)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |