160 lines
8.2 KiB
HTML
160 lines
8.2 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;display:flex;justify-content:center;align-items:center;padding:20px;position:relative;overflow:hidden;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
|
|
body::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 60%);animation:pulse 8s ease-in-out infinite}
|
|
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
|
|
.card{background:#fff;border-radius:20px;padding:36px 28px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,0.15);position:relative;z-index:1;animation:fadeUp .5s ease}
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
|
|
/* Back button */
|
|
.back-link{display:inline-flex;align-items:center;gap:6px;color:#666;font-size:13px;text-decoration:none;margin-bottom:20px;cursor:pointer;transition:color .2s}
|
|
.back-link:hover{color:#667eea}
|
|
/* Header */
|
|
.header{text-align:center;margin-bottom:28px}
|
|
.header .icon-wrap{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:32px;box-shadow:0 8px 24px rgba(102,126,234,0.3)}
|
|
.header h2{font-size:22px;font-weight:700;color:#1a1a2e;margin-bottom:6px}
|
|
.header p{font-size:13px;color:#999}
|
|
/* Steps */
|
|
.steps{display:flex;gap:0;margin-bottom:28px;position:relative}
|
|
.steps::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:#eee;z-index:0}
|
|
.step-item{flex:1;text-align:center;position:relative;z-index:1}
|
|
.step-num{width:32px;height:32px;border-radius:50%;background:#eee;color:#999;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;transition:all .3s}
|
|
.step-item.active .step-num{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px rgba(102,126,234,0.3)}
|
|
.step-item.done .step-num{background:#34d399;color:#fff}
|
|
.step-text{font-size:11px;color:#bbb;font-weight:500}
|
|
.step-item.active .step-text{color:#667eea}
|
|
.step-item.done .step-text{color:#34d399}
|
|
/* Form */
|
|
.step-page{display:none}
|
|
.step-page.active{display:block;animation:fadeUp .3s ease}
|
|
.field{margin-bottom:16px}
|
|
.field label{display:block;font-size:13px;font-weight:600;color:#333;margin-bottom:6px}
|
|
.field-wrap{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;background:#f8f9ff;border:1.5px solid transparent;transition:all .2s}
|
|
.field-wrap:focus-within{border-color:#667eea;background:#fff;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}
|
|
.field-wrap .icon{font-size:17px;color:#999;flex-shrink:0}
|
|
.field-wrap input{flex:1;background:none;border:none;outline:none;font-size:15px;color:#333;font-family:inherit}
|
|
.field-wrap input::placeholder{color:#ccc}
|
|
.code-btn{padding:10px 18px;border-radius:10px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .2s;flex-shrink:0}
|
|
.code-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
.email-badge{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;background:#f0f0ff;margin-bottom:18px;font-size:13px;color:#667eea;font-weight:500}
|
|
.btn-primary{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(102,126,234,0.3);transition:all .25s;margin-top:4px}
|
|
.btn-primary:active{transform:scale(.98)}
|
|
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
|
|
.pwd-rules{padding:12px 14px;border-radius:10px;background:#f0fff4;border:1px solid rgba(16,185,129,0.15);margin-top:14px}
|
|
.pwd-rules p{font-size:12px;color:#666;line-height:1.8}
|
|
.pwd-rules span{color:#34d399;font-weight:700}
|
|
/* Success */
|
|
.success-wrap{text-align:center;padding:20px 0}
|
|
.success-icon{font-size:72px;margin-bottom:16px}
|
|
.success-wrap h2{font-size:20px;color:#1a1a2e;margin-bottom:8px}
|
|
.success-wrap p{font-size:13px;color:#999;margin-bottom:24px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<a class="back-link" onclick="goBack()" id="backLink" style="display:none">← 返回</a>
|
|
|
|
<!-- Steps -->
|
|
<div class="steps" id="stepsBar">
|
|
<div class="step-item active"><div class="step-num">1</div><div class="step-text">验证身份</div></div>
|
|
<div class="step-item"><div class="step-num">2</div><div class="step-text">重置密码</div></div>
|
|
</div>
|
|
|
|
<!-- Step 1 -->
|
|
<div class="step-page active" id="step1">
|
|
<div class="header">
|
|
<div class="icon-wrap">🔑</div>
|
|
<h2>忘记密码</h2>
|
|
<p>输入注册邮箱，我们将发送验证码</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>邮箱地址</label>
|
|
<div class="field-wrap">
|
|
<span class="icon">✉️</span>
|
|
<input type="email" placeholder="请输入注册邮箱" id="emailInput">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>验证码</label>
|
|
<div class="field-wrap">
|
|
<span class="icon">🛡️</span>
|
|
<input type="text" placeholder="请输入验证码" maxlength="8">
|
|
<button class="code-btn" id="sendCodeBtn" onclick="sendCode()">发送验证码</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary" onclick="goStep2()">下一步</button>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="step-page" id="step2">
|
|
<div class="header">
|
|
<div class="icon-wrap">🔒</div>
|
|
<h2>设置新密码</h2>
|
|
<p>请设置一个安全的新密码</p>
|
|
</div>
|
|
<div class="email-badge" id="emailDisplay">✉️ user@example.com</div>
|
|
<div class="field">
|
|
<label>验证码</label>
|
|
<div class="field-wrap">
|
|
<span class="icon">🛡️</span>
|
|
<input type="text" placeholder="请输入验证码" maxlength="8">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>新密码</label>
|
|
<div class="field-wrap">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" placeholder="至少8位，包含字母和数字">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>确认密码</label>
|
|
<div class="field-wrap">
|
|
<span class="icon">🔒</span>
|
|
<input type="password" placeholder="请再次输入新密码">
|
|
</div>
|
|
</div>
|
|
<div class="pwd-rules">
|
|
<p><span>✓</span> 至少8个字符</p>
|
|
<p><span>✓</span> 包含字母和数字</p>
|
|
<p><span>✓</span> 建议12位以上更安全</p>
|
|
</div>
|
|
<button class="btn-primary" onclick="resetPwd()">重置密码</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
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 goStep2(){
|
|
var em=document.getElementById('emailInput').value||'user@example.com';
|
|
document.getElementById('emailDisplay').textContent='✉️ '+em;
|
|
document.getElementById('step1').classList.remove('active');
|
|
document.getElementById('step2').classList.add('active');
|
|
document.getElementById('backLink').style.display='inline-flex';
|
|
var items=document.querySelectorAll('.step-item');
|
|
items[0].classList.remove('active');items[0].classList.add('done');
|
|
items[1].classList.add('active');
|
|
}
|
|
function goBack(){
|
|
document.getElementById('step2').classList.remove('active');
|
|
document.getElementById('step1').classList.add('active');
|
|
document.getElementById('backLink').style.display='none';
|
|
var items=document.querySelectorAll('.step-item');
|
|
items[1].classList.remove('active');
|
|
items[0].classList.remove('done');items[0].classList.add('active');
|
|
}
|
|
function resetPwd(){alert('密码重置成功！跳转到登录页...')}
|
|
</script>
|
|
</body>
|
|
</html> |