156 lines
7.9 KiB
HTML
156 lines
7.9 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>可乐 - 极简白底 忘记密码</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?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:'Noto Sans SC',system-ui,sans-serif;min-height:100vh;background:#fafafa;display:flex;flex-direction:column;align-items:center;padding:0}
|
|
/* Top bar */
|
|
.topbar{width:100%;padding:16px 20px;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid #f0f0f0}
|
|
.topbar .back{width:36px;height:36px;border-radius:10px;border:1px solid #eee;background:none;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;color:#666;transition:all .2s}
|
|
.topbar .back:hover{background:#f5f5f5}
|
|
.topbar h3{font-size:16px;font-weight:600;color:#222}
|
|
/* Main content */
|
|
.main{width:100%;max-width:480px;padding:32px 24px;flex:1}
|
|
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:32px}
|
|
.brand-icon{width:40px;height:40px;border-radius:10px;background:#ef4444;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
|
|
.brand-text{font-size:14px;font-weight:600;color:#222}
|
|
.brand-text small{display:block;font-size:11px;color:#aaa;font-weight:400}
|
|
/* Steps - horizontal pill */
|
|
.pill-steps{display:flex;background:#f5f5f5;border-radius:12px;padding:4px;margin-bottom:32px}
|
|
.pill{flex:1;padding:10px 0;text-align:center;font-size:13px;font-weight:600;color:#aaa;border:none;background:none;border-radius:9px;cursor:pointer;transition:all .25s;font-family:inherit}
|
|
.pill.active{background:#fff;color:#111;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
|
|
/* Step pages */
|
|
.step-page{display:none}
|
|
.step-page.active{display:block;animation:fadeUp .25s ease}
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
|
.field{margin-bottom:18px}
|
|
.field label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:8px}
|
|
.field-row{display:flex;align-items:center;gap:0;border:1.5px solid #e5e5e5;border-radius:12px;overflow:hidden;transition:all .2s;background:#fff}
|
|
.field-row:focus-within{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.06)}
|
|
.field-row .icon{padding:0 14px;font-size:16px;color:#bbb;flex-shrink:0}
|
|
.field-row input{flex:1;padding:14px 14px 14px 0;background:none;border:none;outline:none;font-size:15px;color:#222;font-family:inherit}
|
|
.field-row input::placeholder{color:#ccc}
|
|
.field-row .toggle{padding:0 14px;background:none;border:none;color:#ccc;cursor:pointer;font-size:16px}
|
|
.code-btn{padding:11px 18px;border:none;background:#ef4444;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .2s;border-left:1px solid #e5e5e5}
|
|
.code-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
.email-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;background:#fff3f3;color:#ef4444;font-size:12px;font-weight:600;margin-bottom:20px;border:1px solid rgba(239,68,68,0.1)}
|
|
.btn-orange{width:100%;padding:14px;border:none;border-radius:12px;background:#ef4444;color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .25s;margin-top:8px}
|
|
.btn-orange:active{transform:scale(.98)}
|
|
.btn-orange:disabled{opacity:.5;cursor:not-allowed}
|
|
.link-row{display:flex;justify-content:flex-end;margin-top:-8px;margin-bottom:18px}
|
|
.link-row a{font-size:12px;color:#ef4444;text-decoration:none;font-weight:500}
|
|
/* Password tips */
|
|
.tips{margin-top:16px;padding:14px;border-radius:10px;border:1px dashed #e0e0e0;background:#fafafa}
|
|
.tips p{font-size:12px;color:#888;line-height:2}
|
|
.tips strong{color:#ef4444}
|
|
/* Success */
|
|
.success{text-align:center;padding:40px 0}
|
|
.success .big{font-size:72px;margin-bottom:16px}
|
|
.success h2{font-size:20px;font-weight:700;color:#222;margin-bottom:8px}
|
|
.success p{font-size:13px;color:#999;margin-bottom:28px}
|
|
.btn-outline{padding:12px 32px;border:1.5px solid #ef4444;background:none;color:#ef4444;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<button class="back" onclick="goBack()" id="backBtn" style="display:none">←</button>
|
|
<h3 id="topTitle">找回密码</h3>
|
|
</div>
|
|
<div class="main">
|
|
<!-- Step pills -->
|
|
<div class="pill-steps">
|
|
<button class="pill active" onclick="goStep(0)">① 验证邮箱</button>
|
|
<button class="pill" onclick="goStep(1)">② 设置密码</button>
|
|
</div>
|
|
|
|
<!-- Step 1 -->
|
|
<div class="step-page active" id="step0">
|
|
<div class="brand-row">
|
|
<div class="brand-icon">🥤</div>
|
|
<div class="brand-text">可乐<small>ChunYu</small></div>
|
|
</div>
|
|
<div class="field">
|
|
<label>邮箱地址</label>
|
|
<div class="field-row">
|
|
<span class="icon">✉️</span>
|
|
<input type="email" placeholder="请输入注册邮箱" id="emailInput">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>验证码</label>
|
|
<div class="field-row">
|
|
<span class="icon">🛡️</span>
|
|
<input type="text" placeholder="请输入验证码" maxlength="8">
|
|
<button class="code-btn" id="sendCodeBtn" onclick="sendCode()">获取验证码</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-orange" onclick="goStep(1)">下一步</button>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="step-page" id="step1">
|
|
<div class="email-chip" id="emailDisplay">✉️ user@example.com</div>
|
|
<div class="field">
|
|
<label>验证码</label>
|
|
<div class="field-row">
|
|
<span class="icon">🛡️</span>
|
|
<input type="text" placeholder="请输入验证码" maxlength="8">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>新密码</label>
|
|
<div class="field-row">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" placeholder="至少8位，包含字母和数字">
|
|
<button class="toggle" onclick="tp(this)">👁️</button>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>确认密码</label>
|
|
<div class="field-row">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" placeholder="请再次输入新密码">
|
|
<button class="toggle" onclick="tp(this)">👁️</button>
|
|
</div>
|
|
</div>
|
|
<div class="tips">
|
|
<p><strong>•</strong> 至少8个字符</p>
|
|
<p><strong>•</strong> 包含字母和数字</p>
|
|
<p><strong>•</strong> 建议12位以上更安全</p>
|
|
</div>
|
|
<button class="btn-orange" onclick="resetPwd()">重置密码</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var currentStep=0;
|
|
function goStep(n){
|
|
if(n===1){
|
|
var em=document.getElementById('emailInput').value||'user@example.com';
|
|
document.getElementById('emailDisplay').textContent='✉️ '+em;
|
|
document.getElementById('backBtn').style.display='flex';
|
|
document.getElementById('topTitle').textContent='设置新密码';
|
|
} else {
|
|
document.getElementById('backBtn').style.display='none';
|
|
document.getElementById('topTitle').textContent='找回密码';
|
|
}
|
|
document.querySelectorAll('.step-page').forEach(function(el){el.classList.remove('active')});
|
|
document.getElementById('step'+n).classList.add('active');
|
|
document.querySelectorAll('.pill').forEach(function(el,i){el.classList.toggle('active',i===n)});
|
|
currentStep=n;
|
|
}
|
|
function goBack(){goStep(0)}
|
|
function sendCode(){
|
|
var btn=document.getElementById('sendCodeBtn');var s=60;btn.disabled=true;
|
|
var iv=setInterval(function(){s--;btn.textContent=s+'s';if(s<=0){clearInterval(iv);btn.disabled=false;btn.textContent='获取验证码'}},1000);
|
|
}
|
|
function tp(btn){var inp=btn.parentElement.querySelector('input');inp.type=inp.type==='password'?'text':'password'}
|
|
function resetPwd(){alert('密码重置成功！跳转到登录页...')}
|
|
</script>
|
|
</body>
|
|
</html> |