Hugging Face's logo

Spaces:
docto41
/
generate-any-web
Running

App Files Community
docto41 commited on
Commit
c72ed27
·
verified ·
1 Parent(s): 068e764

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +561 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Generate Any Web
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: purple
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: generate-any-web
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,561 @@
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>NexusGen - Futuristic Website Generator</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
11
+
12
+ :root {
13
+ --primary: #00f0ff;
14
+ --secondary: #7b2dff;
15
+ --dark: #0a0a1a;
16
+ --light: #e0e0ff;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--dark);
22
+ color: var(--light);
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ h1, h2, h3, h4, .btn {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .gradient-text {
31
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
32
+ -webkit-background-clip: text;
33
+ background-clip: text;
34
+ color: transparent;
35
+ }
36
+
37
+ .gradient-bg {
38
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
39
+ }
40
+
41
+ .glass-card {
42
+ background: rgba(15, 15, 35, 0.7);
43
+ backdrop-filter: blur(10px);
44
+ border: 1px solid rgba(255, 255, 255, 0.1);
45
+ border-radius: 12px;
46
+ }
47
+
48
+ .pulse {
49
+ animation: pulse 2s infinite;
50
+ }
51
+
52
+ @keyframes pulse {
53
+ 0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); }
54
+ 70% { box-shadow: 0 0 0 15px rgba(0, 240, 255, 0); }
55
+ 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
56
+ }
57
+
58
+ .neon-border {
59
+ position: relative;
60
+ }
61
+
62
+ .neon-border::before {
63
+ content: '';
64
+ position: absolute;
65
+ inset: 0;
66
+ border-radius: 12px;
67
+ padding: 2px;
68
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
69
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
70
+ -webkit-mask-composite: xor;
71
+ mask-composite: exclude;
72
+ pointer-events: none;
73
+ }
74
+
75
+ .code-editor {
76
+ background: #1e1e2e;
77
+ border-radius: 8px;
78
+ font-family: 'Courier New', monospace;
79
+ }
80
+
81
+ .glow {
82
+ filter: drop-shadow(0 0 8px var(--primary));
83
+ }
84
+ </style>
85
+ </head>
86
+ <body>
87
+ <div class="min-h-screen relative overflow-hidden">
88
+ <!-- Particles background -->
89
+ <div id="particles-js" class="absolute inset-0 z-0"></div>
90
+
91
+ <!-- Main content -->
92
+ <div class="relative z-10 container mx-auto px-4 py-12">
93
+ <!-- Header -->
94
+ <header class="flex justify-between items-center mb-16">
95
+ <div class="flex items-center">
96
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center mr-3">
97
+ <i class="fas fa-code text-white text-lg"></i>
98
+ </div>
99
+ <h1 class="text-2xl font-bold gradient-text">NexusGen</h1>
100
+ </div>
101
+ <nav class="hidden md:flex space-x-8">
102
+ <a href="#" class="text-white hover:text-cyan-300 transition">Features</a>
103
+ <a href="#" class="text-white hover:text-cyan-300 transition">Examples</a>
104
+ <a href="#" class="text-white hover:text-cyan-300 transition">Pricing</a>
105
+ <a href="#" class="text-white hover:text-cyan-300 transition">API</a>
106
+ </nav>
107
+ <button class="md:hidden text-white">
108
+ <i class="fas fa-bars text-2xl"></i>
109
+ </button>
110
+ </header>
111
+
112
+ <!-- Hero section -->
113
+ <section class="mb-24 text-center">
114
+ <div class="max-w-4xl mx-auto">
115
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
116
+ <span class="gradient-text">Generate</span> Any Website
117
+ <span class="gradient-text">Instantly</span>
118
+ </h1>
119
+ <p class="text-xl text-gray-300 mb-10 max-w-3xl mx-auto">
120
+ The world's most advanced AI website generator. Describe what you need, and NexusGen will create a complete, production-ready website in seconds.
121
+ </p>
122
+ <div class="flex flex-col md:flex-row justify-center gap-4">
123
+ <button class="btn gradient-bg text-white px-8 py-4 rounded-full font-bold text-lg hover:opacity-90 transition transform hover:scale-105">
124
+ Generate Your Site <i class="fas fa-arrow-right ml-2"></i>
125
+ </button>
126
+ <button class="btn glass-card text-white px-8 py-4 rounded-full font-bold text-lg border border-gray-700 hover:border-cyan-300 transition">
127
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Generator interface -->
134
+ <section class="glass-card neon-border p-8 mb-20">
135
+ <div class="flex flex-col lg:flex-row gap-8">
136
+ <!-- Input panel -->
137
+ <div class="lg:w-1/2">
138
+ <h2 class="text-2xl font-bold mb-6 gradient-text">Describe Your Website</h2>
139
+
140
+ <div class="mb-6">
141
+ <label class="block text-gray-300 mb-2">Website Type</label>
142
+ <div class="grid grid-cols-2 gap-3">
143
+ <button class="glass-card py-3 px-4 rounded-lg text-left hover:border-cyan-300 border border-gray-700 transition">
144
+ <i class="fas fa-shopping-bag mr-2 text-purple-400"></i> E-commerce
145
+ </button>
146
+ <button class="glass-card py-3 px-4 rounded-lg text-left hover:border-cyan-300 border border-gray-700 transition">
147
+ <i class="fas fa-blog mr-2 text-blue-400"></i> Blog
148
+ </button>
149
+ <button class="glass-card py-3 px-4 rounded-lg text-left hover:border-cyan-300 border border-gray-700 transition">
150
+ <i class="fas fa-briefcase mr-2 text-green-400"></i> Business
151
+ </button>
152
+ <button class="glass-card py-3 px-4 rounded-lg text-left hover:border-cyan-300 border border-gray-700 transition">
153
+ <i class="fas fa-landmark mr-2 text-yellow-400"></i> Portfolio
154
+ </button>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="mb-6">
159
+ <label class="block text-gray-300 mb-2">Describe your website in detail</label>
160
+ <textarea
161
+ id="website-description"
162
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 h-40"
163
+ placeholder="Example: I need a modern e-commerce site for selling handmade jewelry. It should have a dark theme with gold accents, product categories, a shopping cart, and customer reviews. The site should be elegant and high-end looking."
164
+ ></textarea>
165
+ </div>
166
+
167
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
168
+ <div>
169
+ <label class="block text-gray-300 mb-2">Color Scheme</label>
170
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white">
171
+ <option>Modern Dark</option>
172
+ <option>Light Professional</option>
173
+ <option>Vibrant Colors</option>
174
+ <option>Pastel</option>
175
+ <option>Custom...</option>
176
+ </select>
177
+ </div>
178
+ <div>
179
+ <label class="block text-gray-300 mb-2">Layout Style</label>
180
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white">
181
+ <option>Modern</option>
182
+ <option>Minimalist</option>
183
+ <option>Corporate</option>
184
+ <option>Creative</option>
185
+ <option>Custom...</option>
186
+ </select>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="flex justify-between items-center">
191
+ <div class="flex items-center">
192
+ <input type="checkbox" id="responsive" class="mr-2" checked>
193
+ <label for="responsive" class="text-gray-300">Mobile Responsive</label>
194
+ </div>
195
+ <button id="generate-btn" class="btn gradient-bg text-white px-6 py-3 rounded-lg font-bold hover:opacity-90 transition flex items-center">
196
+ <i class="fas fa-bolt mr-2"></i> Generate Website
197
+ </button>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Output preview -->
202
+ <div class="lg:w-1/2">
203
+ <div class="flex justify-between items-center mb-6">
204
+ <h2 class="text-2xl font-bold gradient-text">Live Preview</h2>
205
+ <div class="flex space-x-2">
206
+ <button class="bg-gray-800 text-white p-2 rounded-lg">
207
+ <i class="fas fa-desktop"></i>
208
+ </button>
209
+ <button class="bg-gray-800 text-white p-2 rounded-lg">
210
+ <i class="fas fa-mobile-alt"></i>
211
+ </button>
212
+ <button class="bg-gray-800 text-white p-2 rounded-lg">
213
+ <i class="fas fa-tablet-alt"></i>
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="relative">
219
+ <div class="absolute top-0 left-0 right-0 h-8 bg-gray-800 rounded-t-lg flex items-center px-3">
220
+ <div class="flex space-x-2">
221
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
222
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
223
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
224
+ </div>
225
+ <div class="text-xs text-gray-400 ml-3">preview.nexusgen.com</div>
226
+ </div>
227
+ <div id="preview-container" class="bg-white rounded-b-lg overflow-hidden border-t-0 h-96">
228
+ <div class="h-full flex items-center justify-center text-gray-500">
229
+ <div class="text-center p-6">
230
+ <i class="fas fa-globe-americas text-4xl mb-4 text-gray-300"></i>
231
+ <p>Your generated website will appear here</p>
232
+ <p class="text-sm mt-2">Describe your website and click "Generate"</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="mt-4 flex justify-between">
239
+ <button class="text-gray-400 hover:text-white transition">
240
+ <i class="fas fa-code mr-1"></i> View Code
241
+ </button>
242
+ <button class="text-gray-400 hover:text-white transition">
243
+ <i class="fas fa-download mr-1"></i> Download
244
+ </button>
245
+ <button class="text-gray-400 hover:text-white transition">
246
+ <i class="fas fa-share-alt mr-1"></i> Share
247
+ </button>
248
+ <button class="text-gray-400 hover:text-white transition">
249
+ <i class="fas fa-rocket mr-1"></i> Publish
250
+ </button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Features -->
257
+ <section class="mb-20">
258
+ <h2 class="text-3xl font-bold text-center mb-16 gradient-text">Powered by Advanced AI</h2>
259
+
260
+ <div class="grid md:grid-cols-3 gap-8">
261
+ <div class="glass-card p-6 rounded-xl hover:border-cyan-300 border border-gray-700 transition transform hover:-translate-y-2">
262
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-4">
263
+ <i class="fas fa-brain text-2xl text-white"></i>
264
+ </div>
265
+ <h3 class="text-xl font-bold mb-3">Deep Learning</h3>
266
+ <p class="text-gray-300">Our AI understands context and creates websites that match your exact requirements, not just templates.</p>
267
+ </div>
268
+
269
+ <div class="glass-card p-6 rounded-xl hover:border-cyan-300 border border-gray-700 transition transform hover:-translate-y-2">
270
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-4">
271
+ <i class="fas fa-bolt text-2xl text-white"></i>
272
+ </div>
273
+ <h3 class="text-xl font-bold mb-3">Instant Generation</h3>
274
+ <p class="text-gray-300">Get a complete, functional website in seconds. No waiting, no compiling, just instant results.</p>
275
+ </div>
276
+
277
+ <div class="glass-card p-6 rounded-xl hover:border-cyan-300 border border-gray-700 transition transform hover:-translate-y-2">
278
+ <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-4">
279
+ <i class="fas fa-cogs text-2xl text-white"></i>
280
+ </div>
281
+ <h3 class="text-xl font-bold mb-3">Full Customization</h3>
282
+ <p class="text-gray-300">Every aspect of your generated website can be fine-tuned to perfection with our intuitive controls.</p>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- CTA -->
288
+ <section class="text-center mb-20">
289
+ <div class="glass-card p-8 rounded-xl max-w-4xl mx-auto">
290
+ <h2 class="text-3xl font-bold mb-6 gradient-text">Ready to Build the Future?</h2>
291
+ <p class="text-xl text-gray-300 mb-8">Join thousands of developers, designers, and entrepreneurs who are creating websites faster than ever before.</p>
292
+ <button class="btn gradient-bg text-white px-8 py-4 rounded-full font-bold text-lg hover:opacity-90 transition transform hover:scale-105 pulse">
293
+ Start Generating Now <i class="fas fa-arrow-right ml-2"></i>
294
+ </button>
295
+ </div>
296
+ </section>
297
+ </div>
298
+
299
+ <!-- Footer -->
300
+ <footer class="bg-gray-900 py-12">
301
+ <div class="container mx-auto px-4">
302
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
303
+ <div>
304
+ <h3 class="text-xl font-bold mb-4 gradient-text">NexusGen</h3>
305
+ <p class="text-gray-400">The most advanced website generator in the world. Create anything, instantly.</p>
306
+ </div>
307
+ <div>
308
+ <h4 class="text-lg font-bold mb-4 text-white">Product</h4>
309
+ <ul class="space-y-2">
310
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Features</a></li>
311
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Pricing</a></li>
312
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">API</a></li>
313
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Integrations</a></li>
314
+ </ul>
315
+ </div>
316
+ <div>
317
+ <h4 class="text-lg font-bold mb-4 text-white">Resources</h4>
318
+ <ul class="space-y-2">
319
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Documentation</a></li>
320
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Tutorials</a></li>
321
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Blog</a></li>
322
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Community</a></li>
323
+ </ul>
324
+ </div>
325
+ <div>
326
+ <h4 class="text-lg font-bold mb-4 text-white">Company</h4>
327
+ <ul class="space-y-2">
328
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">About</a></li>
329
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Careers</a></li>
330
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Contact</a></li>
331
+ <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition">Legal</a></li>
332
+ </ul>
333
+ </div>
334
+ </div>
335
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
336
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 NexusGen. All rights reserved.</p>
337
+ <div class="flex space-x-6">
338
+ <a href="#" class="text-gray-400 hover:text-cyan-300 transition"><i class="fab fa-twitter text-xl"></i></a>
339
+ <a href="#" class="text-gray-400 hover:text-cyan-300 transition"><i class="fab fa-github text-xl"></i></a>
340
+ <a href="#" class="text-gray-400 hover:text-cyan-300 transition"><i class="fab fa-discord text-xl"></i></a>
341
+ <a href="#" class="text-gray-400 hover:text-cyan-300 transition"><i class="fab fa-linkedin text-xl"></i></a>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </footer>
346
+ </div>
347
+
348
+ <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
349
+ <script>
350
+ // Initialize particles.js
351
+ document.addEventListener('DOMContentLoaded', function() {
352
+ particlesJS('particles-js', {
353
+ "particles": {
354
+ "number": {
355
+ "value": 80,
356
+ "density": {
357
+ "enable": true,
358
+ "value_area": 800
359
+ }
360
+ },
361
+ "color": {
362
+ "value": "#00f0ff"
363
+ },
364
+ "shape": {
365
+ "type": "circle",
366
+ "stroke": {
367
+ "width": 0,
368
+ "color": "#000000"
369
+ },
370
+ "polygon": {
371
+ "nb_sides": 5
372
+ }
373
+ },
374
+ "opacity": {
375
+ "value": 0.5,
376
+ "random": false,
377
+ "anim": {
378
+ "enable": false,
379
+ "speed": 1,
380
+ "opacity_min": 0.1,
381
+ "sync": false
382
+ }
383
+ },
384
+ "size": {
385
+ "value": 3,
386
+ "random": true,
387
+ "anim": {
388
+ "enable": false,
389
+ "speed": 40,
390
+ "size_min": 0.1,
391
+ "sync": false
392
+ }
393
+ },
394
+ "line_linked": {
395
+ "enable": true,
396
+ "distance": 150,
397
+ "color": "#7b2dff",
398
+ "opacity": 0.4,
399
+ "width": 1
400
+ },
401
+ "move": {
402
+ "enable": true,
403
+ "speed": 2,
404
+ "direction": "none",
405
+ "random": false,
406
+ "straight": false,
407
+ "out_mode": "out",
408
+ "bounce": false,
409
+ "attract": {
410
+ "enable": false,
411
+ "rotateX": 600,
412
+ "rotateY": 1200
413
+ }
414
+ }
415
+ },
416
+ "interactivity": {
417
+ "detect_on": "canvas",
418
+ "events": {
419
+ "onhover": {
420
+ "enable": true,
421
+ "mode": "grab"
422
+ },
423
+ "onclick": {
424
+ "enable": true,
425
+ "mode": "push"
426
+ },
427
+ "resize": true
428
+ },
429
+ "modes": {
430
+ "grab": {
431
+ "distance": 140,
432
+ "line_linked": {
433
+ "opacity": 1
434
+ }
435
+ },
436
+ "bubble": {
437
+ "distance": 400,
438
+ "size": 40,
439
+ "duration": 2,
440
+ "opacity": 8,
441
+ "speed": 3
442
+ },
443
+ "repulse": {
444
+ "distance": 200,
445
+ "duration": 0.4
446
+ },
447
+ "push": {
448
+ "particles_nb": 4
449
+ },
450
+ "remove": {
451
+ "particles_nb": 2
452
+ }
453
+ }
454
+ },
455
+ "retina_detect": true
456
+ });
457
+
458
+ // Generate button functionality
459
+ const generateBtn = document.getElementById('generate-btn');
460
+ const previewContainer = document.getElementById('preview-container');
461
+ const websiteDescription = document.getElementById('website-description');
462
+
463
+ generateBtn.addEventListener('click', function() {
464
+ if (websiteDescription.value.trim() === '') {
465
+ alert('Please describe your website first');
466
+ return;
467
+ }
468
+
469
+ // Show loading state
470
+ generateBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Generating...';
471
+ generateBtn.disabled = true;
472
+
473
+ // Simulate generation process
474
+ setTimeout(() => {
475
+ // Create a sample generated website
476
+ const generatedWebsite = `
477
+ <div class="h-full bg-gray-100">
478
+ <nav class="bg-gray-900 text-white p-4">
479
+ <div class="container mx-auto flex justify-between items-center">
480
+ <div class="text-xl font-bold">MyGeneratedSite</div>
481
+ <div class="flex space-x-6">
482
+ <a href="#" class="hover:text-cyan-300">Home</a>
483
+ <a href="#" class="hover:text-cyan-300">Products</a>
484
+ <a href="#" class="hover:text-cyan-300">About</a>
485
+ <a href="#" class="hover:text-cyan-300">Contact</a>
486
+ </div>
487
+ </div>
488
+ </nav>
489
+
490
+ <div class="container mx-auto p-6">
491
+ <div class="bg-white rounded-lg shadow-lg p-8 mb-6">
492
+ <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to Your Generated Website</h1>
493
+ <p class="text-gray-600 mb-6">This is a fully functional website generated based on your description. All elements are customizable.</p>
494
+ <button class="bg-gradient-to-r from-cyan-500 to-blue-600 text-white px-6 py-3 rounded-lg font-bold">Get Started</button>
495
+ </div>
496
+
497
+ <div class="grid md:grid-cols-3 gap-6">
498
+ <div class="bg-white rounded-lg shadow-lg p-6">
499
+ <div class="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center mb-4">
500
+ <i class="fas fa-rocket text-cyan-600"></i>
501
+ </div>
502
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Feature One</h3>
503
+ <p class="text-gray-600">This feature was automatically generated based on your requirements.</p>
504
+ </div>
505
+ <div class="bg-white rounded-lg shadow-lg p-6">
506
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
507
+ <i class="fas fa-cog text-purple-600"></i>
508
+ </div>
509
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Feature Two</h3>
510
+ <p class="text-gray-600">Customize this section to match your exact needs.</p>
511
+ </div>
512
+ <div class="bg-white rounded-lg shadow-lg p-6">
513
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
514
+ <i class="fas fa-chart-line text-green-600"></i>
515
+ </div>
516
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Feature Three</h3>
517
+ <p class="text-gray-600">All elements are responsive and production-ready.</p>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ `;
523
+
524
+ previewContainer.innerHTML = generatedWebsite;
525
+
526
+ // Reset button
527
+ generateBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i> Generate Website';
528
+ generateBtn.disabled = false;
529
+
530
+ // Show success message
531
+ const successAlert = document.createElement('div');
532
+ successAlert.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center';
533
+ successAlert.innerHTML = `
534
+ <i class="fas fa-check-circle mr-2"></i> Website generated successfully!
535
+ `;
536
+ document.body.appendChild(successAlert);
537
+
538
+ setTimeout(() => {
539
+ successAlert.remove();
540
+ }, 3000);
541
+ }, 2000);
542
+ });
543
+
544
+ // Add futuristic typing effect to textarea placeholder
545
+ const placeholderText = "Example: I need a modern e-commerce site for selling handmade jewelry. It should have a dark theme with gold accents, product categories, a shopping cart, and customer reviews. The site should be elegant and high-end looking.";
546
+ let i = 0;
547
+
548
+ function typeWriter() {
549
+ if (i < placeholderText.length) {
550
+ websiteDescription.setAttribute('placeholder', websiteDescription.getAttribute('placeholder') + placeholderText.charAt(i));
551
+ i++;
552
+ setTimeout(typeWriter, Math.random() * 50 + 20);
553
+ }
554
+ }
555
+
556
+ // Start typing after a delay
557
+ setTimeout(typeWriter, 1000);
558
+ });
559
+ </script>
560
+ <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=docto41/generate-any-web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
561
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ cree moi un gnérateur de site uniquement pardescription tres puissant au monde.. je veux qu'il génére que de vrais site pas de site vitrine ni d'exemple , , je la veux futuriste