Files
001code-html--cocos/scratch-gui/src/playground/login-new.ejs
2026-09-17 17:04:15 +08:00

516 lines
20 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>账号登录 - 灵丌编程001CODE - 你身边的青少年编程学习平台 - 图形化、Python、C++</title>
<link rel="stylesheet" href="css/login-new-v2.css?v=<%= htmlWebpackPlugin.options.version %>" media="screen">
<script class="u-script" type="text/javascript" src="js/jquery.js?v=<%= htmlWebpackPlugin.options.version %>"
defer=""></script>
<!-- Nicepage scripts are kept for modal functionality if needed by existing components -->
<link rel="stylesheet" href="css/nicepage.css?v=<%= htmlWebpackPlugin.options.version %>" media="screen">
<script class="u-script" type="text/javascript" src="js/nicepage.js?v=<%= htmlWebpackPlugin.options.version %>"
defer=""></script>
<style>
/* Ensure modals are styled reasonably even with the new design */
.u-dialog-block {
z-index: 10001;
}
/* Copied Styles from home.ejs for Header/Nav */
:root {
--bg: #f0f4f9;
--ink: #0f172a;
--muted: #475569;
--brand: #0052d9;
--brand-2: #2478fe;
--accent: #0790d9;
}
.nav {
position: sticky;
top: 0;
z-index: 50;
height: 64px;
background: #ffffff;
width: 100%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
/* Added slight shadow for visibility */
}
.nav__inner {
height: 64px;
max-width: 1392px;
margin: 0 auto;
padding: 4px 24px;
/* Added horizontal padding */
display: flex;
align-items: center;
gap: 32px;
}
.nav__logo {
width: 227px;
height: 56px;
display: block;
}
.nav__links {
display: flex;
align-items: center;
gap: 32px;
}
.nav__link {
font-family: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.4285714286;
color: #1e1a4c;
text-decoration: none;
}
/* 覆盖 nicepage 的 a:focus 黑色描边;仅键盘聚焦时保留可见提示 */
.nav a:focus {
outline: none;
}
.nav a:focus-visible {
outline: 2px solid rgba(0, 3, 255, 0.45);
outline-offset: 3px;
}
.nav__link--active {
display: inline-flex;
align-items: center;
padding: 5px 12px;
height: 32px;
border-radius: 3px;
background: #f2f3ff;
color: #4F8CFF;
box-sizing: border-box;
}
.nav__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
height: 32px;
border-radius: 3px;
background: #f2f3ff;
text-decoration: none;
}
.nav__pillText {
font-family: "PingFang SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5714285714;
color: #1e1a4c;
}
.nav__pillNew {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 16px;
padding: 0 4px;
border-radius: 10px 0 10px 0;
background: linear-gradient(90deg, rgba(0, 204, 255, 1) 0%, rgba(0, 3, 255, 1) 100%);
font-family: "PingFang SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 400;
font-size: 9px;
line-height: 1.5555555556;
color: #ffffff;
}
/* 灵丌AI 导航胶囊 */
.nav__pillAI {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 18px 5px 14px;
height: 32px;
border-radius: 20px;
text-decoration: none;
position: relative;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__pillAI:hover {
transform: scale(1.05);
}
.nav__pillAIText {
font-family: "PingFang SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1.5714285714;
font-style: italic;
letter-spacing: 0.5px;
background-image: linear-gradient(
105deg,
rgba(0, 3, 255, 0.55) 0%,
rgba(0, 3, 255, 0.55) 38%,
#7dd3fc 46%,
#ffffff 50%,
#60a5fa 54%,
rgba(0, 3, 255, 0.55) 62%,
rgba(0, 3, 255, 0.55) 100%
);
background-size: 220% 100%;
background-position: 100% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: letter-spacing 0.35s ease;
}
.nav__pillAI:hover .nav__pillAIText {
letter-spacing: 1.2px;
animation: navAIShimmer 1.35s ease-in-out infinite;
}
@keyframes navAIShimmer {
0% { background-position: 100% 50%; }
100% { background-position: -120% 50%; }
}
.nav__pillAIIcon {
width: 18px;
height: 18px;
display: block;
flex-shrink: 0;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}
.nav__pillAI:hover .nav__pillAIIcon {
transform: rotate(18deg) scale(1.18);
filter: brightness(1.35) saturate(1.25);
animation: navAISpark 1.1s ease-in-out infinite;
}
@keyframes navAISpark {
0%, 100% { transform: rotate(18deg) scale(1.18); }
50% { transform: rotate(-8deg) scale(1.28); }
}
/* End Copied Styles */
/* Mobile adjustments for nav (<=768px) */
@media (max-width: 768px) {
.nav__inner {
padding: 6px 12px;
gap: 12px;
align-items: center;
}
.nav__logo {
width: 140px;
height: auto;
}
.nav__links {
gap: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.nav__link,
.nav__pillText {
font-size: 11px;
}
/* reduce emphasis on the new pill on small screens */
.nav__pillNew {
display: none;
}
}
.content-wrap {
flex-direction: column;
align-items: center;
gap: 24px;
}
.login-logo {
width: 190px;
height: auto;
object-fit: contain;
}
.password-container {
position: relative;
width: 100%;
}
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: flex;
align-items: center;
color: #666;
}
/* Simple fix for the new design's input shell to accommodate the toggle if needed,
but the current design doesn't use the eye icons in the mockup.
I will add it back if it's essential for UX. */
</style>
</head>
<body>
<header class="nav">
<div class="nav__inner">
<a href="/home.html" aria-label="001CODE">
<img class="nav__logo" src="images/logo.svg" alt="001CODE" />
</a>
<nav class="nav__links" aria-label="主导航">
<a class="nav__link" href="/home.html">主页</a>
<a class="nav__link" href="/welcome.html">灵丌编程</a>
<a class="nav__pillAI" href="/ai.html">
<img class="nav__pillAIIcon" src="images/ai-sparkle.svg" alt="" />
<span class="nav__pillAIText">灵丌AI</span>
</a>
<a class="nav__link" href="/competition_list.html">赛事详情</a>
<a class="nav__link" href="/aboutus.html">关于我们</a>
</nav>
</div>
</header>
<main class="page">
<div class="page-bg"></div>
<section class="content-wrap">
<div class="login-card">
<!-- <img class="login-logo" src="images/logo.svg" alt="001CODE" /> -->
<h1 class="login-title">账号登录</h1>
<form id="login-form" class="form-v2">
<p class="u-error-message" style="display: none;"> </p>
<div class="form-row">
<label class="field-label" for="username">账号 <span class="required-mark">*</span></label>
<div class="input-shell">
<input id="username" name="username" type="text" placeholder="请输入账号" autocomplete="username" required
oninvalid="this.setCustomValidity('请输入账号')" oninput="this.setCustomValidity('')" />
</div>
</div>
<div class="form-row">
<label class="field-label" for="password">密码 <span class="required-mark">*</span></label>
<div class="input-shell password-container">
<input id="password" name="password" type="password" placeholder="请输入密码" autocomplete="current-password"
required oninvalid="this.setCustomValidity('请输入密码')" oninput="this.setCustomValidity('')" />
<span class="password-toggle" onclick="togglePassword(this)">
<!-- 闭眼SVG图标 -->
<svg class="eye-icon eye-closed" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor"
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
</svg>
<!-- 睁眼SVG图标 -->
<svg class="eye-icon eye-open" viewBox="0 0 24 24" width="20" height="20" style="display: none;">
<path fill="currentColor"
d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
</svg>
</span>
</div>
</div>
<div class="links-row">
<a href="/signup.html">注册账号</a>
<a href="#carousel_941b" class="u-dialog-link">找回密码</a>
<!-- <a href="https://001code.com/c/scssn2025" target="_blank">灵π编程训练平台入口</a> -->
</div>
<div class="actions-row">
<button type="submit" class="btn-primary-v2 u-btn-submit">登录账号</button>
<!-- <label class="checkbox-wrap">
<span class="checkbox-shell">
<img src="login-assets/checkbox-unchecked.svg" alt="未选中" />
</span>
<span>记住密码</span>
</label> -->
</div>
</form>
<!-- <p class="help-text">如有疑问可联系官方1802135424634</p> -->
</div>
</section>
</main>
<footer class="footer" aria-label="页脚">
<div class="footer-line"></div>
<div class="footer-text">ICP备案号<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style="color:#478ac9 ;">沪ICP备2026042325号</a>
公安备案号:<a href="https://beian.mps.gov.cn/#/query/webSearch?code=31011502407417" rel="noreferrer" target="_blank" style="color:#478ac9 ;"><img src="../images/gongan-beian.png" alt="" width="16" height="16" style="width:16px;height:16px;vertical-align:-3px;margin-right:4px;" />沪公网安备31011502407417号</a>
© 灵丌编程001CODE.COM
<span class="qr" tabindex="0">
<img class="qr-icon" src="../images/qrcode_gery.svg" alt="公众号小图标" />
<span class="qr-label">公众号二维码</span>
<div class="qr-popup" aria-hidden="true">
<div class="qr-popup-arrow"></div>
<img src="../images/qrcode.jpg" alt="公众号二维码大图" />
</div>
</span>
</div>
</footer>
<!-- Activation/Permission Modal -->
<section
class="u-align-center u-black u-clearfix u-container-align-center u-container-align-center-lg u-container-align-center-md u-container-align-center-sm u-container-align-center-xl u-container-style u-dialog-block u-opacity u-opacity-70 u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-dialog-section-5"
id="carousel_ac25">
<div
class="u-align-center u-container-align-center u-container-align-center-xl u-container-style u-dialog u-expanded-width-xs u-image u-image-contain u-image-default u-shape-rectangle u-image-1"
data-image-width="1039" data-image-height="643">
<div class="u-container-layout u-container-layout-1">
<h2 class="u-custom-font u-font-montserrat u-text u-text-white u-text-1">您没有权限 </h2>
<img class="u-hidden-lg u-hidden-md u-hidden-sm u-hidden-xs u-image u-image-default u-image-2"
src="images/web-16.png" alt="" data-image-width="5" data-image-height="376">
<p class="u-hidden-xs u-text u-text-white u-text-2">直接使用激活码激活使用</p>
<p class="u-text u-text-white u-text-3">扫描下方二维码联系开通 </p>
<div
class="custom-expanded u-align-left u-container-align-left u-container-style u-group u-image u-image-round u-radius u-shape-rectangle u-image-3"
data-image-width="900" data-image-height="1086">
<div class="u-container-layout u-container-layout-2"></div>
</div>
<div class="u-form u-form-1">
<form class="u-clearfix u-form-spacing-15 u-form-vertical u-inner-form" style="padding: 10px" source="email"
name="form">
<div class="u-form-group u-label-none">
<label for="permissionCode" class="u-form-control-hidden u-label">激活码</label>
<input type="text" placeholder="激活码" id="permissionCode" name="email"
class="u-grey-10 u-input u-input-rectangle u-radius u-input-1" required="required"
oninvalid="this.setCustomValidity('请输入激活码')" oninput="this.setCustomValidity('')">
</div>
<div class="u-align-left u-form-group u-form-submit u-label-none">
<button id="permissionCodeSendButton"
class="u-active-palette-3-dark-1 u-border-none u-btn u-btn-round u-btn-submit u-button-style u-gradient u-hover-palette-3-base u-none u-radius u-text-white u-btn-1">提交</button>
<input type="submit" value="submit" class="u-form-control-hidden">
</div>
</form>
</div>
<div class="u-form u-form-2">
<form class="u-clearfix u-form-spacing-20 u-form-vertical u-inner-form" style="padding: 10px" source="email"
name="form">
<div
class="u-align-center-xs u-align-left-lg u-align-left-md u-align-left-sm u-align-left-xl u-form-group u-form-submit u-label-none">
<button id="tryuse"
class="u-active-palette-3-dark-1 u-border-none u-btn u-btn-round u-btn-submit u-button-style u-gradient u-hover-palette-3-base u-none u-radius u-text-white u-btn-2">&nbsp;试用部分功能</button>
<input type="submit" value="submit" class="u-form-control-hidden">
</div>
</form>
</div>
</div><button id="closeNoPermissionModal"
class="u-dialog-close-button u-file-icon u-icon u-icon-rectangle u-icon-1"><img src="images/web-22.png"
alt=""></button>
</div>
</section>
<!-- Password Reset Modal -->
<section
class="u-align-center u-black u-clearfix u-container-align-center u-container-style u-dialog-block u-opacity u-opacity-70 u-valign-middle u-dialog-section-6"
id="carousel_941b">
<div class="modal-v2-password">
<header class="modal-v2-header">
<div style="width: 32px;"></div>
<div class="modal-v2-title">密 码 找 回</div>
<button id="reset-new-passwd-close-button" class="modal-v2-close u-dialog-close-button" type="button"
aria-label="关闭">
<img src="../images/modal-password-close.svg" alt="">
</button>
</header>
<div class="modal-v2-body">
<!-- Step 1: Send Phone and Get Code -->
<div class="modal-v2-field">
<div class="modal-v2-label">手机号码 *</div>
<div class="modal-v2-input-wrap">
<input type="text" placeholder="输入您的手机号码" id="forgetphone" name="verifyforgetphone" class="modal-v2-input">
</div>
<button id="forgetpw-verifycode-button" class="btn-primary-v2 btn-get-code"
style="width: 100%; margin-top: 8px;">获取验证码</button>
</div>
<!-- Step 2: Verify Code and Set New Password -->
<div class="modal-v2-field">
<div class="modal-v2-input-wrap">
<input type="text" placeholder="输入您的验证码" id="forgotverifycode" name="forgotverifycode"
class="modal-v2-input">
</div>
</div>
<div class="modal-v2-field">
<div class="modal-v2-input-wrap password-container">
<input type="password" placeholder="输入您的新密码" id="newpassword" name="newpassword" class="modal-v2-input">
<span class="password-toggle" onclick="togglePassword2(this)">
<svg class="eye-icon eye-closed" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor"
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
</svg>
<svg class="eye-icon eye-open" viewBox="0 0 24 24" width="20" height="20" style="display: none;">
<path fill="currentColor"
d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
</svg>
</span>
</div>
</div>
</div>
<div class="modal-v2-actions">
<button id="send-new-password-button" class="btn-primary-v2" style="width: 100%;">验证并提交</button>
</div>
</div>
</section>
<script>
function togglePassword(button) {
const input = button.parentElement.querySelector('input');
const eyeClosed = button.querySelector('.eye-closed');
const eyeOpen = button.querySelector('.eye-open');
if (input.type === 'password') {
input.type = 'text';
eyeClosed.style.display = 'none';
eyeOpen.style.display = 'block';
} else {
input.type = 'password';
eyeClosed.style.display = 'block';
eyeOpen.style.display = 'none';
}
}
function togglePassword2(button) {
const input = button.parentElement.querySelector('input');
const eyeClosed = button.querySelector('.eye-closed');
const eyeOpen = button.querySelector('.eye-open');
if (input.type === 'password') {
input.type = 'text';
eyeClosed.style.display = 'none';
eyeOpen.style.display = 'block';
} else {
input.type = 'password';
eyeClosed.style.display = 'block';
eyeOpen.style.display = 'none';
}
}
</script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5236a04d5838b8c530ffa631c0aff2ec";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>