-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
460 lines (415 loc) · 24.3 KB
/
index.html
File metadata and controls
460 lines (415 loc) · 24.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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="TodoPro CLI - A professional command-line interface for task management with CLI-first design">
<meta name="keywords" content="todo, cli, task management, productivity, command line, ai-agent, automation">
<meta name="author" content="minhdqdev">
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:title" content="TodoPro CLI - Professional Task Management from the Terminal">
<meta property="og:description"
content="A CLI-first task manager. Natural language input, multi-environment support, and built for automation & AI agents.">
<meta property="og:url" content="https://minhdqdev-org.github.io/todopro-cli-web/">
<title>TodoPro CLI - Professional Task Management from the Terminal</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#f97316',
'primary-dark': '#ea580c',
}
}
}
}
</script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
</head>
<body class="bg-slate-950 text-slate-100">
<!-- Navigation -->
<nav class="bg-slate-900 border-b border-slate-800 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center space-x-2">
<i data-lucide="clipboard-list" class="w-6 h-6 text-orange-500"></i>
<span class="text-xl font-bold">TodoPro CLI</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#features" class="text-slate-400 hover:text-slate-100 transition-colors">Features</a>
<a href="#installation" class="text-slate-400 hover:text-slate-100 transition-colors">Install</a>
<a href="#quickstart" class="text-slate-400 hover:text-slate-100 transition-colors">Quick Start</a>
<a href="https://github.com/minhdqdev-org/todopro-cli" target="_blank"
class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition-colors inline-flex items-center space-x-2">
<i data-lucide="github" class="w-4 h-4"></i>
<span>GitHub</span>
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-slate-950 to-slate-900">
<div class="max-w-7xl mx-auto text-center">
<h1
class="text-5xl md:text-6xl font-extrabold mb-6 bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent">
Professional Task Management<br>from the Terminal
</h1>
<p class="text-xl text-slate-400 mb-8 max-w-3xl mx-auto">
A CLI-first task manager designed for developers. Natural language input, multi-environment support, and
built for automation & AI agents.
</p>
<div class="flex justify-center items-center gap-3 mb-8 flex-wrap">
<img src="https://img.shields.io/badge/python-3.12+-orange.svg" alt="Python 3.12+">
<img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT License">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/astral-sh/uv/main/assets/badge/v0.json"
alt="uv">
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-4 max-w-4xl mx-auto mb-12 flex items-center gap-4">
<code class="flex-1 text-left text-emerald-400 text-sm font-mono overflow-x-auto"
id="install-cmd">curl -LsSf https://astral.sh/uv/install.sh | sh && uv tool install git+https://github.com/minhdqdev-org/todopro-cli.git</code>
<button onclick="copyInstallCommand()"
class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition-colors whitespace-nowrap inline-flex items-center space-x-2">
<i data-lucide="clipboard" class="w-4 h-4"></i>
<!-- <span>Copy</span> -->
</button>
</div>
<div class="max-w-4xl mx-auto bg-slate-800 rounded-lg overflow-hidden shadow-2xl">
<div class="bg-slate-900 px-4 py-3 flex items-center gap-2 border-b border-slate-700">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<span class="ml-auto text-sm text-slate-400">todopro</span>
</div>
<div class="p-6 font-mono text-sm space-y-1">
<div class="flex gap-2">
<span class="text-emerald-400">$</span>
<span class="text-sky-400">tp add "Review PR tomorrow at 2pm #work p1" --project Work</span>
</div>
<div class="text-slate-400 pl-6">✓ Task created: Review PR [<span class="text-orange-400">3f</span>]</div>
<div class="text-slate-400 pl-6"> Due: tomorrow 14:00 Priority: P1 Project: Work</div>
<div class="flex gap-2">
<span class="text-emerald-400">$</span>
<span class="text-sky-400">tp today</span>
</div>
<div class="text-slate-400 pl-6">📋 Tasks (2 active)</div>
<div class="text-slate-400 pl-6">🟢 NORMAL</div>
<div class="text-slate-400 pl-6"> ⬜ Stand-up meeting 14:00 · #<span class="text-orange-400">7a</span></div>
<div class="text-slate-400 pl-6"> ⬜ Review PR 14:00 · #<span class="text-orange-400">3f</span></div>
<div class="flex gap-2">
<span class="text-emerald-400">$</span>
<span class="text-sky-400">tp complete 7a</span>
</div>
<div class="text-slate-400 pl-6">✓ Completed: Stand-up meeting</div>
<div class="text-slate-400 pl-6"> To undo: tp reopen 7a</div>
<div class="flex gap-2">
<span class="text-emerald-400">$</span>
<span class="text-sky-400">tp add "Daily report" --json</span>
</div>
<div class="text-slate-400 pl-6">{"id": "uuid...", "content": "Daily report"}</div>
<div class="flex gap-2">
<span class="text-emerald-400">$</span>
<span class="animate-pulse">_</span>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Features</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="zap" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">CLI-First Design</h3>
<p class="text-slate-400">Built for the command line from the ground up. Intuitive for humans,
perfect for automation and AI agents.</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="globe" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">Multi-Environment</h3>
<p class="text-slate-400">Switch seamlessly between dev, staging, and prod contexts with separate
credentials.</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="message-square" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">Natural Language</h3>
<p class="text-slate-400">Create tasks with plain English like "Review PR tomorrow at 2pm #work
@office p1"</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="layout-grid" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">Output Flexibility</h3>
<p class="text-slate-400">Choose your format: JSON, YAML, table, or custom. Perfect for automation
and scripting.</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="palette" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">Professional UX</h3>
<p class="text-slate-400">Rich terminal UI with colors, progress indicators, and helpful messages.
</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="refresh-cw" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">Context-Aware</h3>
<p class="text-slate-400">Maintains authentication state and user preferences. Never lose your
session.</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="lock" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">End-to-End Encryption</h3>
<p class="text-slate-400">Client-side encryption with AES-256-GCM. Your data is encrypted before it
reaches the server. Zero-knowledge architecture.</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="bot" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">AI-Agent Friendly</h3>
<p class="text-slate-400">JSON output, semantic exit codes, and idempotent operations. Perfect for
automation and AI workflows.</p>
</div>
<div
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1">
<i data-lucide="folder-open" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-3">Project Management</h3>
<p class="text-slate-400">Organize tasks into projects. Default <strong>Inbox</strong> project always exists. Project names are unique (case-insensitive).</p>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section id="installation" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-950">
<div class="max-w-5xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Installation</h2>
<div class="space-y-6">
<div class="bg-slate-800 border-2 border-orange-500 rounded-lg p-6 relative">
<div
class="absolute -top-3 right-6 bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">
Recommended</div>
<h3 class="text-xl font-bold mb-2 flex items-center gap-2">
<i data-lucide="download" class="w-5 h-5 text-orange-500"></i>
One-Liner Install
</h3>
<p class="text-slate-400 mb-4">Installs uv and todopro-cli in one command:</p>
<div class="bg-slate-900 border border-slate-700 rounded-lg p-4 relative">
<code class="text-emerald-400 text-sm font-mono block overflow-x-auto">curl -LsSf https://astral.sh/uv/install.sh | sh && \
uv tool install git+https://github.com/minhdqdev-org/todopro-cli.git</code>
<button onclick="copyCode(this)"
class="absolute top-2 right-2 bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition-colors inline-flex items-center gap-1">
<i data-lucide="clipboard" class="w-3 h-3"></i>
<!-- <span>Copy</span> -->
</button>
</div>
</div>
<div class="bg-slate-800 border border-slate-700 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2 flex items-center gap-2">
<i data-lucide="folder-git" class="w-5 h-5 text-orange-500"></i>
From Source
</h3>
<p class="text-slate-400 mb-4">Clone and install locally:</p>
<div class="bg-slate-900 border border-slate-700 rounded-lg p-4 relative">
<code class="text-emerald-400 text-sm font-mono block overflow-x-auto">git clone https://github.com/minhdqdev-org/todopro-cli.git
cd todopro-cli
uv tool install --from . todopro-cli</code>
<button onclick="copyCode(this)"
class="absolute top-2 right-2 bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition-colors inline-flex items-center gap-1">
<i data-lucide="clipboard" class="w-3 h-3"></i>
<!-- <span>Copy</span> -->
</button>
</div>
</div>
<div class="bg-slate-800 border border-slate-700 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2 flex items-center gap-2">
<i data-lucide="arrow-up-circle" class="w-5 h-5 text-orange-500"></i>
Update
</h3>
<p class="text-slate-400 mb-4">Keep your installation up to date:</p>
<div class="bg-slate-900 border border-slate-700 rounded-lg p-4 relative">
<code
class="text-emerald-400 text-sm font-mono block overflow-x-auto">uv tool upgrade todopro-cli</code>
<button onclick="copyCode(this)"
class="absolute top-2 right-2 bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded text-sm transition-colors inline-flex items-center gap-1">
<i data-lucide="clipboard" class="w-3 h-3"></i>
<!-- <span>Copy</span> -->
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Quick Start Section -->
<section id="quickstart" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Quick Start</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="min-w-0">
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-lucide="play-circle" class="w-5 h-5 text-orange-500"></i>
Basic Usage
</h3>
<div class="bg-slate-800 border border-slate-700 rounded-lg p-4 overflow-x-auto">
<code class="text-emerald-400 text-sm font-mono block whitespace-pre"># Quick add a task (natural language)
tp add "Buy milk tomorrow at 2pm #groceries"
# Add to a specific project (overrides NL)
tp add "Stand-up daily at 9am" --project Work
# See what's due today (unique short suffix shown)
tp today
# Complete by suffix shown in brackets [3f]
tp complete 3f
# Undo a completion
tp reopen 3f
# Edit a task interactively
tp edit <id></code>
</div>
</div>
<div class="min-w-0">
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-lucide="settings" class="w-5 h-5 text-orange-500"></i>
Context Management
</h3>
<div class="bg-slate-800 border border-slate-700 rounded-lg p-4 overflow-x-auto">
<code class="text-emerald-400 text-sm font-mono block whitespace-pre"># List contexts (JSON output)
tp context list --json
# Create a local context
tp context create dev-local --type local
# Switch active context
tp context use dev-local
# Delete a context
tp context delete dev-local
# At most 10 contexts shown by default
tp context list --limit 5</code>
</div>
</div>
<div class="min-w-0">
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-lucide="hash" class="w-5 h-5 text-orange-500"></i>
Task ID Shortcuts
</h3>
<div class="bg-slate-800 border border-slate-700 rounded-lg p-4 overflow-x-auto">
<code class="text-emerald-400 text-sm font-mono block whitespace-pre"># Suffix is shown in brackets [3f] by tp today
# Globally unique — no ambiguity
tp complete 3f # complete by suffix
tp reopen 3f # undo completion
tp task get 3f # get task details
# All commands accept full UUID too
tp edit 00000000-0000-0000-0000-000000000000</code>
</div>
</div>
<div class="min-w-0">
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-lucide="sparkles" class="w-5 h-5 text-orange-500"></i>
Advanced Features
</h3>
<div class="bg-slate-800 border border-slate-700 rounded-lg p-4 overflow-x-auto">
<code class="text-emerald-400 text-sm font-mono block whitespace-pre"># All commands support JSON output
tp add "task" --json
tp add "task" -o json
tp project list --json
tp context list --json --limit 5
# Project management (Inbox is always default)
tp project create Work
tp project list # pretty list
tp project archive <id>
# Edit a task with flags
tp edit <id> --content "New title" --project Work
# Get help
tp --help</code>
</div>
</div>
</div>
</div>
</section>
<!-- Documentation Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-950">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16">Documentation</h2>
<div class="grid md:grid-cols-3 gap-6">
<a href="https://github.com/minhdqdev-org/todopro-cli/blob/main/README.md" target="_blank"
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1 block">
<i data-lucide="book-open" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Full Documentation</h3>
<p class="text-slate-400">Complete guide and API reference</p>
</a>
<a href="https://github.com/minhdqdev-org/todopro-cli/blob/main/docs/INSTALLATION.md" target="_blank"
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1 block">
<i data-lucide="package" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Installation Guide</h3>
<p class="text-slate-400">Detailed installation and troubleshooting</p>
</a>
<a href="https://github.com/minhdqdev-org/todopro-cli/blob/main/docs/RELEASE.md" target="_blank"
class="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-orange-500 transition-all hover:-translate-y-1 block">
<i data-lucide="rocket" class="w-12 h-12 text-orange-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Release Process</h3>
<p class="text-slate-400">How to create and publish releases</p>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-900 border-t border-slate-800 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-2 gap-8 mb-8">
<div>
<div class="flex items-center gap-2 mb-4">
<i data-lucide="clipboard-list" class="w-6 h-6 text-orange-500"></i>
<h4 class="text-xl font-bold">TodoPro CLI</h4>
</div>
<p class="text-slate-400">A professional command-line interface for TodoPro task management system.
</p>
</div>
<div>
<h4 class="text-xl font-bold mb-4">Links</h4>
<ul class="space-y-2">
<li>
<a href="https://github.com/minhdqdev-org/todopro-cli" target="_blank"
class="text-slate-400 hover:text-orange-500 transition-colors inline-flex items-center gap-2">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub Repository
</a>
</li>
<li>
<a href="https://github.com/minhdqdev-org/todopro-cli/issues" target="_blank"
class="text-slate-400 hover:text-orange-500 transition-colors inline-flex items-center gap-2">
<i data-lucide="bug" class="w-4 h-4"></i>
Report Issues
</a>
</li>
<li>
<a href="https://github.com/minhdqdev-org/todopro-cli/blob/main/LICENSE" target="_blank"
class="text-slate-400 hover:text-orange-500 transition-colors inline-flex items-center gap-2">
<i data-lucide="scale" class="w-4 h-4"></i>
MIT License
</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-slate-800 pt-8 text-center">
<p class="text-slate-400 text-sm">© 2026 minhdqdev. Licensed under MIT License.</p>
</div>
</div>
</footer>
<script src="assets/js/main.js"></script>
<script>
// Initialize Lucide icons
lucide.createIcons();
</script>
</body>
</html>