86 lines
4.5 KiB
HTML
86 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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="stylesheet" href="css/theme.css">
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h2>用户登录</h2>
|
|
<form id="form" novalidate>
|
|
<div>
|
|
<label>邮箱：</label>
|
|
<input type="text" id="loginUsername" placeholder="请输入邮箱">
|
|
<span id="msgTip"></span>
|
|
<label>密码：</label>
|
|
<input type="password" id="loginPassword" placeholder="请输入密码">
|
|
<span id="pwdTip"></span>
|
|
<label>验证码：</label>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<input type="text" id="captchaAnswer" placeholder="请输入验证码" maxlength="4" autocomplete="off" style="flex:1;min-width:0;width:auto">
|
|
<img id="captchaImg" alt="加载中…" title="点击刷新验证码" style="width:120px;height:38px;flex:none;cursor:pointer;border:1.5px solid var(--border);border-radius:10px;box-sizing:border-box">
|
|
</div>
|
|
<span id="captchaTip"></span>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" id="registerBtn">注册</button>
|
|
<input type="submit" id="loginBtn" value="登录">
|
|
<input type="reset" id="resetUser" value="重置">
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="checkbox" id="agreeBox" name="agree" value="access">
|
|
<label id="agreement" for="agreeBox">我已阅读并同意</label>
|
|
<a id="agreementLink" href="LICENSE.html" rel="noopener" style="color:var(--accent);font-size:14px;text-decoration:none;cursor:pointer">《用户使用条例》</a>
|
|
<span id="agreeTip"></span>
|
|
</div>
|
|
</form>
|
|
<a href="forgot.html" style="display:block;text-align:center;color:#999;font-size:13px;margin:8px 0">忘记密码？</a>
|
|
<div style="text-align:center;margin:12px 0;position:relative"><div style="position:absolute;top:50%;left:0;right:0;height:1px;background:#e0d6cc"></div><span style="background:#fff;padding:0 12px;position:relative;color:#999;font-size:13px">或</span></div>
|
|
<a href="https://yhdet.top/yhdet_auth?callback=https://qsont.me/yhdet_callback" class="yhdet-login-btn">开源社区 快捷登录</a>
|
|
<style>.yhdet-login-btn{display:block;width:100%;padding:12px;border:1.5px solid #1a73e8;border-radius:8px;background:white;color:#1a73e8;font-size:15px;font-weight:600;text-decoration:none;text-align:center;box-sizing:border-box;margin-bottom:12px}.yhdet-login-btn:hover{background:#e8f0fe}</style>
|
|
|
|
<!-- 用户使用条例弹窗 -->
|
|
<div id="licenseModal" class="license-modal-overlay" style="display:none">
|
|
<div class="license-modal-box">
|
|
<button id="licenseClose" class="license-modal-close" aria-label="关闭">×</button>
|
|
<iframe id="licenseFrame" src="about:blank" title="用户使用条例"></iframe>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.license-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}
|
|
.license-modal-box{position:relative;width:100%;max-width:680px;max-height:86vh;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.25)}
|
|
.license-modal-box iframe{width:100%;height:86vh;border:0;display:block}
|
|
.license-modal-close{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;background:rgba(255,255,255,.9);border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:#555;z-index:2}
|
|
.license-modal-close:hover{background:#fff;color:#000}
|
|
</style>
|
|
</div>
|
|
<footer class="footer">
|
|
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">蜀ICP备2024107064号-2</a>
|
|
</footer>
|
|
<script src="js/validation.js"></script>
|
|
<script src="js/login.js"></script>
|
|
<script>
|
|
(function(){
|
|
var link = document.getElementById('agreementLink');
|
|
var modal = document.getElementById('licenseModal');
|
|
var frame = document.getElementById('licenseFrame');
|
|
var close = document.getElementById('licenseClose');
|
|
function show(){
|
|
frame.src = 'LICENSE.html';
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
function hide(){
|
|
modal.style.display = 'none';
|
|
frame.src = 'about:blank';
|
|
document.body.style.overflow = '';
|
|
}
|
|
link.addEventListener('click', function(e){ e.preventDefault(); show(); });
|
|
close.addEventListener('click', hide);
|
|
modal.addEventListener('click', function(e){ if(e.target === modal) hide(); });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |