287 lines
11 KiB
HTML
287 lines
11 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&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;align-items:center;justify-content:center;
|
|
background:#0a0a1a;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* 动态渐变背景 */
|
|
.bg{
|
|
position:fixed;inset:0;z-index:0;
|
|
background:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f953c6 50%,#b91d73 75%,#667eea 100%);
|
|
background-size:400% 400%;
|
|
animation:gradientShift 12s ease infinite;
|
|
}
|
|
.bg::after{
|
|
content:'';position:absolute;inset:0;
|
|
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
@keyframes gradientShift{
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
|
|
/* 浮动装饰球 */
|
|
.orb{
|
|
position:fixed;border-radius:50%;filter:blur(80px);opacity:.35;z-index:0;
|
|
}
|
|
.orb-1{width:500px;height:500px;background:#f953c6;top:-10%;left:-5%;animation:float1 8s ease-in-out infinite}
|
|
.orb-2{width:400px;height:400px;background:#667eea;bottom:-10%;right:-5%;animation:float2 10s ease-in-out infinite}
|
|
.orb-3{width:300px;height:300px;background:#b91d73;top:50%;left:50%;transform:translate(-50%,-50%);animation:float3 7s ease-in-out infinite}
|
|
|
|
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
|
|
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-40px)}}
|
|
@keyframes float3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}
|
|
|
|
/* 卡片容器 */
|
|
.card{
|
|
position:relative;z-index:1;
|
|
width:420px;max-width:92vw;
|
|
background:rgba(255,255,255,0.08);
|
|
backdrop-filter:blur(24px) saturate(1.6);
|
|
-webkit-backdrop-filter:blur(24px) saturate(1.6);
|
|
border:1px solid rgba(255,255,255,0.15);
|
|
border-radius:24px;
|
|
padding:48px 40px 40px;
|
|
box-shadow:0 32px 64px rgba(0,0,0,0.3),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(30px) scale(.97)}to{opacity:1;transform:none}}
|
|
|
|
/* Logo + 标题 */
|
|
.logo{text-align:center;margin-bottom:32px}
|
|
.logo-icon{
|
|
width:56px;height:56px;margin:0 auto 14px;
|
|
background:linear-gradient(135deg,#f953c6,#667eea);
|
|
border-radius:16px;display:flex;align-items:center;justify-content:center;
|
|
font-size:28px;box-shadow:0 8px 24px rgba(249,83,198,0.3);
|
|
}
|
|
.logo h1{font-size:22px;font-weight:700;color:#fff;letter-spacing:1px}
|
|
.logo p{font-size:13px;color:rgba(255,255,255,0.5);margin-top:4px}
|
|
|
|
/* Tab 切换 */
|
|
.tabs{display:flex;margin-bottom:28px;background:rgba(255,255,255,0.06);border-radius:12px;padding:4px}
|
|
.tab{
|
|
flex:1;padding:10px 0;text-align:center;font-size:14px;font-weight:500;
|
|
color:rgba(255,255,255,0.5);border:none;background:none;cursor:pointer;
|
|
border-radius:10px;transition:all .25s;
|
|
}
|
|
.tab.active{background:rgba(255,255,255,0.12);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
|
|
.tab:hover:not(.active){color:rgba(255,255,255,0.75)}
|
|
|
|
/* 表单区 */
|
|
.form{display:none;animation:fadeIn .3s ease}
|
|
.form.active{display:block}
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
|
|
|
/* 输入组 */
|
|
.input-group{margin-bottom:18px;position:relative}
|
|
.input-group label{
|
|
display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,0.55);
|
|
margin-bottom:6px;letter-spacing:.5px;
|
|
}
|
|
.input-wrap{
|
|
position:relative;display:flex;align-items:center;
|
|
background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
|
|
border-radius:12px;transition:all .25s;overflow:hidden;
|
|
}
|
|
.input-wrap:focus-within{
|
|
border-color:rgba(249,83,198,0.6);
|
|
background:rgba(255,255,255,0.1);
|
|
box-shadow:0 0 0 3px rgba(249,83,198,0.12);
|
|
}
|
|
.input-wrap input{
|
|
flex:1;background:none;border:none;outline:none;
|
|
padding:14px 16px;font-size:14px;color:#fff;
|
|
font-family:inherit;
|
|
}
|
|
.input-wrap input::placeholder{color:rgba(255,255,255,0.3)}
|
|
.input-wrap .icon{padding:0 4px 0 14px;font-size:18px;color:rgba(255,255,255,0.35)}
|
|
.input-wrap .toggle-pwd{
|
|
padding:0 14px 0 4px;background:none;border:none;
|
|
color:rgba(255,255,255,0.35);cursor:pointer;font-size:18px;
|
|
}
|
|
.input-wrap .toggle-pwd:hover{color:rgba(255,255,255,0.7)}
|
|
|
|
/* 发送验证码按钮 */
|
|
.code-btn{
|
|
position:absolute;right:4px;top:50%;transform:translateY(-50%);
|
|
padding:8px 14px;border-radius:8px;border:none;
|
|
background:linear-gradient(135deg,#f953c6,#667eea);color:#fff;
|
|
font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;
|
|
transition:all .2s;font-family:inherit;
|
|
}
|
|
.code-btn:hover{opacity:.85;transform:translateY(-50%) scale(1.02)}
|
|
.code-btn:disabled{opacity:.4;cursor:not-allowed;transform:translateY(-50%)}
|
|
|
|
/* 忘记密码 */
|
|
.forgot{display:flex;justify-content:flex-end;margin:-6px 0 18px}
|
|
.forgot a{font-size:12px;color:rgba(255,255,255,0.45);text-decoration:none;transition:color .2s}
|
|
.forgot a:hover{color:#f953c6}
|
|
|
|
/* 主按钮 */
|
|
.btn-primary{
|
|
width:100%;padding:14px;border:none;border-radius:12px;
|
|
background:linear-gradient(135deg,#f953c6,#667eea);
|
|
color:#fff;font-size:15px;font-weight:600;cursor:pointer;
|
|
font-family:inherit;letter-spacing:.5px;
|
|
box-shadow:0 8px 24px rgba(249,83,198,0.25);
|
|
transition:all .25s;position:relative;overflow:hidden;
|
|
}
|
|
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(249,83,198,0.35)}
|
|
.btn-primary:active{transform:translateY(0)}
|
|
.btn-primary::after{
|
|
content:'';position:absolute;inset:0;
|
|
background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);
|
|
opacity:0;transition:opacity .2s;
|
|
}
|
|
.btn-primary:hover::after{opacity:1}
|
|
|
|
/* 分隔线 */
|
|
.divider{display:flex;align-items:center;gap:14px;margin:24px 0}
|
|
.divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.1)}
|
|
.divider span{font-size:12px;color:rgba(255,255,255,0.35);white-space:nowrap}
|
|
|
|
/* 社交登录 */
|
|
.social{display:flex;justify-content:center;gap:16px}
|
|
.social-btn{
|
|
width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,0.1);
|
|
background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;
|
|
cursor:pointer;transition:all .25s;font-size:20px;
|
|
}
|
|
.social-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
|
|
|
|
/* 协议 */
|
|
.agreement{
|
|
text-align:center;margin-top:24px;font-size:11px;color:rgba(255,255,255,0.3);
|
|
line-height:1.6;
|
|
}
|
|
.agreement a{color:rgba(255,255,255,0.5);text-decoration:none}
|
|
.agreement a:hover{color:#f953c6}
|
|
.agreement input[type=checkbox]{
|
|
margin-right:4px;accent-color:#f953c6;
|
|
width:14px;height:14px;vertical-align:middle;
|
|
}
|
|
|
|
@media(max-width:480px){
|
|
.card{padding:36px 24px 28px;border-radius:20px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg"></div>
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
|
|
<div class="card">
|
|
<div class="logo">
|
|
<div class="logo-icon">🥤</div>
|
|
<h1>可乐</h1>
|
|
<p>ChunYu Platform</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>账号</label>
|
|
<div class="input-wrap">
|
|
<span class="icon">👤</span>
|
|
<input type="text" placeholder="用户名 / 邮箱 / 手机号" autofocus>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>密码</label>
|
|
<div class="input-wrap">
|
|
<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">
|
|
<label>邮箱</label>
|
|
<div class="input-wrap">
|
|
<span class="icon">📧</span>
|
|
<input type="email" placeholder="请输入邮箱地址">
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>验证码</label>
|
|
<div class="input-wrap">
|
|
<span class="icon">🔑</span>
|
|
<input type="text" placeholder="请输入验证码" maxlength="8">
|
|
<button type="button" class="code-btn" onclick="sendCode(this)">发送验证码</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>设置密码</label>
|
|
<div class="input-wrap">
|
|
<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 style="margin-top:6px">
|
|
<label style="display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,0.4);cursor:pointer">
|
|
<input type="checkbox" checked style="accent-color:#f953c6;width:14px;height:14px">
|
|
注册即同意 <a href="#" style="color:rgba(255,255,255,0.6)">用户协议</a> 和 <a href="#" style="color:rgba(255,255,255,0.6)">隐私政策</a>
|
|
</label>
|
|
</div>
|
|
<button class="btn-primary" type="submit" style="margin-top:20px">注 册</button>
|
|
</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>
|
|
|
|
<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> |