codekanban 0.19.0 → 0.20.0
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/.dockerignore +91 -0
- package/package.json +6 -6
- package/packages/node-sdk/README.md +39 -0
- package/packages/node-sdk/package.json +37 -0
- package/packages/node-sdk/src/cli.js +229 -0
- package/packages/node-sdk/src/client.js +323 -0
- package/packages/node-sdk/src/command-builder.js +129 -0
- package/packages/node-sdk/src/errors.js +28 -0
- package/packages/node-sdk/src/index.js +17 -0
- package/packages/node-sdk/src/terminal-connection.js +133 -0
- package/packages/node-sdk/src/utils.js +99 -0
- package/skills/codekanban-project-session/agents/openai.yaml +4 -0
- package/skills/codekanban-project-session/scripts/run-codekanban-session.mjs +7 -0
- package/tools/claude-terminal-analyzer/README.md +162 -0
- package/tools/claude-terminal-analyzer/build.bat +9 -0
- package/website/index.html +756 -0
- package/website/zh.html +756 -0
|
@@ -0,0 +1,756 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="scroll-smooth">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Code Kanban - AI-Powered Programming Productivity Tool</title>
|
|
7
|
+
<meta name="description" content="Unified terminal management, intelligent AI assistant status detection, visual task kanban. Boost your AI programming efficiency by 10x.">
|
|
8
|
+
|
|
9
|
+
<!-- Tailwind CSS CDN -->
|
|
10
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
11
|
+
|
|
12
|
+
<!-- Alpine.js CDN -->
|
|
13
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
14
|
+
|
|
15
|
+
<!-- Google Fonts -->
|
|
16
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
17
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
18
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
19
|
+
|
|
20
|
+
<!-- Tailwind Config -->
|
|
21
|
+
<script>
|
|
22
|
+
tailwind.config = {
|
|
23
|
+
theme: {
|
|
24
|
+
extend: {
|
|
25
|
+
fontFamily: {
|
|
26
|
+
sans: ['Inter', 'sans-serif'],
|
|
27
|
+
},
|
|
28
|
+
colors: {
|
|
29
|
+
primary: {
|
|
30
|
+
50: '#f0f5ff',
|
|
31
|
+
100: '#e0ebff',
|
|
32
|
+
200: '#c7d9ff',
|
|
33
|
+
300: '#a3bfff',
|
|
34
|
+
400: '#7a9bff',
|
|
35
|
+
500: '#5b75ff',
|
|
36
|
+
600: '#4a54f5',
|
|
37
|
+
700: '#3d42e0',
|
|
38
|
+
800: '#3538b5',
|
|
39
|
+
900: '#31358f',
|
|
40
|
+
},
|
|
41
|
+
accent: {
|
|
42
|
+
purple: '#a855f7',
|
|
43
|
+
pink: '#ec4899',
|
|
44
|
+
cyan: '#22d3ee',
|
|
45
|
+
emerald: '#10b981',
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
animation: {
|
|
49
|
+
'float': 'float 6s ease-in-out infinite',
|
|
50
|
+
'float-delayed': 'float 6s ease-in-out 2s infinite',
|
|
51
|
+
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
52
|
+
'gradient': 'gradient 8s ease infinite',
|
|
53
|
+
},
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
</script>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
@keyframes float {
|
|
61
|
+
0%, 100% { transform: translateY(0px); }
|
|
62
|
+
50% { transform: translateY(-20px); }
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes gradient {
|
|
66
|
+
0%, 100% { background-position: 0% 50%; }
|
|
67
|
+
50% { background-position: 100% 50%; }
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.gradient-bg {
|
|
71
|
+
background: linear-gradient(-45deg, #667eea, #764ba2, #6B8DD6, #8E54E9);
|
|
72
|
+
background-size: 400% 400%;
|
|
73
|
+
animation: gradient 15s ease infinite;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.glass-card {
|
|
77
|
+
background: rgba(255, 255, 255, 0.1);
|
|
78
|
+
backdrop-filter: blur(10px);
|
|
79
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.feature-card {
|
|
83
|
+
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.95) 100%);
|
|
84
|
+
transition: all 0.3s ease;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.feature-card:hover {
|
|
88
|
+
transform: translateY(-8px);
|
|
89
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.blob-1 {
|
|
93
|
+
position: absolute;
|
|
94
|
+
width: 600px;
|
|
95
|
+
height: 600px;
|
|
96
|
+
background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.2));
|
|
97
|
+
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
|
98
|
+
filter: blur(40px);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.blob-2 {
|
|
102
|
+
position: absolute;
|
|
103
|
+
width: 400px;
|
|
104
|
+
height: 400px;
|
|
105
|
+
background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(59, 130, 246, 0.2));
|
|
106
|
+
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
|
107
|
+
filter: blur(40px);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.illustration-placeholder {
|
|
111
|
+
background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 50%, #fce7f3 100%);
|
|
112
|
+
border: 3px dashed #a5b4fc;
|
|
113
|
+
display: flex;
|
|
114
|
+
flex-direction: column;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
color: #6366f1;
|
|
118
|
+
font-weight: 500;
|
|
119
|
+
}
|
|
120
|
+
</style>
|
|
121
|
+
</head>
|
|
122
|
+
<body class="font-sans antialiased text-gray-800 overflow-x-hidden">
|
|
123
|
+
|
|
124
|
+
<!-- Navigation -->
|
|
125
|
+
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-gray-100" x-data="{ mobileMenu: false }">
|
|
126
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
127
|
+
<div class="flex justify-between items-center h-16">
|
|
128
|
+
<div class="flex items-center space-x-3">
|
|
129
|
+
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-accent-purple flex items-center justify-center">
|
|
130
|
+
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
131
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
|
|
132
|
+
</svg>
|
|
133
|
+
</div>
|
|
134
|
+
<span class="text-xl font-bold bg-gradient-to-r from-primary-600 to-accent-purple bg-clip-text text-transparent">Code Kanban</span>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="hidden md:flex items-center space-x-8">
|
|
138
|
+
<a href="#features" class="text-gray-600 hover:text-primary-600 transition">Features</a>
|
|
139
|
+
<a href="#ai-detect" class="text-gray-600 hover:text-primary-600 transition">AI Detection</a>
|
|
140
|
+
<a href="#workflow" class="text-gray-600 hover:text-primary-600 transition">Workflow</a>
|
|
141
|
+
<a href="https://github.com/fy0/CodeKanban" target="_blank" class="text-gray-600 hover:text-primary-600 transition flex items-center gap-1">
|
|
142
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
143
|
+
GitHub
|
|
144
|
+
</a>
|
|
145
|
+
<!-- Language Switcher -->
|
|
146
|
+
<a href="zh.html" class="text-gray-500 hover:text-primary-600 transition text-sm font-medium flex items-center gap-1">
|
|
147
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
148
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
|
|
149
|
+
</svg>
|
|
150
|
+
中文
|
|
151
|
+
</a>
|
|
152
|
+
<a href="#download" class="px-5 py-2.5 bg-gradient-to-r from-primary-500 to-accent-purple text-white rounded-full font-medium hover:shadow-lg hover:shadow-primary-500/30 transition-all">
|
|
153
|
+
Download
|
|
154
|
+
</a>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<button @click="mobileMenu = !mobileMenu" class="md:hidden p-2">
|
|
158
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
159
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
160
|
+
</svg>
|
|
161
|
+
</button>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<!-- Mobile Menu -->
|
|
166
|
+
<div x-show="mobileMenu" x-transition class="md:hidden bg-white border-t border-gray-100">
|
|
167
|
+
<div class="px-4 py-4 space-y-3">
|
|
168
|
+
<a href="#features" class="block text-gray-600 hover:text-primary-600">Features</a>
|
|
169
|
+
<a href="#ai-detect" class="block text-gray-600 hover:text-primary-600">AI Detection</a>
|
|
170
|
+
<a href="#workflow" class="block text-gray-600 hover:text-primary-600">Workflow</a>
|
|
171
|
+
<a href="zh.html" class="block text-gray-500 hover:text-primary-600">中文</a>
|
|
172
|
+
<a href="#download" class="block text-center px-5 py-2.5 bg-gradient-to-r from-primary-500 to-accent-purple text-white rounded-full font-medium">Download</a>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</nav>
|
|
176
|
+
|
|
177
|
+
<!-- Hero Section -->
|
|
178
|
+
<section class="relative min-h-screen flex items-center pt-16 overflow-hidden">
|
|
179
|
+
<!-- Background decorations -->
|
|
180
|
+
<div class="blob-1 -top-32 -right-32 animate-float"></div>
|
|
181
|
+
<div class="blob-2 top-1/2 -left-32 animate-float-delayed"></div>
|
|
182
|
+
|
|
183
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
|
|
184
|
+
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
185
|
+
<div class="space-y-8">
|
|
186
|
+
<div class="inline-flex items-center px-4 py-2 rounded-full bg-primary-50 text-primary-700 text-sm font-medium">
|
|
187
|
+
<span class="w-2 h-2 rounded-full bg-accent-emerald mr-2 animate-pulse"></span>
|
|
188
|
+
The AI Era Productivity Revolution
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<h1 class="text-5xl md:text-6xl font-extrabold leading-tight">
|
|
192
|
+
<span class="bg-gradient-to-r from-gray-900 via-primary-800 to-gray-900 bg-clip-text text-transparent">
|
|
193
|
+
Boost AI Programming
|
|
194
|
+
</span>
|
|
195
|
+
<br>
|
|
196
|
+
<span class="bg-gradient-to-r from-primary-500 via-accent-purple to-accent-pink bg-clip-text text-transparent">
|
|
197
|
+
Efficiency by 10x
|
|
198
|
+
</span>
|
|
199
|
+
</h1>
|
|
200
|
+
|
|
201
|
+
<p class="text-xl text-gray-600 leading-relaxed max-w-lg">
|
|
202
|
+
Unified multi-project terminal management, intelligent AI assistant status detection, visual task kanban.
|
|
203
|
+
<span class="text-primary-600 font-medium">Ready to use, single-file deployment.</span>
|
|
204
|
+
</p>
|
|
205
|
+
|
|
206
|
+
<div class="flex flex-wrap gap-4">
|
|
207
|
+
<a href="#download" class="group px-8 py-4 bg-gradient-to-r from-primary-500 to-accent-purple text-white rounded-2xl font-semibold text-lg hover:shadow-2xl hover:shadow-primary-500/30 transition-all flex items-center gap-2">
|
|
208
|
+
Free Download
|
|
209
|
+
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
210
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
211
|
+
</svg>
|
|
212
|
+
</a>
|
|
213
|
+
<a href="#features" class="px-8 py-4 bg-white text-gray-700 rounded-2xl font-semibold text-lg border-2 border-gray-200 hover:border-primary-300 hover:text-primary-600 transition-all">
|
|
214
|
+
Learn More
|
|
215
|
+
</a>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<div class="flex items-center gap-6 pt-4">
|
|
219
|
+
<div class="flex -space-x-2">
|
|
220
|
+
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 border-2 border-white"></div>
|
|
221
|
+
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-green-600 border-2 border-white"></div>
|
|
222
|
+
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 border-2 border-white"></div>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="text-sm text-gray-500">
|
|
225
|
+
<span class="font-semibold text-gray-700">1000+</span> developers are using it
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<!-- Hero Illustration Placeholder -->
|
|
231
|
+
<div class="relative">
|
|
232
|
+
<div class="illustration-placeholder w-full aspect-[4/3] rounded-3xl shadow-2xl">
|
|
233
|
+
<svg class="w-16 h-16 mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
234
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
235
|
+
</svg>
|
|
236
|
+
<span class="text-lg">[PLACEHOLDER: Hero Illustration]</span>
|
|
237
|
+
<span class="text-sm mt-2 opacity-70">Suggestion: Developer using Code Kanban scene</span>
|
|
238
|
+
<span class="text-sm opacity-70">Style: Illustration, bright colors, person+computer+kanban elements</span>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<!-- Floating cards decoration -->
|
|
242
|
+
<div class="absolute -top-4 -right-4 w-24 h-24 bg-white rounded-2xl shadow-xl p-4 animate-float">
|
|
243
|
+
<div class="w-full h-full rounded-lg bg-gradient-to-br from-accent-emerald to-green-400 flex items-center justify-center">
|
|
244
|
+
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
245
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
246
|
+
</svg>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<div class="absolute -bottom-4 -left-4 w-32 h-20 bg-white rounded-2xl shadow-xl p-3 animate-float-delayed">
|
|
251
|
+
<div class="flex items-center gap-2 mb-2">
|
|
252
|
+
<div class="w-3 h-3 rounded-full bg-accent-emerald"></div>
|
|
253
|
+
<span class="text-xs font-medium text-gray-600">AI Completed</span>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="text-sm font-semibold text-gray-800">Claude Code</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</section>
|
|
261
|
+
|
|
262
|
+
<!-- Features Section -->
|
|
263
|
+
<section id="features" class="py-24 bg-gradient-to-b from-gray-50 to-white relative">
|
|
264
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
265
|
+
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
266
|
+
<span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">Core Features</span>
|
|
267
|
+
<h2 class="text-4xl md:text-5xl font-bold mt-4 mb-6 bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
|
|
268
|
+
A Workbench Built for AI Programming
|
|
269
|
+
</h2>
|
|
270
|
+
<p class="text-xl text-gray-600">
|
|
271
|
+
Integrates terminal management, task kanban, and AI status monitoring, letting you focus on coding itself
|
|
272
|
+
</p>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
276
|
+
<!-- Feature 1: Multi-Terminal -->
|
|
277
|
+
<div class="feature-card rounded-3xl p-8 shadow-lg">
|
|
278
|
+
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center mb-6">
|
|
279
|
+
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
280
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
281
|
+
</svg>
|
|
282
|
+
</div>
|
|
283
|
+
<h3 class="text-xl font-bold mb-3 text-gray-900">Multi-Terminal Management</h3>
|
|
284
|
+
<p class="text-gray-600 leading-relaxed">
|
|
285
|
+
Manage all project terminals in one interface. Supports multiple tabs, drag-and-drop sorting, press <kbd class="px-2 py-1 bg-gray-100 rounded text-sm font-mono">`</kbd> to instantly open the terminal panel.
|
|
286
|
+
</p>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
<!-- Feature 2: Kanban -->
|
|
290
|
+
<div class="feature-card rounded-3xl p-8 shadow-lg">
|
|
291
|
+
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-400 flex items-center justify-center mb-6">
|
|
292
|
+
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
293
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
|
|
294
|
+
</svg>
|
|
295
|
+
</div>
|
|
296
|
+
<h3 class="text-xl font-bold mb-3 text-gray-900">Visual Task Kanban</h3>
|
|
297
|
+
<p class="text-gray-600 leading-relaxed">
|
|
298
|
+
Kanban-style task management with drag-and-drop status changes. Tasks can be linked to terminals and Git branches at a glance.
|
|
299
|
+
</p>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<!-- Feature 3: AI Session History -->
|
|
303
|
+
<div class="feature-card rounded-3xl p-8 shadow-lg">
|
|
304
|
+
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-400 flex items-center justify-center mb-6">
|
|
305
|
+
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
306
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
307
|
+
</svg>
|
|
308
|
+
</div>
|
|
309
|
+
<h3 class="text-xl font-bold mb-3 text-gray-900">AI Session History</h3>
|
|
310
|
+
<p class="text-gray-600 leading-relaxed">
|
|
311
|
+
Automatically records all conversations with AI tools. One-click to trace code modification history and quickly locate any AI interaction.
|
|
312
|
+
</p>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<!-- Feature 4: Worktree -->
|
|
316
|
+
<div class="feature-card rounded-3xl p-8 shadow-lg">
|
|
317
|
+
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-500 to-amber-400 flex items-center justify-center mb-6">
|
|
318
|
+
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
319
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
|
320
|
+
</svg>
|
|
321
|
+
</div>
|
|
322
|
+
<h3 class="text-xl font-bold mb-3 text-gray-900">Git Worktree Management</h3>
|
|
323
|
+
<p class="text-gray-600 leading-relaxed">
|
|
324
|
+
Visual Git Worktree branch management. Create, merge, and delete branches easily for parallel multi-task development.
|
|
325
|
+
</p>
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
<!-- Feature 5: Notes -->
|
|
329
|
+
<div class="feature-card rounded-3xl p-8 shadow-lg">
|
|
330
|
+
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-rose-500 to-pink-400 flex items-center justify-center mb-6">
|
|
331
|
+
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
332
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
|
333
|
+
</svg>
|
|
334
|
+
</div>
|
|
335
|
+
<h3 class="text-xl font-bold mb-3 text-gray-900">Multi-Tab Notes</h3>
|
|
336
|
+
<p class="text-gray-600 leading-relaxed">
|
|
337
|
+
Press <kbd class="px-2 py-1 bg-gray-100 rounded text-sm font-mono">1</kbd> to open notes instantly. Supports project/global notes switching, image pasting, and auto-save.
|
|
338
|
+
</p>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<!-- Feature 6: Single File Deploy -->
|
|
342
|
+
<div class="feature-card rounded-3xl p-8 shadow-lg">
|
|
343
|
+
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-400 flex items-center justify-center mb-6">
|
|
344
|
+
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
345
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
|
|
346
|
+
</svg>
|
|
347
|
+
</div>
|
|
348
|
+
<h3 class="text-xl font-bold mb-3 text-gray-900">Ready to Use</h3>
|
|
349
|
+
<p class="text-gray-600 leading-relaxed">
|
|
350
|
+
Single-file deployment, double-click to run. No database or other dependencies required. Supports Windows/macOS/Linux.
|
|
351
|
+
</p>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
</section>
|
|
356
|
+
|
|
357
|
+
<!-- AI Detection Highlight Section -->
|
|
358
|
+
<section id="ai-detect" class="py-24 relative overflow-hidden">
|
|
359
|
+
<div class="absolute inset-0 gradient-bg opacity-5"></div>
|
|
360
|
+
<div class="blob-1 top-0 right-0 opacity-30"></div>
|
|
361
|
+
|
|
362
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
363
|
+
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
364
|
+
<div class="order-2 lg:order-1">
|
|
365
|
+
<!-- AI Detection Illustration Placeholder -->
|
|
366
|
+
<div class="illustration-placeholder w-full aspect-square rounded-3xl shadow-2xl">
|
|
367
|
+
<svg class="w-20 h-20 mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
368
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
369
|
+
</svg>
|
|
370
|
+
<span class="text-lg">[PLACEHOLDER: AI Status Detection Illustration]</span>
|
|
371
|
+
<span class="text-sm mt-2 opacity-70 text-center px-4">Suggestion: Visualization of different AI assistant states</span>
|
|
372
|
+
<span class="text-sm opacity-70 text-center px-4">Include: Working(gear), Waiting approval(question mark), Completed(checkmark)</span>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
|
|
376
|
+
<div class="order-1 lg:order-2 space-y-8">
|
|
377
|
+
<div class="inline-flex items-center px-4 py-2 rounded-full bg-accent-purple/10 text-accent-purple text-sm font-medium">
|
|
378
|
+
<span class="w-2 h-2 rounded-full bg-accent-purple mr-2 animate-pulse"></span>
|
|
379
|
+
Core Highlight
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
<h2 class="text-4xl md:text-5xl font-bold leading-tight">
|
|
383
|
+
<span class="bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
|
|
384
|
+
Intelligent Detection of
|
|
385
|
+
</span>
|
|
386
|
+
<br>
|
|
387
|
+
<span class="bg-gradient-to-r from-accent-purple to-accent-pink bg-clip-text text-transparent">
|
|
388
|
+
AI Assistant Status
|
|
389
|
+
</span>
|
|
390
|
+
</h2>
|
|
391
|
+
|
|
392
|
+
<p class="text-xl text-gray-600 leading-relaxed">
|
|
393
|
+
Automatically identifies Claude Code, Codex and other AI programming assistants, monitors their working status in real-time, and intelligently notifies you at critical moments.
|
|
394
|
+
</p>
|
|
395
|
+
|
|
396
|
+
<div class="space-y-4">
|
|
397
|
+
<div class="flex items-start gap-4 p-4 bg-white rounded-2xl shadow-md">
|
|
398
|
+
<div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center flex-shrink-0">
|
|
399
|
+
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
400
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
401
|
+
</svg>
|
|
402
|
+
</div>
|
|
403
|
+
<div>
|
|
404
|
+
<h4 class="font-semibold text-gray-900">Working</h4>
|
|
405
|
+
<p class="text-gray-600 text-sm">Automatically marked when AI is executing a task, so you can see which terminals are busy at a glance</p>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
|
|
409
|
+
<div class="flex items-start gap-4 p-4 bg-white rounded-2xl shadow-md">
|
|
410
|
+
<div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0">
|
|
411
|
+
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
412
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
413
|
+
</svg>
|
|
414
|
+
</div>
|
|
415
|
+
<div>
|
|
416
|
+
<h4 class="font-semibold text-gray-900">Waiting for Approval</h4>
|
|
417
|
+
<p class="text-gray-600 text-sm">Instant notification when AI needs your confirmation, never miss any important operations</p>
|
|
418
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
|
|
421
|
+
<div class="flex items-start gap-4 p-4 bg-white rounded-2xl shadow-md">
|
|
422
|
+
<div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
|
423
|
+
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
424
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
425
|
+
</svg>
|
|
426
|
+
</div>
|
|
427
|
+
<div>
|
|
428
|
+
<h4 class="font-semibold text-gray-900">Task Completed</h4>
|
|
429
|
+
<p class="text-gray-600 text-sm">Automatic notification when AI finishes, the top-right reminder bar shows everything clearly</p>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
</section>
|
|
437
|
+
|
|
438
|
+
<!-- Workflow Section -->
|
|
439
|
+
<section id="workflow" class="py-24 bg-gradient-to-b from-white to-gray-50">
|
|
440
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
441
|
+
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
442
|
+
<span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">Workflow</span>
|
|
443
|
+
<h2 class="text-4xl md:text-5xl font-bold mt-4 mb-6 bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
|
|
444
|
+
Efficient AI Programming Workflow
|
|
445
|
+
</h2>
|
|
446
|
+
<p class="text-xl text-gray-600">
|
|
447
|
+
From opening a project to completing tasks, Code Kanban makes every step smoother
|
|
448
|
+
</p>
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
<div class="relative">
|
|
452
|
+
<!-- Timeline line -->
|
|
453
|
+
<div class="hidden lg:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary-200 via-accent-purple/30 to-accent-pink/30 rounded-full"></div>
|
|
454
|
+
|
|
455
|
+
<div class="space-y-12 lg:space-y-24">
|
|
456
|
+
<!-- Step 1 -->
|
|
457
|
+
<div class="relative flex flex-col lg:flex-row items-center gap-8">
|
|
458
|
+
<div class="lg:w-1/2 lg:pr-16 lg:text-right">
|
|
459
|
+
<div class="bg-white rounded-3xl p-8 shadow-xl">
|
|
460
|
+
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary-500 text-white font-bold text-xl mb-4">1</div>
|
|
461
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">Open Project Workspace</h3>
|
|
462
|
+
<p class="text-gray-600">Select your project to see the task kanban and all related terminals. Everything is well organized.</p>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
<div class="hidden lg:flex items-center justify-center w-8 h-8 rounded-full bg-primary-500 text-white z-10">
|
|
466
|
+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="4"/></svg>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="lg:w-1/2 lg:pl-16">
|
|
469
|
+
<div class="illustration-placeholder w-full aspect-video rounded-2xl">
|
|
470
|
+
<span class="text-sm">[PLACEHOLDER: Project Workspace Screenshot]</span>
|
|
471
|
+
<span class="text-xs mt-1 opacity-70">Show kanban + terminal panel overall interface</span>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<!-- Step 2 -->
|
|
477
|
+
<div class="relative flex flex-col lg:flex-row-reverse items-center gap-8">
|
|
478
|
+
<div class="lg:w-1/2 lg:pl-16 lg:text-left">
|
|
479
|
+
<div class="bg-white rounded-3xl p-8 shadow-xl">
|
|
480
|
+
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent-purple text-white font-bold text-xl mb-4">2</div>
|
|
481
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">Launch AI Assistant to Start Coding</h3>
|
|
482
|
+
<p class="text-gray-600">Start Claude Code or Codex in the terminal, the system automatically detects and begins monitoring status.</p>
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="hidden lg:flex items-center justify-center w-8 h-8 rounded-full bg-accent-purple text-white z-10">
|
|
486
|
+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="4"/></svg>
|
|
487
|
+
</div>
|
|
488
|
+
<div class="lg:w-1/2 lg:pr-16">
|
|
489
|
+
<div class="illustration-placeholder w-full aspect-video rounded-2xl">
|
|
490
|
+
<span class="text-sm">[PLACEHOLDER: AI Assistant in Terminal]</span>
|
|
491
|
+
<span class="text-xs mt-1 opacity-70">Show Claude Code running in terminal</span>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
|
|
496
|
+
<!-- Step 3 -->
|
|
497
|
+
<div class="relative flex flex-col lg:flex-row items-center gap-8">
|
|
498
|
+
<div class="lg:w-1/2 lg:pr-16 lg:text-right">
|
|
499
|
+
<div class="bg-white rounded-3xl p-8 shadow-xl">
|
|
500
|
+
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent-pink text-white font-bold text-xl mb-4">3</div>
|
|
501
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">Real-time Notifications, Never Miss a Status</h3>
|
|
502
|
+
<p class="text-gray-600">Instant reminder in the top-right corner when AI completes a task or needs approval. You can safely switch to other windows to work.</p>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="hidden lg:flex items-center justify-center w-8 h-8 rounded-full bg-accent-pink text-white z-10">
|
|
506
|
+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="4"/></svg>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="lg:w-1/2 lg:pl-16">
|
|
509
|
+
<div class="illustration-placeholder w-full aspect-video rounded-2xl">
|
|
510
|
+
<span class="text-sm">[PLACEHOLDER: Notification Effect]</span>
|
|
511
|
+
<span class="text-xs mt-1 opacity-70">Show top-right AI status notification bar</span>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</section>
|
|
519
|
+
|
|
520
|
+
<!-- Testimonials / Use Cases -->
|
|
521
|
+
<section class="py-24 bg-gradient-to-br from-primary-900 via-primary-800 to-purple-900 text-white relative overflow-hidden">
|
|
522
|
+
<div class="blob-2 -top-32 -right-32 opacity-20"></div>
|
|
523
|
+
<div class="blob-1 -bottom-32 -left-32 opacity-20"></div>
|
|
524
|
+
|
|
525
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
526
|
+
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
527
|
+
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
|
528
|
+
For All AI Programming Scenarios
|
|
529
|
+
</h2>
|
|
530
|
+
<p class="text-xl text-primary-100">
|
|
531
|
+
Whether you're an individual developer or a team, Code Kanban boosts efficiency
|
|
532
|
+
</p>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<div class="grid md:grid-cols-3 gap-8">
|
|
536
|
+
<div class="glass-card rounded-3xl p-8">
|
|
537
|
+
<div class="text-4xl mb-4">🚀</div>
|
|
538
|
+
<h3 class="text-xl font-bold mb-3">Personal Productivity</h3>
|
|
539
|
+
<p class="text-primary-100">
|
|
540
|
+
Run multiple Claude Code sessions simultaneously, the system automatically tracks each task's progress. Never forget a waiting AI response again.
|
|
541
|
+
</p>
|
|
542
|
+
</div>
|
|
543
|
+
|
|
544
|
+
<div class="glass-card rounded-3xl p-8">
|
|
545
|
+
<div class="text-4xl mb-4">🎯</div>
|
|
546
|
+
<h3 class="text-xl font-bold mb-3">Multi-Project Management</h3>
|
|
547
|
+
<p class="text-primary-100">
|
|
548
|
+
Manage terminals and tasks for multiple projects at once. Worktree support lets you quickly switch between branches while keeping context clear.
|
|
549
|
+
</p>
|
|
550
|
+
</div>
|
|
551
|
+
|
|
552
|
+
<div class="glass-card rounded-3xl p-8">
|
|
553
|
+
<div class="text-4xl mb-4">📝</div>
|
|
554
|
+
<h3 class="text-xl font-bold mb-3">AI Conversation Records</h3>
|
|
555
|
+
<p class="text-primary-100">
|
|
556
|
+
Automatically saves all AI session history. Need to trace a code change? Just click on history, everything is clear at a glance.
|
|
557
|
+
</p>
|
|
558
|
+
</div>
|
|
559
|
+
</div>
|
|
560
|
+
</div>
|
|
561
|
+
</section>
|
|
562
|
+
|
|
563
|
+
<!-- Download Section -->
|
|
564
|
+
<section id="download" class="py-24 relative">
|
|
565
|
+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
566
|
+
<h2 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-primary-700 to-gray-900 bg-clip-text text-transparent">
|
|
567
|
+
Get Started Now
|
|
568
|
+
</h2>
|
|
569
|
+
<p class="text-xl text-gray-600 mb-12">
|
|
570
|
+
Single-file deployment, download and use. Supports Windows, macOS, and Linux.
|
|
571
|
+
</p>
|
|
572
|
+
|
|
573
|
+
<!-- Package Manager Installation -->
|
|
574
|
+
<div class="mb-16">
|
|
575
|
+
<h3 class="text-xl font-semibold text-gray-700 mb-6">Install via Package Manager</h3>
|
|
576
|
+
<div class="max-w-2xl mx-auto space-y-4" x-data="{ copied: null }">
|
|
577
|
+
<!-- npm -->
|
|
578
|
+
<div class="flex items-center gap-3 bg-gray-900 rounded-xl p-4 text-left">
|
|
579
|
+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-red-500/20 flex items-center justify-center">
|
|
580
|
+
<svg class="w-7 h-7 text-red-500" viewBox="0 0 24 24" fill="currentColor">
|
|
581
|
+
<path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"/>
|
|
582
|
+
</svg>
|
|
583
|
+
</div>
|
|
584
|
+
<code class="flex-1 text-green-400 font-mono text-sm sm:text-base">npm install -g code-kanban</code>
|
|
585
|
+
<button @click="navigator.clipboard.writeText('npm install -g code-kanban'); copied = 'npm'; setTimeout(() => copied = null, 2000)"
|
|
586
|
+
class="flex-shrink-0 p-2 rounded-lg hover:bg-gray-700 transition text-gray-400 hover:text-white">
|
|
587
|
+
<svg x-show="copied !== 'npm'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
588
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
589
|
+
</svg>
|
|
590
|
+
<svg x-show="copied === 'npm'" class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
591
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
592
|
+
</svg>
|
|
593
|
+
</button>
|
|
594
|
+
</div>
|
|
595
|
+
|
|
596
|
+
<!-- pnpm -->
|
|
597
|
+
<div class="flex items-center gap-3 bg-gray-900 rounded-xl p-4 text-left">
|
|
598
|
+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-amber-500/20 flex items-center justify-center">
|
|
599
|
+
<svg class="w-7 h-7 text-amber-500" viewBox="0 0 24 24" fill="currentColor">
|
|
600
|
+
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"/>
|
|
601
|
+
</svg>
|
|
602
|
+
</div>
|
|
603
|
+
<code class="flex-1 text-green-400 font-mono text-sm sm:text-base">pnpm add -g code-kanban</code>
|
|
604
|
+
<button @click="navigator.clipboard.writeText('pnpm add -g code-kanban'); copied = 'pnpm'; setTimeout(() => copied = null, 2000)"
|
|
605
|
+
class="flex-shrink-0 p-2 rounded-lg hover:bg-gray-700 transition text-gray-400 hover:text-white">
|
|
606
|
+
<svg x-show="copied !== 'pnpm'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
607
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
608
|
+
</svg>
|
|
609
|
+
<svg x-show="copied === 'pnpm'" class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
610
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
611
|
+
</svg>
|
|
612
|
+
</button>
|
|
613
|
+
</div>
|
|
614
|
+
|
|
615
|
+
<!-- yarn -->
|
|
616
|
+
<div class="flex items-center gap-3 bg-gray-900 rounded-xl p-4 text-left">
|
|
617
|
+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-blue-500/20 flex items-center justify-center">
|
|
618
|
+
<svg class="w-7 h-7 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
|
|
619
|
+
<path d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06z"/>
|
|
620
|
+
</svg>
|
|
621
|
+
</div>
|
|
622
|
+
<code class="flex-1 text-green-400 font-mono text-sm sm:text-base">yarn global add code-kanban</code>
|
|
623
|
+
<button @click="navigator.clipboard.writeText('yarn global add code-kanban'); copied = 'yarn'; setTimeout(() => copied = null, 2000)"
|
|
624
|
+
class="flex-shrink-0 p-2 rounded-lg hover:bg-gray-700 transition text-gray-400 hover:text-white">
|
|
625
|
+
<svg x-show="copied !== 'yarn'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
626
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
627
|
+
</svg>
|
|
628
|
+
<svg x-show="copied === 'yarn'" class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
629
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
630
|
+
</svg>
|
|
631
|
+
</button>
|
|
632
|
+
</div>
|
|
633
|
+
|
|
634
|
+
<!-- bun -->
|
|
635
|
+
<div class="flex items-center gap-3 bg-gray-900 rounded-xl p-4 text-left">
|
|
636
|
+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-pink-500/20 flex items-center justify-center">
|
|
637
|
+
<svg class="w-7 h-7 text-pink-400" viewBox="0 0 24 24" fill="currentColor">
|
|
638
|
+
<path d="M12 22.596c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z"/>
|
|
639
|
+
</svg>
|
|
640
|
+
</div>
|
|
641
|
+
<code class="flex-1 text-green-400 font-mono text-sm sm:text-base">bun add -g code-kanban</code>
|
|
642
|
+
<button @click="navigator.clipboard.writeText('bun add -g code-kanban'); copied = 'bun'; setTimeout(() => copied = null, 2000)"
|
|
643
|
+
class="flex-shrink-0 p-2 rounded-lg hover:bg-gray-700 transition text-gray-400 hover:text-white">
|
|
644
|
+
<svg x-show="copied !== 'bun'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
645
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
646
|
+
</svg>
|
|
647
|
+
<svg x-show="copied === 'bun'" class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
648
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
649
|
+
</svg>
|
|
650
|
+
</button>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
<!-- Divider -->
|
|
656
|
+
<div class="flex items-center gap-4 mb-12">
|
|
657
|
+
<div class="flex-1 h-px bg-gray-200"></div>
|
|
658
|
+
<span class="text-gray-400 text-sm font-medium">OR DOWNLOAD BINARY</span>
|
|
659
|
+
<div class="flex-1 h-px bg-gray-200"></div>
|
|
660
|
+
</div>
|
|
661
|
+
|
|
662
|
+
<div class="grid sm:grid-cols-3 gap-6 mb-12">
|
|
663
|
+
<!-- Windows -->
|
|
664
|
+
<a href="#" class="group p-6 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all border-2 border-transparent hover:border-primary-200">
|
|
665
|
+
<svg class="w-12 h-12 mx-auto mb-4 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
|
|
666
|
+
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
|
|
667
|
+
</svg>
|
|
668
|
+
<div class="font-semibold text-gray-900 group-hover:text-primary-600 transition">Windows</div>
|
|
669
|
+
<div class="text-sm text-gray-500">.exe executable</div>
|
|
670
|
+
</a>
|
|
671
|
+
|
|
672
|
+
<!-- macOS -->
|
|
673
|
+
<a href="#" class="group p-6 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all border-2 border-transparent hover:border-primary-200">
|
|
674
|
+
<svg class="w-12 h-12 mx-auto mb-4 text-gray-700" viewBox="0 0 24 24" fill="currentColor">
|
|
675
|
+
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
|
676
|
+
</svg>
|
|
677
|
+
<div class="font-semibold text-gray-900 group-hover:text-primary-600 transition">macOS</div>
|
|
678
|
+
<div class="text-sm text-gray-500">Universal Binary</div>
|
|
679
|
+
</a>
|
|
680
|
+
|
|
681
|
+
<!-- Linux -->
|
|
682
|
+
<a href="#" class="group p-6 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all border-2 border-transparent hover:border-primary-200">
|
|
683
|
+
<svg class="w-12 h-12 mx-auto mb-4 text-yellow-600" viewBox="0 0 24 24" fill="currentColor">
|
|
684
|
+
<path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139z"/>
|
|
685
|
+
</svg>
|
|
686
|
+
<div class="font-semibold text-gray-900 group-hover:text-primary-600 transition">Linux</div>
|
|
687
|
+
<div class="text-sm text-gray-500">AppImage / Binary</div>
|
|
688
|
+
</a>
|
|
689
|
+
</div>
|
|
690
|
+
|
|
691
|
+
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
692
|
+
<a href="https://github.com/fy0/CodeKanban/releases" target="_blank" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-primary-500 to-accent-purple text-white rounded-2xl font-semibold text-lg hover:shadow-2xl hover:shadow-primary-500/30 transition-all">
|
|
693
|
+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
694
|
+
Download on GitHub
|
|
695
|
+
</a>
|
|
696
|
+
<a href="https://github.com/fy0/CodeKanban" target="_blank" class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-gray-700 rounded-2xl font-semibold text-lg border-2 border-gray-200 hover:border-primary-300 hover:text-primary-600 transition-all">
|
|
697
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
698
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
|
699
|
+
</svg>
|
|
700
|
+
Star on GitHub
|
|
701
|
+
</a>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
</section>
|
|
705
|
+
|
|
706
|
+
<!-- Footer -->
|
|
707
|
+
<footer class="bg-gray-900 text-gray-400 py-16">
|
|
708
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
709
|
+
<div class="grid md:grid-cols-4 gap-8 mb-12">
|
|
710
|
+
<div class="md:col-span-2">
|
|
711
|
+
<div class="flex items-center space-x-3 mb-4">
|
|
712
|
+
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-accent-purple flex items-center justify-center">
|
|
713
|
+
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
714
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
|
|
715
|
+
</svg>
|
|
716
|
+
</div>
|
|
717
|
+
<span class="text-xl font-bold text-white">Code Kanban</span>
|
|
718
|
+
</div>
|
|
719
|
+
<p class="text-gray-500 max-w-md">
|
|
720
|
+
AI-powered programming productivity tool. Unified terminal management, intelligent AI assistant status detection, visual task kanban.
|
|
721
|
+
</p>
|
|
722
|
+
</div>
|
|
723
|
+
|
|
724
|
+
<div>
|
|
725
|
+
<h4 class="text-white font-semibold mb-4">Quick Links</h4>
|
|
726
|
+
<ul class="space-y-2">
|
|
727
|
+
<li><a href="#features" class="hover:text-white transition">Features</a></li>
|
|
728
|
+
<li><a href="#ai-detect" class="hover:text-white transition">AI Detection</a></li>
|
|
729
|
+
<li><a href="#download" class="hover:text-white transition">Download</a></li>
|
|
730
|
+
</ul>
|
|
731
|
+
</div>
|
|
732
|
+
|
|
733
|
+
<div>
|
|
734
|
+
<h4 class="text-white font-semibold mb-4">Resources</h4>
|
|
735
|
+
<ul class="space-y-2">
|
|
736
|
+
<li><a href="https://github.com/fy0/CodeKanban" target="_blank" class="hover:text-white transition">GitHub</a></li>
|
|
737
|
+
<li><a href="https://github.com/fy0/CodeKanban/issues" target="_blank" class="hover:text-white transition">Issues</a></li>
|
|
738
|
+
<li><a href="https://github.com/fy0/CodeKanban/releases" target="_blank" class="hover:text-white transition">Releases</a></li>
|
|
739
|
+
</ul>
|
|
740
|
+
</div>
|
|
741
|
+
</div>
|
|
742
|
+
|
|
743
|
+
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
744
|
+
<p class="text-sm">Copyright 2024 Code Kanban. All rights reserved.</p>
|
|
745
|
+
<div class="flex items-center gap-4">
|
|
746
|
+
<a href="zh.html" class="text-sm hover:text-white transition">中文</a>
|
|
747
|
+
<a href="https://github.com/fy0/CodeKanban" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
|
|
748
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
749
|
+
</a>
|
|
750
|
+
</div>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
</footer>
|
|
754
|
+
|
|
755
|
+
</body>
|
|
756
|
+
</html>
|