346 lines
11 KiB
HTML
346 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 - Apple风格极简白</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter: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:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
|
||
background:#f5f5f7;
|
||
display:flex;justify-content:center;align-items:center;
|
||
min-height:100vh;padding:20px;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
|
||
/* 手机框架 */
|
||
.phone{
|
||
width:390px;min-height:844px;background:#fff;
|
||
border-radius:50px;overflow:hidden;position:relative;
|
||
box-shadow:0 50px 100px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 灵动岛 */
|
||
.dynamic-island{
|
||
width:126px;height:36px;background:#000;border-radius:20px;
|
||
position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:10;
|
||
}
|
||
|
||
/* 状态栏 */
|
||
.status-bar{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding:18px 30px 0;font-size:15px;font-weight:600;color:#000;
|
||
position:relative;z-index:5;
|
||
}
|
||
.status-icons{display:flex;gap:5px;align-items:center}
|
||
|
||
/* 主内容 */
|
||
.page{
|
||
padding:80px 32px 40px;
|
||
min-height:844px;
|
||
display:flex;flex-direction:column;
|
||
}
|
||
.page.hidden{display:none}
|
||
|
||
/* 品牌 */
|
||
.brand{
|
||
display:flex;align-items:center;gap:12px;
|
||
margin-bottom:48px;
|
||
}
|
||
.brand-logo{
|
||
width:52px;height:52px;background:#000;border-radius:14px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:26px;
|
||
}
|
||
.brand-name{font-size:20px;font-weight:700;color:#1d1d1f;letter-spacing:-0.3px}
|
||
|
||
/* 标题区 */
|
||
.heading{margin-bottom:36px}
|
||
.heading h1{
|
||
font-size:34px;font-weight:800;color:#1d1d1f;
|
||
line-height:1.15;letter-spacing:-0.8px;margin-bottom:8px;
|
||
}
|
||
.heading p{font-size:16px;color:#86868b;line-height:1.4}
|
||
|
||
/* 登录方式切换 */
|
||
.method-toggle{
|
||
display:flex;background:#f5f5f7;border-radius:12px;
|
||
padding:4px;margin-bottom:32px;
|
||
}
|
||
.method-btn{
|
||
flex:1;padding:11px 0;text-align:center;
|
||
font-size:14px;font-weight:600;color:#86868b;
|
||
border:none;background:transparent;border-radius:10px;
|
||
cursor:pointer;transition:all 0.3s cubic-bezier(0.25,0.1,0.25,1);
|
||
font-family:inherit;
|
||
}
|
||
.method-btn.active{
|
||
background:#fff;color:#1d1d1f;
|
||
box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
|
||
}
|
||
|
||
/* 表单 */
|
||
.form-section{display:none;animation:fadeSlideIn 0.35s ease}
|
||
.form-section.active{display:block}
|
||
|
||
.input-field{margin-bottom:20px}
|
||
.input-field label{
|
||
display:block;font-size:13px;font-weight:600;color:#1d1d1f;
|
||
margin-bottom:8px;letter-spacing:0.1px;
|
||
}
|
||
.input-field input{
|
||
width:100%;padding:14px 16px;border:1.5px solid #e5e5ea;
|
||
border-radius:12px;font-size:16px;font-family:inherit;
|
||
background:#fff;color:#1d1d1f;outline:none;
|
||
transition:all 0.25s ease;
|
||
}
|
||
.input-field input:focus{
|
||
border-color:#667eea;
|
||
box-shadow:0 0 0 3px rgba(102,126,234,0.12);
|
||
}
|
||
.input-field input::placeholder{color:#c7c7cc}
|
||
|
||
.code-row{display:flex;gap:10px;align-items:stretch}
|
||
.code-row .input-field{flex:1;margin-bottom:0}
|
||
.code-get{
|
||
padding:0 20px;border:1.5px solid #e5e5ea;border-radius:12px;
|
||
background:#fafafa;font-size:13px;font-weight:600;color:#667eea;
|
||
cursor:pointer;white-space:nowrap;font-family:inherit;
|
||
transition:all 0.2s ease;
|
||
}
|
||
.code-get:hover{border-color:#667eea;background:#f0f0ff}
|
||
|
||
/* 忘记密码 */
|
||
.forgot{text-align:right;margin-bottom:28px}
|
||
.forgot a{font-size:14px;color:#667eea;text-decoration:none;font-weight:500}
|
||
|
||
/* 主按钮 */
|
||
.btn-main{
|
||
width:100%;padding:16px;border:none;border-radius:14px;
|
||
background:#1d1d1f;color:#fff;font-size:17px;font-weight:600;
|
||
cursor:pointer;font-family:inherit;transition:all 0.3s ease;
|
||
letter-spacing:0.2px;
|
||
}
|
||
.btn-main:active{transform:scale(0.97);opacity:0.9}
|
||
|
||
/* 分割线 */
|
||
.divider{
|
||
display:flex;align-items:center;gap:16px;
|
||
margin:28px 0 24px;
|
||
}
|
||
.divider::before,.divider::after{content:'';flex:1;height:0.5px;background:#d2d2d7}
|
||
.divider span{font-size:13px;color:#86868b;font-weight:500}
|
||
|
||
/* 社交登录 */
|
||
.social-row{display:flex;justify-content:center;gap:16px;margin-bottom:32px}
|
||
.social-btn{
|
||
width:56px;height:56px;border-radius:16px;border:1.5px solid #e5e5ea;
|
||
background:#fff;display:flex;align-items:center;justify-content:center;
|
||
font-size:24px;cursor:pointer;transition:all 0.25s ease;
|
||
}
|
||
.social-btn:active{transform:scale(0.92);background:#f5f5f5}
|
||
|
||
/* 底部切换 */
|
||
.switch-text{
|
||
text-align:center;font-size:15px;color:#86868b;
|
||
margin-top:auto;padding-top:20px;
|
||
}
|
||
.switch-text a{color:#667eea;text-decoration:none;font-weight:600}
|
||
|
||
/* 协议 */
|
||
.agreement{
|
||
text-align:center;font-size:12px;color:#aeaeb2;
|
||
line-height:1.7;margin-top:16px;
|
||
}
|
||
.agreement a{color:#8e8e93;text-decoration:none;font-weight:500}
|
||
|
||
/* 返回按钮 */
|
||
.back-btn{
|
||
position:absolute;top:70px;left:32px;
|
||
width:36px;height:36px;border-radius:50%;
|
||
background:#f5f5f7;border:none;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:18px;cursor:pointer;z-index:6;
|
||
transition:background 0.2s;
|
||
}
|
||
.back-btn:hover{background:#e8e8ed}
|
||
|
||
@keyframes fadeSlideIn{
|
||
from{opacity:0;transform:translateY(12px)}
|
||
to{opacity:1;transform:translateY(0)}
|
||
}
|
||
|
||
@media(max-width:440px){
|
||
body{padding:0;background:#fff}
|
||
.phone{width:100%;border-radius:0;box-shadow:none;min-height:100vh}
|
||
.dynamic-island{display:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="phone">
|
||
<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>
|
||
|
||
<button class="back-btn" onclick="history.back()">‹</button>
|
||
|
||
<div class="page" id="page-login">
|
||
<div class="brand">
|
||
<div class="brand-logo">🥤</div>
|
||
<div class="brand-name">可乐Web</div>
|
||
</div>
|
||
|
||
<div class="heading">
|
||
<h1>欢迎回来</h1>
|
||
<p>登录你的账户，继续探索</p>
|
||
</div>
|
||
|
||
<div class="method-toggle">
|
||
<button class="method-btn active" onclick="switchMethod('pwd',this)">密码登录</button>
|
||
<button class="method-btn" onclick="switchMethod('code',this)">验证码登录</button>
|
||
</div>
|
||
|
||
<!-- 密码登录 -->
|
||
<div class="form-section active" id="login-pwd">
|
||
<div class="input-field">
|
||
<label>账号</label>
|
||
<input type="text" placeholder="用户名 / 邮箱 / 手机号">
|
||
</div>
|
||
<div class="input-field">
|
||
<label>密码</label>
|
||
<input type="password" placeholder="请输入密码">
|
||
</div>
|
||
<div class="forgot"><a href="#">忘记密码?</a></div>
|
||
<button class="btn-main" onclick="showPage('page-success')">登 录</button>
|
||
</div>
|
||
|
||
<!-- 验证码登录 -->
|
||
<div class="form-section" id="login-code">
|
||
<div class="input-field">
|
||
<label>邮箱</label>
|
||
<input type="email" placeholder="your@email.com">
|
||
</div>
|
||
<div class="input-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:16px"></div>
|
||
<button class="btn-main">登录 / 注册</button>
|
||
</div>
|
||
|
||
<div class="divider"><span>或</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="#" onclick="showPage('page-register');return false">注册新账户</a>
|
||
</div>
|
||
|
||
<div class="agreement">
|
||
登录即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 注册页 -->
|
||
<div class="page hidden" id="page-register">
|
||
<div class="brand">
|
||
<div class="brand-logo">🥤</div>
|
||
<div class="brand-name">可乐Web</div>
|
||
</div>
|
||
|
||
<div class="heading">
|
||
<h1>创建账户</h1>
|
||
<p>加入可乐Web，开始你的探索之旅</p>
|
||
</div>
|
||
|
||
<div class="input-field">
|
||
<label>邮箱地址</label>
|
||
<input type="email" placeholder="your@email.com">
|
||
</div>
|
||
<div class="input-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="input-field">
|
||
<label>用户名</label>
|
||
<input type="text" placeholder="给自己取个名字">
|
||
</div>
|
||
<div class="input-field">
|
||
<label>密码</label>
|
||
<input type="password" placeholder="至少 8 位字符">
|
||
</div>
|
||
<div style="height:8px"></div>
|
||
<button class="btn-main">创建账户</button>
|
||
|
||
<div class="switch-text">
|
||
已有账户? <a href="#" onclick="showPage('page-login');return false">立即登录</a>
|
||
</div>
|
||
|
||
<div class="agreement">
|
||
注册即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成功页 -->
|
||
<div class="page hidden" id="page-success" style="justify-content:center;align-items:center;text-align:center">
|
||
<div style="font-size:64px;margin-bottom:24px">🎉</div>
|
||
<h1 style="font-size:28px;font-weight:800;color:#1d1d1f;margin-bottom:12px">登录成功!</h1>
|
||
<p style="font-size:16px;color:#86868b">欢迎回到可乐Web</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchMethod(type, btn) {
|
||
document.querySelectorAll('.method-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.querySelectorAll('#page-login .form-section').forEach(s => s.classList.remove('active'));
|
||
document.getElementById('login-' + type).classList.add('active');
|
||
}
|
||
|
||
function showPage(id) {
|
||
document.querySelectorAll('.page').forEach(p => {
|
||
p.classList.add('hidden');
|
||
p.style.animation = 'none';
|
||
});
|
||
const target = document.getElementById(id);
|
||
target.classList.remove('hidden');
|
||
target.offsetHeight;
|
||
target.style.animation = 'fadeSlideIn 0.35s ease';
|
||
}
|
||
|
||
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>
|