feat: 新增西班牙语词汇与口语打字练习页面

2026-08-02 20:25:54 +08:00
parent 0d37a1c46e
commit 835514f927
6 changed files with 498 additions and 0 deletions
@@ -0,0 +1,63 @@
+<!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>
+  </div>
+
+  <script src="typing-data.js"></script>
+  <script src="speech.js"></script>
+  <script src="typing.js"></script>
+</body>
+</html>