192 lines
6.7 KiB
HTML
192 lines
6.7 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}
|
|
html,body{height:100%}
|
|
body{
|
|
font-family:'Noto Sans SC',system-ui,sans-serif;
|
|
background:#fafafa;color:#1a1a1a;
|
|
display:flex;flex-direction:column;
|
|
min-height:100vh;
|
|
}
|
|
/* 顶部导航栏 */
|
|
.topbar{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
padding:16px 20px;
|
|
}
|
|
.topbar .skip{font-size:14px;color:#999;text-decoration:none;font-weight:500}
|
|
.topbar .skip:hover{color:#f97316}
|
|
/* 内容区 */
|
|
.content{
|
|
flex:1;display:flex;flex-direction:column;
|
|
padding:20px 28px 32px;
|
|
}
|
|
.brand{text-align:center;margin-bottom:36px}
|
|
.brand-logo{
|
|
width:64px;height:64px;margin:0 auto 14px;
|
|
background:linear-gradient(135deg,#f97316,#ef4444);
|
|
border-radius:20px;display:flex;align-items:center;justify-content:center;
|
|
font-size:32px;box-shadow:0 8px 24px rgba(249,115,22,0.25);
|
|
}
|
|
.brand h1{font-size:24px;font-weight:700;color:#1a1a1a;margin-bottom:4px}
|
|
.brand p{font-size:13px;color:#999}
|
|
/* Tab */
|
|
.pills{
|
|
display:flex;margin-bottom:28px;
|
|
background:#f0f0f0;border-radius:14px;padding:4px;
|
|
}
|
|
.pill{
|
|
flex:1;padding:12px 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;
|
|
}
|
|
.pill.on{background:#fff;color:#1a1a1a;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
|
|
/* 表单 */
|
|
.form{display:none}
|
|
.form.on{display:block;animation:in .3s ease}
|
|
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
|
.row{
|
|
display:flex;align-items:center;
|
|
border-bottom:1.5px solid #eee;padding:14px 0;
|
|
margin-bottom:12px;transition:border-color .2s;
|
|
}
|
|
.row:focus-within{border-color:#f97316}
|
|
.row .ico{font-size:18px;margin-right:12px;flex-shrink:0;opacity:.4}
|
|
.row input{
|
|
flex:1;background:none;border:none;outline:none;
|
|
font-size:15px;color:#1a1a1a;font-family:inherit;
|
|
}
|
|
.row input::placeholder{color:#ccc}
|
|
.row .eye{
|
|
background:none;border:none;color:#ccc;cursor:pointer;font-size:16px;padding:2px;
|
|
}
|
|
.row .sms{
|
|
padding:7px 14px;border-radius:8px;border:1.5px solid #f97316;
|
|
background:none;color:#f97316;font-size:11px;font-weight:600;
|
|
cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .2s;
|
|
}
|
|
.row .sms:disabled{opacity:.3;cursor:not-allowed}
|
|
.opt-row{display:flex;justify-content:flex-end;margin:-4px 0 20px}
|
|
.opt-row a{font-size:13px;color:#999;text-decoration:none}
|
|
.opt-row a:hover{color:#f97316}
|
|
.submit-btn{
|
|
width:100%;padding:15px;border:none;border-radius:14px;
|
|
background:linear-gradient(135deg,#f97316,#ef4444);
|
|
color:#fff;font-size:16px;font-weight:700;cursor:pointer;
|
|
font-family:inherit;letter-spacing:.3px;
|
|
box-shadow:0 6px 20px rgba(249,115,22,0.25);
|
|
transition:all .25s;
|
|
}
|
|
.submit-btn:active{transform:scale(.98)}
|
|
.or-line{display:flex;align-items:center;gap:16px;margin:24px 0}
|
|
.or-line::before,.or-line::after{content:'';flex:1;height:1px;background:#eee}
|
|
.or-line span{font-size:12px;color:#ccc}
|
|
.oauth-row{display:flex;justify-content:center;gap:16px}
|
|
.oauth{
|
|
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 .2s;font-size:22px;
|
|
}
|
|
.oauth:active{transform:scale(.9);border-color:#f97316}
|
|
.bottom-text{text-align:center;margin-top:auto;padding:20px 0}
|
|
.bottom-text a{font-size:13px;color:#999;text-decoration:none}
|
|
.bottom-text a:hover{color:#f97316}
|
|
.agree{
|
|
text-align:center;margin-top:16px;font-size:11px;color:#ccc;line-height:1.6;
|
|
}
|
|
.agree a{color:#999;text-decoration:none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="topbar">
|
|
<span></span>
|
|
<a class="skip" href="#">跳过</a>
|
|
+</div>
|
|
+
|
|
+<div class="content">
|
|
+ <div class="brand">
|
|
+ <div class="brand-logo">🥤</div>
|
|
+ <h1>欢迎回来</h1>
|
|
+ <p>登录你的可乐账号</p>
|
|
+ </div>
|
|
+
|
|
+ <div class="pills">
|
|
+ <button class="pill on" onclick="sw('login')">密码登录</button>
|
|
+ <button class="pill" onclick="sw('sms')">验证码登录</button>
|
|
+ </div>
|
|
+
|
|
+ <!-- 密码登录 -->
|
|
+ <form class="form on" id="pwForm" onsubmit="return false">
|
|
+ <div class="row">
|
|
+ <span class="ico">👤</span>
|
|
+ <input type="text" placeholder="手机号 / 邮箱" autofocus>
|
|
+ </div>
|
|
+ <div class="row">
|
|
+ <span class="ico">🔒</span>
|
|
+ <input type="password" id="pw1" placeholder="密码">
|
|
+ <button type="button" class="eye" onclick="ep('pw1',this)">👁</button>
|
|
+ </div>
|
|
+ <div class="opt-row"><a href="#">忘记密码？</a></div>
|
|
+ <button class="submit-btn" type="submit">登录</button>
|
|
+ </form>
|
|
+
|
|
+ <!-- 验证码登录 -->
|
|
+ <form class="form" id="smsForm" onsubmit="return false">
|
|
+ <div class="row">
|
|
+ <span class="ico">📱</span>
|
|
+ <input type="tel" placeholder="手机号">
|
|
+ </div>
|
|
+ <div class="row">
|
|
+ <span class="ico">🔑</span>
|
|
+ <input type="text" placeholder="验证码" maxlength="6">
|
|
+ <button type="button" class="sms" onclick="cs(this)">发送验证码</button>
|
|
+ </div>
|
|
+ <button class="submit-btn" type="submit" style="margin-top:16px">登录</button>
|
|
+ </form>
|
|
+
|
|
+ <div class="or-line"><span>其他登录方式</span></div>
|
|
+ <div class="oauth-row">
|
|
+ <div class="oauth" title="微信">💬</div>
|
|
+ <div class="oauth" title="QQ">🐧</div>
|
|
+ <div class="oauth" title="Apple">🍎</div>
|
|
+ </div>
|
|
+
|
|
+ <div class="agree">
|
|
+ <input type="checkbox" checked style="accent-color:#f97316;width:13px;height:13px;vertical-align:middle;margin-right:4px">
|
|
+ 已阅读并同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
|
+ </div>
|
|
+</div>
|
|
+
|
|
+<div class="bottom-text">
|
|
+ 还没有账号？<a href="#" onclick="sw('reg');return false">立即注册</a>
|
|
+</div>
|
|
+
|
|
+<script>
|
|
+function sw(t){
|
|
+ document.querySelectorAll('.pill').forEach((b,i)=>{
|
|
+ b.classList.toggle('on',t==='login'?i===0:t==='sms'?i===1:false)
|
|
+ })
|
|
+ document.getElementById('pwForm').classList.toggle('on',t==='login')
|
|
+ document.getElementById('smsForm').classList.toggle('on',t==='sms')
|
|
+}
|
|
+function ep(id,btn){
|
|
+ const i=document.getElementById(id)
|
|
+ i.type=i.type==='password'?'text':'password'
|
|
+ btn.textContent=i.type==='password'?'👁':'🙈'
|
|
+}
|
|
+function cs(btn){
|
|
+ let s=60;btn.disabled=true
|
|
+ const f=()=>{btn.textContent=s+'s';if(--s<0){btn.disabled=false;btn.textContent='发送验证码'}}
|
|
+ f();setInterval(f,1000)
|
|
+}
|
|
+</script>
|
|
+</body>
|
|
+</html>
|