81 lines
4.3 KiB
HTML
81 lines
4.3 KiB
HTML
{{define "content"}}
|
|
|
|
<!-- 注入各个工具面板 -->
|
|
{{template "zitie" .}}
|
|
{{template "learn_number" .}}
|
|
|
|
<!-- 欢迎面板 -->
|
|
<div id="panel-welcome" class="tool-panel">
|
|
<header class="page-header">
|
|
<h1>欢迎使用个人工具箱</h1>
|
|
<p>这是您的私人效率基地。请从侧边栏或下方列表选择一个功能开始。</p>
|
|
</header>
|
|
|
|
<div style="margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
|
|
<div class="card" style="cursor:pointer; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'" onclick="navigateTo('/zitie')">
|
|
<h3 style="margin-top:0;">🖋️ 汉字字帖生成</h3>
|
|
<p style="color: #86868b; line-height: 1.5;">支持多种书法字体的 2x3 教学方格、步进分解和古风竖排信纸。</p>
|
|
<div style="color: var(--apple-blue); font-weight: 600; margin-top: 16px;">立即开始 →</div>
|
|
</div>
|
|
<div class="card" style="cursor:pointer; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'" onclick="navigateTo('/learn-number')">
|
|
<h3 style="margin-top:0;">🔢 幼儿数学助手</h3>
|
|
<p style="color: #86868b; line-height: 1.5;">数图形、基础算术等趣味练习。培养孩子的数感与逻辑。</p>
|
|
<div style="color: var(--apple-blue); font-weight: 600; margin-top: 16px;">立即开始 →</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// --- Zitie Tool Logic ---
|
|
let currentZitieMode = 'teaching';
|
|
function switchZitieTab(mode) {
|
|
currentZitieMode = mode;
|
|
document.querySelectorAll('#panel-zitie .tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
document.getElementById(`tab-${mode}`).classList.add('active');
|
|
document.getElementById('font-select-group').style.display = (mode === 'manuscript') ? 'block' : 'none';
|
|
}
|
|
|
|
async function generateZitiePDF() {
|
|
const chars = document.getElementById('chars').value;
|
|
const paper_size = document.getElementById('paper_size').value;
|
|
const font_type = document.getElementById('font_type').value;
|
|
const btn = document.querySelector('#panel-zitie button');
|
|
btn.innerText = '绘图中...'; btn.disabled = true;
|
|
try {
|
|
const response = await fetch(`/api/zitie/${currentZitieMode}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ chars, paper_size, font_type })
|
|
});
|
|
if (response.ok) {
|
|
const blob = await response.blob();
|
|
document.getElementById('zitie-preview').style.display = 'block';
|
|
document.getElementById('zitie-frame').src = URL.createObjectURL(blob);
|
|
}
|
|
} catch (e) { alert('错误'); } finally { btn.innerText = '生成字帖预览'; btn.disabled = false; }
|
|
}
|
|
|
|
// --- Math Tool Logic ---
|
|
async function generateMathPDF() {
|
|
const total_count = parseInt(document.getElementById('total_count').value);
|
|
const icon_types = parseInt(document.getElementById('icon_types').value);
|
|
const paper_size = document.getElementById('math_paper_size').value;
|
|
const btn = document.querySelector('#panel-learn-number button');
|
|
btn.innerText = '生成中...'; btn.disabled = true;
|
|
try {
|
|
const response = await fetch('/api/learn-number/counting', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ total_count, icon_types, paper_size })
|
|
});
|
|
if (response.ok) {
|
|
const blob = await response.blob();
|
|
document.getElementById('math-preview').style.display = 'block';
|
|
document.getElementById('math-frame').src = URL.createObjectURL(blob);
|
|
if(window.innerWidth < 768) document.getElementById('math-preview').scrollIntoView({behavior: 'smooth'});
|
|
}
|
|
} catch (e) { alert('错误'); } finally { btn.innerText = '生成数学练习帖'; btn.disabled = false; }
|
|
}
|
|
</script>
|
|
{{end}}
|