feat: 西班牙语日记学习工具与知识库

index.html

@@ -0,0 +1,100 @@
+<!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">
+</head>
+<body>
+  <div id="app">
+    <aside id="panel-list">
+      <div class="panel-header">
+        <h2>📋 日记</h2>
+        <button id="btn-new" title="新建日记">+</button>
+      </div>
+      <ul id="entry-list"></ul>
+
+      <div id="grammar-quick">
+        <div class="panel-header grammar-header">
+          <h2>📚 语法速查</h2>
+          <a class="more-link" href="knowledge.html">更多 >></a>
+        </div>
+        <ul id="grammar-list">
+          <li><a href="knowledge/otros.html#ser-estar">ser/estar 区别</a></li>
+          <li><a href="knowledge/verbo.html#presente">现在时变位</a></li>
+          <li><a href="knowledge/sustantivo.html#articulo-def">定冠词用法</a></li>
+          <li><a href="knowledge/fonetica.html#acento">重音规则</a></li>
+          <li><a href="knowledge/otros.html#hora">时间表达</a></li>
+          <li><a href="knowledge/verbo.html#frases-verbales">常用动词短语</a></li>
+        </ul>
+      </div>
+    </aside>
+
+    <main id="panel-editor">
+      <div class="panel-header">
+       <input type="date" id="entry-date">
+        <button id="btn-speak-selected" title="朗读选中的文本">🔊 朗读</button>
+       <button id="btn-save">💾 保存</button>
+      </div>
+     <textarea id="entry-text" placeholder="用西班牙语写下今天的日记..." spellcheck="false"></textarea>
+      <div id="entry-hint">输入西语后实时显示翻译</div>
+
+      <div id="editor-translate">
+        <div class="editor-section-title">🌐 实时翻译</div>
+        <div class="editor-translate-line">
+          <span class="et-label">EN:</span>
+          <span id="editor-translate-en" class="et-text">-</span>
+        </div>
+        <div class="editor-translate-line">
+          <span class="et-label">CN:</span>
+          <span id="editor-translate-cn" class="et-text">-</span>
+        </div>
+        <div id="selection-translate" style="display:none">
+          <div class="editor-translate-line">
+            <span class="et-label">选中:</span>
+            <span id="selected-translation" class="et-text"></span>
+          </div>
+        </div>
+      </div>
+
+      <div id="editor-vocab">
+        <div class="editor-section-title">📖 单词本</div>
+        <div id="vocab-list"></div>
+      </div>
+    </main>
+
+    <aside id="panel-translate">
+      <div class="panel-header">
+        <h2>🌐 翻译</h2>
+      </div>
+      <div class="translate-section">
+        <div class="translate-label">🇬🇧 English</div>
+        <div id="translate-en" class="translate-text">-</div>
+        <button class="btn-speech" data-lang="en">🔊 朗读</button>
+      </div>
+      <div class="translate-section">
+        <div class="translate-label">🇨🇳 中文</div>
+        <div id="translate-cn" class="translate-text">-</div>
+        <button class="btn-speech" data-lang="zh">🔊 朗读</button>
+      </div>
+    </aside>
+  </div>
+
+  <!-- Delete confirmation modal -->
+  <div id="modal-overlay">
+    <div id="modal-box">
+      <p>确定删除这条日记吗？此操作不可撤销。</p>
+      <div class="modal-actions">
+        <button class="btn-cancel">取消</button>
+        <button class="btn-confirm">删除</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="db.js"></script>
+  <script src="translate.js"></script>
+  <script src="speech.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>