answer-sheet-builder/app.html at main · DC1024/answer-sheet-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>答题卡制作器</title>
<link rel="stylesheet" href="assets/css/style.css">
<style id="page-css"></style>
</head>
<body>
<header class="topbar">
  <div class="brand">📝 答题卡制作器</div>
  <div class="tools">
    <label>纸张
      <select id="paper-size">
        <option value="A3">A3</option>
        <option value="A4">A4</option>
      </select>
    </label>
    <label>方向
      <select id="paper-orient">
        <option value="portrait">竖版</option>
        <option value="landscape">横版</option>
      </select>
    </label>
    <label>定位点
      <select id="paper-marks">
        <option value="none">无</option>
        <option value="square">方块</option>
        <option value="triangle">三角</option>
      </select>
    </label>
    <label>边长(mm)
      <input type="number" id="mark-size" min="2" max="10" step="0.5" style="width:64px">
    </label>
    <button id="btn-undo" title="撤销 (Ctrl+Z)">↶ 撤销</button>
    <button id="btn-redo" title="重做 (Ctrl+Y / Ctrl+Shift+Z)">↷ 重做</button>
    <button id="btn-print" class="primary">🖨 打印 / 导出 PDF</button>
    <button id="btn-save">💾 保存</button>
    <button id="btn-load">📂 载入</button>
    <button id="btn-export">⬇ 导出 JSON</button>
    <button id="btn-import">⬆ 导入 JSON</button>
    <button id="btn-omr" title="导出供扫描识别服务使用的阅卷模板（含每个填涂圈的 mm 坐标）">🎯 阅卷模板</button>
    <button id="btn-reset">♻ 重置</button>
    <button id="btn-settings" title="设置 / 检查更新">⚙ 设置</button>
    <input type="file" id="file-import" accept="application/json" hidden>
  </div>
</header>

<main class="app">
  <!-- 左栏：题型面板 + 结构列表 -->
  <aside class="left">
    <section class="panel">
      <h3>① 添加题型</h3>
      <div id="palette" class="palette"></div>
    </section>
    <section class="panel grow">
      <h3>② 答题卡结构（可拖拽排序）</h3>
      <p class="panehint">选中模块后：<b>Ctrl+C</b> 复制 · <b>Ctrl+X</b> 剪切 · <b>Ctrl+V</b> 粘贴 · <b>Ctrl+Z</b> 撤销 · <b>Ctrl+Y</b> 重做<br>「图片」模块选中时，<b>Ctrl+V</b> 可直接粘贴剪贴板里的图片。</p>
      <div id="structure" class="structure"></div>
    </section>
  </aside>

  <!-- 中栏：预览 -->
  <section class="center">
    <div class="stage-wrap">
      <div id="stage" class="stage">
        <div id="sheet" class="sheet"></div>
      </div>
    </div>
  </section>

  <!-- 右栏：属性 -->
  <aside class="right">
    <section class="panel grow">
      <h3>③ 属性设置</h3>
      <div id="props" class="props">
        <p class="hint">在左侧选择一个模块进行设置。</p>
      </div>
    </section>
  </aside>
</main>

<!-- 设置 / 检查更新。制卡端没有后端：偏好存 localStorage，更新检查直接问 GitHub。 -->
<div id="setModal" hidden>
  <div class="setbox">
    <div class="sethd">
      <h3>⚙ 设置</h3>
      <button id="setClose">关闭</button>
    </div>

    <div class="setrow">
      <label><input type="checkbox" id="setAutoUpd"> 自动检查更新</label>
      <span class="hint">打开页面时查一次，6 小时内不重复查</span>
    </div>

    <div class="setrow">
      <button id="setCheck" class="primary">检查更新</button>
      <span class="hint">当前版本 <b id="setVer">—</b></span>
      <span class="hint" id="setInfo"></span>
    </div>

    <div id="setResult" hidden></div>

    <p class="setnote">
      制卡端是纯前端工具：这套设置只存在这台电脑的浏览器里，更新检查直接访问 GitHub。
      内网或离线时查不到属正常，可手动打开
      <a id="setReleases" href="#" target="_blank" rel="noreferrer">项目发行版页面</a>。
      Windows 免安装版每次启动都会打印本机地址，双击 exe 即用。
    </p>
  </div>
</div>

<script type="module" src="assets/js/app.js"></script>
</body>
</html>