@vitronai/alethia 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -41
- package/demo/admin-panel.html +326 -36
- package/demo/agent-oversight.html +354 -49
- package/demo/claude-code-app.html +688 -94
- package/demo/crypto-readiness.html +611 -177
- package/demo/ea1-stress-test.html +262 -34
- package/demo/ecommerce.html +1116 -0
- package/demo/financial-dashboard.html +298 -34
- package/demo/incident-response.html +636 -196
- package/demo/intentional-failures.html +157 -0
- package/demo/nist-compliance.html +458 -102
- package/demo/threat-intel.html +310 -51
- package/demo/wcag-audit.html +495 -84
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +145 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/skills/alethia/SKILL.md +15 -5
|
@@ -2,147 +2,711 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>TaskFlow
|
|
5
|
+
<title>TaskFlow — AI-Generated Task Manager</title>
|
|
6
6
|
<style>
|
|
7
|
+
:root {
|
|
8
|
+
--bg-0: #0b0b0d;
|
|
9
|
+
--bg-1: #131316;
|
|
10
|
+
--bg-2: #1a1a1f;
|
|
11
|
+
--bg-3: #22232a;
|
|
12
|
+
--line: #2a2b33;
|
|
13
|
+
--line-soft: #1f2027;
|
|
14
|
+
--ink: #f4f4f5;
|
|
15
|
+
--ink-muted: #a1a1aa;
|
|
16
|
+
--ink-faint: #71717a;
|
|
17
|
+
--ink-dim: #52525b;
|
|
18
|
+
--accent: #d97757;
|
|
19
|
+
--accent-soft: rgba(217, 119, 87, .14);
|
|
20
|
+
--accent-strong: #e0876b;
|
|
21
|
+
--indigo: #818cf8;
|
|
22
|
+
--emerald: #34d399;
|
|
23
|
+
--rose: #fb7185;
|
|
24
|
+
--amber: #fbbf24;
|
|
25
|
+
}
|
|
26
|
+
|
|
7
27
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
html { color-scheme: dark; }
|
|
29
|
+
body {
|
|
30
|
+
font-family: ui-sans-serif, -apple-system, system-ui, "Inter", sans-serif;
|
|
31
|
+
background:
|
|
32
|
+
radial-gradient(1100px 600px at 12% -10%, rgba(217,119,87,.07), transparent 55%),
|
|
33
|
+
radial-gradient(900px 500px at 105% 110%, rgba(129,140,248,.05), transparent 55%),
|
|
34
|
+
var(--bg-0);
|
|
35
|
+
background-attachment: fixed;
|
|
36
|
+
color: var(--ink);
|
|
37
|
+
min-height: 100vh;
|
|
38
|
+
-webkit-font-smoothing: antialiased;
|
|
39
|
+
letter-spacing: -.005em;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ── Top brand bar ───────────────────────────────────────── */
|
|
43
|
+
.topbar {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
gap: 16px;
|
|
48
|
+
padding: 12px 20px;
|
|
49
|
+
border-bottom: 1px solid var(--line-soft);
|
|
50
|
+
background: rgba(11,11,13,.7);
|
|
51
|
+
backdrop-filter: saturate(140%) blur(8px);
|
|
52
|
+
position: sticky;
|
|
53
|
+
top: 0;
|
|
54
|
+
z-index: 5;
|
|
55
|
+
}
|
|
56
|
+
.brand {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: 10px;
|
|
60
|
+
font-weight: 600;
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
}
|
|
63
|
+
.brand-mark {
|
|
64
|
+
width: 26px; height: 26px;
|
|
65
|
+
border-radius: 7px;
|
|
66
|
+
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
|
67
|
+
display: grid;
|
|
68
|
+
place-items: center;
|
|
69
|
+
font-size: 14px;
|
|
70
|
+
font-weight: 700;
|
|
71
|
+
color: #ffffff;
|
|
72
|
+
box-shadow:
|
|
73
|
+
0 4px 14px rgba(217,119,87,.3),
|
|
74
|
+
inset 0 1px 0 rgba(255,255,255,.25);
|
|
75
|
+
}
|
|
76
|
+
.brand-name { letter-spacing: -.012em; }
|
|
77
|
+
.brand-tag {
|
|
78
|
+
font-size: 10.5px;
|
|
79
|
+
font-weight: 500;
|
|
80
|
+
color: var(--ink-faint);
|
|
81
|
+
padding: 2px 8px;
|
|
82
|
+
border-radius: 999px;
|
|
83
|
+
border: 1px solid var(--line);
|
|
84
|
+
background: var(--bg-2);
|
|
85
|
+
margin-left: 4px;
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 5px;
|
|
89
|
+
}
|
|
90
|
+
.brand-tag::before {
|
|
91
|
+
content: "";
|
|
92
|
+
width: 5px; height: 5px;
|
|
93
|
+
border-radius: 50%;
|
|
94
|
+
background: var(--accent);
|
|
95
|
+
box-shadow: 0 0 6px var(--accent);
|
|
96
|
+
}
|
|
97
|
+
.top-actions { display: flex; align-items: center; gap: 8px; }
|
|
98
|
+
.icon-btn {
|
|
99
|
+
width: 30px; height: 30px;
|
|
100
|
+
border-radius: 7px;
|
|
101
|
+
background: var(--bg-2);
|
|
102
|
+
border: 1px solid var(--line);
|
|
103
|
+
color: var(--ink-muted);
|
|
104
|
+
display: grid; place-items: center;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
transition: background .15s, border-color .15s, color .15s;
|
|
107
|
+
}
|
|
108
|
+
.icon-btn:hover { background: var(--bg-3); border-color: #3a3b44; color: var(--ink); }
|
|
109
|
+
|
|
110
|
+
/* ── App container ──────────────────────────────────────── */
|
|
111
|
+
.app {
|
|
112
|
+
max-width: 880px;
|
|
113
|
+
margin: 0 auto;
|
|
114
|
+
padding: 28px 20px 40px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* ── Auth ──────────────────────────────────────────────── */
|
|
118
|
+
.auth-shell {
|
|
119
|
+
max-width: 420px;
|
|
120
|
+
margin: 60px auto 0;
|
|
121
|
+
}
|
|
122
|
+
.auth-card {
|
|
123
|
+
position: relative;
|
|
124
|
+
background:
|
|
125
|
+
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)),
|
|
126
|
+
var(--bg-1);
|
|
127
|
+
border: 1px solid var(--line);
|
|
128
|
+
border-radius: 14px;
|
|
129
|
+
padding: 26px 24px;
|
|
130
|
+
box-shadow:
|
|
131
|
+
inset 0 1px 0 rgba(255,255,255,.04),
|
|
132
|
+
0 18px 50px rgba(0,0,0,.45),
|
|
133
|
+
0 4px 12px rgba(0,0,0,.25);
|
|
134
|
+
}
|
|
135
|
+
.auth-card::before {
|
|
136
|
+
content: "";
|
|
137
|
+
position: absolute;
|
|
138
|
+
inset: -1px;
|
|
139
|
+
border-radius: 15px;
|
|
140
|
+
padding: 1px;
|
|
141
|
+
background: linear-gradient(140deg, rgba(217,119,87,.35), transparent 35%, transparent 65%, rgba(129,140,248,.25));
|
|
142
|
+
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
143
|
+
-webkit-mask-composite: xor;
|
|
144
|
+
mask-composite: exclude;
|
|
145
|
+
pointer-events: none;
|
|
146
|
+
opacity: .6;
|
|
147
|
+
}
|
|
148
|
+
.auth-eyebrow {
|
|
149
|
+
font-size: 11px;
|
|
150
|
+
letter-spacing: .14em;
|
|
151
|
+
text-transform: uppercase;
|
|
152
|
+
color: var(--accent);
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
margin-bottom: 8px;
|
|
155
|
+
}
|
|
156
|
+
.auth-card h2 {
|
|
157
|
+
font-size: 20px;
|
|
158
|
+
font-weight: 600;
|
|
159
|
+
letter-spacing: -.014em;
|
|
160
|
+
margin-bottom: 4px;
|
|
161
|
+
color: #fff;
|
|
162
|
+
}
|
|
163
|
+
.auth-sub {
|
|
164
|
+
font-size: 13px;
|
|
165
|
+
color: var(--ink-muted);
|
|
166
|
+
margin-bottom: 22px;
|
|
167
|
+
line-height: 1.5;
|
|
168
|
+
}
|
|
169
|
+
.field {
|
|
170
|
+
display: flex;
|
|
171
|
+
flex-direction: column;
|
|
172
|
+
gap: 6px;
|
|
173
|
+
margin-bottom: 14px;
|
|
174
|
+
}
|
|
175
|
+
.field label {
|
|
176
|
+
font-size: 12px;
|
|
177
|
+
color: var(--ink-muted);
|
|
178
|
+
font-weight: 500;
|
|
179
|
+
}
|
|
180
|
+
.field input {
|
|
181
|
+
padding: 9px 11px;
|
|
182
|
+
border-radius: 8px;
|
|
183
|
+
border: 1px solid var(--line);
|
|
184
|
+
background: var(--bg-0);
|
|
185
|
+
color: var(--ink);
|
|
186
|
+
font: inherit;
|
|
187
|
+
font-size: 13.5px;
|
|
188
|
+
outline: none;
|
|
189
|
+
transition: border-color .15s, background .15s, box-shadow .15s;
|
|
190
|
+
}
|
|
191
|
+
.field input::placeholder { color: var(--ink-dim); }
|
|
192
|
+
.field input:focus {
|
|
193
|
+
border-color: var(--accent);
|
|
194
|
+
background: var(--bg-1);
|
|
195
|
+
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
196
|
+
}
|
|
197
|
+
.btn {
|
|
198
|
+
padding: 10px 14px;
|
|
199
|
+
border-radius: 8px;
|
|
200
|
+
border: 1px solid transparent;
|
|
201
|
+
font: inherit;
|
|
202
|
+
font-size: 13px;
|
|
203
|
+
font-weight: 600;
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
transition: background .15s, border-color .15s, color .15s, transform .08s;
|
|
206
|
+
}
|
|
207
|
+
.btn:active:not([disabled]) { transform: translateY(1px); }
|
|
208
|
+
.btn-primary {
|
|
209
|
+
background: linear-gradient(180deg, var(--accent-strong), var(--accent));
|
|
210
|
+
color: #fff;
|
|
211
|
+
width: 100%;
|
|
212
|
+
box-shadow: 0 6px 18px rgba(217,119,87,.28), inset 0 1px 0 rgba(255,255,255,.2);
|
|
213
|
+
}
|
|
214
|
+
.btn-primary:hover { filter: brightness(1.06); }
|
|
215
|
+
.auth-foot {
|
|
216
|
+
margin-top: 14px;
|
|
217
|
+
text-align: center;
|
|
218
|
+
font-size: 12px;
|
|
219
|
+
color: var(--ink-faint);
|
|
220
|
+
}
|
|
221
|
+
.error-msg {
|
|
222
|
+
color: var(--rose);
|
|
223
|
+
font-size: 12px;
|
|
224
|
+
margin-top: 10px;
|
|
225
|
+
display: none;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* ── Dashboard layout ──────────────────────────────────── */
|
|
29
229
|
.dashboard { display: none; }
|
|
30
230
|
.dashboard.active { display: block; }
|
|
31
|
-
.auth-
|
|
32
|
-
|
|
33
|
-
.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
231
|
+
.auth-shell.hidden { display: none; }
|
|
232
|
+
|
|
233
|
+
.page-head {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: flex-end;
|
|
236
|
+
justify-content: space-between;
|
|
237
|
+
gap: 16px;
|
|
238
|
+
margin-bottom: 22px;
|
|
239
|
+
padding-bottom: 18px;
|
|
240
|
+
border-bottom: 1px solid var(--line-soft);
|
|
241
|
+
}
|
|
242
|
+
.page-head h1 {
|
|
243
|
+
font-size: 22px;
|
|
244
|
+
font-weight: 600;
|
|
245
|
+
letter-spacing: -.018em;
|
|
246
|
+
color: #fff;
|
|
247
|
+
}
|
|
248
|
+
.page-head .lead {
|
|
249
|
+
font-size: 13px;
|
|
250
|
+
color: var(--ink-muted);
|
|
251
|
+
margin-top: 4px;
|
|
252
|
+
}
|
|
253
|
+
.user-chip {
|
|
254
|
+
display: flex;
|
|
255
|
+
align-items: center;
|
|
256
|
+
gap: 10px;
|
|
257
|
+
padding: 6px 8px 6px 6px;
|
|
258
|
+
border: 1px solid var(--line);
|
|
259
|
+
background: var(--bg-1);
|
|
260
|
+
border-radius: 999px;
|
|
261
|
+
font-size: 12.5px;
|
|
262
|
+
color: var(--ink-muted);
|
|
263
|
+
}
|
|
264
|
+
.avatar {
|
|
265
|
+
width: 26px; height: 26px;
|
|
266
|
+
border-radius: 50%;
|
|
267
|
+
background: linear-gradient(135deg, var(--indigo), #c084fc);
|
|
268
|
+
display: grid;
|
|
269
|
+
place-items: center;
|
|
270
|
+
font-size: 12px;
|
|
271
|
+
font-weight: 700;
|
|
272
|
+
color: #fff;
|
|
273
|
+
}
|
|
274
|
+
.user-email { color: var(--ink); font-weight: 500; }
|
|
275
|
+
.btn-logout {
|
|
276
|
+
background: transparent;
|
|
277
|
+
border: 1px solid var(--line);
|
|
278
|
+
color: var(--ink-muted);
|
|
279
|
+
font-size: 12px;
|
|
280
|
+
padding: 5px 10px;
|
|
281
|
+
border-radius: 999px;
|
|
282
|
+
cursor: pointer;
|
|
283
|
+
}
|
|
284
|
+
.btn-logout:hover { border-color: var(--rose); color: var(--rose); }
|
|
285
|
+
|
|
286
|
+
/* Stats */
|
|
287
|
+
.stats-row {
|
|
288
|
+
display: grid;
|
|
289
|
+
grid-template-columns: repeat(3, 1fr);
|
|
290
|
+
gap: 10px;
|
|
291
|
+
margin-bottom: 18px;
|
|
292
|
+
}
|
|
293
|
+
.stat-card {
|
|
294
|
+
position: relative;
|
|
295
|
+
background: var(--bg-1);
|
|
296
|
+
border: 1px solid var(--line);
|
|
297
|
+
border-radius: 10px;
|
|
298
|
+
padding: 14px 14px 12px;
|
|
299
|
+
overflow: hidden;
|
|
300
|
+
transition: border-color .15s, transform .15s;
|
|
301
|
+
}
|
|
302
|
+
.stat-card:hover { border-color: #34353e; transform: translateY(-1px); }
|
|
303
|
+
.stat-card::after {
|
|
304
|
+
content: "";
|
|
305
|
+
position: absolute;
|
|
306
|
+
inset: 0;
|
|
307
|
+
pointer-events: none;
|
|
308
|
+
background: radial-gradient(140px 80px at 100% 0%, var(--c-soft, rgba(255,255,255,.04)), transparent 70%);
|
|
309
|
+
}
|
|
310
|
+
.stat-head {
|
|
311
|
+
display: flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
gap: 6px;
|
|
314
|
+
font-size: 11px;
|
|
315
|
+
font-weight: 600;
|
|
316
|
+
letter-spacing: .08em;
|
|
317
|
+
text-transform: uppercase;
|
|
318
|
+
color: var(--ink-faint);
|
|
319
|
+
}
|
|
320
|
+
.stat-dot {
|
|
321
|
+
width: 7px; height: 7px;
|
|
322
|
+
border-radius: 50%;
|
|
323
|
+
background: var(--c, var(--ink-faint));
|
|
324
|
+
box-shadow: 0 0 8px var(--c, transparent);
|
|
325
|
+
}
|
|
326
|
+
.stat-value {
|
|
327
|
+
font-size: 26px;
|
|
328
|
+
font-weight: 700;
|
|
329
|
+
letter-spacing: -.022em;
|
|
330
|
+
color: #fff;
|
|
331
|
+
margin-top: 4px;
|
|
332
|
+
line-height: 1.05;
|
|
333
|
+
}
|
|
334
|
+
.stat-foot {
|
|
335
|
+
font-size: 11.5px;
|
|
336
|
+
color: var(--ink-muted);
|
|
337
|
+
margin-top: 2px;
|
|
338
|
+
}
|
|
339
|
+
.stat-card--active { --c: var(--indigo); --c-soft: rgba(129,140,248,.10); }
|
|
340
|
+
.stat-card--done { --c: var(--emerald); --c-soft: rgba(52,211,153,.10); }
|
|
341
|
+
.stat-card--overdue{ --c: var(--rose); --c-soft: rgba(251,113,133,.10); }
|
|
342
|
+
|
|
343
|
+
/* Add task bar */
|
|
344
|
+
.add-task {
|
|
345
|
+
display: flex;
|
|
346
|
+
gap: 8px;
|
|
347
|
+
align-items: center;
|
|
348
|
+
padding: 6px;
|
|
349
|
+
background: var(--bg-1);
|
|
350
|
+
border: 1px solid var(--line);
|
|
351
|
+
border-radius: 12px;
|
|
352
|
+
margin-bottom: 18px;
|
|
353
|
+
transition: border-color .15s, background .15s;
|
|
354
|
+
}
|
|
355
|
+
.add-task:focus-within {
|
|
356
|
+
border-color: var(--accent);
|
|
357
|
+
background: var(--bg-2);
|
|
358
|
+
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
359
|
+
}
|
|
360
|
+
.add-task .add-icon {
|
|
361
|
+
width: 32px; height: 32px;
|
|
362
|
+
border-radius: 8px;
|
|
363
|
+
background: var(--bg-3);
|
|
364
|
+
color: var(--accent);
|
|
365
|
+
display: grid;
|
|
366
|
+
place-items: center;
|
|
367
|
+
flex-shrink: 0;
|
|
368
|
+
font-weight: 700;
|
|
369
|
+
}
|
|
370
|
+
.add-task input {
|
|
371
|
+
flex: 1;
|
|
372
|
+
padding: 8px 4px;
|
|
373
|
+
border: none;
|
|
374
|
+
background: transparent;
|
|
375
|
+
color: var(--ink);
|
|
376
|
+
font: inherit;
|
|
377
|
+
font-size: 13.5px;
|
|
378
|
+
outline: none;
|
|
379
|
+
}
|
|
380
|
+
.add-task input::placeholder { color: var(--ink-dim); }
|
|
381
|
+
.kbd-hint {
|
|
382
|
+
font-size: 11px;
|
|
383
|
+
color: var(--ink-faint);
|
|
384
|
+
padding: 2px 6px;
|
|
385
|
+
border: 1px solid var(--line);
|
|
386
|
+
border-radius: 5px;
|
|
387
|
+
background: var(--bg-2);
|
|
388
|
+
font-family: ui-monospace, monospace;
|
|
389
|
+
}
|
|
390
|
+
.btn-add {
|
|
391
|
+
background: linear-gradient(180deg, #4ade80, var(--emerald));
|
|
392
|
+
color: #052e16;
|
|
393
|
+
padding: 8px 16px;
|
|
394
|
+
font-size: 13px;
|
|
395
|
+
font-weight: 700;
|
|
396
|
+
border-radius: 8px;
|
|
397
|
+
border: none;
|
|
398
|
+
cursor: pointer;
|
|
399
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
|
|
400
|
+
}
|
|
401
|
+
.btn-add:hover { filter: brightness(1.06); }
|
|
402
|
+
|
|
403
|
+
/* Filter chips */
|
|
404
|
+
.chip-row {
|
|
405
|
+
display: flex;
|
|
406
|
+
gap: 6px;
|
|
407
|
+
margin-bottom: 12px;
|
|
408
|
+
flex-wrap: wrap;
|
|
409
|
+
}
|
|
410
|
+
.chip {
|
|
411
|
+
padding: 5px 11px;
|
|
412
|
+
border-radius: 999px;
|
|
413
|
+
border: 1px solid var(--line);
|
|
414
|
+
background: var(--bg-1);
|
|
415
|
+
color: var(--ink-muted);
|
|
416
|
+
font-size: 12px;
|
|
417
|
+
font-weight: 500;
|
|
418
|
+
cursor: pointer;
|
|
419
|
+
transition: background .15s, border-color .15s, color .15s;
|
|
420
|
+
}
|
|
421
|
+
.chip:hover { color: var(--ink); border-color: #3a3b44; }
|
|
422
|
+
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
|
|
46
423
|
|
|
47
424
|
/* Task list */
|
|
48
|
-
.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
.
|
|
63
|
-
.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
425
|
+
.list-head {
|
|
426
|
+
display: flex;
|
|
427
|
+
justify-content: space-between;
|
|
428
|
+
align-items: baseline;
|
|
429
|
+
margin-bottom: 8px;
|
|
430
|
+
padding: 0 4px;
|
|
431
|
+
}
|
|
432
|
+
.list-head h3 {
|
|
433
|
+
font-size: 12px;
|
|
434
|
+
font-weight: 600;
|
|
435
|
+
letter-spacing: .05em;
|
|
436
|
+
text-transform: uppercase;
|
|
437
|
+
color: var(--ink-faint);
|
|
438
|
+
}
|
|
439
|
+
.list-count { font-size: 11.5px; color: var(--ink-faint); }
|
|
440
|
+
.task-list {
|
|
441
|
+
list-style: none;
|
|
442
|
+
display: flex;
|
|
443
|
+
flex-direction: column;
|
|
444
|
+
gap: 4px;
|
|
445
|
+
}
|
|
446
|
+
.task-item {
|
|
447
|
+
display: flex;
|
|
448
|
+
align-items: center;
|
|
449
|
+
gap: 12px;
|
|
450
|
+
padding: 11px 14px;
|
|
451
|
+
background: var(--bg-1);
|
|
452
|
+
border: 1px solid var(--line);
|
|
453
|
+
border-radius: 10px;
|
|
454
|
+
transition: border-color .15s, background .15s, transform .12s;
|
|
455
|
+
}
|
|
456
|
+
.task-item:hover { background: var(--bg-2); border-color: #34353e; }
|
|
457
|
+
.task-check {
|
|
458
|
+
width: 18px; height: 18px;
|
|
459
|
+
border-radius: 50%;
|
|
460
|
+
border: 1.5px solid #4a4b55;
|
|
461
|
+
background: transparent;
|
|
462
|
+
cursor: pointer;
|
|
463
|
+
flex-shrink: 0;
|
|
464
|
+
display: grid;
|
|
465
|
+
place-items: center;
|
|
466
|
+
transition: background .15s, border-color .15s;
|
|
467
|
+
}
|
|
468
|
+
.task-check:hover { border-color: var(--emerald); }
|
|
469
|
+
.task-check.done {
|
|
470
|
+
background: var(--emerald);
|
|
471
|
+
border-color: var(--emerald);
|
|
472
|
+
}
|
|
473
|
+
.task-check.done::after {
|
|
474
|
+
content: "\2713";
|
|
475
|
+
color: #052e16;
|
|
476
|
+
font-size: 11px;
|
|
477
|
+
font-weight: 800;
|
|
478
|
+
line-height: 1;
|
|
479
|
+
}
|
|
480
|
+
.task-body { flex: 1; min-width: 0; }
|
|
481
|
+
.task-text {
|
|
482
|
+
font-size: 13.5px;
|
|
483
|
+
color: var(--ink);
|
|
484
|
+
letter-spacing: -.005em;
|
|
485
|
+
}
|
|
486
|
+
.task-text.done { text-decoration: line-through; color: var(--ink-dim); }
|
|
487
|
+
.task-meta {
|
|
488
|
+
font-size: 11.5px;
|
|
489
|
+
color: var(--ink-faint);
|
|
490
|
+
margin-top: 2px;
|
|
491
|
+
display: flex;
|
|
492
|
+
align-items: center;
|
|
493
|
+
gap: 10px;
|
|
494
|
+
}
|
|
495
|
+
.task-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); }
|
|
496
|
+
.task-priority {
|
|
497
|
+
font-size: 10.5px;
|
|
498
|
+
padding: 3px 9px;
|
|
499
|
+
border-radius: 999px;
|
|
500
|
+
font-weight: 600;
|
|
501
|
+
letter-spacing: .03em;
|
|
502
|
+
text-transform: uppercase;
|
|
503
|
+
flex-shrink: 0;
|
|
504
|
+
}
|
|
505
|
+
.priority-high { background: rgba(251,113,133,.12); color: var(--rose); border: 1px solid rgba(251,113,133,.25); }
|
|
506
|
+
.priority-medium { background: rgba(251,191,36,.12); color: var(--amber); border: 1px solid rgba(251,191,36,.25); }
|
|
507
|
+
.priority-low { background: rgba(129,140,248,.12); color: var(--indigo); border: 1px solid rgba(129,140,248,.25); }
|
|
508
|
+
.btn-delete {
|
|
509
|
+
background: transparent;
|
|
510
|
+
border: 1px solid var(--line);
|
|
511
|
+
color: var(--ink-faint);
|
|
512
|
+
font-size: 12px;
|
|
513
|
+
padding: 5px 10px;
|
|
514
|
+
border-radius: 7px;
|
|
515
|
+
cursor: pointer;
|
|
516
|
+
flex-shrink: 0;
|
|
517
|
+
}
|
|
518
|
+
.btn-delete:hover { border-color: var(--rose); color: var(--rose); background: rgba(251,113,133,.05); }
|
|
519
|
+
|
|
520
|
+
/* Toast */
|
|
521
|
+
.toast {
|
|
522
|
+
position: fixed;
|
|
523
|
+
bottom: 22px;
|
|
524
|
+
right: 22px;
|
|
525
|
+
padding: 10px 14px;
|
|
526
|
+
border-radius: 10px;
|
|
527
|
+
background: var(--bg-2);
|
|
528
|
+
border: 1px solid var(--line);
|
|
529
|
+
color: var(--ink);
|
|
530
|
+
font-size: 13px;
|
|
531
|
+
font-weight: 500;
|
|
532
|
+
display: none;
|
|
533
|
+
z-index: 50;
|
|
534
|
+
box-shadow: 0 14px 40px rgba(0,0,0,.5);
|
|
535
|
+
gap: 8px;
|
|
536
|
+
align-items: center;
|
|
537
|
+
}
|
|
538
|
+
.toast.show { display: flex; animation: slideIn .25s ease-out; }
|
|
539
|
+
.toast-dot {
|
|
540
|
+
width: 8px; height: 8px;
|
|
541
|
+
border-radius: 50%;
|
|
542
|
+
background: var(--emerald);
|
|
543
|
+
box-shadow: 0 0 10px var(--emerald);
|
|
544
|
+
}
|
|
545
|
+
@keyframes slideIn {
|
|
546
|
+
from { transform: translateY(8px); opacity: 0; }
|
|
547
|
+
to { transform: translateY(0); opacity: 1; }
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/* Footer */
|
|
551
|
+
.ai-footer {
|
|
552
|
+
margin-top: 28px;
|
|
553
|
+
padding: 14px 16px;
|
|
554
|
+
border: 1px dashed var(--line);
|
|
555
|
+
border-radius: 10px;
|
|
556
|
+
background: linear-gradient(135deg, rgba(217,119,87,.05), rgba(129,140,248,.04));
|
|
557
|
+
display: flex;
|
|
558
|
+
align-items: center;
|
|
559
|
+
gap: 12px;
|
|
560
|
+
font-size: 12px;
|
|
561
|
+
color: var(--ink-muted);
|
|
562
|
+
}
|
|
563
|
+
.ai-footer-icon {
|
|
564
|
+
width: 28px; height: 28px;
|
|
565
|
+
border-radius: 7px;
|
|
566
|
+
background: var(--bg-2);
|
|
567
|
+
border: 1px solid var(--line);
|
|
568
|
+
display: grid; place-items: center;
|
|
569
|
+
color: var(--accent);
|
|
570
|
+
flex-shrink: 0;
|
|
571
|
+
}
|
|
69
572
|
</style>
|
|
70
573
|
</head>
|
|
71
574
|
<body>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<
|
|
76
|
-
<
|
|
575
|
+
|
|
576
|
+
<div class="topbar">
|
|
577
|
+
<div class="brand">
|
|
578
|
+
<div class="brand-mark">T</div>
|
|
579
|
+
<span class="brand-name">TaskFlow</span>
|
|
580
|
+
<span class="brand-tag">Generated by Claude Code</span>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="top-actions">
|
|
583
|
+
<button class="icon-btn" aria-label="Search" title="Search">
|
|
584
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-4.3-4.3"></path></svg>
|
|
585
|
+
</button>
|
|
586
|
+
<button class="icon-btn" aria-label="Notifications" title="Notifications">
|
|
587
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path></svg>
|
|
588
|
+
</button>
|
|
77
589
|
</div>
|
|
590
|
+
</div>
|
|
78
591
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
592
|
+
<div class="app">
|
|
593
|
+
|
|
594
|
+
<!-- Auth -->
|
|
595
|
+
<div class="auth-shell" id="auth">
|
|
596
|
+
<div class="auth-card">
|
|
597
|
+
<div class="auth-eyebrow">Workspace access</div>
|
|
598
|
+
<h2>Sign in to TaskFlow</h2>
|
|
599
|
+
<p class="auth-sub">A Claude-Code-built task manager. Use any email + team name — this is a sandbox.</p>
|
|
600
|
+
<div class="field">
|
|
601
|
+
<label for="email">Email</label>
|
|
602
|
+
<input type="email" id="email" placeholder="you@company.com" />
|
|
603
|
+
</div>
|
|
604
|
+
<div class="field">
|
|
605
|
+
<label for="team">Team</label>
|
|
606
|
+
<input type="text" id="team" placeholder="acme-engineering" />
|
|
607
|
+
</div>
|
|
608
|
+
<button class="btn btn-primary" id="signin-btn" onclick="handleSignIn()">Sign in</button>
|
|
609
|
+
<p class="error-msg" id="error-msg">Invalid email or password.</p>
|
|
610
|
+
<p class="auth-foot">No password — credentials never leave the browser.</p>
|
|
89
611
|
</div>
|
|
90
|
-
<button class="btn btn-primary" id="signin-btn" onclick="handleSignIn()">Sign in</button>
|
|
91
|
-
<p class="error-msg" id="error-msg">Invalid email or password.</p>
|
|
92
612
|
</div>
|
|
93
613
|
|
|
94
614
|
<!-- Dashboard -->
|
|
95
615
|
<div class="dashboard" id="dashboard">
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<
|
|
616
|
+
|
|
617
|
+
<div class="page-head">
|
|
618
|
+
<div>
|
|
619
|
+
<h1>Today</h1>
|
|
620
|
+
<p class="lead">Triage, schedule, and ship.</p>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="user-chip">
|
|
623
|
+
<div class="avatar" id="avatar">A</div>
|
|
624
|
+
<span>Signed in as <span class="user-email" id="user-email"></span></span>
|
|
625
|
+
<button class="btn-logout" onclick="handleLogout()">Sign out</button>
|
|
626
|
+
</div>
|
|
99
627
|
</div>
|
|
100
628
|
|
|
101
629
|
<div class="stats-row">
|
|
102
630
|
<div class="stat-card stat-card--active">
|
|
631
|
+
<div class="stat-head"><span class="stat-dot"></span>Active</div>
|
|
103
632
|
<div class="stat-value" id="stat-active">3</div>
|
|
104
|
-
<div class="stat-
|
|
633
|
+
<div class="stat-foot">in flight today</div>
|
|
105
634
|
</div>
|
|
106
635
|
<div class="stat-card stat-card--done">
|
|
636
|
+
<div class="stat-head"><span class="stat-dot"></span>Completed</div>
|
|
107
637
|
<div class="stat-value" id="stat-done">0</div>
|
|
108
|
-
<div class="stat-
|
|
638
|
+
<div class="stat-foot">shipped this week</div>
|
|
109
639
|
</div>
|
|
110
640
|
<div class="stat-card stat-card--overdue">
|
|
641
|
+
<div class="stat-head"><span class="stat-dot"></span>Overdue</div>
|
|
111
642
|
<div class="stat-value" id="stat-overdue">1</div>
|
|
112
|
-
<div class="stat-
|
|
643
|
+
<div class="stat-foot">past due date</div>
|
|
113
644
|
</div>
|
|
114
645
|
</div>
|
|
115
646
|
|
|
116
647
|
<div class="add-task">
|
|
117
|
-
<
|
|
648
|
+
<div class="add-icon">+</div>
|
|
649
|
+
<input type="text" id="new-task" placeholder="Add a new task…" />
|
|
650
|
+
<span class="kbd-hint">Enter</span>
|
|
118
651
|
<button class="btn btn-add" onclick="addTask()">Add</button>
|
|
119
652
|
</div>
|
|
120
653
|
|
|
654
|
+
<div class="chip-row">
|
|
655
|
+
<button class="chip active" data-filter="all">All</button>
|
|
656
|
+
<button class="chip" data-filter="high">High priority</button>
|
|
657
|
+
<button class="chip" data-filter="medium">Medium</button>
|
|
658
|
+
<button class="chip" data-filter="low">Low</button>
|
|
659
|
+
<button class="chip" data-filter="done">Completed</button>
|
|
660
|
+
</div>
|
|
661
|
+
|
|
662
|
+
<div class="list-head">
|
|
663
|
+
<h3>Inbox</h3>
|
|
664
|
+
<span class="list-count" id="list-count">3 tasks</span>
|
|
665
|
+
</div>
|
|
666
|
+
|
|
121
667
|
<ul class="task-list" id="task-list">
|
|
122
|
-
<li class="task-item">
|
|
668
|
+
<li class="task-item" data-priority="high">
|
|
123
669
|
<div class="task-check" onclick="toggleTask(this)"></div>
|
|
124
|
-
<
|
|
670
|
+
<div class="task-body">
|
|
671
|
+
<div class="task-text">Set up CI/CD pipeline for staging</div>
|
|
672
|
+
<div class="task-meta"><span>Due today</span><span class="dot"></span><span>infra</span></div>
|
|
673
|
+
</div>
|
|
125
674
|
<span class="task-priority priority-high">High</span>
|
|
126
675
|
<button class="btn-delete" onclick="deleteTask(this)">Delete</button>
|
|
127
676
|
</li>
|
|
128
|
-
<li class="task-item">
|
|
677
|
+
<li class="task-item" data-priority="medium">
|
|
129
678
|
<div class="task-check" onclick="toggleTask(this)"></div>
|
|
130
|
-
<
|
|
679
|
+
<div class="task-body">
|
|
680
|
+
<div class="task-text">Write API docs for /users endpoint</div>
|
|
681
|
+
<div class="task-meta"><span>Due Friday</span><span class="dot"></span><span>docs</span></div>
|
|
682
|
+
</div>
|
|
131
683
|
<span class="task-priority priority-medium">Medium</span>
|
|
132
684
|
<button class="btn-delete" onclick="deleteTask(this)">Delete</button>
|
|
133
685
|
</li>
|
|
134
|
-
<li class="task-item">
|
|
686
|
+
<li class="task-item" data-priority="low">
|
|
135
687
|
<div class="task-check" onclick="toggleTask(this)"></div>
|
|
136
|
-
<
|
|
688
|
+
<div class="task-body">
|
|
689
|
+
<div class="task-text">Review pull request #142</div>
|
|
690
|
+
<div class="task-meta"><span>No due date</span><span class="dot"></span><span>review</span></div>
|
|
691
|
+
</div>
|
|
137
692
|
<span class="task-priority priority-low">Low</span>
|
|
138
693
|
<button class="btn-delete" onclick="deleteTask(this)">Delete</button>
|
|
139
694
|
</li>
|
|
140
695
|
</ul>
|
|
141
|
-
</div>
|
|
142
696
|
|
|
143
|
-
|
|
697
|
+
<div class="ai-footer">
|
|
698
|
+
<div class="ai-footer-icon">
|
|
699
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg>
|
|
700
|
+
</div>
|
|
701
|
+
<div>
|
|
702
|
+
Built with Claude Code in 90 seconds — single-file HTML, no framework, no backend. Try editing a task or adding a new one.
|
|
703
|
+
</div>
|
|
704
|
+
</div>
|
|
705
|
+
</div>
|
|
144
706
|
</div>
|
|
145
707
|
|
|
708
|
+
<div class="toast" id="toast"><span class="toast-dot"></span><span id="toast-msg"></span></div>
|
|
709
|
+
|
|
146
710
|
<script>
|
|
147
711
|
function handleSignIn() {
|
|
148
712
|
var email = document.getElementById('email').value.trim();
|
|
@@ -154,6 +718,7 @@
|
|
|
154
718
|
document.getElementById('auth').classList.add('hidden');
|
|
155
719
|
document.getElementById('dashboard').classList.add('active');
|
|
156
720
|
document.getElementById('user-email').textContent = email;
|
|
721
|
+
document.getElementById('avatar').textContent = (email[0] || 'A').toUpperCase();
|
|
157
722
|
showToast('Welcome back!');
|
|
158
723
|
}
|
|
159
724
|
|
|
@@ -171,8 +736,13 @@
|
|
|
171
736
|
var list = document.getElementById('task-list');
|
|
172
737
|
var li = document.createElement('li');
|
|
173
738
|
li.className = 'task-item';
|
|
174
|
-
li.
|
|
175
|
-
|
|
739
|
+
li.setAttribute('data-priority', 'medium');
|
|
740
|
+
li.innerHTML =
|
|
741
|
+
'<div class="task-check" onclick="toggleTask(this)"></div>' +
|
|
742
|
+
'<div class="task-body">' +
|
|
743
|
+
'<div class="task-text">' + text.replace(/</g, '<') + '</div>' +
|
|
744
|
+
'<div class="task-meta"><span>Just added</span><span class="dot"></span><span>inbox</span></div>' +
|
|
745
|
+
'</div>' +
|
|
176
746
|
'<span class="task-priority priority-medium">Medium</span>' +
|
|
177
747
|
'<button class="btn-delete" onclick="deleteTask(this)">Delete</button>';
|
|
178
748
|
list.appendChild(li);
|
|
@@ -183,7 +753,8 @@
|
|
|
183
753
|
|
|
184
754
|
function toggleTask(el) {
|
|
185
755
|
el.classList.toggle('done');
|
|
186
|
-
var
|
|
756
|
+
var body = el.nextElementSibling;
|
|
757
|
+
var txt = body.querySelector('.task-text');
|
|
187
758
|
txt.classList.toggle('done');
|
|
188
759
|
updateStats();
|
|
189
760
|
}
|
|
@@ -201,14 +772,37 @@
|
|
|
201
772
|
var active = items.length - done;
|
|
202
773
|
document.getElementById('stat-active').textContent = active;
|
|
203
774
|
document.getElementById('stat-done').textContent = done;
|
|
775
|
+
document.getElementById('list-count').textContent = items.length + (items.length === 1 ? ' task' : ' tasks');
|
|
204
776
|
}
|
|
205
777
|
|
|
206
778
|
function showToast(msg) {
|
|
207
779
|
var t = document.getElementById('toast');
|
|
208
|
-
|
|
780
|
+
document.getElementById('toast-msg').textContent = msg;
|
|
209
781
|
t.classList.add('show');
|
|
210
782
|
setTimeout(function() { t.classList.remove('show'); }, 2000);
|
|
211
783
|
}
|
|
784
|
+
|
|
785
|
+
// Filter chips
|
|
786
|
+
document.querySelectorAll('.chip').forEach(function (chip) {
|
|
787
|
+
chip.addEventListener('click', function () {
|
|
788
|
+
document.querySelectorAll('.chip').forEach(function (c) { c.classList.remove('active'); });
|
|
789
|
+
chip.classList.add('active');
|
|
790
|
+
var filter = chip.getAttribute('data-filter');
|
|
791
|
+
document.querySelectorAll('.task-item').forEach(function (item) {
|
|
792
|
+
var p = item.getAttribute('data-priority');
|
|
793
|
+
var done = item.querySelector('.task-check').classList.contains('done');
|
|
794
|
+
var show = filter === 'all'
|
|
795
|
+
|| (filter === 'done' && done)
|
|
796
|
+
|| (filter === p && !done);
|
|
797
|
+
item.style.display = show ? '' : 'none';
|
|
798
|
+
});
|
|
799
|
+
});
|
|
800
|
+
});
|
|
801
|
+
|
|
802
|
+
// Enter key adds tasks
|
|
803
|
+
document.getElementById('new-task').addEventListener('keydown', function (e) {
|
|
804
|
+
if (e.key === 'Enter') addTask();
|
|
805
|
+
});
|
|
212
806
|
</script>
|
|
213
807
|
</body>
|
|
214
808
|
</html>
|