Hugging Face's logo

Spaces:
docto41
/
generate-any-web
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +617 -373
  2. prompts.txt +2 -1
index.html CHANGED
@@ -1,17 +1,17 @@
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
  }
@@ -27,319 +27,260 @@
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>
@@ -347,69 +288,66 @@
347
 
348
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  },
@@ -418,7 +356,7 @@
418
  "events": {
419
  "onhover": {
420
  "enable": true,
421
- "mode": "grab"
422
  },
423
  "onclick": {
424
  "enable": true,
@@ -427,135 +365,441 @@
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>
 
1
  <!DOCTYPE html>
2
+ <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuantumBuilder - Générateur IA de Sites Web</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
+ --quantum: #7d4bff;
14
+ --neon: #00f9ff;
15
  --dark: #0a0a1a;
16
  --light: #e0e0ff;
17
  }
 
27
  font-family: 'Orbitron', sans-serif;
28
  }
29
 
30
+ .quantum-text {
31
+ background: linear-gradient(90deg, var(--quantum), var(--neon));
32
  -webkit-background-clip: text;
33
  background-clip: text;
34
  color: transparent;
35
  }
36
 
37
+ .quantum-bg {
38
+ background: linear-gradient(135deg, var(--quantum), var(--neon));
39
  }
40
 
41
+ .holographic-card {
42
+ background: rgba(15, 15, 35, 0.8);
43
+ backdrop-filter: blur(12px);
44
+ border: 1px solid rgba(123, 75, 255, 0.3);
45
+ border-radius: 16px;
46
+ box-shadow: 0 0 30px rgba(123, 75, 255, 0.2);
47
  }
48
 
49
+ .quantum-pulse {
50
+ animation: quantum-pulse 3s infinite;
51
  }
52
 
53
+ @keyframes quantum-pulse {
54
+ 0% { box-shadow: 0 0 0 0 rgba(123, 75, 255, 0.4); }
55
+ 70% { box-shadow: 0 0 0 20px rgba(123, 75, 255, 0); }
56
+ 100% { box-shadow: 0 0 0 0 rgba(123, 75, 255, 0); }
57
  }
58
 
59
+ .quantum-border {
60
  position: relative;
61
  }
62
 
63
+ .quantum-border::before {
64
  content: '';
65
  position: absolute;
66
  inset: 0;
67
+ border-radius: 16px;
68
  padding: 2px;
69
+ background: linear-gradient(135deg, var(--quantum), var(--neon));
70
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
71
  -webkit-mask-composite: xor;
72
  mask-composite: exclude;
73
  pointer-events: none;
74
  }
75
 
76
+ .quantum-glow {
77
+ filter: drop-shadow(0 0 15px rgba(123, 75, 255, 0.7));
 
 
78
  }
79
 
80
+ .typing-cursor {
81
+ display: inline-block;
82
+ width: 2px;
83
+ height: 24px;
84
+ background: var(--neon);
85
+ animation: blink 1s infinite;
86
+ vertical-align: middle;
87
+ }
88
+
89
+ @keyframes blink {
90
+ 0%, 100% { opacity: 1; }
91
+ 50% { opacity: 0; }
92
  }
93
  </style>
94
  </head>
95
  <body>
96
  <div class="min-h-screen relative overflow-hidden">
97
+ <!-- Quantum particles background -->
98
+ <div id="quantum-particles" class="absolute inset-0 z-0"></div>
99
 
100
  <!-- Main content -->
101
  <div class="relative z-10 container mx-auto px-4 py-12">
102
  <!-- Header -->
103
  <header class="flex justify-between items-center mb-16">
104
+ <div class="flex items-center quantum-glow">
105
+ <div class="w-12 h-12 rounded-full quantum-bg flex items-center justify-center mr-3">
106
+ <i class="fas fa-atom text-white text-xl"></i>
107
  </div>
108
+ <h1 class="text-3xl font-bold quantum-text">QuantumBuilder</h1>
109
  </div>
110
+ <button class="quantum-bg text-white px-6 py-3 rounded-lg font-bold hover:opacity-90 transition">
111
+ <i class="fas fa-user-astronaut mr-2"></i> Se connecter
 
 
 
 
 
 
112
  </button>
113
  </header>
114
 
