44 lines
2.3 KiB
HTML
44 lines
2.3 KiB
HTML
{{define "zitie"}}
|
|
<div id="panel-zitie" class="tool-panel">
|
|
<header class="page-header">
|
|
<h1>汉字字帖生成器</h1>
|
|
<p>生成高颜值的硬笔/毛笔书法练习帖。</p>
|
|
</header>
|
|
<div class="tabs-container">
|
|
<div id="tab-teaching" class="tab-btn active" onclick="switchZitieTab('teaching')">2x3 教学方格</div>
|
|
<div id="tab-step" class="tab-btn" onclick="switchZitieTab('step')">步进式分解</div>
|
|
<div id="tab-manuscript" class="tab-btn" onclick="switchZitieTab('manuscript')">古风竖排</div>
|
|
</div>
|
|
<div class="card">
|
|
<div style="display: flex; flex-direction: column; gap: 24px;">
|
|
<div class="input-group">
|
|
<label id="input-label">输入汉字内容</label>
|
|
<textarea id="chars" placeholder="支持多行输入...">永和九年，岁在癸丑。</textarea>
|
|
</div>
|
|
<div style="display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;">
|
|
<div style="flex: 1; min-width: 200px;">
|
|
<label>纸张大小</label>
|
|
<select id="paper_size">
|
|
<option value="A4">A4 (210x297mm)</option>
|
|
<option value="Letter">Letter (8.5x11in)</option>
|
|
</select>
|
|
</div>
|
|
<div id="font-select-group" style="flex: 1; min-width: 200px; display: none;">
|
|
<label>书法字体</label>
|
|
<select id="font_type">
|
|
<option value="kaiti">华光楷体</option>
|
|
<option value="xingshu">华光行草</option>
|
|
<option value="lishu">华光隶变</option>
|
|
<option value="songti">华光书宋</option>
|
|
</select>
|
|
</div>
|
|
<button onclick="generateZitiePDF()">生成字帖预览</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="zitie-preview" style="display:none; width: 100%; height: 800px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); background: #fff; border: 1px solid #d2d2d7;">
|
|
<iframe id="zitie-frame" style="width:100%; height:100%; border:none;"></iframe>
|
|
</div>
|
|
</div>
|
|
{{end}}
|