Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
216 lines (202 loc) · 14.3 KB
/
Copy pathindex.html
File metadata and controls
216 lines (202 loc) · 14.3 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<title>One Tomato</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="tabs.css">
<!-- Inter and JetBrains Mono are optional: the page does not wait for it, and falls back to the system font if it fails to load -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"></noscript>
</head>
<body>
<div class="container">
<main class="app">
<header class="header">
<h1 class="title">
<svg class="logo" width="30" height="30" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
<circle cx="16" cy="19" r="11" fill="#E0442B"/>
<path d="M16 9C13 4 8 5 6 8C9 11 13 11 16 9ZM16 9C19 4 24 5 26 8C23 11 19 11 16 9Z" fill="#1F6B38"/>
<path d="M16 10V4" stroke="#1F6B38" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>One Tomato</span>
</h1>
<p class="stack-indicator visually-hidden">
<span class="stack-count">0</span>
<span class="stack-label">tasks</span>
</p>
</header>
<div class="tabs-container">
<div class="tabs-scroll">
<div id="tabsList" class="tabs-list" role="tablist" aria-label="Categories"></div>
</div>
</div>
<section id="taskPanel" class="tasks-section" role="tabpanel" aria-labelledby="tab-0">
<h2 class="visually-hidden">Active Stack</h2>
<div id="hero" class="hero">
<div id="heroEmpty" class="hero-empty">
<svg class="plate" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
<circle cx="50" cy="52" r="44" fill="none" stroke="currentColor" stroke-width="3" stroke-dasharray="3 8" stroke-linecap="round"/>
</svg>
<p id="emptyTitle" class="hero-empty-title">Empty plate.</p>
<p id="emptySub" class="hero-empty-sub">What's the one thing?</p>
</div>
<div id="heroTask" class="top-task" hidden>
<p class="now-label">Now</p>
<div class="hero-name">
<p id="heroText" class="task-text" tabindex="0" aria-keyshortcuts="F2"></p>
</div>
<div id="dial" class="dial">
<svg class="dial-svg" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
<circle class="dial-track" cx="50" cy="54" r="44"/>
<circle id="dialArc" class="dial-arc" cx="50" cy="54" r="22" transform="rotate(-90 50 54)"/>
<path class="dial-leaf" d="M50 11C46 3 38 3 33 7C38 12 45 13 50 11ZM50 11C54 3 62 3 67 7C62 12 55 13 50 11Z"/>
<path class="dial-stem" d="M50 12V4" />
</svg>
<p id="heroClock" class="now-clock" role="timer">25:00</p>
</div>
<p id="heroStatus" class="hero-status"></p>
<p id="heroTally" class="tally" hidden></p>
<div class="now-actions">
<button id="timerButton" class="hero-btn timer-btn" type="button" data-action="timer">
<svg class="btn-icon icon-play" width="18" height="18" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false"><path d="M4.5 3L11 7L4.5 11Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
<svg class="btn-icon icon-pause" width="18" height="18" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false"><path d="M4.5 3V11M9.5 3V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<span id="timerLabel">Start</span>
</button>
<button id="popButton" class="hero-btn pop-button" type="button" disabled>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
<path d="M4 10.5L8 14.5L16 6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Done
</button>
</div>
<div class="task-actions">
<button type="button" class="task-action-btn move-down-btn" data-action="down" title="Move down" aria-label="Move down">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false"><path d="M3.5 5.5L7 9L10.5 5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button type="button" class="task-action-btn archive-btn" data-action="archive" title="Archive" aria-label="Archive">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false"><path d="M1 3.5H13M2.5 3.5V11.5C2.5 12.0523 2.94772 12.5 3.5 12.5H10.5C11.0523 12.5 11.5 12.0523 11.5 11.5V3.5M4.5 1.5H9.5M5.5 6.5H8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button type="button" class="task-action-btn remove-btn" data-action="remove" title="Delete" aria-label="Delete">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false"><path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</button>
</div>
</div>
</div>
<p id="thenLine" class="then-line" hidden>
<a id="thenLink" class="then-link" href="#stackRest"></a>
<span id="thenNone" class="then-none" hidden>Last one on the plate.</span>
</p>
<div class="input-section">
<label for="taskInput" class="visually-hidden">New task</label>
<div class="input-row">
<input
type="text"
id="taskInput"
class="task-input"
placeholder="Add one thing…"
autocomplete="off"
enterkeyhint="done"
maxlength="280"
>
<button id="addTaskBtn" class="add-button" type="button">Add</button>
</div>
</div>
<div id="stackRest" class="stack-rest" tabindex="-1">
<div id="taskStack" class="task-stack" role="list" aria-label="Then"></div>
</div>
</section>
<section class="archive-section collapsible-section collapsed">
<div class="section-header">
<h2>
<button type="button" class="section-toggle" aria-expanded="false" aria-controls="archivedTasks">
<svg class="toggle-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
<path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="section-title">Archive</span>
<span id="archivedCount" class="section-count">0</span>
</button>
</h2>
</div>
<div id="archivedTasks" class="archived-tasks section-content" role="list"></div>
</section>
<section class="completed-section collapsible-section collapsed">
<div class="section-header">
<h2>
<button type="button" class="section-toggle" aria-expanded="false" aria-controls="completedTasks">
<svg class="toggle-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
<path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="section-title">Completed</span>
<span id="completedCount" class="section-count">0</span>
</button>
</h2>
</div>
<div id="completedTasks" class="completed-tasks section-content" role="list"></div>
</section>
<footer class="tools">
<div class="tools-group" role="group" aria-label="Category tools">
<button id="addCategoryBtn" class="tool-btn" type="button" title="Add new category" aria-label="Add new category">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"><path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
New category
</button>
<button id="renameCategoryBtn" class="tool-btn" type="button" title="Rename this category" aria-label="Rename this category">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"><path d="M10.5 3L13 5.5M2.5 13.5L3 10.5L11 2.5L13.5 5L5.5 13L2.5 13.5Z" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
Rename
</button>
<button id="deleteCategoryBtn" class="tool-btn tool-btn-danger" type="button" title="Delete this category" aria-label="Delete this category">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"><path d="M2.5 4H13.5M6 4V2.5H10V4M4 4L4.7 13.5H11.3L12 4M6.5 6.5V11M9.5 6.5V11" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
Delete
</button>
</div>
<div class="tools-group footer-actions" role="group" aria-label="Backup">
<button id="exportBtn" class="tool-btn footer-btn" type="button" title="Export tasks to JSON file">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"><path d="M8 2V10M8 10L5 7M8 10L11 7M2 12V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Export
</button>
<button id="importBtn" class="tool-btn footer-btn" type="button" title="Import tasks from JSON file">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"><path d="M8 10V2M8 2L5 5M8 2L11 5M2 12V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Import
</button>
<input type="file" id="importFile" accept=".json,application/json" hidden>
</div>
</footer>
</main>
</div>
<div id="liveRegion" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div>
<div id="toast" class="toast" hidden>
<span id="toastMessage" class="toast-message"></span>
<button id="toastAction" class="toast-btn toast-action" type="button">Undo</button>
<button id="toastClose" class="toast-btn toast-close" type="button" aria-label="Dismiss message" title="Dismiss">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
<path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</button>
</div>
<dialog id="dialog" class="dialog" aria-labelledby="dialogTitle">
<form id="dialogForm" class="dialog-form" method="dialog">
<h2 id="dialogTitle" class="dialog-title"></h2>
<p id="dialogMessage" class="dialog-message" hidden></p>
<div id="dialogField" class="dialog-field" hidden>
<label id="dialogLabel" for="dialogInput"></label>
<input id="dialogInput" class="task-input" type="text" autocomplete="off">
<p id="dialogError" class="dialog-error" role="alert"></p>
</div>
<div class="dialog-actions">
<button id="dialogCancel" class="dialog-btn" type="button">Cancel</button>
<button id="dialogOk" class="dialog-btn dialog-btn-primary" type="submit">OK</button>
</div>
</form>
</dialog>
<script src="state.js"></script>
<script src="storage.js"></script>
<script src="ui.js"></script>
<script src="render.js"></script>
<script src="dnd.js"></script>
<script src="app.js"></script>
</body>
</html>