65 lines
2.1 KiB
HTML
65 lines
2.1 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>
|
|
|
|
<div id="practice-view" class="type-card" style="display:none">
|
|
<div class="type-toolbar">
|
|
<span id="progress-text"></span>
|
|
<span id="accuracy-text"></span>
|
|
<button id="btn-restart">重新开始</button>
|
|
</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>
|
|
</div>
|
|
|
|
<script src="typing-data.js"></script>
|
|
<script src="speech.js"></script>
|
|
<script src="typing.js"></script>
|
|
</body>
|
|
</html>
|