329 lines
11 KiB
HTML
329 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, maximum-scale=1.0, user-scalable=no">
|
|
<title>可乐Web - 渐变波浪动态</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&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:'Plus Jakarta Sans','Noto Sans SC',-apple-system,sans-serif;
|
|
background:#0c0c1a;
|
|
display:flex;justify-content:center;align-items:center;
|
|
min-height:100vh;padding:20px;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
.phone{
|
|
width:390px;min-height:844px;
|
|
border-radius:50px;overflow:hidden;position:relative;
|
|
box-shadow:0 50px 100px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05);
|
|
}
|
|
|
|
/* 动态渐变背景 */
|
|
.bg-canvas{
|
|
position:absolute;inset:0;z-index:0;
|
|
background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#667eea);
|
|
background-size:400% 400%;
|
|
animation:gradientShift 8s ease infinite;
|
|
}
|
|
@keyframes gradientShift{
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
|
|
/* 浮动光斑 */
|
|
.blob{
|
|
position:absolute;border-radius:50%;filter:blur(40px);
|
|
opacity:0.5;z-index:1;
|
|
animation:blobFloat 6s ease-in-out infinite;
|
|
}
|
|
.blob-1{width:200px;height:200px;background:#f093fb;top:-50px;left:-60px;animation-delay:0s}
|
|
.blob-2{width:180px;height:180px;background:#667eea;bottom:100px;right:-40px;animation-delay:2s}
|
|
.blob-3{width:140px;height:140px;background:#43e97b;top:50%;left:30%;animation-delay:4s;opacity:0.3}
|
|
@keyframes blobFloat{
|
|
0%,100%{transform:translate(0,0) scale(1)}
|
|
33%{transform:translate(20px,-30px) scale(1.1)}
|
|
66%{transform:translate(-15px,20px) scale(0.9)}
|
|
}
|
|
|
|
.dynamic-island{
|
|
width:126px;height:36px;background:#000;border-radius:20px;
|
|
position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:20;
|
|
}
|
|
.status-bar{
|
|
display:flex;justify-content:space-between;align-items:center;
|
|
padding:18px 30px 0;font-size:15px;font-weight:600;color:#fff;
|
|
position:relative;z-index:15;
|
|
}
|
|
.status-icons{display:flex;gap:5px;align-items:center}
|
|
|
|
/* 内容 */
|
|
.content{
|
|
position:relative;z-index:10;
|
|
padding:60px 28px 40px;
|
|
min-height:844px;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
|
|
/* 品牌 */
|
|
.brand-center{text-align:center;margin-bottom:20px}
|
|
.brand-icon{
|
|
width:72px;height:72px;margin:0 auto 14px;
|
|
background:rgba(255,255,255,0.15);
|
|
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
|
|
border:1px solid rgba(255,255,255,0.2);
|
|
border-radius:22px;display:flex;align-items:center;justify-content:center;
|
|
font-size:36px;
|
|
}
|
|
.brand-title{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.3px}
|
|
.brand-sub{font-size:14px;color:rgba(255,255,255,0.6);margin-top:4px}
|
|
|
|
/* 毛玻璃卡片 */
|
|
.glass-card{
|
|
background:rgba(255,255,255,0.12);
|
|
backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
|
|
border:1px solid rgba(255,255,255,0.15);
|
|
border-radius:28px;padding:28px 24px;margin-top:28px;
|
|
animation:cardSlideUp 0.6s cubic-bezier(0.16,1,0.3,1);
|
|
}
|
|
@keyframes cardSlideUp{
|
|
from{opacity:0;transform:translateY(40px)}
|
|
to{opacity:1;transform:translateY(0)}
|
|
}
|
|
|
|
/* Tab切换 */
|
|
.tab-bar{
|
|
display:flex;background:rgba(255,255,255,0.08);border-radius:14px;
|
|
padding:4px;margin-bottom:24px;
|
|
}
|
|
.tab-btn{
|
|
flex:1;padding:12px 0;text-align:center;
|
|
font-size:14px;font-weight:600;color:rgba(255,255,255,0.4);
|
|
border:none;background:transparent;border-radius:11px;
|
|
cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
|
|
font-family:inherit;
|
|
}
|
|
.tab-btn.active{
|
|
background:rgba(255,255,255,0.15);color:#fff;
|
|
box-shadow:0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* 表单 */
|
|
.form-part{display:none;animation:fadeUp 0.35s ease}
|
|
.form-part.active{display:block}
|
|
|
|
.field{margin-bottom:18px}
|
|
.field label{
|
|
display:block;font-size:12px;font-weight:600;
|
|
color:rgba(255,255,255,0.5);margin-bottom:8px;
|
|
text-transform:uppercase;letter-spacing:0.8px;
|
|
}
|
|
.field input{
|
|
width:100%;padding:14px 16px;
|
|
border:1.5px solid rgba(255,255,255,0.1);
|
|
border-radius:14px;background:rgba(255,255,255,0.06);
|
|
font-size:15px;font-family:inherit;color:#fff;outline:none;
|
|
transition:all 0.25s ease;
|
|
}
|
|
.field input:focus{
|
|
border-color:rgba(255,255,255,0.3);
|
|
background:rgba(255,255,255,0.1);
|
|
box-shadow:0 0 0 3px rgba(255,255,255,0.08);
|
|
}
|
|
.field input::placeholder{color:rgba(255,255,255,0.25)}
|
|
|
|
.code-row{display:flex;gap:10px;align-items:stretch}
|
|
.code-row .field{flex:1;margin-bottom:0}
|
|
.code-get{
|
|
padding:0 16px;border:1.5px solid rgba(255,255,255,0.15);
|
|
border-radius:14px;background:rgba(255,255,255,0.06);
|
|
font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);
|
|
cursor:pointer;white-space:nowrap;font-family:inherit;
|
|
transition:all 0.25s ease;
|
|
}
|
|
.code-get:hover{background:rgba(255,255,255,0.12);color:#fff}
|
|
|
|
.forgot{text-align:right;margin-bottom:24px}
|
|
.forgot a{font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;font-weight:500}
|
|
|
|
/* 渐变按钮 */
|
|
.btn-gradient{
|
|
width:100%;padding:16px;border:none;border-radius:14px;
|
|
background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.9) 100%);
|
|
color:#667eea;font-size:16px;font-weight:700;
|
|
cursor:pointer;font-family:inherit;transition:all 0.3s ease;
|
|
box-shadow:0 8px 30px rgba(0,0,0,0.2);
|
|
letter-spacing:0.3px;
|
|
}
|
|
.btn-gradient:active{transform:scale(0.97)}
|
|
|
|
/* 分割 */
|
|
.or-line{
|
|
display:flex;align-items:center;gap:14px;
|
|
margin:24px 0 20px;
|
|
}
|
|
.or-line::before,.or-line::after{content:'';flex:1;height:0.5px;background:rgba(255,255,255,0.1)}
|
|
.or-line span{font-size:12px;color:rgba(255,255,255,0.3);font-weight:500}
|
|
|
|
.social-flex{display:flex;justify-content:center;gap:14px;margin-bottom:24px}
|
|
.social-circle{
|
|
width:52px;height:52px;border-radius:16px;
|
|
border:1px solid rgba(255,255,255,0.1);
|
|
background:rgba(255,255,255,0.05);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:22px;cursor:pointer;transition:all 0.25s ease;
|
|
backdrop-filter:blur(10px);
|
|
}
|
|
.social-circle:active{transform:scale(0.9);background:rgba(255,255,255,0.12)}
|
|
|
|
.switch-link{
|
|
text-align:center;font-size:14px;color:rgba(255,255,255,0.4);
|
|
}
|
|
.switch-link a{color:#fff;text-decoration:none;font-weight:600}
|
|
|
|
.agreement{
|
|
text-align:center;font-size:12px;color:rgba(255,255,255,0.25);
|
|
line-height:1.7;margin-top:auto;padding-top:20px;
|
|
}
|
|
.agreement a{color:rgba(255,255,255,0.5);text-decoration:none;font-weight:500}
|
|
|
|
@keyframes fadeUp{
|
|
from{opacity:0;transform:translateY(12px)}
|
|
to{opacity:1;transform:translateY(0)}
|
|
}
|
|
|
|
@media(max-width:440px){
|
|
body{padding:0}
|
|
.phone{width:100%;border-radius:0;box-shadow:none;min-height:100vh}
|
|
.dynamic-island{display:none}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="phone">
|
|
<div class="bg-canvas"></div>
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
|
|
<div class="dynamic-island"></div>
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<div class="status-icons">
|
|
<svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><path d="M1 8.5h1.5v3H1zM4 6h1.5v5.5H4zM7 3.5h1.5v8H7zM10 1.5h1.5v10H10zM13 0h1.5v11.5H13z"/></svg>
|
|
<svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 3.5c2 0 3.7.8 5 2.1l-1.4 1.4c-1-1-2.2-1.6-3.6-1.6s-2.6.6-3.6 1.6L2.5 5.6c1.3-1.3 3-2.1 5-2.1zM7.5 0c3.2 0 6 1.3 8.1 3.4L14.2 5.3C12.5 3.6 10.1 2.5 7.5 2.5S2.5 3.6.8 5.3L-.6 3.4C1.5 1.3 4.3 0 7.5 0zM7.5 7c1 0 2 .4 2.7 1.1L7.5 11 4.8 8.1C5.5 7.4 6.5 7 7.5 7z"/></svg>
|
|
<svg width="27" height="13" viewBox="0 0 27 13" fill="currentColor"><rect x="0.5" y="0.5" width="22" height="12" rx="3.5" fill="none" stroke="currentColor" stroke-width="1"/><rect x="23.5" y="4" width="2" height="5" rx="1"/><rect x="2" y="2" width="18" height="9" rx="2"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="brand-center">
|
|
<div class="brand-icon">🥤</div>
|
|
<div class="brand-title">可乐Web</div>
|
|
<div class="brand-sub">你的全能在线工具平台</div>
|
|
</div>
|
|
|
|
<div class="glass-card">
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" onclick="switchTab('login',this)">登录</button>
|
|
<button class="tab-btn" onclick="switchTab('register',this)">注册</button>
|
|
</div>
|
|
|
|
<!-- 登录 -->
|
|
<div class="form-part active" id="part-login">
|
|
<div class="field">
|
|
<label>账号</label>
|
|
<input type="text" placeholder="用户名 / 邮箱 / 手机号">
|
|
</div>
|
|
<div class="field">
|
|
<label>密码</label>
|
|
<input type="password" placeholder="请输入密码">
|
|
</div>
|
|
<div class="forgot"><a href="#">忘记密码?</a></div>
|
|
<button class="btn-gradient">登 录</button>
|
|
|
|
<div class="or-line"><span>OR</span></div>
|
|
<div class="social-flex">
|
|
<div class="social-circle">🐧</div>
|
|
<div class="social-circle">💬</div>
|
|
<div class="social-circle">📢</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 注册 -->
|
|
<div class="form-part" id="part-register">
|
|
<div class="field">
|
|
<label>邮箱</label>
|
|
<input type="email" placeholder="your@email.com">
|
|
</div>
|
|
<div class="field">
|
|
<label>验证码</label>
|
|
<div class="code-row">
|
|
<input type="text" placeholder="输入验证码" maxlength="8">
|
|
<button class="code-get" onclick="countdown(this)">发送验证码</button>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>用户名</label>
|
|
<input type="text" placeholder="给自己取个名字">
|
|
</div>
|
|
<div class="field">
|
|
<label>密码</label>
|
|
<input type="password" placeholder="至少 8 位字符">
|
|
</div>
|
|
<button class="btn-gradient">创建账户</button>
|
|
|
|
<div class="or-line"><span>OR</span></div>
|
|
<div class="social-flex">
|
|
<div class="social-circle">🐧</div>
|
|
<div class="social-circle">💬</div>
|
|
<div class="social-circle">📢</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="switch-link" id="switch-hint">
|
|
还没有账户? <a href="#" onclick="switchTab('register',document.querySelectorAll('.tab-btn')[1]);return false">免费注册</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agreement">
|
|
登录即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(tab, btn) {
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.querySelectorAll('.form-part').forEach(p => p.classList.remove('active'));
|
|
document.getElementById('part-' + tab).classList.add('active');
|
|
|
|
const hint = document.getElementById('switch-hint');
|
|
if (tab === 'login') {
|
|
hint.innerHTML = '还没有账户? <a href="#" onclick="switchTab(\'register\',document.querySelectorAll(\'.tab-btn\')[1]);return false">免费注册</a>';
|
|
} else {
|
|
hint.innerHTML = '已有账户? <a href="#" onclick="switchTab(\'login\',document.querySelectorAll(\'.tab-btn\')[0]);return false">立即登录</a>';
|
|
}
|
|
}
|
|
|
|
function countdown(btn) {
|
|
if (btn._timer) return;
|
|
let sec = 60;
|
|
const orig = btn.textContent;
|
|
btn.textContent = sec + 's';
|
|
btn._timer = setInterval(() => {
|
|
sec--;
|
|
if (sec <= 0) { clearInterval(btn._timer); btn._timer = null; btn.textContent = orig; }
|
|
else btn.textContent = sec + 's';
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|