441 lines
12 KiB
HTML
441 lines
12 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>可乐Web · 极简白登录</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif;
|
|
background: #f0f0f5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Phone Frame */
|
|
.phone-frame {
|
|
width: 390px;
|
|
height: 844px;
|
|
border-radius: 44px;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 20px 80px rgba(0,0,0,0.15), 0 0 0 2px rgba(0,0,0,0.05);
|
|
flex-shrink: 0;
|
|
}
|
|
.dynamic-island {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 126px;
|
|
height: 36px;
|
|
background: #000;
|
|
border-radius: 20px;
|
|
z-index: 100;
|
|
}
|
|
.status-bar {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 30px;
|
|
right: 30px;
|
|
height: 28px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 99;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1a1a2e;
|
|
pointer-events: none;
|
|
}
|
|
.status-bar-left { display: flex; align-items: center; }
|
|
.status-bar-right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
|
.home-indicator {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 134px;
|
|
height: 5px;
|
|
background: #ddd;
|
|
border-radius: 3px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Form */
|
|
.login-form {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
padding: 70px 28px 20px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #1a1a2e;
|
|
}
|
|
.login-form::-webkit-scrollbar { width: 0; }
|
|
|
|
.form-logo { font-size: 42px; margin-bottom: 8px; }
|
|
.form-title { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
|
|
.form-subtitle { font-size: 14px; margin-bottom: 28px; opacity: 0.5; color: #666; }
|
|
|
|
/* Method Tabs */
|
|
.method-tabs {
|
|
display: flex;
|
|
background: #f1f3f5;
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.method-tab {
|
|
flex: 1;
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
background: transparent;
|
|
color: #999;
|
|
}
|
|
.method-tab.active {
|
|
background: #fff;
|
|
color: #1a1a2e;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* Inputs */
|
|
.input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f5f6f8;
|
|
border-radius: 14px;
|
|
padding: 0 16px;
|
|
height: 52px;
|
|
margin-bottom: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
.input-group:focus-within {
|
|
box-shadow: 0 0 0 2px rgba(102,126,234,0.3);
|
|
}
|
|
.input-icon { font-size: 16px; margin-right: 12px; opacity: 0.4; flex-shrink: 0; }
|
|
.input-group input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
outline: none;
|
|
height: 100%;
|
|
color: #1a1a2e;
|
|
}
|
|
.input-group input::placeholder { opacity: 0.4; }
|
|
.eye-toggle {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
opacity: 0.4;
|
|
background: none;
|
|
border: none;
|
|
padding: 4px;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.eye-toggle:hover { opacity: 0.7; }
|
|
|
|
.forgot-link { text-align: right; margin-bottom: 20px; }
|
|
.forgot-link a { font-size: 13px; text-decoration: none; font-weight: 500; color: #667eea; }
|
|
|
|
/* Code Row */
|
|
.code-row { display: flex; gap: 10px; }
|
|
.code-row .input-group { flex: 1; margin-bottom: 0; }
|
|
.send-code-btn {
|
|
padding: 0 16px;
|
|
border-radius: 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: none;
|
|
white-space: nowrap;
|
|
height: 52px;
|
|
flex-shrink: 0;
|
|
background: #667eea;
|
|
color: #fff;
|
|
transition: all 0.2s;
|
|
}
|
|
.send-code-btn:hover:not(:disabled) { transform: scale(1.02); }
|
|
.send-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
/* Submit */
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 54px;
|
|
border-radius: 16px;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
border: none;
|
|
letter-spacing: 4px;
|
|
transition: all 0.3s;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: #fff;
|
|
}
|
|
.submit-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(102,126,234,0.35); }
|
|
.submit-btn:active { transform: translateY(1px); }
|
|
|
|
/* Divider */
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 16px 0;
|
|
gap: 16px;
|
|
color: #bbb;
|
|
}
|
|
.divider::before, .divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #eee;
|
|
}
|
|
.divider span { font-size: 13px; flex-shrink: 0; }
|
|
|
|
/* Social */
|
|
.social-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 12px 0 20px;
|
|
}
|
|
.social-btn {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 16px;
|
|
background: #f5f6f8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: none;
|
|
}
|
|
.social-btn:hover { transform: translateY(-2px); background: #eee; }
|
|
|
|
/* Bottom */
|
|
.bottom-link { text-align: center; margin-bottom: 16px; color: #999; }
|
|
.bottom-link span { font-size: 14px; }
|
|
.bottom-link a { font-size: 14px; font-weight: 700; text-decoration: none; color: #667eea; }
|
|
.footer-text {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
opacity: 0.35;
|
|
line-height: 1.6;
|
|
margin-top: auto;
|
|
padding-top: 12px;
|
|
color: #999;
|
|
}
|
|
.footer-text a { text-decoration: underline; color: #999; }
|
|
|
|
/* Toggle */
|
|
.login-view, .register-view { display: flex; flex-direction: column; }
|
|
.login-view.hidden { display: none; }
|
|
.register-view { display: none; }
|
|
.register-view.active { display: flex; }
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
body { padding: 0; align-items: stretch; }
|
|
.phone-frame {
|
|
width: 100%;
|
|
height: 100vh;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="phone-frame">
|
|
<div class="dynamic-island"></div>
|
|
<div class="status-bar">
|
|
<div class="status-bar-left">9:41</div>
|
|
<div class="status-bar-right">
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="6" width="3" height="6" rx="0.5" opacity="0.3"/><rect x="4.5" y="4" width="3" height="8" rx="0.5" opacity="0.5"/><rect x="9" y="1.5" width="3" height="10.5" rx="0.5" opacity="0.7"/><rect x="13.5" y="0" width="3" height="12" rx="0.5"/></svg>
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.4C5.6 2.4 3.4 3.3 1.8 4.8L0 3C2 1.1 4.9 0 8 0s6 1.1 8 3l-1.8 1.8C12.6 3.3 10.4 2.4 8 2.4zM8 7.2c-1.6 0-3 .6-4 1.6L2.2 7C3.6 5.6 5.7 4.8 8 4.8s4.4.8 5.8 2.2L12 8.8c-1-1-2.4-1.6-4-1.6zM8 12l-2.4-2.4C6.2 9 7 8.6 8 8.6s1.8.4 2.4 1L8 12z"/></svg>
|
|
<svg width="26" height="12" viewBox="0 0 26 12" fill="currentColor"><rect x="0" y="1" width="22" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1"/><rect x="23" y="3.5" width="2" height="5" rx="1"/><rect x="1.5" y="2.5" width="19" height="7" rx="1"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-form">
|
|
<!-- ===== LOGIN ===== -->
|
|
<div class="login-view" id="loginView">
|
|
<div class="form-logo">🥤</div>
|
|
<div class="form-title">欢迎回来</div>
|
|
<div class="form-subtitle">登录你的账户，继续探索</div>
|
|
|
|
<div class="method-tabs" id="methodTabs">
|
|
<button class="method-tab active" onclick="switchMethod('pwd')">密码登录</button>
|
|
<button class="method-tab" onclick="switchMethod('code')">验证码登录</button>
|
|
</div>
|
|
|
|
<!-- Password Login -->
|
|
<div id="pwdSection">
|
|
<div class="input-group">
|
|
<span class="input-icon">📱</span>
|
|
<input type="text" placeholder="手机号 / 邮箱">
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-icon">🔒</span>
|
|
<input type="password" placeholder="密码" id="pwdInput">
|
|
<button class="eye-toggle" onclick="togglePwd()">👁</button>
|
|
</div>
|
|
<div class="forgot-link"><a href="#">忘记密码?</a></div>
|
|
</div>
|
|
|
|
<!-- Code Login -->
|
|
<div id="codeSection" style="display:none;">
|
|
<div class="input-group">
|
|
<span class="input-icon">📱</span>
|
|
<input type="text" placeholder="手机号 / 邮箱">
|
|
</div>
|
|
<div class="code-row">
|
|
<div class="input-group">
|
|
<span class="input-icon">✉️</span>
|
|
<input type="text" placeholder="验证码">
|
|
</div>
|
|
<button class="send-code-btn" onclick="startCountdown(this)">发送验证码</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="submit-btn">登 录</button>
|
|
|
|
<div class="divider"><span>或</span></div>
|
|
|
|
<div class="social-buttons">
|
|
<button class="social-btn">🐧</button>
|
|
<button class="social-btn">💬</button>
|
|
<button class="social-btn">📢</button>
|
|
</div>
|
|
|
|
<div class="bottom-link">
|
|
<span>还没有账户? </span>
|
|
<a href="#" onclick="event.preventDefault();toggleView('reg')">免费注册</a>
|
|
</div>
|
|
<div class="footer-text">登录即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></div>
|
|
</div>
|
|
|
|
<!-- ===== REGISTER ===== -->
|
|
<div class="register-view" id="regView">
|
|
<div class="form-logo">🥤</div>
|
|
<div class="form-title">创建账户</div>
|
|
<div class="form-subtitle">注册新账户，开启你的旅程</div>
|
|
|
|
<div class="input-group">
|
|
<span class="input-icon">👤</span>
|
|
<input type="text" placeholder="用户名">
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-icon">📱</span>
|
|
<input type="text" placeholder="手机号 / 邮箱">
|
|
</div>
|
|
<div class="code-row">
|
|
<div class="input-group">
|
|
<span class="input-icon">✉️</span>
|
|
<input type="text" placeholder="验证码">
|
|
</div>
|
|
<button class="send-code-btn" onclick="startCountdown(this)">发送验证码</button>
|
|
</div>
|
|
<div style="height:12px;"></div>
|
|
<div class="input-group">
|
|
<span class="input-icon">🔒</span>
|
|
<input type="password" placeholder="设置密码 (8-20位)">
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-icon">🔒</span>
|
|
<input type="password" placeholder="确认密码">
|
|
</div>
|
|
|
|
<button class="submit-btn" style="letter-spacing:2px;">注 册</button>
|
|
|
|
<div class="bottom-link">
|
|
<span>已有账户? </span>
|
|
<a href="#" onclick="event.preventDefault();toggleView('login')">返回登录</a>
|
|
</div>
|
|
<div class="footer-text">注册即代表同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="home-indicator"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchMethod(type) {
|
|
const tabs = document.querySelectorAll('#methodTabs .method-tab');
|
|
const pwd = document.getElementById('pwdSection');
|
|
const code = document.getElementById('codeSection');
|
|
if (type === 'pwd') {
|
|
pwd.style.display = '';
|
|
code.style.display = 'none';
|
|
tabs[0].classList.add('active');
|
|
tabs[1].classList.remove('active');
|
|
} else {
|
|
pwd.style.display = 'none';
|
|
code.style.display = '';
|
|
tabs[0].classList.remove('active');
|
|
tabs[1].classList.add('active');
|
|
}
|
|
}
|
|
|
|
function toggleView(view) {
|
|
const login = document.getElementById('loginView');
|
|
const reg = document.getElementById('regView');
|
|
if (view === 'reg') {
|
|
login.classList.add('hidden');
|
|
reg.classList.add('active');
|
|
} else {
|
|
login.classList.remove('hidden');
|
|
reg.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
function togglePwd() {
|
|
const input = document.getElementById('pwdInput');
|
|
const btn = event.target;
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
btn.textContent = '🙈';
|
|
} else {
|
|
input.type = 'password';
|
|
btn.textContent = '👁';
|
|
}
|
|
}
|
|
|
|
function startCountdown(btn) {
|
|
if (btn.disabled) return;
|
|
btn.disabled = true;
|
|
let sec = 60;
|
|
const original = btn.textContent;
|
|
btn.textContent = sec + 's';
|
|
const timer = setInterval(() => {
|
|
sec--;
|
|
btn.textContent = sec + 's';
|
|
if (sec <= 0) {
|
|
clearInterval(timer);
|
|
btn.textContent = original;
|
|
btn.disabled = false;
|
|
}
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|