115
+ <!-- Generator section -->
116
+ <section class="max-w-5xl mx-auto">
117
+ <div class="holographic-card quantum-border p-8 mb-10">
118
+ <h2 class="text-3xl font-bold mb-6 quantum-text">Décrivez votre site web</h2>
119
+
120
+ <div class="relative mb-8">
121
+ <label class="block text-gray-300 mb-2 text-lg">Entrez une description détaillée</label>
122
+ <textarea
123
+ id="quantum-description"
124
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg p-6 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 h-64 text-lg"
125
+ placeholder=""
126
+ autofocus
127
+ ></textarea>
128
+ <div id="typing-indicator" class="absolute bottom-4 right-4 text-gray-500 hidden">
129
+ <span id="typing-text"></span><span class="typing-cursor"></span>
130
+ </div>
 
131
  </div>
132
+
133
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
134
+ <div class="flex items-center">
135
+ <input type="checkbox" id="quantum-responsive" class="mr-2 w-5 h-5" checked>
136
+ <label for="quantum-responsive" class="text-gray-300">Responsive design</label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  </div>
138
 
139
+ <div class="flex gap-4">
140
+ <button id="quantum-settings-btn" class="holographic-card text-white px-6 py-3 rounded-lg font-bold border border-gray-700 hover:border-purple-400 transition">
141
+ <i class="fas fa-cog mr-2"></i> Paramètres avancés
142
+ </button>
143
+ <button id="quantum-generate-btn" class="quantum-bg text-white px-8 py-3 rounded-lg font-bold hover:opacity-90 transition quantum-pulse">
144
+ <i class="fas fa-bolt mr-2"></i> Générer le site
145
+ </button>
146
  </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Advanced settings (hidden by default) -->
151
+ <div id="quantum-settings" class="holographic-card p-6 mb-10 hidden">
152
+ <h3 class="text-xl font-bold mb-4 quantum-text">Paramètres avancés</h3>
153
+ <div class="grid md:grid-cols-3 gap-6">
154
+ <div>
155
+ <label class="block text-gray-300 mb-2">Style visuel</label>
156
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white">
157
+ <option>Moderne</option>
158
+ <option>Minimaliste</option>
159
+ <option>Futuriste</option>
160
+ <option>Professionnel</option>
161
+ <option>Personnalisé</option>
162
+ </select>
163
+ </div>
164
+ <div>
165
+ <label class="block text-gray-300 mb-2">Palette de couleurs</label>
166
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white">
167
+ <option>Sombre</option>
168
+ <option>Claire</option>
169
+ <option>Vibrante</option>
170
+ <option>Pastel</option>
171
+ <option>Personnalisée</option>
172
+ </select>
173
+ </div>
174
+ <div>
175
+ <label class="block text-gray-300 mb-2">Framework</label>
176
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-white">
177
+ <option>HTML/CSS/JS</option>
178
+ <option>React</option>
179
+ <option>Vue.js</option>
180
+ <option>Tailwind CSS</option>
181
+ <option>Bootstrap</option>
182
+ </select>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Results section -->
188
+ <div id="quantum-results" class="hidden">
189
+ <div class="flex justify-between items-center mb-6">
190
+ <h2 class="text-3xl font-bold quantum-text">Votre site est prêt</h2>
191
+ <div class="flex gap-3">
192
+ <button id="quantum-edit-btn" class="holographic-card text-white px-4 py-2 rounded-lg text-sm">
193
+ <i class="fas fa-edit mr-1"></i> Modifier
194
+ </button>
195
+ <button id="quantum-download-btn" class="quantum-bg text-white px-4 py-2 rounded-lg text-sm">
196
+ <i class="fas fa-download mr-1"></i> Télécharger
197
+ </button>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="holographic-card quantum-border overflow-hidden">
202
+ <div class="flex border-b border-gray-800">
203
+ <div class="p-3 border-r border-gray-800 text-gray-400">
204
+ <i class="fas fa-desktop"></i>
205
  </div>
206
+ <div class="p-3 border-r border-gray-800 text-gray-400">
207
+ <i class="fas fa-mobile-alt"></i>
208
+ </div>
209
+ <div class="p-3 border-r border-gray-800 text-gray-400">
210
+ <i class="fas fa-tablet-alt"></i>
211
+ </div>
212
+ <div class="flex-1 p-3 text-right text-sm text-gray-500">
213
+ quantumbuilder.com/generated/<span id="quantum-site-id">x7f9k2</span>
 
214
  </div>
215
  </div>
216
 
217
+ <!-- Preview iframe -->
218
+ <div class="h-96 bg-gray-900 flex items-center justify-center">
219
+ <iframe id="quantum-preview" class="w-full h-full border-0"></iframe>
 
 
 
 
 
