dekun
81 lines
4.0 KiB
HTML
81 lines
4.0 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" 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>
|
||
<div class="zoom-group" id="zoom-group" hidden>
|
||
<button type="button" class="btn btn-icon" id="zoom-out" title="缩小">−</button>
|
||
<span class="zoom-label" id="zoom-label">100%</span>
|
||
<button type="button" class="btn btn-icon" id="zoom-in" title="放大">+</button>
|
||
<button type="button" class="btn" id="zoom-fit" title="适应窗口">适应</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>
|
||
<div class="toolbar-row direction-row" id="direction-row" hidden>
|
||
<span class="row-label">箭头方向</span>
|
||
<div class="direction-pad" role="group" aria-label="箭头方向">
|
||
<button type="button" class="btn dir-btn" data-angle="315" title="左上">↖</button>
|
||
<button type="button" class="btn dir-btn active" data-angle="0" title="向上">↑</button>
|
||
<button type="button" class="btn dir-btn" data-angle="45" title="右上">↗</button>
|
||
<button type="button" class="btn dir-btn" data-angle="270" title="向左">←</button>
|
||
<span class="dir-center" id="dir-center" title="当前角度">0°</span>
|
||
<button type="button" class="btn dir-btn" data-angle="90" title="向右">→</button>
|
||
<button type="button" class="btn dir-btn" data-angle="225" title="左下">↙</button>
|
||
<button type="button" class="btn dir-btn" data-angle="180" title="向下">↓</button>
|
||
<button type="button" class="btn dir-btn" data-angle="135" title="右下">↘</button>
|
||
</div>
|
||
<label class="angle-slider-wrap">
|
||
<span>角度</span>
|
||
<input type="range" id="angle-slider" min="0" max="359" value="0" step="1">
|
||
<input type="number" id="angle-input" min="0" max="359" value="0" class="angle-input">
|
||
<span class="angle-unit">°</span>
|
||
</label>
|
||
</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="viewport hidden" id="viewport">
|
||
<div class="stage" id="stage">
|
||
<img id="chart-image" alt="K线图" draggable="false">
|
||
<canvas id="overlay-canvas"></canvas>
|
||
</div>
|
||
</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>
|