Hugging Face's logo

Spaces:
docto41
/
generateur-site
Running

App Files Community
docto41 commited on
Commit
c3c2657
·
verified ·
1 Parent(s): ff1e838

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1054 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Generateur Site
3
- emoji: 📈
4
- colorFrom: yellow
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: generateur-site
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1054 @@
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 Pro d'Applications Web</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .sidebar {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .code-block {
17
+ font-family: 'Courier New', monospace;
18
+ background-color: #2d3748;
19
+ color: #f7fafc;
20
+ border-radius: 0.5rem;
21
+ overflow-x: auto;
22
+ }
23
+ .preview-frame {
24
+ border: none;
25
+ background: white;
26
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
27
+ }
28
+ .feature-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+ .architecture-diagram {
33
+ background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
34
+ border-radius: 1rem;
35
+ }
36
+ .toggle-checkbox:checked {
37
+ right: 0;
38
+ background-color: #4f46e5;
39
+ }
40
+ .toggle-checkbox:checked + .toggle-label {
41
+ background-color: #a5b4fc;
42
+ }
43
+ .draggable-item {
44
+ cursor: grab;
45
+ transition: all 0.2s ease;
46
+ }
47
+ .draggable-item:active {
48
+ cursor: grabbing;
49
+ }
50
+ .drop-zone {
51
+ min-height: 200px;
52
+ transition: all 0.3s ease;
53
+ }
54
+ .drop-zone.highlight {
55
+ background-color: #ebf4ff;
56
+ border: 2px dashed #4f46e5;
57
+ }
58
+ .progress-bar {
59
+ transition: width 0.5s ease;
60
+ }
61
+ .tooltip:hover .tooltip-text {
62
+ visibility: visible;
63
+ opacity: 1;
64
+ }
65
+ .animate-pulse {
66
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
67
+ }
68
+ @keyframes pulse {
69
+ 0%, 100% {
70
+ opacity: 1;
71
+ }
72
+ 50% {
73
+ opacity: 0.5;
74
+ }
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-50 font-sans antialiased">
79
+ <!-- Navigation -->
80
+ <nav class="bg-white shadow-lg">
81
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
82
+ <div class="flex justify-between h-16">
83
+ <div class="flex">
84
+ <div class="flex-shrink-0 flex items-center">
85
+ <i class="fas fa-cube text-indigo-600 text-2xl mr-2"></i>
86
+ <span class="text-xl font-bold text-gray-900">AppGen Pro</span>
87
+ </div>
88
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
89
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
90
+ Accueil
91
+ </a>
92
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
93
+ Fonctionnalités
94
+ </a>
95
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
96
+ Templates
97
+ </a>
98
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
99
+ Tarifs
100
+ </a>
101
+ </div>
102
+ </div>
103
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
104
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
105
+ <i class="fas fa-sign-in-alt mr-2"></i>Connexion
106
+ </button>
107
+ </div>
108
+ <div class="-mr-2 flex items-center sm:hidden">
109
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
110
+ <span class="sr-only">Open main menu</span>
111
+ <i class="fas fa-bars text-xl"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Mobile menu -->
118
+ <div class="sm:hidden hidden" id="mobile-menu">
119
+ <div class="pt-2 pb-3 space-y-1">
120
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a>
121
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Fonctionnalités</a>
122
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Templates</a>
123
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Tarifs</a>
124
+ <div class="pt-4 pb-3 border-t border-gray-200">
125
+ <div class="mt-3 space-y-1">
126
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
127
+ <i class="fas fa-sign-in-alt mr-2"></i>Connexion
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </nav>
134
+
135
+ <!-- Hero Section -->
136
+ <div class="gradient-bg text-white">
137
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
138
+ <div class="text-center">
139
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
140
+ Générateur Pro d'Applications Web
141
+ </h1>
142
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
143
+ Créez des applications web complètes avec architecture professionnelle en quelques clics. Pas de sites vitrine, uniquement des solutions professionnelles.
144
+ </p>
145
+ <div class="mt-10 flex justify-center">
146
+ <div class="inline-flex rounded-md shadow">
147
+ <a href="#generator" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
148
+ <i class="fas fa-bolt mr-2"></i> Commencer maintenant
149
+ </a>
150
+ </div>
151
+ <div class="ml-3 inline-flex">
152
+ <a href="#features" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70">
153
+ <i class="fas fa-info-circle mr-2"></i> En savoir plus
154
+ </a>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Stats Section -->
162
+ <div class="bg-white py-12">
163
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
164
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
165
+ <div class="text-center">
166
+ <div class="text-5xl font-extrabold text-indigo-600">1500+</div>
167
+ <div class="mt-2 text-base text-gray-500">Lignes de code générées</div>
168
+ </div>
169
+ <div class="text-center">
170
+ <div class="text-5xl font-extrabold text-indigo-600">50+</div>
171
+ <div class="mt-2 text-base text-gray-500">Composants disponibles</div>
172
+ </div>
173
+ <div class="text-center">
174
+ <div class="text-5xl font-extrabold text-indigo-600">10+</div>
175
+ <div class="mt-2 text-base text-gray-500">Architectures professionnelles</div>
176
+ </div>
177
+ <div class="text-center">
178
+ <div class="text-5xl font-extrabold text-indigo-600">∞</div>
179
+ <div class="mt-2 text-base text-gray-500">Possibilités de personnalisation</div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Main Generator Section -->
186
+ <div id="generator" class="bg-gray-50 py-16">
187
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
188
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
189
+ <!-- Sidebar -->
190
+ <div class="lg:col-span-4">
191
+ <div class="bg-white shadow rounded-lg p-6 mb-8">
192
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Configuration de l'application</h2>
193
+
194
+ <div class="space-y-4">
195
+ <div>
196
+ <label for="app-name" class="block text-sm font-medium text-gray-700">Nom de l'application</label>
197
+ <input type="text" id="app-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="MonAppPro">
198
+ </div>
199
+
200
+ <div>
201
+ <label for="app-type" class="block text-sm font-medium text-gray-700">Type d'application</label>
202
+ <select id="app-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
203
+ <option>Application SaaS</option>
204
+ <option>Plateforme e-commerce</option>
205
+ <option>Réseau social</option>
206
+ <option>ERP personnalisé</option>
207
+ <option>CRM avancé</option>
208
+ <option>Application mobile hybride</option>
209
+ </select>
210
+ </div>
211
+
212
+ <div>
213
+ <label for="tech-stack" class="block text-sm font-medium text-gray-700">Stack technologique</label>
214
+ <select id="tech-stack" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
215
+ <option>MERN (MongoDB, Express, React, Node.js)</option>
216
+ <option>MEAN (MongoDB, Express, Angular, Node.js)</option>
217
+ <option>LAMP (Linux, Apache, MySQL, PHP)</option>
218
+ <option>Django + React</option>
219
+ <option>Ruby on Rails + Vue.js</option>
220
+ <option>Spring Boot + React</option>
221
+ </select>
222
+ </div>
223
+
224
+ <div>
225
+ <label class="block text-sm font-medium text-gray-700">Fonctionnalités principales</label>
226
+ <div class="mt-2 space-y-2">
227
+ <div class="flex items-start">
228
+ <div class="flex items-center h-5">
229
+ <input id="auth" name="auth" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
230
+ </div>
231
+ <div class="ml-3 text-sm">
232
+ <label for="auth" class="font-medium text-gray-700">Authentification</label>
233
+ <p class="text-gray-500">Système complet de connexion/inscription</p>
234
+ </div>
235
+ </div>
236
+ <div class="flex items-start">
237
+ <div class="flex items-center h-5">
238
+ <input id="database" name="database" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
239
+ </div>
240
+ <div class="ml-3 text-sm">
241
+ <label for="database" class="font-medium text-gray-700">Base de données</label>
242
+ <p class="text-gray-500">Modèles et schémas prédéfinis</p>
243
+ </div>
244
+ </div>
245
+ <div class="flex items-start">
246
+ <div class="flex items-center h-5">
247
+ <input id="api" name="api" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
248
+ </div>
249
+ <div class="ml-3 text-sm">
250
+ <label for="api" class="font-medium text-gray-700">API REST</label>
251
+ <p class="text-gray-500">Endpoints sécurisés avec documentation</p>
252
+ </div>
253
+ </div>
254
+ <div class="flex items-start">
255
+ <div class="flex items-center h-5">
256
+ <input id="admin" name="admin" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
257
+ </div>
258
+ <div class="ml-3 text-sm">
259
+ <label for="admin" class="font-medium text-gray-700">Panneau d'administration</label>
260
+ <p class="text-gray-500">Interface de gestion complète</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div>
267
+ <label class="block text-sm font-medium text-gray-700">Options avancées</label>
268
+ <div class="mt-2 space-y-2">
269
+ <div class="flex justify-between items-center">
270
+ <span class="text-sm font-medium text-gray-700">Tests unitaires</span>
271
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
272
+ <input type="checkbox" id="toggle-tests" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
273
+ <label for="toggle-tests" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
274
+ </div>
275
+ </div>
276
+ <div class="flex justify-between items-center">
277
+ <span class="text-sm font-medium text-gray-700">CI/CD intégré</span>
278
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
279
+ <input type="checkbox" id="toggle-ci" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
280
+ <label for="toggle-ci" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
281
+ </div>
282
+ </div>
283
+ <div class="flex justify-between items-center">
284
+ <span class="text-sm font-medium text-gray-700">Dockerisation</span>
285
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
286
+ <input type="checkbox" id="toggle-docker" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
287
+ <label for="toggle-docker" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="mt-6">
295
+ <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-md text-sm font-medium flex items-center justify-center">
296
+ <i class="fas fa-magic mr-2"></i> Générer l'application
297
+ </button>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="bg-white shadow rounded-lg p-6">
302
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Composants disponibles</h2>
303
+ <div class="grid grid-cols-2 gap-3">
304
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="user-profile">
305
+ <i class="fas fa-user-circle text-indigo-500 mb-1"></i>
306
+ <div>Profil utilisateur</div>
307
+ </div>
308
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="dashboard">
309
+ <i class="fas fa-tachometer-alt text-indigo-500 mb-1"></i>
310
+ <div>Tableau de bord</div>
311
+ </div>
312
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="data-table">
313
+ <i class="fas fa-table text-indigo-500 mb-1"></i>
314
+ <div>Tableau de données</div>
315
+ </div>
316
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="calendar">
317
+ <i class="fas fa-calendar-alt text-indigo-500 mb-1"></i>
318
+ <div>Calendrier</div>
319
+ </div>
320
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="chat">
321
+ <i class="fas fa-comments text-indigo-500 mb-1"></i>
322
+ <div>Chat en direct</div>
323
+ </div>
324
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="payment">
325
+ <i class="fas fa-credit-card text-indigo-500 mb-1"></i>
326
+ <div>Paiements</div>
327
+ </div>
328
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="maps">
329
+ <i class="fas fa-map-marked-alt text-indigo-500 mb-1"></i>
330
+ <div>Cartes</div>
331
+ </div>
332
+ <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="analytics">
333
+ <i class="fas fa-chart-line text-indigo-500 mb-1"></i>
334
+ <div>Analytiques</div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Main Content -->
341
+ <div class="mt-12 lg:mt-0 lg:col-span-8">
342
+ <div class="bg-white shadow rounded-lg overflow-hidden">
343
+ <div class="px-6 py-4 border-b border-gray-200">
344
+ <div class="flex justify-between items-center">
345
+ <h2 class="text-lg font-medium text-gray-900">Architecture de l'application</h2>
346
+ <div class="flex space-x-2">
347
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
348
+ <i class="fas fa-redo mr-1"></i> Actualiser
349
+ </button>
350
+ <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 py-1 px-3 rounded text-sm">
351
+ <i class="fas fa-download mr-1"></i> Exporter
352
+ </button>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="p-6">
358
+ <div class="architecture-diagram p-6 mb-6">
359
+ <div class="flex justify-center">
360
+ <div class="text-center">
361
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
362
+ <i class="fas fa-user text-xl"></i>
363
+ </div>
364
+ <div class="text-sm font-medium">Interface Utilisateur</div>
365
+ </div>
366
+ <div class="flex items-center mx-4">
367
+ <i class="fas fa-arrow-right text-gray-400"></i>
368
+ </div>
369
+ <div class="text-center">
370
+ <div class="bg-green-100 text-green-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
371
+ <i class="fas fa-code text-xl"></i>
372
+ </div>
373
+ <div class="text-sm font-medium">API</div>
374
+ </div>
375
+ <div class="flex items-center mx-4">
376
+ <i class="fas fa-arrow-right text-gray-400"></i>
377
+ </div>
378
+ <div class="text-center">
379
+ <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
380
+ <i class="fas fa-database text-xl"></i>
381
+ </div>
382
+ <div class="text-sm font-medium">Base de Données</div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="mt-8 grid grid-cols-3 gap-4">
387
+ <div class="bg-indigo-50 p-3 rounded">
388
+ <div class="text-indigo-800 font-medium mb-2">Frontend</div>
389
+ <ul class="text-xs space-y-1">
390
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> React.js</li>
391
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Redux</li>
392
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> TailwindCSS</li>
393
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Axios</li>
394
+ </ul>
395
+ </div>
396
+ <div class="bg-green-50 p-3 rounded">
397
+ <div class="text-green-800 font-medium mb-2">Backend</div>
398
+ <ul class="text-xs space-y-1">
399
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Node.js</li>
400
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Express</li>
401
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> JWT Auth</li>
402
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> API Docs</li>
403
+ </ul>
404
+ </div>
405
+ <div class="bg-blue-50 p-3 rounded">
406
+ <div class="text-blue-800 font-medium mb-2">Base de données</div>
407
+ <ul class="text-xs space-y-1">
408
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> MongoDB</li>
409
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mongoose</li>
410
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Schémas prédéfinis</li>
411
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Indexation</li>
412
+ </ul>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="mb-6">
418
+ <h3 class="text-md font-medium text-gray-900 mb-3">Zone de construction</h3>
419
+ <div id="drop-zone" class="drop-zone border-2 border-dashed border-gray-300 rounded-lg p-6">
420
+ <div class="text-center text-gray-500">
421
+ <i class="fas fa-arrow-down text-2xl mb-2"></i>
422
+ <p>Glissez-déposez des composants ici</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="mb-6">
428
+ <h3 class="text-md font-medium text-gray-900 mb-3">Aperçu du code généré</h3>
429
+ <div class="code-block p-4 text-sm">
430
+ <div class="flex border-b border-gray-700 pb-2 mb-2">
431
+ <button class="text-gray-300 hover:text-white mr-4">server.js</button>
432
+ <button class="text-gray-300 hover:text-white mr-4">routes.js</button>
433
+ <button class="text-gray-300 hover:text-white mr-4">models.js</button>
434
+ <button class="text-indigo-400 hover:text-indigo-300">App.jsx</button>
435
+ </div>
436
+ <pre class="overflow-x-auto"><code class="language-javascript">import React from 'react';
437
+ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
438
+ import { Provider } from 'react-redux';
439
+ import store from './store';
440
+
441
+ // Components
442
+ import Navbar from './components/Navbar';
443
+ import Dashboard from './pages/Dashboard';
444
+ import UserProfile from './pages/UserProfile';
445
+ import Login from './pages/Login';
446
+ import Register from './pages/Register';
447
+
448
+ function App() {
449
+ return (
450
+ &lt;Provider store={store}&gt;
451
+ &lt;Router&gt;
452
+ &lt;div className="App"&gt;
453
+ &lt;Navbar /&gt;
454
+ &lt;div className="container mx-auto px-4"&gt;
455
+ &lt;Switch&gt;
456
+ &lt;Route exact path="/" component={Dashboard} /&gt;
457
+ &lt;Route path="/profile" component={UserProfile} /&gt;
458
+ &lt;Route path="/login" component={Login} /&gt;
459
+ &lt;Route path="/register" component={Register} /&gt;
460
+ &lt;/Switch&gt;
461
+ &lt;/div&gt;
462
+ &lt;/div&gt;
463
+ &lt;/Router&gt;
464
+ &lt;/Provider&gt;
465
+ );
466
+ }
467
+
468
+ export default App;</code></pre>
469
+ </div>
470
+ </div>
471
+
472
+ <div>
473
+ <h3 class="text-md font-medium text-gray-900 mb-3">Aperçu de l'application</h3>
474
+ <div class="preview-frame w-full h-96 rounded-lg overflow-hidden">
475
+ <div class="h-full flex items-center justify-center bg-gray-100">
476
+ <div class="text-center p-6">
477
+ <i class="fas fa-laptop-code text-4xl text-gray-400 mb-4"></i>
478
+ <h4 class="text-lg font-medium text-gray-700">Aperçu de l'application</h4>
479
+ <p class="text-gray-500 mt-2">L'aperçu sera généré ici après configuration</p>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Features Section -->
492
+ <div id="features" class="bg-white py-16">
493
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
494
+ <div class="lg:text-center">
495
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Fonctionnalités</h2>
496
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
497
+ Tout ce dont vous avez besoin pour des applications professionnelles
498
+ </p>
499
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
500
+ Notre générateur produit du code de qualité professionnelle avec les meilleures pratiques du secteur.
501
+ </p>
502
+ </div>
503
+
504
+ <div class="mt-20">
505
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
506
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
507
+ <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
508
+ <i class="fas fa-shield-alt text-xl"></i>
509
+ </div>
510
+ <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Sécurité intégrée</h3>
511
+ <p class="text-gray-500">
512
+ Authentification JWT, validation des entrées, protection CSRF, et plus encore intégrés directement dans le code généré.
513
+ </p>
514
+ </div>
515
+
516
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
517
+ <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
518
+ <i class="fas fa-layer-group text-xl"></i>
519
+ </div>
520
+ <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Architecture modulaire</h3>
521
+ <p class="text-gray-500">
522
+ Structure de projet claire avec séparation des préoccupations pour une maintenance et une évolutivité faciles.
523
+ </p>
524
+ </div>
525
+
526
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
527
+ <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
528
+ <i class="fas fa-tachometer-alt text-xl"></i>
529
+ </div>
530
+ <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Optimisation des performances</h3>
531
+ <p class="text-gray-500">
532
+ Code optimisé avec lazy loading, mise en cache, pagination et autres techniques pour des applications rapides.
533
+ </p>
534
+ </div>
535
+
536
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
537
+ <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
538
+ <i class="fas fa-mobile-alt text-xl"></i>
539
+ </div>
540
+ <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Design responsive</h3>
541
+ <p class="text-gray-500">
542
+ Interfaces qui s'adaptent parfaitement à tous les appareils, du mobile au desktop.
543
+ </p>
544
+ </div>
545
+
546
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
547
+ <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
548
+ <i class="fas fa-database text-xl"></i>
549
+ </div>
550
+ <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Schémas de base de données</h3>
551
+ <p class="text-gray-500">
552
+ Modèles prédéfinis pour les utilisateurs, les produits, les commandes et plus encore, avec relations et validation.
553
+ </p>
554
+ </div>
555
+
556
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
557
+ <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
558
+ <i class="fas fa-code-branch text-xl"></i>
559
+ </div>
560
+ <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Intégration continue</h3>
561
+ <p class="text-gray-500">
562
+ Configuration CI/CD prête à l'emploi pour GitHub Actions, GitLab CI ou autres plateformes.
563
+ </p>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- Templates Section -->
571
+ <div class="bg-gray-50 py-16">
572
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
573
+ <div class="text-center">
574
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
575
+ <span class="block">Templates professionnels</span>
576
+ </h2>
577
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
578
+ Choisissez parmi nos templates optimisés pour différents cas d'utilisation professionnels.
579
+ </p>
580
+ </div>
581
+
582
+ <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
583
+ <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
584
+ <div class="flex-shrink-0">
585
+ <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
586
+ </div>
587
+ <div class="flex-1 bg-white p-6 flex flex-col justify-between">
588
+ <div class="flex-1">
589
+ <p class="text-sm font-medium text-indigo-600">
590
+ SaaS
591
+ </p>
592
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">
593
+ Plateforme SaaS complète
594
+ </h3>
595
+ <p class="mt-3 text-base text-gray-500">
596
+ Tout ce dont vous avez besoin pour une application SaaS avec abonnements, facturation et tableau de bord analytique.
597
+ </p>
598
+ </div>
599
+ <div class="mt-6 flex items-center">
600
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium">
601
+ <i class="fas fa-eye mr-2"></i> Prévisualiser
602
+ </button>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
608
+ <div class="flex-shrink-0">
609
+ <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
610
+ </div>
611
+ <div class="flex-1 bg-white p-6 flex flex-col justify-between">
612
+ <div class="flex-1">
613
+ <p class="text-sm font-medium text-indigo-600">
614
+ E-commerce
615
+ </p>
616
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">
617
+ Solution e-commerce avancée
618
+ </h3>
619
+ <p class="mt-3 text-base text-gray-500">
620
+ Panier, passerelle de paiement, gestion des produits et système de recommandation intégrés.
621
+ </p>
622
+ </div>
623
+ <div class="mt-6 flex items-center">
624
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium">
625
+ <i class="fas fa-eye mr-2"></i> Prévisualiser
626
+ </button>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
632
+ <div class="flex-shrink-0">
633
+ <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" alt="">
634
+ </div>
635
+ <div class="flex-1 bg-white p-6 flex flex-col justify-between">
636
+ <div class="flex-1">
637
+ <p class="text-sm font-medium text-indigo-600">
638
+ CRM
639
+ </p>
640
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">
641
+ Système de gestion de la relation client
642
+ </h3>
643
+ <p class="mt-3 text-base text-gray-500">
644
+ Gestion des contacts, pipeline de vente, automatisation du marketing et rapports analytiques.
645
+ </p>
646
+ </div>
647
+ <div class="mt-6 flex items-center">
648
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium">
649
+ <i class="fas fa-eye mr-2"></i> Prévisualiser
650
+ </button>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+
658
+ <!-- Testimonials -->
659
+ <div class="bg-white py-16">
660
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
661
+ <div class="lg:text-center">
662
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Témoignages</h2>
663
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
664
+ Ce que disent nos clients
665
+ </p>
666
+ </div>
667
+
668
+ <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3">
669
+ <div class="bg-gray-50 p-6 rounded-lg">
670
+ <div class="flex items-center mb-4">
671
+ <div class="flex-shrink-0">
672
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=164&q=80" alt="">
673
+ </div>
674
+ <div class="ml-3">
675
+ <p class="text-sm font-medium text-gray-900">Marie Dupont</p>
676
+ <p class="text-sm text-gray-500">CTO, TechSolutions</p>
677
+ </div>
678
+ </div>
679
+ <p class="text-gray-600 italic">
680
+ "Nous avons réduit notre temps de développement de 60% grâce à AppGen Pro. Le code généré est propre, bien structuré et facile à maintenir."
681
+ </p>
682
+ </div>
683
+
684
+ <div class="bg-gray-50 p-6 rounded-lg">
685
+ <div class="flex items-center mb-4">
686
+ <div class="flex-shrink-0">
687
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=164&q=80" alt="">
688
+ </div>
689
+ <div class="ml-3">
690
+ <p class="text-sm font-medium text-gray-900">Jean Martin</p>
691
+ <p class="text-sm text-gray-500">Développeur Full-Stack</p>
692
+ </div>
693
+ </div>
694
+ <p class="text-gray-600 italic">
695
+ "En tant que développeur solo, AppGen Pro m'a permis de créer une application complexe en quelques jours au lieu de plusieurs semaines."
696
+ </p>
697
+ </div>
698
+
699
+ <div class="bg-gray-50 p-6 rounded-lg">
700
+ <div class="flex items-center mb-4">
701
+ <div class="flex-shrink-0">
702
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=164&q=80" alt="">
703
+ </div>
704
+ <div class="ml-3">
705
+ <p class="text-sm font-medium text-gray-900">Thomas Leroy</p>
706
+ <p class="text-sm text-gray-500">PDG, StartupXYZ</p>
707
+ </div>
708
+ </div>
709
+ <p class="text-gray-600 italic">
710
+ "Nous avons pu lancer notre MVP en un temps record et attirer nos premiers investisseurs grâce à la qualité professionnelle de notre application générée."
711
+ </p>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <!-- CTA Section -->
718
+ <div class="gradient-bg">
719
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
720
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
721
+ <span class="block">Prêt à créer votre application professionnelle?</span>
722
+ <span class="block text-indigo-200">Commencez gratuitement dès aujourd'hui.</span>
723
+ </h2>
724
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
725
+ <div class="inline-flex rounded-md shadow">
726
+ <a href="#generator" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
727
+ <i class="fas fa-play mr-2"></i> Essayer maintenant
728
+ </a>
729
+ </div>
730
+ <div class="ml-3 inline-flex">
731
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70">
732
+ <i class="fas fa-book mr-2"></i> Documentation
733
+ </a>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- Footer -->
740
+ <footer class="bg-gray-800">
741
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
742
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
743
+ <div>
744
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Produit</h3>
745
+ <ul class="mt-4 space-y-4">
746
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Fonctionnalités</a></li>
747
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Templates</a></li>
748
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Tarifs</a></li>
749
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li>
750
+ </ul>
751
+ </div>
752
+ <div>
753
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3>
754
+ <ul class="mt-4 space-y-4">
755
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li>
756
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
757
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li>
758
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Partenaires</a></li>
759
+ </ul>
760
+ </div>
761
+ <div>
762
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
763
+ <ul class="mt-4 space-y-4">
764
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
765
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
766
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Status</a></li>
767
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
768
+ </ul>
769
+ </div>
770
+ <div>
771
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Légal</h3>
772
+ <ul class="mt-4 space-y-4">
773
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Confidentialité</a></li>
774
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">CGU</a></li>
775
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Licences</a></li>
776
+ </ul>
777
+ </div>
778
+ </div>
779
+ <div class="mt-12 border-t border-gray-700 pt-8 flex justify-between">
780
+ <p class="text-base text-gray-400">&copy; 2023 AppGen Pro. Tous droits réservés.</p>
781
+ <div class="flex space-x-6">
782
+ <a href="#" class="text-gray-400 hover:text-white">
783
+ <i class="fab fa-twitter text-xl"></i>
784
+ </a>
785
+ <a href="#" class="text-gray-400 hover:text-white">
786
+ <i class="fab fa-github text-xl"></i>
787
+ </a>
788
+ <a href="#" class="text-gray-400 hover:text-white">
789
+ <i class="fab fa-linkedin text-xl"></i>
790
+ </a>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </footer>
795
+
796
+ <!-- Generation Modal -->
797
+ <div id="generation-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
798
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
799
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
800
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
801
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
802
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
803
+ <div class="sm:flex sm:items-start">
804
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
805
+ <i class="fas fa-cog text-indigo-600 animate-spin"></i>
806
+ </div>
807
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
808
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
809
+ Génération de votre application
810
+ </h3>
811
+ <div class="mt-2">
812
+ <p class="text-sm text-gray-500">
813
+ Votre application professionnelle est en cours de génération. Cette opération peut prendre quelques instants.
814
+ </p>
815
+ <div class="mt-4">
816
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
817
+ <div id="generation-progress" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
818
+ </div>
819
+ <p id="generation-status" class="text-xs text-gray-500 mt-1">Initialisation...</p>
820
+ </div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
826
+ <button type="button" id="cancel-generation" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
827
+ Annuler
828
+ </button>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+
834
+ <!-- Success Modal -->
835
+ <div id="success-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
836
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
837
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
838
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
839
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
840
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
841
+ <div class="sm:flex sm:items-start">
842
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
843
+ <i class="fas fa-check text-green-600"></i>
844
+ </div>
845
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
846
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
847
+ Génération terminée avec succès!
848
+ </h3>
849
+ <div class="mt-2">
850
+ <p class="text-sm text-gray-500">
851
+ Votre application professionnelle a été générée avec succès. Vous pouvez maintenant télécharger le code source ou le déployer directement.
852
+ </p>
853
+ </div>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
858
+ <button type="button" id="download-code" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:ml-3 sm:w-auto sm:text-sm">
859
+ <i class="fas fa-download mr-2"></i> Télécharger le code
860
+ </button>
861
+ <button type="button" id="deploy-now" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
862
+ <i class="fas fa-cloud-upload-alt mr-2"></i> Déployer maintenant
863
+ </button>
864
+ </div>
865
+ </div>
866
+ </div>
867
+ </div>
868
+
869
+ <script>
870
+ // Mobile menu toggle
871
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
872
+ const menu = document.getElementById('mobile-menu');
873
+ menu.classList.toggle('hidden');
874
+ });
875
+
876
+ // Drag and drop functionality
877
+ const draggableItems = document.querySelectorAll('.draggable-item');
878
+ const dropZone = document.getElementById('drop-zone');
879
+
880
+ draggableItems.forEach(item => {
881
+ item.addEventListener('dragstart', function(e) {
882
+ e.dataTransfer.setData('text/plain', this.dataset.component);
883
+ this.classList.add('opacity-50');
884
+ });
885
+
886
+ item.addEventListener('dragend', function() {
887
+ this.classList.remove('opacity-50');
888
+ });
889
+ });
890
+
891
+ dropZone.addEventListener('dragover', function(e) {
892
+ e.preventDefault();
893
+ this.classList.add('highlight');
894
+ });
895
+
896
+ dropZone.addEventListener('dragleave', function() {
897
+ this.classList.remove('highlight');
898
+ });
899
+
900
+ dropZone.addEventListener('drop', function(e) {
901
+ e.preventDefault();
902
+ this.classList.remove('highlight');
903
+
904
+ const componentType = e.dataTransfer.getData('text/plain');
905
+ const componentName = getComponentName(componentType);
906
+
907
+ this.innerHTML = `
908
+ <div class="bg-indigo-50 p-4 rounded border border-indigo-100">
909
+ <div class="flex items-center">
910
+ <div class="flex-shrink-0 bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center">
911
+ <i class="fas ${getComponentIcon(componentType)}"></i>
912
+ </div>
913
+ <div class="ml-3">
914
+ <h4 class="text-sm font-medium text-indigo-800">${componentName}</h4>
915
+ <p class="text-xs text-indigo-600">Composant ajouté</p>
916
+ </div>
917
+ </div>
918
+ </div>
919
+ `;
920
+ });
921
+
922
+ function getComponentName(type) {
923
+ const names = {
924
+ 'user-profile': 'Profil utilisateur',
925
+ 'dashboard': 'Tableau de bord',
926
+ 'data-table': 'Tableau de données',
927
+ 'calendar': 'Calendrier',
928
+ 'chat': 'Chat en direct',
929
+ 'payment': 'Paiements',
930
+ 'maps': 'Cartes',
931
+ 'analytics': 'Analytiques'
932
+ };
933
+ return names[type] || 'Composant';
934
+ }
935
+
936
+ function getComponentIcon(type) {
937
+ const icons = {
938
+ 'user-profile': 'fa-user-circle',
939
+ 'dashboard': 'fa-tachometer-alt',
940
+ 'data-table': 'fa-table',
941
+ 'calendar': 'fa-calendar-alt',
942
+ 'chat': 'fa-comments',
943
+ 'payment': 'fa-credit-card',
944
+ 'maps': 'fa-map-marked-alt',
945
+ 'analytics': 'fa-chart-line'
946
+ };
947
+ return icons[type] || 'fa-cube';
948
+ }
949
+
950
+ // Generation process simulation
951
+ document.getElementById('generate-btn').addEventListener('click', function() {
952
+ const modal = document.getElementById('generation-modal');
953
+ modal.classList.remove('hidden');
954
+
955
+ // Simulate generation progress
956
+ const progressBar = document.getElementById('generation-progress');
957
+ const statusText = document.getElementById('generation-status');
958
+
959
+ let progress = 0;
960
+ const interval = setInterval(() => {
961
+ progress += Math.floor(Math.random() * 10) + 5;
962
+ if (progress > 100) progress = 100;
963
+
964
+ progressBar.style.width = `${progress}%`;
965
+
966
+ if (progress < 30) {
967
+ statusText.textContent = "Création de la structure du projet...";
968
+ } else if (progress < 60) {
969
+ statusText.textContent = "Génération des composants principaux...";
970
+ } else if (progress < 90) {
971
+ statusText.textContent = "Configuration des services backend...";
972
+ } else {
973
+ statusText.textContent = "Finalisation et optimisation...";
974
+ }
975
+
976
+ if (progress === 100) {
977
+ clearInterval(interval);
978
+ setTimeout(() => {
979
+ modal.classList.add('hidden');
980
+ document.getElementById('success-modal').classList.remove('hidden');
981
+ }, 500);
982
+ }
983
+ }, 300);
984
+
985
+ document.getElementById('cancel-generation').addEventListener('click', function() {
986
+ clearInterval(interval);
987
+ modal.classList.add('hidden');
988
+ }, { once: true });
989
+ });
990
+
991
+ // Success modal buttons
992
+ document.getElementById('download-code').addEventListener('click', function() {
993
+ alert('Le téléchargement du code va commencer. Merci d\'utiliser AppGen Pro!');
994
+ document.getElementById('success-modal').classList.add('hidden');
995
+ });
996
+
997
+ document.getElementById('deploy-now').addEventListener('click', function() {
998
+ alert('Redirection vers les options de déploiement...');
999
+ document.getElementById('success-modal').classList.add('hidden');
1000
+ });
1001
+
1002
+ // Smooth scrolling for anchor links
1003
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1004
+ anchor.addEventListener('click', function (e) {
1005
+ e.preventDefault();
1006
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1007
+ behavior: 'smooth'
1008
+ });
1009
+ });
1010
+ });
1011
+
1012
+ // Tooltip functionality
1013
+ const tooltips = document.querySelectorAll('.tooltip');
1014
+ tooltips.forEach(tooltip => {
1015
+ tooltip.addEventListener('mouseenter', function() {
1016
+ const tooltipText = this.querySelector('.tooltip-text');
1017
+ tooltipText.classList.remove('invisible', 'opacity-0');
1018
+ tooltipText.classList.add('visible', 'opacity-100');
1019
+ });
1020
+
1021
+ tooltip.addEventListener('mouseleave', function() {
1022
+ const tooltipText = this.querySelector('.tooltip-text');
1023
+ tooltipText.classList.remove('visible', 'opacity-100');
1024
+ tooltipText.classList.add('invisible', 'opacity-0');
1025
+ });
1026
+ });
1027
+
1028
+ // Feature cards animation
1029
+ const featureCards = document.querySelectorAll('.feature-card');
1030
+ featureCards.forEach(card => {
1031
+ card.addEventListener('mouseenter', function() {
1032
+ this.style.transform = 'translateY(-5px)';
1033
+ });
1034
+
1035
+ card.addEventListener('mouseleave', function() {
1036
+ this.style.transform = '';
1037
+ });
1038
+ });
1039
+
1040
+ // Toggle switches
1041
+ const toggleSwitches = document.querySelectorAll('.toggle-checkbox');
1042
+ toggleSwitches.forEach(toggle => {
1043
+ toggle.addEventListener('change', function() {
1044
+ const label = document.querySelector(`.toggle-label[for="${this.id}"]`);
1045
+ if (this.checked) {
1046
+ label.classList.add('bg-indigo-200');
1047
+ } else {
1048
+ label.classList.remove('bg-indigo-200');
1049
+ }
1050
+ });
1051
+ });
1052
+ </script>
1053
+ <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-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1054
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Générateur de sites complexes 1500+ lignes de code Créez des applications web complètes avec architecture professionnelle en quelques clics , pas de site vitrine que des site pro