69 lines
2.4 KiB
HTML
69 lines
2.4 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>Todo</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 头部 -->
|
|
<header class="app-header">
|
|
<h1 class="app-title">Todo</h1>
|
|
<span class="task-count" id="taskCount"></span>
|
|
<div class="auto-save-group" id="autoSaveGroup">
|
|
<span class="auto-save-label">自动保存：</span>
|
|
<span class="auto-save-seconds" id="autoSaveSeconds" title="点击修改间隔">10s</span>
|
|
<label class="auto-save-toggle" title="开启/关闭定时自动保存">
|
|
<input type="checkbox" id="autoSaveCheck">
|
|
<span class="toggle-track">
|
|
<span class="toggle-thumb"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="app-main">
|
|
<!-- 创建栏 -->
|
|
<div class="create-bar" id="createBar">
|
|
<input
|
|
type="text"
|
|
class="create-input"
|
|
id="createInput"
|
|
placeholder="输入新任务，回车确认…"
|
|
maxlength="200"
|
|
>
|
|
<button class="btn-icon btn-confirm" id="btnConfirmCreate" title="确认添加">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M3 9l4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 任务列表 -->
|
|
<div class="todo-list-wrap">
|
|
<ul class="todo-list" id="todoList"></ul>
|
|
<div class="empty-state" id="emptyState">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
|
<circle cx="24" cy="24" r="22" stroke="#dce0e4" stroke-width="1.5"/>
|
|
<path d="M24 16v16M16 24h16" stroke="#dce0e4" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<p>暂无任务，在上方输入框中添加</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 底部筛选栏 -->
|
|
<footer class="app-footer">
|
|
<button class="filter-tab active" data-view="active">进行中</button>
|
|
<button class="filter-tab" data-view="completed">已完成</button>
|
|
<button class="filter-tab" data-view="abandoned">已废弃</button>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|