Hugging Face's logo

Spaces:
apicodex
/
h
Running

App Files Community
apicodex commited on
Commit
d372e08
·
verified ·
1 Parent(s): 26a2e47

remove export button and selected button add * Prompt Enhancements: The chat composer includes toggles for features like "Web Search" and "Generate Images" to enhance AI capabilities. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +543 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: H
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: h
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,543 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>v0 Clone - AI Code Generation Tool</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .resize-handle {
11
+ width: 4px;
12
+ background-color: rgba(55, 65, 81, 0.5);
13
+ cursor: col-resize;
14
+ transition: background-color 0.2s;
15
+ }
16
+ .resize-handle:hover {
17
+ background-color: rgba(55, 65, 81, 0.8);
18
+ }
19
+ .tab-active {
20
+ border-bottom: 2px solid #3b82f6;
21
+ color: #3b82f6;
22
+ }
23
+ .chat-bubble-ai {
24
+ background-color: #374151;
25
+ border-radius: 0.75rem 0.75rem 0.75rem 0;
26
+ }
27
+ .chat-bubble-user {
28
+ background-color: #3b82f6;
29
+ border-radius: 0.75rem 0.75rem 0 0.75rem;
30
+ }
31
+ .code-editor {
32
+ font-family: 'Courier New', Courier, monospace;
33
+ font-size: 14px;
34
+ line-height: 1.5;
35
+ }
36
+ .diff-added {
37
+ background-color: rgba(74, 222, 128, 0.1);
38
+ animation: highlightAdded 1.5s ease-out;
39
+ }
40
+ .diff-removed {
41
+ background-color: rgba(248, 113, 113, 0.1);
42
+ animation: highlightRemoved 1.5s ease-out;
43
+ }
44
+ @keyframes highlightAdded {
45
+ 0% { background-color: rgba(74, 222, 128, 0.3); }
46
+ 100% { background-color: rgba(74, 222, 128, 0.1); }
47
+ }
48
+ @keyframes highlightRemoved {
49
+ 0% { background-color: rgba(248, 113, 113, 0.3); }
50
+ 100% { background-color: rgba(248, 113, 113, 0.1); }
51
+ }
52
+ .file-change-count {
53
+ font-size: 0.7rem;
54
+ padding: 0.1rem 0.3rem;
55
+ border-radius: 0.2rem;
56
+ font-feature-settings: "tnum";
57
+ font-variant-numeric: tabular-nums;
58
+ }
59
+ .preview-container {
60
+ transform-origin: top left;
61
+ }
62
+ @media (max-width: 768px) {
63
+ .mobile-stack {
64
+ flex-direction: column;
65
+ }
66
+ .mobile-full-width {
67
+ width: 100% !important;
68
+ }
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden">
73
+ <!-- Top Navigation -->
74
+ <header class="bg-gray-800 px-4 py-2 flex items-center justify-between">
75
+ <div class="flex items-center space-x-4">
76
+ <h1 class="text-xl font-bold text-blue-400">v0 Clone</h1>
77
+ <div class="hidden md:flex space-x-2">
78
+ <button class="px-3 py-1 rounded hover:bg-gray-700">New Project</button>
79
+ <button class="px-3 py-1 rounded hover:bg-gray-700">Templates</button>
80
+ <button class="px-3 py-1 rounded hover:bg-gray-700">Examples</button>
81
+ </div>
82
+ </div>
83
+ <div class="flex items-center space-x-3">
84
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded">Deploy</button>
85
+ <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
86
+ <i class="fas fa-user"></i>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Main Content Area -->
92
+ <div class="flex-1 flex overflow-hidden mobile-stack">
93
+ <!-- Left Pane -->
94
+ <div class="w-1/2 flex flex-col mobile-full-width" style="min-width: 300px;">
95
+ <!-- Left Pane Tabs -->
96
+ <div class="flex border-b border-gray-700">
97
+ <button id="chat-tab" class="flex-1 py-3 px-4 font-medium tab-active">
98
+ <i class="fas fa-comment-dots mr-2"></i>Chat
99
+ </button>
100
+ <button id="design-tab" class="flex-1 py-3 px-4 font-medium">
101
+ <i class="fas fa-paint-brush mr-2"></i>Design
102
+ </button>
103
+ </div>
104
+
105
+ <!-- Chat Mode Content -->
106
+ <div id="chat-content" class="flex-1 flex flex-col overflow-hidden">
107
+ <div class="flex-1 overflow-y-auto p-4" id="chat-messages">
108
+ <div class="h-full flex flex-col items-center justify-center text-center px-8">
109
+ <div class="max-w-md mx-auto">
110
+ <div class="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
111
+ <i class="fas fa-robot text-2xl text-blue-400"></i>
112
+ </div>
113
+ <h3 class="text-xl font-medium mb-2">Design Assistant</h3>
114
+ <p class="text-gray-400 mb-6">Describe what you'd like to create and I'll help you build it. You can:</p>
115
+ <div class="grid grid-cols-2 gap-3 text-sm">
116
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3">
117
+ <i class="fas fa-paint-brush text-blue-400 mr-2"></i>
118
+ Generate UI
119
+ </button>
120
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3">
121
+ <i class="fas fa-code text-blue-400 mr-2"></i>
122
+ Create Component
123
+ </button>
124
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3">
125
+ <i class="fas fa-search text-blue-400 mr-2"></i>
126
+ Web Search
127
+ </button>
128
+ <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3">
129
+ <i class="fas fa-image text-blue-400 mr-2"></i>
130
+ Generate Images
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- User Input Area -->
138
+ <div class="p-4 border-t border-gray-700">
139
+ <div class="relative flex items-center space-x-2">
140
+ <button class="p-2 rounded-full hover:bg-gray-700" title="Attach files">
141
+ <i class="fas fa-paperclip text-gray-400"></i>
142
+ </button>
143
+ <input type="text" placeholder="Describe what you want to create..."
144
+ class="flex-1 bg-gray-700 border border-gray-600 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500">
145
+ <div class="flex items-center space-x-1">
146
+ <button class="p-2 rounded-full hover:bg-gray-700 relative group" title="Enhancements">
147
+ <i class="fas fa-bolt text-yellow-400"></i>
148
+ <div class="absolute hidden group-hover:block bottom-full right-0 mb-2 w-48 bg-gray-800 rounded-lg shadow-lg z-10">
149
+ <div class="p-2 space-y-2">
150
+ <div class="flex items-center justify-between px-2 py-1 hover:bg-gray-700 rounded">
151
+ <span class="text-sm">Web Search</span>
152
+ <label class="relative inline-flex items-center cursor-pointer">
153
+ <input type="checkbox" class="sr-only peer" checked>
154
+ <div class="w-8 h-4 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div>
155
+ </label>
156
+ </div>
157
+ <div class="flex items-center justify-between px-2 py-1 hover:bg-gray-700 rounded">
158
+ <span class="text-sm">Generate Images</span>
159
+ <label class="relative inline-flex items-center cursor-pointer">
160
+ <input type="checkbox" class="sr-only peer">
161
+ <div class="w-8 h-4 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-600"></div>
162
+ </label>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </button>
167
+ <button class="p-2 rounded-full bg-blue-600 hover:bg-blue-700" title="Send message">
168
+ <i class="fas fa-paper-plane"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+ <div class="flex justify-between mt-2 px-2">
173
+ <span class="text-xs text-gray-500">Selected: <span id="selected-element" class="text-gray-400">None</span></span>
174
+ <div class="flex space-x-2">
175
+ <button class="text-xs px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded" title="Add to codebase">
176
+ <i class="fas fa-code-branch mr-1"></i> Export
177
+ </button>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Design Mode Content (Hidden by default) -->
184
+ <div id="design-content" class="hidden flex-1 flex flex-col overflow-hidden">
185
+ <div class="p-4 border-b border-gray-700">
186
+ <h3 class="font-medium mb-3">Style Controls</h3>
187
+ <div class="space-y-4">
188
+ <div>
189
+ <label class="block text-sm text-gray-400 mb-1">Background Color</label>
190
+ <div class="flex space-x-2">
191
+ <div class="w-8 h-8 rounded bg-blue-900 border-2 border-blue-400 cursor-pointer" data-color="bg-blue-900"></div>
192
+ <div class="w-8 h-8 rounded bg-purple-900 border border-gray-600 cursor-pointer" data-color="bg-purple-900"></div>
193
+ <div class="w-8 h-8 rounded bg-gray-800 border border-gray-600 cursor-pointer" data-color="bg-gray-800"></div>
194
+ <div class="w-8 h-8 rounded bg-white border border-gray-600 cursor-pointer" data-color="bg-white"></div>
195
+ <input type="text" placeholder="#hex or class" class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm" id="bg-color-input">
196
+ </div>
197
+ </div>
198
+ <div>
199
+ <label class="block text-sm text-gray-400 mb-1">Text Color</label>
200
+ <div class="flex space-x-2">
201
+ <div class="w-8 h-8 rounded-full bg-white border-2 border-blue-400 cursor-pointer" data-color="text-white"></div>
202
+ <div class="w-8 h-8 rounded-full bg-gray-200 border border-gray-600 cursor-pointer" data-color="text-gray-200"></div>
203
+ <div class="w-8 h-8 rounded-full bg-blue-400 border border-gray-600 cursor-pointer" data-color="text-blue-400"></div>
204
+ <input type="text" placeholder="#hex or class" class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm" id="text-color-input">
205
+ </div>
206
+ </div>
207
+ <div>
208
+ <label class="block text-sm text-gray-400 mb-1">Font Family</label>
209
+ <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm" id="font-family-select">
210
+ <option value="font-sans">Sans (Default)</option>
211
+ <option value="font-serif">Serif</option>
212
+ <option value="font-mono">Mono</option>
213
+ </select>
214
+ </div>
215
+ <div>
216
+ <label class="block text-sm text-gray-400 mb-1">Button Style</label>
217
+ <div class="grid grid-cols-2 gap-2">
218
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm" data-btn-style="bg-blue-600">Blue</button>
219
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm" data-btn-style="bg-gray-600">Gray</button>
220
+ <button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm" data-btn-style="bg-purple-600">Purple</button>
221
+ <button class="px-3 py-1 border border-gray-400 hover:bg-gray-700 rounded text-sm" data-btn-style="border">Outline</button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="p-4 border-t border-gray-700">
228
+ <h3 class="font-medium mb-3">Layout Controls</h3>
229
+ <div class="space-y-4">
230
+ <div>
231
+ <label class="block text-sm text-gray-400 mb-1">Container Width</label>
232
+ <div class="flex space-x-2">
233
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-width="w-full">Full</button>
234
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-width="w-3/4">3/4</button>
235
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-width="w-1/2">1/2</button>
236
+ </div>
237
+ </div>
238
+ <div>
239
+ <label class="block text-sm text-gray-400 mb-1">Padding</label>
240
+ <div class="flex space-x-2">
241
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-padding="p-4">Medium</button>
242
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-padding="p-8">Large</button>
243
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-padding="p-2">Small</button>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Resize Handle -->
252
+ <div class="resize-handle"></div>
253
+
254
+ <!-- Right Pane -->
255
+ <div class="flex-1 flex flex-col mobile-full-width">
256
+ <!-- Right Pane Tabs -->
257
+ <div class="flex border-b border-gray-700">
258
+ <button id="preview-tab" class="flex-1 py-3 px-4 font-medium tab-active">
259
+ <i class="fas fa-eye mr-2"></i>Preview
260
+ </button>
261
+ <button id="code-tab" class="flex-1 py-3 px-4 font-medium">
262
+ <i class="fas fa-code mr-2"></i>Code
263
+ </button>
264
+ <button id="settings-tab" class="px-4 py-3 text-gray-400 hover:text-white">
265
+ <i class="fas fa-cog"></i>
266
+ </button>
267
+ </div>
268
+
269
+ <!-- Preview Mode Content -->
270
+ <div id="preview-content" class="flex-1 overflow-auto bg-white flex items-center justify-center">
271
+ <div class="text-center p-8 text-gray-400">
272
+ <i class="fas fa-code text-5xl mb-4"></i>
273
+ <p>Your preview will appear here as you generate code</p>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Code Mode Content (Hidden by default) -->
278
+ <div id="code-content" class="hidden flex-1 flex overflow-hidden">
279
+ <!-- File Tree -->
280
+ <div class="w-64 bg-gray-800 border-r border-gray-700 overflow-y-auto">
281
+ <div class="p-3">
282
+ <div class="flex items-center justify-between mb-2">
283
+ <h3 class="font-medium">Files</h3>
284
+ <button class="text-blue-400 hover:text-blue-300 text-sm">
285
+ <i class="fas fa-plus"></i>
286
+ </button>
287
+ </div>
288
+ <div class="space-y-1" id="file-tree">
289
+ <div class="text-gray-500 text-sm p-2">No files yet</div>
290
+ <!-- Sample file with diff counts -->
291
+ <div class="file-item hidden flex items-center justify-between px-2 py-1 hover:bg-gray-700 rounded cursor-pointer">
292
+ <div class="flex items-center">
293
+ <i class="fas fa-file-code text-blue-400 mr-2 text-xs"></i>
294
+ <span class="text-sm">index.html</span>
295
+ </div>
296
+ <div class="diff-counts hidden flex items-center space-x-1">
297
+ <span class="text-xs bg-green-900 text-green-300 px-1 rounded">+0</span>
298
+ <span class="text-xs bg-red-900 text-red-300 px-1 rounded">-0</span>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Code Editor -->
306
+ <div class="flex-1 flex flex-col overflow-hidden">
307
+ <div class="flex items-center bg-gray-800 p-2">
308
+ <div class="flex-1 flex items-center">
309
+ <i class="fas fa-file-code text-blue-400 mr-2 ml-2"></i>
310
+ <span>index.html</span>
311
+ </div>
312
+ <div class="flex items-center space-x-2">
313
+ <button class="p-1 rounded hover:bg-gray-700">
314
+ <i class="fas fa-copy"></i>
315
+ </button>
316
+ <button class="p-1 rounded hover:bg-gray-700">
317
+ <i class="fas fa-share"></i>
318
+ </button>
319
+ </div>
320
+ </div>
321
+ <div class="flex-1 overflow-auto code-editor bg-gray-900 p-4">
322
+ <pre class="text-gray-500 text-center pt-8">Select a file to view or edit its contents</pre>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Version Control -->
327
+ <div class="w-64 bg-gray-800 border-l border-gray-700 overflow-y-auto">
328
+ <div class="p-3">
329
+ <h3 class="font-medium mb-3">Version History</h3>
330
+ <div class="space-y-2" id="version-history">
331
+ <div class="text-gray-500 text-xs p-2">No versions yet - changes will be tracked automatically</div>
332
+ <!-- Sample version item -->
333
+ <div class="version-item hidden px-2 py-1 text-xs hover:bg-gray-700 rounded cursor-pointer">
334
+ <div class="flex justify-between items-center">
335
+ <span>v0.1.2</span>
336
+ <span class="text-gray-400">2m ago</span>
337
+ </div>
338
+ <div class="flex space-x-1 mt-1">
339
+ <span class="file-change-count bg-green-900 text-green-300">+8</span>
340
+ <span class="file-change-count bg-red-900 text-red-300">-2</span>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="p-3 border-t border-gray-700">
346
+ <h3 class="font-medium mb-2">Changes</h3>
347
+ <div class="text-sm space-y-1 text-gray-500">
348
+ No changes yet - your modifications will appear here
349
+ </div>
350
+ <div class="mt-3 flex space-x-2">
351
+ <button class="flex-1 px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">
352
+ <i class="fas fa-undo mr-1"></i> Undo
353
+ </button>
354
+ <button class="flex-1 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">
355
+ <i class="fas fa-redo mr-1"></i> Redo
356
+ </button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Settings Modal (Hidden by default) -->
363
+ <div id="settings-content" class="hidden flex-1 overflow-auto bg-gray-800 p-6">
364
+ <h2 class="text-xl font-bold mb-6">Project Settings</h2>
365
+
366
+ <div class="flex border-b border-gray-700 mb-6">
367
+ <button class="px-4 py-2 font-medium tab-active">Overview</button>
368
+ <button class="px-4 py-2 font-medium">Integrations</button>
369
+ <button class="px-4 py-2 font-medium">Environment Variables</button>
370
+ <button class="px-4 py-2 font-medium">Knowledge</button>
371
+ <button class="px-4 py-2 font-medium">Community</button>
372
+ </div>
373
+
374
+ <div class="space-y-6">
375
+ <div class="bg-gray-700 rounded-lg p-4">
376
+ <h3 class="font-medium mb-3">Deployment</h3>
377
+ <div class="space-y-3">
378
+ <div class="flex items-center justify-between">
379
+ <div>
380
+ <div class="font-medium">Vercel</div>
381
+ <div class="text-sm text-gray-400">Not connected</div>
382
+ </div>
383
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">
384
+ Connect
385
+ </button>
386
+ </div>
387
+ <div class="flex items-center justify-between">
388
+ <div>
389
+ <div class="font-medium">GitHub</div>
390
+ <div class="text-sm text-gray-400">Not connected</div>
391
+ </div>
392
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">
393
+ Connect
394
+ </button>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="bg-gray-700 rounded-lg p-4">
400
+ <h3 class="font-medium mb-3">Branding</h3>
401
+ <div class="flex items-center justify-between">
402
+ <div>
403
+ <div>Built with v0 Button</div>
404
+ <div class="text-sm text-gray-400">Show that this was built with v0</div>
405
+ </div>
406
+ <label class="relative inline-flex items-center cursor-pointer">
407
+ <input type="checkbox" value="" class="sr-only peer" checked>
408
+ <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
409
+ </label>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="bg-gray-700 rounded-lg p-4">
414
+ <h3 class="font-medium mb-3">Publish to Community</h3>
415
+ <p class="text-sm text-gray-400 mb-3">Share your project with the v0 community after review.</p>
416
+ <div class="flex items-center justify-between">
417
+ <div class="font-medium">Publish Status</div>
418
+ <div class="text-sm px-2 py-1 bg-gray-600 rounded">Not Published</div>
419
+ </div>
420
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded">
421
+ Submit for Review
422
+ </button>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <script>
430
+ // Tab switching functionality
431
+ document.getElementById('chat-tab').addEventListener('click', function() {
432
+ document.getElementById('chat-content').classList.remove('hidden');
433
+ document.getElementById('design-content').classList.add('hidden');
434
+ document.getElementById('chat-tab').classList.add('tab-active');
435
+ document.getElementById('design-tab').classList.remove('tab-active');
436
+ });
437
+
438
+ document.getElementById('design-tab').addEventListener('click', function() {
439
+ document.getElementById('design-content').classList.remove('hidden');
440
+ document.getElementById('chat-content').classList.add('hidden');
441
+ document.getElementById('design-tab').classList.add('tab-active');
442
+ document.getElementById('chat-tab').classList.remove('tab-active');
443
+ });
444
+
445
+ document.getElementById('preview-tab').addEventListener('click', function() {
446
+ document.getElementById('preview-content').classList.remove('hidden');
447
+ document.getElementById('code-content').classList.add('hidden');
448
+ document.getElementById('settings-content').classList.add('hidden');
449
+ document.getElementById('preview-tab').classList.add('tab-active');
450
+ document.getElementById('code-tab').classList.remove('tab-active');
451
+ });
452
+
453
+ document.getElementById('code-tab').addEventListener('click', function() {
454
+ document.getElementById('code-content').classList.remove('hidden');
455
+ document.getElementById('preview-content').classList.add('hidden');
456
+ document.getElementById('settings-content').classList.add('hidden');
457
+ document.getElementById('code-tab').classList.add('tab-active');
458
+ document.getElementById('preview-tab').classList.remove('tab-active');
459
+ });
460
+
461
+ document.getElementById('settings-tab').addEventListener('click', function() {
462
+ document.getElementById('settings-content').classList.remove('hidden');
463
+ document.getElementById('preview-content').classList.add('hidden');
464
+ document.getElementById('code-content').classList.add('hidden');
465
+ });
466
+
467
+ // Resizable panes functionality
468
+ const resizeHandle = document.querySelector('.resize-handle');
469
+ const leftPane = document.querySelector('.mobile-stack > div:first-child');
470
+ const rightPane = document.querySelector('.mobile-stack > div:last-child');
471
+
472
+ let isResizing = false;
473
+
474
+ resizeHandle.addEventListener('mousedown', (e) => {
475
+ isResizing = true;
476
+ document.body.style.cursor = 'col-resize';
477
+ document.addEventListener('mousemove', handleResize);
478
+ document.addEventListener('mouseup', stopResize);
479
+ });
480
+
481
+ function handleResize(e) {
482
+ if (!isResizing) return;
483
+
484
+ const containerWidth = document.querySelector('.mobile-stack').clientWidth;
485
+ const newLeftWidth = (e.clientX / containerWidth) * 100;
486
+
487
+ if (newLeftWidth > 20 && newLeftWidth < 80) {
488
+ leftPane.style.width = `${newLeftWidth}%`;
489
+ rightPane.style.width = `${100 - newLeftWidth}%`;
490
+ }
491
+ }
492
+
493
+ function stopResize() {
494
+ isResizing = false;
495
+ document.body.style.cursor = '';
496
+ document.removeEventListener('mousemove', handleResize);
497
+ document.removeEventListener('mouseup', stopResize);
498
+ }
499
+
500
+ // File change simulation
501
+ function updateFileChanges(filename, addedLines, removedLines) {
502
+ const fileItem = document.querySelector('.file-item');
503
+ const diffCounts = fileItem.querySelector('.diff-counts');
504
+
505
+ if (fileItem) {
506
+ fileItem.classList.remove('hidden');
507
+
508
+ if (addedLines > 0 || removedLines > 0) {
509
+ diffCounts.classList.remove('hidden');
510
+ diffCounts.querySelector('span:first-child').textContent = `+${addedLines}`;
511
+ diffCounts.querySelector('span:last-child').textContent = `-${removedLines}`;
512
+
513
+ // Highlight changes
514
+ fileItem.classList.add('diff-added');
515
+ setTimeout(() => {
516
+ fileItem.classList.remove('diff-added');
517
+ }, 1500);
518
+ } else {
519
+ diffCounts.classList.add('hidden');
520
+ }
521
+ }
522
+ }
523
+
524
+ // Mobile responsiveness
525
+ function checkMobile() {
526
+ if (window.innerWidth <= 768) {
527
+ leftPane.classList.add('mobile-full-width');
528
+ rightPane.classList.add('mobile-full-width');
529
+ leftPane.classList.remove('hidden');
530
+ rightPane.classList.add('hidden');
531
+ } else {
532
+ leftPane.classList.remove('mobile-full-width');
533
+ rightPane.classList.remove('mobile-full-width');
534
+ leftPane.classList.remove('hidden');
535
+ rightPane.classList.remove('hidden');
536
+ }
537
+ }
538
+
539
+ window.addEventListener('resize', checkMobile);
540
+ checkMobile();
541
+ </script>
542
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=apicodex/h" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
543
+ </html>