init
This commit is contained in:
Evan
516
scratch-gui/src/playground/login-new.ejs
Normal file
516
scratch-gui/src/playground/login-new.ejs
Normal file
@@ -0,0 +1,516 @@
|
||||
<!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/" target="_blank" style="color:#478ac9 ;">川公网安备51011202000980号</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"> 试用部分功能</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>
|
||||
Reference in New Issue
Block a user