Hugging Face's logo

Spaces:
basheer1414
/
builder
Running

App Files Community
basheer1414 commited on
Commit
7f6058c
·
verified ·
1 Parent(s): 15a53c4

Which is working right now but there's a problem when I'm dragging element it's automatically i just think its size i don't want i....tions only i don't want automatically and make it like a natural smooth animation when I'm dragging some element from component section to canvas and when I'm resizing I want it's natural or when I'm dragging also I want it feels like premium application how they are using like that - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +747 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Builder
3
- emoji: 🐢
4
- colorFrom: purple
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: builder
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
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,747 @@
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>EVA UI Builder | AI-Powered Interface Designer</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
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10
+ <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ dark: {
18
+ 900: '#0A0A0F',
19
+ 800: '#121218',
20
+ 700: '#1A1A25',
21
+ 600: '#232331',
22
+ },
23
+ accent: {
24
+ blue: '#00D4FF',
25
+ purple: '#7A00FF',
26
+ pink: '#FF00C8',
27
+ }
28
+ },
29
+ boxShadow: {
30
+ 'glow': '0 0 15px rgba(0, 212, 255, 0.5)',
31
+ 'glow-purple': '0 0 15px rgba(122, 0, 255, 0.5)',
32
+ 'glow-pink': '0 0 15px rgba(255, 0, 200, 0.5)',
33
+ },
34
+ animation: {
35
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
36
+ 'float': 'float 6s ease-in-out infinite',
37
+ },
38
+ keyframes: {
39
+ float: {
40
+ '0%, 100%': { transform: 'translateY(0)' },
41
+ '50%': { transform: 'translateY(-10px)' },
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ </script>
48
+ <script>
49
+ $(document).ready(function() {
50
+ // Make elements draggable
51
+ $('.element-card').draggable({
52
+ helper: 'clone',
53
+ cursor: 'move',
54
+ zIndex: 1000,
55
+ revert: 'invalid'
56
+ });
57
+
58
+ // Make canvas a drop zone
59
+ $('#dropZone').droppable({
60
+ accept: '.element-card',
61
+ drop: function(event, ui) {
62
+ const elementType = ui.draggable.data('element');
63
+ addElementToCanvas(elementType);
64
+ }
65
+ });
66
+
67
+ // Function to add element to canvas
68
+ function addElementToCanvas(type) {
69
+ const elementId = 'element-' + Date.now();
70
+ let elementHTML = '';
71
+
72
+ switch(type) {
73
+ case 'button':
74
+ elementHTML = `
75
+ <div class="canvas-element glass-panel p-2 rounded flex items-center justify-center absolute"
76
+ style="width: 120px; height: 40px; top: 100px; left: 100px;"
77
+ id="${elementId}">
78
+ <span class="text-sm">Button</span>
79
+ <div class="resizer resizer-nw"></div>
80
+ <div class="resizer resizer-ne"></div>
81
+ <div class="resizer resizer-sw"></div>
82
+ <div class="resizer resizer-se"></div>
83
+ <div class="rotator"></div>
84
+ </div>
85
+ `;
86
+ break;
87
+ case 'input':
88
+ elementHTML = `
89
+ <div class="canvas-element glass-panel p-2 rounded absolute"
90
+ style="width: 200px; height: 40px; top: 100px; left: 100px;"
91
+ id="${elementId}">
92
+ <input type="text" placeholder="Input field" class="w-full h-full bg-transparent border border-gray-600 rounded px-2 text-sm">
93
+ <div class="resizer resizer-nw"></div>
94
+ <div class="resizer resizer-ne"></div>
95
+ <div class="resizer resizer-sw"></div>
96
+ <div class="resizer resizer-se"></div>
97
+ <div class="rotator"></div>
98
+ </div>
99
+ `;
100
+ break;
101
+ case 'card':
102
+ elementHTML = `
103
+ <div class="canvas-element glass-panel p-4 rounded absolute"
104
+ style="width: 250px; height: 150px; top: 100px; left: 100px;"
105
+ id="${elementId}">
106
+ <h3 class="font-semibold mb-2">Card Title</h3>
107
+ <p class="text-xs">Card content goes here...</p>
108
+ <div class="resizer resizer-nw"></div>
109
+ <div class="resizer resizer-ne"></div>
110
+ <div class="resizer resizer-sw"></div>
111
+ <div class="resizer resizer-se"></div>
112
+ <div class="rotator"></div>
113
+ </div>
114
+ `;
115
+ break;
116
+ case 'image':
117
+ elementHTML = `
118
+ <div class="canvas-element glass-panel rounded absolute flex items-center justify-center"
119
+ style="width: 200px; height: 150px; top: 100px; left: 100px;"
120
+ id="${elementId}">
121
+ <i class="fas fa-image text-4xl text-gray-500"></i>
122
+ <div class="resizer resizer-nw"></div>
123
+ <div class="resizer resizer-ne"></div>
124
+ <div class="resizer resizer-sw"></div>
125
+ <div class="resizer resizer-se"></div>
126
+ <div class="rotator"></div>
127
+ </div>
128
+ `;
129
+ break;
130
+ case 'container':
131
+ elementHTML = `
132
+ <div class="canvas-element glass-panel p-4 rounded absolute"
133
+ style="width: 300px; height: 200px; top: 100px; left: 100px;"
134
+ id="${elementId}">
135
+ <div class="w-full h-full border-2 border-dashed border-gray-600 rounded flex items-center justify-center">
136
+ <span class="text-gray-500">Container</span>
137
+ </div>
138
+ <div class="resizer resizer-nw"></div>
139
+ <div class="resizer resizer-ne"></div>
140
+ <div class="resizer resizer-sw"></div>
141
+ <div class="resizer resizer-se"></div>
142
+ <div class="rotator"></div>
143
+ </div>
144
+ `;
145
+ break;
146
+ case 'section':
147
+ elementHTML = `
148
+ <div class="canvas-element glass-panel p-4 rounded absolute"
149
+ style="width: 400px; height: 300px; top: 100px; left: 100px;"
150
+ id="${elementId}">
151
+ <div class="w-full h-full border border-gray-600 rounded flex items-center justify-center">
152
+ <span class="text-gray-500">Section</span>
153
+ </div>
154
+ <div class="resizer resizer-nw"></div>
155
+ <div class="resizer resizer-ne"></div>
156
+ <div class="resizer resizer-sw"></div>
157
+ <div class="resizer resizer-se"></div>
158
+ <div class="rotator"></div>
159
+ </div>
160
+ `;
161
+ break;
162
+ default:
163
+ elementHTML = `
164
+ <div class="canvas-element glass-panel p-2 rounded absolute"
165
+ style="width: 150px; height: 50px; top: 100px; left: 100px;"
166
+ id="${elementId}">
167
+ <span class="text-sm">${type.charAt(0).toUpperCase() + type.slice(1)}</span>
168
+ <div class="resizer resizer-nw"></div>
169
+ <div class="resizer resizer-ne"></div>
170
+ <div class="resizer resizer-sw"></div>
171
+ <div class="resizer resizer-se"></div>
172
+ <div class="rotator"></div>
173
+ </div>
174
+ `;
175
+ }
176
+
177
+ $('#dropZone').append(elementHTML);
178
+
179
+ // Make the new element selectable
180
+ $(`#${elementId}`).click(function(e) {
181
+ e.stopPropagation();
182
+ $('.canvas-element').removeClass('selected');
183
+ $(this).addClass('selected');
184
+ });
185
+
186
+ // Make the new element draggable
187
+ makeElementDraggable(`#${elementId}`);
188
+
189
+ // Make the new element resizable and rotatable
190
+ makeElementResizableRotatable(`#${elementId}`);
191
+ }
192
+
193
+ // Make canvas elements draggable
194
+ function makeElementDraggable(selector) {
195
+ $(selector).draggable({
196
+ containment: '#dropZone',
197
+ cursor: 'move',
198
+ handle: ':not(.resizer):not(.rotator)',
199
+ start: function() {
200
+ $(this).addClass('dragging');
201
+ },
202
+ stop: function() {
203
+ $(this).removeClass('dragging');
204
+ }
205
+ });
206
+ }
207
+
208
+ // Make elements resizable and rotatable
209
+ function makeElementResizableRotatable(selector) {
210
+ interact(selector)
211
+ .resizable({
212
+ edges: { left: true, right: true, bottom: true, top: true },
213
+ modifiers: [
214
+ interact.modifiers.restrictEdges({
215
+ outer: 'parent',
216
+ endOnly: true
217
+ })
218
+ ],
219
+ inertia: true
220
+ })
221
+ .on('resizestart', function (event) {
222
+ event.target.classList.add('resizing');
223
+ })
224
+ .on('resizemove', function (event) {
225
+ var target = event.target;
226
+ var x = (parseFloat(target.getAttribute('data-x')) || 0);
227
+ var y = (parseFloat(target.getAttribute('data-y')) || 0);
228
+
229
+ target.style.width = event.rect.width + 'px';
230
+ target.style.height = event.rect.height + 'px';
231
+
232
+ x += event.deltaRect.left;
233
+ y += event.deltaRect.top;
234
+
235
+ target.style.transform = 'translate(' + x + 'px,' + y + 'px)';
236
+
237
+ target.setAttribute('data-x', x);
238
+ target.setAttribute('data-y', y);
239
+ })
240
+ .on('resizeend', function (event) {
241
+ event.target.classList.remove('resizing');
242
+ });
243
+ }
244
+
245
+ // Select canvas elements
246
+ $(document).on('click', '.canvas-element', function(e) {
247
+ e.stopPropagation();
248
+ $('.canvas-element').removeClass('selected');
249
+ $(this).addClass('selected');
250
+ });
251
+
252
+ // Deselect when clicking on canvas
253
+ $('#dropZone').click(function(e) {
254
+ if (e.target.id === 'dropZone') {
255
+ $('.canvas-element').removeClass('selected');
256
+ }
257
+ });
258
+
259
+ // Initialize any existing elements
260
+ $('.canvas-element').each(function() {
261
+ makeElementDraggable(this);
262
+ makeElementResizableRotatable(this);
263
+ });
264
+ });
265
+ </script>
266
+ <style>
267
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
268
+
269
+ body {
270
+ font-family: 'Inter', sans-serif;
271
+ background: linear-gradient(135deg, #0A0A0F 0%, #121218 100%);
272
+ color: #E2E8F0;
273
+ overflow: hidden;
274
+ }
275
+
276
+ .glass {
277
+ background: rgba(26, 26, 37, 0.6);
278
+ backdrop-filter: blur(12px);
279
+ -webkit-backdrop-filter: blur(12px);
280
+ border: 1px solid rgba(255, 255, 255, 0.08);
281
+ }
282
+
283
+ .glass-panel {
284
+ background: rgba(18, 18, 24, 0.7);
285
+ backdrop-filter: blur(20px);
286
+ -webkit-backdrop-filter: blur(20px);
287
+ border: 1px solid rgba(255, 255, 255, 0.1);
288
+ }
289
+
290
+ .glow-border {
291
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
292
+ }
293
+
294
+ .glow-border-purple {
295
+ box-shadow: 0 0 10px rgba(122, 0, 255, 0.3);
296
+ }
297
+
298
+ .glow-border-pink {
299
+ box-shadow: 0 0 10px rgba(255, 0, 200, 0.3);
300
+ }
301
+
302
+ .element-card {
303
+ transition: all 0.3s ease;
304
+ padding: 0.15rem;
305
+ }
306
+
307
+ .element-card:hover {
308
+ transform: translateY(-1px);
309
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
310
+ }
311
+
312
+ .tiny-text {
313
+ font-size: 0.65rem;
314
+ line-height: 0.75rem;
315
+ }
316
+
317
+ .tiny-input {
318
+ padding: 0.1rem 0.25rem;
319
+ font-size: 0.65rem;
320
+ }
321
+
322
+ .tiny-button {
323
+ padding: 0.15rem 0.4rem;
324
+ font-size: 0.65rem;
325
+ }
326
+
327
+ .tiny-icon {
328
+ font-size: 0.7rem;
329
+ }
330
+
331
+ .canvas-grid {
332
+ background-image:
333
+ linear-gradient(rgba(100, 100, 150, 0.1) 1px, transparent 1px),
334
+ linear-gradient(90deg, rgba(100, 100, 150, 0.1) 1px, transparent 1px);
335
+ background-size: 20px 20px;
336
+ }
337
+
338
+ .resizer {
339
+ position: absolute;
340
+ width: 10px;
341
+ height: 10px;
342
+ background: rgba(0, 212, 255, 0.8);
343
+ border-radius: 50%;
344
+ z-index: 10;
345
+ }
346
+
347
+ .resizer-nw { top: -5px; left: -5px; cursor: nw-resize; }
348
+ .resizer-ne { top: -5px; right: -5px; cursor: ne-resize; }
349
+ .resizer-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
350
+ .resizer-se { bottom: -5px; right: -5px; cursor: se-resize; }
351
+
352
+ .rotator {
353
+ position: absolute;
354
+ top: -30px;
355
+ left: 50%;
356
+ transform: translateX(-50%);
357
+ width: 20px;
358
+ height: 20px;
359
+ background: rgba(0, 212, 255, 0.8);
360
+ border-radius: 50%;
361
+ cursor: grab;
362
+ }
363
+
364
+ .canvas-element {
365
+ position: absolute;
366
+ cursor: move;
367
+ user-select: none;
368
+ }
369
+
370
+ .canvas-element.selected {
371
+ box-shadow: 0 0 0 2px #00D4FF, 0 0 15px rgba(0, 212, 255, 0.5);
372
+ }
373
+
374
+ .dragging {
375
+ opacity: 0.7;
376
+ z-index: 1000;
377
+ }
378
+
379
+ .drop-zone {
380
+ position: relative;
381
+ width: 100%;
382
+ height: 100%;
383
+ }
384
+
385
+ .property-slider::-webkit-slider-thumb {
386
+ -webkit-appearance: none;
387
+ width: 16px;
388
+ height: 16px;
389
+ border-radius: 50%;
390
+ background: #00D4FF;
391
+ cursor: pointer;
392
+ box-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
393
+ }
394
+
395
+ .property-slider::-moz-range-thumb {
396
+ width: 16px;
397
+ height: 16px;
398
+ border-radius: 50%;
399
+ background: #00D4FF;
400
+ cursor: pointer;
401
+ border: none;
402
+ box-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
403
+ }
404
+
405
+ .glow-button {
406
+ background: linear-gradient(90deg, #7A00FF, #00D4FF);
407
+ transition: all 0.3s ease;
408
+ }
409
+
410
+ .glow-button:hover {
411
+ box-shadow: 0 0 15px rgba(122, 0, 255, 0.7);
412
+ transform: translateY(-2px);
413
+ }
414
+
415
+ .glow-input {
416
+ background: rgba(26, 26, 37, 0.6);
417
+ border: 1px solid rgba(100, 100, 150, 0.3);
418
+ transition: all 0.3s ease;
419
+ }
420
+
421
+ .glow-input:focus {
422
+ border-color: #00D4FF;
423
+ box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
424
+ }
425
+
426
+ .glow-select {
427
+ background: rgba(26, 26, 37, 0.6);
428
+ border: 1px solid rgba(100, 100, 150, 0.3);
429
+ transition: all 0.3s ease;
430
+ }
431
+
432
+ .glow-select:focus {
433
+ border-color: #00D4FF;
434
+ box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
435
+ }
436
+
437
+ .glow-tab {
438
+ border-bottom: 2px solid transparent;
439
+ transition: all 0.3s ease;
440
+ }
441
+
442
+ .glow-tab.active {
443
+ border-bottom: 2px solid #00D4FF;
444
+ color: #00D4FF;
445
+ }
446
+
447
+ .glow-tab:hover {
448
+ color: #00D4FF;
449
+ }
450
+
451
+ .layer-item {
452
+ transition: all 0.2s ease;
453
+ }
454
+
455
+ .layer-item:hover {
456
+ background: rgba(100, 100, 150, 0.1);
457
+ }
458
+
459
+ .layer-item.selected {
460
+ background: rgba(0, 212, 255, 0.1);
461
+ border-left: 2px solid #00D4FF;
462
+ }
463
+
464
+ /* Responsive adjustments */
465
+ @media (max-width: 768px) {
466
+ .sidebar {
467
+ width: 60px;
468
+ }
469
+ .sidebar-content {
470
+ display: none;
471
+ }
472
+ .sidebar:hover {
473
+ width: 256px;
474
+ }
475
+ .sidebar:hover .sidebar-content {
476
+ display: block;
477
+ }
478
+ .main-content {
479
+ margin-left: 60px;
480
+ }
481
+ }
482
+ </style>
483
+ </head>
484
+ <body class="h-screen flex flex-col overflow-hidden">
485
+ <!-- Top Bar -->
486
+ <div class="glass h-16 flex items-center justify-between px-6 border-b border-gray-800">
487
+ <div class="flex items-center space-x-4">
488
+ <div class="flex items-center">
489
+ <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent-blue to-accent-purple flex items-center justify-center animate-pulse-slow">
490
+ <i class="fas fa-brain text-white"></i>
491
+ </div>
492
+ <h1 class="text-xl font-bold ml-2 bg-clip-text text-transparent bg-gradient-to-r from-accent-blue to-accent-purple">
493
+ EVA UI Builder
494
+ </h1>
495
+ </div>
496
+ <div class="text-sm text-gray-400">Project: New Design</div>
497
+ </div>
498
+
499
+ <div class="flex items-center space-x-4">
500
+ <button class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-dark-700 transition">Undo</button>
501
+ <button class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-dark-700 transition">Redo</button>
502
+ <button class="px-4 py-2 rounded-lg text-sm font-medium hover:bg-dark-700 transition">Preview</button>
503
+ <button class="glow-button px-6 py-2 rounded-lg text-sm font-medium text-white">Export</button>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Main Content -->
508
+ <div class="flex flex-1 overflow-hidden">
509
+ <!-- Left Sidebar -->
510
+ <div class="w-64 glass-panel flex flex-col border-r border-gray-800 sidebar">
511
+ <div class="p-2 sidebar-content">
512
+ <h2 class="text-xs font-semibold mb-2">Components</h2>
513
+
514
+ <div class="grid grid-cols-3 gap-1">
515
+ <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="button">
516
+ <i class="fas fa-square tiny-icon mb-1 text-accent-blue"></i>
517
+ <span class="tiny-text">Button</span>
518
+ </div>
519
+ <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="input">
520
+ <i class="fas fa-i-cursor tiny-icon mb-1 text-accent-blue"></i>
521
+ <span class="tiny-text">Input</span>
522
+ </div>
523
+ <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="card">
524
+ <i class="fas fa-square tiny-icon mb-1 text-accent-blue"></i>
525
+ <span class="tiny-text">Card</span>
526
+ </div>
527
+ <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="image">
528
+ <i class="fas fa-image tiny-icon mb-1 text-accent-blue"></i>
529
+ <span class="tiny-text">Image</span>
530
+ </div>
531
+ <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="container">
532
+ <i class="fas fa-columns tiny-icon mb-1 text-accent-blue"></i>
533
+ <span class="tiny-text">Container</span>
534
+ </div>
535
+ <div class="element-card glass p-1 rounded flex flex-col items-center justify-center cursor-pointer" data-element="section">
536
+ <i class="fas fa-border-all tiny-icon mb-1 text-accent-blue"></i>
537
+ <span class="tiny-text">Section</span>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="p-2 border-t border-gray-800 sidebar-content">
543
+ <div class="flex justify-between items-center mb-2">
544
+ <h2 class="text-xs font-semibold">Custom Elements</h2>
545
+ <button class="text-accent-blue hover:text-accent-purple text-xs">
546
+ <i class="fas fa-folder-plus tiny-icon"></i>
547
+ </button>
548
+ </div>
549
+ <div class="space-y-1">
550
+ <div class="element-card glass p-1 rounded flex items-center cursor-pointer" data-element="hero">
551
+ <i class="fas fa-file-code tiny-icon mr-1 text-accent-purple"></i>
552
+ <span class="tiny-text">Hero Section</span>
553
+ <button class="ml-auto text-xs text-accent-blue">
554
+ <i class="fas fa-plus tiny-icon"></i>
555
+ </button>
556
+ </div>
557
+ <div class="element-card glass p-1 rounded flex items-center cursor-pointer" data-element="feature">
558
+ <i class="fas fa-file-code tiny-icon mr-1 text-accent-purple"></i>
559
+ <span class="tiny-text">Feature Card</span>
560
+ <button class="ml-auto text-xs text-accent-blue">
561
+ <i class="fas fa-plus tiny-icon"></i>
562
+ </button>
563
+ </div>
564
+ <div class="element-card glass p-1 rounded flex items-center cursor-pointer" data-element="pricing">
565
+ <i class="fas fa-file-code tiny-icon mr-1 text-accent-purple"></i>
566
+ <span class="tiny-text">Pricing Table</span>
567
+ <button class="ml-auto text-xs text-accent-blue">
568
+ <i class="fas fa-plus tiny-icon"></i>
569
+ </button>
570
+ </div>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="p-2 border-t border-gray-800 mt-auto sidebar-content">
575
+ <h2 class="text-xs font-semibold mb-2">Layers</h2>
576
+ <div class="space-y-1">
577
+ <div class="layer-item p-1 rounded flex items-center cursor-pointer selected">
578
+ <i class="fas fa-square tiny-icon mr-1 text-accent-blue"></i>
579
+ <span class="tiny-text">Primary Button</span>
580
+ </div>
581
+ <div class="layer-item p-1 rounded flex items-center cursor-pointer">
582
+ <i class="fas fa-heading tiny-icon mr-1 text-accent-purple"></i>
583
+ <span class="tiny-text">Welcome Text</span>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <!-- Center Canvas -->
590
+ <div class="flex-1 flex flex-col overflow-hidden relative">
591
+ <!-- Canvas Header Controls -->
592
+ <div class="glass h-12 flex items-center justify-between px-4 border-b border-gray-800">
593
+ <div class="flex space-x-2">
594
+ <button class="glow-tab px-3 py-1 text-sm active">Desktop</button>
595
+ <button class="glow-tab px-3 py-1 text-sm">Tablet</button>
596
+ <button class="glow-tab px-3 py-1 text-sm">Mobile</button>
597
+ </div>
598
+
599
+ <div class="flex items-center space-x-3">
600
+ <button class="text-gray-400 hover:text-white">
601
+ <i class="fas fa-grid-2"></i>
602
+ </button>
603
+ <button class="text-gray-400 hover:text-white">
604
+ <i class="fas fa-sun"></i>
605
+ </button>
606
+ <button class="text-gray-400 hover:text-white">
607
+ <i class="fas fa-trash"></i>
608
+ </button>
609
+ </div>
610
+ </div>
611
+
612
+ <!-- Canvas Area -->
613
+ <div class="flex-1 overflow-auto relative canvas-grid" id="canvas">
614
+ <div class="drop-zone" id="dropZone">
615
+ <!-- Canvas is now clean - ready for elements to be added -->
616
+ </div>
617
+ </div>
618
+ </div>
619
+
620
+ <!-- Right Customization Panel -->
621
+ <div class="w-48 glass-panel flex flex-col border-l border-gray-800">
622
+ <div class="p-2 border-b border-gray-800">
623
+ <h2 class="text-xs font-semibold">Properties</h2>
624
+ <p class="tiny-text text-gray-400">Primary Button selected</p>
625
+ </div>
626
+
627
+ <div class="flex-1 overflow-y-auto p-2">
628
+ <div class="mb-2">
629
+ <h3 class="font-medium tiny-text mb-1">Dimensions</h3>
630
+ <div class="grid grid-cols-2 gap-1">
631
+ <div>
632
+ <label class="tiny-text text-gray-400">Width</label>
633
+ <input type="text" value="200px" class="w-full mt-1 tiny-input rounded-md glow-input">
634
+ </div>
635
+ <div>
636
+ <label class="tiny-text text-gray-400">Height</label>
637
+ <input type="text" value="50px" class="w-full mt-1 tiny-input rounded-md glow-input">
638
+ </div>
639
+ </div>
640
+ </div>
641
+
642
+ <div class="mb-2">
643
+ <h3 class="font-medium tiny-text mb-1">Position</h3>
644
+ <div class="grid grid-cols-2 gap-1">
645
+ <div>
646
+ <label class="tiny-text text-gray-400">X</label>
647
+ <input type="text" value="300px" class="w-full mt-1 tiny-input rounded-md glow-input">
648
+ </div>
649
+ <div>
650
+ <label class="tiny-text text-gray-400">Y</label>
651
+ <input type="text" value="200px" class="w-full mt-1 tiny-input rounded-md glow-input">
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="mb-2">
657
+ <h3 class="font-medium tiny-text mb-1">Appearance</h3>
658
+ <div class="space-y-2">
659
+ <div>
660
+ <label class="tiny-text text-gray-400">Background</label>
661
+ <div class="flex items-center mt-1">
662
+ <div class="w-4 h-4 rounded-md bg-gradient-to-r from-accent-blue to-accent-purple mr-1"></div>
663
+ <input type="text" value="Gradient" class="flex-1 tiny-input rounded-md glow-input">
664
+ </div>
665
+ </div>
666
+
667
+ <div>
668
+ <label class="tiny-text text-gray-400">Border Radius</label>
669
+ <input type="range" min="0" max="50" value="8" class="w-full mt-1 property-slider">
670
+ </div>
671
+
672
+ <div>
673
+ <label class="tiny-text text-gray-400">Opacity</label>
674
+ <input type="range" min="0" max="100" value="100" class="w-full mt-1 property-slider">
675
+ </div>
676
+ </div>
677
+ </div>
678
+
679
+ <div class="mb-2">
680
+ <h3 class="font-medium tiny-text mb-1">Text</h3>
681
+ <div class="space-y-2">
682
+ <div>
683
+ <label class="tiny-text text-gray-400">Content</label>
684
+ <input type="text" value="Primary Button" class="w-full mt-1 tiny-input rounded-md glow-input">
685
+ </div>
686
+
687
+ <div>
688
+ <label class="tiny-text text-gray-400">Font Size</label>
689
+ <select class="w-full mt-1 tiny-input rounded-md glow-select">
690
+ <option>12px</option>
691
+ <option selected>14px</option>
692
+ <option>16px</option>
693
+ <option>18px</option>
694
+ <option>20px</option>
695
+ </select>
696
+ </div>
697
+
698
+ <div>
699
+ <label class="tiny-text text-gray-400">Color</label>
700
+ <div class="flex items-center mt-1">
701
+ <div class="w-4 h-4 rounded-md bg-white mr-1"></div>
702
+ <input type="text" value="#FFFFFF" class="flex-1 tiny-input rounded-md glow-input">
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="mb-2">
709
+ <h3 class="font-medium tiny-text mb-1">Effects</h3>
710
+ <div class="space-y-2">
711
+ <div>
712
+ <label class="tiny-text text-gray-400">Shadow</label>
713
+ <select class="w-full mt-1 tiny-input rounded-md glow-select">
714
+ <option>None</option>
715
+ <option selected>Soft Glow</option>
716
+ <option>Medium Shadow</option>
717
+ <option>Strong Shadow</option>
718
+ </select>
719
+ </div>
720
+
721
+ <div>
722
+ <label class="tiny-text text-gray-400">Animation</label>
723
+ <select class="w-full mt-1 tiny-input rounded-md glow-select">
724
+ <option>None</option>
725
+ <option>Fade In</option>
726
+ <option selected>Pulse</option>
727
+ <option>Slide Up</option>
728
+ </select>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="p-2 border-t border-gray-800">
735
+ <button class="w-full tiny-button rounded-md bg-gradient-to-r from-accent-blue to-accent-purple font-medium glow-border">
736
+ Apply Changes
737
+ </button>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Orb Decorations -->
743
+ <div class="fixed top-1/4 left-1/4 w-64 h-64 rounded-full bg-gradient-to-r from-accent-blue to-accent-purple opacity-10 blur-3xl -z-10 animate-float"></div>
744
+ <div class="fixed bottom-1/3 right-1/4 w-48 h-48 rounded-full bg-gradient-to-r from-accent-purple to-accent-pink opacity-10 blur-3xl -z-10 animate-float" style="animation-delay: 1s;"></div>
745
+ <div class="fixed top-1/3 right-1/3 w-32 h-32 rounded-full bg-gradient-to-r from-accent-pink to-accent-blue opacity-10 blur-3xl -z-10 animate-float" style="animation-delay: 2s;"></div>
746
+ <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=basheer1414/builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
747
+ </html>