289 lines
10 KiB
HTML
289 lines
10 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=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@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:'DM Sans','Noto Sans SC',sans-serif;
|
|
background:#050505;
|
|
display:flex;justify-content:center;align-items:center;
|
|
min-height:100vh;padding:20px;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
.phone{
|
|
width:390px;min-height:844px;background:#0a0a0a;
|
|
border-radius:50px;overflow:hidden;position:relative;
|
|
box-shadow:0 50px 120px rgba(245,166,35,0.08),0 0 0 1px rgba(255,255,255,0.05);
|
|
}
|
|
|
|
/* 噪点纹理 */
|
|
.phone::before{
|
|
content:'';position:absolute;inset:0;z-index:1;opacity:0.03;pointer-events:none;
|
|
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* 金色光晕 */
|
|
.gold-glow{
|
|
position:absolute;width:300px;height:300px;
|
|
background:radial-gradient(circle,rgba(245,166,35,0.08),transparent 70%);
|
|
border-radius:50%;z-index:0;
|
|
top:-80px;right:-80px;
|
|
}
|
|
|
|
.dynamic-island{
|
|
width:126px;height:36px;background:#1a1a1a;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:rgba(255,255,255,0.6);
|
|
position:relative;z-index:15;
|
|
}
|
|
.status-icons{display:flex;gap:5px;align-items:center}
|
|
|
|
.content{
|
|
position:relative;z-index:10;
|
|
padding:80px 32px 40px;min-height:844px;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
|
|
/* 品牌 */
|
|
.brand{display:flex;align-items:center;gap:14px;margin-bottom:44px}
|
|
.brand-icon{
|
|
width:48px;height:48px;
|
|
background:linear-gradient(135deg,rgba(245,166,35,0.15),rgba(245,166,35,0.05));
|
|
border:1px solid rgba(245,166,35,0.2);
|
|
border-radius:14px;display:flex;align-items:center;justify-content:center;
|
|
font-size:24px;
|
|
}
|
|
.brand-name{
|
|
font-size:18px;font-weight:600;color:rgba(255,255,255,0.8);
|
|
letter-spacing:1px;text-transform:uppercase;
|
|
}
|
|
|
|
/* 标题 */
|
|
.heading{margin-bottom:40px}
|
|
.heading h1{
|
|
font-family:'Playfair Display',serif;
|
|
font-size:34px;font-weight:700;color:#fff;
|
|
line-height:1.15;letter-spacing:-0.5px;
|
|
}
|
|
.heading h1 em{
|
|
font-style:normal;
|
|
background:linear-gradient(135deg,#F5A623,#F7DC6F);
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
background-clip:text;
|
|
}
|
|
.heading p{font-size:15px;color:rgba(255,255,255,0.35);margin-top:10px;font-weight:300}
|
|
|
|
/* 登录方式 */
|
|
.method-tabs{
|
|
display:flex;gap:28px;margin-bottom:36px;
|
|
border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:0;
|
|
}
|
|
.method-tab{
|
|
padding:0 0 12px;font-size:14px;font-weight:500;
|
|
color:rgba(255,255,255,0.3);border:none;background:transparent;
|
|
cursor:pointer;font-family:inherit;position:relative;
|
|
transition:color 0.3s ease;
|
|
}
|
|
.method-tab.active{color:rgba(245,166,35,0.9)}
|
|
.method-tab.active::after{
|
|
content:'';position:absolute;bottom:-1px;left:0;right:0;
|
|
height:2px;background:linear-gradient(90deg,#F5A623,#F7DC6F);
|
|
border-radius:1px;
|
|
}
|
|
|
|
.form-part{display:none}
|
|
.form-part.active{display:block;animation:elegantFade 0.4s ease}
|
|
@keyframes elegantFade{
|
|
from{opacity:0;transform:translateY(8px)}
|
|
to{opacity:1;transform:translateY(0)}
|
|
}
|
|
|
|
/* 底线输入 */
|
|
.field{margin-bottom:28px}
|
|
.field label{
|
|
display:block;font-size:11px;font-weight:600;
|
|
color:rgba(255,255,255,0.3);margin-bottom:10px;
|
|
text-transform:uppercase;letter-spacing:1.5px;
|
|
}
|
|
.field input{
|
|
width:100%;padding:14px 0;
|
|
border:none;border-bottom:1px solid rgba(255,255,255,0.08);
|
|
background:transparent;font-size:16px;font-family:inherit;
|
|
color:rgba(255,255,255,0.9);outline:none;
|
|
transition:border-color 0.3s ease;
|
|
}
|
|
.field input:focus{border-color:rgba(245,166,35,0.5)}
|
|
.field input::placeholder{color:rgba(255,255,255,0.15)}
|
|
|
|
.code-row{display:flex;gap:12px;align-items:stretch}
|
|
.code-row .field{flex:1;margin-bottom:0}
|
|
.code-get{
|
|
padding:0 20px;border:1px solid rgba(245,166,35,0.3);border-radius:8px;
|
|
background:transparent;font-size:12px;font-weight:600;
|
|
color:rgba(245,166,35,0.8);cursor:pointer;white-space:nowrap;
|
|
font-family:inherit;transition:all 0.3s ease;
|
|
letter-spacing:0.5px;
|
|
}
|
|
.code-get:hover{background:rgba(245,166,35,0.08)}
|
|
|
|
.forgot{text-align:right;margin-bottom:32px}
|
|
.forgot a{font-size:13px;color:rgba(255,255,255,0.3);text-decoration:none;font-weight:400}
|
|
|
|
/* 金色按钮 */
|
|
.btn-gold{
|
|
width:100%;padding:16px;border:none;border-radius:12px;
|
|
background:linear-gradient(135deg,#F5A623,#E8960D);color:#0a0a0a;
|
|
font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
|
|
transition:all 0.4s ease;letter-spacing:0.5px;
|
|
box-shadow:0 4px 20px rgba(245,166,35,0.2);
|
|
}
|
|
.btn-gold:hover{box-shadow:0 8px 30px rgba(245,166,35,0.3);transform:translateY(-1px)}
|
|
.btn-gold:active{transform:scale(0.98)}
|
|
|
|
/* 分割 */
|
|
.mini-divider{
|
|
display:flex;align-items:center;gap:16px;margin:32px 0 24px;
|
|
}
|
|
.mini-divider::before,.mini-divider::after{content:'';flex:1;height:0.5px;background:rgba(255,255,255,0.06)}
|
|
.mini-divider span{font-size:11px;color:rgba(255,255,255,0.2);letter-spacing:2px;text-transform:uppercase}
|
|
|
|
.social-row{display:flex;justify-content:center;gap:16px;margin-bottom:32px}
|
|
.social-btn{
|
|
width:52px;height:52px;border-radius:14px;
|
|
border:1px solid rgba(255,255,255,0.06);
|
|
background:rgba(255,255,255,0.02);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:20px;cursor:pointer;transition:all 0.3s ease;
|
|
}
|
|
.social-btn:active{background:rgba(255,255,255,0.06)}
|
|
|
|
.switch-text{
|
|
text-align:center;font-size:14px;color:rgba(255,255,255,0.25);
|
|
margin-top:auto;padding-top:16px;
|
|
}
|
|
.switch-text a{color:rgba(245,166,35,0.8);text-decoration:none;font-weight:600}
|
|
|
|
.agreement{
|
|
text-align:center;font-size:11px;color:rgba(255,255,255,0.15);
|
|
line-height:1.8;margin-top:16px;
|
|
}
|
|
.agreement a{color:rgba(255,255,255,0.3);text-decoration:none}
|
|
|
|
@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="gold-glow"></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">
|
|
<div class="brand-icon">🥤</div>
|
|
<div class="brand-name">可乐Web</div>
|
|
</div>
|
|
|
|
<div class="heading">
|
|
<h1>欢迎<em>回来</em></h1>
|
|
<p>登录你的账户，继续探索</p>
|
|
</div>
|
|
|
|
<div class="method-tabs">
|
|
<button class="method-tab active" onclick="switchMethod('pwd',this)">密码登录</button>
|
|
<button class="method-tab" onclick="switchMethod('code',this)">验证码登录</button>
|
|
</div>
|
|
|
|
<!-- 密码登录 -->
|
|
<div class="form-part active" id="m-pwd">
|
|
<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-gold">登 录</button>
|
|
</div>
|
|
|
|
<!-- 验证码登录 -->
|
|
<div class="form-part" id="m-code">
|
|
<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 style="height:8px"></div>
|
|
<button class="btn-gold">登录 / 注册</button>
|
|
</div>
|
|
|
|
<div class="mini-divider"><span>OR</span></div>
|
|
|
|
<div class="social-row">
|
|
<div class="social-btn">🐧</div>
|
|
<div class="social-btn">💬</div>
|
|
<div class="social-btn">📢</div>
|
|
</div>
|
|
|
|
<div class="switch-text">
|
|
还没有账户? <a href="#">注册新账户</a>
|
|
</div>
|
|
|
|
<div class="agreement">
|
|
登录即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchMethod(type, btn) {
|
|
document.querySelectorAll('.method-tab').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.querySelectorAll('.form-part').forEach(p => p.classList.remove('active'));
|
|
document.getElementById('m-' + type).classList.add('active');
|
|
}
|
|
|
|
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>
|