冯普andClaude Opus 4.6
b43ad74843
- 新增自定义登录页 login.html - 新增 Node 登录网关 server.js（写死密码 + 签名 Cookie + 统一鉴权） - 未登录访问任意页面自动跳转登录页，登录后回跳原地址 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
167 lines
4.7 KiB
HTML
167 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>原型访问登录 - 健康长庆升级</title>
|
|
<style>
|
|
:root {
|
|
--primary: #1677FF;
|
|
--primary-dark: #0958D9;
|
|
--text-primary: #1a1a2e;
|
|
--text-secondary: #5a607f;
|
|
--border: #e8ecf1;
|
|
--background: #f0f2f8;
|
|
--card-bg: #ffffff;
|
|
--danger: #FF4D4F;
|
|
--radius-md: 10px;
|
|
--radius-lg: 16px;
|
|
--shadow-lg: 0 10px 30px rgba(22,119,255,0.15), 0 4px 10px rgba(0,0,0,0.06);
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: var(--background);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif;
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 顶部装饰条 */
|
|
.top-bar {
|
|
position: fixed; top: 0; left: 0; right: 0; height: 4px;
|
|
background: linear-gradient(90deg, #0b3d91, var(--primary), #4facfe);
|
|
}
|
|
|
|
/* 登录卡片 */
|
|
.login-card {
|
|
width: 400px; max-width: calc(100vw - 32px);
|
|
padding: 40px 36px;
|
|
background: var(--card-bg);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Logo 区域 */
|
|
.login-header { text-align: center; margin-bottom: 32px; }
|
|
.login-header__icon {
|
|
width: 56px; height: 56px; margin: 0 auto 16px;
|
|
background: linear-gradient(135deg, #0b3d91 0%, var(--primary) 40%, #4facfe 100%);
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.login-header__icon svg { width: 28px; height: 28px; }
|
|
.login-header__title { font-size: 20px; font-weight: 700; }
|
|
.login-header__sub { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
|
|
|
|
/* 表单 */
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-group label {
|
|
display: block; font-size: 13px; font-weight: 600;
|
|
color: var(--text-secondary); margin-bottom: 8px;
|
|
}
|
|
.form-input {
|
|
width: 100%; height: 46px; padding: 0 14px;
|
|
border: 1.5px solid var(--border); border-radius: var(--radius-md);
|
|
font-size: 14px; color: var(--text-primary);
|
|
background: var(--card-bg);
|
|
transition: border-color .2s, box-shadow .2s;
|
|
outline: none;
|
|
}
|
|
.form-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(22,119,255,0.1);
|
|
}
|
|
.form-input::placeholder { color: #bbb; }
|
|
|
|
/* 错误提示 */
|
|
.error-msg {
|
|
min-height: 22px; margin-bottom: 8px;
|
|
font-size: 13px; color: var(--danger);
|
|
display: flex; align-items: center; gap: 4px;
|
|
}
|
|
|
|
/* 提交按钮 */
|
|
.submit-btn {
|
|
width: 100%; height: 46px; border: none;
|
|
border-radius: var(--radius-md);
|
|
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
|
|
color: #fff; font-size: 15px; font-weight: 600;
|
|
cursor: pointer; transition: opacity .2s, transform .1s;
|
|
}
|
|
.submit-btn:hover { opacity: 0.9; }
|
|
.submit-btn:active { transform: scale(0.98); }
|
|
|
|
/* 底部说明 */
|
|
.footer-text {
|
|
text-align: center; margin-top: 24px;
|
|
font-size: 12px; color: #bbb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="top-bar"></div>
|
|
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<div class="login-header__icon">
|
|
<!-- 锁图标 -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="login-header__title">原型访问登录</div>
|
|
<div class="login-header__sub">请输入访问密码以浏览原型页面</div>
|
|
</div>
|
|
|
|
<form id="loginForm" method="post" action="/simple-login">
|
|
<input type="hidden" id="redirectInput" name="redirect" value="/" />
|
|
|
|
<div class="form-group">
|
|
<label for="passwordInput">访问密码</label>
|
|
<input
|
|
class="form-input"
|
|
id="passwordInput"
|
|
type="password"
|
|
name="password"
|
|
placeholder="请输入访问密码"
|
|
autocomplete="current-password"
|
|
required
|
|
autofocus
|
|
/>
|
|
</div>
|
|
|
|
<div class="error-msg" id="errorMsg"></div>
|
|
|
|
<button class="submit-btn" type="submit">登录访问</button>
|
|
</form>
|
|
|
|
<div class="footer-text">健康长庆升级 · 高保真交互原型</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var redirect = params.get('redirect');
|
|
var error = params.get('error');
|
|
|
|
/* 回跳地址：只允许站内相对路径 */
|
|
if (redirect && redirect.charAt(0) === '/') {
|
|
document.getElementById('redirectInput').value = redirect;
|
|
}
|
|
|
|
/* 密码错误提示 */
|
|
if (error === '1') {
|
|
document.getElementById('errorMsg').textContent = '密码错误，请重试';
|
|
document.getElementById('passwordInput').select();
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|