594 lines
24 KiB
HTML
594 lines
24 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;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>
|
||
|