Hugging Face's logo

Spaces:
docto41
/
autopilote
Running

App Files Community
docto41 commited on
Commit
101d044
·
verified ·
1 Parent(s): 326989e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1079 -19
  3. prompts.txt +12 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Autopilote
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: autopilote
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
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,1079 @@
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>AutoSite Pro 3.0 - Création Automatique Intelligente</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
+ @keyframes pulse {
11
+ 0% { transform: scale(1); }
12
+ 50% { transform: scale(1.05); }
13
+ 100% { transform: scale(1); }
14
+ }
15
+ @keyframes float {
16
+ 0% { transform: translateY(0px); }
17
+ 50% { transform: translateY(-8px); }
18
+ 100% { transform: translateY(0px); }
19
+ }
20
+ @keyframes progress-pulse {
21
+ 0% { opacity: 1; }
22
+ 50% { opacity: 0.5; }
23
+ 100% { opacity: 1; }
24
+ }
25
+
26
+ .auto-badge {
27
+ animation: pulse 2s infinite;
28
+ }
29
+ .floating-icon {
30
+ animation: float 3s ease-in-out infinite;
31
+ }
32
+ .progress-pulse {
33
+ animation: progress-pulse 1.5s infinite;
34
+ }
35
+ .ai-generated {
36
+ background: linear-gradient(90deg, #f0f9ff, #e0f2fe);
37
+ border-left: 4px solid #38bdf8;
38
+ }
39
+ .progress-step.active {
40
+ background-color: #2563eb;
41
+ color: white;
42
+ }
43
+ .progress-step.completed {
44
+ background-color: #10b981;
45
+ color: white;
46
+ }
47
+ #auto-progress-bar {
48
+ transition: width 0.5s ease;
49
+ }
50
+ .tech-badge {
51
+ transition: all 0.3s ease;
52
+ }
53
+ .tech-badge:hover {
54
+ transform: translateY(-2px);
55
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
56
+ }
57
+ .auto-site-item:hover {
58
+ background-color: #f8fafc;
59
+ transform: translateX(4px);
60
+ }
61
+ .auto-site-item {
62
+ transition: all 0.3s ease;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-gray-50 font-sans">
67
+ <!-- Header amélioré -->
68
+ <header class="bg-white shadow-sm sticky top-0 z-10">
69
+ <div class="container mx-auto px-4 py-3">
70
+ <div class="flex justify-between items-center">
71
+ <div class="flex items-center space-x-3">
72
+ <i class="fas fa-robot text-3xl text-blue-600 floating-icon"></i>
73
+ <h1 class="text-2xl font-bold text-gray-800">Auto<span class="text-blue-600">Site</span> Pro <span class="text-xs bg-gradient-to-r from-blue-600 to-blue-400 text-white px-2 py-1 rounded-full">3.0</span></h1>
74
+ </div>
75
+ <div class="flex items-center space-x-3">
76
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full auto-badge flex items-center">
77
+ <i class="fas fa-plug text-xs mr-1"></i> API Connectée
78
+ </span>
79
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full auto-badge flex items-center">
80
+ <i class="fas fa-brain text-xs mr-1"></i> IA Active
81
+ </span>
82
+ <button class="hidden md:flex items-center space-x-1 bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm transition-colors">
83
+ <i class="fas fa-user-circle"></i>
84
+ <span>Admin</span>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Processus Auto-Pilote amélioré -->
92
+ <section class="py-12 bg-white">
93
+ <div class="container mx-auto px-4">
94
+ <div class="max-w-6xl mx-auto bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-200 rounded-xl p-8 shadow-sm">
95
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
96
+ <div>
97
+ <h2 class="text-3xl font-bold mb-2 text-gray-800">Mode Auto-Pilote 3.0</h2>
98
+ <p class="text-gray-600 max-w-lg">Création intelligente de site web avec optimisation automatique et gestion simplifiée.</p>
99
+ </div>
100
+ <div class="flex space-x-2 w-full md:w-auto">
101
+ <button id="pause-btn" class="flex-1 md:flex-none bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-lg text-sm flex items-center justify-center transition-colors">
102
+ <i class="fas fa-pause mr-2"></i> <span class="hidden sm:inline">Pause</span>
103
+ </button>
104
+ <button id="speed-btn" class="flex-1 md:flex-none bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg text-sm flex items-center justify-center transition-colors">
105
+ <i class="fas fa-bolt mr-2"></i> <span class="hidden sm:inline">Vitesse x2</span>
106
+ </button>
107
+ <button id="help-btn" class="flex-1 md:flex-none bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm flex items-center justify-center transition-colors">
108
+ <i class="fas fa-question mr-2"></i> <span class="hidden sm:inline">Aide</span>
109
+ </button>
110
+ </div>
111
+ </div>
112
+
113
+ <div id="auto-pilot-process">
114
+ <!-- Barre de progression améliorée -->
115
+ <div class="relative mb-12">
116
+ <div class="flex justify-between relative">
117
+ <div class="absolute top-1/2 h-2 bg-gray-200 w-full -z-10 rounded-full"></div>
118
+ <div id="auto-progress-bar" class="absolute top-1/2 h-2 bg-gradient-to-r from-blue-500 to-blue-600 -z-10 rounded-full" style="width: 0%"></div>
119
+
120
+ <!-- Étapes du processus -->
121
+ <div class="progress-step active flex flex-col items-center" id="auto-step1">
122
+ <div class="w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center mb-2 shadow-md">
123
+ <i class="fas fa-search"></i>
124
+ </div>
125
+ <span class="text-sm font-medium">Analyse</span>
126
+ <span class="text-xs text-gray-500 mt-1">En cours</span>
127
+ </div>
128
+ <div class="progress-step flex flex-col items-center" id="auto-step2">
129
+ <div class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
130
+ <i class="fas fa-globe"></i>
131
+ </div>
132
+ <span class="text-sm font-medium">Domaine</span>
133
+ </div>
134
+ <div class="progress-step flex flex-col items-center" id="auto-step3">
135
+ <div class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
136
+ <i class="fas fa-file-contract"></i>
137
+ </div>
138
+ <span class="text-sm font-medium">ICANN</span>
139
+ </div>
140
+ <div class="progress-step flex flex-col items-center" id="auto-step4">
141
+ <div class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
142
+ <i class="fas fa-server"></i>
143
+ </div>
144
+ <span class="text-sm font-medium">Hébergement</span>
145
+ </div>
146
+ <div class="progress-step flex flex-col items-center" id="auto-step5">
147
+ <div class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
148
+ <i class="fas fa-paint-brush"></i>
149
+ </div>
150
+ <span class="text-sm font-medium">Design</span>
151
+ </div>
152
+ <div class="progress-step flex flex-col items-center" id="auto-step6">
153
+ <div class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
154
+ <i class="fas fa-robot"></i>
155
+ </div>
156
+ <span class="text-sm font-medium">Contenu IA</span>
157
+ </div>
158
+ <div class="progress-step flex flex-col items-center" id="auto-step7">
159
+ <div class="w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
160
+ <i class="fas fa-rocket"></i>
161
+ </div>
162
+ <span class="text-sm font-medium">Mise en ligne</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Contenu principal du processus -->
168
+ <div id="auto-creation-content" class="text-center">
169
+ <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner">
170
+ <i class="fas fa-cog text-blue-600 text-4xl animate-spin"></i>
171
+ </div>
172
+ <h3 class="text-2xl font-bold mb-3 text-gray-800" id="auto-status-message">Initialisation du mode auto-pilote</h3>
173
+ <p class="text-gray-600 mb-6 max-w-2xl mx-auto" id="auto-status-detail">Connexion aux services d'enregistrement de domaine et à l'API d'intelligence artificielle...</p>
174
+
175
+ <!-- Détails techniques améliorés -->
176
+ <div id="technical-details" class="ai-generated p-6 rounded-lg text-left max-w-4xl mx-auto mb-8 shadow-sm">
177
+ <h4 class="font-bold text-lg mb-4 flex items-center text-gray-800">
178
+ <i class="fas fa-brain text-purple-600 mr-3"></i> Détails techniques en temps réel :
179
+ </h4>
180
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
181
+ <div class="tech-badge bg-white p-3 rounded-lg border border-gray-200 shadow-xs">
182
+ <div class="flex items-center mb-1">
183
+ <i class="fas fa-network-wired text-blue-500 mr-2"></i>
184
+ <span class="font-medium">Serveurs DNS :</span>
185
+ </div>
186
+ <div class="text-sm text-gray-700" id="dns-info">ns1.autosite-pro.com</div>
187
+ </div>
188
+ <div class="tech-badge bg-white p-3 rounded-lg border border-gray-200 shadow-xs">
189
+ <div class="flex items-center mb-1">
190
+ <i class="fas fa-location-arrow text-green-500 mr-2"></i>
191
+ <span class="font-medium">Adresse IP :</span>
192
+ </div>
193
+ <div class="text-sm text-gray-700" id="ip-info">185.143.223.42</div>
194
+ </div>
195
+ <div class="tech-badge bg-white p-3 rounded-lg border border-gray-200 shadow-xs">
196
+ <div class="flex items-center mb-1">
197
+ <i class="fas fa-lock text-yellow-500 mr-2"></i>
198
+ <span class="font-medium">Certificat SSL :</span>
199
+ </div>
200
+ <div class="text-sm text-gray-700" id="ssl-info">Let's Encrypt</div>
201
+ </div>
202
+ <div class="tech-badge bg-white p-3 rounded-lg border border-gray-200 shadow-xs">
203
+ <div class="flex items-center mb-1">
204
+ <i class="fas fa-building text-red-500 mr-2"></i>
205
+ <span class="font-medium">Registrar :</span>
206
+ </div>
207
+ <div class="text-sm text-gray-700" id="registrar-info">ICANN Accredited</div>
208
+ </div>
209
+ <div class="tech-badge bg-white p-3 rounded-lg border border-gray-200 shadow-xs">
210
+ <div class="flex items-center mb-1">
211
+ <i class="fas fa-robot text-purple-500 mr-2"></i>
212
+ <span class="font-medium">Modèle IA :</span>
213
+ </div>
214
+ <div class="text-sm text-gray-700" id="ai-model">GPT-4 Turbo</div>
215
+ </div>
216
+ <div class="tech-badge bg-white p-3 rounded-lg border border-gray-200 shadow-xs">
217
+ <div class="flex items-center mb-1">
218
+ <i class="fas fa-palette text-pink-500 mr-2"></i>
219
+ <span class="font-medium">Style Design :</span>
220
+ </div>
221
+ <div class="text-sm text-gray-700" id="design-style">Modern Minimalist</div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Prévisualisation du contenu IA améliorée -->
227
+ <div id="ai-content-preview" class="hidden bg-white border border-gray-200 rounded-xl p-6 max-w-4xl mx-auto shadow-sm mb-8">
228
+ <div class="flex justify-between items-start mb-4">
229
+ <h4 class="font-bold text-xl flex items-center text-gray-800">
230
+ <i class="fas fa-robot text-purple-600 mr-3"></i> Contenu Généré Automatiquement
231
+ </h4>
232
+ <div class="flex space-x-2">
233
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Nouveau</span>
234
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">SEO 95%</span>
235
+ </div>
236
+ </div>
237
+ <div class="mb-6">
238
+ <h5 class="font-medium text-blue-600 text-lg mb-3 flex items-center" id="ai-page-title">
239
+ <i class="fas fa-home mr-2"></i> Page d'Accueil
240
+ </h5>
241
+ <p class="text-gray-700 leading-relaxed" id="ai-page-content">
242
+ Notre entreprise offre des solutions professionnelles innovantes adaptées à vos besoins spécifiques.
243
+ Avec une équipe d'experts dédiés, nous transformons vos idées en réalité numérique grâce à des
244
+ technologies de pointe et une approche centrée sur l'utilisateur.
245
+ </p>
246
+ </div>
247
+ <div class="flex flex-wrap gap-3 justify-center">
248
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
249
+ <i class="fas fa-check mr-2"></i> Valider
250
+ </button>
251
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex items-center transition-colors">
252
+ <i class="fas fa-redo mr-2"></i> Régénérer
253
+ </button>
254
+ <button class="bg-green-100 hover:bg-green-200 text-green-800 px-4 py-2 rounded-lg flex items-center transition-colors">
255
+ <i class="fas fa-edit mr-2"></i> Modifier
256
+ </button>
257
+ <button class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded-lg flex items-center transition-colors">
258
+ <i class="fas fa-expand mr-2"></i> Prévisualiser
259
+ </button>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Section de complétion améliorée -->
266
+ <div id="completed-site" class="hidden mt-8 animate-fade-in">
267
+ <div class="bg-white border border-gray-200 rounded-xl p-8 max-w-4xl mx-auto shadow-sm">
268
+ <div class="text-center mb-8">
269
+ <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner">
270
+ <i class="fas fa-check-circle text-green-600 text-5xl"></i>
271
+ </div>
272
+ <h3 class="text-3xl font-bold text-gray-800 mb-2">Site professionnel créé avec succès!</h3>
273
+ <p class="text-gray-600 max-w-2xl mx-auto">Tous les éléments ont été configurés automatiquement et optimisés pour une performance maximale.</p>
274
+ </div>
275
+
276
+ <div class="mb-8">
277
+ <div class="font-mono bg-gray-50 p-6 rounded-xl border border-gray-200 text-center shadow-xs">
278
+ <div class="text-2xl font-bold text-blue-600 mb-2" id="final-domain-url">entreprise-pro-auto.com</div>
279
+ <div class="flex justify-center space-x-4 mt-4">
280
+ <a href="#" class="text-blue-600 hover:text-blue-800 flex items-center text-sm">
281
+ <i class="fas fa-external-link-alt mr-2"></i> Visiter le site
282
+ </a>
283
+ <a href="#" class="text-green-600 hover:text-green-800 flex items-center text-sm">
284
+ <i class="fas fa-cog mr-2"></i> Administrer
285
+ </a>
286
+ <a href="#" class="text-purple-600 hover:text-purple-800 flex items-center text-sm">
287
+ <i class="fas fa-chart-line mr-2"></i> Statistiques
288
+ </a>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
294
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 shadow-xs hover:shadow-sm transition-shadow">
295
+ <div class="text-blue-600 text-xl mb-3"><i class="fas fa-globe"></i></div>
296
+ <h4 class="font-bold text-sm mb-1">Domaine enregistré</h4>
297
+ <p class="text-xs text-gray-600 mb-2" id="domain-expiry">Expire le 12/06/2024</p>
298
+ <div class="w-full bg-gray-200 rounded-full h-1">
299
+ <div class="bg-blue-600 h-1 rounded-full" style="width: 100%"></div>
300
+ </div>
301
+ </div>
302
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 shadow-xs hover:shadow-sm transition-shadow">
303
+ <div class="text-green-600 text-xl mb-3"><i class="fas fa-lock"></i></div>
304
+ <h4 class="font-bold text-sm mb-1">SSL Actif</h4>
305
+ <p class="text-xs text-gray-600 mb-2">HTTPS sécurisé</p>
306
+ <div class="w-full bg-gray-200 rounded-full h-1">
307
+ <div class="bg-green-600 h-1 rounded-full" style="width: 100%"></div>
308
+ </div>
309
+ </div>
310
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 shadow-xs hover:shadow-sm transition-shadow">
311
+ <div class="text-purple-600 text-xl mb-3"><i class="fas fa-robot"></i></div>
312
+ <h4 class="font-bold text-sm mb-1">Contenu IA</h4>
313
+ <p class="text-xs text-gray-600 mb-2">12 pages générées</p>
314
+ <div class="w-full bg-gray-200 rounded-full h-1">
315
+ <div class="bg-purple-600 h-1 rounded-full" style="width: 95%"></div>
316
+ </div>
317
+ </div>
318
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 shadow-xs hover:shadow-sm transition-shadow">
319
+ <div class="text-yellow-600 text-xl mb-3"><i class="fas fa-paint-brush"></i></div>
320
+ <h4 class="font-bold text-sm mb-1">Design</h4>
321
+ <p class="text-xs text-gray-600 mb-2">Moderne & Responsive</p>
322
+ <div class="w-full bg-gray-200 rounded-full h-1">
323
+ <div class="bg-yellow-600 h-1 rounded-full" style="width: 100%"></div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 mb-8 shadow-xs">
329
+ <h4 class="font-bold text-lg mb-4 flex items-center text-gray-800">
330
+ <i class="fas fa-chart-line text-blue-600 mr-3"></i> Statistiques de Performance
331
+ </h4>
332
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
333
+ <div class="p-3">
334
+ <div class="text-3xl font-bold text-blue-600 mb-1">98%</div>
335
+ <div class="text-sm text-gray-600 mb-2">Score SEO</div>
336
+ <div class="w-full bg-gray-200 rounded-full h-1">
337
+ <div class="bg-blue-600 h-1 rounded-full" style="width: 98%"></div>
338
+ </div>
339
+ </div>
340
+ <div class="p-3">
341
+ <div class="text-3xl font-bold text-green-600 mb-1">0.8s</div>
342
+ <div class="text-sm text-gray-600 mb-2">Temps chargement</div>
343
+ <div class="w-full bg-gray-200 rounded-full h-1">
344
+ <div class="bg-green-600 h-1 rounded-full" style="width: 100%"></div>
345
+ </div>
346
+ </div>
347
+ <div class="p-3">
348
+ <div class="text-3xl font-bold text-purple-600 mb-1">A+</div>
349
+ <div class="text-sm text-gray-600 mb-2">Sécurité</div>
350
+ <div class="w-full bg-gray-200 rounded-full h-1">
351
+ <div class="bg-purple-600 h-1 rounded-full" style="width: 100%"></div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
358
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center justify-center transition-colors">
359
+ <i class="fas fa-cog mr-3"></i> Paramètres Avancés
360
+ </button>
361
+ <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center justify-center transition-colors">
362
+ <i class="fas fa-plus mr-3"></i> Ajouter Fonctionnalité
363
+ </button>
364
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg flex items-center justify-center transition-colors">
365
+ <i class="fas fa-share-alt mr-3"></i> Partager
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </section>
373
+
374
+ <!-- Tableau de bord amélioré -->
375
+ <section class="py-12 bg-gray-50">
376
+ <div class="container mx-auto px-4">
377
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
378
+ <div>
379
+ <h2 class="text-3xl font-bold text-gray-800">Tableau de Bord Auto-Pilote</h2>
380
+ <p class="text-gray-600">Gestion de vos sites créés automatiquement</p>
381
+ </div>
382
+ <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3 w-full md:w-auto">
383
+ <div class="relative flex-1">
384
+ <select class="w-full bg-white border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
385
+ <option>Tous les sites</option>
386
+ <option>Aujourd'hui</option>
387
+ <option>Cette semaine</option>
388
+ <option>Ce mois</option>
389
+ <option>Archivés</option>
390
+ </select>
391
+ </div>
392
+ <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm flex items-center justify-center transition-colors">
393
+ <i class="fas fa-plus mr-2"></i> Nouveau Auto-Site
394
+ </button>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="max-w-6xl mx-auto">
399
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
400
+ <!-- En-tête du tableau -->
401
+ <div class="grid grid-cols-12 bg-gray-100 p-4 border-b border-gray-200 hidden sm:grid">
402
+ <div class="col-span-5 md:col-span-4 font-medium text-gray-700">Domaine</div>
403
+ <div class="col-span-2 font-medium text-gray-700">Date</div>
404
+ <div class="col-span-2 font-medium text-gray-700">Type</div>
405
+ <div class="col-span-1 font-medium text-gray-700">Statut</div>
406
+ <div class="col-span-1 font-medium text-gray-700">IA</div>
407
+ <div class="col-span-1 font-medium text-gray-700">Actions</div>
408
+ </div>
409
+
410
+ <!-- Liste des sites -->
411
+ <div id="auto-sites-list" class="divide-y divide-gray-200">
412
+ <!-- Rempli dynamiquement par JavaScript -->
413
+ </div>
414
+
415
+ <!-- Pied de tableau -->
416
+ <div class="p-4 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row justify-between items-center gap-4">
417
+ <span class="text-sm text-gray-600 flex items-center">
418
+ <i class="fas fa-sync-alt fa-spin mr-2 text-blue-500"></i> Synchronisation automatique
419
+ </span>
420
+ <div class="flex space-x-2">
421
+ <button class="bg-white border border-gray-300 px-4 py-2 rounded-lg text-sm hover:bg-gray-100 transition-colors">Précédent</button>
422
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors">Suivant</button>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </section>
429
+
430
+ <!-- Statistiques améliorées -->
431
+ <section class="py-12 bg-white">
432
+ <div class="container mx-auto px-4">
433
+ <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Statistiques Avancées</h2>
434
+
435
+ <!-- Cartes de statistiques -->
436
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
437
+ <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200 text-center shadow-xs hover:shadow-sm transition-shadow">
438
+ <div class="text-5xl font-bold text-blue-600 mb-3" id="total-sites">0</div>
439
+ <div class="text-gray-700 mb-2">Sites créés</div>
440
+ <div class="text-xs text-blue-500 flex items-center justify-center">
441
+ <i class="fas fa-arrow-up mr-1"></i> 12% ce mois
442
+ </div>
443
+ </div>
444
+ <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl border border-green-200 text-center shadow-xs hover:shadow-sm transition-shadow">
445
+ <div class="text-5xl font-bold text-green-600 mb-3" id="active-domains">0</div>
446
+ <div class="text-gray-700 mb-2">Domaines actifs</div>
447
+ <div class="text-xs text-green-500 flex items-center justify-center">
448
+ <i class="fas fa-check-circle mr-1"></i> 100% opérationnels
449
+ </div>
450
+ </div>
451
+ <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl border border-purple-200 text-center shadow-xs hover:shadow-sm transition-shadow">
452
+ <div class="text-5xl font-bold text-purple-600 mb-3" id="today-created">0</div>
453
+ <div class="text-gray-700 mb-2">Aujourd'hui</div>
454
+ <div class="text-xs text-purple-500 flex items-center justify-center">
455
+ <i class="fas fa-bolt mr-1"></i> 3 en cours
456
+ </div>
457
+ </div>
458
+ <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 p-6 rounded-xl border border-yellow-200 text-center shadow-xs hover:shadow-sm transition-shadow">
459
+ <div class="text-5xl font-bold text-yellow-600 mb-3" id="auto-process">0</div>
460
+ <div class="text-gray-700 mb-2">En cours</div>
461
+ <div class="text-xs text-yellow-500 flex items-center justify-center">
462
+ <i class="fas fa-cog fa-spin mr-1"></i> Traitement
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Graphique de répartition -->
468
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 shadow-sm">
469
+ <h3 class="text-xl font-bold mb-6 flex items-center text-gray-800">
470
+ <i class="fas fa-chart-pie text-blue-600 mr-3"></i> Répartition par Secteur
471
+ </h3>
472
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
473
+ <div>
474
+ <div class="flex justify-between items-center mb-2">
475
+ <span class="text-sm font-medium flex items-center">
476
+ <i class="fas fa-briefcase text-blue-500 mr-2"></i> Services Professionnels
477
+ </span>
478
+ <span class="text-sm font-bold text-blue-600">32%</span>
479
+ </div>
480
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
481
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 32%"></div>
482
+ </div>
483
+ </div>
484
+ <div>
485
+ <div class="flex justify-between items-center mb-2">
486
+ <span class="text-sm font-medium flex items-center">
487
+ <i class="fas fa-shopping-cart text-green-500 mr-2"></i> Commerce
488
+ </span>
489
+ <span class="text-sm font-bold text-green-600">24%</span>
490
+ </div>
491
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
492
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 24%"></div>
493
+ </div>
494
+ </div>
495
+ <div>
496
+ <div class="flex justify-between items-center mb-2">
497
+ <span class="text-sm font-medium flex items-center">
498
+ <i class="fas fa-heartbeat text-purple-500 mr-2"></i> Santé
499
+ </span>
500
+ <span class="text-sm font-bold text-purple-600">18%</span>
501
+ </div>
502
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
503
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 18%"></div>
504
+ </div>
505
+ </div>
506
+ <div>
507
+ <div class="flex justify-between items-center mb-2">
508
+ <span class="text-sm font-medium flex items-center">
509
+ <i class="fas fa-laptop-code text-yellow-500 mr-2"></i> Technologie
510
+ </span>
511
+ <span class="text-sm font-bold text-yellow-600">15%</span>
512
+ </div>
513
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
514
+ <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 15%"></div>
515
+ </div>
516
+ </div>
517
+ <div>
518
+ <div class="flex justify-between items-center mb-2">
519
+ <span class="text-sm font-medium flex items-center">
520
+ <i class="fas fa-ellipsis-h text-gray-500 mr-2"></i> Autres
521
+ </span>
522
+ <span class="text-sm font-bold text-gray-600">11%</span>
523
+ </div>
524
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
525
+ <div class="bg-gray-600 h-2.5 rounded-full" style="width: 11%"></div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </section>
532
+
533
+ <!-- Fonctionnalités améliorées -->
534
+ <section class="py-12 bg-gray-50">
535
+ <div class="container mx-auto px-4">
536
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Fonctionnalités Auto-Pilote</h2>
537
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-10">
538
+ Découvrez les technologies avancées qui automatisent la création de votre site web professionnel
539
+ </p>
540
+
541
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
542
+ <div class="bg-white p-8 rounded-xl border border-gray-200 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
543
+ <div class="text-blue-600 text-4xl mb-6">
544
+ <i class="fas fa-brain"></i>
545
+ </div>
546
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Génération de Contenu IA</h3>
547
+ <p class="text-gray-600 mb-6">
548
+ Notre IA avancée crée automatiquement du contenu optimisé SEO, adapté à votre secteur d'activité,
549
+ avec une analyse sémantique approfondie et une personnalisation basée sur vos objectifs.
550
+ </p>
551
+ <div class="flex flex-wrap gap-2">
552
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Français</span>
553
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">SEO</span>
554
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">GPT-4 Turbo</span>
555
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">Personnalisable</span>
556
+ </div>
557
+ </div>
558
+ <div class="bg-white p-8 rounded-xl border border-gray-200 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
559
+ <div class="text-green-600 text-4xl mb-6">
560
+ <i class="fas fa-paint-brush"></i>
561
+ </div>
562
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Design Adaptatif</h3>
563
+ <p class="text-gray-600 mb-6">
564
+ Sélection automatique du design optimal en fonction de votre secteur et des tendances actuelles,
565
+ avec une interface responsive qui s'adapte parfaitement à tous les appareils.
566
+ </p>
567
+ <div class="flex flex-wrap gap-2">
568
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Responsive</span>
569
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Moderne</span>
570
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">UI/UX</span>
571
+ <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Animations</span>
572
+ </div>
573
+ </div>
574
+ <div class="bg-white p-8 rounded-xl border border-gray-200 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
575
+ <div class="text-purple-600 text-4xl mb-6">
576
+ <i class="fas fa-chart-line"></i>
577
+ </div>
578
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Optimisation Automatique</h3>
579
+ <p class="text-gray-600 mb-6">
580
+ Analyse et amélioration continue des performances, SEO et sécurité sans intervention,
581
+ avec des rapports détaillés et des suggestions d'amélioration en temps réel.
582
+ </p>
583
+ <div class="flex flex-wrap gap-2">
584
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">SEO</span>
585
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Performance</span>
586
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Sécurité</span>
587
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Analytics</span>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <!-- Autres fonctionnalités -->
593
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
594
+ <div class="bg-white p-6 rounded-xl border border-gray-200 hover:shadow-md transition-shadow">
595
+ <div class="flex items-start">
596
+ <div class="text-red-500 text-2xl mr-4 mt-1">
597
+ <i class="fas fa-shield-alt"></i>
598
+ </div>
599
+ <div>
600
+ <h3 class="font-bold mb-2 text-gray-800">Sécurité Avancée</h3>
601
+ <p class="text-gray-600 text-sm">
602
+ Protection automatique contre les attaques avec firewall intégré,
603
+ sauvegardes quotidiennes et détection des vulnérabilités.
604
+ </p>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ <div class="bg-white p-6 rounded-xl border border-gray-200 hover:shadow-md transition-shadow">
609
+ <div class="flex items-start">
610
+ <div class="text-yellow-500 text-2xl mr-4 mt-1">
611
+ <i class="fas fa-mobile-alt"></i>
612
+ </div>
613
+ <div>
614
+ <h3 class="font-bold mb-2 text-gray-800">Mobile First</h3>
615
+ <p class="text-gray-600 text-sm">
616
+ Design optimisé pour mobile avec tests automatiques sur différents
617
+ appareils et résolutions d'écran.
618
+ </p>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ <div class="bg-white p-6 rounded-xl border border-gray-200 hover:shadow-md transition-shadow">
623
+ <div class="flex items-start">
624
+ <div class="text-blue-500 text-2xl mr-4 mt-1">
625
+ <i class="fas fa-language"></i>
626
+ </div>
627
+ <div>
628
+ <h3 class="font-bold mb-2 text-gray-800">Multilingue</h3>
629
+ <p class="text-gray-600 text-sm">
630
+ Traduction automatique dans plusieurs langues avec adaptation
631
+ culturelle pour un public international.
632
+ </p>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </section>
639
+
640
+ <!-- Footer amélioré -->
641
+ <footer class="bg-gray-900 text-gray-400 py-12">
642
+ <div class="container mx-auto px-4">
643
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
644
+ <div>
645
+ <div class="flex items-center mb-6">
646
+ <i class="fas fa-robot text-3xl text-blue-500 mr-3 floating-icon"></i>
647
+ <span class="text-xl font-bold text-white">Auto<span class="text-blue-400">Site</span> Pro 3.0</span>
648
+ </div>
649
+ <p class="mb-6 text-gray-400">
650
+ Solution intelligente pour création automatique de sites professionnels
651
+ avec IA intégrée et optimisation continue.
652
+ </p>
653
+ <div class="flex space-x-4">
654
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-lg">
655
+ <i class="fab fa-twitter"></i>
656
+ </a>
657
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-lg">
658
+ <i class="fab fa-linkedin-in"></i>
659
+ </a>
660
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-lg">
661
+ <i class="fab fa-github"></i>
662
+ </a>
663
+ <a href="#" class="text-gray-400 hover:text-white transition-colors text-lg">
664
+ <i class="fab fa-youtube"></i>
665
+ </a>
666
+ </div>
667
+ </div>
668
+ <div>
669
+ <h3 class="text-white font-bold text-lg mb-6">Technologie</h3>
670
+ <ul class="space-y-3">
671
+ <li>
672
+ <a href="#" class="hover:text-white transition-colors flex items-center">
673
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> IA Générative
674
+ </a>
675
+ </li>
676
+ <li>
677
+ <a href="#" class="hover:text-white transition-colors flex items-center">
678
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Hébergement Cloud
679
+ </a>
680
+ </li>
681
+ <li>
682
+ <a href="#" class="hover:text-white transition-colors flex items-center">
683
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Sécurité Avancée
684
+ </a>
685
+ </li>
686
+ <li>
687
+ <a href="#" class="hover:text-white transition-colors flex items-center">
688
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Optimisation SEO
689
+ </a>
690
+ </li>
691
+ <li>
692
+ <a href="#" class="hover:text-white transition-colors flex items-center">
693
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> CDN Global
694
+ </a>
695
+ </li>
696
+ </ul>
697
+ </div>
698
+ <div>
699
+ <h3 class="text-white font-bold text-lg mb-6">Ressources</h3>
700
+ <ul class="space-y-3">
701
+ <li>
702
+ <a href="#" class="hover:text-white transition-colors flex items-center">
703
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Documentation
704
+ </a>
705
+ </li>
706
+ <li>
707
+ <a href="#" class="hover:text-white transition-colors flex items-center">
708
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Blog
709
+ </a>
710
+ </li>
711
+ <li>
712
+ <a href="#" class="hover:text-white transition-colors flex items-center">
713
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Tutoriels
714
+ </a>
715
+ </li>
716
+ <li>
717
+ <a href="#" class="hover:text-white transition-colors flex items-center">
718
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> FAQ
719
+ </a>
720
+ </li>
721
+ <li>
722
+ <a href="#" class="hover:text-white transition-colors flex items-center">
723
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Support
724
+ </a>
725
+ </li>
726
+ </ul>
727
+ </div>
728
+ <div>
729
+ <h3 class="text-white font-bold text-lg mb-6">Légal</h3>
730
+ <ul class="space-y-3">
731
+ <li>
732
+ <a href="#" class="hover:text-white transition-colors flex items-center">
733
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Conditions ICANN
734
+ </a>
735
+ </li>
736
+ <li>
737
+ <a href="#" class="hover:text-white transition-colors flex items-center">
738
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Confidentialité
739
+ </a>
740
+ </li>
741
+ <li>
742
+ <a href="#" class="hover:text-white transition-colors flex items-center">
743
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> RGPD
744
+ </a>
745
+ </li>
746
+ <li>
747
+ <a href="#" class="hover:text-white transition-colors flex items-center">
748
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Mentions légales
749
+ </a>
750
+ </li>
751
+ <li>
752
+ <a href="#" class="hover:text-white transition-colors flex items-center">
753
+ <i class="fas fa-chevron-right text-xs text-blue-400 mr-3"></i> Cookies
754
+ </a>
755
+ </li>
756
+ </ul>
757
+ </div>
758
+ </div>
759
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
760
+ <p class="text-gray-400">© 2023 AutoSite Pro 3.0. Tous droits réservés.</p>
761
+ <p class="text-sm mt-2 text-gray-500">Enregistrement ICANN #987654 - SIRET 98765432100000</p>
762
+ </div>
763
+ </div>
764
+ </footer>
765
+
766
+ <script>
767
+ // Variables globales améliorées
768
+ let autoCreationInterval;
769
+ let currentAutoStep = 0;
770
+ let isPaused = false;
771
+ let speedMultiplier = 1;
772
+ const autoSteps = [
773
+ {icon: "fa-search", title: "Analyse du secteur", detail: "Identification des meilleures pratiques pour votre activité"},
774
+ {icon: "fa-globe", title: "Génération de domaine", detail: "Création d'un nom de domaine unique et mémorable"},
775
+ {icon: "fa-file-contract", title: "Enregistrement ICANN", detail: "Réservation légale du domaine avec notre registrar accrédité"},
776
+ {icon: "fa-server", title: "Configuration serveur", detail: "Mise en place de l'hébergement cloud haute performance"},
777
+ {icon: "fa-paint-brush", title: "Sélection du design", detail: "Choix automatique du template optimal pour votre secteur"},
778
+ {icon: "fa-robot", title: "Génération de contenu", detail: "Création automatique de contenu optimisé SEO par notre IA"},
779
+ {icon: "fa-lock", title: "Sécurisation SSL", detail: "Installation et configuration du certificat HTTPS"},
780
+ {icon: "fa-envelope", title: "Emails professionnels", detail: "Création des comptes email @votredomaine"},
781
+ {icon: "fa-chart-line", title: "Optimisation SEO", detail: "Configuration des métadonnées et optimisation pour les moteurs de recherche"},
782
+ {icon: "fa-rocket", title: "Mise en ligne", detail: "Publication du site professionnel"}
783
+ ];
784
+
785
+ // Sites créés automatiquement (données améliorées)
786
+ let autoSites = [
787
+ {domain: "consulting-digital-auto.com", date: "Aujourd'hui, 15:42", type: "Consulting", status: "Actif", ai: "95%", admin: "active"},
788
+ {domain: "avocats-auto-droit.fr", date: "Aujourd'hui, 15:30", type: "Droit", status: "Actif", ai: "92%", admin: "active"},
789
+ {domain: "dentiste-paris-auto.com", date: "Aujourd'hui, 15:18", type: "Santé", status: "Actif", ai: "89%", admin: "active"},
790
+ {domain: "architecte-auto-lyon.fr", date: "Aujourd'hui, 15:05", type: "Architecture", status: "Actif", ai: "94%", admin: "active"},
791
+ {domain: "resto-gastro-auto.net", date: "Aujourd'hui, 14:52", type: "Restauration", status: "Actif", ai: "87%", admin: "active"},
792
+ {domain: "coiffeur-homme-auto.fr", date: "Aujourd'hui, 14:40", type: "Coiffure", status: "Actif", ai: "91%", admin: "active"},
793
+ {domain: "plombier-urgence-auto.com", date: "Aujourd'hui, 14:28", type: "Service", status: "Actif", ai: "93%", admin: "active"},
794
+ {domain: "immobilier-marseille-auto.fr", date: "Aujourd'hui, 14:15", type: "Immobilier", status: "Actif", ai: "96%", admin: "active"},
795
+ {domain: "formation-informatique-auto.io", date: "Aujourd'hui, 14:03", type: "Éducation", status: "Actif", ai: "90%", admin: "active"},
796
+ {domain: "photographe-pro-auto.com", date: "Aujourd'hui, 13:50", type: "Photographie", status: "Actif", ai: "88%", admin: "active"}
797
+ ];
798
+
799
+ // Afficher les sites créés automatiquement (version améliorée)
800
+ function displayAutoSites() {
801
+ const container = document.getElementById('auto-sites-list');
802
+ container.innerHTML = autoSites.map(site => `
803
+ <div class="auto-site-item grid grid-cols-1 sm:grid-cols-12 p-4 hover:bg-gray-50 items-center">
804
+ <div class="col-span-5 md:col-span-4 font-mono text-blue-600 flex items-center mb-2 sm:mb-0">
805
+ <i class="fas fa-globe mr-2 text-gray-400 hidden sm:block"></i>
806
+ <span class="truncate">${site.domain}</span>
807
+ </div>
808
+ <div class="col-span-2 text-gray-600 text-sm mb-2 sm:mb-0">${site.date}</div>
809
+ <div class="col-span-2 text-sm mb-2 sm:mb-0">${site.type}</div>
810
+ <div class="col-span-1 mb-2 sm:mb-0">
811
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">${site.status}</span>
812
+ </div>
813
+ <div class="col-span-1 mb-2 sm:mb-0">
814
+ <div class="w-full bg-gray-200 rounded-full h-2">
815
+ <div class="bg-purple-600 h-2 rounded-full" style="width: ${site.ai}"></div>
816
+ </div>
817
+ </div>
818
+ <div class="col-span-1 flex justify-start sm:justify-center space-x-2">
819
+ <a href="#" class="text-blue-600 hover:text-blue-800 transition-colors" title="Gérer">
820
+ <i class="fas fa-cog"></i>
821
+ </a>
822
+ <a href="#" class="text-green-600 hover:text-green-800 transition-colors" title="Stats">
823
+ <i class="fas fa-chart-bar"></i>
824
+ </a>
825
+ <a href="#" class="text-purple-600 hover:text-purple-800 transition-colors sm:hidden" title="Visiter">
826
+ <i class="fas fa-external-link-alt"></i>
827
+ </a>
828
+ </div>
829
+ </div>
830
+ `).join('');
831
+
832
+ // Mettre à jour les stats
833
+ document.getElementById('total-sites').textContent = autoSites.length;
834
+ document.getElementById('active-domains').textContent = autoSites.length;
835
+ document.getElementById('today-created').textContent = autoSites.filter(s => s.date.includes('Aujourd\'hui')).length;
836
+ document.getElementById('auto-process').textContent = Math.floor(Math.random() * 5); // Simuler des créations en cours
837
+ }
838
+
839
+ // Générer un nom de domaine aléatoire amélioré
840
+ function generateDomainName() {
841
+ const prefixes = ['pro', 'expert', 'elite', 'premium', 'solution', 'consulting', 'services', 'group', 'prime', 'optimal'];
842
+ const suffixes = ['digital', 'business', 'tech', 'media', 'consult', 'partner', 'network', 'capital', 'hub', 'online'];
843
+ const industries = ['legal', 'finance', 'health', 'tech', 'realestate', 'marketing', 'education', 'creative', 'fitness', 'gastronomy'];
844
+ const locations = ['paris', 'lyon', 'marseille', 'lille', 'toulouse', 'bordeaux', 'nice', 'strasbourg', 'nantes', 'montpellier'];
845
+
846
+ const randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)];
847
+ const randomSuffix = suffixes[Math.floor(Math.random() * suffixes.length)];
848
+ const randomIndustry = industries[Math.floor(Math.random() * industries.length)];
849
+ const randomLocation = locations[Math.floor(Math.random() * locations.length)];
850
+ const extensions = ['.com', '.fr', '.net', '.io', '.pro', '.biz'];
851
+ const randomExt = extensions[Math.floor(Math.random() * extensions.length)];
852
+
853
+ const patterns = [
854
+ `${randomPrefix}-${randomIndustry}-${randomSuffix}${randomExt}`,
855
+ `${randomPrefix}-${randomLocation}-${randomIndustry}${randomExt}`,
856
+ `${randomIndustry}-${randomLocation}-${randomSuffix}${randomExt}`,
857
+ `${randomPrefix}-${randomSuffix}-${randomLocation}${randomExt}`
858
+ ];
859
+
860
+ return patterns[Math.floor(Math.random() * patterns.length)];
861
+ }
862
+
863
+ // Générer du contenu AI aléatoire amélioré
864
+ function generateAIContent() {
865
+ const industries = ['consulting', 'droit', 'santé', 'architecture', 'restauration', 'coiffure', 'services', 'immobilier', 'éducation', 'photographie'];
866
+ const randomIndustry = industries[Math.floor(Math.random() * industries.length)];
867
+
868
+ const contents = {
869
+ 'consulting': `Notre cabinet de consulting ${randomIndustry} offre des solutions stratégiques sur mesure pour propulser votre entreprise vers de nouveaux sommets. Expertise, innovation et résultats mesurables sont au cœur de notre approche, avec des méthodologies éprouvées et une vision à long terme.`,
870
+ 'droit': `Votre cabinet d'avocats spécialisé en ${randomIndustry} offrant une expertise juridique pointue dans tous les domaines du droit. Protection de vos intérêts avec rigueur, confidentialité absolue et une approche personnalisée adaptée à vos besoins spécifiques.`,
871
+ 'santé': `Centre médical ${randomIndustry} offrant des soins de qualité avec une approche humaine et personnalisée. Équipements dernier cri et professionnels expérimentés pour votre bien-être, dans un environnement accueillant et moderne.`,
872
+ 'architecture': `Agence d'architecture ${randomIndustry} créative transformant vos visions en espaces fonctionnels et esthétiques. Conception sur mesure alliant beauté, praticité et respect des normes environnementales pour des réalisations durables.`,
873
+ 'restauration': `Restaurant ${randomIndustry} gastronomique proposant une cuisine créative à base de produits locaux et de saison. Une expérience culinaire mémorable dans un cadre élégant, avec un service attentionné et une ambiance chaleureuse.`,
874
+ 'coiffure': `Salon de coiffure ${randomIndustry} haut de gamme pour une clientèle exigeante. Coupes tendances, soins capillaires premium et ambiance lounge pour une expérience unique alliant détente et renouveau.`,
875
+ 'services': `Entreprise de services ${randomIndustry} réactive et fiable pour tous vos besoins. Intervention rapide 24h/24 avec des professionnels qualifiés, des tarifs transparents et une garantie de satisfaction.`,
876
+ 'immobilier': `Agence immobilière ${randomIndustry} premium vous accompagnant dans tous vos projets. Expertise locale, sélection rigoureuse et service personnalisé pour des transactions en toute sérénité et transparence.`,
877
+ 'éducation': `Centre de formation ${randomIndustry} professionnelle proposant des cursus certifiants et adaptés aux besoins du marché. Pédagogie innovante, suivi individualisé et partenariats avec les entreprises pour une insertion professionnelle réussie.`,
878
+ 'photographie': `Studio de photographie ${randomIndustry} professionnelle capturant vos moments précieux avec art et sensibilité. Séances sur mesure dans notre studio ou en extérieur pour des souvenirs uniques et authentiques.`
879
+ };
880
+
881
+ return {
882
+ title: `Page d'Accueil - ${randomIndustry.charAt(0).toUpperCase() + randomIndustry.slice(1)}`,
883
+ content: contents[randomIndustry] || `Notre entreprise ${randomIndustry} offre des solutions professionnelles innovantes adaptées à vos besoins spécifiques. Avec une équipe d'experts dédiés, nous transformons vos idées en réalité grâce à des technologies de pointe et une approche centrée sur l'utilisateur.`
884
+ };
885
+ }
886
+
887
+ // Simuler la création automatique améliorée
888
+ function simulateAutoCreation() {
889
+ // Démarrer le processus visuel
890
+ currentAutoStep = 0;
891
+ updateAutoCreationStep();
892
+ autoCreationInterval = setInterval(nextAutoStep, 1500 / speedMultiplier);
893
+
894
+ // Ajouter un nouveau site à la liste après un délai
895
+ setTimeout(() => {
896
+ const now = new Date();
897
+ const newDomain = {
898
+ domain: generateDomainName(),
899
+ date: `Aujourd'hui, ${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`,
900
+ type: "Auto-Pro",
901
+ status: "Actif",
902
+ ai: `${85 + Math.floor(Math.random() * 15)}%`,
903
+ admin: "active"
904
+ };
905
+ autoSites.unshift(newDomain);
906
+ displayAutoSites();
907
+
908
+ // Mettre à jour le domaine final
909
+ document.getElementById('final-domain-url').textContent = newDomain.domain;
910
+
911
+ // Définir une date d'expiration aléatoire
912
+ const expiryDate = new Date();
913
+ expiryDate.setFullYear(expiryDate.getFullYear() + 1);
914
+ document.getElementById('domain-expiry').textContent = `Expire le ${expiryDate.toLocaleDateString('fr-FR')}`;
915
+
916
+ // Afficher le résultat final
917
+ setTimeout(() => {
918
+ document.getElementById('auto-pilot-process').style.display = 'none';
919
+ document.getElementById('completed-site').classList.remove('hidden');
920
+
921
+ // Arrêter l'animation
922
+ clearInterval(autoCreationInterval);
923
+ }, 1000);
924
+ }, 12000 / speedMultiplier);
925
+ }
926
+
927
+ // Passer à l'étape suivante améliorée
928
+ function nextAutoStep() {
929
+ if (isPaused) return;
930
+
931
+ currentAutoStep++;
932
+
933
+ if (currentAutoStep >= autoSteps.length) {
934
+ clearInterval(autoCreationInterval);
935
+ return;
936
+ }
937
+
938
+ updateAutoCreationStep();
939
+
940
+ // Afficher le contenu AI à l'étape appropriée
941
+ if (currentAutoStep === 5) {
942
+ const aiContent = generateAIContent();
943
+ document.getElementById('ai-page-title').textContent = aiContent.title;
944
+ document.getElementById('ai-page-content').textContent = aiContent.content;
945
+ document.getElementById('ai-content-preview').classList.remove('hidden');
946
+ }
947
+ }
948
+
949
+ // Mettre à jour l'affichage de l'étape améliorée
950
+ function updateAutoCreationStep() {
951
+ const step = autoSteps[currentAutoStep];
952
+
953
+ // Mettre à jour les messages
954
+ document.getElementById('auto-status-message').textContent = step.title;
955
+ document.getElementById('auto-status-detail').textContent = step.detail;
956
+
957
+ // Mettre à jour l'icône
958
+ const iconContainer = document.querySelector('#auto-creation-content > div:first-child');
959
+ if (iconContainer) {
960
+ iconContainer.innerHTML = `<i class="fas ${step.icon} text-blue-600 text-4xl animate-spin"></i>`;
961
+ }
962
+
963
+ // Mettre à jour la barre de progression
964
+ const progressPercent = (currentAutoStep / (autoSteps.length - 1)) * 100;
965
+ document.getElementById('auto-progress-bar').style.width = `${progressPercent}%`;
966
+
967
+ // Mettre à jour les étapes visuelles
968
+ for (let i = 1; i <= 7; i++) {
969
+ const stepElement = document.getElementById(`auto-step${i}`);
970
+ if (stepElement) {
971
+ if (i < currentAutoStep) {
972
+ stepElement.classList.remove('active');
973
+ stepElement.classList.add('completed');
974
+ stepElement.querySelector('div').className = 'w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center mb-2 shadow-md';
975
+ } else if (i === currentAutoStep) {
976
+ stepElement.classList.add('active');
977
+ stepElement.classList.remove('completed');
978
+ stepElement.querySelector('div').className = 'w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center mb-2 shadow-md';
979
+ } else {
980
+ stepElement.classList.remove('active', 'completed');
981
+ stepElement.querySelector('div').className = 'w-12 h-12 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2';
982
+ }
983
+ }
984
+ }
985
+
986
+ // Mettre à jour les détails techniques
987
+ if (currentAutoStep >= 1) {
988
+ document.getElementById('dns-info').textContent = `ns${Math.floor(Math.random() * 4) + 1}.autosite-pro.com`;
989
+ }
990
+ if (currentAutoStep >= 3) {
991
+ document.getElementById('ip-info').textContent = `185.143.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`;
992
+ document.getElementById('design-style').textContent = ['Moderne', 'Minimaliste', 'Corporate', 'Créatif'][Math.floor(Math.random() * 4)];
993
+ document.getElementById('ssl-info').textContent = ['Let\'s Encrypt', 'Sectigo', 'DigiCert', 'GeoTrust'][Math.floor(Math.random() * 4)];
994
+ }
995
+ if (currentAutoStep >= 5) {
996
+ document.getElementById('ai-model').textContent = ['GPT-4', 'GPT-4 Turbo', 'Claude 2', 'Llama 2'][Math.floor(Math.random() * 4)];
997
+ document.getElementById('registrar-info').textContent = ['ICANN Accredited', 'Registrar Pro', 'DomainSecure', 'NameBright'][Math.floor(Math.random() * 4)];
998
+ }
999
+ }
1000
+
1001
+ // Initialisation améliorée
1002
+ document.addEventListener('DOMContentLoaded', function() {
1003
+ displayAutoSites();
1004
+ simulateAutoCreation();
1005
+
1006
+ // Gestion des boutons de contrôle
1007
+ document.getElementById('pause-btn').addEventListener('click', function() {
1008
+ isPaused = !isPaused;
1009
+ if (isPaused) {
1010
+ this.innerHTML = '<i class="fas fa-play mr-2"></i> <span class="hidden sm:inline">Reprendre</span>';
1011
+ this.classList.remove('bg-yellow-100', 'text-yellow-800');
1012
+ this.classList.add('bg-green-100', 'text-green-800');
1013
+ } else {
1014
+ this.innerHTML = '<i class="fas fa-pause mr-2"></i> <span class="hidden sm:inline">Pause</span>';
1015
+ this.classList.remove('bg-green-100', 'text-green-800');
1016
+ this.classList.add('bg-yellow-100', 'text-yellow-800');
1017
+ }
1018
+ });
1019
+
1020
+ document.getElementById('speed-btn').addEventListener('click', function() {
1021
+ speedMultiplier = speedMultiplier === 1 ? 2 : 1;
1022
+ if (speedMultiplier === 2) {
1023
+ this.innerHTML = '<i class="fas fa-bolt mr-2"></i> <span class="hidden sm:inline">Vitesse x1</span>';
1024
+ this.classList.remove('bg-blue-100', 'text-blue-800');
1025
+ this.classList.add('bg-purple-100', 'text-purple-800');
1026
+ } else {
1027
+ this.innerHTML = '<i class="fas fa-bolt mr-2"></i> <span class="hidden sm:inline">Vitesse x2</span>';
1028
+ this.classList.remove('bg-purple-100', 'text-purple-800');
1029
+ this.classList.add('bg-blue-100', 'text-blue-800');
1030
+ }
1031
+
1032
+ // Redémarrer l'intervalle avec la nouvelle vitesse
1033
+ clearInterval(autoCreationInterval);
1034
+ autoCreationInterval = setInterval(nextAutoStep, 1500 / speedMultiplier);
1035
+ });
1036
+
1037
+ document.getElementById('help-btn').addEventListener('click', function() {
1038
+ alert('Le mode Auto-Pilote crée automatiquement un site web professionnel pour vous. Vous pouvez mettre en pause ou accélérer le processus.');
1039
+ });
1040
+
1041
+ // Simuler des mises à jour en temps réel
1042
+ setInterval(() => {
1043
+ if (isPaused) return;
1044
+
1045
+ // Ajouter occasionnellement un nouveau site
1046
+ if (Math.random() > 0.8) {
1047
+ const now = new Date();
1048
+ const newDomain = {
1049
+ domain: generateDomainName(),
1050
+ date: `Aujourd'hui, ${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`,
1051
+ type: "Auto-Pro",
1052
+ status: "Actif",
1053
+ ai: `${85 + Math.floor(Math.random() * 15)}%`,
1054
+ admin: "active"
1055
+ };
1056
+ autoSites.unshift(newDomain);
1057
+
1058
+ // Limiter à 15 sites maximum
1059
+ if (autoSites.length > 15) {
1060
+ autoSites.pop();
1061
+ }
1062
+
1063
+ displayAutoSites();
1064
+ }
1065
+
1066
+ // Mettre à jour les heures des sites existants
1067
+ autoSites.forEach(site => {
1068
+ if (site.date.includes("Aujourd'hui")) {
1069
+ const now = new Date();
1070
+ site.date = `Aujourd'hui, ${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
1071
+ }
1072
+ });
1073
+
1074
+ displayAutoSites();
1075
+ }, 30000);
1076
+ });
1077
+ </script>
1078
+ <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/autopilote" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1079
+ </html>
prompts.txt ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ AJOUTER 97456 FILM DE 2023 à 2025 en automatique anjouté une Dashboard avec une base de donné de film complet a regarder maintenant en automatique
2
+ ajouter 589898 film derniere sortie a regarder maintenant en automatique
3
+ afficher toutes les images des vrai film
4
+ le createur le plus puissant et plus rapide capable de creer des site de cours en ligne en 10 seconde avec plus de 25411 cours en ligne et plussieur page le tout en systéme auto robotisé en automatique avec des vrai site reel et pret a l'emploi de suite
5
+ je veux pas de site d exemple je veux creer des vrais site avec des vrais non de domaine reel et enregistrement au registrat en automatique
6
+ je veux que la creation du site soit automatique
7
+ activer tous en automatique
8
+ je veux pas de site vitrine je veux de vrais site professionnel que pas description et en automatique avec de vrais domaine intgrer en automatique et enregitreeme eu registrat des domaine en automatique
9
+ activer tous en auto pilote
10
+ corriger toutes les erreurs
11
+ ajouter plus de fonction en auto pilote
12
+ tout corriger