Hugging Face's logo

Spaces:
docto41
/
sitegenmatrix
Running

App Files Community
docto41 commited on
Commit
39a8ec5
·
verified ·
1 Parent(s): 7b2f9c2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1237 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sitegenmatrix
3
- emoji: 🔥
4
  colorFrom: purple
5
- colorTo: yellow
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: sitegenmatrix
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: purple
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,1237 @@
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>SiteGenMatrix - Générateur de Sites Web par IA</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: #f0f8ff;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--dark);
22
+ color: var(--light);
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .futuristic-text {
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
+ .glow {
38
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
39
+ }
40
+
41
+ .holographic {
42
+ background: linear-gradient(135deg, rgba(11, 13, 27, 0.8), rgba(33, 7, 77, 0.8));
43
+ backdrop-filter: blur(10px);
44
+ border: 1px solid rgba(0, 240, 255, 0.2);
45
+ }
46
+
47
+ .cyber-input {
48
+ background: rgba(10, 10, 26, 0.7);
49
+ border: 1px solid var(--primary);
50
+ color: var(--light);
51
+ transition: all 0.3s;
52
+ }
53
+
54
+ .cyber-input:focus {
55
+ outline: none;
56
+ box-shadow: 0 0 10px var(--primary);
57
+ border-color: var(--secondary);
58
+ }
59
+
60
+ .pulse {
61
+ animation: pulse 2s infinite;
62
+ }
63
+
64
+ @keyframes pulse {
65
+ 0% {
66
+ box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7);
67
+ }
68
+ 70% {
69
+ box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
70
+ }
71
+ 100% {
72
+ box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
73
+ }
74
+ }
75
+
76
+ .neon-btn {
77
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
78
+ color: var(--dark);
79
+ font-weight: bold;
80
+ transition: all 0.3s;
81
+ position: relative;
82
+ overflow: hidden;
83
+ }
84
+
85
+ .neon-btn:hover {
86
+ transform: translateY(-2px);
87
+ box-shadow: 0 5px 15px rgba(0, 240, 255, 0.4);
88
+ }
89
+
90
+ .neon-btn::before {
91
+ content: '';
92
+ position: absolute;
93
+ top: 0;
94
+ left: -100%;
95
+ width: 100%;
96
+ height: 100%;
97
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
98
+ transition: all 0.5s;
99
+ }
100
+
101
+ .neon-btn:hover::before {
102
+ left: 100%;
103
+ }
104
+
105
+ .grid-pattern {
106
+ background-image:
107
+ linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
108
+ linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
109
+ background-size: 20px 20px;
110
+ }
111
+
112
+ .website-preview {
113
+ transform: perspective(1000px) rotateX(10deg);
114
+ transition: all 0.5s;
115
+ }
116
+
117
+ .website-preview:hover {
118
+ transform: perspective(1000px) rotateX(0deg);
119
+ }
120
+
121
+ .scanline {
122
+ position: relative;
123
+ overflow: hidden;
124
+ }
125
+
126
+ .scanline::after {
127
+ content: '';
128
+ position: absolute;
129
+ top: 0;
130
+ left: 0;
131
+ right: 0;
132
+ height: 100%;
133
+ background: linear-gradient(
134
+ to bottom,
135
+ transparent 0%,
136
+ rgba(0, 240, 255, 0.05) 50%,
137
+ transparent 100%
138
+ );
139
+ animation: scan 8s linear infinite;
140
+ }
141
+
142
+ @keyframes scan {
143
+ 0% {
144
+ transform: translateY(-100%);
145
+ }
146
+ 100% {
147
+ transform: translateY(100%);
148
+ }
149
+ }
150
+ </style>
151
+ </head>
152
+ <body class="grid-pattern">
153
+ <div class="min-h-screen flex flex-col">
154
+ <!-- Header -->
155
+ <header class="holographic py-6 px-4 sm:px-6 lg:px-8 border-b border-cyan-500/20">
156
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
157
+ <div class="flex items-center space-x-2">
158
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 flex items-center justify-center glow">
159
+ <i class="fas fa-matrix text-white text-xl"></i>
160
+ </div>
161
+ <h1 class="futuristic-text text-2xl font-bold gradient-text">SiteGenMatrix</h1>
162
+ </div>
163
+ <nav class="hidden md:flex space-x-8">
164
+ <a href="#" class="text-cyan-300 hover:text-white transition">Fonctionnalités</a>
165
+ <a href="#" class="text-cyan-300 hover:text-white transition">Exemples</a>
166
+ <a href="#" class="text-cyan-300 hover:text-white transition">Tarifs</a>
167
+ <a href="#" class="text-cyan-300 hover:text-white transition">API</a>
168
+ </nav>
169
+ <button class="neon-btn px-6 py-2 rounded-full text-sm font-bold">
170
+ <i class="fas fa-user-astronaut mr-2"></i> Connexion
171
+ </button>
172
+ </div>
173
+ </header>
174
+
175
+ <!-- Main Content -->
176
+ <main class="flex-grow">
177
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
178
+ <div class="text-center mb-16">
179
+ <h2 class="futuristic-text text-4xl md:text-6xl font-bold mb-6 gradient-text">
180
+ <span class="text-white">Créez</span> des sites web réels <span class="text-white">instantanément</span>
181
+ </h2>
182
+ <p class="text-xl text-cyan-100 max-w-3xl mx-auto">
183
+ Décrivez simplement votre vision et notre IA puissante générera un site web complet et fonctionnel.
184
+ </p>
185
+ </div>
186
+
187
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
188
+ <!-- Generator Form -->
189
+ <div class="holographic p-8 rounded-xl border border-cyan-500/30 scanline">
190
+ <h3 class="futuristic-text text-2xl font-bold mb-6 gradient-text">Description de votre site</h3>
191
+
192
+ <div class="space-y-6">
193
+ <div>
194
+ <label class="block text-cyan-300 mb-2">Nom du site</label>
195
+ <input type="text" id="siteName" class="cyber-input w-full px-4 py-3 rounded-lg" placeholder="ex: Solutions Tech Quantique">
196
+ </div>
197
+
198
+ <div>
199
+ <label class="block text-cyan-300 mb-2">Type de site</label>
200
+ <select id="siteType" class="cyber-input w-full px-4 py-3 rounded-lg">
201
+ <option value="business">Entreprise/Corporate</option>
202
+ <option value="ecommerce">E-commerce</option>
203
+ <option value="portfolio">Portfolio</option>
204
+ <option value="blog">Blog/Actualités</option>
205
+ <option value="saas">SaaS/Application Web</option>
206
+ <option value="custom">Personnalisé</option>
207
+ </select>
208
+ </div>
209
+
210
+ <div>
211
+ <label class="block text-cyan-300 mb-2">Décrivez votre site web</label>
212
+ <textarea id="siteDescription" class="cyber-input w-full px-4 py-3 rounded-lg min-h-[150px]" placeholder="Décrivez l'objectif, les fonctionnalités et les préférences de design pour votre site..."></textarea>
213
+ </div>
214
+
215
+ <div class="grid grid-cols-2 gap-4">
216
+ <div>
217
+ <label class="block text-cyan-300 mb-2">Schéma de couleurs</label>
218
+ <select id="colorScheme" class="cyber-input w-full px-4 py-3 rounded-lg">
219
+ <option value="futuristic">Futuriste</option>
220
+ <option value="minimal">Minimaliste</option>
221
+ <option value="dark">Sombre</option>
222
+ <option value="light">Clair</option>
223
+ <option value="vibrant">Vibrant</option>
224
+ </select>
225
+ </div>
226
+ <div>
227
+ <label class="block text-cyan-300 mb-2">Style de mise en page</label>
228
+ <select id="layoutStyle" class="cyber-input w-full px-4 py-3 rounded-lg">
229
+ <option value="modern">Moderne</option>
230
+ <option value="grid">Grille</option>
231
+ <option value="asymmetrical">Asymétrique</option>
232
+ <option value="fullscreen">Plein écran</option>
233
+ </select>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="pt-4">
238
+ <button id="generateBtn" class="neon-btn w-full px-6 py-4 rounded-lg text-lg font-bold pulse">
239
+ <i class="fas fa-bolt mr-2"></i> Générer le Site
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Preview Area -->
246
+ <div class="relative">
247
+ <div class="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-xl blur opacity-75"></div>
248
+ <div id="previewContainer" class="holographic relative rounded-xl p-6 h-[500px] overflow-y-auto website-preview">
249
+ <div class="flex flex-col items-center justify-center h-full text-center">
250
+ <div class="w-20 h-20 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 flex items-center justify-center mb-6 glow">
251
+ <i class="fas fa-globe text-white text-3xl"></i>
252
+ </div>
253
+ <h3 class="futuristic-text text-2xl font-bold mb-2 gradient-text">Aperçu du Site</h3>
254
+ <p class="text-cyan-200 max-w-md">
255
+ Votre site généré apparaîtra ici. Décrivez votre vision et voyez-la prendre vie instantanément.
256
+ </p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Advanced Options -->
263
+ <div class="mt-16">
264
+ <div class="flex items-center justify-between mb-6">
265
+ <h3 class="futuristic-text text-2xl font-bold gradient-text">Options avancées</h3>
266
+ <button id="toggleAdvanced" class="text-cyan-300 hover:text-white transition flex items-center">
267
+ <i class="fas fa-cog mr-2"></i> Afficher les options
268
+ </button>
269
+ </div>
270
+
271
+ <div id="advancedOptions" class="holographic p-6 rounded-xl border border-cyan-500/30 hidden">
272
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
273
+ <div>
274
+ <label class="block text-cyan-300 mb-2">Pages requises</label>
275
+ <div class="space-y-2">
276
+ <label class="flex items-center">
277
+ <input type="checkbox" class="cyber-input mr-2" checked> Accueil
278
+ </label>
279
+ <label class="flex items-center">
280
+ <input type="checkbox" class="cyber-input mr-2"> À propos
281
+ </label>
282
+ <label class="flex items-center">
283
+ <input type="checkbox" class="cyber-input mr-2"> Services
284
+ </label>
285
+ <label class="flex items-center">
286
+ <input type="checkbox" class="cyber-input mr-2"> Contact
287
+ </label>
288
+ <label class="flex items-center">
289
+ <input type="checkbox" class="cyber-input mr-2"> Blog
290
+ </label>
291
+ </div>
292
+ </div>
293
+
294
+ <div>
295
+ <label class="block text-cyan-300 mb-2">Fonctionnalités spéciales</label>
296
+ <div class="space-y-2">
297
+ <label class="flex items-center">
298
+ <input type="checkbox" class="cyber-input mr-2"> Animations
299
+ </label>
300
+ <label class="flex items-center">
301
+ <input type="checkbox" class="cyber-input mr-2"> Effet Parallax
302
+ </label>
303
+ <label class="flex items-center">
304
+ <input type="checkbox" class="cyber-input mr-2"> Mode sombre
305
+ </label>
306
+ <label class="flex items-center">
307
+ <input type="checkbox" class="cyber-input mr-2"> Fond vidéo
308
+ </label>
309
+ <label class="flex items-center">
310
+ <input type="checkbox" class="cyber-input mr-2"> Éléments 3D
311
+ </label>
312
+ </div>
313
+ </div>
314
+
315
+ <div>
316
+ <label class="block text-cyan-300 mb-2">Options d'intégration</label>
317
+ <div class="space-y-2">
318
+ <label class="flex items-center">
319
+ <input type="checkbox" class="cyber-input mr-2"> Google Analytics
320
+ </label>
321
+ <label class="flex items-center">
322
+ <input type="checkbox" class="cyber-input mr-2"> Réseaux sociaux
323
+ </label>
324
+ <label class="flex items-center">
325
+ <input type="checkbox" class="cyber-input mr-2"> Passerelle de paiement
326
+ </label>
327
+ <label class="flex items-center">
328
+ <input type="checkbox" class="cyber-input mr-2"> Newsletter
329
+ </label>
330
+ <label class="flex items-center">
331
+ <input type="checkbox" class="cyber-input mr-2"> Chat en direct
332
+ </label>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </main>
340
+
341
+ <!-- Footer -->
342
+ <footer class="holographic border-t border-cyan-500/20 py-8">
343
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
344
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
345
+ <div>
346
+ <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">SiteGenMatrix</h4>
347
+ <p class="text-cyan-100">
348
+ Le générateur de sites web IA le plus avancé au monde. Créez des sites réels et fonctionnels instantanément.
349
+ </p>
350
+ </div>
351
+ <div>
352
+ <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">Produit</h4>
353
+ <ul class="space-y-2">
354
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Fonctionnalités</a></li>
355
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Tarifs</a></li>
356
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">API</a></li>
357
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Roadmap</a></li>
358
+ </ul>
359
+ </div>
360
+ <div>
361
+ <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">Ressources</h4>
362
+ <ul class="space-y-2">
363
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Documentation</a></li>
364
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Tutoriels</a></li>
365
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Blog</a></li>
366
+ <li><a href="#" class="text-cyan-300 hover:text-white transition">Support</a></li>
367
+ </ul>
368
+ </div>
369
+ <div>
370
+ <h4 class="futuristic-text text-lg font-bold gradient-text mb-4">Contact</h4>
371
+ <div class="flex space-x-4">
372
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
373
+ <i class="fab fa-twitter"></i>
374
+ </a>
375
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
376
+ <i class="fab fa-github"></i>
377
+ </a>
378
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
379
+ <i class="fab fa-discord"></i>
380
+ </a>
381
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
382
+ <i class="fab fa-linkedin"></i>
383
+ </a>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <div class="border-t border-cyan-500/20 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
388
+ <p class="text-cyan-300">© 2023 SiteGenMatrix. Tous droits réservés.</p>
389
+ <div class="flex space-x-6 mt-4 md:mt-0">
390
+ <a href="#" class="text-cyan-300 hover:text-white transition">Confidentialité</a>
391
+ <a href="#" class="text-cyan-300 hover:text-white transition">Conditions</a>
392
+ <a href="#" class="text-cyan-300 hover:text-white transition">Cookies</a>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </footer>
397
+ </div>
398
+
399
+ <script>
400
+ // Toggle advanced options
401
+ document.getElementById('toggleAdvanced').addEventListener('click', function() {
402
+ const advancedOptions = document.getElementById('advancedOptions');
403
+ const icon = this.querySelector('i');
404
+
405
+ if (advancedOptions.classList.contains('hidden')) {
406
+ advancedOptions.classList.remove('hidden');
407
+ icon.classList.remove('fa-cog');
408
+ icon.classList.add('fa-times');
409
+ this.innerHTML = '<i class="fas fa-times mr-2"></i> Masquer les options';
410
+ } else {
411
+ advancedOptions.classList.add('hidden');
412
+ icon.classList.remove('fa-times');
413
+ icon.classList.add('fa-cog');
414
+ this.innerHTML = '<i class="fas fa-cog mr-2"></i> Afficher les options';
415
+ }
416
+ });
417
+
418
+ // Generate website
419
+ document.getElementById('generateBtn').addEventListener('click', function() {
420
+ const siteName = document.getElementById('siteName').value || 'Mon Site Web';
421
+ const siteType = document.getElementById('siteType').value;
422
+ const description = document.getElementById('siteDescription').value || 'Un site web moderne avec un excellent design et des fonctionnalités avancées.';
423
+ const colorScheme = document.getElementById('colorScheme').value;
424
+ const layoutStyle = document.getElementById('layoutStyle').value;
425
+
426
+ // Show loading state
427
+ const btn = this;
428
+ const originalText = btn.innerHTML;
429
+ btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Génération en cours...';
430
+ btn.disabled = true;
431
+
432
+ // Simulate generation process
433
+ setTimeout(() => {
434
+ // Generate the website preview
435
+ generateWebsitePreview(siteName, siteType, description, colorScheme, layoutStyle);
436
+
437
+ // Restore button
438
+ btn.innerHTML = originalText;
439
+ btn.disabled = false;
440
+ }, 2000);
441
+ });
442
+
443
+ function generateWebsitePreview(name, type, description, colorScheme, layoutStyle) {
444
+ const previewContainer = document.getElementById('previewContainer');
445
+
446
+ // Determine template based on type
447
+ let template;
448
+ switch(type) {
449
+ case 'business':
450
+ template = generateBusinessTemplate(name, description, colorScheme, layoutStyle);
451
+ break;
452
+ case 'ecommerce':
453
+ template = generateEcommerceTemplate(name, description, colorScheme, layoutStyle);
454
+ break;
455
+ case 'portfolio':
456
+ template = generatePortfolioTemplate(name, description, colorScheme, layoutStyle);
457
+ break;
458
+ case 'blog':
459
+ template = generateBlogTemplate(name, description, colorScheme, layoutStyle);
460
+ break;
461
+ case 'saas':
462
+ template = generateSaasTemplate(name, description, colorScheme, layoutStyle);
463
+ break;
464
+ default:
465
+ template = generateCustomTemplate(name, description, colorScheme, layoutStyle);
466
+ }
467
+
468
+ previewContainer.innerHTML = template;
469
+
470
+ // Add animation to show generation is complete
471
+ previewContainer.classList.add('glow');
472
+ setTimeout(() => {
473
+ previewContainer.classList.remove('glow');
474
+ }, 1000);
475
+ }
476
+
477
+ function generateBusinessTemplate(name, description, colorScheme, layoutStyle) {
478
+ return `
479
+ <div class="h-full">
480
+ <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
481
+ <div class="text-2xl font-bold gradient-text">${name}</div>
482
+ <nav class="flex space-x-6">
483
+ <a href="#" class="text-cyan-300 hover:text-white">Accueil</a>
484
+ <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
485
+ <a href="#" class="text-cyan-300 hover:text-white">Services</a>
486
+ <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
487
+ </nav>
488
+ </header>
489
+
490
+ <main>
491
+ <section class="mb-12">
492
+ <div class="h-64 rounded-xl bg-gradient-to-r from-cyan-900/50 to-purple-900/50 mb-8 flex items-center justify-center">
493
+ <h1 class="text-4xl font-bold text-center">Bienvenue chez ${name}</h1>
494
+ </div>
495
+ <p class="text-cyan-100 mb-6">${description}</p>
496
+ <button class="neon-btn px-6 py-2 rounded-full">En savoir plus</button>
497
+ </section>
498
+
499
+ <section class="mb-12">
500
+ <h2 class="text-2xl font-bold gradient-text mb-6">Nos Services</h2>
501
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
502
+ <div class="holographic p-6 rounded-lg">
503
+ <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
504
+ <i class="fas fa-chart-line text-cyan-300"></i>
505
+ </div>
506
+ <h3 class="text-xl font-bold mb-2">Croissance d'entreprise</h3>
507
+ <p class="text-cyan-100">Stratégies pour développer votre entreprise et augmenter vos revenus.</p>
508
+ </div>
509
+ <div class="holographic p-6 rounded-lg">
510
+ <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
511
+ <i class="fas fa-globe text-purple-300"></i>
512
+ </div>
513
+ <h3 class="text-xl font-bold mb-2">Présence digitale</h3>
514
+ <p class="text-cyan-100">Construisez votre identité en ligne avec nos solutions digitales.</p>
515
+ </div>
516
+ <div class="holographic p-6 rounded-lg">
517
+ <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
518
+ <i class="fas fa-users text-cyan-300"></i>
519
+ </div>
520
+ <h3 class="text-xl font-bold mb-2">Consulting</h3>
521
+ <p class="text-cyan-100">Conseils d'experts adaptés aux besoins de votre entreprise.</p>
522
+ </div>
523
+ </div>
524
+ </section>
525
+ </main>
526
+
527
+ <footer class="mt-12 pt-6 border-t border-cyan-500/20 text-center text-cyan-300">
528
+ <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
529
+ </footer>
530
+ </div>
531
+ `;
532
+ }
533
+
534
+ function generateEcommerceTemplate(name, description, colorScheme, layoutStyle) {
535
+ return `
536
+ <div class="h-full">
537
+ <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
538
+ <div class="text-2xl font-bold gradient-text">${name}</div>
539
+ <div class="flex items-center space-x-6">
540
+ <nav class="flex space-x-6">
541
+ <a href="#" class="text-cyan-300 hover:text-white">Boutique</a>
542
+ <a href="#" class="text-cyan-300 hover:text-white">Catégories</a>
543
+ <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
544
+ </nav>
545
+ <div class="flex space-x-4">
546
+ <button class="text-cyan-300 hover:text-white">
547
+ <i class="fas fa-search"></i>
548
+ </button>
549
+ <button class="text-cyan-300 hover:text-white">
550
+ <i class="fas fa-user"></i>
551
+ </button>
552
+ <button class="text-cyan-300 hover:text-white relative">
553
+ <i class="fas fa-shopping-cart"></i>
554
+ <span class="absolute -top-2 -right-2 bg-cyan-500 text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
555
+ </button>
556
+ </div>
557
+ </div>
558
+ </header>
559
+
560
+ <main>
561
+ <section class="mb-12">
562
+ <div class="h-64 rounded-xl bg-gradient-to-r from-purple-900/50 to-cyan-900/50 mb-8 flex items-center justify-center">
563
+ <div class="text-center">
564
+ <h1 class="text-4xl font-bold mb-4">${name}</h1>
565
+ <p class="text-xl text-cyan-100 max-w-2xl mx-auto">${description}</p>
566
+ </div>
567
+ </div>
568
+
569
+ <h2 class="text-2xl font-bold gradient-text mb-6">Produits phares</h2>
570
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
571
+ ${[1, 2, 3, 4].map(i => `
572
+ <div class="holographic rounded-lg overflow-hidden">
573
+ <div class="h-40 bg-cyan-900/30 flex items-center justify-center">
574
+ <i class="fas fa-box-open text-4xl text-cyan-300"></i>
575
+ </div>
576
+ <div class="p-4">
577
+ <h3 class="font-bold mb-2">Produit Premium ${i}</h3>
578
+ <p class="text-cyan-100 text-sm mb-3">Article de haute qualité avec des fonctionnalités exceptionnelles</p>
579
+ <div class="flex justify-between items-center">
580
+ <span class="font-bold">${(99 + i * 10).toFixed(2)}€</span>
581
+ <button class="text-xs neon-btn px-3 py-1 rounded-full">Ajouter au panier</button>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ `).join('')}
586
+ </div>
587
+ </section>
588
+ </main>
589
+
590
+ <footer class="mt-12 pt-6 border-t border-cyan-500/20">
591
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
592
+ <div>
593
+ <h3 class="font-bold gradient-text mb-4">${name}</h3>
594
+ <p class="text-cyan-100 text-sm">${description.substring(0, 100)}...</p>
595
+ </div>
596
+ <div>
597
+ <h3 class="font-bold gradient-text mb-4">Boutique</h3>
598
+ <ul class="space-y-2">
599
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Tous les produits</a></li>
600
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Produits phares</a></li>
601
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Nouveautés</a></li>
602
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Offres spéciales</a></li>
603
+ </ul>
604
+ </div>
605
+ <div>
606
+ <h3 class="font-bold gradient-text mb-4">Service client</h3>
607
+ <ul class="space-y-2">
608
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Contactez-nous</a></li>
609
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">FAQ</a></li>
610
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Livraison</a></li>
611
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Retours</a></li>
612
+ </ul>
613
+ </div>
614
+ <div>
615
+ <h3 class="font-bold gradient-text mb-4">Suivez-nous</h3>
616
+ <div class="flex space-x-4">
617
+ <a href="#" class="w-8 h-8 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
618
+ <i class="fab fa-facebook-f text-xs"></i>
619
+ </a>
620
+ <a href="#" class="w-8 h-8 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
621
+ <i class="fab fa-twitter text-xs"></i>
622
+ </a>
623
+ <a href="#" class="w-8 h-8 rounded-full bg-cyan-900/50 flex items-center justify-center hover:bg-cyan-500 transition">
624
+ <i class="fab fa-instagram text-xs"></i>
625
+ </a>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ <div class="mt-8 pt-6 border-t border-cyan-500/20 text-center text-sm text-cyan-300">
630
+ <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
631
+ </div>
632
+ </footer>
633
+ </div>
634
+ `;
635
+ }
636
+
637
+ function generatePortfolioTemplate(name, description, colorScheme, layoutStyle) {
638
+ return `
639
+ <div class="h-full">
640
+ <header class="flex flex-col items-center py-8 mb-8 text-center">
641
+ <div class="w-24 h-24 rounded-full bg-gradient-to-r from-cyan-500 to-purple-600 mb-4 flex items-center justify-center">
642
+ <i class="fas fa-user-astronaut text-3xl text-white"></i>
643
+ </div>
644
+ <h1 class="text-3xl font-bold gradient-text mb-2">${name}</h1>
645
+ <p class="text-cyan-300 max-w-md">${description}</p>
646
+ <nav class="flex space-x-6 mt-6">
647
+ <a href="#" class="text-cyan-300 hover:text-white">Projets</a>
648
+ <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
649
+ <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
650
+ </nav>
651
+ </header>
652
+
653
+ <main>
654
+ <section class="mb-12">
655
+ <h2 class="text-2xl font-bold gradient-text mb-6 text-center">Projets récents</h2>
656
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
657
+ ${[1, 2, 3, 4].map(i => `
658
+ <div class="holographic rounded-xl overflow-hidden">
659
+ <div class="h-48 bg-gradient-to-br from-cyan-900/30 to-purple-900/30 flex items-center justify-center">
660
+ <i class="fas fa-project-diagram text-4xl text-cyan-300"></i>
661
+ </div>
662
+ <div class="p-6">
663
+ <h3 class="text-xl font-bold mb-2">Projet ${i}</h3>
664
+ <p class="text-cyan-100 mb-4">${description.substring(0, 100)}...</p>
665
+ <div class="flex space-x-3">
666
+ <span class="text-xs px-2 py-1 bg-cyan-900/30 rounded-full">Design</span>
667
+ <span class="text-xs px-2 py-1 bg-purple-900/30 rounded-full">Développement</span>
668
+ </div>
669
+ </div>
670
+ </div>
671
+ `).join('')}
672
+ </div>
673
+ </section>
674
+
675
+ <section class="holographic rounded-xl p-8 mb-12">
676
+ <h2 class="text-2xl font-bold gradient-text mb-6">À propos</h2>
677
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
678
+ <div class="md:col-span-2">
679
+ <p class="text-cyan-100 mb-4">${description}</p>
680
+ <p class="text-cyan-100">Avec des années d'expérience dans mon domaine, j'ai travaillé avec des clients de divers secteurs pour fournir des résultats exceptionnels.</p>
681
+ </div>
682
+ <div>
683
+ <h3 class="font-bold gradient-text mb-4">Compétences</h3>
684
+ <ul class="space-y-3">
685
+ <li>
686
+ <div class="flex justify-between mb-1">
687
+ <span class="text-cyan-300">Design Web</span>
688
+ <span class="text-cyan-300">90%</span>
689
+ </div>
690
+ <div class="w-full bg-cyan-900/30 rounded-full h-1.5">
691
+ <div class="bg-gradient-to-r from-cyan-500 to-purple-600 h-1.5 rounded-full" style="width: 90%"></div>
692
+ </div>
693
+ </li>
694
+ <li>
695
+ <div class="flex justify-between mb-1">
696
+ <span class="text-cyan-300">Développement</span>
697
+ <span class="text-cyan-300">85%</span>
698
+ </div>
699
+ <div class="w-full bg-cyan-900/30 rounded-full h-1.5">
700
+ <div class="bg-gradient-to-r from-cyan-500 to-purple-600 h-1.5 rounded-full" style="width: 85%"></div>
701
+ </div>
702
+ </li>
703
+ <li>
704
+ <div class="flex justify-between mb-1">
705
+ <span class="text-cyan-300">Photographie</span>
706
+ <span class="text-cyan-300">75%</span>
707
+ </div>
708
+ <div class="w-full bg-cyan-900/30 rounded-full h-1.5">
709
+ <div class="bg-gradient-to-r from-cyan-500 to-purple-600 h-1.5 rounded-full" style="width: 75%"></div>
710
+ </div>
711
+ </li>
712
+ </ul>
713
+ </div>
714
+ </div>
715
+ </section>
716
+ </main>
717
+
718
+ <footer class="mt-12 pt-8 border-t border-cyan-500/20 text-center">
719
+ <div class="flex justify-center space-x-6 mb-6">
720
+ <a href="#" class="text-cyan-300 hover:text-white">
721
+ <i class="fab fa-twitter"></i>
722
+ </a>
723
+ <a href="#" class="text-cyan-300 hover:text-white">
724
+ <i class="fab fa-linkedin-in"></i>
725
+ </a>
726
+ <a href="#" class="text-cyan-300 hover:text-white">
727
+ <i class="fab fa-github"></i>
728
+ </a>
729
+ <a href="#" class="text-cyan-300 hover:text-white">
730
+ <i class="fab fa-dribbble"></i>
731
+ </a>
732
+ </div>
733
+ <p class="text-cyan-300">© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
734
+ </footer>
735
+ </div>
736
+ `;
737
+ }
738
+
739
+ function generateBlogTemplate(name, description, colorScheme, layoutStyle) {
740
+ return `
741
+ <div class="h-full">
742
+ <header class="py-8 mb-8 text-center border-b border-cyan-500/20">
743
+ <h1 class="text-4xl font-bold gradient-text mb-2">${name}</h1>
744
+ <p class="text-cyan-300 max-w-2xl mx-auto">${description}</p>
745
+ <nav class="flex justify-center space-x-8 mt-8">
746
+ <a href="#" class="text-cyan-300 hover:text-white">Accueil</a>
747
+ <a href="#" class="text-cyan-300 hover:text-white">Catégories</a>
748
+ <a href="#" class="text-cyan-300 hover:text-white">À propos</a>
749
+ <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
750
+ </nav>
751
+ </header>
752
+
753
+ <main class="max-w-4xl mx-auto">
754
+ <section class="mb-12">
755
+ <article class="holographic rounded-xl overflow-hidden mb-8">
756
+ <div class="h-64 bg-gradient-to-r from-purple-900/50 to-cyan-900/50 flex items-center justify-center">
757
+ <i class="fas fa-feather-alt text-5xl text-cyan-300"></i>
758
+ </div>
759
+ <div class="p-8">
760
+ <div class="flex items-center space-x-4 mb-4">
761
+ <span class="text-xs px-3 py-1 bg-cyan-900/30 rounded-full">Technologie</span>
762
+ <span class="text-xs text-cyan-300">15 mai 2023</span>
763
+ </div>
764
+ <h2 class="text-2xl font-bold mb-4">Le futur du développement web</h2>
765
+ <p class="text-cyan-100 mb-6">${description.substring(0, 200)}...</p>
766
+ <div class="flex justify-between items-center">
767
+ <div class="flex items-center space-x-2">
768
+ <div class="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center">
769
+ <i class="fas fa-user text-cyan-300"></i>
770
+ </div>
771
+ <span class="text-sm text-cyan-300">Par Admin</span>
772
+ </div>
773
+ <a href="#" class="text-sm neon-btn px-4 py-2 rounded-full">Lire plus</a>
774
+ </div>
775
+ </div>
776
+ </article>
777
+
778
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
779
+ ${[1, 2, 3, 4].map(i => `
780
+ <article class="holographic rounded-xl overflow-hidden">
781
+ <div class="h-40 bg-gradient-to-r from-cyan-900/50 to-purple-900/50 flex items-center justify-center">
782
+ <i class="fas fa-${i%2===0?'code':'chart-pie'} text-3xl text-cyan-300"></i>
783
+ </div>
784
+ <div class="p-6">
785
+ <div class="flex items-center space-x-4 mb-3">
786
+ <span class="text-xs px-2 py-1 bg-cyan-900/30 rounded-full">${i%2===0?'Tech':'Business'}</span>
787
+ <span class="text-xs text-cyan-300">${10+i} mai 2023</span>
788
+ </div>
789
+ <h3 class="text-lg font-bold mb-3">${i%2===0?'Nouveau Framework':'Analyse des tendances'}</h3>
790
+ <p class="text-cyan-100 text-sm mb-4">${description.substring(0, 100)}...</p>
791
+ <a href="#" class="text-sm text-cyan-300 hover:text-white inline-flex items-center">
792
+ Lire plus <i class="fas fa-arrow-right ml-2 text-xs"></i>
793
+ </a>
794
+ </div>
795
+ </article>
796
+ `).join('')}
797
+ </div>
798
+ </section>
799
+
800
+ <div class="flex justify-center">
801
+ <nav class="flex space-x-2">
802
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">1</a>
803
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">2</a>
804
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">3</a>
805
+ <a href="#" class="w-10 h-10 rounded-full bg-cyan-900/30 flex items-center justify-center text-cyan-300 hover:bg-cyan-500 hover:text-white">
806
+ <i class="fas fa-chevron-right"></i>
807
+ </a>
808
+ </nav>
809
+ </div>
810
+ </main>
811
+
812
+ <footer class="mt-16 py-8 border-t border-cyan-500/20">
813
+ <div class="max-w-4xl mx-auto">
814
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
815
+ <div>
816
+ <h3 class="font-bold gradient-text mb-4">${name}</h3>
817
+ <p class="text-cyan-100 text-sm">${description.substring(0, 120)}...</p>
818
+ </div>
819
+ <div>
820
+ <h3 class="font-bold gradient-text mb-4">Catégories</h3>
821
+ <ul class="space-y-2">
822
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Technologie</a></li>
823
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Business</a></li>
824
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Design</a></li>
825
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Lifestyle</a></li>
826
+ </ul>
827
+ </div>
828
+ <div>
829
+ <h3 class="font-bold gradient-text mb-4">S'abonner</h3>
830
+ <p class="text-cyan-100 text-sm mb-3">Recevez les derniers articles directement dans votre boîte mail</p>
831
+ <div class="flex">
832
+ <input type="email" placeholder="Votre email" class="cyber-input flex-grow px-4 py-2 rounded-l-lg text-sm">
833
+ <button class="neon-btn px-4 py-2 rounded-r-lg text-sm">
834
+ <i class="fas fa-paper-plane"></i>
835
+ </button>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ <div class="mt-8 pt-6 border-t border-cyan-500/20 text-center text-sm text-cyan-300">
840
+ <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
841
+ </div>
842
+ </div>
843
+ </footer>
844
+ </div>
845
+ `;
846
+ }
847
+
848
+ function generateSaasTemplate(name, description, colorScheme, layoutStyle) {
849
+ return `
850
+ <div class="h-full">
851
+ <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
852
+ <div class="flex items-center space-x-2">
853
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-cyan-500 to-purple-600 flex items-center justify-center">
854
+ <i class="fas fa-cube text-white text-sm"></i>
855
+ </div>
856
+ <div class="text-xl font-bold gradient-text">${name}</div>
857
+ </div>
858
+ <nav class="hidden md:flex space-x-8">
859
+ <a href="#" class="text-cyan-300 hover:text-white">Fonctionnalités</a>
860
+ <a href="#" class="text-cyan-300 hover:text-white">Tarifs</a>
861
+ <a href="#" class="text-cyan-300 hover:text-white">Docs</a>
862
+ <a href="#" class="text-cyan-300 hover:text-white">Blog</a>
863
+ </nav>
864
+ <div class="flex space-x-4">
865
+ <button class="text-cyan-300 hover:text-white px-4 py-2">Connexion</button>
866
+ <button class="neon-btn px-6 py-2 rounded-full text-sm font-bold">S'inscrire</button>
867
+ </div>
868
+ </header>
869
+
870
+ <main>
871
+ <section class="mb-16">
872
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
873
+ <div>
874
+ <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-6">Solution SaaS puissante pour votre entreprise</h1>
875
+ <p class="text-xl text-cyan-100 mb-8">${description}</p>
876
+ <div class="flex flex-wrap gap-4">
877
+ <button class="neon-btn px-8 py-3 rounded-full text-lg font-bold">
878
+ Commencer <i class="fas fa-arrow-right ml-2"></i>
879
+ </button>
880
+ <button class="px-6 py-3 rounded-full border border-cyan-500/50 text-cyan-300 hover:bg-cyan-500/10 hover:text-white transition">
881
+ <i class="fas fa-play-circle mr-2"></i> Voir la démo
882
+ </button>
883
+ </div>
884
+ </div>
885
+ <div class="holographic rounded-xl p-6">
886
+ <div class="h-64 bg-gradient-to-br from-cyan-900/30 to-purple-900/30 rounded-lg flex items-center justify-center">
887
+ <i class="fas fa-cloud text-5xl text-cyan-300"></i>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ </section>
892
+
893
+ <section class="mb-16">
894
+ <h2 class="text-3xl font-bold gradient-text mb-12 text-center">Pourquoi choisir ${name} ?</h2>
895
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
896
+ <div class="holographic p-6 rounded-xl">
897
+ <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
898
+ <i class="fas fa-bolt text-cyan-300"></i>
899
+ </div>
900
+ <h3 class="text-xl font-bold mb-3">Ultra rapide</h3>
901
+ <p class="text-cyan-100">Optimisé pour des performances maximales avec une latence minimale.</p>
902
+ </div>
903
+ <div class="holographic p-6 rounded-xl">
904
+ <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
905
+ <i class="fas fa-shield-alt text-purple-300"></i>
906
+ </div>
907
+ <h3 class="text-xl font-bold mb-3">Sécurisé</h3>
908
+ <p class="text-cyan-100">Sécurité de niveau entreprise avec chiffrement de bout en bout.</p>
909
+ </div>
910
+ <div class="holographic p-6 rounded-xl">
911
+ <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
912
+ <i class="fas fa-expand text-cyan-300"></i>
913
+ </div>
914
+ <h3 class="text-xl font-bold mb-3">Évolutif</h3>
915
+ <p class="text-cyan-100">Évolue avec les besoins de votre entreprise, des startups aux grandes entreprises.</p>
916
+ </div>
917
+ </div>
918
+ </section>
919
+
920
+ <section class="holographic rounded-xl p-8 mb-16">
921
+ <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Plans tarifaires</h2>
922
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
923
+ <div class="holographic rounded-xl p-6 border border-cyan-500/30">
924
+ <h3 class="text-xl font-bold mb-4">Starter</h3>
925
+ <div class="text-4xl font-bold gradient-text mb-4">19€<span class="text-lg text-cyan-300">/mois</span></div>
926
+ <p class="text-cyan-100 text-sm mb-6">Parfait pour les particuliers et petites équipes</p>
927
+ <ul class="space-y-3 mb-8">
928
+ <li class="flex items-center">
929
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
930
+ <span class="text-sm">10,000 requêtes</span>
931
+ </li>
932
+ <li class="flex items-center">
933
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
934
+ <span class="text-sm">5GB stockage</span>
935
+ </li>
936
+ <li class="flex items-center">
937
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
938
+ <span class="text-sm">Analytiques de base</span>
939
+ </li>
940
+ </ul>
941
+ <button class="w-full neon-btn py-2 rounded-full">Commencer</button>
942
+ </div>
943
+ <div class="holographic rounded-xl p-6 border border-purple-500/50 relative">
944
+ <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs px-2 py-1 rounded-bl rounded-tr">POPULAIRE</div>
945
+ <h3 class="text-xl font-bold mb-4">Pro</h3>
946
+ <div class="text-4xl font-bold gradient-text mb-4">49€<span class="text-lg text-cyan-300">/mois</span></div>
947
+ <p class="text-cyan-100 text-sm mb-6">Pour les entreprises en croissance</p>
948
+ <ul class="space-y-3 mb-8">
949
+ <li class="flex items-center">
950
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
951
+ <span class="text-sm">50,000 requêtes</span>
952
+ </li>
953
+ <li class="flex items-center">
954
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
955
+ <span class="text-sm">25GB stockage</span>
956
+ </li>
957
+ <li class="flex items-center">
958
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
959
+ <span class="text-sm">Analytiques avancées</span>
960
+ </li>
961
+ <li class="flex items-center">
962
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
963
+ <span class="text-sm">Support prioritaire</span>
964
+ </li>
965
+ </ul>
966
+ <button class="w-full neon-btn py-2 rounded-full">Commencer</button>
967
+ </div>
968
+ <div class="holographic rounded-xl p-6 border border-cyan-500/30">
969
+ <h3 class="text-xl font-bold mb-4">Entreprise</h3>
970
+ <div class="text-4xl font-bold gradient-text mb-4">99€<span class="text-lg text-cyan-300">/mois</span></div>
971
+ <p class="text-cyan-100 text-sm mb-6">Pour les grandes organisations</p>
972
+ <ul class="space-y-3 mb-8">
973
+ <li class="flex items-center">
974
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
975
+ <span class="text-sm">Requêtes illimitées</span>
976
+ </li>
977
+ <li class="flex items-center">
978
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
979
+ <span class="text-sm">100GB stockage</span>
980
+ </li>
981
+ <li class="flex items-center">
982
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
983
+ <span class="text-sm">Analytiques avancées</span>
984
+ </li>
985
+ <li class="flex items-center">
986
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
987
+ <span class="text-sm">Support 24/7</span>
988
+ </li>
989
+ <li class="flex items-center">
990
+ <i class="fas fa-check text-cyan-300 mr-2 text-xs"></i>
991
+ <span class="text-sm">Solutions personnalisées</span>
992
+ </li>
993
+ </ul>
994
+ <button class="w-full neon-btn py-2 rounded-full">Contact commercial</button>
995
+ </div>
996
+ </div>
997
+ </section>
998
+ </main>
999
+
1000
+ <footer class="mt-12 pt-8 border-t border-cyan-500/20">
1001
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
1002
+ <div>
1003
+ <h3 class="font-bold gradient-text mb-4">${name}</h3>
1004
+ <p class="text-cyan-100 text-sm">${description.substring(0, 100)}...</p>
1005
+ </div>
1006
+ <div>
1007
+ <h3 class="font-bold gradient-text mb-4">Produit</h3>
1008
+ <ul class="space-y-2">
1009
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Fonctionnalités</a></li>
1010
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Tarifs</a></li>
1011
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">API</a></li>
1012
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Intégrations</a></li>
1013
+ </ul>
1014
+ </div>
1015
+ <div>
1016
+ <h3 class="font-bold gradient-text mb-4">Ressources</h3>
1017
+ <ul class="space-y-2">
1018
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Documentation</a></li>
1019
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Guides</a></li>
1020
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Blog</a></li>
1021
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Support</a></li>
1022
+ </ul>
1023
+ </div>
1024
+ <div>
1025
+ <h3 class="font-bold gradient-text mb-4">Entreprise</h3>
1026
+ <ul class="space-y-2">
1027
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">À propos</a></li>
1028
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Carrières</a></li>
1029
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Contact</a></li>
1030
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Mentions légales</a></li>
1031
+ </ul>
1032
+ </div>
1033
+ </div>
1034
+ <div class="pt-6 border-t border-cyan-500/20 flex flex-col md:flex-row justify-between items-center">
1035
+ <p class="text-cyan-300 text-sm mb-4 md:mb-0">© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
1036
+ <div class="flex space-x-6">
1037
+ <a href="#" class="text-cyan-300 hover:text-white">
1038
+ <i class="fab fa-twitter"></i>
1039
+ </a>
1040
+ <a href="#" class="text-cyan-300 hover:text-white">
1041
+ <i class="fab fa-linkedin-in"></i>
1042
+ </a>
1043
+ <a href="#" class="text-cyan-300 hover:text-white">
1044
+ <i class="fab fa-github"></i>
1045
+ </a>
1046
+ <a href="#" class="text-cyan-300 hover:text-white">
1047
+ <i class="fab fa-facebook-f"></i>
1048
+ </a>
1049
+ </div>
1050
+ </div>
1051
+ </footer>
1052
+ </div>
1053
+ `;
1054
+ }
1055
+
1056
+ function generateCustomTemplate(name, description, colorScheme, layoutStyle) {
1057
+ return `
1058
+ <div class="h-full">
1059
+ <header class="flex justify-between items-center py-4 mb-8 border-b border-cyan-500/20">
1060
+ <div class="text-2xl font-bold gradient-text">${name}</div>
1061
+ <nav class="hidden md:flex space-x-8">
1062
+ <a href="#" class="text-cyan-300 hover:text-white">Accueil</a>
1063
+ <a href="#" class="text-cyan-300 hover:text-white">Fonctionnalités</a>
1064
+ <a href="#" class="text-cyan-300 hover:text-white">Galerie</a>
1065
+ <a href="#" class="text-cyan-300 hover:text-white">Contact</a>
1066
+ </nav>
1067
+ <button class="neon-btn px-6 py-2 rounded-full text-sm font-bold">
1068
+ <i class="fas fa-phone-alt mr-2"></i> Nous contacter
1069
+ </button>
1070
+ </header>
1071
+
1072
+ <main>
1073
+ <section class="mb-16">
1074
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
1075
+ <div>
1076
+ <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-6">Solution personnalisée pour vos besoins</h1>
1077
+ <p class="text-xl text-cyan-100 mb-8">${description}</p>
1078
+ <div class="flex flex-wrap gap-4">
1079
+ <button class="neon-btn px-8 py-3 rounded-full text-lg font-bold">
1080
+ En savoir plus <i class="fas fa-arrow-right ml-2"></i>
1081
+ </button>
1082
+ <button class="px-6 py-3 rounded-full border border-cyan-500/50 text-cyan-300 hover:bg-cyan-500/10 hover:text-white transition">
1083
+ <i class="fas fa-download mr-2"></i> Télécharger
1084
+ </button>
1085
+ </div>
1086
+ </div>
1087
+ <div class="holographic rounded-xl p-6">
1088
+ <div class="h-64 bg-gradient-to-br from-purple-900/30 to-cyan-900/30 rounded-lg flex items-center justify-center">
1089
+ <i class="fas fa-star text-5xl text-cyan-300"></i>
1090
+ </div>
1091
+ </div>
1092
+ </div>
1093
+ </section>
1094
+
1095
+ <section class="holographic rounded-xl p-8 mb-12">
1096
+ <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Nos Fonctionnalités</h2>
1097
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
1098
+ <div class="p-6">
1099
+ <div class="w-14 h-14 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
1100
+ <i class="fas fa-cog text-2xl text-cyan-300"></i>
1101
+ </div>
1102
+ <h3 class="text-xl font-bold mb-3">Personnalisable</h3>
1103
+ <p class="text-cyan-100">Adaptez chaque aspect à vos besoins spécifiques.</p>
1104
+ </div>
1105
+ <div class="p-6">
1106
+ <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
1107
+ <i class="fas fa-rocket text-2xl text-purple-300"></i>
1108
+ </div>
1109
+ <h3 class="text-xl font-bold mb-3">Haute performance</h3>
1110
+ <p class="text-cyan-100">Optimisé pour la vitesse et l'efficacité.</p>
1111
+ </div>
1112
+ <div class="p-6">
1113
+ <div class="w-14 h-14 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
1114
+ <i class="fas fa-shield-alt text-2xl text-cyan-300"></i>
1115
+ </div>
1116
+ <h3 class="text-xl font-bold mb-3">Sécurisé</h3>
1117
+ <p class="text-cyan-100">Conçu pour protéger vos données et votre vie privée.</p>
1118
+ </div>
1119
+ <div class="p-6">
1120
+ <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
1121
+ <i class="fas fa-sync-alt text-2xl text-purple-300"></i>
1122
+ </div>
1123
+ <h3 class="text-xl font-bold mb-3">Automatisé</h3>
1124
+ <p class="text-cyan-100">Gagnez du temps avec des processus automatisés.</p>
1125
+ </div>
1126
+ <div class="p-6">
1127
+ <div class="w-14 h-14 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
1128
+ <i class="fas fa-chart-line text-2xl text-cyan-300"></i>
1129
+ </div>
1130
+ <h3 class="text-xl font-bold mb-3">Analytiques</h3>
1131
+ <p class="text-cyan-100">Obtenez des insights avec des analyses complètes.</p>
1132
+ </div>
1133
+ <div class="p-6">
1134
+ <div class="w-14 h-14 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
1135
+ <i class="fas fa-headset text-2xl text-purple-300"></i>
1136
+ </div>
1137
+ <h3 class="text-xl font-bold mb-3">Support</h3>
1138
+ <p class="text-cyan-100">Support client 24/7 pour vous aider à tout moment.</p>
1139
+ </div>
1140
+ </div>
1141
+ </section>
1142
+
1143
+ <section class="mb-16">
1144
+ <h2 class="text-3xl font-bold gradient-text mb-8 text-center">Témoignages</h2>
1145
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
1146
+ <div class="holographic p-6 rounded-xl">
1147
+ <div class="flex items-center mb-4">
1148
+ <div class="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center mr-3">
1149
+ <i class="fas fa-user text-cyan-300"></i>
1150
+ </div>
1151
+ <div>
1152
+ <h4 class="font-bold">Sarah Johnson</h4>
1153
+ <p class="text-cyan-300 text-sm">CEO, TechCorp</p>
1154
+ </div>
1155
+ </div>
1156
+ <p class="text-cyan-100">"Cette solution a transformé notre flux de travail et augmenté la productivité de 200%."</p>
1157
+ </div>
1158
+ <div class="holographic p-6 rounded-xl">
1159
+ <div class="flex items-center mb-4">
1160
+ <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
1161
+ <i class="fas fa-user text-purple-300"></i>
1162
+ </div>
1163
+ <div>
1164
+ <h4 class="font-bold">Michael Chen</h4>
1165
+ <p class="text-cyan-300 text-sm">CTO, InnovateX</p>
1166
+ </div>
1167
+ </div>
1168
+ <p class="text-cyan-100">"Les options de personnalisation sont inégalées. Exactement ce dont nous avions besoin."</p>
1169
+ </div>
1170
+ <div class="holographic p-6 rounded-xl">
1171
+ <div class="flex items-center mb-4">
1172
+ <div class="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center mr-3">
1173
+ <i class="fas fa-user text-cyan-300"></i>
1174
+ </div>
1175
+ <div>
1176
+ <h4 class="font-bold">Emma Rodriguez</h4>
1177
+ <p class="text-cyan-300 text-sm">Directrice, Global Solutions</p>
1178
+ </div>
1179
+ </div>
1180
+ <p class="text-cyan-100">"L'implémentation a été transparente et les résultats immédiats. Je recommande vivement!"</p>
1181
+ </div>
1182
+ </div>
1183
+ </section>
1184
+ </main>
1185
+
1186
+ <footer class="mt-12 pt-8 border-t border-cyan-500/20">
1187
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
1188
+ <div>
1189
+ <h3 class="font-bold gradient-text mb-4">${name}</h3>
1190
+ <p class="text-cyan-100 text-sm">${description.substring(0, 120)}...</p>
1191
+ </div>
1192
+ <div>
1193
+ <h3 class="font-bold gradient-text mb-4">Liens rapides</h3>
1194
+ <ul class="space-y-2">
1195
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Accueil</a></li>
1196
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Fonctionnalités</a></li>
1197
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Tarifs</a></li>
1198
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Contact</a></li>
1199
+ </ul>
1200
+ </div>
1201
+ <div>
1202
+ <h3 class="font-bold gradient-text mb-4">Ressources</h3>
1203
+ <ul class="space-y-2">
1204
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Blog</a></li>
1205
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Documentation</a></li>
1206
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Support</a></li>
1207
+ <li><a href="#" class="text-cyan-300 hover:text-white text-sm">Communauté</a></li>
1208
+ </ul>
1209
+ </div>
1210
+ <div>
1211
+ <h3 class="font-bold gradient-text mb-4">Nous contacter</h3>
1212
+ <ul class="space-y-2">
1213
+ <li class="flex items-center">
1214
+ <i class="fas fa-map-marker-alt text-cyan-300 mr-2 text-sm"></i>
1215
+ <span class="text-cyan-100 text-sm">123 Rue Tech, Ville Digitale</span>
1216
+ </li>
1217
+ <li class="flex items-center">
1218
+ <i class="fas fa-phone-alt text-cyan-300 mr-2 text-sm"></i>
1219
+ <span class="text-cyan-100 text-sm">+33 1 23 45 67 89</span>
1220
+ </li>
1221
+ <li class="flex items-center">
1222
+ <i class="fas fa-envelope text-cyan-300 mr-2 text-sm"></i>
1223
+ <span class="text-cyan-100 text-sm">info@${name.toLowerCase().replace(/\s+/g, '')}.com</span>
1224
+ </li>
1225
+ </ul>
1226
+ </div>
1227
+ </div>
1228
+ <div class="pt-6 border-t border-cyan-500/20 text-center text-sm text-cyan-300">
1229
+ <p>© ${new Date().getFullYear()} ${name}. Tous droits réservés.</p>
1230
+ </div>
1231
+ </footer>
1232
+ </div>
1233
+ `;
1234
+ }
1235
+ </script>
1236
+ <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/sitegenmatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1237
+ </html>
prompts.txt ADDED
@@ -0,0 +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
2
+ SiteGenMatrix Générez des sites web par simple description Créez des sites web complets en décrivant simplement ce que vous voulez. Notre IA transforme vos idées en réalité digitale. Décrivez votre site