feat: Add Learn-Number tool for preschool math practice and refactor HTML components

2026-02-25 19:22:58 -08:00
parent e320f9ee50
commit 0be94026c5
9 changed files with 396 additions and 82 deletions
@@ -0,0 +1,43 @@
+{{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}}