{{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}}