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,592 @@
|
|
|
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: Chat Conversation</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
|
+
}
|
|
27
|
+
|
|
28
|
+
.sidebar-header {
|
|
29
|
+
padding: 20px;
|
|
30
|
+
border-bottom: 1px solid #e5e7eb;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.sidebar-header h2 {
|
|
34
|
+
font-size: 15px;
|
|
35
|
+
font-weight: 700;
|
|
36
|
+
color: #1a1a2e;
|
|
37
|
+
margin-bottom: 4px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.sidebar-header p {
|
|
41
|
+
font-size: 12px;
|
|
42
|
+
color: #6b7280;
|
|
43
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sidebar-section {
|
|
47
|
+
padding: 16px 20px;
|
|
48
|
+
border-bottom: 1px solid #e5e7eb;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.sidebar-section h4 {
|
|
52
|
+
font-size: 10px;
|
|
53
|
+
text-transform: uppercase;
|
|
54
|
+
letter-spacing: 1.2px;
|
|
55
|
+
color: #9ca3af;
|
|
56
|
+
margin-bottom: 12px;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.suggestion-btn {
|
|
61
|
+
display: block;
|
|
62
|
+
width: 100%;
|
|
63
|
+
text-align: left;
|
|
64
|
+
padding: 10px 12px;
|
|
65
|
+
border: 1px solid #e5e7eb;
|
|
66
|
+
border-radius: 10px;
|
|
67
|
+
background: #fff;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
font-size: 13px;
|
|
70
|
+
font-family: inherit;
|
|
71
|
+
color: #374151;
|
|
72
|
+
margin-bottom: 6px;
|
|
73
|
+
transition: all 0.15s;
|
|
74
|
+
line-height: 1.4;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.suggestion-btn:hover {
|
|
78
|
+
background: #f0fdf4;
|
|
79
|
+
border-color: #86efac;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.suggestion-icon {
|
|
83
|
+
margin-right: 6px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ---- MAIN CHAT AREA ---- */
|
|
87
|
+
.chat-area {
|
|
88
|
+
flex: 1;
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
min-width: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.chat-header {
|
|
95
|
+
padding: 16px 24px;
|
|
96
|
+
background: #fff;
|
|
97
|
+
border-bottom: 1px solid #e5e7eb;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: space-between;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.chat-header-left {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
gap: 12px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.avatar {
|
|
110
|
+
width: 36px;
|
|
111
|
+
height: 36px;
|
|
112
|
+
border-radius: 10px;
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
font-size: 18px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.avatar-claude {
|
|
120
|
+
background: linear-gradient(135deg, #d4a574, #c4956a);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.chat-header-left h3 {
|
|
124
|
+
font-size: 14px;
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.chat-header-left .status {
|
|
129
|
+
font-size: 12px;
|
|
130
|
+
color: #22c55e;
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
gap: 4px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.status-dot {
|
|
137
|
+
width: 6px;
|
|
138
|
+
height: 6px;
|
|
139
|
+
background: #22c55e;
|
|
140
|
+
border-radius: 50%;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Messages */
|
|
144
|
+
.messages {
|
|
145
|
+
flex: 1;
|
|
146
|
+
overflow-y: auto;
|
|
147
|
+
padding: 24px;
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
gap: 20px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.message {
|
|
154
|
+
max-width: 680px;
|
|
155
|
+
animation: fadeUp 0.3s ease;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@keyframes fadeUp {
|
|
159
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
160
|
+
to { opacity: 1; transform: translateY(0); }
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.message-claude {
|
|
164
|
+
align-self: flex-start;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.message-user {
|
|
168
|
+
align-self: flex-end;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.message-sender {
|
|
172
|
+
font-size: 12px;
|
|
173
|
+
font-weight: 600;
|
|
174
|
+
color: #6b7280;
|
|
175
|
+
margin-bottom: 6px;
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
gap: 6px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.message-bubble {
|
|
182
|
+
padding: 14px 18px;
|
|
183
|
+
border-radius: 16px;
|
|
184
|
+
font-size: 14px;
|
|
185
|
+
line-height: 1.6;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.message-claude .message-bubble {
|
|
189
|
+
background: #fff;
|
|
190
|
+
border: 1px solid #e5e7eb;
|
|
191
|
+
border-bottom-left-radius: 4px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.message-user .message-bubble {
|
|
195
|
+
background: #1a1a2e;
|
|
196
|
+
color: #fff;
|
|
197
|
+
border-bottom-right-radius: 4px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Work-in-progress card inside a message */
|
|
201
|
+
.work-card {
|
|
202
|
+
margin-top: 12px;
|
|
203
|
+
border: 1px solid #e5e7eb;
|
|
204
|
+
border-radius: 12px;
|
|
205
|
+
overflow: hidden;
|
|
206
|
+
background: #fafaf8;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.work-card-header {
|
|
210
|
+
padding: 10px 14px;
|
|
211
|
+
background: #f3f4f6;
|
|
212
|
+
font-size: 12px;
|
|
213
|
+
font-weight: 600;
|
|
214
|
+
color: #6b7280;
|
|
215
|
+
display: flex;
|
|
216
|
+
align-items: center;
|
|
217
|
+
gap: 8px;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.work-card-body {
|
|
222
|
+
padding: 12px 14px;
|
|
223
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
224
|
+
font-size: 12px;
|
|
225
|
+
color: #374151;
|
|
226
|
+
line-height: 1.7;
|
|
227
|
+
max-height: 120px;
|
|
228
|
+
overflow-y: auto;
|
|
229
|
+
border-top: 1px solid #e5e7eb;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.work-card-body .line-added {
|
|
233
|
+
color: #16a34a;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.work-card-body .line-file {
|
|
237
|
+
color: #6b7280;
|
|
238
|
+
font-style: italic;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Progress steps */
|
|
242
|
+
.steps {
|
|
243
|
+
margin-top: 14px;
|
|
244
|
+
display: flex;
|
|
245
|
+
flex-direction: column;
|
|
246
|
+
gap: 8px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.step {
|
|
250
|
+
display: flex;
|
|
251
|
+
align-items: center;
|
|
252
|
+
gap: 10px;
|
|
253
|
+
font-size: 13px;
|
|
254
|
+
color: #374151;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.step-icon {
|
|
258
|
+
width: 22px;
|
|
259
|
+
height: 22px;
|
|
260
|
+
border-radius: 50%;
|
|
261
|
+
display: flex;
|
|
262
|
+
align-items: center;
|
|
263
|
+
justify-content: center;
|
|
264
|
+
font-size: 11px;
|
|
265
|
+
flex-shrink: 0;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.step-done .step-icon {
|
|
269
|
+
background: #dcfce7;
|
|
270
|
+
color: #16a34a;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.step-active .step-icon {
|
|
274
|
+
background: #dbeafe;
|
|
275
|
+
color: #2563eb;
|
|
276
|
+
animation: pulse 1.5s ease infinite;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
@keyframes pulse {
|
|
280
|
+
0%, 100% { opacity: 1; }
|
|
281
|
+
50% { opacity: 0.5; }
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.step-pending .step-icon {
|
|
285
|
+
background: #f3f4f6;
|
|
286
|
+
color: #9ca3af;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* Input bar */
|
|
290
|
+
.input-bar {
|
|
291
|
+
padding: 16px 24px;
|
|
292
|
+
background: #fff;
|
|
293
|
+
border-top: 1px solid #e5e7eb;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.input-row {
|
|
297
|
+
display: flex;
|
|
298
|
+
gap: 10px;
|
|
299
|
+
align-items: flex-end;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.input-field {
|
|
303
|
+
flex: 1;
|
|
304
|
+
padding: 12px 16px;
|
|
305
|
+
border: 2px solid #e5e7eb;
|
|
306
|
+
border-radius: 14px;
|
|
307
|
+
font-size: 14px;
|
|
308
|
+
font-family: inherit;
|
|
309
|
+
resize: none;
|
|
310
|
+
outline: none;
|
|
311
|
+
transition: border-color 0.2s;
|
|
312
|
+
min-height: 46px;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.input-field:focus {
|
|
316
|
+
border-color: #22c55e;
|
|
317
|
+
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.send-btn {
|
|
321
|
+
width: 46px;
|
|
322
|
+
height: 46px;
|
|
323
|
+
border-radius: 14px;
|
|
324
|
+
border: none;
|
|
325
|
+
background: #22c55e;
|
|
326
|
+
color: white;
|
|
327
|
+
font-size: 18px;
|
|
328
|
+
cursor: pointer;
|
|
329
|
+
display: flex;
|
|
330
|
+
align-items: center;
|
|
331
|
+
justify-content: center;
|
|
332
|
+
transition: background 0.15s;
|
|
333
|
+
flex-shrink: 0;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.send-btn:hover {
|
|
337
|
+
background: #16a34a;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.input-hint {
|
|
341
|
+
font-size: 11px;
|
|
342
|
+
color: #9ca3af;
|
|
343
|
+
margin-top: 6px;
|
|
344
|
+
text-align: center;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/* ---- RIGHT PANEL (output) ---- */
|
|
348
|
+
.output-panel {
|
|
349
|
+
width: 360px;
|
|
350
|
+
background: #fff;
|
|
351
|
+
border-left: 1px solid #e5e7eb;
|
|
352
|
+
display: flex;
|
|
353
|
+
flex-direction: column;
|
|
354
|
+
flex-shrink: 0;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.output-header {
|
|
358
|
+
padding: 16px 20px;
|
|
359
|
+
border-bottom: 1px solid #e5e7eb;
|
|
360
|
+
display: flex;
|
|
361
|
+
align-items: center;
|
|
362
|
+
justify-content: space-between;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.output-header h3 {
|
|
366
|
+
font-size: 14px;
|
|
367
|
+
font-weight: 600;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.tab-row {
|
|
371
|
+
display: flex;
|
|
372
|
+
gap: 2px;
|
|
373
|
+
background: #f3f4f6;
|
|
374
|
+
border-radius: 8px;
|
|
375
|
+
padding: 2px;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.tab {
|
|
379
|
+
padding: 6px 14px;
|
|
380
|
+
border: none;
|
|
381
|
+
background: transparent;
|
|
382
|
+
border-radius: 6px;
|
|
383
|
+
font-size: 12px;
|
|
384
|
+
font-family: inherit;
|
|
385
|
+
cursor: pointer;
|
|
386
|
+
color: #6b7280;
|
|
387
|
+
font-weight: 500;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.tab.active {
|
|
391
|
+
background: #fff;
|
|
392
|
+
color: #1a1a2e;
|
|
393
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.output-body {
|
|
397
|
+
flex: 1;
|
|
398
|
+
display: flex;
|
|
399
|
+
flex-direction: column;
|
|
400
|
+
align-items: center;
|
|
401
|
+
justify-content: center;
|
|
402
|
+
padding: 40px 24px;
|
|
403
|
+
text-align: center;
|
|
404
|
+
color: #9ca3af;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.output-body .icon {
|
|
408
|
+
font-size: 48px;
|
|
409
|
+
margin-bottom: 16px;
|
|
410
|
+
opacity: 0.4;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.output-body p {
|
|
414
|
+
font-size: 14px;
|
|
415
|
+
line-height: 1.5;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.file-list {
|
|
419
|
+
padding: 12px 20px;
|
|
420
|
+
display: flex;
|
|
421
|
+
flex-direction: column;
|
|
422
|
+
gap: 2px;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.file-item {
|
|
426
|
+
display: flex;
|
|
427
|
+
align-items: center;
|
|
428
|
+
gap: 8px;
|
|
429
|
+
padding: 8px 10px;
|
|
430
|
+
border-radius: 8px;
|
|
431
|
+
font-size: 13px;
|
|
432
|
+
color: #374151;
|
|
433
|
+
cursor: pointer;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.file-item:hover {
|
|
437
|
+
background: #f5f5f0;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.file-icon {
|
|
441
|
+
font-size: 14px;
|
|
442
|
+
opacity: 0.6;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.file-badge {
|
|
446
|
+
margin-left: auto;
|
|
447
|
+
font-size: 10px;
|
|
448
|
+
padding: 2px 8px;
|
|
449
|
+
border-radius: 100px;
|
|
450
|
+
background: #dcfce7;
|
|
451
|
+
color: #16a34a;
|
|
452
|
+
font-weight: 600;
|
|
453
|
+
}
|
|
454
|
+
</style>
|
|
455
|
+
</head>
|
|
456
|
+
<body>
|
|
457
|
+
<!-- LEFT SIDEBAR -->
|
|
458
|
+
<div class="sidebar">
|
|
459
|
+
<div class="sidebar-header">
|
|
460
|
+
<h2>my-portfolio</h2>
|
|
461
|
+
<p>~/Claude/my-portfolio</p>
|
|
462
|
+
</div>
|
|
463
|
+
|
|
464
|
+
<div class="sidebar-section">
|
|
465
|
+
<h4>Try asking</h4>
|
|
466
|
+
<button class="suggestion-btn"><span class="suggestion-icon">🎨</span> Change the color scheme</button>
|
|
467
|
+
<button class="suggestion-btn"><span class="suggestion-icon">📱</span> Make it work on mobile</button>
|
|
468
|
+
<button class="suggestion-btn"><span class="suggestion-icon">📸</span> Add an image gallery</button>
|
|
469
|
+
<button class="suggestion-btn"><span class="suggestion-icon">✉️</span> Add a contact form</button>
|
|
470
|
+
<button class="suggestion-btn"><span class="suggestion-icon">🌙</span> Add dark mode</button>
|
|
471
|
+
</div>
|
|
472
|
+
|
|
473
|
+
<div class="sidebar-section">
|
|
474
|
+
<h4>Files changed</h4>
|
|
475
|
+
<div class="file-list" style="padding: 0;">
|
|
476
|
+
<div class="file-item"><span class="file-icon">📄</span> index.html <span class="file-badge">new</span></div>
|
|
477
|
+
<div class="file-item"><span class="file-icon">🎨</span> styles.css <span class="file-badge">new</span></div>
|
|
478
|
+
<div class="file-item"><span class="file-icon">⚡</span> app.js <span class="file-badge">new</span></div>
|
|
479
|
+
<div class="file-item"><span class="file-icon">📦</span> package.json <span class="file-badge">new</span></div>
|
|
480
|
+
</div>
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<!-- MAIN CHAT -->
|
|
485
|
+
<div class="chat-area">
|
|
486
|
+
<div class="chat-header">
|
|
487
|
+
<div class="chat-header-left">
|
|
488
|
+
<div class="avatar avatar-claude">🤖</div>
|
|
489
|
+
<div>
|
|
490
|
+
<h3>Claude</h3>
|
|
491
|
+
<div class="status"><span class="status-dot"></span> Working on your project</div>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
|
|
496
|
+
<div class="messages">
|
|
497
|
+
<!-- User message -->
|
|
498
|
+
<div class="message message-user">
|
|
499
|
+
<div class="message-bubble">
|
|
500
|
+
A portfolio site for my photography business with a gallery, about page, and contact form
|
|
501
|
+
</div>
|
|
502
|
+
</div>
|
|
503
|
+
|
|
504
|
+
<!-- Claude response -->
|
|
505
|
+
<div class="message message-claude">
|
|
506
|
+
<div class="message-sender">
|
|
507
|
+
<span class="avatar avatar-claude" style="width:20px;height:20px;font-size:11px;border-radius:6px;">🤖</span>
|
|
508
|
+
Claude
|
|
509
|
+
</div>
|
|
510
|
+
<div class="message-bubble">
|
|
511
|
+
Great choice! I'll build you a photography portfolio with these sections:
|
|
512
|
+
<br><br>
|
|
513
|
+
<strong>Homepage</strong> — Hero image with your name and tagline<br>
|
|
514
|
+
<strong>Gallery</strong> — Masonry grid of your best photos<br>
|
|
515
|
+
<strong>About</strong> — Your story and experience<br>
|
|
516
|
+
<strong>Contact</strong> — Simple form for inquiries
|
|
517
|
+
<br><br>
|
|
518
|
+
Let me set everything up for you.
|
|
519
|
+
|
|
520
|
+
<div class="steps">
|
|
521
|
+
<div class="step step-done">
|
|
522
|
+
<span class="step-icon">✓</span>
|
|
523
|
+
<span>Created project structure</span>
|
|
524
|
+
</div>
|
|
525
|
+
<div class="step step-done">
|
|
526
|
+
<span class="step-icon">✓</span>
|
|
527
|
+
<span>Set up homepage with hero section</span>
|
|
528
|
+
</div>
|
|
529
|
+
<div class="step step-done">
|
|
530
|
+
<span class="step-icon">✓</span>
|
|
531
|
+
<span>Built photo gallery with lightbox</span>
|
|
532
|
+
</div>
|
|
533
|
+
<div class="step step-active">
|
|
534
|
+
<span class="step-icon">⋯</span>
|
|
535
|
+
<span>Adding contact form...</span>
|
|
536
|
+
</div>
|
|
537
|
+
<div class="step step-pending">
|
|
538
|
+
<span class="step-icon">○</span>
|
|
539
|
+
<span>Polish and final touches</span>
|
|
540
|
+
</div>
|
|
541
|
+
</div>
|
|
542
|
+
|
|
543
|
+
<!-- Collapsible code details -->
|
|
544
|
+
<div class="work-card">
|
|
545
|
+
<div class="work-card-header">
|
|
546
|
+
📝 See what I'm writing
|
|
547
|
+
<span style="margin-left:auto; font-size:10px; color:#9ca3af;">▾</span>
|
|
548
|
+
</div>
|
|
549
|
+
<div class="work-card-body">
|
|
550
|
+
<div class="line-file">// src/components/Gallery.jsx</div>
|
|
551
|
+
<div class="line-added">+ export function Gallery({ photos }) {</div>
|
|
552
|
+
<div class="line-added">+ return (</div>
|
|
553
|
+
<div class="line-added">+ <div className="masonry-grid"></div>
|
|
554
|
+
<div class="line-added">+ {photos.map(photo => (</div>
|
|
555
|
+
<div class="line-added">+ <GalleryItem key={photo.id} ... /></div>
|
|
556
|
+
<div class="line-added">+ ))}</div>
|
|
557
|
+
<div class="line-added">+ </div></div>
|
|
558
|
+
<div class="line-added">+ )</div>
|
|
559
|
+
<div class="line-added">+ }</div>
|
|
560
|
+
</div>
|
|
561
|
+
</div>
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
|
|
566
|
+
<!-- Input -->
|
|
567
|
+
<div class="input-bar">
|
|
568
|
+
<div class="input-row">
|
|
569
|
+
<textarea class="input-field" placeholder="Ask Claude to change something..." rows="1"></textarea>
|
|
570
|
+
<button class="send-btn">↑</button>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="input-hint">Press Enter to send. Claude can edit files, add features, and fix bugs.</div>
|
|
573
|
+
</div>
|
|
574
|
+
</div>
|
|
575
|
+
|
|
576
|
+
<!-- RIGHT PANEL -->
|
|
577
|
+
<div class="output-panel">
|
|
578
|
+
<div class="output-header">
|
|
579
|
+
<h3>Preview</h3>
|
|
580
|
+
<div class="tab-row">
|
|
581
|
+
<button class="tab active">Preview</button>
|
|
582
|
+
<button class="tab">Files</button>
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
<div class="output-body">
|
|
586
|
+
<div class="icon">🖼️</div>
|
|
587
|
+
<p>Your site will appear here once Claude starts the dev server.</p>
|
|
588
|
+
<p style="margin-top:8px; font-size:12px;">Usually takes about 30 seconds.</p>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
</body>
|
|
592
|
+
</html>
|