create-claudeportal 0.1.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/bin/cli.js +37 -0
- package/dist/assets/index-BBU5K5iA.js +132 -0
- package/dist/assets/index-fNmv07eE.css +1 -0
- package/dist/index.html +13 -0
- package/index.html +12 -0
- package/mockups/01-chat-conversation-v2.html +803 -0
- package/mockups/01-chat-conversation.html +592 -0
- package/mockups/02-activity-feed.html +648 -0
- package/mockups/03-focused-workspace.html +680 -0
- package/mockups/04-documents-mode.html +1556 -0
- package/package.json +54 -0
- package/server/index.js +140 -0
- package/server/lib/detect-tools.js +93 -0
- package/server/lib/file-scanner.js +46 -0
- package/server/lib/file-watcher.js +45 -0
- package/server/lib/fix-npm-prefix.js +61 -0
- package/server/lib/folder-scanner.js +43 -0
- package/server/lib/install-tools.js +122 -0
- package/server/lib/platform.js +18 -0
- package/server/lib/sse-manager.js +36 -0
- package/server/lib/terminal.js +95 -0
- package/server/lib/validate-folder-path.js +17 -0
- package/server/lib/validate-path.js +13 -0
- package/server/routes/detect.js +64 -0
- package/server/routes/doc-events.js +94 -0
- package/server/routes/events.js +37 -0
- package/server/routes/folder.js +195 -0
- package/server/routes/github.js +21 -0
- package/server/routes/health.js +16 -0
- package/server/routes/install.js +102 -0
- package/server/routes/project.js +18 -0
- package/server/routes/scaffold.js +45 -0
- package/skills-lock.json +15 -0
- package/tsconfig.app.json +17 -0
- package/tsconfig.node.json +11 -0
- package/tsconfig.tsbuildinfo +1 -0
- package/ui/app.js +747 -0
- package/ui/index.html +272 -0
- package/ui/styles.css +788 -0
|
@@ -0,0 +1,803 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Mockup 1 v2: Chat + Terminal Overlay</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
+
background: #f5f5f0;
|
|
13
|
+
color: #1a1a2e;
|
|
14
|
+
height: 100vh;
|
|
15
|
+
display: flex;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* ---- LEFT SIDEBAR ---- */
|
|
19
|
+
.sidebar {
|
|
20
|
+
width: 280px;
|
|
21
|
+
background: #fff;
|
|
22
|
+
border-right: 1px solid #e5e7eb;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sidebar-header {
|
|
30
|
+
padding: 20px;
|
|
31
|
+
border-bottom: 1px solid #e5e7eb;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.sidebar-header h2 {
|
|
35
|
+
font-size: 15px;
|
|
36
|
+
font-weight: 700;
|
|
37
|
+
color: #1a1a2e;
|
|
38
|
+
margin-bottom: 4px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.sidebar-header p {
|
|
42
|
+
font-size: 12px;
|
|
43
|
+
color: #6b7280;
|
|
44
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.sidebar-section {
|
|
48
|
+
padding: 16px 20px;
|
|
49
|
+
border-bottom: 1px solid #e5e7eb;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.sidebar-section h4 {
|
|
53
|
+
font-size: 10px;
|
|
54
|
+
text-transform: uppercase;
|
|
55
|
+
letter-spacing: 1.2px;
|
|
56
|
+
color: #9ca3af;
|
|
57
|
+
margin-bottom: 10px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Collapsible prompt groups */
|
|
62
|
+
.prompt-group summary {
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
font-size: 13px;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
padding: 6px 0;
|
|
67
|
+
color: #374151;
|
|
68
|
+
list-style: none;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: 6px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.prompt-group summary::-webkit-details-marker { display: none; }
|
|
75
|
+
|
|
76
|
+
.prompt-group summary::before {
|
|
77
|
+
content: '▸';
|
|
78
|
+
font-size: 10px;
|
|
79
|
+
color: #9ca3af;
|
|
80
|
+
transition: transform 0.15s;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.prompt-group[open] summary::before {
|
|
84
|
+
transform: rotate(90deg);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.prompt-group summary:hover { color: #22c55e; }
|
|
88
|
+
|
|
89
|
+
.prompt-group {
|
|
90
|
+
margin-bottom: 4px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.prompt-list {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 4px;
|
|
97
|
+
padding: 6px 0 8px 18px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.suggestion-btn {
|
|
101
|
+
display: block;
|
|
102
|
+
width: 100%;
|
|
103
|
+
text-align: left;
|
|
104
|
+
padding: 8px 12px;
|
|
105
|
+
border: 1px solid #e5e7eb;
|
|
106
|
+
border-radius: 10px;
|
|
107
|
+
background: #fff;
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
font-size: 12px;
|
|
110
|
+
font-family: inherit;
|
|
111
|
+
color: #374151;
|
|
112
|
+
transition: all 0.15s;
|
|
113
|
+
line-height: 1.4;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.suggestion-btn:hover {
|
|
117
|
+
background: #f0fdf4;
|
|
118
|
+
border-color: #86efac;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.file-list {
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-direction: column;
|
|
124
|
+
gap: 2px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.file-item {
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
gap: 8px;
|
|
131
|
+
padding: 6px 8px;
|
|
132
|
+
border-radius: 6px;
|
|
133
|
+
font-size: 12px;
|
|
134
|
+
color: #374151;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.file-item:hover { background: #f5f5f0; }
|
|
139
|
+
|
|
140
|
+
.file-icon { font-size: 13px; opacity: 0.6; }
|
|
141
|
+
|
|
142
|
+
.file-badge {
|
|
143
|
+
margin-left: auto;
|
|
144
|
+
font-size: 10px;
|
|
145
|
+
padding: 2px 8px;
|
|
146
|
+
border-radius: 100px;
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.badge-new { background: #dcfce7; color: #16a34a; }
|
|
151
|
+
|
|
152
|
+
/* ---- MAIN CHAT AREA ---- */
|
|
153
|
+
.chat-area {
|
|
154
|
+
flex: 1;
|
|
155
|
+
display: flex;
|
|
156
|
+
flex-direction: column;
|
|
157
|
+
min-width: 0;
|
|
158
|
+
position: relative;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.chat-header {
|
|
162
|
+
padding: 14px 24px;
|
|
163
|
+
background: #fff;
|
|
164
|
+
border-bottom: 1px solid #e5e7eb;
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
justify-content: space-between;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.chat-header-left {
|
|
171
|
+
display: flex;
|
|
172
|
+
align-items: center;
|
|
173
|
+
gap: 12px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.avatar {
|
|
177
|
+
width: 36px;
|
|
178
|
+
height: 36px;
|
|
179
|
+
border-radius: 10px;
|
|
180
|
+
display: flex;
|
|
181
|
+
align-items: center;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
font-size: 18px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.avatar-claude {
|
|
187
|
+
background: linear-gradient(135deg, #d4a574, #c4956a);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.avatar-sm {
|
|
191
|
+
width: 20px;
|
|
192
|
+
height: 20px;
|
|
193
|
+
font-size: 11px;
|
|
194
|
+
border-radius: 6px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.chat-header-left h3 {
|
|
198
|
+
font-size: 14px;
|
|
199
|
+
font-weight: 600;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.chat-header-left .status {
|
|
203
|
+
font-size: 12px;
|
|
204
|
+
color: #22c55e;
|
|
205
|
+
display: flex;
|
|
206
|
+
align-items: center;
|
|
207
|
+
gap: 4px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.status-dot {
|
|
211
|
+
width: 6px;
|
|
212
|
+
height: 6px;
|
|
213
|
+
background: #22c55e;
|
|
214
|
+
border-radius: 50%;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* "See what Claude is doing" button in header */
|
|
218
|
+
.hood-btn {
|
|
219
|
+
display: flex;
|
|
220
|
+
align-items: center;
|
|
221
|
+
gap: 6px;
|
|
222
|
+
padding: 7px 14px;
|
|
223
|
+
border: 1px solid #e5e7eb;
|
|
224
|
+
border-radius: 10px;
|
|
225
|
+
background: #fff;
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
font-size: 12px;
|
|
228
|
+
font-family: inherit;
|
|
229
|
+
color: #6b7280;
|
|
230
|
+
font-weight: 500;
|
|
231
|
+
transition: all 0.15s;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.hood-btn:hover {
|
|
235
|
+
background: #f5f5f0;
|
|
236
|
+
border-color: #d1d5db;
|
|
237
|
+
color: #374151;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.hood-btn.active {
|
|
241
|
+
background: #1a1a2e;
|
|
242
|
+
border-color: #1a1a2e;
|
|
243
|
+
color: #22c55e;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.hood-pulse {
|
|
247
|
+
width: 6px;
|
|
248
|
+
height: 6px;
|
|
249
|
+
border-radius: 50%;
|
|
250
|
+
background: #22c55e;
|
|
251
|
+
animation: blink 2s ease infinite;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
@keyframes blink {
|
|
255
|
+
0%, 100% { opacity: 1; }
|
|
256
|
+
50% { opacity: 0.3; }
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* Messages */
|
|
260
|
+
.messages {
|
|
261
|
+
flex: 1;
|
|
262
|
+
overflow-y: auto;
|
|
263
|
+
padding: 24px;
|
|
264
|
+
display: flex;
|
|
265
|
+
flex-direction: column;
|
|
266
|
+
gap: 20px;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.message {
|
|
270
|
+
max-width: 680px;
|
|
271
|
+
animation: fadeUp 0.3s ease;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
@keyframes fadeUp {
|
|
275
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
276
|
+
to { opacity: 1; transform: translateY(0); }
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.message-claude { align-self: flex-start; }
|
|
280
|
+
.message-user { align-self: flex-end; }
|
|
281
|
+
|
|
282
|
+
.message-sender {
|
|
283
|
+
font-size: 12px;
|
|
284
|
+
font-weight: 600;
|
|
285
|
+
color: #6b7280;
|
|
286
|
+
margin-bottom: 6px;
|
|
287
|
+
display: flex;
|
|
288
|
+
align-items: center;
|
|
289
|
+
gap: 6px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.message-bubble {
|
|
293
|
+
padding: 14px 18px;
|
|
294
|
+
border-radius: 16px;
|
|
295
|
+
font-size: 14px;
|
|
296
|
+
line-height: 1.6;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.message-claude .message-bubble {
|
|
300
|
+
background: #fff;
|
|
301
|
+
border: 1px solid #e5e7eb;
|
|
302
|
+
border-bottom-left-radius: 4px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.message-user .message-bubble {
|
|
306
|
+
background: #1a1a2e;
|
|
307
|
+
color: #fff;
|
|
308
|
+
border-bottom-right-radius: 4px;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/* Progress steps */
|
|
312
|
+
.steps {
|
|
313
|
+
margin-top: 14px;
|
|
314
|
+
display: flex;
|
|
315
|
+
flex-direction: column;
|
|
316
|
+
gap: 6px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.step {
|
|
320
|
+
display: flex;
|
|
321
|
+
align-items: flex-start;
|
|
322
|
+
gap: 10px;
|
|
323
|
+
font-size: 13px;
|
|
324
|
+
color: #374151;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.step-icon {
|
|
328
|
+
width: 22px;
|
|
329
|
+
height: 22px;
|
|
330
|
+
border-radius: 50%;
|
|
331
|
+
display: flex;
|
|
332
|
+
align-items: center;
|
|
333
|
+
justify-content: center;
|
|
334
|
+
font-size: 11px;
|
|
335
|
+
flex-shrink: 0;
|
|
336
|
+
margin-top: 1px;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.step-done .step-icon { background: #dcfce7; color: #16a34a; }
|
|
340
|
+
.step-active .step-icon { background: #dbeafe; color: #2563eb; animation: pulse 1.5s ease infinite; }
|
|
341
|
+
.step-pending .step-icon { background: #f3f4f6; color: #9ca3af; }
|
|
342
|
+
|
|
343
|
+
@keyframes pulse {
|
|
344
|
+
0%, 100% { opacity: 1; }
|
|
345
|
+
50% { opacity: 0.5; }
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.step-content { flex: 1; }
|
|
349
|
+
.step-label { font-weight: 500; }
|
|
350
|
+
|
|
351
|
+
/* Plain-language summary under completed steps */
|
|
352
|
+
.step-summary {
|
|
353
|
+
font-size: 12px;
|
|
354
|
+
color: #9ca3af;
|
|
355
|
+
margin-top: 2px;
|
|
356
|
+
line-height: 1.4;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* Input bar */
|
|
360
|
+
.input-bar {
|
|
361
|
+
padding: 16px 24px;
|
|
362
|
+
background: #fff;
|
|
363
|
+
border-top: 1px solid #e5e7eb;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.input-row {
|
|
367
|
+
display: flex;
|
|
368
|
+
gap: 10px;
|
|
369
|
+
align-items: flex-end;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.input-field {
|
|
373
|
+
flex: 1;
|
|
374
|
+
padding: 12px 16px;
|
|
375
|
+
border: 2px solid #e5e7eb;
|
|
376
|
+
border-radius: 14px;
|
|
377
|
+
font-size: 14px;
|
|
378
|
+
font-family: inherit;
|
|
379
|
+
resize: none;
|
|
380
|
+
outline: none;
|
|
381
|
+
transition: border-color 0.2s;
|
|
382
|
+
min-height: 46px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.input-field:focus {
|
|
386
|
+
border-color: #22c55e;
|
|
387
|
+
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.send-btn {
|
|
391
|
+
width: 46px;
|
|
392
|
+
height: 46px;
|
|
393
|
+
border-radius: 14px;
|
|
394
|
+
border: none;
|
|
395
|
+
background: #22c55e;
|
|
396
|
+
color: white;
|
|
397
|
+
font-size: 18px;
|
|
398
|
+
cursor: pointer;
|
|
399
|
+
display: flex;
|
|
400
|
+
align-items: center;
|
|
401
|
+
justify-content: center;
|
|
402
|
+
transition: background 0.15s;
|
|
403
|
+
flex-shrink: 0;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.send-btn:hover { background: #16a34a; }
|
|
407
|
+
|
|
408
|
+
.input-hint {
|
|
409
|
+
font-size: 11px;
|
|
410
|
+
color: #9ca3af;
|
|
411
|
+
margin-top: 6px;
|
|
412
|
+
text-align: center;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* ---- TERMINAL OVERLAY ---- */
|
|
416
|
+
.terminal-overlay {
|
|
417
|
+
position: absolute;
|
|
418
|
+
bottom: 80px;
|
|
419
|
+
right: 24px;
|
|
420
|
+
width: 520px;
|
|
421
|
+
height: 320px;
|
|
422
|
+
background: #1a1a2e;
|
|
423
|
+
border: 1px solid #3f3f56;
|
|
424
|
+
border-radius: 14px;
|
|
425
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
|
|
426
|
+
display: flex;
|
|
427
|
+
flex-direction: column;
|
|
428
|
+
overflow: hidden;
|
|
429
|
+
z-index: 100;
|
|
430
|
+
animation: overlayIn 0.25s ease;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.terminal-overlay.overlay-hidden {
|
|
434
|
+
display: none;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
@keyframes overlayIn {
|
|
438
|
+
from { opacity: 0; transform: translateY(12px) scale(0.97); }
|
|
439
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.terminal-overlay-header {
|
|
443
|
+
display: flex;
|
|
444
|
+
align-items: center;
|
|
445
|
+
justify-content: space-between;
|
|
446
|
+
padding: 10px 16px;
|
|
447
|
+
background: #12121f;
|
|
448
|
+
border-bottom: 1px solid #2a2a3e;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.terminal-overlay-title {
|
|
452
|
+
font-size: 12px;
|
|
453
|
+
color: #6b7280;
|
|
454
|
+
font-weight: 500;
|
|
455
|
+
display: flex;
|
|
456
|
+
align-items: center;
|
|
457
|
+
gap: 8px;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.terminal-overlay-title .live-badge {
|
|
461
|
+
font-size: 10px;
|
|
462
|
+
padding: 2px 8px;
|
|
463
|
+
border-radius: 100px;
|
|
464
|
+
background: rgba(34,197,94,0.15);
|
|
465
|
+
color: #22c55e;
|
|
466
|
+
font-weight: 600;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.terminal-close {
|
|
470
|
+
background: none;
|
|
471
|
+
border: 1px solid #2a2a3e;
|
|
472
|
+
color: #6b7280;
|
|
473
|
+
width: 24px;
|
|
474
|
+
height: 24px;
|
|
475
|
+
border-radius: 6px;
|
|
476
|
+
cursor: pointer;
|
|
477
|
+
font-size: 12px;
|
|
478
|
+
display: flex;
|
|
479
|
+
align-items: center;
|
|
480
|
+
justify-content: center;
|
|
481
|
+
transition: all 0.15s;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.terminal-close:hover {
|
|
485
|
+
background: #2a2a3e;
|
|
486
|
+
color: #fff;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.terminal-overlay-body {
|
|
490
|
+
flex: 1;
|
|
491
|
+
padding: 14px 16px;
|
|
492
|
+
font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
|
|
493
|
+
font-size: 12px;
|
|
494
|
+
line-height: 1.8;
|
|
495
|
+
color: #a1a1aa;
|
|
496
|
+
overflow-y: auto;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.t-cmd { color: #d4d4d8; }
|
|
500
|
+
.t-ok { color: #4ade80; }
|
|
501
|
+
.t-dim { color: #3f3f56; }
|
|
502
|
+
.t-warn { color: #facc15; }
|
|
503
|
+
.t-prompt { color: #22c55e; }
|
|
504
|
+
.t-cursor {
|
|
505
|
+
display: inline-block;
|
|
506
|
+
width: 7px;
|
|
507
|
+
height: 14px;
|
|
508
|
+
background: #22c55e;
|
|
509
|
+
animation: cursorBlink 1s step-end infinite;
|
|
510
|
+
vertical-align: text-bottom;
|
|
511
|
+
margin-left: 2px;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
@keyframes cursorBlink {
|
|
515
|
+
0%, 100% { opacity: 1; }
|
|
516
|
+
50% { opacity: 0; }
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
/* ---- RIGHT PANEL ---- */
|
|
520
|
+
.output-panel {
|
|
521
|
+
width: 360px;
|
|
522
|
+
background: #fff;
|
|
523
|
+
border-left: 1px solid #e5e7eb;
|
|
524
|
+
display: flex;
|
|
525
|
+
flex-direction: column;
|
|
526
|
+
flex-shrink: 0;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.output-header {
|
|
530
|
+
padding: 16px 20px;
|
|
531
|
+
border-bottom: 1px solid #e5e7eb;
|
|
532
|
+
display: flex;
|
|
533
|
+
align-items: center;
|
|
534
|
+
justify-content: space-between;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.output-header h3 {
|
|
538
|
+
font-size: 14px;
|
|
539
|
+
font-weight: 600;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
.tab-row {
|
|
543
|
+
display: flex;
|
|
544
|
+
gap: 2px;
|
|
545
|
+
background: #f3f4f6;
|
|
546
|
+
border-radius: 8px;
|
|
547
|
+
padding: 2px;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.tab {
|
|
551
|
+
padding: 6px 14px;
|
|
552
|
+
border: none;
|
|
553
|
+
background: transparent;
|
|
554
|
+
border-radius: 6px;
|
|
555
|
+
font-size: 12px;
|
|
556
|
+
font-family: inherit;
|
|
557
|
+
cursor: pointer;
|
|
558
|
+
color: #6b7280;
|
|
559
|
+
font-weight: 500;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.tab.active {
|
|
563
|
+
background: #fff;
|
|
564
|
+
color: #1a1a2e;
|
|
565
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.output-body {
|
|
569
|
+
flex: 1;
|
|
570
|
+
display: flex;
|
|
571
|
+
flex-direction: column;
|
|
572
|
+
align-items: center;
|
|
573
|
+
justify-content: center;
|
|
574
|
+
padding: 40px 24px;
|
|
575
|
+
text-align: center;
|
|
576
|
+
color: #9ca3af;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.output-body .icon {
|
|
580
|
+
font-size: 48px;
|
|
581
|
+
margin-bottom: 16px;
|
|
582
|
+
opacity: 0.4;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.output-body p {
|
|
586
|
+
font-size: 14px;
|
|
587
|
+
line-height: 1.5;
|
|
588
|
+
}
|
|
589
|
+
</style>
|
|
590
|
+
</head>
|
|
591
|
+
<body>
|
|
592
|
+
<!-- LEFT SIDEBAR -->
|
|
593
|
+
<div class="sidebar">
|
|
594
|
+
<div class="sidebar-header">
|
|
595
|
+
<h2>my-portfolio</h2>
|
|
596
|
+
<p>~/Claude/my-portfolio</p>
|
|
597
|
+
</div>
|
|
598
|
+
|
|
599
|
+
<div class="sidebar-section">
|
|
600
|
+
<h4>Try asking</h4>
|
|
601
|
+
|
|
602
|
+
<details class="prompt-group" open>
|
|
603
|
+
<summary>Build Features</summary>
|
|
604
|
+
<div class="prompt-list">
|
|
605
|
+
<button class="suggestion-btn">Add a login page</button>
|
|
606
|
+
<button class="suggestion-btn">Dashboard with sidebar nav</button>
|
|
607
|
+
<button class="suggestion-btn">User profile page</button>
|
|
608
|
+
<button class="suggestion-btn">Settings + theme toggle</button>
|
|
609
|
+
<button class="suggestion-btn">Responsive navbar</button>
|
|
610
|
+
</div>
|
|
611
|
+
</details>
|
|
612
|
+
|
|
613
|
+
<details class="prompt-group">
|
|
614
|
+
<summary>Understand</summary>
|
|
615
|
+
<div class="prompt-list">
|
|
616
|
+
<button class="suggestion-btn">Explain this codebase</button>
|
|
617
|
+
<button class="suggestion-btn">What tech stack is this?</button>
|
|
618
|
+
<button class="suggestion-btn">Trace the app flow</button>
|
|
619
|
+
</div>
|
|
620
|
+
</details>
|
|
621
|
+
|
|
622
|
+
<details class="prompt-group">
|
|
623
|
+
<summary>Review Code</summary>
|
|
624
|
+
<div class="prompt-list">
|
|
625
|
+
<button class="suggestion-btn">Review for bugs</button>
|
|
626
|
+
<button class="suggestion-btn">Check accessibility</button>
|
|
627
|
+
<button class="suggestion-btn">Performance review</button>
|
|
628
|
+
</div>
|
|
629
|
+
</details>
|
|
630
|
+
|
|
631
|
+
<details class="prompt-group">
|
|
632
|
+
<summary>Workflow</summary>
|
|
633
|
+
<div class="prompt-list">
|
|
634
|
+
<button class="suggestion-btn">Start dev server</button>
|
|
635
|
+
<button class="suggestion-btn">Commit changes</button>
|
|
636
|
+
<button class="suggestion-btn">New git branch</button>
|
|
637
|
+
</div>
|
|
638
|
+
</details>
|
|
639
|
+
</div>
|
|
640
|
+
|
|
641
|
+
<div class="sidebar-section">
|
|
642
|
+
<h4>Files changed</h4>
|
|
643
|
+
<div class="file-list">
|
|
644
|
+
<div class="file-item"><span class="file-icon">📄</span> index.html <span class="file-badge badge-new">new</span></div>
|
|
645
|
+
<div class="file-item"><span class="file-icon">🎨</span> styles.css <span class="file-badge badge-new">new</span></div>
|
|
646
|
+
<div class="file-item"><span class="file-icon">⚡</span> app.js <span class="file-badge badge-new">new</span></div>
|
|
647
|
+
<div class="file-item"><span class="file-icon">📦</span> package.json <span class="file-badge badge-new">new</span></div>
|
|
648
|
+
</div>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
|
|
652
|
+
<!-- MAIN CHAT -->
|
|
653
|
+
<div class="chat-area">
|
|
654
|
+
<div class="chat-header">
|
|
655
|
+
<div class="chat-header-left">
|
|
656
|
+
<div class="avatar avatar-claude">🤖</div>
|
|
657
|
+
<div>
|
|
658
|
+
<h3>Claude</h3>
|
|
659
|
+
<div class="status"><span class="status-dot"></span> Working on your project</div>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
<button class="hood-btn active" onclick="toggleTerminal()">
|
|
663
|
+
<span class="hood-pulse"></span>
|
|
664
|
+
See what Claude is doing
|
|
665
|
+
</button>
|
|
666
|
+
</div>
|
|
667
|
+
|
|
668
|
+
<div class="messages">
|
|
669
|
+
<!-- User message -->
|
|
670
|
+
<div class="message message-user">
|
|
671
|
+
<div class="message-bubble">
|
|
672
|
+
A portfolio site for my photography business with a gallery, about page, and contact form
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
|
|
676
|
+
<!-- Claude response -->
|
|
677
|
+
<div class="message message-claude">
|
|
678
|
+
<div class="message-sender">
|
|
679
|
+
<span class="avatar avatar-claude avatar-sm">🤖</span>
|
|
680
|
+
Claude
|
|
681
|
+
</div>
|
|
682
|
+
<div class="message-bubble">
|
|
683
|
+
Great choice! I'll build your photography portfolio. Here's what I'm setting up:
|
|
684
|
+
<br><br>
|
|
685
|
+
<strong>Homepage</strong> — Hero image with your name and tagline<br>
|
|
686
|
+
<strong>Gallery</strong> — Masonry grid of your best photos<br>
|
|
687
|
+
<strong>About</strong> — Your story and experience<br>
|
|
688
|
+
<strong>Contact</strong> — Simple form for inquiries
|
|
689
|
+
|
|
690
|
+
<div class="steps">
|
|
691
|
+
<div class="step step-done">
|
|
692
|
+
<span class="step-icon">✓</span>
|
|
693
|
+
<div class="step-content">
|
|
694
|
+
<div class="step-label">Created project structure</div>
|
|
695
|
+
<div class="step-summary">Set up 4 files — the skeleton of your site</div>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="step step-done">
|
|
699
|
+
<span class="step-icon">✓</span>
|
|
700
|
+
<div class="step-content">
|
|
701
|
+
<div class="step-label">Built the homepage</div>
|
|
702
|
+
<div class="step-summary">Added a full-width hero with your name and a cover photo slot</div>
|
|
703
|
+
</div>
|
|
704
|
+
</div>
|
|
705
|
+
<div class="step step-done">
|
|
706
|
+
<span class="step-icon">✓</span>
|
|
707
|
+
<div class="step-content">
|
|
708
|
+
<div class="step-label">Built the photo gallery</div>
|
|
709
|
+
<div class="step-summary">Created a responsive grid — click any photo to view it full-screen</div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
<div class="step step-active">
|
|
713
|
+
<span class="step-icon">⋯</span>
|
|
714
|
+
<div class="step-content">
|
|
715
|
+
<div class="step-label">Adding the contact form...</div>
|
|
716
|
+
<div class="step-summary">Name, email, and message fields with input checks</div>
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
<div class="step step-pending">
|
|
720
|
+
<span class="step-icon">○</span>
|
|
721
|
+
<div class="step-content">
|
|
722
|
+
<div class="step-label">Polish and final touches</div>
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
</div>
|
|
726
|
+
</div>
|
|
727
|
+
</div>
|
|
728
|
+
</div>
|
|
729
|
+
|
|
730
|
+
<!-- Terminal Overlay — floating over the chat area -->
|
|
731
|
+
<div class="terminal-overlay" id="terminalOverlay">
|
|
732
|
+
<div class="terminal-overlay-header">
|
|
733
|
+
<span class="terminal-overlay-title">
|
|
734
|
+
🔧 Under the hood
|
|
735
|
+
<span class="live-badge">LIVE</span>
|
|
736
|
+
</span>
|
|
737
|
+
<button class="terminal-close" onclick="toggleTerminal()">✕</button>
|
|
738
|
+
</div>
|
|
739
|
+
<div class="terminal-overlay-body">
|
|
740
|
+
<div class="t-dim">~/Claude/my-portfolio</div>
|
|
741
|
+
<div class="t-cmd">$ npm create vite@latest . -- --template react</div>
|
|
742
|
+
<div class="t-ok">✓ Scaffolded Vite + React project</div>
|
|
743
|
+
<div class="t-cmd">$ npm install</div>
|
|
744
|
+
<div class="t-ok">✓ added 127 packages in 4.2s</div>
|
|
745
|
+
<div class="t-dim">────────────────────────────────────────</div>
|
|
746
|
+
<div class="t-cmd">Writing src/components/Hero.jsx</div>
|
|
747
|
+
<div class="t-ok">✓ Created hero section with responsive layout</div>
|
|
748
|
+
<div class="t-cmd">Writing src/components/Gallery.jsx</div>
|
|
749
|
+
<div class="t-ok">✓ Created masonry grid with lightbox modal</div>
|
|
750
|
+
<div class="t-cmd">Writing src/styles.css</div>
|
|
751
|
+
<div class="t-ok">✓ Added responsive styles and color variables</div>
|
|
752
|
+
<div class="t-dim">────────────────────────────────────────</div>
|
|
753
|
+
<div class="t-cmd">Writing src/components/Contact.jsx</div>
|
|
754
|
+
<div class="t-prompt">claude <span class="t-cursor"></span></div>
|
|
755
|
+
</div>
|
|
756
|
+
</div>
|
|
757
|
+
|
|
758
|
+
<!-- Input -->
|
|
759
|
+
<div class="input-bar">
|
|
760
|
+
<div class="input-row">
|
|
761
|
+
<textarea class="input-field" placeholder="Ask Claude to change something..." rows="1"></textarea>
|
|
762
|
+
<button class="send-btn">↑</button>
|
|
763
|
+
</div>
|
|
764
|
+
<div class="input-hint">Press Enter to send. Claude can edit files, add features, and fix bugs.</div>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
|
|
768
|
+
<!-- RIGHT PANEL -->
|
|
769
|
+
<div class="output-panel">
|
|
770
|
+
<div class="output-header">
|
|
771
|
+
<h3>Preview</h3>
|
|
772
|
+
<div class="tab-row">
|
|
773
|
+
<button class="tab active">Preview</button>
|
|
774
|
+
<button class="tab">Files</button>
|
|
775
|
+
</div>
|
|
776
|
+
</div>
|
|
777
|
+
<div class="output-body">
|
|
778
|
+
<div class="icon">🖼️</div>
|
|
779
|
+
<p>Your site will appear here once Claude starts the dev server.</p>
|
|
780
|
+
<p style="margin-top:8px; font-size:12px;">Usually takes about 30 seconds.</p>
|
|
781
|
+
</div>
|
|
782
|
+
</div>
|
|
783
|
+
|
|
784
|
+
<script>
|
|
785
|
+
function toggleTerminal() {
|
|
786
|
+
const overlay = document.getElementById('terminalOverlay');
|
|
787
|
+
const btn = document.querySelector('.hood-btn');
|
|
788
|
+
const isVisible = !overlay.classList.contains('overlay-hidden');
|
|
789
|
+
if (isVisible) {
|
|
790
|
+
overlay.classList.add('overlay-hidden');
|
|
791
|
+
btn.classList.remove('active');
|
|
792
|
+
} else {
|
|
793
|
+
overlay.classList.remove('overlay-hidden');
|
|
794
|
+
// Re-trigger entrance animation
|
|
795
|
+
overlay.style.animation = 'none';
|
|
796
|
+
overlay.offsetHeight; // force reflow
|
|
797
|
+
overlay.style.animation = '';
|
|
798
|
+
btn.classList.add('active');
|
|
799
|
+
}
|
|
800
|
+
}
|
|
801
|
+
</script>
|
|
802
|
+
</body>
|
|
803
|
+
</html>
|