118 lines
4.8 KiB
HTML
118 lines
4.8 KiB
HTML
<!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="./style.css">
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<aside class="panel">
|
|
<div class="panel-head">
|
|
<p class="eyebrow">Certificate Lab</p>
|
|
<h1>结业证书模板调试</h1>
|
|
<p class="hint">这里先单独调证书视觉，不接主系统数据。改字段后右侧会实时重绘。</p>
|
|
</div>
|
|
|
|
<section class="group">
|
|
<h2>学员与课程</h2>
|
|
<label>学员姓名
|
|
<input id="studentName" value="张三">
|
|
</label>
|
|
<label>课程名称
|
|
<input id="courseName" value="智慧赋能疗愈师">
|
|
</label>
|
|
<label>课程阶段
|
|
<input id="stageName" value="初级课程的专业学习。">
|
|
</label>
|
|
<label>证书编号
|
|
<input id="certificateNo" value="HY20260602DYC001">
|
|
</label>
|
|
</section>
|
|
|
|
<section class="group">
|
|
<h2>日期</h2>
|
|
<div class="grid">
|
|
<label>开始年
|
|
<input id="startYear" value="2026">
|
|
</label>
|
|
<label>开始月
|
|
<input id="startMonth" value="6">
|
|
</label>
|
|
<label>开始日
|
|
<input id="startDay" value="1">
|
|
</label>
|
|
<label>结束年
|
|
<input id="endYear" value="2026">
|
|
</label>
|
|
<label>结束月
|
|
<input id="endMonth" value="6">
|
|
</label>
|
|
<label>结束日
|
|
<input id="endDay" value="2">
|
|
</label>
|
|
</div>
|
|
<label>发证日期
|
|
<input id="issueDate" value="2026 年 6 月 2 日">
|
|
</label>
|
|
</section>
|
|
|
|
<section class="group muted-group">
|
|
<h2>底部图层</h2>
|
|
<p class="group-note">导师、机构和二维码先使用原图。导师会作为最上层图层覆盖。</p>
|
|
<label>导师称谓
|
|
<input id="mentorLabel" value="导师：" disabled>
|
|
</label>
|
|
<label>导师姓名
|
|
<input id="mentorName" value="卢慧" disabled>
|
|
</label>
|
|
<label>左侧单位
|
|
<input id="issuerLeft" value="深圳市慧愈文化科技有限公司" disabled>
|
|
</label>
|
|
<label>右侧单位
|
|
<input id="issuerRight" value="国际生命智慧启蒙研究院" disabled>
|
|
</label>
|
|
<label>查询链接
|
|
<input id="verifyUrl" value="https://example.com/cert/HY20260602DYC001" disabled>
|
|
</label>
|
|
</section>
|
|
|
|
<section class="group">
|
|
<h2>显示开关</h2>
|
|
<label class="check">
|
|
<input type="checkbox" id="showOriginal" checked>
|
|
使用原图作为底图
|
|
</label>
|
|
<label class="check">
|
|
<input type="checkbox" id="showDebug">
|
|
显示擦除区域
|
|
</label>
|
|
</section>
|
|
|
|
<div class="actions">
|
|
<button id="resetBtn" type="button">恢复示例</button>
|
|
<button id="downloadBtn" type="button">下载 PNG</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="preview">
|
|
<div class="preview-head">
|
|
<div>
|
|
<p class="eyebrow">3437 x 2551 / 1024 design coordinates</p>
|
|
<h2>实时预览</h2>
|
|
</div>
|
|
<span id="renderState">加载中</span>
|
|
</div>
|
|
<div class="canvas-shell">
|
|
<canvas id="certificateCanvas" width="1024" height="759"></canvas>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="qrScratch" aria-hidden="true"></div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|