wangchuanli
02e83f5b73
实现服务端解密的 KeePass 网页查看器，包含登录门户口令与验证码、RSA+会话级 AES 加密通道、审计日志持久化、HTTPS 自动证书、Docker 部署配置及端到端测试。
69 行
2.2 KiB
HTML
69 行
2.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>KeePass 查看器</title>
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
|
||
<!-- 1. 登录：APP 门户口令 + 验证码 -->
|
||
<section id="loginView" class="card">
|
||
<h1>KeePass 查看器</h1>
|
||
<p class="muted">请输入访问口令</p>
|
||
<input id="appPw" type="password" placeholder="访问口令（含大小写，≥8位）" autocomplete="off">
|
||
<div class="captcha-row">
|
||
<input id="captchaInput" type="text" placeholder="验证码" autocomplete="off" maxlength="5">
|
||
<span id="captchaImg" class="captcha-img" title="点击刷新"></span>
|
||
</div>
|
||
<button id="loginBtn">进入</button>
|
||
<p id="loginErr" class="err"></p>
|
||
</section>
|
||
|
||
<!-- 2. 解锁：KeePass 主密码 -->
|
||
<section id="unlockView" class="card hidden">
|
||
<h1>解锁密码库</h1>
|
||
<p class="muted">输入 KeePass 主密码（密钥文件由服务端自动使用）</p>
|
||
<input id="masterPw" type="password" placeholder="主密码" autocomplete="off">
|
||
<button id="unlockBtn">解锁</button>
|
||
<p id="unlockErr" class="err"></p>
|
||
</section>
|
||
|
||
<!-- 3. 查看/编辑 -->
|
||
<section id="mainView" class="hidden">
|
||
<header class="topbar">
|
||
<strong id="dbName"></strong>
|
||
<span id="writableBadge" class="badge hidden">可编辑</span>
|
||
<input id="search" placeholder="搜索 标题 / 账号 / 网址">
|
||
<button id="auditBtn" class="ghost">审计日志</button>
|
||
<button id="logoutBtn" class="ghost">退出</button>
|
||
</header>
|
||
<div id="auditPanel" class="hidden">
|
||
<h3>审计日志</h3>
|
||
<div id="auditList" class="audit-list"></div>
|
||
<button id="auditClose" class="ghost">关闭</button>
|
||
</div>
|
||
<div class="layout">
|
||
<aside id="groupTree"></aside>
|
||
<main>
|
||
<ul id="entryList"></ul>
|
||
<div id="pager"></div>
|
||
</main>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. 详情弹窗 -->
|
||
<div id="modal" class="modal hidden">
|
||
<div class="modal-card">
|
||
<button id="modalClose" class="modal-close" aria-label="关闭">×</button>
|
||
<div id="modalBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|