Hugging Face's logo

Spaces:
paradiseDev
/
percertain
Running

App Files Community
paradiseDev commited on
Commit
69f00f6
·
verified ·
1 Parent(s): e81b681

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +635 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Percertain
3
- emoji: 🚀
4
- colorFrom: pink
5
  colorTo: pink
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: percertain
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: pink
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,635 @@
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>AI Web App Factory</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://cdn.jsdelivr.net/npm/ace-builds@1.24.0/src-min-noconflict/ace.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
13
+ }
14
+ .editor {
15
+ height: 400px;
16
+ width: 100%;
17
+ border-radius: 0.5rem;
18
+ }
19
+ .plugin-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ .domain-input::placeholder {
24
+ color: #9CA3AF;
25
+ }
26
+ .preview-frame {
27
+ height: 400px;
28
+ background-color: #f3f4f6;
29
+ border-radius: 0.5rem;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 min-h-screen">
34
+ <!-- Navigation -->
35
+ <nav class="gradient-bg text-white shadow-lg">
36
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
37
+ <div class="flex items-center space-x-2">
38
+ <i class="fas fa-robot text-2xl"></i>
39
+ <span class="text-xl font-bold">AI Web Factory</span>
40
+ </div>
41
+ <div class="hidden md:flex space-x-6">
42
+ <a href="#" class="hover:text-gray-200">Dashboard</a>
43
+ <a href="#" class="hover:text-gray-200">Templates</a>
44
+ <a href="#" class="hover:text-gray-200">Plugins</a>
45
+ <a href="#" class="hover:text-gray-200">Domains</a>
46
+ <a href="#" class="hover:text-gray-200">Docs</a>
47
+ </div>
48
+ <div class="flex items-center space-x-4">
49
+ <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
50
+ Sign In
51
+ </button>
52
+ <button class="hidden md:block bg-purple-800 text-white px-4 py-2 rounded-full font-medium hover:bg-purple-900 transition">
53
+ Get Started
54
+ </button>
55
+ <button class="md:hidden text-white">
56
+ <i class="fas fa-bars text-xl"></i>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Main Content -->
63
+ <main class="container mx-auto px-4 py-8">
64
+ <div class="text-center mb-12">
65
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Build AI-Powered Web Apps in Minutes</h1>
66
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
67
+ Create, customize and deploy AI applications with our simple DSL and host them on your own wildcard domains.
68
+ </p>
69
+ </div>
70
+
71
+ <!-- Editor Section -->
72
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
73
+ <!-- Code Editor -->
74
+ <div class="bg-white rounded-xl shadow-lg p-6">
75
+ <div class="flex justify-between items-center mb-4">
76
+ <h2 class="text-xl font-semibold text-gray-800">AI App DSL Editor</h2>
77
+ <div class="flex space-x-2">
78
+ <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-md text-sm hover:bg-gray-200">
79
+ <i class="fas fa-save mr-1"></i> Save
80
+ </button>
81
+ <button class="bg-purple-600 text-white px-3 py-1 rounded-md text-sm hover:bg-purple-700">
82
+ <i class="fas fa-play mr-1"></i> Run
83
+ </button>
84
+ </div>
85
+ </div>
86
+ <div id="editor" class="editor">app "AI Image Generator" {
87
+ layout {
88
+ header {
89
+ title "Create Stunning AI Art"
90
+ description "Generate unique images with our AI technology"
91
+ }
92
+
93
+ section {
94
+ input "Prompt" as prompt placeholder="Describe what you want to generate"
95
+ dropdown "Style" as style options=["Realistic", "Cartoon", "Abstract", "3D Render"]
96
+ slider "Creativity" as creativity min=0 max=100 step=5 value=50
97
+
98
+ button "Generate" action {
99
+ call ai.image.generate {
100
+ prompt: $prompt
101
+ style: $style
102
+ creativity: $creativity
103
+ }
104
+ }
105
+ }
106
+ }
107
+
108
+ plugins {
109
+ use ai.image
110
+ use ai.text.completion
111
+ }
112
+ }</div>
113
+ </div>
114
+
115
+ <!-- Preview -->
116
+ <div class="bg-white rounded-xl shadow-lg p-6">
117
+ <div class="flex justify-between items-center mb-4">
118
+ <h2 class="text-xl font-semibold text-gray-800">Live Preview</h2>
119
+ <div class="flex items-center space-x-2">
120
+ <span class="text-sm text-gray-500">Responsive:</span>
121
+ <div class="flex bg-gray-100 rounded-md p-1">
122
+ <button class="px-2 py-1 text-xs rounded-md bg-white shadow">Desktop</button>
123
+ <button class="px-2 py-1 text-xs rounded-md">Tablet</button>
124
+ <button class="px-2 py-1 text-xs rounded-md">Mobile</button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <div class="preview-frame flex items-center justify-center">
129
+ <div class="text-center p-6 max-w-md">
130
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Create Stunning AI Art</h3>
131
+ <p class="text-gray-600 mb-6">Generate unique images with our AI technology</p>
132
+
133
+ <div class="space-y-4 text-left">
134
+ <div>
135
+ <label class="block text-sm font-medium text-gray-700 mb-1">Prompt</label>
136
+ <input type="text" placeholder="Describe what you want to generate" class="w-full px-3 py-2 border border-gray-300 rounded-md">
137
+ </div>
138
+
139
+ <div>
140
+ <label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
141
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
142
+ <option>Realistic</option>
143
+ <option>Cartoon</option>
144
+ <option>Abstract</option>
145
+ <option>3D Render</option>
146
+ </select>
147
+ </div>
148
+
149
+ <div>
150
+ <label class="block text-sm font-medium text-gray-700 mb-1">Creativity: 50</label>
151
+ <input type="range" min="0" max="100" value="50" step="5" class="w-full">
152
+ </div>
153
+
154
+ <button class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700">
155
+ Generate
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Domain Configuration -->
164
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-12">
165
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Domain Configuration</h2>
166
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
167
+ <div class="border border-gray-200 rounded-lg p-4">
168
+ <div class="flex items-center mb-3">
169
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
170
+ <i class="fas fa-globe text-purple-600"></i>
171
+ </div>
172
+ <h3 class="font-medium">Custom Domain</h3>
173
+ </div>
174
+ <p class="text-gray-600 text-sm mb-4">Use your own domain for your AI applications</p>
175
+ <div class="flex">
176
+ <input type="text" placeholder="yourdomain.com" class="flex-grow px-3 py-2 border border-gray-300 rounded-l-md domain-input">
177
+ <button class="bg-purple-600 text-white px-4 py-2 rounded-r-md hover:bg-purple-700">Add</button>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="border border-gray-200 rounded-lg p-4">
182
+ <div class="flex items-center mb-3">
183
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
184
+ <i class="fas fa-asterisk text-blue-600"></i>
185
+ </div>
186
+ <h3 class="font-medium">Wildcard Subdomains</h3>
187
+ </div>
188
+ <p class="text-gray-600 text-sm mb-4">Enable *.yourdomain.com for dynamic app creation</p>
189
+ <div class="flex items-center">
190
+ <div class="flex-grow">
191
+ <div class="text-sm font-medium text-gray-700 mb-1">Status: <span class="text-green-600">Active</span></div>
192
+ <div class="text-xs text-gray-500">apps.yourdomain.com</div>
193
+ </div>
194
+ <button class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700">
195
+ <i class="fas fa-cog"></i>
196
+ </button>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="border border-gray-200 rounded-lg p-4">
201
+ <div class="flex items-center mb-3">
202
+ <div class="bg-green-100 p-2 rounded-full mr-3">
203
+ <i class="fas fa-shield-alt text-green-600"></i>
204
+ </div>
205
+ <h3 class="font-medium">SSL Certificate</h3>
206
+ </div>
207
+ <p class="text-gray-600 text-sm mb-4">Automatic HTTPS for all your domains</p>
208
+ <div class="flex items-center">
209
+ <div class="flex-grow">
210
+ <div class="text-sm font-medium text-gray-700 mb-1">Status: <span class="text-green-600">Active</span></div>
211
+ <div class="text-xs text-gray-500">Auto-renewing</div>
212
+ </div>
213
+ <button class="bg-green-600 text-white p-2 rounded-full hover:bg-green-700">
214
+ <i class="fas fa-sync-alt"></i>
215
+ </button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Plugin Marketplace -->
222
+ <div class="bg-white rounded-xl shadow-lg p-6">
223
+ <div class="flex justify-between items-center mb-6">
224
+ <h2 class="text-xl font-semibold text-gray-800">AI Plugin Marketplace</h2>
225
+ <div class="relative">
226
+ <input type="text" placeholder="Search plugins..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md w-64">
227
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
232
+ <!-- Plugin Cards -->
233
+ <div class="plugin-card border border-gray-200 rounded-lg p-4 transition duration-300">
234
+ <div class="flex items-start mb-3">
235
+ <div class="bg-pink-100 p-2 rounded-full mr-3">
236
+ <i class="fas fa-image text-pink-600"></i>
237
+ </div>
238
+ <div>
239
+ <h3 class="font-medium">AI Image Generator</h3>
240
+ <div class="flex items-center mt-1">
241
+ <div class="flex items-center text-yellow-400 text-sm mr-2">
242
+ <i class="fas fa-star"></i>
243
+ <i class="fas fa-star"></i>
244
+ <i class="fas fa-star"></i>
245
+ <i class="fas fa-star"></i>
246
+ <i class="fas fa-star-half-alt"></i>
247
+ </div>
248
+ <span class="text-gray-500 text-xs">(142)</span>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ <p class="text-gray-600 text-sm mb-4">Generate high-quality images from text prompts with various styles and options.</p>
253
+ <div class="flex justify-between items-center">
254
+ <span class="text-sm font-medium">Free</span>
255
+ <button class="text-sm bg-pink-600 text-white px-3 py-1 rounded-md hover:bg-pink-700">
256
+ Add to App
257
+ </button>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="plugin-card border border-gray-200 rounded-lg p-4 transition duration-300">
262
+ <div class="flex items-start mb-3">
263
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
264
+ <i class="fas fa-comment-dots text-blue-600"></i>
265
+ </div>
266
+ <div>
267
+ <h3 class="font-medium">Text Completion</h3>
268
+ <div class="flex items-center mt-1">
269
+ <div class="flex items-center text-yellow-400 text-sm mr-2">
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ <i class="fas fa-star"></i>
273
+ <i class="fas fa-star"></i>
274
+ <i class="far fa-star"></i>
275
+ </div>
276
+ <span class="text-gray-500 text-xs">(89)</span>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ <p class="text-gray-600 text-sm mb-4">Advanced text generation for content creation, code completion, and more.</p>
281
+ <div class="flex justify-between items-center">
282
+ <span class="text-sm font-medium">Premium</span>
283
+ <button class="text-sm bg-blue-600 text-white px-3 py-1 rounded-md hover:bg-blue-700">
284
+ Add to App
285
+ </button>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="plugin-card border border-gray-200 rounded-lg p-4 transition duration-300">
290
+ <div class="flex items-start mb-3">
291
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
292
+ <i class="fas fa-chart-network text-purple-600"></i>
293
+ </div>
294
+ <div>
295
+ <h3 class="font-medium">Knowledge Graph</h3>
296
+ <div class="flex items-center mt-1">
297
+ <div class="flex items-center text-yellow-400 text-sm mr-2">
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ </div>
304
+ <span class="text-gray-500 text-xs">(56)</span>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ <p class="text-gray-600 text-sm mb-4">Connect and query structured knowledge with semantic relationships.</p>
309
+ <div class="flex justify-between items-center">
310
+ <span class="text-sm font-medium">Free</span>
311
+ <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded-md hover:bg-purple-700">
312
+ Add to App
313
+ </button>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="plugin-card border border-gray-200 rounded-lg p-4 transition duration-300">
318
+ <div class="flex items-start mb-3">
319
+ <div class="bg-green-100 p-2 rounded-full mr-3">
320
+ <i class="fas fa-video text-green-600"></i>
321
+ </div>
322
+ <div>
323
+ <h3 class="font-medium">Video Generation</h3>
324
+ <div class="flex items-center mt-1">
325
+ <div class="flex items-center text-yellow-400 text-sm mr-2">
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star-half-alt"></i>
330
+ <i class="far fa-star"></i>
331
+ </div>
332
+ <span class="text-gray-500 text-xs">(34)</span>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <p class="text-gray-600 text-sm mb-4">Create short video clips from text or image prompts with animations.</p>
337
+ <div class="flex justify-between items-center">
338
+ <span class="text-sm font-medium">Premium</span>
339
+ <button class="text-sm bg-green-600 text-white px-3 py-1 rounded-md hover:bg-green-700">
340
+ Add to App
341
+ </button>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="plugin-card border border-gray-200 rounded-lg p-4 transition duration-300">
346
+ <div class="flex items-start mb-3">
347
+ <div class="bg-red-100 p-2 rounded-full mr-3">
348
+ <i class="fas fa-eye text-red-600"></i>
349
+ </div>
350
+ <div>
351
+ <h3 class="font-medium">Computer Vision</h3>
352
+ <div class="flex items-center mt-1">
353
+ <div class="flex items-center text-yellow-400 text-sm mr-2">
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ <i class="far fa-star"></i>
359
+ </div>
360
+ <span class="text-gray-500 text-xs">(67)</span>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ <p class="text-gray-600 text-sm mb-4">Analyze images for objects, faces, text, and other visual elements.</p>
365
+ <div class="flex justify-between items-center">
366
+ <span class="text-sm font-medium">Free</span>
367
+ <button class="text-sm bg-red-600 text-white px-3 py-1 rounded-md hover:bg-red-700">
368
+ Add to App
369
+ </button>
370
+ </div>
371
+ </div>
372
+
373
+ <div class="plugin-card border border-gray-200 rounded-lg p-4 transition duration-300">
374
+ <div class="flex items-start mb-3">
375
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
376
+ <i class="fas fa-database text-yellow-600"></i>
377
+ </div>
378
+ <div>
379
+ <h3 class="font-medium">Data Analysis</h3>
380
+ <div class="flex items-center mt-1">
381
+ <div class="flex items-center text-yellow-400 text-sm mr-2">
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ </div>
388
+ <span class="text-gray-500 text-xs">(112)</span>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ <p class="text-gray-600 text-sm mb-4">Process and visualize datasets with natural language queries.</p>
393
+ <div class="flex justify-between items-center">
394
+ <span class="text-sm font-medium">Free</span>
395
+ <button class="text-sm bg-yellow-600 text-white px-3 py-1 rounded-md hover:bg-yellow-700">
396
+ Add to App
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="text-center mt-8">
403
+ <button class="bg-gray-100 text-gray-700 px-6 py-2 rounded-md font-medium hover:bg-gray-200">
404
+ View All Plugins (48)
405
+ </button>
406
+ </div>
407
+ </div>
408
+ </main>
409
+
410
+ <!-- Footer -->
411
+ <footer class="gradient-bg text-white mt-16">
412
+ <div class="container mx-auto px-4 py-12">
413
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
414
+ <div>
415
+ <h3 class="text-lg font-semibold mb-4">AI Web Factory</h3>
416
+ <p class="text-gray-200 text-sm">
417
+ The fastest way to build and deploy AI-powered web applications with custom domains.
418
+ </p>
419
+ </div>
420
+ <div>
421
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
422
+ <ul class="space-y-2">
423
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Features</a></li>
424
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Pricing</a></li>
425
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Templates</a></li>
426
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Plugins</a></li>
427
+ </ul>
428
+ </div>
429
+ <div>
430
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
431
+ <ul class="space-y-2">
432
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Documentation</a></li>
433
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Tutorials</a></li>
434
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">API Reference</a></li>
435
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Community</a></li>
436
+ </ul>
437
+ </div>
438
+ <div>
439
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
440
+ <ul class="space-y-2">
441
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">About</a></li>
442
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Blog</a></li>
443
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Careers</a></li>
444
+ <li><a href="#" class="text-gray-200 hover:text-white text-sm">Contact</a></li>
445
+ </ul>
446
+ </div>
447
+ </div>
448
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
449
+ <div class="text-gray-300 text-sm mb-4 md:mb-0">
450
+ © 2023 AI Web Factory. All rights reserved.
451
+ </div>
452
+ <div class="flex space-x-6">
453
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-twitter"></i></a>
454
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-github"></i></a>
455
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-discord"></i></a>
456
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-linkedin"></i></a>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </footer>
461
+
462
+ <script>
463
+ // Initialize ACE Editor
464
+ const editor = ace.edit("editor");
465
+ editor.setTheme("ace/theme/tomorrow");
466
+ editor.session.setMode("ace/mode/javascript");
467
+ editor.setOptions({
468
+ fontSize: "14px",
469
+ fontFamily: "'Fira Code', monospace",
470
+ enableBasicAutocompletion: true,
471
+ enableLiveAutocompletion: true,
472
+ showPrintMargin: false,
473
+ tabSize: 2
474
+ });
475
+
476
+ // Add DSL syntax highlighting rules
477
+ const customMode = {
478
+ getTokenizer: function() {
479
+ return {
480
+ getLineTokens: function(line, state) {
481
+ const keywords = "app|layout|header|section|input|dropdown|slider|button|action|call|plugins|use";
482
+ const types = "title|description|placeholder|options|min|max|step|value|prompt|style|creativity";
483
+
484
+ const keywordRegex = new RegExp(`\\b(${keywords})\\b`, "g");
485
+ const typeRegex = new RegExp(`\\b(${types})\\b`, "g");
486
+ const stringRegex = /(["'])(?:(?=(\\?))\2.)*?\1/g;
487
+ const numberRegex = /\b\d+\b/g;
488
+
489
+ const tokens = [];
490
+ let lastIndex = 0;
491
+
492
+ // Match keywords
493
+ let match;
494
+ while ((match = keywordRegex.exec(line)) !== null) {
495
+ if (match.index > lastIndex) {
496
+ tokens.push({type: "text", value: line.substring(lastIndex, match.index)});
497
+ }
498
+ tokens.push({type: "keyword", value: match[0]});
499
+ lastIndex = match.index + match[0].length;
500
+ }
501
+
502
+ // Match types
503
+ lastIndex = 0;
504
+ while ((match = typeRegex.exec(line)) !== null) {
505
+ if (match.index > lastIndex) {
506
+ tokens.push({type: "text", value: line.substring(lastIndex, match.index)});
507
+ }
508
+ tokens.push({type: "type", value: match[0]});
509
+ lastIndex = match.index + match[0].length;
510
+ }
511
+
512
+ // Match strings
513
+ lastIndex = 0;
514
+ while ((match = stringRegex.exec(line)) !== null) {
515
+ if (match.index > lastIndex) {
516
+ tokens.push({type: "text", value: line.substring(lastIndex, match.index)});
517
+ }
518
+ tokens.push({type: "string", value: match[0]});
519
+ lastIndex = match.index + match[0].length;
520
+ }
521
+
522
+ // Match numbers
523
+ lastIndex = 0;
524
+ while ((match = numberRegex.exec(line)) !== null) {
525
+ if (match.index > lastIndex) {
526
+ tokens.push({type: "text", value: line.substring(lastIndex, match.index)});
527
+ }
528
+ tokens.push({type: "number", value: match[0]});
529
+ lastIndex = match.index + match[0].length;
530
+ }
531
+
532
+ if (lastIndex < line.length) {
533
+ tokens.push({type: "text", value: line.substring(lastIndex)});
534
+ }
535
+
536
+ return {tokens: tokens, state: state};
537
+ }
538
+ };
539
+ }
540
+ };
541
+
542
+ // Apply custom mode
543
+ editor.session.setMode(new ace.require("ace/mode/javascript").Mode());
544
+
545
+ // Add DSL-specific completions
546
+ const langTools = ace.require("ace/ext/language_tools");
547
+ const completer = {
548
+ getCompletions: function(editor, session, pos, prefix, callback) {
549
+ const completions = [
550
+ {value: "app", meta: "DSL Keyword"},
551
+ {value: "layout", meta: "DSL Keyword"},
552
+ {value: "header", meta: "DSL Keyword"},
553
+ {value: "section", meta: "DSL Keyword"},
554
+ {value: "input", meta: "DSL Keyword"},
555
+ {value: "dropdown", meta: "DSL Keyword"},
556
+ {value: "slider", meta: "DSL Keyword"},
557
+ {value: "button", meta: "DSL Keyword"},
558
+ {value: "action", meta: "DSL Keyword"},
559
+ {value: "call", meta: "DSL Keyword"},
560
+ {value: "plugins", meta: "DSL Keyword"},
561
+ {value: "use", meta: "DSL Keyword"},
562
+ {value: "title", meta: "DSL Property"},
563
+ {value: "description", meta: "DSL Property"},
564
+ {value: "placeholder", meta: "DSL Property"},
565
+ {value: "options", meta: "DSL Property"},
566
+ {value: "min", meta: "DSL Property"},
567
+ {value: "max", meta: "DSL Property"},
568
+ {value: "step", meta: "DSL Property"},
569
+ {value: "value", meta: "DSL Property"},
570
+ {value: "prompt", meta: "DSL Property"},
571
+ {value: "style", meta: "DSL Property"},
572
+ {value: "creativity", meta: "DSL Property"},
573
+ {value: "ai.image", meta: "AI Plugin"},
574
+ {value: "ai.text.completion", meta: "AI Plugin"},
575
+ {value: "ai.video", meta: "AI Plugin"},
576
+ {value: "ai.vision", meta: "AI Plugin"},
577
+ {value: "ai.speech", meta: "AI Plugin"},
578
+ {value: "ai.knowledge", meta: "AI Plugin"},
579
+ {value: "ai.data", meta: "AI Plugin"}
580
+ ];
581
+ callback(null, completions);
582
+ }
583
+ };
584
+ langTools.addCompleter(completer);
585
+
586
+ // Handle plugin card clicks
587
+ document.querySelectorAll('.plugin-card button').forEach(button => {
588
+ button.addEventListener('click', function() {
589
+ const pluginName = this.closest('.plugin-card').querySelector('h3').textContent;
590
+ const pluginId = pluginName.toLowerCase().replace(/\s+/g, '.');
591
+
592
+ // Add plugin to the editor
593
+ const cursor = editor.getCursorPosition();
594
+ const session = editor.getSession();
595
+
596
+ // Find the plugins block or create one
597
+ const content = session.getValue();
598
+ const pluginsIndex = content.indexOf('plugins');
599
+
600
+ if (pluginsIndex === -1) {
601
+ // Add plugins block at the end
602
+ const insertPos = session.getLength() - 1;
603
+ session.insert({row: insertPos, column: 0}, `\n\n plugins {\n use ${pluginId}\n }`);
604
+ } else {
605
+ // Find the closing brace of the plugins block
606
+ const lines = content.split('\n');
607
+ let braceLine = -1;
608
+ for (let i = pluginsIndex; i < lines.length; i++) {
609
+ if (lines[i].includes('}')) {
610
+ braceLine = i;
611
+ break;
612
+ }
613
+ }
614
+
615
+ if (braceLine !== -1) {
616
+ // Insert before the closing brace
617
+ session.insert({row: braceLine, column: 0}, ` use ${pluginId}\n`);
618
+ }
619
+ }
620
+
621
+ // Show notification
622
+ const notification = document.createElement('div');
623
+ notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-md shadow-lg';
624
+ notification.textContent = `Added ${pluginName} plugin to your app`;
625
+ document.body.appendChild(notification);
626
+
627
+ setTimeout(() => {
628
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
629
+ setTimeout(() => notification.remove(), 300);
630
+ }, 3000);
631
+ });
632
+ });
633
+ </script>
634
+ <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=paradiseDev/percertain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
635
+ </html>