Hugging Face's logo

Spaces:
segestic
/
flodemo
Running

App Files Community
segestic commited on
Commit
b5e8db7
·
verified ·
1 Parent(s): a9c72b0

Grapejs UI builder but with green apples floral modern theme - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +435 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flodemo
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: red
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: flodemo
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,436 @@
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>Floral UI Builder</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500&display=swap" rel="stylesheet">
14
+ <style>
15
+ :root {
16
+ --primary-500: #4CAF50;
17
+ --primary-400: #8BC34A;
18
+ --primary-300: #AED581;
19
+ --accent-500: #FF80AB;
20
+ --accent-400: #FFB6C1;
21
+ --neutral-100: #F5F5F5;
22
+ --neutral-200: #EEEEEE;
23
+ --neutral-700: #616161;
24
+ --neutral-900: #212121;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Open Sans', sans-serif;
29
+ background-color: #f9fafb;
30
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23aed581' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
31
+ }
32
+
33
+ h1, h2, h3, h4, h5, h6 {
34
+ font-family: 'Poppins', sans-serif;
35
+ }
36
+
37
+ .floral-divider {
38
+ position: relative;
39
+ height: 2px;
40
+ background: linear-gradient(90deg, transparent, var(--primary-300), transparent);
41
+ }
42
+
43
+ .floral-divider::after {
44
+ content: "✿";
45
+ position: absolute;
46
+ left: 50%;
47
+ top: 50%;
48
+ transform: translate(-50%, -50%);
49
+ background: #f9fafb;
50
+ padding: 0 10px;
51
+ color: var(--primary-500);
52
+ font-size: 14px;
53
+ }
54
+
55
+ .component-item {
56
+ transition: all 0.2s ease;
57
+ border-left: 3px solid transparent;
58
+ }
59
+
60
+ .component-item:hover {
61
+ background-color: rgba(76, 175, 80, 0.05);
62
+ border-left-color: var(--primary-500);
63
+ }
64
+
65
+ .builder-canvas {
66
+ background-color: white;
67
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
68
+ min-height: 80vh;
69
+ }
70
+
71
+ .toolbar-btn {
72
+ transition: all 0.2s ease;
73
+ }
74
+
75
+ .toolbar-btn:hover {
76
+ background-color: rgba(76, 175, 80, 0.1);
77
+ }
78
+
79
+ .droppable-area {
80
+ min-height: 100px;
81
+ border: 2px dashed var(--primary-300);
82
+ background-color: rgba(139, 195, 74, 0.05);
83
+ transition: all 0.2s ease;
84
+ }
85
+
86
+ .droppable-area.highlight {
87
+ border-color: var(--primary-500);
88
+ background-color: rgba(139, 195, 74, 0.1);
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="h-screen flex flex-col">
93
+ <!-- Top Toolbar -->
94
+ <header class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm">
95
+ <div class="flex items-center space-x-2">
96
+ <div class="flex items-center">
97
+ <i data-feather="cpu" class="text-green-500"></i>
98
+ <span class="ml-2 font-bold text-gray-800 text-lg">Floral UI Builder</span>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="flex items-center space-x-2">
103
+ <button class="toolbar-btn flex items-center px-3 py-2 rounded-md text-gray-700 hover:text-green-600">
104
+ <i data-feather="undo" class="w-4 h-4 mr-1"></i>
105
+ <span>Undo</span>
106
+ </button>
107
+ <button class="toolbar-btn flex items-center px-3 py-2 rounded-md text-gray-700 hover:text-green-600">
108
+ <i data-feather="redo" class="w-4 h-4 mr-1"></i>
109
+ <span>Redo</span>
110
+ </button>
111
+ <div class="h-6 w-px bg-gray-300 mx-1"></div>
112
+ <button class="toolbar-btn flex items-center px-3 py-2 rounded-md text-gray-700 hover:text-green-600">
113
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
114
+ <span>Preview</span>
115
+ </button>
116
+ <button class="toolbar-btn flex items-center px-3 py-2 rounded-md bg-green-500 text-white hover:bg-green-600">
117
+ <i data-feather="save" class="w-4 h-4 mr-1"></i>
118
+ <span>Save</span>
119
+ </button>
120
+ <button class="toolbar-btn flex items-center px-3 py-2 rounded-md bg-green-600 text-white hover:bg-green-700">
121
+ <i data-feather="download" class="w-4 h-4 mr-1"></i>
122
+ <span>Export</span>
123
+ </button>
124
+ </div>
125
+ </header>
126
+
127
+ <div class="flex flex-1 overflow-hidden">
128
+ <!-- Sidebar -->
129
+ <aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
130
+ <div class="px-4 py-3 border-b border-gray-200">
131
+ <h3 class="font-medium text-gray-800 flex items-center">
132
+ <i data-feather="grid" class="w-4 h-4 mr-2 text-green-500"></i>
133
+ Components
134
+ </h3>
135
+ </div>
136
+
137
+ <div class="flex-1 overflow-y-auto p-2">
138
+ <div class="mb-4">
139
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Basic</h4>
140
+ <div class="space-y-1 mt-1">
141
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
142
+ <i data-feather="type" class="w-4 h-4 mr-2 text-green-500"></i>
143
+ <span>Text</span>
144
+ </div>
145
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
146
+ <i data-feather="image" class="w-4 h-4 mr-2 text-green-500"></i>
147
+ <span>Image</span>
148
+ </div>
149
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
150
+ <i data-feather="square" class="w-4 h-4 mr-2 text-green-500"></i>
151
+ <span>Divider</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="mb-4">
157
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Forms</h4>
158
+ <div class="space-y-1 mt-1">
159
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
160
+ <i data-feather="edit" class="w-4 h-4 mr-2 text-green-500"></i>
161
+ <span>Input</span>
162
+ </div>
163
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
164
+ <i data-feather="list" class="w-4 h-4 mr-2 text-green-500"></i>
165
+ <span>Select</span>
166
+ </div>
167
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
168
+ <i data-feather="check-square" class="w-4 h-4 mr-2 text-green-500"></i>
169
+ <span>Checkbox</span>
170
+ </div>
171
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
172
+ <i data-feather="toggle-left" class="w-4 h-4 mr-2 text-green-500"></i>
173
+ <span>Button</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="mb-4">
179
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Layout</h4>
180
+ <div class="space-y-1 mt-1">
181
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
182
+ <i data-feather="columns" class="w-4 h-4 mr-2 text-green-500"></i>
183
+ <span>Columns</span>
184
+ </div>
185
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
186
+ <i data-feather="box" class="w-4 h-4 mr-2 text-green-500"></i>
187
+ <span>Container</span>
188
+ </div>
189
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
190
+ <i data-feather="sidebar" class="w-4 h-4 mr-2 text-green-500"></i>
191
+ <span>Section</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="mb-4">
197
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Media</h4>
198
+ <div class="space-y-1 mt-1">
199
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
200
+ <i data-feather="video" class="w-4 h-4 mr-2 text-green-500"></i>
201
+ <span>Video</span>
202
+ </div>
203
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
204
+ <i data-feather="map" class="w-4 h-4 mr-2 text-green-500"></i>
205
+ <span>Map</span>
206
+ </div>
207
+ <div class="component-item flex items-center px-3 py-2 rounded-md cursor-move">
208
+ <i data-feather="sliders" class="w-4 h-4 mr-2 text-green-500"></i>
209
+ <span>Carousel</span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </aside>
215
+
216
+ <!-- Main Content -->
217
+ <main class="flex-1 overflow-auto bg-gray-50 p-6">
218
+ <div class="max-w-6xl mx-auto">
219
+ <div class="builder-canvas rounded-lg p-6">
220
+ <div class="droppable-area rounded-lg p-4 mb-4">
221
+ <p class="text-center text-gray-500">Drag components here to start building</p>
222
+ </div>
223
+
224
+ <!-- Example of a placed component -->
225
+ <div class="relative group mb-4 p-4 border border-gray-200 rounded-lg hover:border-green-300">
226
+ <div class="absolute top-0 right-0 mt-2 mr-2 opacity-0 group-hover:opacity-100 flex space-x-1">
227
+ <button class="p-1 rounded-full bg-white shadow text-gray-600 hover:text-green-500">
228
+ <i data-feather="edit-2" class="w-3 h-3"></i>
229
+ </button>
230
+ <button class="p-1 rounded-full bg-white shadow text-gray-600 hover:text-red-500">
231
+ <i data-feather="trash-2" class="w-3 h-3"></i>
232
+ </button>
233
+ </div>
234
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome to Floral UI Builder</h2>
235
+ <p class="text-gray-600">Drag and drop components to create beautiful interfaces with our floral-inspired design system.</p>
236
+ </div>
237
+
238
+ <div class="droppable-area rounded-lg p-4">
239
+ <p class="text-center text-gray-500">Add more components below</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </main>
244
+
245
+ <!-- Right Sidebar - Properties Panel -->
246
+ <aside class="w-72 bg-white border-l border-gray-200 p-4 overflow-y-auto">
247
+ <div class="mb-6">
248
+ <h3 class="font-medium text-gray-800 flex items-center">
249
+ <i data-feather="sliders" class="w-4 h-4 mr-2 text-green-500"></i>
250
+ Properties
251
+ </h3>
252
+ <div class="floral-divider my-3"></div>
253
+
254
+ <div class="space-y-4">
255
+ <div>
256
+ <label class="block text-sm font-medium text-gray-700 mb-1">Background Color</label>
257
+ <div class="flex space-x-2">
258
+ <div class="w-8 h-8 rounded-full bg-white border border-gray-300 cursor-pointer"></div>
259
+ <div class="w-8 h-8 rounded-full bg-green-50 border border-green-200 cursor-pointer"></div>
260
+ <div class="w-8 h-8 rounded-full bg-green-100 border border-green-300 cursor-pointer"></div>
261
+ <div class="w-8 h-8 rounded-full bg-pink-50 border border-pink-200 cursor-pointer"></div>
262
+ <div class="w-8 h-8 rounded-full bg-purple-50 border border-purple-200 cursor-pointer"></div>
263
+ </div>
264
+ </div>
265
+
266
+ <div>
267
+ <label class="block text-sm font-medium text-gray-700 mb-1">Padding</label>
268
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md">
269
+ <option>None</option>
270
+ <option selected>Small (16px)</option>
271
+ <option>Medium (24px)</option>
272
+ <option>Large (32px)</option>
273
+ </select>
274
+ </div>
275
+
276
+ <div>
277
+ <label class="block text-sm font-medium text-gray-700 mb-1">Border Radius</label>
278
+ <div class="flex items-center space-x-2">
279
+ <input type="range" min="0" max="20" value="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
280
+ <span class="text-xs text-gray-500 w-8">8px</span>
281
+ </div>
282
+ </div>
283
+
284
+ <div>
285
+ <label class="block text-sm font-medium text-gray-700 mb-1">Shadow</label>
286
+ <div class="grid grid-cols-3 gap-2">
287
+ <button class="py-2 text-xs border rounded-md hover:border-green-300">None</button>
288
+ <button class="py-2 text-xs border rounded-md hover:border-green-300">Small</button>
289
+ <button class="py-2 text-xs border rounded-md bg-green-50 border-green-200 text-green-600">Medium</button>
290
+ <button class="py-2 text-xs border rounded-md hover:border-green-300">Large</button>
291
+ <button class="py-2 text-xs border rounded-md hover:border-green-300">XL</button>
292
+ <button class="py-2 text-xs border rounded-md hover:border-green-300">2XL</button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <div>
299
+ <h3 class="font-medium text-gray-800 flex items-center">
300
+ <i data-feather="layers" class="w-4 h-4 mr-2 text-green-500"></i>
301
+ Layers
302
+ </h3>
303
+ <div class="floral-divider my-3"></div>
304
+
305
+ <div class="space-y-2">
306
+ <div class="flex items-center justify-between p-2 bg-green-50 rounded-md border border-green-200">
307
+ <div class="flex items-center">
308
+ <i data-feather="type" class="w-4 h-4 mr-2 text-green-600"></i>
309
+ <span class="text-sm">Heading Text</span>
310
+ </div>
311
+ <div class="flex space-x-1">
312
+ <button class="p-1 text-gray-500 hover:text-green-600">
313
+ <i data-feather="eye" class="w-3 h-3"></i>
314
+ </button>
315
+ <button class="p-1 text-gray-500 hover:text-green-600">
316
+ <i data-feather="move" class="w-3 h-3"></i>
317
+ </button>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-md">
322
+ <div class="flex items-center">
323
+ <i data-feather="image" class="w-4 h-4 mr-2 text-blue-500"></i>
324
+ <span class="text-sm">Hero Image</span>
325
+ </div>
326
+ <div class="flex space-x-1">
327
+ <button class="p-1 text-gray-500 hover:text-green-600">
328
+ <i data-feather="eye" class="w-3 h-3"></i>
329
+ </button>
330
+ <button class="p-1 text-gray-500 hover:text-green-600">
331
+ <i data-feather="move" class="w-3 h-3"></i>
332
+ </button>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-md">
337
+ <div class="flex items-center">
338
+ <i data-feather="columns" class="w-4 h-4 mr-2 text-purple-500"></i>
339
+ <span class="text-sm">Feature Grid</span>
340
+ </div>
341
+ <div class="flex space-x-1">
342
+ <button class="p-1 text-gray-500 hover:text-green-600">
343
+ <i data-feather="eye" class="w-3 h-3"></i>
344
+ </button>
345
+ <button class="p-1 text-gray-500 hover:text-green-600">
346
+ <i data-feather="move" class="w-3 h-3"></i>
347
+ </button>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </aside>
353
+ </div>
354
+
355
+ <script>
356
+ // Initialize AOS animations
357
+ AOS.init();
358
+
359
+ // Initialize feather icons
360
+ feather.replace();
361
+
362
+ // Simple drag and drop functionality
363
+ document.addEventListener('DOMContentLoaded', function() {
364
+ const components = document.querySelectorAll('.component-item');
365
+ const droppableAreas = document.querySelectorAll('.droppable-area');
366
+
367
+ components.forEach(component => {
368
+ component.addEventListener('dragstart', function(e) {
369
+ e.dataTransfer.setData('text/plain', component.querySelector('span').textContent);
370
+ setTimeout(() => {
371
+ component.classList.add('opacity-50');
372
+ }, 0);
373
+ });
374
+
375
+ component.addEventListener('dragend', function() {
376
+ component.classList.remove('opacity-50');
377
+ });
378
+ });
379
+
380
+ droppableAreas.forEach(area => {
381
+ area.addEventListener('dragenter', function(e) {
382
+ e.preventDefault();
383
+ this.classList.add('highlight');
384
+ });
385
+
386
+ area.addEventListener('dragover', function(e) {
387
+ e.preventDefault();
388
+ });
389
+
390
+ area.addEventListener('dragleave', function() {
391
+ this.classList.remove('highlight');
392
+ });
393
+
394
+ area.addEventListener('drop', function(e) {
395
+ e.preventDefault();
396
+ this.classList.remove('highlight');
397
+
398
+ const componentType = e.dataTransfer.getData('text/plain');
399
+ const newComponent = createComponent(componentType);
400
+
401
+ // Insert before the placeholder text
402
+ if (this.querySelector('p')) {
403
+ this.insertBefore(newComponent, this.querySelector('p'));
404
+ } else {
405
+ this.appendChild(newComponent);
406
+ }
407
+ });
408
+ });
409
+
410
+ function createComponent(type) {
411
+ const wrapper = document.createElement('div');
412
+ wrapper.className = 'relative group mb-4 p-4 border border-gray-200 rounded-lg hover:border-green-300';
413
+ wrapper.draggable = true;
414
+ wrapper.innerHTML = `
415
+ <div class="absolute top-0 right-0 mt-2 mr-2 opacity-0 group-hover:opacity-100 flex space-x-1">
416
+ <button class="p-1 rounded-full bg-white shadow text-gray-600 hover:text-green-500">
417
+ <i data-feather="edit-2" class="w-3 h-3"></i>
418
+ </button>
419
+ <button class="p-1 rounded-full bg-white shadow text-gray-600 hover:text-red-500">
420
+ <i data-feather="trash-2" class="w-3 h-3"></i>
421
+ </button>
422
+ </div>
423
+ <p class="text-gray-600">New ${type} component</p>
424
+ `;
425
+
426
+ // Add delete functionality
427
+ wrapper.querySelector('button:nth-child(2)').addEventListener('click', function() {
428
+ wrapper.remove();
429
+ });
430
+
431
+ return wrapper;
432
+ }
433
+ });
434
+ </script>
435
+ </body>
436
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Grapejs UI builder but with green apples floral modern theme