216 lines
8.5 KiB
HTML
216 lines
8.5 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%;overflow:hidden}
|
|
body{
|
|
font-family:'Noto Sans SC',system-ui,sans-serif;
|
|
display:flex;align-items:center;justify-content:center;
|
|
position:relative;
|
|
}
|
|
.bg{
|
|
position:absolute;inset:0;
|
|
background:linear-gradient(135deg,#0f0c29 0%,#302b63 40%,#24243e 100%);
|
|
}
|
|
.bg .blob{
|
|
position:absolute;border-radius:50%;filter:blur(80px);
|
|
}
|
|
.blob-1{width:320px;height:320px;background:#7c3aed;opacity:.5;top:-80px;left:-60px;animation:b1 10s ease-in-out infinite}
|
|
.blob-2{width:280px;height:280px;background:#ec4899;opacity:.4;bottom:-60px;right:-40px;animation:b2 12s ease-in-out infinite}
|
|
.blob-3{width:200px;height:200px;background:#06b6d4;opacity:.3;top:40%;left:50%;animation:b3 8s ease-in-out infinite}
|
|
@keyframes b1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,40px)}}
|
|
@keyframes b2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-50px)}}
|
|
@keyframes b3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.3)}}
|
|
/* 玻璃卡片 */
|
|
.glass-card{
|
|
position:relative;z-index:1;
|
|
width:min(380px,90vw);
|
|
background:rgba(255,255,255,0.08);
|
|
backdrop-filter:blur(30px) saturate(1.8);
|
|
-webkit-backdrop-filter:blur(30px) saturate(1.8);
|
|
border:1px solid rgba(255,255,255,0.12);
|
|
border-radius:28px;padding:36px 28px 32px;
|
|
box-shadow:0 24px 64px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);
|
|
animation:cardIn .6s cubic-bezier(.22,1,.36,1) both;
|
|
}
|
|
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}
|
|
.logo{text-align:center;margin-bottom:28px}
|
|
.logo-icon{
|
|
width:60px;height:60px;margin:0 auto 12px;
|
|
background:linear-gradient(135deg,#7c3aed,#ec4899);
|
|
border-radius:18px;display:flex;align-items:center;justify-content:center;
|
|
font-size:30px;box-shadow:0 8px 28px rgba(124,58,237,0.35);
|
|
}
|
|
.logo h1{font-size:22px;font-weight:700;color:#fff}
|
|
.logo p{font-size:12px;color:rgba(255,255,255,0.4);margin-top:4px}
|
|
/* 切换按钮组 */
|
|
.mode-switch{
|
|
display:flex;margin-bottom:24px;
|
|
background:rgba(255,255,255,0.06);border-radius:14px;padding:4px;
|
|
}
|
|
.mode-btn{
|
|
flex:1;padding:11px 0;text-align:center;font-size:14px;font-weight:600;
|
|
color:rgba(255,255,255,0.4);background:none;border:none;cursor:pointer;
|
|
border-radius:11px;transition:all .25s;font-family:inherit;
|
|
}
|
|
.mode-btn.active{background:rgba(255,255,255,0.12);color:#fff}
|
|
/* 表单 */
|
|
.form-panel{display:none}
|
|
.form-panel.active{display:block;animation:fadeUp .3s ease}
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
|
.field{
|
|
display:flex;align-items:center;gap:10px;
|
|
padding:13px 14px;border-radius:14px;
|
|
background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
|
|
margin-bottom:14px;transition:all .25s;
|
|
}
|
|
.field:focus-within{
|
|
border-color:rgba(124,58,237,0.6);
|
|
background:rgba(255,255,255,0.1);
|
|
box-shadow:0 0 0 3px rgba(124,58,237,0.12);
|
|
}
|
|
.field .icon{font-size:17px;flex-shrink:0;opacity:.5}
|
|
.field input{
|
|
flex:1;background:none;border:none;outline:none;
|
|
font-size:14px;color:#fff;font-family:inherit;
|
|
}
|
|
.field input::placeholder{color:rgba(255,255,255,0.25)}
|
|
.field .toggle-pwd{
|
|
background:none;border:none;color:rgba(255,255,255,0.3);cursor:pointer;font-size:16px;
|
|
}
|
|
.code-btn{
|
|
padding:8px 14px;border-radius:10px;border:none;
|
|
background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;
|
|
font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;
|
|
font-family:inherit;transition:all .2s;flex-shrink:0;
|
|
}
|
|
.code-btn:disabled{opacity:.35;cursor:not-allowed}
|
|
.forgot{display:flex;justify-content:flex-end;margin:-6px 0 18px}
|
|
.forgot a{font-size:12px;color:rgba(255,255,255,0.4);text-decoration:none}
|
|
.forgot a:hover{color:#ec4899}
|
|
.btn-go{
|
|
width:100%;padding:15px;border:none;border-radius:14px;
|
|
background:linear-gradient(135deg,#7c3aed,#ec4899);
|
|
color:#fff;font-size:15px;font-weight:700;cursor:pointer;
|
|
font-family:inherit;letter-spacing:.3px;
|
|
box-shadow:0 8px 24px rgba(124,58,237,0.3);
|
|
transition:all .25s;position:relative;overflow:hidden;
|
|
}
|
|
.btn-go:active{transform:scale(.97)}
|
|
.btn-go::after{
|
|
content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
|
|
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
|
|
transition:left .5s;
|
|
}
|
|
.btn-go:active::after{left:100%}
|
|
.sep{display:flex;align-items:center;gap:14px;margin:20px 0}
|
|
.sep::before,.sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.08)}
|
|
.sep span{font-size:11px;color:rgba(255,255,255,0.3)}
|
|
.social-row{display:flex;justify-content:center;gap:12px}
|
|
.soc{
|
|
width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);
|
|
background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;
|
|
cursor:pointer;transition:all .25s;font-size:20px;
|
|
}
|
|
.soc:active{transform:scale(.9);background:rgba(255,255,255,0.1)}
|
|
.agree{
|
|
text-align:center;margin-top:18px;font-size:11px;color:rgba(255,255,255,0.25);line-height:1.6;
|
|
}
|
|
.agree a{color:rgba(255,255,255,0.4);text-decoration:none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
</div>
|
|
|
|
<div class="glass-card">
|
|
<div class="logo">
|
|
<div class="logo-icon">🥤</div>
|
|
<h1>可乐</h1>
|
|
<p>ChunYu Platform</p>
|
|
</div>
|
|
|
|
<div class="mode-switch">
|
|
<button class="mode-btn active" onclick="sw('login')">登录</button>
|
|
<button class="mode-btn" onclick="sw('reg')">注册</button>
|
|
</div>
|
|
|
|
<form class="form-panel active" id="loginPanel" onsubmit="return false">
|
|
<div class="field">
|
|
<span class="icon">👤</span>
|
|
<input type="text" placeholder="手机号 / 邮箱 / 用户名">
|
|
</div>
|
|
<div class="field">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" id="lp" placeholder="请输入密码">
|
|
<button type="button" class="toggle-pwd" onclick="tp('lp',this)">👁</button>
|
|
</div>
|
|
<div class="forgot"><a href="#">忘记密码？</a></div>
|
|
<button class="btn-go" type="submit">登 录</button>
|
|
</form>
|
|
|
|
<form class="form-panel" id="regPanel" onsubmit="return false">
|
|
<div class="field">
|
|
<span class="icon">📱</span>
|
|
<input type="tel" placeholder="手机号">
|
|
</div>
|
|
<div class="field">
|
|
<span class="icon">🔑</span>
|
|
<input type="text" placeholder="验证码" maxlength="6">
|
|
<button type="button" class="code-btn" onclick="sc(this)">获取验证码</button>
|
|
</div>
|
|
<div class="field">
|
|
<span class="icon">✏️</span>
|
|
<input type="text" placeholder="昵称">
|
|
</div>
|
|
<div class="field">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" id="rp" placeholder="密码（至少6位）">
|
|
<button type="button" class="toggle-pwd" onclick="tp('rp',this)">👁</button>
|
|
</div>
|
|
<div style="margin-top:4px">
|
|
<label style="display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,0.3);cursor:pointer">
|
|
<input type="checkbox" checked style="accent-color:#7c3aed;width:13px;height:13px">
|
|
同意 <a href="#" style="color:rgba(255,255,255,0.5)">用户协议</a> 和 <a href="#" style="color:rgba(255,255,255,0.5)">隐私政策</a>
|
|
</label>
|
|
</div>
|
|
<button class="btn-go" type="submit" style="margin-top:14px">注 册</button>
|
|
</form>
|
|
|
|
<div class="sep"><span>其他方式</span></div>
|
|
<div class="social-row">
|
|
<div class="soc" title="微信">💬</div>
|
|
<div class="soc" title="QQ">🐧</div>
|
|
<div class="soc" title="Apple">🍎</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function sw(t){
|
|
document.querySelectorAll('.mode-btn').forEach((b,i)=>b.classList.toggle('active',t==='login'?i===0:i===1))
|
|
document.getElementById('loginPanel').classList.toggle('active',t==='login')
|
|
document.getElementById('regPanel').classList.toggle('active',t==='reg')
|
|
}
|
|
function tp(id,btn){
|
|
const i=document.getElementById(id)
|
|
i.type=i.type==='password'?'text':'password'
|
|
btn.textContent=i.type==='password'?'👁':'🙈'
|
|
}
|
|
function sc(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>
|