477 lines
14 KiB
HTML
477 lines
14 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: #0c0c14;
|
|
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: linear-gradient(-45deg, #667eea, #764ba2, #ee5a6f, #0ea5e9);
|
|
background-size: 400% 400%;
|
|
animation: bgShift 12s ease infinite;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.06);
|
|
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: #fff;
|
|
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: rgba(255,255,255,0.3);
|
|
border-radius: 3px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Floating blobs */
|
|
.blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
pointer-events: none;
|
|
}
|
|
.blob-1 { top: -60px; left: -60px; width: 200px; height: 200px; background: rgba(255,255,255,0.08); animation: floatBlob 8s ease-in-out infinite; }
|
|
.blob-2 { top: 300px; right: -80px; width: 250px; height: 250px; background: rgba(255,100,150,0.12); animation: floatBlob 10s ease-in-out infinite 2s; }
|
|
.blob-3 { bottom: 100px; left: 40px; width: 180px; height: 180px; background: rgba(100,200,255,0.1); animation: floatBlob 9s ease-in-out infinite 4s; }
|
|
|
|
/* 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: #fff;
|
|
}
|
|
.login-form::-webkit-scrollbar { width: 0; }
|
|
|
|
.form-logo { font-size: 42px; margin-bottom: 8px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2)); }
|
|
.form-title { font-size: 28px; font-weight: 800; margin-bottom: 6px; text-align: center; }
|
|
.form-subtitle { font-size: 14px; margin-bottom: 28px; opacity: 0.6; text-align: center; }
|
|
|
|
/* Method Tabs */
|
|
.method-tabs {
|
|
display: flex;
|
|
background: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(10px);
|
|
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: rgba(255,255,255,0.5);
|
|
}
|
|
.method-tab.active {
|
|
background: rgba(255,255,255,0.95);
|
|
color: #667eea;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Inputs - Glass style */
|
|
.input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255,255,255,0.12);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 14px;
|
|
padding: 0 16px;
|
|
height: 52px;
|
|
margin-bottom: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
.input-group:focus-within {
|
|
border-color: rgba(255,255,255,0.35);
|
|
background: rgba(255,255,255,0.18);
|
|
}
|
|
.input-icon { font-size: 16px; margin-right: 12px; opacity: 0.6; flex-shrink: 0; }
|
|
.input-group input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
outline: none;
|
|
height: 100%;
|
|
color: #fff;
|
|
}
|
|
.input-group input::placeholder { color: rgba(255,255,255,0.45); }
|
|
.eye-toggle {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
opacity: 0.5;
|
|
background: none;
|
|
border: none;
|
|
padding: 4px;
|
|
color: #fff;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.eye-toggle:hover { opacity: 0.8; }
|
|
|
|
.forgot-link { text-align: right; margin-bottom: 20px; }
|
|
.forgot-link a { font-size: 13px; text-decoration: none; font-weight: 500; color: rgba(255,255,255,0.8); }
|
|
.forgot-link a:hover { color: #fff; }
|
|
|
|
/* 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: rgba(255,255,255,0.2);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
color: #fff;
|
|
transition: all 0.2s;
|
|
}
|
|
.send-code-btn:hover:not(:disabled) { background: rgba(255,255,255,0.3); transform: scale(1.02); }
|
|
.send-code-btn:disabled { opacity: 0.4; 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;
|
|
box-shadow: 0 8px 32px rgba(102,126,234,0.5);
|
|
}
|
|
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(102,126,234,0.6); }
|
|
.submit-btn:active { transform: translateY(1px); }
|
|
|
|
/* Divider */
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 16px 0;
|
|
gap: 16px;
|
|
}
|
|
.divider::before, .divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
.divider span { font-size: 13px; opacity: 0.6; 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: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.social-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.25); }
|
|
|
|
/* Bottom */
|
|
.bottom-link { text-align: center; margin-bottom: 16px; }
|
|
.bottom-link span { font-size: 14px; opacity: 0.6; }
|
|
.bottom-link a { font-size: 14px; font-weight: 700; text-decoration: underline; color: #fff; }
|
|
.footer-text {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
opacity: 0.35;
|
|
line-height: 1.6;
|
|
margin-top: auto;
|
|
padding-top: 12px;
|
|
}
|
|
.footer-text a { text-decoration: underline; color: rgba(255,255,255,0.5); }
|
|
|
|
/* Toggle */
|
|
.login-view, .register-view { display: flex; flex-direction: column; }
|
|
.login-view.hidden { display: none; }
|
|
.register-view { display: none; }
|
|
.register-view.active { display: flex; }
|
|
|
|
/* Animations */
|
|
@keyframes bgShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
@keyframes floatBlob {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(30px, -40px) scale(1.1); }
|
|
50% { transform: translate(-20px, 20px) scale(0.9); }
|
|
75% { transform: translate(40px, 30px) scale(1.05); }
|
|
}
|
|
|
|
@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="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></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 style="text-align:center;">
|
|
<div class="form-logo">🥤</div>
|
|
</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 style="text-align:center;">
|
|
<div class="form-logo">🥤</div>
|
|
</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>
|