Initial certificate system
This commit is contained in:
nelso
117
certificate-template-lab/index.html
Normal file
117
certificate-template-lab/index.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!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">1024 x 759</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>
|
||||
Reference in New Issue
Block a user