220
  </div>
221
  </div>
222
 
223
+ <!-- Code tabs -->
224
+ <div class="mt-6">
225
+ <div class="flex border-b border-gray-800 mb-4">
226
+ <button class="px-4 py-2 border-b-2 border-purple-500 text-white font-medium">HTML</button>
227
+ <button class="px-4 py-2 text-gray-400 hover:text-white">CSS</button>
228
+ <button class="px-4 py-2 text-gray-400 hover:text-white">JavaScript</button>
229
+ <button class="px-4 py-2 text-gray-400 hover:text-white">Assets</button>
 
 
 
 
 
 
 
 
230
  </div>
231
 
232
+ <div class="holographic-card p-0 overflow-hidden">
233
+ <div class="bg-gray-900 p-4 flex justify-between items-center">
234
+ <div class="text-sm text-gray-400">
235
+ <i class="fas fa-file-code mr-2"></i> index.html
 
 
 
 
 
 
 
 
 
 
 
 
236
  </div>
237
+ <button class="text-gray-400 hover:text-white">
238
+ <i class="fas fa-copy"></i>
239
+ </button>
240
  </div>
241
+ <pre id="quantum-html-code" class="p-4 overflow-auto max-h-96 bg-gray-900 text-gray-300 text-sm"></pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
  </div>
243
  </div>
244
  </div>
 
 
 
 
 
245
 
246
+ <!-- Loading state -->
247
+ <div id="quantum-loading" class="holographic-card p-12 text-center hidden">
248
+ <div class="inline-block mb-6">
249
+ <div class="w-20 h-20 rounded-full quantum-bg flex items-center justify-center mx-auto quantum-glow">
250
+ <i class="fas fa-atom text-white text-3xl animate-spin"></i>
251
  </div>
 
 
252
  </div>
253
+ <h3 class="text-2xl font-bold mb-2 quantum-text">Construction quantique en cours</h3>
254
+ <p class="text-gray-400 mb-6">Notre IA génère votre site web atomique par atomique</p>
255
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
256
+ <div id="quantum-progress" class="quantum-bg h-2.5 rounded-full" style="width: 0%"></div>
 
 
 
 
 
 
 
 
 
 
 
257
  </div>
258
+ <p id="quantum-status" class="text-sm text-gray-500 mt-4">Initialisation des algorithmes quantiques...</p>
 
 
 
 
 
 
 
 
 
 
259
  </div>
260
  </section>
261
  </div>
262
 
263
  <!-- Footer -->
264
+ <footer class="bg-gray-900 py-12 mt-20 border-t border-gray-800">
265
  <div class="container mx-auto px-4">
266
+ <div class="grid md:grid-cols-2 gap-8 mb-8">
 
 
 
 
267
  <div>
268
+ <h3 class="text-xl font-bold mb-4 quantum-text">QuantumBuilder</h3>
269
+ <p class="text-gray-400 max-w-lg">L'outil le plus avancé pour générer des sites web complets et fonctionnels en temps réel grâce à l'IA quantique.</p>
 
 
 
 
 
270
  </div>
271
+ <div class="flex flex-col items-end">
272
+ <button class="quantum-bg text-white px-6 py-3 rounded-lg font-bold hover:opacity-90 transition mb-6">
273
+ <i class="fas fa-bolt mr-2"></i> Essayer gratuitement
274
+ </button>
275
+ <div class="flex space-x-6">
276
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-twitter text-xl"></i></a>
277
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-github text-xl"></i></a>
278
+ <a href="#" class="text-gray-400 hover:text-neon transition"><i class="fab fa-discord text-xl"></i></a>
279
+ </div>
 
 
 
 
 
 
 
 
280
  </div>
281
  </div>
282
+ <div class="pt-8 border-t border-gray-800 text-center text-gray-500">
283
+ © 2023 QuantumBuilder Technologies. Tous droits réservés.
 
 
 
 
 
 
284
  </div>
285
  </div>
286
  </footer>
 
288
 
289
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
290
  <script>
 
