feat: 重构移动端布局并新增专用单词本页面
This commit is contained in:
guoqingshan
+268
@@ -0,0 +1,268 @@
|
||||
<!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">
|
||||
<style>
|
||||
body {
|
||||
display: block;
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
.wb-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.wb-top h1 { font-size: 1.35rem; }
|
||||
#back-home {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wb-card {
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.wb-card h2 { font-size: 1rem; margin-bottom: 0.75rem; }
|
||||
.wb-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.wb-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.wb-form input, .wb-form select {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
}
|
||||
.wb-form input:focus, .wb-form select:focus { border-color: var(--accent); }
|
||||
.wb-form button {
|
||||
align-self: end;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.wb-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.wb-toolbar input, .wb-toolbar select {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
}
|
||||
.wb-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#wb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
|
||||
.word-card {
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.word-main { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
|
||||
.word-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.word-cat {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.word-langs { display: grid; gap: 0.3rem; font-size: 0.85rem; }
|
||||
.lang-line { display: flex; align-items: center; gap: 0.4rem; }
|
||||
.lang-label { width: 2rem; color: var(--text-muted); flex-shrink: 0; }
|
||||
.lang-value { flex: 1; overflow-wrap: anywhere; }
|
||||
.speak-word {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem 0.45rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
line-height: 1;
|
||||
}
|
||||
.speak-word:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.word-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
|
||||
.word-actions button {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0.3rem 0.55rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.word-actions button:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.word-actions .danger { color: var(--danger); border-color: var(--danger); }
|
||||
.empty-state {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 2rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#wb-msg { min-height: 1.4em; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
|
||||
#edit-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
#edit-overlay.show { display: flex; }
|
||||
#edit-box {
|
||||
background: var(--panel-bg);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
width: min(480px, 92vw);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
#edit-box h3 { font-size: 1rem; margin-bottom: 0.75rem; }
|
||||
#edit-box label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0.6rem 0 0.25rem;
|
||||
}
|
||||
#edit-box input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
}
|
||||
#edit-box input:focus { border-color: var(--accent); }
|
||||
#edit-box .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
|
||||
#edit-box button {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel-bg);
|
||||
color: var(--text);
|
||||
border-radius: 6px;
|
||||
padding: 0.45rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
#edit-box .btn-confirm { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
@media (max-width: 640px) {
|
||||
.wb-toolbar { grid-template-columns: 1fr; }
|
||||
#wb-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wb-top">
|
||||
<h1>📖 单词本</h1>
|
||||
<a id="back-home" href="index.html">← 返回日记</a>
|
||||
</div>
|
||||
<div id="wb-msg"></div>
|
||||
|
||||
<div class="wb-card">
|
||||
<h2>添加单词</h2>
|
||||
<div class="wb-form">
|
||||
<label>西语<input id="add-word" type="text"></label>
|
||||
<label>英语<input id="add-english" type="text"></label>
|
||||
<label>中文<input id="add-chinese" type="text"></label>
|
||||
<label>分类<input id="add-category" type="text" list="category-options" placeholder="名词 / 动词 / 短语"></label>
|
||||
<button id="btn-add-word">添加</button>
|
||||
</div>
|
||||
<datalist id="category-options">
|
||||
<option value="名词"></option>
|
||||
<option value="动词"></option>
|
||||
<option value="形容词"></option>
|
||||
<option value="副词"></option>
|
||||
<option value="短语"></option>
|
||||
<option value="其他"></option>
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="wb-card">
|
||||
<div class="wb-toolbar">
|
||||
<input id="search-word" type="search" placeholder="搜索单词、英语或中文">
|
||||
<select id="filter-category">
|
||||
<option value="">全部分类</option>
|
||||
</select>
|
||||
<select id="sort-word">
|
||||
<option value="created">最近收藏</option>
|
||||
<option value="word">按单词 A-Z</option>
|
||||
<option value="category">按分类</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="wb-meta">
|
||||
<span id="wb-total">共 0 个单词</span>
|
||||
<span id="wb-category-count">0 个分类</span>
|
||||
</div>
|
||||
<div id="wb-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="edit-overlay">
|
||||
<div id="edit-box">
|
||||
<h3>编辑单词</h3>
|
||||
<label>西语<input id="edit-word" type="text"></label>
|
||||
<label>英语<input id="edit-english" type="text"></label>
|
||||
<label>中文<input id="edit-chinese" type="text"></label>
|
||||
<label>分类<input id="edit-category" type="text" list="category-options"></label>
|
||||
<div class="modal-actions">
|
||||
<button id="edit-cancel">取消</button>
|
||||
<button id="edit-save" class="btn-confirm">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="api.js"></script>
|
||||
<script src="speech.js"></script>
|
||||
<script src="wordbook.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user