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,38 @@
+{{define "learn_number"}}
+<div id="panel-learn-number" class="tool-panel">
+    <header class="page-header">
+        <h1>幼儿数学助手</h1>
+        <p>通过趣味图形和基础练习，培养孩子的数感与逻辑。</p>
+    </header>
+    <div class="tabs-container">
+        <div id="tab-counting" class="tab-btn active">数图形练习</div>
+    </div>
+    <div class="card">
+        <div style="display: flex; flex-direction: column; gap: 24px;">
+            <div style="display: flex; gap: 30px; flex-wrap: wrap;">
+                <div style="flex: 1; min-width: 250px;">
+                    <label style="font-size: 13px; font-weight: 600; color: #86868b; display: block; margin-bottom: 12px;">图标种类数 (1 - 5)</label>
+                    <input type="range" id="icon_types" min="1" max="5" value="3" style="width: 100%;" oninput="this.nextElementSibling.value = this.value">
+                    <output style="font-size: 18px; font-weight: 700; color: var(--apple-blue); margin-top: 10px; display: block;">3</output>
+                </div>
+                <div style="flex: 1; min-width: 250px;">
+                    <label style="font-size: 13px; font-weight: 600; color: #86868b; display: block; margin-bottom: 12px;">总图案数量 (种类数 - 30)</label>
+                    <input type="range" id="total_count" min="5" max="30" value="15" style="width: 100%;" oninput="this.nextElementSibling.value = this.value">
+                    <output style="font-size: 18px; font-weight: 700; color: var(--apple-blue); margin-top: 10px; display: block;">15</output>
+                </div>
+                <div style="width: 240px;">
+                    <label>纸张大小</label>
+                    <select id="math_paper_size">
+                        <option value="A4">A4</option>
+                        <option value="Letter">Letter</option>
+                    </select>
+                </div>
+            </div>
+            <button onclick="generateMathPDF()">生成数学练习帖</button>
+        </div>
+    </div>
+    <div id="math-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="math-frame" style="width:100%; height:100%; border:none;"></iframe>
+    </div>
+</div>
+{{end}}