216 lines
7.8 KiB
HTML
216 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<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;600;700&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;
|
|
height:100vh;overflow:hidden;position:relative;
|
|
background:#0a0a0f;
|
|
}
|
|
/* 沉浸式全屏背景 */
|
|
.hero-bg{
|
|
position:absolute;inset:0;
|
|
background:linear-gradient(170deg,#1a0505 0%,#2d0a0a 30%,#0a0a1a 70%,#050510 100%);
|
|
}
|
|
.hero-bg::after{
|
|
content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
|
|
background:linear-gradient(to top,rgba(0,0,0,0.95),transparent);
|
|
}
|
|
.hero-content{
|
|
position:absolute;top:0;left:0;right:0;
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
height:55vh;padding:40px 30px;z-index:1;
|
|
}
|
|
.hero-icon{font-size:72px;margin-bottom:20px;filter:drop-shadow(0 4px 20px rgba(239,68,68,0.3))}
|
|
.hero-content h1{
|
|
font-size:32px;font-weight:700;color:#fff;text-align:center;
|
|
letter-spacing:1px;margin-bottom:8px;
|
|
}
|
|
.hero-content p{font-size:14px;color:rgba(255,255,255,0.5);text-align:center}
|
|
/* 底部弹出卡片 */
|
|
.bottom-sheet{
|
|
position:fixed;bottom:0;left:0;right:0;z-index:10;
|
|
background:#fff;
|
|
border-radius:28px 28px 0 0;
|
|
padding:12px 28px 40px;
|
|
box-shadow:0 -10px 40px rgba(0,0,0,0.5);
|
|
animation:slideUp .5s cubic-bezier(.22,1,.36,1) both;
|
|
}
|
|
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
|
|
.handle{
|
|
width:36px;height:4px;border-radius:2px;
|
|
background:#e5e5e5;margin:0 auto 20px;
|
|
}
|
|
/* Tabs */
|
|
.tabs{
|
|
display:flex;margin-bottom:22px;
|
|
background:#f5f5f5;border-radius:14px;padding:4px;
|
|
}
|
|
.tab{
|
|
flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;
|
|
color:#999;background:none;border:none;cursor:pointer;
|
|
border-radius:11px;transition:all .25s;font-family:inherit;
|
|
}
|
|
.tab.active{background:#fff;color:#111;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
|
|
/* 表单 */
|
|
.form{display:none}
|
|
.form.active{display:block;animation:fadeUp .3s ease}
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
|
.input-group{margin-bottom:16px}
|
|
.field{
|
|
display:flex;align-items:center;gap:12px;
|
|
padding:14px 16px;border-radius:14px;
|
|
background:#f7f7f7;border:1.5px solid transparent;
|
|
transition:all .2s;
|
|
}
|
|
.field:focus-within{border-color:#ef4444;background:#fff}
|
|
.field .icon{font-size:18px;flex-shrink:0}
|
|
.field input{
|
|
flex:1;background:none;border:none;outline:none;
|
|
font-size:15px;color:#111;font-family:inherit;
|
|
}
|
|
.field input::placeholder{color:#bbb}
|
|
.field .toggle-pwd{
|
|
background:none;border:none;color:#ccc;cursor:pointer;font-size:16px;padding:2px;
|
|
}
|
|
.code-btn{
|
|
padding:8px 16px;border-radius:10px;border:none;
|
|
background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;
|
|
font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
|
|
font-family:inherit;transition:all .2s;flex-shrink:0;
|
|
}
|
|
.code-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
.forgot{display:flex;justify-content:flex-end;margin:-4px 0 18px}
|
|
.forgot a{font-size:13px;color:#ef4444;text-decoration:none;font-weight:500}
|
|
.btn-primary{
|
|
width:100%;padding:15px;border:none;border-radius:14px;
|
|
background:linear-gradient(135deg,#ef4444 0%,#f97316 100%);
|
|
color:#fff;font-size:16px;font-weight:700;cursor:pointer;
|
|
font-family:inherit;letter-spacing:.3px;
|
|
box-shadow:0 6px 20px rgba(239,68,68,0.3);
|
|
transition:all .25s;
|
|
}
|
|
.btn-primary:active{transform:scale(.98)}
|
|
.divider{display:flex;align-items:center;gap:16px;margin:22px 0}
|
|
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#eee}
|
|
.divider span{font-size:12px;color:#ccc}
|
|
.social{display:flex;justify-content:center;gap:14px}
|
|
.social-btn{
|
|
width:52px;height:52px;border-radius:16px;border:1.5px solid #eee;
|
|
background:#fff;display:flex;align-items:center;justify-content:center;
|
|
cursor:pointer;transition:all .25s;font-size:22px;
|
|
}
|
|
.social-btn:active{transform:scale(.95)}
|
|
.footer{text-align:center;margin-top:20px}
|
|
.footer a{font-size:13px;color:#999;text-decoration:none}
|
|
.footer a:hover{color:#ef4444}
|
|
.agreement{
|
|
text-align:center;margin-top:14px;font-size:11px;color:#bbb;line-height:1.6;
|
|
}
|
|
.agreement a{color:#999;text-decoration:none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-icon">🥤</div>
|
|
<h1>可乐</h1>
|
|
<p>ChunYu · 发现更多精彩</p>
|
|
</div>
|
|
|
|
<div class="bottom-sheet">
|
|
<div class="handle"></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">
|
|
<div class="field">
|
|
<span class="icon">👤</span>
|
|
<input type="text" placeholder="手机号 / 邮箱" autofocus>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="field">
|
|
<span class="icon">🔒</span>
|
|
<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">
|
|
<div class="field">
|
|
<span class="icon">📱</span>
|
|
<input type="tel" placeholder="手机号">
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="field">
|
|
<span class="icon">🔑</span>
|
|
<input type="text" placeholder="验证码" maxlength="6">
|
|
<button type="button" class="code-btn" onclick="sendCode(this)">获取验证码</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="field">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" id="regPwd" placeholder="设置密码（至少6位）">
|
|
<button type="button" class="toggle-pwd" onclick="togglePwd('regPwd',this)">👁</button>
|
|
</div>
|
|
</div>
|
|
<div class="agreement">
|
|
<input type="checkbox" checked style="accent-color:#ef4444;width:13px;height:13px;vertical-align:middle;margin-right:4px">
|
|
注册即同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
|
</div>
|
|
<button class="btn-primary" type="submit" style="margin-top:16px">注册</button>
|
|
</form>
|
|
|
|
<div class="divider"><span>其他登录方式</span></div>
|
|
<div class="social">
|
|
<div class="social-btn" title="微信">💬</div>
|
|
<div class="social-btn" title="QQ">🐧</div>
|
|
<div class="social-btn" title="微博">🔴</div>
|
|
<div class="social-btn" title="Apple">🍎</div>
|
|
</div>
|
|
<div class="footer">
|
|
<a href="#">遇到问题？联系我们</a>
|
|
</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)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|