185 lines
7.2 KiB
HTML
185 lines
7.2 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">
|
|
</head>
|
|
<body>
|
|
<nav id="mobile-nav">
|
|
<button data-view="list" class="active">📋 日记</button>
|
|
<button data-view="editor">✏️ 编辑</button>
|
|
<button data-view="translate">🌐 翻译</button>
|
|
<button data-view="mine">👤 我的</button>
|
|
</nav>
|
|
|
|
<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>
|
|
<li><a href="knowledge/b1-vocabulario.html">B1 核心词汇</a></li>
|
|
<li><a href="knowledge/comparacion-fonetica.html">三语语音对照</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="stats-panel" class="mobile-view-panel" data-view-panel="mine">
|
|
<div class="panel-header">
|
|
<h2>📊 我的统计</h2>
|
|
</div>
|
|
<div id="stats-content">登录后显示</div>
|
|
</div>
|
|
|
|
<div id="user-area">
|
|
<span id="user-name">未登录</span>
|
|
<button id="btn-settings" title="翻译设置">⚙️ 设置</button>
|
|
<a id="admin-link" href="admin.html" style="display:none">用户管理</a>
|
|
<button id="btn-change-password" style="display:none" title="修改密码">🔑 修改密码</button>
|
|
<button id="btn-logout" style="display:none">退出</button>
|
|
</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-helper" 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>
|
|
|
|
<!-- Chinese to Spanish helper modal -->
|
|
<div id="helper-modal-overlay">
|
|
<div id="helper-modal-box">
|
|
<h3>中文 → 西班牙语</h3>
|
|
<textarea id="helper-input" placeholder="输入中文，例如：今天我去公园和我的朋友"></textarea>
|
|
<div id="helper-preview">
|
|
<span class="helper-preview-label">翻译结果：</span>
|
|
<span id="helper-result"></span>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn-cancel" id="helper-cancel">取消</button>
|
|
<button class="btn-confirm" id="helper-confirm">插入</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Translation settings modal -->
|
|
<div id="settings-modal-overlay">
|
|
<div id="settings-modal-box">
|
|
<h3>翻译设置</h3>
|
|
<label for="translator-type">翻译方式</label>
|
|
<select id="translator-type">
|
|
<option value="local">本地词典</option>
|
|
<option value="mymemory">MyMemory 免费接口</option>
|
|
<option value="custom">自定义接口</option>
|
|
</select>
|
|
<label for="api-url">自定义接口地址</label>
|
|
<input type="text" id="api-url" placeholder="https://example.com/translate">
|
|
<label for="api-key">接口密钥（可选）</label>
|
|
<input type="password" id="api-key" placeholder="API Key">
|
|
<label for="extra-config">扩展配置 JSON（可选）</label>
|
|
<textarea id="extra-config" rows="3" placeholder='{"result_key":"translatedText","headers":{}}'></textarea>
|
|
<div class="modal-actions">
|
|
<button class="btn-cancel" id="settings-cancel">取消</button>
|
|
<button class="btn-confirm" id="settings-save">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change password modal -->
|
|
<div id="password-modal-overlay">
|
|
<div id="password-modal-box">
|
|
<h3>修改密码</h3>
|
|
<label for="password-old">当前密码</label>
|
|
<input type="password" id="password-old" autocomplete="current-password">
|
|
<label for="password-new">新密码</label>
|
|
<input type="password" id="password-new" autocomplete="new-password">
|
|
<label for="password-confirm">确认新密码</label>
|
|
<input type="password" id="password-confirm" autocomplete="new-password">
|
|
<div id="password-msg"></div>
|
|
<div class="modal-actions">
|
|
<button class="btn-cancel" id="password-cancel">取消</button>
|
|
<button class="btn-confirm" id="password-save">确认修改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="api.js"></script>
|
|
<script src="db.js"></script>
|
|
<script src="b1-vocab.js"></script>
|
|
<script src="translate.js"></script>
|
|
<script src="speech.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|