You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
7.3 KiB
238 lines
7.3 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>密码重置成功 - 青核 Youthome</title>
|
|
<link rel="stylesheet" href="../css/design-system.css">
|
|
<style>
|
|
body { margin: 0; padding: 0; background: var(--bg-page); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
|
|
.success-container {
|
|
width: 100%;
|
|
max-width: 1920px;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.success-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 30% 20%, rgba(23,176,207,0.08) 0%, transparent 40%),
|
|
radial-gradient(circle at 70% 80%, rgba(125,216,212,0.1) 0%, transparent 40%);
|
|
}
|
|
|
|
.decoration {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.4;
|
|
filter: blur(40px);
|
|
}
|
|
.dec-1 { width: 200px; height: 200px; background: var(--primary); top: 15%; left: 15%; }
|
|
.dec-2 { width: 150px; height: 150px; background: var(--primary-light); bottom: 20%; right: 18%; }
|
|
.dec-3 { width: 120px; height: 120px; background: #BCEAF3; top: 60%; left: 20%; }
|
|
|
|
.success-icon-wrapper {
|
|
position: relative;
|
|
width: 88px;
|
|
height: 88px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.success-icon-ring {
|
|
position: absolute;
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(23,176,207,0.2);
|
|
animation: pulse-ring 2s ease-out infinite;
|
|
}
|
|
.success-icon-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -6px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(23,176,207,0.15);
|
|
}
|
|
.success-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
color: var(--primary);
|
|
filter: drop-shadow(0 4px 12px rgba(23,176,207,0.25));
|
|
z-index: 1;
|
|
}
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
100% { transform: scale(1.3); opacity: 0; }
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
margin-bottom: 20px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.success-desc {
|
|
font-size: 15px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
max-width: 420px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.countdown-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 32px;
|
|
}
|
|
.countdown-tip .countdown-num {
|
|
color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.success-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.btn-primary {
|
|
height: 44px;
|
|
padding: 0 28px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(23,176,207,0.25);
|
|
font-family: inherit;
|
|
transition: all .15s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.btn-primary:hover { background: var(--primary-hover); }
|
|
|
|
.btn-secondary {
|
|
height: 44px;
|
|
padding: 0 28px;
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: all .15s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|
|
|
.bottom-link {
|
|
font-size: 14px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.bottom-link a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
.bottom-link a:hover { text-decoration: underline; }
|
|
|
|
.spin {
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
svg { stroke-linecap: round; stroke-linejoin: round; }
|
|
</style>
|
|
<link rel="stylesheet" href="../css/web-refresh.css?v=20261020-brand-color">
|
|
</head>
|
|
<body>
|
|
<div class="success-container">
|
|
<div class="success-bg"></div>
|
|
<div class="decoration dec-1"></div>
|
|
<div class="decoration dec-2"></div>
|
|
<div class="decoration dec-3"></div>
|
|
|
|
<div class="success-icon-wrapper">
|
|
<div class="success-icon-ring"></div>
|
|
<svg class="success-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" opacity="0.3"></circle>
|
|
<rect x="9" y="11" width="6" height="7" rx="1" fill="currentColor" stroke="none" opacity="0.9"></rect>
|
|
<path d="M12 11V9.5a2 2 0 0 1 4 0V11" stroke="currentColor" stroke-width="1.8" fill="none"></path>
|
|
<path d="M10.5 14.5l1 1 2-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="success-title">密码重置成功</div>
|
|
<div class="success-desc">你的密码已成功重置，请使用新密码重新登录。为了账号安全，建议定期更换密码。</div>
|
|
|
|
<div class="countdown-tip">
|
|
<svg class="spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 4 23 10 17 10"></polyline>
|
|
<polyline points="1 20 1 14 7 14"></polyline>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
</svg>
|
|
<span class="countdown-num" id="countdown">5</span>秒后自动跳转到登录页...
|
|
</div>
|
|
|
|
<div class="success-actions">
|
|
<button class="btn-primary" onclick="location.href='login.html'">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px;">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
<polyline points="10 17 15 12 10 7"></polyline>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
</svg>
|
|
立即登录
|
|
</button>
|
|
<button class="btn-secondary" onclick="location.href='feed.html'">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px;">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
</svg>
|
|
返回首页
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bottom-link">遇到问题？<a href="javascript:;">联系客服</a></div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var count = 5;
|
|
var el = document.getElementById('countdown');
|
|
var timer = setInterval(function() {
|
|
count--;
|
|
if (el) el.textContent = count;
|
|
if (count <= 0) {
|
|
clearInterval(timer);
|
|
location.href = 'login.html';
|
|
}
|
|
}, 1000);
|
|
})();
|
|
</script>
|
|
<script src="../js/web-local-data.js?v=20261016-local" defer></script>
|
|
<script src="../js/web-api.js?v=20261020-api" defer></script>
|
|
<script src="../js/web-shell.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|