Hugging Face's logo

Spaces:
docto41
/
generateur-code-web
Running

App Files Community
docto41 commited on
Commit
e2a7df2
·
verified ·
1 Parent(s): 0ecbd45

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +772 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Generateur Code Web
3
- emoji: 🐨
4
- colorFrom: indigo
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: generateur-code-web
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: red
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,772 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Générateur IA Pro - Création Automatique de Sites Web</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <style>
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
15
+ color: #fff;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
19
+ }
20
+ .card-glass {
21
+ background: rgba(255, 255, 255, 0.08);
22
+ backdrop-filter: blur(10px);
23
+ border: 1px solid rgba(255, 255, 255, 0.1);
24
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
25
+ }
26
+ .progress-bar {
27
+ height: 8px;
28
+ border-radius: 4px;
29
+ background: rgba(255, 255, 255, 0.2);
30
+ }
31
+ .progress-fill {
32
+ height: 100%;
33
+ border-radius: 4px;
34
+ background: linear-gradient(90deg, #4f46e5 0%, #9333ea 100%);
35
+ transition: width 0.5s ease;
36
+ }
37
+ .ai-pulse {
38
+ animation: pulse 2s infinite;
39
+ }
40
+ @keyframes pulse {
41
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
42
+ 70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); }
43
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
44
+ }
45
+ .floating {
46
+ animation: floating 6s ease-in-out infinite;
47
+ }
48
+ @keyframes floating {
49
+ 0% { transform: translateY(0px); }
50
+ 50% { transform: translateY(-20px); }
51
+ 100% { transform: translateY(0px); }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="min-h-screen">
56
+ <div class="container mx-auto px-4 py-12">
57
+ <!-- Header -->
58
+ <header class="text-center mb-16">
59
+ <h1 class="text-5xl font-bold mb-4 animate__animated animate__fadeInDown">
60
+ <span class="gradient-text bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
61
+ Générateur IA Pro
62
+ </span>
63
+ </h1>
64
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto animate__animated animate__fadeIn animate__delay-1s">
65
+ Créez des sites web complexes avec plus de 2000 lignes de code automatiquement, incluant domaine, SSL, serveur et WordPress - le tout en quelques clics.
66
+ </p>
67
+ </header>
68
+
69
+ <!-- Main Generator -->
70
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
71
+ <!-- Input Section -->
72
+ <div class="lg:col-span-2 card-glass rounded-2xl p-8 animate__animated animate__fadeInLeft">
73
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
74
+ <span class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center mr-3">1</span>
75
+ Décrivez votre site web
76
+ </h2>
77
+
78
+ <div class="mb-6">
79
+ <label class="block text-gray-300 mb-2">Type de site</label>
80
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
81
+ <button class="type-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-type="ecommerce">
82
+ E-commerce
83
+ </button>
84
+ <button class="type-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-type="portfolio">
85
+ Portfolio
86
+ </button>
87
+ <button class="type-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-type="corporate">
88
+ Corporate
89
+ </button>
90
+ <button class="type-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-type="blog">
91
+ Blog
92
+ </button>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="mb-6">
97
+ <label class="block text-gray-300 mb-2">Description détaillée</label>
98
+ <textarea id="site-description" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 rounded-lg p-4 text-gray-300 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition" rows="6" placeholder="Décrivez en détail votre site web: objectifs, fonctionnalités, style visuel, public cible, etc..."></textarea>
99
+ </div>
100
+
101
+ <div class="mb-6">
102
+ <label class="block text-gray-300 mb-2">Style visuel</label>
103
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
104
+ <button class="style-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-style="modern">
105
+ Moderne
106
+ </button>
107
+ <button class="style-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-style="minimal">
108
+ Minimaliste
109
+ </button>
110
+ <button class="style-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-style="vintage">
111
+ Vintage
112
+ </button>
113
+ <button class="style-btn py-3 px-4 rounded-lg border border-gray-700 hover:border-indigo-500 transition" data-style="futuristic">
114
+ Futuriste
115
+ </button>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
120
+ <div>
121
+ <label class="block text-gray-300 mb-2">Nom de domaine</label>
122
+ <div class="flex">
123
+ <input type="text" id="domain-name" class="flex-grow bg-gray-900 bg-opacity-50 border border-gray-700 rounded-l-lg p-3 text-gray-300 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition" placeholder="votresite">
124
+ <select class="bg-gray-800 border border-gray-700 rounded-r-lg px-3 text-gray-300">
125
+ <option>.com</option>
126
+ <option>.fr</option>
127
+ <option>.net</option>
128
+ <option>.io</option>
129
+ </select>
130
+ </div>
131
+ </div>
132
+ <div>
133
+ <label class="block text-gray-300 mb-2">Hébergement</label>
134
+ <select id="hosting" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 rounded-lg p-3 text-gray-300 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition">
135
+ <option value="auto">Configuration automatique (recommandé)</option>
136
+ <option value="shared">Hébergement mutualisé</option>
137
+ <option value="vps">VPS</option>
138
+ <option value="dedicated">Serveur dédié</option>
139
+ </select>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="flex flex-wrap gap-3">
144
+ <div class="flex items-center">
145
+ <input type="checkbox" id="wordpress" class="w-5 h-5 rounded border-gray-700 bg-gray-900 text-indigo-600 focus:ring-indigo-500" checked>
146
+ <label for="wordpress" class="ml-2 text-gray-300">Installation WordPress</label>
147
+ </div>
148
+ <div class="flex items-center">
149
+ <input type="checkbox" id="ssl" class="w-5 h-5 rounded border-gray-700 bg-gray-900 text-indigo-600 focus:ring-indigo-500" checked>
150
+ <label for="ssl" class="ml-2 text-gray-300">Certificat SSL</label>
151
+ </div>
152
+ <div class="flex items-center">
153
+ <input type="checkbox" id="seo" class="w-5 h-5 rounded border-gray-700 bg-gray-900 text-indigo-600 focus:ring-indigo-500" checked>
154
+ <label for="seo" class="ml-2 text-gray-300">Optimisation SEO</label>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Preview Section -->
160
+ <div class="card-glass rounded-2xl p-8 animate__animated animate__fadeInRight">
161
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
162
+ <span class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center mr-3">2</span>
163
+ Aperçu IA
164
+ </h2>
165
+
166
+ <div class="relative mb-6">
167
+ <div class="w-full h-64 bg-gray-900 rounded-lg overflow-hidden relative">
168
+ <div id="site-preview" class="absolute inset-0 flex items-center justify-center">
169
+ <div class="text-center p-6">
170
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 ai-pulse">
171
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
172
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
173
+ </svg>
174
+ </div>
175
+ <h3 class="text-xl font-medium text-white mb-2">Aperçu du site</h3>
176
+ <p class="text-gray-400">Décrivez votre site pour voir un aperçu généré par IA</p>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-indigo-600 text-white px-4 py-1 rounded-full text-sm font-medium">
181
+ Aperçu en temps réel
182
+ </div>
183
+ </div>
184
+
185
+ <div class="mb-6">
186
+ <h3 class="text-lg font-medium mb-3">Détails techniques estimés</h3>
187
+ <div class="space-y-3">
188
+ <div class="flex justify-between text-sm">
189
+ <span class="text-gray-400">Lignes de code</span>
190
+ <span class="font-medium" id="code-lines">0</span>
191
+ </div>
192
+ <div class="flex justify-between text-sm">
193
+ <span class="text-gray-400">Pages</span>
194
+ <span class="font-medium" id="pages-count">0</span>
195
+ </div>
196
+ <div class="flex justify-between text-sm">
197
+ <span class="text-gray-400">Fonctionnalités</span>
198
+ <span class="font-medium" id="features-count">0</span>
199
+ </div>
200
+ <div class="flex justify-between text-sm">
201
+ <span class="text-gray-400">Complexité</span>
202
+ <span class="font-medium" id="complexity">Faible</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <button id="generate-btn" class="w-full gradient-bg text-white font-medium py-3 px-6 rounded-lg hover:opacity-90 transition flex items-center justify-center">
208
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
209
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
210
+ </svg>
211
+ Générer le site (IA Pro)
212
+ </button>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Generation Process (Hidden by default) -->
217
+ <div id="generation-process" class="hidden card-glass rounded-2xl p-8 mb-16 animate__animated animate__fadeInUp">
218
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
219
+ <span class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center mr-3">3</span>
220
+ Création en cours par IA
221
+ </h2>
222
+
223
+ <div class="mb-8">
224
+ <div class="flex justify-between mb-2">
225
+ <span class="text-gray-300">Progression</span>
226
+ <span class="text-gray-300" id="progress-percent">0%</span>
227
+ </div>
228
+ <div class="progress-bar">
229
+ <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
234
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-gray-800">
235
+ <div class="flex items-center mb-3">
236
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-50 flex items-center justify-center mr-3">
237
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
238
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
239
+ </svg>
240
+ </div>
241
+ <h3 class="font-medium">Domaine</h3>
242
+ </div>
243
+ <p class="text-gray-400 text-sm" id="domain-status">En attente...</p>
244
+ </div>
245
+
246
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-gray-800">
247
+ <div class="flex items-center mb-3">
248
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-50 flex items-center justify-center mr-3">
249
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
250
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
251
+ </svg>
252
+ </div>
253
+ <h3 class="font-medium">SSL</h3>
254
+ </div>
255
+ <p class="text-gray-400 text-sm" id="ssl-status">En attente...</p>
256
+ </div>
257
+
258
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-gray-800">
259
+ <div class="flex items-center mb-3">
260
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-50 flex items-center justify-center mr-3">
261
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
262
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
263
+ </svg>
264
+ </div>
265
+ <h3 class="font-medium">Serveur</h3>
266
+ </div>
267
+ <p class="text-gray-400 text-sm" id="server-status">En attente...</p>
268
+ </div>
269
+
270
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-gray-800">
271
+ <div class="flex items-center mb-3">
272
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-50 flex items-center justify-center mr-3">
273
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
274
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2H7z" />
275
+ </svg>
276
+ </div>
277
+ <h3 class="font-medium">WordPress</h3>
278
+ </div>
279
+ <p class="text-gray-400 text-sm" id="wp-status">En attente...</p>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="mb-8">
284
+ <h3 class="text-lg font-medium mb-4">Génération du code</h3>
285
+ <div class="bg-gray-900 rounded-lg p-4 overflow-auto max-h-60">
286
+ <pre id="code-output" class="text-gray-300 text-sm font-mono">// Le code de votre site sera généré ici...</pre>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="flex justify-between items-center">
291
+ <div class="flex items-center">
292
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-50 flex items-center justify-center mr-3">
293
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
294
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
295
+ </svg>
296
+ </div>
297
+ <div>
298
+ <h3 class="font-medium">IA Pro en action</h3>
299
+ <p class="text-gray-400 text-sm" id="ai-status">Analyse initiale...</p>
300
+ </div>
301
+ </div>
302
+ <button id="cancel-btn" class="px-4 py-2 border border-gray-700 rounded-lg text-gray-300 hover:bg-gray-800 transition">
303
+ Annuler
304
+ </button>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Results Section (Hidden by default) -->
309
+ <div id="results-section" class="hidden card-glass rounded-2xl p-8 animate__animated animate__fadeInUp">
310
+ <h2 class="text-2xl font-semibold mb-6 flex items-center">
311
+ <span class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center mr-3">4</span>
312
+ Votre site est prêt!
313
+ </h2>
314
+
315
+ <div class="flex flex-col lg:flex-row gap-8 mb-8">
316
+ <div class="lg:w-2/3">
317
+ <div class="bg-gray-900 rounded-xl overflow-hidden mb-6">
318
+ <div class="h-80 bg-gray-800 flex items-center justify-center">
319
+ <div class="text-center p-6">
320
+ <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
321
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
322
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
323
+ </svg>
324
+ </div>
325
+ <h3 class="text-2xl font-medium text-white mb-2">Félicitations!</h3>
326
+ <p class="text-gray-400">Votre site web a été généré avec succès avec plus de 2000 lignes de code.</p>
327
+ </div>
328
+ </div>
329
+ <div class="p-6">
330
+ <div class="flex flex-wrap gap-4 mb-6">
331
+ <a href="#" class="px-4 py-2 gradient-bg text-white rounded-lg flex items-center">
332
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
333
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
334
+ </svg>
335
+ Visiter le site
336
+ </a>
337
+ <a href="#" class="px-4 py-2 bg-gray-800 text-white rounded-lg flex items-center">
338
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
339
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
340
+ </svg>
341
+ Télécharger le code
342
+ </a>
343
+ <a href="#" class="px-4 py-2 bg-gray-800 text-white rounded-lg flex items-center">
344
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
345
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
346
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
347
+ </svg>
348
+ Admin WordPress
349
+ </a>
350
+ </div>
351
+
352
+ <div class="border-t border-gray-800 pt-4">
353
+ <h4 class="font-medium mb-3">Informations d'accès</h4>
354
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
355
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
356
+ <p class="text-gray-400 text-sm mb-1">URL du site</p>
357
+ <p class="font-mono text-sm">https://<span id="result-domain">monsite</span>.com</p>
358
+ </div>
359
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
360
+ <p class="text-gray-400 text-sm mb-1">Identifiant admin</p>
361
+ <p class="font-mono text-sm">admin</p>
362
+ </div>
363
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
364
+ <p class="text-gray-400 text-sm mb-1">Mot de passe</p>
365
+ <p class="font-mono text-sm">••••••••••</p>
366
+ </div>
367
+ <div class="bg-gray-800 bg-opacity-50 rounded-lg p-3">
368
+ <p class="text-gray-400 text-sm mb-1">Serveur IP</p>
369
+ <p class="font-mono text-sm">192.168.1.1</p>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="lg:w-1/3">
378
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800 mb-6">
379
+ <h3 class="font-medium mb-4">Statistiques de génération</h3>
380
+ <div class="space-y-4">
381
+ <div>
382
+ <div class="flex justify-between text-sm mb-1">
383
+ <span class="text-gray-400">Lignes de code</span>
384
+ <span class="font-medium" id="final-code-lines">2,450</span>
385
+ </div>
386
+ <div class="w-full bg-gray-800 rounded-full h-2">
387
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 100%"></div>
388
+ </div>
389
+ </div>
390
+ <div>
391
+ <div class="flex justify-between text-sm mb-1">
392
+ <span class="text-gray-400">Temps de génération</span>
393
+ <span class="font-medium">47s</span>
394
+ </div>
395
+ <div class="w-full bg-gray-800 rounded-full h-2">
396
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 80%"></div>
397
+ </div>
398
+ </div>
399
+ <div>
400
+ <div class="flex justify-between text-sm mb-1">
401
+ <span class="text-gray-400">Complexité</span>
402
+ <span class="font-medium">Élevée</span>
403
+ </div>
404
+ <div class="w-full bg-gray-800 rounded-full h-2">
405
+ <div class="bg-pink-600 h-2 rounded-full" style="width: 90%"></div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-gray-800">
412
+ <h3 class="font-medium mb-4">Ressources générées</h3>
413
+ <div class="space-y-3">
414
+ <div class="flex items-center justify-between py-2 border-b border-gray-800">
415
+ <div class="flex items-center">
416
+ <div class="w-8 h-8 rounded bg-indigo-900 bg-opacity-30 flex items-center justify-center mr-3">
417
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
418
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
419
+ </svg>
420
+ </div>
421
+ <span class="text-sm">Fichiers HTML</span>
422
+ </div>
423
+ <span class="text-sm font-mono">24</span>
424
+ </div>
425
+ <div class="flex items-center justify-between py-2 border-b border-gray-800">
426
+ <div class="flex items-center">
427
+ <div class="w-8 h-8 rounded bg-indigo-900 bg-opacity-30 flex items-center justify-center mr-3">
428
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
429
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
430
+ </svg>
431
+ </div>
432
+ <span class="text-sm">Fichiers CSS</span>
433
+ </div>
434
+ <span class="text-sm font-mono">8</span>
435
+ </div>
436
+ <div class="flex items-center justify-between py-2 border-b border-gray-800">
437
+ <div class="flex items-center">
438
+ <div class="w-8 h-8 rounded bg-indigo-900 bg-opacity-30 flex items-center justify-center mr-3">
439
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
440
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
441
+ </svg>
442
+ </div>
443
+ <span class="text-sm">Fichiers JS</span>
444
+ </div>
445
+ <span class="text-sm font-mono">12</span>
446
+ </div>
447
+ <div class="flex items-center justify-between py-2">
448
+ <div class="flex items-center">
449
+ <div class="w-8 h-8 rounded bg-indigo-900 bg-opacity-30 flex items-center justify-center mr-3">
450
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
451
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
452
+ </svg>
453
+ </div>
454
+ <span class="text-sm">Images/assets</span>
455
+ </div>
456
+ <span class="text-sm font-mono">46</span>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="mt-8">
464
+ <h3 class="text-lg font-medium mb-4">Analyse IA du site généré</h3>
465
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
466
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-indigo-900 border-opacity-50">
467
+ <div class="flex items-center mb-3">
468
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-20 flex items-center justify-center mr-3">
469
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
470
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
471
+ </svg>
472
+ </div>
473
+ <h4 class="font-medium">Performance</h4>
474
+ </div>
475
+ <p class="text-gray-400 text-sm">Le site a été optimisé pour une vitesse de chargement de 92/100 sur PageSpeed Insights, avec lazy loading des images et compression automatique.</p>
476
+ </div>
477
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-indigo-900 border-opacity-50">
478
+ <div class="flex items-center mb-3">
479
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-20 flex items-center justify-center mr-3">
480
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
481
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
482
+ </svg>
483
+ </div>
484
+ <h4 class="font-medium">SEO</h4>
485
+ </div>
486
+ <p class="text-gray-400 text-sm">Optimisation SEO complète avec meta tags, sitemap XML, schema markup et structure sémantique. Prêt pour le référencement.</p>
487
+ </div>
488
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-5 border border-indigo-900 border-opacity-50">
489
+ <div class="flex items-center mb-3">
490
+ <div class="w-10 h-10 rounded-full bg-indigo-900 bg-opacity-20 flex items-center justify-center mr-3">
491
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
492
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
493
+ </svg>
494
+ </div>
495
+ <h4 class="font-medium">Responsive</h4>
496
+ </div>
497
+ <p class="text-gray-400 text-sm">Design entièrement responsive testé sur 12 appareils différents. Adapté à tous les écrans du mobile au desktop 4K.</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <!-- AI Features Section -->
504
+ <div class="mt-24 mb-16">
505
+ <h2 class="text-3xl font-bold text-center mb-4">Technologie IA Avancée</h2>
506
+ <p class="text-xl text-gray-300 text-center max-w-4xl mx-auto mb-12">
507
+ Notre générateur utilise une intelligence artificielle de pointe avec plus de 1,298,700 assistants IA spécialisés
508
+ </p>
509
+
510
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
511
+ <div class="card-glass rounded-2xl p-8 text-center">
512
+ <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 floating">
513
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
514
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
515
+ </svg>
516
+ </div>
517
+ <h3 class="text-xl font-semibold mb-3">Génération de code</h3>
518
+ <p class="text-gray-400">
519
+ Plus de 500 assistants IA spécialisés dans la génération de code propre, optimisé et documenté.
520
+ </p>
521
+ </div>
522
+ <div class="card-glass rounded-2xl p-8 text-center">
523
+ <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 floating" style="animation-delay: 0.3s">
524
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
525
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
526
+ </svg>
527
+ </div>
528
+ <h3 class="text-xl font-semibold mb-3">Design UI/UX</h3>
529
+ <p class="text-gray-400">
530
+ 300,000 IA de design créent des interfaces uniques et parfaitement adaptées à votre public.
531
+ </p>
532
+ </div>
533
+ <div class="card-glass rounded-2xl p-8 text-center">
534
+ <div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 floating" style="animation-delay: 0.6s">
535
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
536
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
537
+ </svg>
538
+ </div>
539
+ <h3 class="text-xl font-semibold mb-3">Sécurité</h3>
540
+ <p class="text-gray-400">
541
+ Protection avancée avec 200,000 IA de sécurité pour des sites inviolables et des données protégées.
542
+ </p>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <script>
549
+ // Update preview based on inputs
550
+ const descriptionInput = document.getElementById('site-description');
551
+ const typeButtons = document.querySelectorAll('.type-btn');
552
+ const styleButtons = document.querySelectorAll('.style-btn');
553
+ const codeLinesElement = document.getElementById('code-lines');
554
+ const pagesCountElement = document.getElementById('pages-count');
555
+ const featuresCountElement = document.getElementById('features-count');
556
+ const complexityElement = document.getElementById('complexity');
557
+ const previewElement = document.getElementById('site-preview');
558
+
559
+ let selectedType = '';
560
+ let selectedStyle = '';
561
+
562
+ // Type buttons
563
+ typeButtons.forEach(button => {
564
+ button.addEventListener('click', () => {
565
+ typeButtons.forEach(btn => btn.classList.remove('gradient-bg', 'text-white'));
566
+ button.classList.add('gradient-bg', 'text-white');
567
+ selectedType = button.dataset.type;
568
+ updatePreview();
569
+ });
570
+ });
571
+
572
+ // Style buttons
573
+ styleButtons.forEach(button => {
574
+ button.addEventListener('click', () => {
575
+ styleButtons.forEach(btn => btn.classList.remove('gradient-bg', 'text-white'));
576
+ button.classList.add('gradient-bg', 'text-white');
577
+ selectedStyle = button.dataset.style;
578
+ updatePreview();
579
+ });
580
+ });
581
+
582
+ // Description input
583
+ descriptionInput.addEventListener('input', updatePreview);
584
+
585
+ function updatePreview() {
586
+ const description = descriptionInput.value;
587
+
588
+ // Update stats based on description length and selections
589
+ if (description.length > 0) {
590
+ const lines = Math.min(2000, Math.floor(description.length * 2.5));
591
+ const pages = Math.min(20, Math.floor(description.length / 50));
592
+ const features = Math.min(30, Math.floor(description.length / 30));
593
+
594
+ codeLinesElement.textContent = lines.toLocaleString();
595
+ pagesCountElement.textContent = pages;
596
+ featuresCountElement.textContent = features;
597
+
598
+ if (lines > 1500) {
599
+ complexityElement.textContent = 'Très élevée';
600
+ } else if (lines > 1000) {
601
+ complexityElement.textContent = 'Élevée';
602
+ } else if (lines > 500) {
603
+ complexityElement.textContent = 'Moyenne';
604
+ } else {
605
+ complexityElement.textContent = 'Faible';
606
+ }
607
+
608
+ // Update preview content
609
+ previewElement.innerHTML = `
610
+ <div class="absolute inset-0 flex items-center justify-center p-6">
611
+ <div class="text-center">
612
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
613
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
614
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
615
+ </svg>
616
+ </div>
617
+ <h3 class="text-xl font-medium text-white mb-2">Aperçu généré par IA</h3>
618
+ <p class="text-gray-400 mb-3">Type: ${selectedType || 'Non spécifié'} | Style: ${selectedStyle || 'Non spécifié'}</p>
619
+ <p class="text-gray-300 text-sm max-w-md mx-auto">${truncateDescription(description)}</p>
620
+ </div>
621
+ </div>
622
+ `;
623
+ } else {
624
+ // Reset to default
625
+ codeLinesElement.textContent = '0';
626
+ pagesCountElement.textContent = '0';
627
+ featuresCountElement.textContent = '0';
628
+ complexityElement.textContent = 'Faible';
629
+
630
+ previewElement.innerHTML = `
631
+ <div class="absolute inset-0 flex items-center justify-center">
632
+ <div class="text-center p-6">
633
+ <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 ai-pulse">
634
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
635
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
636
+ </svg>
637
+ </div>
638
+ <h3 class="text-xl font-medium text-white mb-2">Aperçu du site</h3>
639
+ <p class="text-gray-400">Décrivez votre site pour voir un aperçu généré par IA</p>
640
+ </div>
641
+ </div>
642
+ `;
643
+ }
644
+ }
645
+
646
+ function truncateDescription(text) {
647
+ return text.length > 150 ? text.substring(0, 150) + '...' : text;
648
+ }
649
+
650
+ // Generation process
651
+ const generateBtn = document.getElementById('generate-btn');
652
+ const generationProcess = document.getElementById('generation-process');
653
+ const resultsSection = document.getElementById('results-section');
654
+ const progressFill = document.getElementById('progress-fill');
655
+ const progressPercent = document.getElementById('progress-percent');
656
+ const domainStatus = document.getElementById('domain-status');
657
+ const sslStatus = document.getElementById('ssl-status');
658
+ const serverStatus = document.getElementById('server-status');
659
+ const wpStatus = document.getElementById('wp-status');
660
+ const aiStatus = document.getElementById('ai-status');
661
+ const codeOutput = document.getElementById('code-output');
662
+ const cancelBtn = document.getElementById('cancel-btn');
663
+ const finalCodeLines = document.getElementById('final-code-lines');
664
+ const resultDomain = document.getElementById('result-domain');
665
+
666
+ generateBtn.addEventListener('click', () => {
667
+ if (!descriptionInput.value) {
668
+ alert('Veuillez décrire votre site avant de générer');
669
+ return;
670
+ }
671
+
672
+ // Show generation process
673
+ generationProcess.classList.remove('hidden');
674
+ generationProcess.classList.add('animate__fadeInUp');
675
+
676
+ // Scroll to generation process
677
+ generationProcess.scrollIntoView({ behavior: 'smooth' });
678
+
679
+ // Start simulation
680
+ simulateGeneration();
681
+ });
682
+
683
+ cancelBtn.addEventListener('click', () => {
684
+ generationProcess.classList.add('hidden');
685
+ });
686
+
687
+ function simulateGeneration() {
688
+ let progress = 0;
689
+ const domainName = document.getElementById('domain-name').value || 'monsite';
690
+ resultDomain.textContent = domainName;
691
+
692
+ const interval = setInterval(() => {
693
+ progress += Math.random() * 5;
694
+ if (progress > 100) progress = 100;
695
+
696
+ progressFill.style.width = `${progress}%`;
697
+ progressPercent.textContent = `${Math.floor(progress)}%`;
698
+
699
+ // Update statuses based on progress
700
+ if (progress >= 10 && progress < 20) {
701
+ domainStatus.textContent = 'Enregistrement en cours...';
702
+ } else if (progress >= 20 && progress < 30) {
703
+ domainStatus.textContent = 'Domaine enregistré ✓';
704
+ domainStatus.classList.add('text-green-400');
705
+ } else if (progress >= 30 && progress < 40) {
706
+ serverStatus.textContent = 'Configuration du serveur...';
707
+ } else if (progress >= 40 && progress < 50) {
708
+ serverStatus.textContent = 'Serveur configuré ✓';
709
+ serverStatus.classList.add('text-green-400');
710
+ } else if (progress >= 50 && progress < 60) {
711
+ sslStatus.textContent = 'Installation SSL...';
712
+ } else if (progress >= 60 && progress < 70) {
713
+ sslStatus.textContent = 'SSL installé ✓';
714
+ sslStatus.classList.add('text-green-400');
715
+ } else if (progress >= 70 && progress < 80) {
716
+ wpStatus.textContent = 'Installation WordPress...';
717
+ } else if (progress >= 80 && progress < 90) {
718
+ wpStatus.textContent = 'WordPress installé ✓';
719
+ wpStatus.classList.add('text-green-400');
720
+ }
721
+
722
+ // Update AI status
723
+ if (progress < 10) {
724
+ aiStatus.textContent = 'Analyse initiale...';
725
+ } else if (progress < 30) {
726
+ aiStatus.textContent = 'Génération de la structure...';
727
+ } else if (progress < 50) {
728
+ aiStatus.textContent = 'Création des composants...';
729
+ } else if (progress < 70) {
730
+ aiStatus.textContent = 'Optimisation des performances...';
731
+ } else if (progress < 90) {
732
+ aiStatus.textContent = 'Finalisation...';
733
+ } else {
734
+ aiStatus.textContent = 'Terminé ✓';
735
+ }
736
+
737
+ // Update code output
738
+ if (progress < 20) {
739
+ codeOutput.textContent = '// Initialisation du projet\n// Chargement des modules IA\n// Analyse des requirements';
740
+ } else if (progress < 40) {
741
+ codeOutput.textContent = '// Création de la structure du projet\nconst app = new WebApplication({\n title: "Mon Site",\n pages: 12,\n responsive: true\n});\n\n// Configuration du routing\napp.configureRoutes(routes);';
742
+ } else if (progress < 60) {
743
+ codeOutput.textContent = '// Génération des composants UI\nfunction Header() {\n return (\n <header className="bg-white shadow">\n <div className="container mx-auto px-4 py-6">\n <h1 className="text-3xl font-bold text-gray-900">Mon Site</h1>\n </div>\n </header>\n );\n}\n\n// Plus de 800 lignes générées...';
744
+ } else if (progress < 80) {
745
+ codeOutput.textContent = '// Optimisation des performances\n// Compression des assets\n// Minification du code\n// Configuration du cache\n\n// Intégration des APIs\napp.connectToDatabase({\n host: "db.monsite.com",\n user: "admin",\n password: "••••••••",\n database: "monsite_db"\n});\n\n// Plus de 1500 lignes générées...';
746
+ } else {
747
+ codeOutput.textContent = '// Finalisation du projet\n// Tests automatisés\n// Validation SEO\n// Génération de la documentation\n\n// Export final\napp.export({\n format: "full",\n includeAssets: true,\n optimize: true\n});\n\n// Projet prêt! Total: 2,450 lignes de code';
748
+ }
749
+
750
+ // When complete
751
+ if (progress >= 100) {
752
+ clearInterval(interval);
753
+ finalCodeLines.textContent = '2,450';
754
+
755
+ // Show results after a delay
756
+ setTimeout(() => {
757
+ generationProcess.classList.add('hidden');
758
+ resultsSection.classList.remove('hidden');
759
+ resultsSection.classList.add('animate__fadeInUp');
760
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
761
+ }, 1000);
762
+ }
763
+ }, 300);
764
+
765
+ // Cancel button
766
+ cancelBtn.addEventListener('click', () => {
767
+ clearInterval(interval);
768
+ });
769
+ }
770
+ </script>
771
+ <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/generateur-code-web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
772
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux un génerateur tres sofitiqué d'nteligence artificiel de 1298700 assitant ia génerateur de code et scrypt de site web que par description et visalisation etape par etape en automatique pour creer des site imense avec plus de 2000ligne en automatique avec domaine,ssl, serveur , wordpress enregistrement toute complet en automatique , avec une tres belle interface tres animé