dekun
53 lines
2.2 KiB
HTML
53 lines
2.2 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>K线点位标注工具</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<header class="toolbar">
|
|
<h1 class="toolbar-title">K线点位标注工具</h1>
|
|
<div class="toolbar-actions">
|
|
<label class="btn btn-primary" for="file-input" title="支持 JPG / PNG">
|
|
上传图片
|
|
<input type="file" id="file-input" accept="image/jpeg,image/png,.jpg,.jpeg,.png" hidden>
|
|
</label>
|
|
<div class="mode-group" role="group" aria-label="标注模式">
|
|
<button type="button" class="btn mode-btn active" data-mode="entry">入场 ↑</button>
|
|
<button type="button" class="btn mode-btn" data-mode="exit">出场 ↓</button>
|
|
<button type="button" class="btn mode-btn" data-mode="stop">止损 ↓</button>
|
|
</div>
|
|
<button type="button" class="btn" id="btn-undo" disabled>撤销</button>
|
|
<button type="button" class="btn" id="btn-clear" disabled>清空全部</button>
|
|
<button type="button" class="btn btn-accent" id="btn-download" disabled>下载标注图</button>
|
|
</div>
|
|
<p class="toolbar-hint" id="status-hint">请上传 K 线截图（JPG / PNG），支持点击或拖拽</p>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<div class="drop-zone" id="drop-zone">
|
|
<div class="drop-placeholder" id="drop-placeholder">
|
|
<span class="drop-icon">📈</span>
|
|
<p>将 K 线截图拖拽到此处，或点击顶部「上传图片」</p>
|
|
<p class="drop-sub">支持 JPG、PNG，数据仅在浏览器本地处理</p>
|
|
</div>
|
|
<div class="canvas-wrap hidden" id="canvas-wrap">
|
|
<img id="chart-image" alt="K线图" draggable="false">
|
|
<canvas id="overlay-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<span>入场 <i class="legend entry"></i></span>
|
|
<span>出场 <i class="legend exit"></i></span>
|
|
<span>止损 <i class="legend stop"></i></span>
|
|
<span class="footer-note">单击添加箭头 · 拖拽调整位置 · 可连续标注多个点位</span>
|
|
</footer>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|