291 lines
10 KiB
HTML
291 lines
10 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;900&family=DM+Serif+Display&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
body{
|
|
font-family:'Noto Sans SC',system-ui,sans-serif;
|
|
min-height:100vh;display:flex;
|
|
background:#fafbfc;color:#1a1a2e;
|
|
}
|
|
|
|
/* ===== 左侧品牌区 ===== */
|
|
.brand-panel{
|
|
flex:1;display:none;position:relative;
|
|
background:linear-gradient(160deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%);
|
|
overflow:hidden;padding:60px;
|
|
flex-direction:column;justify-content:space-between;
|
|
}
|
|
@media(min-width:900px){.brand-panel{display:flex}}
|
|
|
|
/* 品牌区装饰 */
|
|
.brand-panel::before{
|
|
content:'';position:absolute;top:-80px;right:-80px;
|
|
width:400px;height:400px;border-radius:50%;
|
|
background:radial-gradient(circle,rgba(233,69,96,0.25),transparent 70%);
|
|
}
|
|
.brand-panel::after{
|
|
content:'';position:absolute;bottom:-60px;left:-60px;
|
|
width:300px;height:300px;border-radius:50%;
|
|
background:radial-gradient(circle,rgba(72,149,239,0.2),transparent 70%);
|
|
}
|
|
|
|
.brand-logo{
|
|
position:relative;z-index:1;display:flex;align-items:center;gap:14px;
|
|
}
|
|
.brand-logo .icon{
|
|
width:44px;height:44px;background:linear-gradient(135deg,#e94560,#4895ef);
|
|
border-radius:12px;display:flex;align-items:center;justify-content:center;
|
|
font-size:22px;
|
|
}
|
|
.brand-logo span{font-size:20px;font-weight:700;color:#fff}
|
|
|
|
.brand-content{position:relative;z-index:1;max-width:420px}
|
|
.brand-content h2{
|
|
font-family:'DM Serif Display',serif;
|
|
font-size:42px;font-weight:400;color:#fff;line-height:1.25;
|
|
margin-bottom:20px;
|
|
}
|
|
.brand-content h2 em{
|
|
font-style:normal;
|
|
background:linear-gradient(135deg,#e94560,#4895ef);
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
background-clip:text;
|
|
}
|
|
.brand-content p{font-size:15px;color:rgba(255,255,255,0.55);line-height:1.7}
|
|
|
|
/* 特性列表 */
|
|
.features{position:relative;z-index:1;margin-top:40px}
|
|
.feature-item{
|
|
display:flex;align-items:center;gap:14px;
|
|
padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.feature-item:last-child{border:none}
|
|
.feature-dot{
|
|
width:8px;height:8px;border-radius:50%;
|
|
background:linear-gradient(135deg,#e94560,#4895ef);flex-shrink:0;
|
|
}
|
|
.feature-item span{font-size:14px;color:rgba(255,255,255,0.6)}
|
|
|
|
/* ===== 右侧表单区 ===== */
|
|
.form-panel{
|
|
flex:0 0 auto;width:min(480px,100%);
|
|
display:flex;flex-direction:column;
|
|
align-items:center;justify-content:center;
|
|
padding:48px 40px;
|
|
background:#fff;
|
|
min-height:100vh;
|
|
}
|
|
@media(max-width:899px){
|
|
.form-panel{width:100%;min-height:100vh;padding:32px 24px}
|
|
}
|
|
|
|
/* 移动端顶部品牌 */
|
|
.mobile-brand{display:none;text-align:center;margin-bottom:32px}
|
|
@media(max-width:899px){.mobile-brand{display:block}}
|
|
.mobile-brand .icon{
|
|
width:48px;height:48px;margin:0 auto 10px;
|
|
background:linear-gradient(135deg,#e94560,#4895ef);
|
|
border-radius:14px;display:flex;align-items:center;justify-content:center;
|
|
font-size:24px;
|
|
}
|
|
.mobile-brand h1{font-size:20px;font-weight:700;color:#1a1a2e}
|
|
.mobile-brand p{font-size:13px;color:#999;margin-top:2px}
|
|
|
|
.form-wrapper{width:100%;max-width:360px}
|
|
|
|
/* Tab 切换 */
|
|
.tabs{display:flex;margin-bottom:28px;gap:0;border-bottom:2px solid #f0f0f0}
|
|
.tab{
|
|
flex:1;padding:12px 0;text-align:center;font-size:14px;font-weight:500;
|
|
color:#999;background:none;border:none;cursor:pointer;
|
|
border-bottom:2px solid transparent;margin-bottom:-2px;
|
|
transition:all .2s;font-family:inherit;
|
|
}
|
|
.tab.active{color:#1a1a2e;border-bottom-color:#e94560}
|
|
.tab:hover:not(.active){color:#555}
|
|
|
|
/* 表单 */
|
|
.form{display:none}
|
|
.form.active{display:block;animation:slideUp .3s ease}
|
|
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
|
|
|
.input-group{margin-bottom:16px}
|
|
.input-group label{
|
|
display:block;font-size:13px;font-weight:500;color:#555;
|
|
margin-bottom:6px;
|
|
}
|
|
.field{position:relative;display:flex;align-items:center}
|
|
.field input{
|
|
width:100%;padding:12px 14px;font-size:14px;
|
|
border:1.5px solid #e8e8e8;border-radius:10px;
|
|
background:#fafbfc;color:#1a1a2e;
|
|
font-family:inherit;outline:none;
|
|
transition:all .2s;
|
|
}
|
|
.field input:focus{border-color:#4895ef;background:#fff;box-shadow:0 0 0 3px rgba(72,149,239,0.1)}
|
|
.field input::placeholder{color:#bbb}
|
|
.field .toggle-pwd{
|
|
position:absolute;right:12px;background:none;border:none;
|
|
color:#bbb;cursor:pointer;font-size:16px;padding:4px;
|
|
}
|
|
.field .toggle-pwd:hover{color:#666}
|
|
|
|
.code-btn{
|
|
position:absolute;right:8px;
|
|
padding:8px 14px;border-radius:8px;border:1.5px solid #e8e8e8;
|
|
background:#f5f5f5;color:#555;font-size:12px;font-weight:500;
|
|
cursor:pointer;white-space:nowrap;transition:all .2s;font-family:inherit;
|
|
}
|
|
.code-btn:hover{border-color:#4895ef;color:#4895ef}
|
|
.code-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
|
|
.forgot{display:flex;justify-content:flex-end;margin:8px 0 20px}
|
|
.forgot a{font-size:12px;color:#4895ef;text-decoration:none}
|
|
.forgot a:hover{text-decoration:underline}
|
|
|
|
.btn-primary{
|
|
width:100%;padding:13px;border:none;border-radius:10px;
|
|
background:linear-gradient(135deg,#e94560,#c23152);
|
|
color:#fff;font-size:15px;font-weight:600;cursor:pointer;
|
|
font-family:inherit;letter-spacing:.3px;
|
|
transition:all .2s;box-shadow:0 4px 16px rgba(233,69,96,0.25);
|
|
}
|
|
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(233,69,96,0.3)}
|
|
.btn-primary:active{transform:translateY(0)}
|
|
|
|
.divider{display:flex;align-items:center;gap:14px;margin:24px 0}
|
|
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#eee}
|
|
.divider span{font-size:12px;color:#bbb;white-space:nowrap}
|
|
|
|
.social{display:flex;justify-content:center;gap:14px}
|
|
.social-btn{
|
|
width:44px;height:44px;border-radius:10px;border:1.5px solid #eee;
|
|
background:#fff;display:flex;align-items:center;justify-content:center;
|
|
cursor:pointer;transition:all .2s;font-size:18px;
|
|
}
|
|
.social-btn:hover{border-color:#ddd;box-shadow:0 2px 8px rgba(0,0,0,0.06);transform:translateY(-1px)}
|
|
|
|
.agreement{
|
|
text-align:center;margin-top:20px;font-size:11px;color:#bbb;line-height:1.6;
|
|
}
|
|
.agreement a{color:#999;text-decoration:none}
|
|
.agreement a:hover{color:#4895ef}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 左侧品牌展示 -->
|
|
<div class="brand-panel">
|
|
<div class="brand-logo">
|
|
<div class="icon">🥤</div>
|
|
<span>可乐</span>
|
|
</div>
|
|
<div class="brand-content">
|
|
<h2>创造你的<br><em>数字世界</em></h2>
|
|
<p>可乐平台为你提供强大的工具集，从翻译到天气，从学习到创作，一站式解决你的数字需求。</p>
|
|
<div class="features">
|
|
<div class="feature-item"><div class="feature-dot"></div><span>20+ 实用工具</span></div>
|
|
<div class="feature-item"><div class="feature-dot"></div><span>智能编程学习</span></div>
|
|
<div class="feature-item"><div class="feature-dot"></div><span>实时 API 聚合</span></div>
|
|
<div class="feature-item"><div class="feature-dot"></div><span>多语言支持</span></div>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative;z-index:1;font-size:12px;color:rgba(255,255,255,0.3)">
|
|
© 2026 ChunYu. All rights reserved.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧表单 -->
|
|
<div class="form-panel">
|
|
<div class="mobile-brand">
|
|
<div class="icon">🥤</div>
|
|
<h1>可乐</h1>
|
|
<p>ChunYu Platform</p>
|
|
</div>
|
|
|
|
<div class="form-wrapper">
|
|
<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>账号</label>
|
|
<div class="field"><input type="text" placeholder="用户名 / 邮箱 / 手机号" autofocus></div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>密码</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="forgot"><a href="#">忘记密码？</a></div>
|
|
<button class="btn-primary" type="submit">登录</button>
|
|
</form>
|
|
|
|
<!-- 注册 -->
|
|
<form class="form" id="registerForm" onsubmit="return false">
|
|
<div class="input-group">
|
|
<label>邮箱</label>
|
|
<div class="field"><input type="email" placeholder="请输入邮箱地址"></div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>验证码</label>
|
|
<div class="field">
|
|
<input type="text" placeholder="请输入验证码" maxlength="8" style="padding-right:120px">
|
|
<button type="button" class="code-btn" onclick="sendCode(this)">发送验证码</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>设置密码</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:6px">注册</button>
|
|
<div class="agreement">
|
|
注册即表示同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="divider"><span>或</span></div>
|
|
<div class="social">
|
|
<div class="social-btn" title="QQ">🐧</div>
|
|
<div class="social-btn" title="微信">💬</div>
|
|
<div class="social-btn" title="微博">🔴</div>
|
|
</div>
|
|
</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> |