feat: PLANNING体系首版(00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径)+M1止血交付

This commit is contained in:
2026-09-12 14:25:25 +08:00
commit 8242e730b4
482 changed files with 37029 additions and 0 deletions
@@ -0,0 +1,593 @@
<!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;900&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
font-family:'Noto Sans SC',system-ui,sans-serif;
background:#000;color:#fff;
display:flex;flex-direction:column;
min-height:100vh;
}
/* ===== 页面容器 ===== */
.page{display:none;flex-direction:column;min-height:100vh}
.page.active{display:flex}
/* ===== 安全区 + 顶部栏 ===== */
.spacer{height:env(safe-area-inset-top,20px);min-height:20px}
.top-bar{
display:flex;align-items:center;justify-content:space-between;
padding:8px 20px 0;flex-shrink:0;
}
.top-bar .back{
width:36px;height:36px;border-radius:50%;border:none;
background:rgba(255,255,255,0.08);color:#fff;font-size:18px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .2s;
}
.top-bar .back:hover{background:rgba(255,255,255,0.15)}
.top-bar .help{font-size:13px;color:rgba(255,255,255,0.35);text-decoration:none}
/* ===== 主内容 ===== */
.main{
flex:1;display:flex;flex-direction:column;
justify-content:center;
padding:0 32px 40px;
}
.brand{text-align:center;margin-bottom:36px}
.brand-mark{
width:72px;height:72px;margin:0 auto 18px;
border:1.5px solid rgba(255,255,255,0.12);border-radius:22px;
display:flex;align-items:center;justify-content:center;font-size:36px;
}
.brand h1{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.5px;margin-bottom:6px}
.brand p{font-size:13px;color:rgba(255,255,255,0.3);letter-spacing:.5px}
/* ===== 双模式 Tab ===== */
.tabs{
display:flex;margin-bottom:28px;
background:rgba(255,255,255,0.04);border-radius:14px;padding:4px;
}
.tab{
flex:1;padding:10px 0;text-align:center;font-size:13px;font-weight:600;
color:rgba(255,255,255,0.3);background:none;border:none;cursor:pointer;
border-radius:11px;transition:all .25s;font-family:inherit;
}
.tab.on{background:rgba(255,255,255,0.1);color:#fff}
/* ===== 表单 ===== */
.dform{display:none}
.dform.on{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dfield{
display:flex;align-items:center;
padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06);
margin-bottom:4px;transition:border-color .2s;
}
.dfield:focus-within{border-color:rgba(255,255,255,0.2)}
.dfield .di{font-size:16px;margin-right:14px;opacity:.3;flex-shrink:0}
.dfield input{
flex:1;background:none;border:none;outline:none;
font-size:15px;color:#fff;font-family:inherit;
}
.dfield input::placeholder{color:rgba(255,255,255,0.2)}
.dfield .dep{
background:none;border:none;color:rgba(255,255,255,0.2);
cursor:pointer;font-size:15px;padding:2px;
}
.dfield .dep:hover{color:rgba(255,255,255,0.5)}
.dfield .dsms{
padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);
background:none;color:rgba(255,255,255,0.6);font-size:11px;font-weight:500;
cursor:pointer;font-family:inherit;transition:all .2s;flex-shrink:0;
}
.dfield .dsms:disabled{opacity:.25;cursor:not-allowed}
.dfield .dsms:hover:not(:disabled){border-color:rgba(255,255,255,0.3);color:rgba(255,255,255,0.8)}
.dopt{display:flex;justify-content:flex-end;margin:4px 0 24px}
.dopt a{font-size:12px;color:rgba(255,255,255,0.3);text-decoration:none;cursor:pointer}
.dopt a:hover{color:rgba(255,255,255,0.6)}
.dsubmit{
width:100%;padding:16px;border:none;border-radius:14px;
background:#fff;color:#000;font-size:15px;font-weight:700;
cursor:pointer;font-family:inherit;transition:all .25s;
}
.dsubmit:active{transform:scale(.98);opacity:.85}
/* ===== 验证码模式切换(手机/邮箱 共用区域) ===== */
.verify-switch{
display:flex;align-items:center;justify-content:center;
gap:8px;margin-bottom:20px;
}
.verify-switch .vs-label{font-size:12px;color:rgba(255,255,255,0.3)}
.verify-switch .vs-toggle{
display:flex;background:rgba(255,255,255,0.06);border-radius:10px;padding:3px;
}
.verify-switch .vs-btn{
padding:6px 14px;font-size:12px;font-weight:600;
color:rgba(255,255,255,0.35);background:none;border:none;
border-radius:8px;cursor:pointer;font-family:inherit;transition:all .25s;
}
.verify-switch .vs-btn.on{background:rgba(255,255,255,0.1);color:#fff}
/* ===== 分隔线 + 社交 ===== */
.dsep{display:flex;align-items:center;gap:14px;margin:28px 0}
.dsep::before,.dsep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.06)}
.dsep span{font-size:11px;color:rgba(255,255,255,0.2)}
.dsocial{display:flex;justify-content:center;gap:14px}
.ds{
width:52px;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,0.06);
background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .25s;font-size:20px;
}
.ds:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
.ds:active{transform:scale(.9)}
/* ===== 底部 ===== */
.footer-bar{
text-align:center;padding:20px 0;
padding-bottom:max(20px,env(safe-area-inset-bottom,20px));
}
.footer-bar a{font-size:13px;color:rgba(255,255,255,0.3);text-decoration:none}
.footer-bar a:hover{color:rgba(255,255,255,0.6)}
.dagree{
text-align:center;font-size:11px;color:rgba(255,255,255,0.2);
line-height:1.6;margin-top:18px;
}
.dagree a{color:rgba(255,255,255,0.35);text-decoration:none}
/* ===== 注册页:双模式 ===== */
.reg-tabs{
display:flex;margin-bottom:24px;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.reg-tab{
flex:1;padding:12px 0;text-align:center;font-size:14px;font-weight:500;
color:rgba(255,255,255,0.3);background:none;border:none;cursor:pointer;
position:relative;font-family:inherit;transition:color .25s;
}
.reg-tab.on{color:#fff}
.reg-tab.on::after{
content:'';position:absolute;bottom:-1px;left:20%;right:20%;
height:2px;background:#fff;border-radius:1px;
}
/* ===== 找回密码页 ===== */
.forgot-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.forgot-desc{font-size:13px;color:rgba(255,255,255,0.35);margin-bottom:32px;line-height:1.6}
.reset-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.reset-method{
display:flex;align-items:center;gap:14px;
padding:16px;border-radius:16px;
background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
cursor:pointer;transition:all .25s;font-family:inherit;
}
.reset-method:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
.reset-method:active{transform:scale(.98)}
.reset-method .rm-icon{font-size:24px;flex-shrink:0}
.reset-method .rm-info{flex:1}
.reset-method .rm-label{font-size:14px;font-weight:600;color:#fff}
.reset-method .rm-desc{font-size:11px;color:rgba(255,255,255,0.3);margin-top:2px}
.reset-method .rm-arrow{color:rgba(255,255,255,0.2);font-size:14px}
.reset-form{display:none}
.reset-form.on{display:block;animation:fadeUp .3s ease}
.pwd-strength{display:flex;gap:4px;margin:8px 0 4px}
.pwd-strength .bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,0.06)}
.pwd-strength .bar.s1{background:#ef4444}
.pwd-strength .bar.s2{background:#f59e0b}
.pwd-strength .bar.s3{background:#22c55e}
.pwd-strength .bar.s4{background:#3b82f6}
.strength-text{font-size:11px;color:rgba(255,255,255,0.25);margin-bottom:4px}
.success-icon{
width:80px;height:80px;margin:0 auto 20px;
border-radius:50%;background:rgba(34,197,94,0.1);
border:2px solid rgba(34,197,94,0.3);
display:flex;align-items:center;justify-content:center;
font-size:36px;animation:popIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.success-msg{text-align:center;margin-bottom:32px}
.success-msg h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px}
.success-msg p{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.5}
.success-msg a{color:rgba(255,255,255,0.7);text-decoration:none;font-weight:500}
</style>
</head>
<body>
<!-- ==================== 登录页 ==================== -->
<div class="page active" id="pageLogin">
<div class="spacer"></div>
<div class="top-bar">
<button class="back" style="visibility:hidden">←</button>
<a class="help" href="javascript:showPage('pageHelp')">需要帮助?</a>
</div>
<div class="main">
<div class="brand">
<div class="brand-mark">🥤</div>
<h1>可乐</h1>
<p>CHUNYU · 沉浸体验</p>
</div>
<!-- 双模式 Tab -->
<div class="tabs">
<button class="tab on" onclick="swLogin('pwd')">密码登录</button>
<button class="tab" onclick="swLogin('code')">验证码登录</button>
</div>
<!-- 1. 账号密码登录 -->
<form class="dform on" id="fPwd" onsubmit="return false">
<div class="dfield">
<span class="di">👤</span>
<input type="text" placeholder="手机号 / 邮箱 / 用户名" autofocus>
</div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="pw1" placeholder="请输入密码">
<button type="button" class="dep" onclick="togglePw('pw1',this)">👁</button>
</div>
<div class="dopt"><a href="javascript:showPage('pageForgot')">忘记密码?</a></div>
<button class="dsubmit" type="submit">登 录</button>
</form>
<!-- 2. 验证码登录(手机/邮箱共用) -->
<form class="dform" id="fCode" onsubmit="return false">
<!-- 验证码目标切换:手机 / 邮箱 -->
<div class="verify-switch">
<span class="vs-label">验证码发送至</span>
<div class="vs-toggle">
<button type="button" class="vs-btn on" onclick="swCodeTarget('phone')">手机</button>
<button type="button" class="vs-btn" onclick="swCodeTarget('email')">邮箱</button>
</div>
</div>
<!-- 共用:手机号/邮箱输入 -->
<div class="dfield">
<span class="di" id="codeIcon">📱</span>
<input type="tel" id="codeInput" placeholder="请输入手机号" maxlength="11">
</div>
<!-- 共用验证码输入 -->
<div class="dfield">
<span class="di">🔑</span>
<input type="text" placeholder="请输入验证码" maxlength="8">
<button type="button" class="dsms" onclick="sendSms(this)">获取验证码</button>
</div>
<div style="height:28px"></div>
<button class="dsubmit" type="submit">登 录</button>
</form>
<div class="dsep"><span>或</span></div>
<div class="dsocial">
<div class="ds" title="微信">💬</div>
<div class="ds" title="QQ">🐧</div>
<div class="ds" title="Apple">🍎</div>
</div>
</div>
<div class="footer-bar">
还没有账号?<a href="javascript:showPage('pageReg')" style="color:#fff">立即注册</a>
</div>
</div>
<!-- ==================== 注册页 ==================== -->
<div class="page" id="pageReg">
<div class="spacer"></div>
<div class="top-bar">
<button class="back" onclick="showPage('pageLogin')">←</button>
<a class="help" href="javascript:showPage('pageHelp')">需要帮助?</a>
</div>
<div class="main">
<div class="brand" style="margin-bottom:28px">
<div class="brand-mark">🥤</div>
<h1>注册新账号</h1>
<p>创建你的可乐账号</p>
</div>
<div class="reg-tabs">
<button class="reg-tab on" onclick="swReg('rphone')">手机号注册</button>
<button class="reg-tab" onclick="swReg('remail')">邮箱注册</button>
</div>
<!-- 手机号注册 -->
<form class="dform on" id="fRegPhone" onsubmit="return false">
<div class="dfield">
<span class="di">📱</span>
<input type="tel" placeholder="手机号" maxlength="11">
</div>
<div class="dfield">
<span class="di">🔑</span>
<input type="text" placeholder="验证码" maxlength="6">
<button type="button" class="dsms" onclick="sendSms(this)">获取验证码</button>
</div>
<div class="dfield">
<span class="di">✏️</span>
<input type="text" placeholder="设置昵称">
</div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="rpw1" placeholder="设置密码(至少6位)" oninput="checkStrength(this.value)">
<button type="button" class="dep" onclick="togglePw('rpw1',this)">👁</button>
</div>
<div class="pwd-strength"><div class="bar" id="sb1"></div><div class="bar" id="sb2"></div><div class="bar" id="sb3"></div><div class="bar" id="sb4"></div></div>
<div class="strength-text" id="strengthText"></div>
<div class="dagree">
<input type="checkbox" checked style="accent-color:#fff;width:13px;height:13px;vertical-align:middle;margin-right:4px">
注册即同意 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a>
</div>
<button class="dsubmit" type="submit" style="margin-top:16px">注 册</button>
</form>
<!-- 邮箱注册 -->
<form class="dform" id="fRegEmail" onsubmit="return false">
<div class="dfield">
<span class="di">✉️</span>
<input type="email" placeholder="邮箱地址">
</div>
<div class="dfield">
<span class="di">🔑</span>
<input type="text" placeholder="验证码" maxlength="8">
<button type="button" class="dsms" onclick="sendSms(this)">获取验证码</button>
</div>
<div class="dfield">
<span class="di">✏️</span>
<input type="text" placeholder="设置昵称">
</div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="rpw2" placeholder="设置密码(至少6位)" oninput="checkStrength(this.value)">
<button type="button" class="dep" onclick="togglePw('rpw2',this)">👁</button>
</div>
<div class="pwd-strength"><div class="bar" id="se1"></div><div class="bar" id="se2"></div><div class="bar" id="se3"></div><div class="bar" id="se4"></div></div>
<div class="strength-text" id="strengthText2"></div>
<div class="dagree">
<input type="checkbox" checked style="accent-color:#fff;width:13px;height:13px;vertical-align:middle;margin-right:4px">
注册即同意 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a>
</div>
<button class="dsubmit" type="submit" style="margin-top:16px">注 册</button>
</form>
</div>
<div class="footer-bar">
已有账号?<a href="javascript:showPage('pageLogin')" style="color:#fff">去登录</a>
</div>
</div>
<!-- ==================== 找回密码页 ==================== -->
<div class="page" id="pageForgot">
<div class="spacer"></div>
<div class="top-bar">
<button class="back" onclick="showPage('pageLogin')">←</button>
<span></span>
</div>
<div class="main" style="justify-content:flex-start;padding-top:20px">
<h2 class="forgot-title">找回密码</h2>
<p class="forgot-desc">选择找回方式,我们将发送验证码到你的账号</p>
<div class="reset-methods" id="resetMethods">
<button class="reset-method" onclick="showResetForm('phoneReset')">
<span class="rm-icon">📱</span>
<div class="rm-info">
<div class="rm-label">通过手机找回</div>
<div class="rm-desc">向绑定的手机号发送验证码</div>
</div>
<span class="rm-arrow">›</span>
</button>
<button class="reset-method" onclick="showResetForm('emailReset')">
<span class="rm-icon">✉️</span>
<div class="rm-info">
<div class="rm-label">通过邮箱找回</div>
<div class="rm-desc">向绑定的邮箱发送验证码</div>
</div>
<span class="rm-arrow">›</span>
</button>
</div>
<div class="reset-form" id="phoneReset">
<div class="dfield">
<span class="di">📱</span>
<input type="tel" placeholder="请输入绑定的手机号" maxlength="11">
</div>
<div class="dfield">
<span class="di">🔑</span>
<input type="text" placeholder="请输入验证码" maxlength="6">
<button type="button" class="dsms" onclick="sendSms(this)">获取验证码</button>
</div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="rpw3" placeholder="设置新密码(至少6位)" oninput="checkStrength(this.value)">
<button type="button" class="dep" onclick="togglePw('rpw3',this)">👁</button>
</div>
<div class="pwd-strength"><div class="bar" id="sf1"></div><div class="bar" id="sf2"></div><div class="bar" id="sf3"></div><div class="bar" id="sf4"></div></div>
<div class="strength-text" id="strengthText3"></div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="rpw3b" placeholder="再次输入新密码">
<button type="button" class="dep" onclick="togglePw('rpw3b',this)">👁</button>
</div>
<div style="height:12px"></div>
<button class="dsubmit" type="button" onclick="showResetSuccess()">重置密码</button>
<div style="height:16px"></div>
<button class="dsms" onclick="showResetMethods()" style="width:100%;padding:12px;font-size:13px;border-color:rgba(255,255,255,0.1);background:none;cursor:pointer;box-sizing:border-box;display:block;text-align:center;border-radius:10px">返回选择方式</button>
</div>
<div class="reset-form" id="emailReset">
<div class="dfield">
<span class="di">✉️</span>
<input type="email" placeholder="请输入绑定的邮箱地址">
</div>
<div class="dfield">
<span class="di">🔑</span>
<input type="text" placeholder="请输入验证码" maxlength="8">
<button type="button" class="dsms" onclick="sendSms(this)">获取验证码</button>
</div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="rpw4" placeholder="设置新密码(至少6位)" oninput="checkStrength(this.value)">
<button type="button" class="dep" onclick="togglePw('rpw4',this)">👁</button>
</div>
<div class="pwd-strength"><div class="bar" id="sg1"></div><div class="bar" id="sg2"></div><div class="bar" id="sg3"></div><div class="bar" id="sg4"></div></div>
<div class="strength-text" id="strengthText4"></div>
<div class="dfield">
<span class="di">🔒</span>
<input type="password" id="rpw4b" placeholder="再次输入新密码">
<button type="button" class="dep" onclick="togglePw('rpw4b',this)">👁</button>
</div>
<div style="height:12px"></div>
<button class="dsubmit" type="button" onclick="showResetSuccess()">重置密码</button>
<div style="height:16px"></div>
<button class="dsms" onclick="showResetMethods()" style="width:100%;padding:12px;font-size:13px;border-color:rgba(255,255,255,0.1);background:none;cursor:pointer;box-sizing:border-box;display:block;text-align:center;border-radius:10px">返回选择方式</button>
</div>
<div class="reset-form" id="resetSuccess">
<div class="success-icon">✅</div>
<div class="success-msg">
<h3>密码重置成功</h3>
<p>你的新密码已设置,请使用新密码<a href="javascript:showPage('pageLogin')"> 登录</a></p>
</div>
<button class="dsubmit" onclick="showPage('pageLogin')">返回登录</button>
</div>
</div>
</div>
<!-- ==================== 帮助页 ==================== -->
<div class="page" id="pageHelp">
<div class="spacer"></div>
<div class="top-bar">
<button class="back" onclick="history.back()">←</button>
<span></span>
</div>
<div class="main" style="justify-content:flex-start;padding-top:20px">
<h2 class="forgot-title">需要帮助?</h2>
<p class="forgot-desc">选择你遇到的问题,我们会引导你解决</p>
<div class="reset-methods">
<button class="reset-method" onclick="showPage('pageForgot')">
<span class="rm-icon">🔑</span>
<div class="rm-info">
<div class="rm-label">忘记密码</div>
<div class="rm-desc">通过手机或邮箱验证码重置密码</div>
</div>
<span class="rm-arrow">›</span>
</button>
<button class="reset-method" onclick="showPage('pageLogin')">
<span class="rm-icon">🚫</span>
<div class="rm-info">
<div class="rm-label">账号被锁定</div>
<div class="rm-desc">多次登录失败后账号被暂时锁定</div>
</div>
<span class="rm-arrow">›</span>
</button>
<button class="reset-method" onclick="showPage('pageLogin')">
<span class="rm-icon">📧</span>
<div class="rm-info">
<div class="rm-label">无法收到验证码</div>
<div class="rm-desc">检查手机号/邮箱是否正确或被拦截</div>
</div>
<span class="rm-arrow">›</span>
</button>
</div>
</div>
</div>
<script>
/* ===== 页面切换 ===== */
function showPage(id){
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
document.getElementById(id).classList.add('active');
if(id==='pageForgot'){
document.getElementById('resetMethods').style.display='flex';
document.querySelectorAll('.reset-form').forEach(f=>f.classList.remove('on'));
}
window.scrollTo(0,0);
}
/* ===== 登录双模式切换(密码 / 验证码) ===== */
function swLogin(type){
document.querySelectorAll('.tabs .tab').forEach((b,i)=>{
b.classList.toggle('on', type==='pwd'?i===0:i===1);
});
document.getElementById('fPwd').classList.toggle('on', type==='pwd');
document.getElementById('fCode').classList.toggle('on', type==='code');
}
/* ===== 验证码登录:手机/邮箱目标切换 ===== */
function swCodeTarget(target){
document.querySelectorAll('.vs-btn').forEach(b=>{
b.classList.toggle('on', b.textContent.includes(target==='phone'?'手机':'邮箱'));
});
var inp = document.getElementById('codeInput');
var icon = document.getElementById('codeIcon');
if(target==='phone'){
inp.type='tel'; inp.placeholder='请输入手机号'; inp.maxLength=11;
icon.textContent='📱';
}else{
inp.type='email'; inp.placeholder='请输入邮箱地址'; inp.removeAttribute('maxlength');
icon.textContent='✉️';
}
inp.value='';
}
/* ===== 注册双模式切换 ===== */
function swReg(type){
document.querySelectorAll('.reg-tab').forEach((b,i)=>{
b.classList.toggle('on', type==='rphone'?i===0:i===1);
});
document.getElementById('fRegPhone').classList.toggle('on', type==='rphone');
document.getElementById('fRegEmail').classList.toggle('on', type==='remail');
}
/* ===== 密码显隐 ===== */
function togglePw(id,btn){
const i=document.getElementById(id);
i.type=i.type==='password'?'text':'password';
btn.textContent=i.type==='password'?'👁':'🙈';
}
/* ===== 发送验证码倒计时 ===== */
function sendSms(btn){
let s=60;btn.disabled=true;
const f=()=>{btn.textContent=s+'s';if(--s<0){btn.disabled=false;btn.textContent='获取验证码'}};
f();setInterval(f,1000);
}
/* ===== 密码强度检测 ===== */
function checkStrength(pwd){
let score=0;
if(pwd.length>=6) score++;
if(/[A-Z]/.test(pwd)) score++;
if(/[0-9]/.test(pwd)) score++;
if(/[^A-Za-z0-9]/.test(pwd)) score++;
const bars=[document.getElementById('sb1'),document.getElementById('sb2'),document.getElementById('sb3'),document.getElementById('sb4')];
const labels=['','弱','一般','较强','强'];
const classes=['','s1','s2','s3','s4'];
bars.forEach((b,i)=>{b.className='bar';if(i<score&&score>0)b.classList.add(classes[score])});
document.getElementById('strengthText').textContent=score>0?'密码强度:'+labels[score]:'';
}
/* ===== 找回密码流程 ===== */
function showResetForm(type){
document.getElementById('resetMethods').style.display='none';
document.querySelectorAll('.reset-form').forEach(f=>f.classList.remove('on'));
document.getElementById(type).classList.add('on');
}
function showResetMethods(){
document.querySelectorAll('.reset-form').forEach(f=>f.classList.remove('on'));
document.getElementById('resetMethods').style.display='flex';
}
function showResetSuccess(){
document.querySelectorAll('.reset-form').forEach(f=>f.classList.remove('on'));
document.getElementById('resetSuccess').classList.add('on');
}
</script>
</body>
</html>