291
  document.addEventListener('DOMContentLoaded', function() {
292
+ // Initialize quantum particles
293
+ particlesJS('quantum-particles', {
294
  "particles": {
295
  "number": {
296
+ "value": 70,
297
  "density": {
298
  "enable": true,
299
+ "value_area": 900
300
  }
301
  },
302
  "color": {
303
+ "value": "#7d4bff"
304
  },
305
  "shape": {
306
  "type": "circle",
307
  "stroke": {
308
  "width": 0,
309
  "color": "#000000"
 
 
 
310
  }
311
  },
312
  "opacity": {
313
+ "value": 0.6,
314
+ "random": true,
315
  "anim": {
316
+ "enable": true,
317
  "speed": 1,
318
  "opacity_min": 0.1,
319
  "sync": false
320
  }
321
  },
322
  "size": {
323
+ "value": 4,
324
  "random": true,
325
  "anim": {
326
+ "enable": true,
327
+ "speed": 4,
328
+ "size_min": 0.3,
329
  "sync": false
330
  }
331
  },
332
  "line_linked": {
333
  "enable": true,
334
+ "distance": 180,
335
+ "color": "#00f9ff",
336
  "opacity": 0.4,
337
+ "width": 1.5
338
  },
339
  "move": {
340
  "enable": true,
341
+ "speed": 1.5,
342
  "direction": "none",
343
+ "random": true,
344
  "straight": false,
345
  "out_mode": "out",
346
  "bounce": false,
347
  "attract": {
348
+ "enable": true,
349
+ "rotateX": 800,
350
+ "rotateY": 1600
351
  }
352
  }
353
  },
 
356
  "events": {
357
  "onhover": {
358
  "enable": true,
359
+ "mode": "repulse"
360
  },
361
  "onclick": {
362
  "enable": true,
 
365
  "resize": true
366
  },
367
  "modes": {
 
 
 
 
 
 
 
 
 
 
 
 
 
368
  "repulse": {
369
+ "distance": 100,
370
  "duration": 0.4
371
  },
372
  "push": {
373
+ "particles_nb": 6
 
 
 
374
  }
375
  }
376
  },
377
  "retina_detect": true
378
  });
379
 
380
+ // DOM elements
381
+ const descriptionInput = document.getElementById('quantum-description');
382
+ const generateBtn = document.getElementById('quantum-generate-btn');
383
+ const settingsBtn = document.getElementById('quantum-settings-btn');
384
+ const settingsPanel = document.getElementById('quantum-settings');
385
+ const resultsPanel = document.getElementById('quantum-results');
386
+ const loadingPanel = document.getElementById('quantum-loading');
387
+ const previewIframe = document.getElementById('quantum-preview');
388
+ const htmlCode = document.getElementById('quantum-html-code');
389
+ const progressBar = document.getElementById('quantum-progress');
390
+ const statusText = document.getElementById('quantum-status');
391
+ const typingIndicator = document.getElementById('typing-indicator');
392
+ const typingText = document.getElementById('typing-text');
393
+
394
+ // Typing placeholder effect
395
+ const placeholderTexts = [
396
+ "Exemple : Un site e-commerce pour vêtements futuristes avec panier, paiement en crypto et réalité augmentée...",
397
+ "Exemple : Portfolio d'artiste digital avec galerie 3D, biographie interactive et boutique en ligne...",
398
+ "Exemple : Site vitrine pour restaurant gastronomique avec réservation en ligne, menu dynamique et galerie photos..."
399
+ ];
400
+
401
+ let currentPlaceholder = '';
402
+ let currentPlaceholderIndex = 0;
403
+ let charIndex = 0;
404
+ let isDeleting = false;
405
+ let placeholderIndex = 0;
406
+
407
+ function typePlaceholder() {
408
+ const fullText = placeholderTexts[placeholderIndex];
409
+
410
+ if (isDeleting) {
411
+ currentPlaceholder = fullText.substring(0, charIndex - 1);
412
+ charIndex--;
413
+ } else {
414
+ currentPlaceholder = fullText.substring(0, charIndex + 1);
415
+ charIndex++;
416
+ }
417
+
418
+ descriptionInput.setAttribute('placeholder', currentPlaceholder);
419
+
420
+ if (!isDeleting && charIndex === fullText.length) {
421
+ isDeleting = true;
422
+ setTimeout(typePlaceholder, 2000);
423
+ } else if (isDeleting && charIndex === 0) {
424
+ isDeleting = false;
425
+ placeholderIndex = (placeholderIndex + 1) % placeholderTexts.length;
426
+ setTimeout(typePlaceholder, 500);
427
+ } else {
428
+ const typingSpeed = isDeleting ? 50 : Math.random() * 50 + 30;
429
+ setTimeout(typePlaceholder, typingSpeed);
430
+ }
431
+
432
+ // Show/hide typing indicator
433
+ if (charIndex > 0 && !isDeleting) {
434
+ typingIndicator.classList.remove('hidden');
435
+ typingText.textContent = 'Quantum IA écrit...';
436
+ } else {
437
+ typingIndicator.classList.add('hidden');
438
+ }
439
+ }
440
+
441
+ // Start typing effect
442
+ setTimeout(typePlaceholder, 1000);
443
 
444
+ // Toggle advanced settings
445
+ settingsBtn.addEventListener('click', function() {
446
+ settingsPanel.classList.toggle('hidden');
447
+ this.querySelector('i').classList.toggle('fa-rotate-90');
448
+ });
449
+
450
+ // Generate website
451
  generateBtn.addEventListener('click', function() {
452
+ const description = descriptionInput.value.trim();
453
+
454
+ if (description === '') {
455
+ showAlert('Veuillez décrire votre site web', 'error');
456
  return;
457
  }
458
 
459
+ // Hide results and show loading
460
+ resultsPanel.classList.add('hidden');
461
+ loadingPanel.classList.remove('hidden');
462
 
463
+ // Simulate quantum generation process
464
+ simulateGeneration(description);
465
+ });
466
+
467
+ // Simulate the generation process with progress updates
468
+ function simulateGeneration(description) {
469
+ let progress = 0;
470
+ const steps = [
471
+ "Analyse de la description...",
472
+ "Création de l'architecture quantique...",
473
+ "Génération du design atomique...",
474
+ "Codage des composants...",
475
+ "Optimisation quantique...",
476
+ "Finalisation du projet..."
477
+ ];
478
+
479
+ const interval = setInterval(() => {
480
+ progress += Math.random() * 10;
481
+ if (progress > 100) progress = 100;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
482
 
483
+ progressBar.style.width = `${progress}%`;
 
 
484
 
485
+ // Update status text based on progress
486
+ if (progress < 20) {
487
+ statusText.textContent = steps[0];
488
+ } else if (progress < 35) {
489
+ statusText.textContent = steps[1];
490
+ } else if (progress < 50) {
491
+ statusText.textContent = steps[2];
492
+ } else if (progress < 70) {
493
+ statusText.textContent = steps[3];
494
+ } else if (progress < 90) {
495
+ statusText.textContent = steps[4];
496
+ } else {
497
+ statusText.textContent = steps[5];
498
+ }
499
 
500
+ if (progress >= 100) {
501
+ clearInterval(interval);
502
+ setTimeout(() => {
503
+ completeGeneration(description);
504
+ }, 800);
505
+ }
506
+ }, 300);
507
+ }
 
508
 
509
+ // Complete generation and show results
510
+ function completeGeneration(description) {
511
+ loadingPanel.classList.add('hidden');
512
+ resultsPanel.classList.remove('hidden');
513
+
514
+ // Generate a unique ID for this site
515
+ document.getElementById('quantum-site-id').textContent =
516
+ Math.random().toString(36).substring(2, 8);
517
+
518
+ // Create a sample website based on description
519
+ const isEcommerce = description.toLowerCase().includes('e-commerce') ||
520
+ description.toLowerCase().includes('boutique') ||
521
+ description.toLowerCase().includes('panier');
522
+
523
+ const isPortfolio = description.toLowerCase().includes('portfolio') ||
524
+ description.toLowerCase().includes('artiste') ||
525
+ description.toLowerCase().includes('créatif');
526
+
527
+ const isBusiness = description.toLowerCase().includes('entreprise') ||
528
+ description.toLowerCase().includes('professionnel') ||
529
+ description.toLowerCase().includes('corporate');
530
+
531
+ let generatedHTML = '';
532
+
533
+ if (isEcommerce) {
534
+ generatedHTML = generateEcommerceSite(description);
535
+ } else if (isPortfolio) {
536
+ generatedHTML = generatePortfolioSite(description);
537
+ } else if (isBusiness) {
538
+ generatedHTML = generateBusinessSite(description);
539
+ } else {
540
+ generatedHTML = generateGenericSite(description);
541
  }
542
+
543
+ // Set the preview iframe
544
+ previewIframe.srcdoc = generatedHTML;
545
+
546
+ // Display the generated code
547
+ htmlCode.textContent = generatedHTML;
548
+
549
+ // Show success alert
550
+ showAlert('Site web généré avec succès!', 'success');
551
  }
552
 
553
+ // Generate different types of sites based on description
554
+ function generateEcommerceSite(desc) {
555
+ const hasDarkTheme = desc.toLowerCase().includes('sombre') ||
556
+ desc.toLowerCase().includes('noir') ||
557
+ desc.toLowerCase().includes('dark');
558
+
559
+ const hasCrypto = desc.toLowerCase().includes('crypto') ||
560
+ desc.toLowerCase().includes('bitcoin') ||
561
+ desc.toLowerCase().includes('blockchain');
562
+
563
+ const bgColor = hasDarkTheme ? 'bg-gray-900' : 'bg-gray-50';
564
+ const textColor = hasDarkTheme ? 'text-gray-100' : 'text-gray-800';
565
+ const cardColor = hasDarkTheme ? 'bg-gray-800' : 'bg-white';
566
+ const primaryColor = hasDarkTheme ? 'bg-purple-600' : 'bg-blue-600';
567
+
568
+ return `
569
+ <!DOCTYPE html>
570
+ <html lang="fr">
571
+ <head>
572
+ <meta charset="UTF-8">
573
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
574
+ <title>${extractSiteName(desc)} - E-commerce</title>
575
+ <script src="https://cdn.tailwindcss.com"></script>
576
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
577
+ <style>
578
+ .product-card:hover {
579
+ transform: translateY(-5px);
580
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
581
+ }
582
+ </style>
583
+ </head>
584
+ <body class="${bgColor} ${textColor} min-h-screen">
585
+ <!-- Navigation -->
586
+ <nav class="${hasDarkTheme ? 'bg-gray-800' : 'bg-white'} shadow-lg">
587
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
588
+ <div class="text-2xl font-bold ${hasDarkTheme ? 'text-purple-400' : 'text-blue-600'}">
589
+ ${extractSiteName(desc)}
590
+ </div>
591
+ <div class="hidden md:flex space-x-8">
592
+ <a href="#" class="hover:${hasDarkTheme ? 'text-purple-300' : 'text-blue-500'}">Accueil</a>
593
+ <a href="#" class="hover:${hasDarkTheme ? 'text-purple-300' : 'text-blue-500'}">Boutique</a>
594
+ <a href="#" class="hover:${hasDarkTheme ? 'text-purple-300' : 'text-blue-500'}">Nouveautés</a>
595
+ <a href="#" class="hover:${hasDarkTheme ? 'text-purple-300' : 'text-blue-500'}">Contact</a>
596
+ </div>
597
+ <div class="flex items-center space-x-4">
598
+ <a href="#" class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-700'} hover:${hasDarkTheme ? 'text-purple-300' : 'text-blue-500'}">
599
+ <i class="fas fa-search"></i>
600
+ </a>
601
+ <a href="#" class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-700'} hover:${hasDarkTheme ? 'text-purple-300' : 'text-blue-500'} relative">
602
+ <i class="fas fa-shopping-cart"></i>
603
+ <span class="absolute -top-2 -right-2 ${primaryColor} text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
604
+ </a>
605
+ </div>
606
+ </div>
607
+ </nav>
608
+
609
+ <!-- Hero Section -->
610
+ <section class="py-16 ${hasDarkTheme ? 'bg-gray-800' : 'bg-blue-50'}">
611
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
612
+ <div class="md:w-1/2 mb-8 md:mb-0">
613
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">${extractHeroTitle(desc)}</h1>
614
+ <p class="text-lg mb-6 ${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'}">${extractHeroDescription(desc)}</p>
615
+ <button class="${primaryColor} text-white px-8 py-3 rounded-lg font-bold hover:${hasDarkTheme ? 'bg-purple-700' : 'bg-blue-700'} transition">
616
+ Découvrir nos produits <i class="fas fa-arrow-right ml-2"></i>
617
+ </button>
618
+ </div>
619
+ <div class="md:w-1/2 flex justify-center">
620
+ <img src="https://via.placeholder.com/600x400/${hasDarkTheme ? '555/fff' : 'eee/555'}?text=Produit+Phare"
621
+ alt="Produit phare"
622
+ class="rounded-lg shadow-xl max-w-full h-auto">
623
+ </div>
624
+ </div>
625
+ </section>
626
+
627
+ <!-- Products Section -->
628
+ <section class="py-16">
629
+ <div class="container mx-auto px-4">
630
+ <h2 class="text-3xl font-bold mb-12 text-center">Nos Produits</h2>
631
+
632
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
633
+ <!-- Product 1 -->
634
+ <div class="${cardColor} rounded-lg shadow-md overflow-hidden product-card transition duration-300">
635
+ <div class="relative">
636
+ <img src="https://via.placeholder.com/600x400/${hasDarkTheme ? '555/fff' : 'eee/555'}?text=Produit+1"
637
+ alt="Produit 1"
638
+ class="w-full h-64 object-cover">
639
+ <div class="absolute top-2 right-2 ${primaryColor} text-white text-xs px-2 py-1 rounded">
640
+ Nouveau
641
+ </div>
642
+ </div>
643
+ <div class="p-6">
644
+ <h3 class="text-xl font-semibold mb-2">${extractProductName(desc, 1)}</h3>
645
+ <p class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'} mb-4">${extractProductDescription(desc, 1)}</p>
646
+ <div class="flex justify-between items-center">
647
+ <span class="text-lg font-bold">${hasCrypto ? '0.005 BTC' : '49.99€'}</span>
648
+ <button class="${primaryColor} text-white px-4 py-2 rounded hover:${hasDarkTheme ? 'bg-purple-700' : 'bg-blue-700'} transition">
649
+ <i class="fas fa-cart-plus"></i>
650
+ </button>
651
+ </div>
652
+ </div>
653
+ </div>
654
+
655
+ <!-- Product 2 -->
656
+ <div class="${cardColor} rounded-lg shadow-md overflow-hidden product-card transition duration-300">
657
+ <div class="relative">
658
+ <img src="https://via.placeholder.com/600x400/${hasDarkTheme ? '555/fff' : 'eee/555'}?text=Produit+2"
659
+ alt="Produit 2"
660
+ class="w-full h-64 object-cover">
661
+ </div>
662
+ <div class="p-6">
663
+ <h3 class="text-xl font-semibold mb-2">${extractProductName(desc, 2)}</h3>
664
+ <p class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'} mb-4">${extractProductDescription(desc, 2)}</p>
665
+ <div class="flex justify-between items-center">
666
+ <span class="text-lg font-bold">${hasCrypto ? '0.008 BTC' : '79.99€'}</span>
667
+ <button class="${primaryColor} text-white px-4 py-2 rounded hover:${hasDarkTheme ? 'bg-purple-700' : 'bg-blue-700'} transition">
668
+ <i class="fas fa-cart-plus"></i>
669
+ </button>
670
+ </div>
671
+ </div>
672
+ </div>
673
+
674
+ <!-- Product 3 -->
675
+ <div class="${cardColor} rounded-lg shadow-md overflow-hidden product-card transition duration-300">
676
+ <div class="relative">
677
+ <img src="https://via.placeholder.com/600x400/${hasDarkTheme ? '555/fff' : 'eee/555'}?text=Produit+3"
678
+ alt="Produit 3"
679
+ class="w-full h-64 object-cover">
680
+ <div class="absolute top-2 right-2 ${primaryColor} text-white text-xs px-2 py-1 rounded">
681
+ Promo
682
+ </div>
683
+ </div>
684
+ <div class="p-6">
685
+ <h3 class="text-xl font-semibold mb-2">${extractProductName(desc, 3)}</h3>
686
+ <p class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'} mb-4">${extractProductDescription(desc, 3)}</p>
687
+ <div class="flex justify-between items-center">
688
+ <div>
689
+ <span class="text-lg font-bold">${hasCrypto ? '0.003 BTC' : '29.99€'}</span>
690
+ <span class="text-sm ${hasDarkTheme ? 'text-gray-500' : 'text-gray-400'} line-through ml-2">${hasCrypto ? '0.005 BTC' : '49.99€'}</span>
691
+ </div>
692
+ <button class="${primaryColor} text-white px-4 py-2 rounded hover:${hasDarkTheme ? 'bg-purple-700' : 'bg-blue-700'} transition">
693
+ <i class="fas fa-cart-plus"></i>
694
+ </button>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="text-center mt-12">
701
+ <button class="border ${hasDarkTheme ? 'border-purple-400 text-purple-400 hover:bg-purple-800' : 'border-blue-500 text-blue-500 hover:bg-blue-50'} px-6 py-3 rounded-lg font-medium transition">
702
+ Voir tous les produits <i class="fas fa-arrow-right ml-2"></i>
703
+ </button>
704
+ </div>
705
+ </div>
706
+ </section>
707
+
708
+ <!-- Features Section -->
709
+ <section class="py-16 ${hasDarkTheme ? 'bg-gray-800' : 'bg-gray-100'}">
710
+ <div class="container mx-auto px-4">
711
+ <h2 class="text-3xl font-bold mb-12 text-center">Pourquoi nous choisir ?</h2>
712
+
713
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
714
+ <!-- Feature 1 -->
715
+ <div class="${cardColor} p-6 rounded-lg shadow">
716
+ <div class="w-12 h-12 ${primaryColor} text-white rounded-full flex items-center justify-center mb-4">
717
+ <i class="fas fa-truck text-xl"></i>
718
+ </div>
719
+ <h3 class="text-xl font-semibold mb-2">Livraison rapide</h3>
720
+ <p class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'}">${extractFeature(desc, 'livraison') || 'Livraison express en 24-48h partout en France métropolitaine.'}</p>
721
+ </div>
722
+
723
+ <!-- Feature 2 -->
724
+ <div class="${cardColor} p-6 rounded-lg shadow">
725
+ <div class="w-12 h-12 ${primaryColor} text-white rounded-full flex items-center justify-center mb-4">
726
+ <i class="fas ${hasCrypto ? 'fa-bitcoin' : 'fa-lock'} text-xl"></i>
727
+ </div>
728
+ <h3 class="text-xl font-semibold mb-2">${hasCrypto ? 'Paiement en crypto' : 'Paiement sécurisé'}</h3>
729
+ <p class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'}">${extractFeature(desc, 'paiement') || (hasCrypto ? 'Acceptons Bitcoin, Ethereum et autres cryptomonnaies.' : 'Paiement 100% sécurisé avec cryptage SSL.')}</p>
730
+ </div>
731
+
732
+ <!-- Feature 3 -->
733
+ <div class="${cardColor} p-6 rounded-lg shadow">
734
+ <div class="w-12 h-12 ${primaryColor} text-white rounded-full flex items-center justify-center mb-4">
735
+ <i class="fas fa-headset text-xl"></i>
736
+ </div>
737
+ <h3 class="text-xl font-semibold mb-2">Support 24/7</h3>
738
+ <p class="${hasDarkTheme ? 'text-gray-300' : 'text-gray-600'}">${extractFeature(desc, 'support') || 'Notre équipe est disponible pour répondre à vos questions à tout moment.'}</p>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </section>
743
+
744
+ <!-- Footer -->
745
+ <footer class="${hasDarkTheme ? 'bg-gray-900' : 'bg-gray-800'} text-white py-12">
746
+ <div class="container mx-auto px-4">
747
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
748
+ <!-- Column 1 -->
749
+ <div>
750
+ <h3 class="text-xl font-bold mb-4 ${hasDarkTheme ? 'text-purple-400' : 'text-blue-400'}">${extractSiteName(desc)}</h3>
751
+ <p class="text-gray-400">${extractFooterDescription(desc) || 'Boutique en ligne de produits premium et innovants.'}</p>
752
+ </div>
753
+
754
+ <!-- Column 2 -->
755
+ <div>
756
+ <h4 class="text-lg font-bold mb-4">Liens rapides</h4>
757
+ <ul class="space-y-2">
758
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
759
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Boutique</a></li>
760
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nouveautés</a></li>
761
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
762
+ </ul>
763
+ </div>
764
+
765
+ <!-- Column 3 -->
766
+ <div>
767
+ <h4 class="text-lg font-bold mb-4">Informations</h4>
768
+ <ul class="space-y-2">
769
+ <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
770
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Livraison</a></li>
771
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de retour</a></li>
772
+ <li><a href="#" class="text-gray-400 hover:text-white transition">CGV</a></li>
773
+ </ul>
774
+ </div>
775
+
776
+ <!-- Column 4 -->
777
+ <div>
778
+ <h4 class="text-lg font-bold mb-4">Contact</h4>
779
+ <ul class="space-y-2">
780
+ <li class="flex items-center text-gray-400">
781
+ <i class="fas fa-map-marker-alt mr-2"></i> Paris, France
782
+ </li>
783
+ <li class="flex items-center text-gray-400">
784
+ <i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89
785
+ </li>
786
+ <li class="flex items-center text-gray-400">
787
+ <i class="fas fa-envelope mr-2"></i> contact@${extractSiteName(desc).toLowerCase().replace(/\s+/g, '-')}.com
788
+ </li>
789
+ </ul>
790
+ </div>
791
+ </div>
792
+
793
+ <div class="pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
794
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 ${extractSiteName(desc)}. Tous droits réservés.</p>
795
+ <div class="flex space-x-6">
796
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
797
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
798
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
799
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest"></i></a>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </footer>
804
  <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>
805
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
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
 
 
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
2
+ je veux qu'il genere uniquement par description et pas de site vitrine ni d'exemple