96 lines
3.6 KiB
HTML
96 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>打字练习 — Mi Diario</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="typing.css">
|
||
</head>
|
||
<body>
|
||
<div class="type-wrap">
|
||
<div class="type-top">
|
||
<h1>⌨️ 西班牙语打字练习</h1>
|
||
<a href="index.html">← 返回日记</a>
|
||
</div>
|
||
|
||
<div id="setup-view" class="type-card">
|
||
<div class="mode-select">
|
||
<button data-mode="vocab" class="active">📖 基础词汇</button>
|
||
<button data-mode="phrases">💬 日常口语</button>
|
||
</div>
|
||
<div class="setup-grid">
|
||
<label>分类
|
||
<select id="category-select"></select>
|
||
</label>
|
||
<label>题量
|
||
<select id="count-select">
|
||
<option value="10">10 个</option>
|
||
<option value="20">20 个</option>
|
||
<option value="50">50 个</option>
|
||
<option value="all">全部</option>
|
||
</select>
|
||
</label>
|
||
<label>顺序
|
||
<select id="order-select">
|
||
<option value="random">随机</option>
|
||
<option value="order">按顺序</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<button id="btn-start">开始打字</button>
|
||
<div class="records-section">
|
||
<div class="records-head">
|
||
<h2>打字记录</h2>
|
||
<button id="btn-refresh-records" type="button">刷新</button>
|
||
</div>
|
||
<div id="records-list" class="records-list">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="practice-view" class="type-card" style="display:none">
|
||
<div class="type-toolbar">
|
||
<span id="progress-text"></span>
|
||
<span id="accuracy-text"></span>
|
||
<div class="toolbar-actions">
|
||
<button id="btn-typing-speak" title="朗读当前内容（F6）">🔊</button>
|
||
<button id="btn-restart">重新开始</button>
|
||
<button id="btn-choose">重新选择</button>
|
||
</div>
|
||
</div>
|
||
<div class="progress-track"><div id="progress-fill" class="progress-fill"></div></div>
|
||
<div id="target-text"></div>
|
||
<div id="chinese-text"></div>
|
||
<input id="typing-input" type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="">
|
||
<div id="next-key"></div>
|
||
<div id="keyboard"></div>
|
||
<div id="special-hint"></div>
|
||
<div id="keyboard-guide" class="keyboard-guide">
|
||
<h2>西语键盘按键说明</h2>
|
||
<ol>
|
||
<li>字母 ñ：点击“；”键，即字母 L 右边第一个键。</li>
|
||
<li>字母 á é í ó ú：引号键 + a e i o u，引号键是字母 L 右边第二个键。</li>
|
||
<li>倒问号 ¿：Shift + 加号键。</li>
|
||
<li>问号 ?：Shift + 减号键。</li>
|
||
<li>倒感叹号 ¡：直接按加号键。</li>
|
||
<li>感叹号 !：Shift + 数字 1。</li>
|
||
<li>快速切换键盘：Shift + Alt。</li>
|
||
<li>横线 ——：原键盘上的问号键，单击即可。</li>
|
||
<li>括号 ()：Shift + 数字 8、9。</li>
|
||
<li>引号 “”：Shift + 数字 2。</li>
|
||
<li>斜线 /：Shift + 数字 7。</li>
|
||
<li>分号 ;：Shift + 逗号键。</li>
|
||
<li>冒号 :：Shift + 句号键。</li>
|
||
<li>ü：Shift + 引号键，松开后输入 u。</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="api.js"></script>
|
||
<script src="typing-data.js"></script>
|
||
<script src="speech.js"></script>
|
||
<script src="typing.js"></script>
|
||
</body>
|
||
</html>
|