袁涛
8e329418f0
- 添加 Electron 主进程和渲染进程 - 实现读卡器连接、断开和读取卡片 ID 功能 - 添加自定义窗口标题栏和窗口控制 - 实现简洁美观的用户界面 - 添加项目文档 README.md
60 lines
2.1 KiB
HTML
60 lines
2.1 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>NFC 读卡器</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="titlebar">
|
|
<div class="titlebar-drag-region"></div>
|
|
<div class="titlebar-title">NFC 读卡器</div>
|
|
<div class="window-controls">
|
|
<button class="window-control minimize" id="minimizeBtn">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<rect x="0" y="4" width="10" height="2" fill="currentColor"/>
|
|
</svg>
|
|
</button>
|
|
<button class="window-control maximize" id="maximizeBtn">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<rect x="0" y="0" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</button>
|
|
<button class="window-control close" id="closeBtn">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
|
<line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="status-section">
|
|
<div class="status-indicator">
|
|
<span id="statusDot" class="status-dot disconnected"></span>
|
|
<span id="statusText">未连接</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-buttons">
|
|
<button id="connectBtn" class="btn btn-primary">连接读卡器</button>
|
|
<button id="disconnectBtn" class="btn btn-secondary" disabled>断开连接</button>
|
|
<button id="readBtn" class="btn btn-success" disabled>读取卡片</button>
|
|
</div>
|
|
|
|
<div class="result-section">
|
|
<h4>读取结果</h4>
|
|
<div id="resultBox" class="result-box">
|
|
<p class="placeholder-text">请先连接读卡器，然后点击"读取卡片"按钮</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="renderer.js"></script>
|
|
</body>
|
|
</html> |