-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup.html
More file actions
183 lines (173 loc) · 7.26 KB
/
popup.html
File metadata and controls
183 lines (173 loc) · 7.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODOStack</title>
<link rel="stylesheet" href="popup.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="popup-container">
<header class="popup-header">
<h1 class="popup-title">
<i class="fas fa-layer-group"></i>
TODOStack
</h1>
<button id="openFullPage" class="open-full-btn" title="打开完整页面">
<i class="fas fa-external-link-alt"></i>
</button>
</header>
<div class="popup-content">
<!-- 添加任务区域 -->
<div class="add-task-section">
<div class="input-container">
<input
type="text"
id="taskInput"
placeholder="输入新任务..."
maxlength="100"
>
<button id="pushBtn" class="push-btn">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="stack-info">
<span class="stack-size">栈大小: <span id="stackSize">0</span></span>
</div>
</div>
<!-- 栈操作区域 -->
<div class="stack-operations">
<button id="popBtn" class="pop-btn" disabled title="完成栈顶任务">
<i class="fas fa-check"></i>
</button>
<button id="peekBtn" class="peek-btn" disabled title="查看栈顶详情">
<i class="fas fa-eye"></i>
</button>
<button id="clearBtn" class="clear-btn" disabled title="清空栈">
<i class="fas fa-trash"></i>
</button>
</div>
<!-- 栈可视化区域 -->
<div class="stack-container">
<div class="stack-header">
<span class="stack-label">任务栈</span>
<div class="stack-pointer">
<i class="fas fa-arrow-down"></i>
<span>栈顶</span>
</div>
</div>
<div class="stack-wrapper">
<div id="taskStack" class="task-stack">
<!-- 任务项将动态添加到这里 -->
<div class="empty-stack">
<i class="fas fa-inbox"></i>
<p>栈为空</p>
</div>
</div>
</div>
</div>
<!-- 历史记录简化版 -->
<div class="history-section">
<div class="history-header">
<span class="history-label">
<i class="fas fa-history"></i>
已完成 (<span id="completedCount">0</span>)
</span>
<button id="toggleHistory" class="toggle-history-btn">
<i class="fas fa-eye"></i>
</button>
</div>
<div id="historyContainer" class="history-container" style="display: none;">
<div id="historyList" class="history-list">
<!-- 历史任务将显示在这里 -->
<div class="empty-history">
<i class="fas fa-clipboard-check"></i>
<p>暂无已完成任务</p>
</div>
</div>
</div>
</div>
<!-- 快捷操作 -->
<div class="quick-actions">
<button id="helpBtn" class="help-btn" title="使用帮助">
<i class="fas fa-question-circle"></i>
</button>
<button id="statsBtn" class="stats-btn" title="统计信息">
<i class="fas fa-chart-bar"></i>
</button>
</div>
</div>
<!-- 统计信息模态框 -->
<div id="statsModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>统计信息</h3>
<button class="close-btn" id="closeStatsModal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="stat-item">
<i class="fas fa-tasks"></i>
<div class="stat-info">
<span class="stat-value" id="totalTasks">0</span>
<span class="stat-label">待完成任务</span>
</div>
</div>
<div class="stat-item">
<i class="fas fa-check-circle"></i>
<div class="stat-info">
<span class="stat-value" id="completedTasks">0</span>
<span class="stat-label">已完成任务</span>
</div>
</div>
<div class="stat-item">
<i class="fas fa-clock"></i>
<div class="stat-info">
<span class="stat-value" id="todayTasks">0</span>
<span class="stat-label">今日添加</span>
</div>
</div>
</div>
</div>
</div>
<!-- 帮助模态框 -->
<div id="helpModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>使用指南</h3>
<button class="close-btn" id="closeModal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="help-item">
<i class="fas fa-plus"></i>
<div>
<h4>入栈 (Push)</h4>
<p>添加新任务到栈顶</p>
</div>
</div>
<div class="help-item">
<i class="fas fa-check"></i>
<div>
<h4>出栈 (Pop)</h4>
<p>完成并移除栈顶任务</p>
</div>
</div>
<div class="help-item">
<i class="fas fa-mouse"></i>
<div>
<h4>拖拽排序</h4>
<p>拖动任务调整顺序</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>