Hugging Face's logo

Spaces:
docto41
/
hyper-speed-domains
Running

App Files Community
docto41 commited on
Commit
f60b7cd
·
verified ·
1 Parent(s): ac6947c

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +360 -686
  2. prompts.txt +4 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>HyperSpeed Web | Automatisation Infrastructure Complète</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>
@@ -37,46 +37,17 @@
37
  100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0); }
38
  }
39
 
40
- .progress-bar {
41
- height: 4px;
42
- background: linear-gradient(90deg, #4a6cf7 0%, #6e8efb 100%);
43
- animation: progress 0.5s ease-out;
44
  }
45
 
46
- @keyframes progress {
47
- from { width: 0%; }
48
- to { width: 100%; }
49
  }
50
 
51
- .automation-process {
52
- background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
53
- border-left: 4px solid #4a6cf7;
54
- }
55
-
56
- .hero-image {
57
- background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
58
- background-size: cover;
59
- background-position: center;
60
- background-blend-mode: overlay;
61
- background-color: rgba(74, 108, 247, 0.8);
62
- }
63
-
64
- .tech-image {
65
- background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
66
- background-size: cover;
67
- background-position: center;
68
- }
69
-
70
- .network-image {
71
- background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');
72
- background-size: cover;
73
- background-position: center;
74
- }
75
-
76
- .dashboard-image {
77
- background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
78
- background-size: cover;
79
- background-position: center;
80
  }
81
  </style>
82
  </head>
@@ -93,13 +64,11 @@
93
  </div>
94
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
95
  <a href="#features" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Fonctionnalités</a>
96
- <a href="#technology" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Technologie</a>
97
  <a href="#pricing" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Tarifs</a>
98
  <a href="#contact" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
99
  </div>
100
  <div class="hidden md:ml-6 md:flex md:items-center">
101
  <button class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Connexion</button>
102
- <button class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">Essai Gratuit</button>
103
  </div>
104
  <div class="-mr-2 flex items-center md:hidden">
105
  <button id="mobile-menu-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">
@@ -114,39 +83,53 @@
114
  <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
115
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
116
  <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Fonctionnalités</a>
117
- <a href="#technology" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Technologie</a>
118
  <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Tarifs</a>
119
  <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a>
120
  <div class="pt-4 border-t">
121
  <button class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Connexion</button>
122
- <button class="mt-2 block w-full px-3 py-2 text-center text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md">Essai Gratuit</button>
123
  </div>
124
  </div>
125
  </div>
126
  </nav>
127
 
128
- <!-- Hero Section -->
129
- <div class="hero-image text-white">
130
- <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
131
  <div class="text-center">
132
  <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
133
- Infrastructure Web Automatisée en 1 Clic
134
  </h1>
135
  <p class="mt-6 max-w-2xl mx-auto text-xl">
136
- Domaine, SSL, DNS et intégration Google - déployés automatiquement en secondes
137
  </p>
138
- <div class="mt-10">
139
- <button id="launch-automation" class="pulse-animation inline-flex items-center px-8 py-4 border border-transparent text-xl font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-gray-100">
140
- <i class="fas fa-bolt mr-2"></i> Lancer l'Automatisation
141
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  </div>
143
- <div class="mt-8 flex justify-center">
144
- <div class="flex items-center">
145
- <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full bg-blue-500 text-white">
146
- <i class="fas fa-check"></i>
 
147
  </div>
148
- <div class="ml-3">
149
- <p class="text-sm font-medium">Propagation mondiale en <span class="font-bold">1.2s</span> en moyenne</p>
150
  </div>
151
  </div>
152
  </div>
@@ -154,148 +137,101 @@
154
  </div>
155
  </div>
156
 
157
- <!-- Automation Process -->
158
- <div id="automation-process" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 hidden">
159
  <div class="bg-white rounded-xl shadow-xl overflow-hidden">
160
  <div class="p-6">
161
- <h2 class="text-2xl font-bold text-gray-900 mb-4">Processus d'Automatisation en Cours</h2>
162
- <div class="progress-bar w-full mb-6"></div>
163
 
164
- <div class="space-y-6">
165
- <!-- Step 1 -->
166
- <div class="automation-process p-6 rounded-lg">
167
- <div class="flex items-start">
168
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
169
- <span>1</span>
170
- </div>
171
- <div class="ml-4">
172
- <h3 class="text-lg font-medium text-gray-900">Enregistrement du Domaine</h3>
173
- <p class="mt-1 text-sm text-gray-600">Connexion directe aux registres mondiaux pour un enregistrement instantané.</p>
174
- <div class="mt-2">
175
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
176
- <i class="fas fa-check-circle mr-1"></i> Terminé en 0.4s
177
- </span>
178
- </div>
179
  </div>
180
  </div>
181
- </div>
182
-
183
- <!-- Step 2 -->
184
- <div class="automation-process p-6 rounded-lg">
185
- <div class="flex items-start">
186
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
187
- <span>2</span>
188
- </div>
189
- <div class="ml-4">
190
- <h3 class="text-lg font-medium text-gray-900">Déploiement SSL Automatique</h3>
191
- <p class="mt-1 text-sm text-gray-600">Certificat TLS émis et installé avant même que la page ne se recharge.</p>
192
- <div class="mt-2">
193
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
194
- <i class="fas fa-check-circle mr-1"></i> Terminé en 0.3s
195
- </span>
196
- </div>
197
- </div>
198
  </div>
199
- </div>
200
-
201
- <!-- Step 3 -->
202
- <div class="automation-process p-6 rounded-lg">
203
- <div class="flex items-start">
204
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
205
- <span>3</span>
206
- </div>
207
- <div class="ml-4">
208
- <h3 class="text-lg font-medium text-gray-900">Configuration DNS Globale</h3>
209
- <p class="mt-1 text-sm text-gray-600">Propagation mondiale sur notre réseau Anycast avec 158 points de présence.</p>
210
- <div class="mt-2">
211
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
212
- <i class="fas fa-sync-alt mr-1 animate-spin"></i> Propagation en cours (87%)
213
- </span>
214
- <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
215
- <div class="bg-blue-600 h-1.5 rounded-full" style="width: 87%"></div>
216
- </div>
217
  </div>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <!-- Step 4 -->
223
- <div class="automation-process p-6 rounded-lg">
224
- <div class="flex items-start">
225
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
226
- <span>4</span>
227
- </div>
228
- <div class="ml-4">
229
- <h3 class="text-lg font-medium text-gray-900">Intégration Google</h3>
230
- <p class="mt-1 text-sm text-gray-600">Configuration automatique avec Search Console et Analytics.</p>
231
- <div class="mt-2">
232
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
233
- <i class="fas fa-spinner mr-1 animate-spin"></i> En cours
234
- </span>
235
  </div>
236
  </div>
237
  </div>
238
  </div>
239
- </div>
240
-
241
- <div id="automation-complete" class="mt-8 hidden">
242
- <div class="bg-green-50 border border-green-200 rounded-lg p-6">
243
- <div class="flex items-center">
244
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
245
- <i class="fas fa-check"></i>
 
 
246
  </div>
247
- <div class="ml-4">
248
- <h3 class="text-lg font-medium text-green-800">Configuration Terminée!</h3>
249
- <p class="mt-1 text-sm text-green-600">Votre infrastructure web est maintenant opérationnelle avec une propagation mondiale complète.</p>
 
250
  </div>
251
- </div>
252
-
253
- <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
254
  <div>
255
- <h4 class="font-medium mb-2">Détails Techniques</h4>
256
- <ul class="space-y-2 text-sm">
257
- <li class="flex justify-between">
258
- <span class="text-gray-500">Domaine:</span>
259
- <span class="font-medium">votredomaine.com</span>
260
- </li>
261
- <li class="flex justify-between">
262
- <span class="text-gray-500">SSL:</span>
263
- <span class="font-medium text-green-600">Actif (Let's Encrypt)</span>
264
- </li>
265
- <li class="flex justify-between">
266
- <span class="text-gray-500">DNS Propagation:</span>
267
- <span class="font-medium">100% en 0.9s</span>
268
- </li>
269
- </ul>
270
  </div>
 
271
  <div>
272
- <h4 class="font-medium mb-2">Services Actifs</h4>
273
- <ul class="space-y-2 text-sm">
274
- <li class="flex items-center">
275
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
276
- <span>Google Search Console</span>
277
- </li>
278
- <li class="flex items-center">
279
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
280
- <span>Google Analytics</span>
281
- </li>
282
- <li class="flex items-center">
283
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
284
- <span>Monitoring 24/7</span>
285
- </li>
286
- <li class="flex items-center">
287
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
288
- <span>Protection DDoS</span>
289
- </li>
290
- </ul>
291
  </div>
292
  </div>
293
-
294
- <button id="dashboard-button" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 ease-in-out transform hover:scale-105">
295
- Accéder au Tableau de Bord
296
- </button>
297
  </div>
298
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
299
  </div>
300
  </div>
301
  </div>
@@ -304,239 +240,88 @@
304
  <div id="features" class="py-16 bg-white">
305
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
306
  <div class="lg:text-center">
307
- <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Technologie</h2>
308
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
309
- Automatisation Complète en 1 Clic
310
- </p>
311
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
312
- Notre système gère tout le processus sans intervention humaine, 24h/24 et 7j/7
313
  </p>
314
  </div>
315
 
316
- <div class="mt-20">
317
- <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
318
- <!-- Feature 1 -->
319
- <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
320
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
321
- <i class="fas fa-globe text-xl"></i>
322
- </div>
323
- <div class="mt-5">
324
- <h3 class="text-lg font-medium text-gray-900">Enregistrement Instantané</h3>
325
- <p class="mt-2 text-base text-gray-500">
326
- Connexion directe aux registres pour un enregistrement en moins de 500ms, disponible immédiatement dans tous les navigateurs.
327
- </p>
328
- </div>
329
- <div class="mt-4">
330
- <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Enregistrement de domaine" class="w-full h-48 object-cover rounded-lg">
331
- </div>
332
  </div>
333
-
334
- <!-- Feature 2 -->
335
- <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
336
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
337
- <i class="fas fa-lock text-xl"></i>
338
- </div>
339
- <div class="mt-5">
340
- <h3 class="text-lg font-medium text-gray-900">SSL Automatique</h3>
341
- <p class="mt-2 text-base text-gray-500">
342
- Certificat TLS émis et installé avant même que la page ne se recharge (temps moyen: 300ms).
343
- </p>
344
- </div>
345
- <div class="mt-4">
346
- <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Certificat SSL" class="w-full h-48 object-cover rounded-lg">
347
- </div>
348
  </div>
 
349
 
350
- <!-- Feature 3 -->
351
- <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
352
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
353
- <i class="fas fa-network-wired text-xl"></i>
354
- </div>
355
- <div class="mt-5">
356
- <h3 class="text-lg font-medium text-gray-900">DNS Ultra-Rapide</h3>
357
- <p class="mt-2 text-base text-gray-500">
358
- Propagation mondiale en moins d'une seconde grâce à notre réseau Anycast avec 158 POPs.
359
- </p>
360
- </div>
361
- <div class="mt-4">
362
- <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" alt="Réseau DNS" class="w-full h-48 object-cover rounded-lg">
363
- </div>
364
  </div>
365
-
366
- <!-- Feature 4 -->
367
- <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
368
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
369
- <i class="fab fa-google text-xl"></i>
370
- </div>
371
- <div class="mt-5">
372
- <h3 class="text-lg font-medium text-gray-900">Intégration Google</h3>
373
- <p class="mt-2 text-base text-gray-500">
374
- Configuration automatique avec Search Console et Analytics avant même que votre site soit en ligne.
375
- </p>
376
- </div>
377
- <div class="mt-4">
378
- <img src="https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Google Analytics" class="w-full h-48 object-cover rounded-lg">
379
- </div>
380
  </div>
 
381
 
382
- <!-- Feature 5 -->
383
- <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
384
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
385
- <i class="fas fa-robot text-xl"></i>
386
- </div>
387
- <div class="mt-5">
388
- <h3 class="text-lg font-medium text-gray-900">Automatisation Totale</h3>
389
- <p class="mt-2 text-base text-gray-500">
390
- Processus 100% automatisé sans intervention humaine, disponible 24h/24 et 7j/7.
391
- </p>
392
- </div>
393
- <div class="mt-4">
394
- <img src="https://images.unsplash.com/photo-1677442135136-760c285e7743?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Automatisation" class="w-full h-48 object-cover rounded-lg">
395
- </div>
396
  </div>
 
397
 
398
- <!-- Feature 6 -->
399
- <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
400
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
401
- <i class="fas fa-tachometer-alt text-xl"></i>
402
- </div>
403
- <div class="mt-5">
404
- <h3 class="text-lg font-medium text-gray-900">Monitoring Permanent</h3>
405
- <p class="mt-2 text-base text-gray-500">
406
- Surveillance en temps réel de tous les services avec reconfiguration automatique si nécessaire.
407
- </p>
408
- </div>
409
- <div class="mt-4">
410
- <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Monitoring" class="w-full h-48 object-cover rounded-lg">
411
- </div>
412
  </div>
413
  </div>
414
- </div>
415
- </div>
416
- </div>
417
 
418
- <!-- Technology Section -->
419
- <div id="technology" class="py-16 bg-gray-50">
420
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
421
- <div class="lg:text-center">
422
- <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Infrastructure</h2>
423
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
424
- La technologie derrière la vitesse
425
- </p>
426
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
427
- Architecture distribuée pour des performances inégalées
428
- </p>
429
- </div>
430
 
431
- <div class="mt-16">
432
- <div class="bg-white overflow-hidden shadow rounded-lg">
433
- <div class="px-4 py-5 sm:p-6">
434
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
435
- <div>
436
- <h3 class="text-lg font-medium text-gray-900 mb-4">Réseau DNS Anycast Global</h3>
437
- <div class="network-image h-48 w-full rounded-lg mb-4"></div>
438
- <ul class="space-y-4">
439
- <li class="flex items-start">
440
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
441
- <i class="fas fa-server"></i>
442
- </div>
443
- <p class="ml-3 text-base text-gray-700">
444
- <span class="font-medium">158 points de présence</span> répartis sur tous les continents
445
- </p>
446
- </li>
447
- <li class="flex items-start">
448
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
449
- <i class="fas fa-tachometer-alt"></i>
450
- </div>
451
- <p class="ml-3 text-base text-gray-700">
452
- <span class="font-medium">Temps de réponse moyen de 8ms</span> grâce à notre routage intelligent
453
- </p>
454
- </li>
455
- <li class="flex items-start">
456
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
457
- <i class="fas fa-sync-alt"></i>
458
- </div>
459
- <p class="ml-3 text-base text-gray-700">
460
- <span class="font-medium">Mise à jour en temps réel</span> avec propagation mondiale en 0.5s
461
- </p>
462
- </li>
463
- </ul>
464
- </div>
465
- <div>
466
- <h3 class="text-lg font-medium text-gray-900 mb-4">Automatisation Avancée</h3>
467
- <div class="tech-image h-48 w-full rounded-lg mb-4"></div>
468
- <ul class="space-y-4">
469
- <li class="flex items-start">
470
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
471
- <i class="fas fa-robot"></i>
472
- </div>
473
- <p class="ml-3 text-base text-gray-700">
474
- <span class="font-medium">Système robotisé</span> qui gère l'intégralité du processus sans intervention humaine
475
- </p>
476
- </li>
477
- <li class="flex items-start">
478
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
479
- <i class="fas fa-check-circle"></i>
480
- </div>
481
- <p class="ml-3 text-base text-gray-700">
482
- <span class="font-medium">Vérifications en temps réel</span> de tous les services toutes les 500ms
483
- </p>
484
- </li>
485
- <li class="flex items-start">
486
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
487
- <i class="fas fa-project-diagram"></i>
488
- </div>
489
- <p class="ml-3 text-base text-gray-700">
490
- <span class="font-medium">Intégration API</span> avec tous les registres majeurs et services tiers
491
- </p>
492
- </li>
493
- </ul>
494
- </div>
495
- </div>
496
-
497
- <div class="mt-8">
498
- <h3 class="text-lg font-medium text-gray-900 mb-4">Processus d'Automatisation</h3>
499
- <div class="bg-gray-50 p-6 rounded-lg">
500
- <div class="flex flex-col space-y-4">
501
- <div class="flex items-start">
502
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
503
- <span>1</span>
504
- </div>
505
- <div class="ml-4">
506
- <h4 class="text-base font-medium text-gray-900">Enregistrement auprès du registre</h4>
507
- <p class="mt-1 text-sm text-gray-600">Notre API temps réel communique directement avec le registre pour enregistrer votre domaine en moins de 200ms.</p>
508
- </div>
509
- </div>
510
- <div class="flex items-start">
511
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
512
- <span>2</span>
513
- </div>
514
- <div class="ml-4">
515
- <h4 class="text-base font-medium text-gray-900">Configuration SSL automatique</h4>
516
- <p class="mt-1 text-sm text-gray-600">Un certificat Let's Encrypt est émis et installé avant même que la page ne se recharge (temps moyen: 150ms).</p>
517
- </div>
518
- </div>
519
- <div class="flex items-start">
520
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
521
- <span>3</span>
522
- </div>
523
- <div class="ml-4">
524
- <h4 class="text-base font-medium text-gray-900">Propagation DNS mondiale</h4>
525
- <p class="mt-1 text-sm text-gray-600">Notre réseau Anycast global propage les enregistrements DNS sur tous les serveurs en moins d'une seconde.</p>
526
- </div>
527
- </div>
528
- <div class="flex items-start">
529
- <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
530
- <span>4</span>
531
- </div>
532
- <div class="ml-4">
533
- <h4 class="text-base font-medium text-gray-900">Intégration des outils Google</h4>
534
- <p class="mt-1 text-sm text-gray-600">Configuration automatique avec Search Console et Analytics avant même que votre site soit en ligne.</p>
535
- </div>
536
- </div>
537
- </div>
538
- </div>
539
- </div>
540
  </div>
541
  </div>
542
  </div>
@@ -544,11 +329,11 @@
544
  </div>
545
 
546
  <!-- Pricing Section -->
547
- <div id="pricing" class="py-16 bg-white">
548
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
549
  <div class="text-center">
550
  <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
551
- Tarifs simples et transparents
552
  </h2>
553
  <p class="mt-4 text-xl text-gray-600">
554
  Tout inclus dans chaque offre - pas de frais cachés
@@ -556,37 +341,34 @@
556
  </div>
557
 
558
  <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
559
- <!-- Starter Plan -->
560
  <div class="bg-white border border-gray-200 rounded-2xl shadow-md overflow-hidden">
561
  <div class="h-3 bg-blue-500"></div>
562
  <div class="p-8">
563
- <h3 class="text-2xl font-bold text-gray-900">Starter</h3>
564
- <p class="mt-4 text-gray-500">Parfait pour les sites personnels</p>
565
  <div class="mt-6">
566
- <p class="text-4xl font-bold text-gray-900">9.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
567
- </div>
568
- <div class="mt-4">
569
- <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Starter Plan" class="w-full h-32 object-cover rounded-lg">
570
  </div>
571
  <ul class="mt-8 space-y-3">
572
  <li class="flex items-start">
573
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
574
- <span class="text-gray-700">1 domaine inclus</span>
575
  </li>
576
  <li class="flex items-start">
577
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
578
- <span class="text-gray-700">SSL automatique</span>
579
  </li>
580
  <li class="flex items-start">
581
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
582
- <span class="text-gray-700">DNS Anycast global</span>
583
  </li>
584
  <li class="flex items-start">
585
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
586
- <span class="text-gray-700">Intégration Google de base</span>
587
  </li>
588
  </ul>
589
- <button onclick="startAutomation('Starter')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
590
  Commencer
591
  </button>
592
  </div>
@@ -602,10 +384,7 @@
602
  <h3 class="text-2xl font-bold text-gray-900">Professionnel</h3>
603
  <p class="mt-4 text-gray-500">Pour les entreprises et projets sérieux</p>
604
  <div class="mt-6">
605
- <p class="text-4xl font-bold text-gray-900">29.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
606
- </div>
607
- <div class="mt-4">
608
- <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Professional Plan" class="w-full h-32 object-cover rounded-lg">
609
  </div>
610
  <ul class="mt-8 space-y-3">
611
  <li class="flex items-start">
@@ -618,19 +397,19 @@
618
  </li>
619
  <li class="flex items-start">
620
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
621
- <span class="text-gray-700">DNS Premium avec DDoS protection</span>
622
  </li>
623
  <li class="flex items-start">
624
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
625
- <span class="text-gray-700">Intégration Google avancée</span>
626
  </li>
627
  <li class="flex items-start">
628
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
629
- <span class="text-gray-700">Monitoring 24/7</span>
630
  </li>
631
  </ul>
632
- <button onclick="startAutomation('Professionnel')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
633
- Commencer
634
  </button>
635
  </div>
636
  </div>
@@ -642,10 +421,7 @@
642
  <h3 class="text-2xl font-bold text-gray-900">Entreprise</h3>
643
  <p class="mt-4 text-gray-500">Pour les besoins critiques</p>
644
  <div class="mt-6">
645
- <p class="text-4xl font-bold text-gray-900">99.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
646
- </div>
647
- <div class="mt-4">
648
- <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Enterprise Plan" class="w-full h-32 object-cover rounded-lg">
649
  </div>
650
  <ul class="mt-8 space-y-3">
651
  <li class="flex items-start">
@@ -658,122 +434,38 @@
658
  </li>
659
  <li class="flex items-start">
660
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
661
- <span class="text-gray-700">DNS Enterprise avec 100% uptime</span>
662
  </li>
663
  <li class="flex items-start">
664
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
665
- <span class="text-gray-700">Intégration Google complète</span>
666
  </li>
667
  <li class="flex items-start">
668
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
669
- <span class="text-gray-700">Support prioritaire 24/7</span>
670
  </li>
671
  <li class="flex items-start">
672
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
673
- <span class="text-gray-700">Gestionnaire de compte dédié</span>
674
  </li>
675
  </ul>
676
- <button onclick="startAutomation('Entreprise')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
677
- Commencer
678
  </button>
679
  </div>
680
  </div>
681
  </div>
682
-
683
- <div class="mt-12 text-center">
684
- <p class="text-gray-500">Besoin d'une solution personnalisée? <a href="#contact" class="text-blue-600 hover:text-blue-800">Contactez notre équipe</a></p>
685
- </div>
686
- </div>
687
- </div>
688
-
689
- <!-- Testimonials Section -->
690
- <div class="py-16 bg-gray-50">
691
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
692
- <div class="lg:text-center">
693
- <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Témoignages</h2>
694
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
695
- Ce que nos clients disent
696
- </p>
697
- </div>
698
-
699
- <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
700
- <!-- Testimonial 1 -->
701
- <div class="bg-white p-6 rounded-lg shadow-md">
702
- <div class="flex items-center">
703
- <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Client 1">
704
- <div class="ml-4">
705
- <h4 class="text-lg font-medium">Sophie Martin</h4>
706
- <p class="text-gray-500">CEO, TechStart</p>
707
- </div>
708
- </div>
709
- <p class="mt-4 text-gray-600">
710
- "La vitesse d'installation est incroyable. Notre site était opérationnel en moins de 2 secondes avec tous les services configurés automatiquement."
711
- </p>
712
- <div class="mt-4 flex text-yellow-400">
713
- <i class="fas fa-star"></i>
714
- <i class="fas fa-star"></i>
715
- <i class="fas fa-star"></i>
716
- <i class="fas fa-star"></i>
717
- <i class="fas fa-star"></i>
718
- </div>
719
- </div>
720
-
721
- <!-- Testimonial 2 -->
722
- <div class="bg-white p-6 rounded-lg shadow-md">
723
- <div class="flex items-center">
724
- <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Client 2">
725
- <div class="ml-4">
726
- <h4 class="text-lg font-medium">Thomas Dubois</h4>
727
- <p class="text-gray-500">CTO, DigitalAgency</p>
728
- </div>
729
- </div>
730
- <p class="mt-4 text-gray-600">
731
- "Nous avons migré tous nos clients vers HyperSpeed Web. L'automatisation nous fait gagner des heures de travail chaque semaine."
732
- </p>
733
- <div class="mt-4 flex text-yellow-400">
734
- <i class="fas fa-star"></i>
735
- <i class="fas fa-star"></i>
736
- <i class="fas fa-star"></i>
737
- <i class="fas fa-star"></i>
738
- <i class="fas fa-star"></i>
739
- </div>
740
- </div>
741
-
742
- <!-- Testimonial 3 -->
743
- <div class="bg-white p-6 rounded-lg shadow-md">
744
- <div class="flex items-center">
745
- <img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Client 3">
746
- <div class="ml-4">
747
- <h4 class="text-lg font-medium">Émilie Laurent</h4>
748
- <p class="text-gray-500">Directrice Marketing</p>
749
- </div>
750
- </div>
751
- <p class="mt-4 text-gray-600">
752
- "L'intégration automatique avec Google Analytics et Search Console est un énorme gain de temps. Tout est configuré avant même que je commence à travailler sur le site."
753
- </p>
754
- <div class="mt-4 flex text-yellow-400">
755
- <i class="fas fa-star"></i>
756
- <i class="fas fa-star"></i>
757
- <i class="fas fa-star"></i>
758
- <i class="fas fa-star"></i>
759
- <i class="fas fa-star-half-alt"></i>
760
- </div>
761
- </div>
762
- </div>
763
  </div>
764
  </div>
765
 
766
  <!-- Contact Section -->
767
- <div id="contact" class="py-16 bg-gray-50">
768
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
769
  <div class="lg:text-center">
770
  <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Contact</h2>
771
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
772
  Nous sommes là pour vous aider
773
  </p>
774
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
775
- Notre équipe est disponible 24h/24 pour répondre à vos questions
776
- </p>
777
  </div>
778
 
779
  <div class="mt-16">
@@ -870,8 +562,8 @@
870
  <ul class="space-y-2">
871
  <li><a href="#" class="text-gray-300 hover:text-white">Enregistrement de domaine</a></li>
872
  <li><a href="#" class="text-gray-300 hover:text-white">Certificats SSL</a></li>
873
- <li><a href="#" class="text-gray-300 hover:text-white">DNS Global</a></li>
874
- <li><a href="#" class="text-gray-300 hover:text-white">Intégration Google</a></li>
875
  </ul>
876
  </div>
877
  <div>
@@ -923,8 +615,8 @@
923
  </div>
924
  </footer>
925
 
926
- <!-- Domain Configuration Modal -->
927
- <div id="domainConfigModal" class="fixed z-50 inset-0 overflow-y-auto hidden">
928
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
929
  <div class="fixed inset-0 transition-opacity" aria-hidden="true">
930
  <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
@@ -933,171 +625,46 @@
933
  <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">
934
  <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
935
  <div class="sm:flex sm:items-start">
936
- <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
937
- <i class="fas fa-cog text-blue-600"></i>
938
  </div>
939
  <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
940
  <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
941
- Configuration Automatisée
942
  </h3>
943
  <div class="mt-2">
944
  <p class="text-sm text-gray-500">
945
- Configurez votre domaine pour lancer le processus d'automatisation complet.
946
  </p>
947
- </div>
948
- <div class="mt-4 space-y-4">
949
- <div>
950
- <label for="domain-name" class="block text-sm font-medium text-gray-700">Nom de domaine</label>
951
- <div class="mt-1 flex rounded-md shadow-sm">
952
- <input type="text" id="domain-name" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="votredomaine">
953
- <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
954
- .com
955
- </span>
956
- </div>
957
- </div>
958
- <div>
959
- <label for="dns-config" class="block text-sm font-medium text-gray-700">Configuration DNS</label>
960
- <select id="dns-config" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
961
- <option>Configuration Automatique (Recommandé)</option>
962
- <option>DNS Personnalisés</option>
963
- </select>
964
- </div>
965
- <div class="flex items-start">
966
- <div class="flex items-center h-5">
967
- <input id="google-integration" name="google-integration" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
968
- </div>
969
- <div class="ml-3 text-sm">
970
- <label for="google-integration" class="font-medium text-gray-700">Intégration Google</label>
971
- <p class="text-gray-500">Configurer automatiquement Search Console et Analytics</p>
972
- </div>
973
- </div>
974
- </div>
975
- </div>
976
- </div>
977
- </div>
978
- <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
979
- <button type="button" onclick="startAutomationProcess()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
980
- <i class="fas fa-bolt mr-2"></i> Lancer l'Automatisation
981
- </button>
982
- <button type="button" onclick="closeDomainConfigModal()" 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
983
- Annuler
984
- </button>
985
- </div>
986
- </div>
987
- </div>
988
- </div>
989
-
990
- <!-- Dashboard Modal -->
991
- <div id="dashboardModal" class="fixed z-50 inset-0 overflow-y-auto hidden">
992
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
993
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
994
- <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
995
- </div>
996
- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
997
- <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-4xl sm:w-full">
998
- <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
999
- <div class="sm:flex sm:items-start">
1000
- <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
1001
- <i class="fas fa-tachometer-alt text-blue-600"></i>
1002
- </div>
1003
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
1004
- <h3 class="text-lg leading-6 font-medium text-gray-900">
1005
- Tableau de Bord HyperSpeed
1006
- </h3>
1007
- <div class="mt-2">
1008
- <p class="text-sm text-gray-500">
1009
- Gestion complète de votre infrastructure automatisée
1010
- </p>
1011
- </div>
1012
-
1013
- <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
1014
- <div class="bg-gray-50 p-4 rounded-lg">
1015
- <h4 class="font-medium text-gray-900 mb-2">Statut des Services</h4>
1016
- <ul class="space-y-2">
1017
- <li class="flex items-center justify-between">
1018
- <span class="text-gray-600">DNS</span>
1019
- <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
1020
- <i class="fas fa-check-circle mr-1"></i> Actif
1021
- </span>
1022
  </li>
1023
- <li class="flex items-center justify-between">
1024
- <span class="text-gray-600">SSL</span>
1025
- <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
1026
- <i class="fas fa-check-circle mr-1"></i> Actif
1027
- </span>
1028
  </li>
1029
- <li class="flex items-center justify-between">
1030
- <span class="text-gray-600">Monitoring</span>
1031
- <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
1032
- <i class="fas fa-check-circle mr-1"></i> Actif
1033
- </span>
1034
  </li>
1035
  </ul>
1036
  </div>
1037
-
1038
- <div class="bg-gray-50 p-4 rounded-lg">
1039
- <h4 class="font-medium text-gray-900 mb-2">Performances</h4>
1040
- <ul class="space-y-2">
1041
- <li class="flex items-center justify-between">
1042
- <span class="text-gray-600">Temps de réponse</span>
1043
- <span class="font-medium">12ms</span>
1044
- </li>
1045
- <li class="flex items-center justify-between">
1046
- <span class="text-gray-600">Disponibilité</span>
1047
- <span class="font-medium">100%</span>
1048
- </li>
1049
- <li class="flex items-center justify-between">
1050
- <span class="text-gray-600">Trafic</span>
1051
- <span class="font-medium">0 visites</span>
1052
- </li>
1053
- </ul>
1054
- </div>
1055
-
1056
- <div class="bg-gray-50 p-4 rounded-lg">
1057
- <h4 class="font-medium text-gray-900 mb-2">Intégrations</h4>
1058
- <ul class="space-y-2">
1059
- <li class="flex items-center">
1060
- <i class="fab fa-google text-blue-500 mr-2"></i>
1061
- <span>Google Search Console</span>
1062
- </li>
1063
- <li class="flex items-center">
1064
- <i class="fab fa-google text-blue-500 mr-2"></i>
1065
- <span>Google Analytics</span>
1066
- </li>
1067
- <li class="flex items-center">
1068
- <i class="fas fa-shield-alt text-blue-500 mr-2"></i>
1069
- <span>Protection DDoS</span>
1070
- </li>
1071
- </ul>
1072
- </div>
1073
- </div>
1074
-
1075
- <div class="mt-6">
1076
- <h4 class="font-medium text-gray-900 mb-2">Actions Rapides</h4>
1077
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
1078
- <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1079
- <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
1080
- <span>Rafraîchir DNS</span>
1081
- </button>
1082
- <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1083
- <i class="fas fa-redo text-blue-500 mr-2"></i>
1084
- <span>Renouveler SSL</span>
1085
- </button>
1086
- <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1087
- <i class="fas fa-chart-line text-blue-500 mr-2"></i>
1088
- <span>Voir Analytics</span>
1089
- </button>
1090
- <button class="flex items-center justify-center p-3 border border-gray-300 rounded-md hover:bg-gray-50">
1091
- <i class="fas fa-cog text-blue-500 mr-2"></i>
1092
- <span>Paramètres</span>
1093
- </button>
1094
- </div>
1095
  </div>
1096
  </div>
1097
  </div>
1098
  </div>
1099
  <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
1100
- <button type="button" onclick="closeDashboardModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
 
 
 
1101
  Fermer
1102
  </button>
1103
  </div>
@@ -1111,36 +678,143 @@
1111
  document.getElementById('mobile-menu').classList.toggle('hidden');
1112
  });
1113
 
1114
- // Launch automation button
1115
- document.getElementById('launch-automation').addEventListener('click', function() {
1116
- document.getElementById('domainConfigModal').classList.remove('hidden');
1117
- document.body.classList.add('overflow-hidden');
 
 
 
 
1118
  });
1119
 
1120
- function closeDomainConfigModal() {
1121
- document.getElementById('domainConfigModal').classList.add('hidden');
1122
- document.body.classList.remove('overflow-hidden');
1123
- }
 
 
 
 
 
 
 
 
 
 
1124
 
1125
- function startAutomation(plan) {
1126
- document.getElementById('domainConfigModal').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1127
  document.body.classList.add('overflow-hidden');
 
 
 
 
 
 
1128
  }
1129
 
1130
- function startAutomationProcess() {
1131
- closeDomainConfigModal();
 
1132
 
1133
- // Show automation process
1134
- document.getElementById('automation-process').classList.remove('hidden');
1135
- document.getElementById('automation-complete').classList.add('hidden');
 
 
 
 
 
 
 
1136
 
1137
- // Simulate automation process
 
 
 
 
 
 
 
 
1138
  setTimeout(() => {
1139
- const domain = document.getElementById('domain-name').value || 'exemple';
 
1140
 
1141
- // Show completion
1142
- document.getElementById('automation-complete').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1143
 
1144
- // Scroll to completion
1145
- document.getElementById('automation-complete').
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1146
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Enregistrement de Domaine Gratuit | HyperSpeed 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>
 
37
  100% { box-shadow: 0 0 0 0 rgba(74, 108, 247, 0); }
38
  }
39
 
40
+ .domain-search-box {
41
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
 
42
  }
43
 
44
+ .tld-badge {
45
+ transition: all 0.2s ease;
 
46
  }
47
 
48
+ .tld-badge:hover {
49
+ transform: scale(1.05);
50
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  }
52
  </style>
53
  </head>
 
64
  </div>
65
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
66
  <a href="#features" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Fonctionnalités</a>
 
67
  <a href="#pricing" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Tarifs</a>
68
  <a href="#contact" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
69
  </div>
70
  <div class="hidden md:ml-6 md:flex md:items-center">
71
  <button class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Connexion</button>
 
72
  </div>
73
  <div class="-mr-2 flex items-center md:hidden">
74
  <button id="mobile-menu-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">
 
83
  <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
84
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
85
  <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Fonctionnalités</a>
 
86
  <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Tarifs</a>
87
  <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a>
88
  <div class="pt-4 border-t">
89
  <button class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Connexion</button>
 
90
  </div>
91
  </div>
92
  </div>
93
  </nav>
94
 
95
+ <!-- Domain Registration Section -->
96
+ <div class="gradient-bg text-white py-16">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
  <div class="text-center">
99
  <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
100
+ Enregistrez votre domaine gratuitement
101
  </h1>
102
  <p class="mt-6 max-w-2xl mx-auto text-xl">
103
+ Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes
104
  </p>
105
+ </div>
106
+
107
+ <div class="mt-12 max-w-3xl mx-auto">
108
+ <div class="domain-search-box bg-white rounded-lg p-6">
109
+ <div class="flex">
110
+ <input type="text" id="domain-input" placeholder="Entrez votre nom de domaine" class="flex-1 min-w-0 block w-full px-4 py-3 rounded-l-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-gray-900">
111
+ <button id="search-domain" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-r-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
112
+ <i class="fas fa-search mr-2"></i> Vérifier
113
+ </button>
114
+ </div>
115
+
116
+ <div class="mt-4 flex flex-wrap gap-2">
117
+ <span class="tld-badge px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 cursor-pointer">.com</span>
118
+ <span class="tld-badge px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 cursor-pointer">.net</span>
119
+ <span class="tld-badge px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 cursor-pointer">.org</span>
120
+ <span class="tld-badge px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 cursor-pointer">.io</span>
121
+ <span class="tld-badge px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 cursor-pointer">.fr</span>
122
+ <span class="tld-badge px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 cursor-pointer">.tech</span>
123
+ </div>
124
  </div>
125
+
126
+ <div id="domain-results" class="mt-6 hidden">
127
+ <div class="bg-white rounded-lg shadow overflow-hidden">
128
+ <div class="px-6 py-4 border-b border-gray-200">
129
+ <h3 class="text-lg font-medium text-gray-900">Résultats de disponibilité</h3>
130
  </div>
131
+ <div class="divide-y divide-gray-200" id="results-container">
132
+ <!-- Domain result will be added here by JavaScript -->
133
  </div>
134
  </div>
135
  </div>
 
137
  </div>
138
  </div>
139
 
140
+ <!-- Domain Registration Form -->
141
+ <div id="registration-form" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 hidden">
142
  <div class="bg-white rounded-xl shadow-xl overflow-hidden">
143
  <div class="p-6">
144
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Enregistrement de domaine</h2>
 
145
 
146
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
147
+ <!-- Domain Information -->
148
+ <div>
149
+ <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Informations du domaine</h3>
150
+
151
+ <div class="mb-4">
152
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom de domaine</label>
153
+ <div class="flex">
154
+ <input type="text" id="selected-domain" readonly class="flex-1 bg-gray-100 rounded-l-md px-4 py-2 border border-gray-300 text-gray-700">
155
+ <span id="selected-tld" class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 text-sm">
156
+ .com
157
+ </span>
 
 
 
158
  </div>
159
  </div>
160
+
161
+ <div class="mb-4">
162
+ <label class="block text-sm font-medium text-gray-700 mb-1">Période d'enregistrement</label>
163
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
164
+ <option>1 an - Gratuit</option>
165
+ <option>2 ans - 9.99€/an</option>
166
+ <option>3 ans - 8.99€/an</option>
167
+ <option>5 ans - 7.99€/an</option>
168
+ <option>10 ans - 6.99€/an</option>
169
+ </select>
 
 
 
 
 
 
 
170
  </div>
171
+
172
+ <div class="mb-4">
173
+ <label class="block text-sm font-medium text-gray-700 mb-1">Services inclus</label>
174
+ <div class="space-y-2">
175
+ <div class="flex items-center">
176
+ <input type="checkbox" checked disabled class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
177
+ <label class="ml-2 block text-sm text-gray-700">Hébergement web (10GB)</label>
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
+ <div class="flex items-center">
180
+ <input type="checkbox" checked disabled class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
181
+ <label class="ml-2 block text-sm text-gray-700">Certificat SSL</label>
182
+ </div>
183
+ <div class="flex items-center">
184
+ <input type="checkbox" checked disabled class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
185
+ <label class="ml-2 block text-sm text-gray-700">DNS Management</label>
186
+ </div>
187
+ <div class="flex items-center">
188
+ <input type="checkbox" checked class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
189
+ <label class="ml-2 block text-sm text-gray-700">Email professionnel (5 comptes)</label>
 
 
 
 
 
 
190
  </div>
191
  </div>
192
  </div>
193
  </div>
194
+
195
+ <!-- Registrant Information -->
196
+ <div>
197
+ <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Informations du titulaire</h3>
198
+
199
+ <div class="grid grid-cols-1 gap-4">
200
+ <div>
201
+ <label for="registrant-name" class="block text-sm font-medium text-gray-700">Nom complet</label>
202
+ <input type="text" id="registrant-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
203
  </div>
204
+
205
+ <div>
206
+ <label for="registrant-email" class="block text-sm font-medium text-gray-700">Email</label>
207
+ <input type="email" id="registrant-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
208
  </div>
209
+
 
 
210
  <div>
211
+ <label for="registrant-phone" class="block text-sm font-medium text-gray-700">Téléphone</label>
212
+ <input type="tel" id="registrant-phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  </div>
214
+
215
  <div>
216
+ <label for="registrant-address" class="block text-sm font-medium text-gray-700">Adresse</label>
217
+ <textarea id="registrant-address" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
  </div>
 
 
 
 
220
  </div>
221
  </div>
222
+
223
+ <div class="mt-8 pt-6 border-t border-gray-200">
224
+ <div class="flex items-center">
225
+ <input id="terms-checkbox" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
226
+ <label for="terms-checkbox" class="ml-2 block text-sm text-gray-700">
227
+ J'accepte les <a href="#" class="text-blue-600 hover:text-blue-800">conditions générales</a> et la <a href="#" class="text-blue-600 hover:text-blue-800">politique de confidentialité</a>
228
+ </label>
229
+ </div>
230
+
231
+ <button id="register-domain" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md shadow-lg">
232
+ <i class="fas fa-bolt mr-2"></i> Enregistrer le domaine gratuitement
233
+ </button>
234
+ </div>
235
  </div>
236
  </div>
237
  </div>
 
240
  <div id="features" class="py-16 bg-white">
241
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
242
  <div class="lg:text-center">
243
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Pourquoi choisir HyperSpeed ?</h2>
244
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
245
+ Tout ce dont vous avez besoin en un seul endroit
 
 
 
246
  </p>
247
  </div>
248
 
249
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
250
+ <!-- Feature 1 -->
251
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
252
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
253
+ <i class="fas fa-globe text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
254
  </div>
255
+ <div class="mt-5">
256
+ <h3 class="text-lg font-medium text-gray-900">Enregistrement instantané</h3>
257
+ <p class="mt-2 text-base text-gray-500">
258
+ Obtenez votre domaine en quelques secondes avec notre processus automatisé.
259
+ </p>
 
 
 
 
 
 
 
 
 
 
260
  </div>
261
+ </div>
262
 
263
+ <!-- Feature 2 -->
264
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
265
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
266
+ <i class="fas fa-lock text-xl"></i>
 
 
 
 
 
 
 
 
 
 
267
  </div>
268
+ <div class="mt-5">
269
+ <h3 class="text-lg font-medium text-gray-900">SSL inclus</h3>
270
+ <p class="mt-2 text-base text-gray-500">
271
+ Certificat SSL installé automatiquement pour sécuriser votre site.
272
+ </p>
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
+ </div>
275
 
276
+ <!-- Feature 3 -->
277
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
278
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
279
+ <i class="fas fa-server text-xl"></i>
280
+ </div>
281
+ <div class="mt-5">
282
+ <h3 class="text-lg font-medium text-gray-900">Hébergement gratuit</h3>
283
+ <p class="mt-2 text-base text-gray-500">
284
+ 10GB d'espace d'hébergement inclus avec chaque domaine.
285
+ </p>
 
 
 
 
286
  </div>
287
+ </div>
288
 
289
+ <!-- Feature 4 -->
290
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
291
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
292
+ <i class="fas fa-envelope text-xl"></i>
293
+ </div>
294
+ <div class="mt-5">
295
+ <h3 class="text-lg font-medium text-gray-900">Emails professionnels</h3>
296
+ <p class="mt-2 text-base text-gray-500">
297
+ 5 comptes email inclus avec votre domaine.
298
+ </p>
 
 
 
 
299
  </div>
300
  </div>
 
 
 
301
 
302
+ <!-- Feature 5 -->
303
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
304
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
305
+ <i class="fas fa-tachometer-alt text-xl"></i>
306
+ </div>
307
+ <div class="mt-5">
308
+ <h3 class="text-lg font-medium text-gray-900">Tableau de bord intuitif</h3>
309
+ <p class="mt-2 text-base text-gray-500">
310
+ Gestion facile de tous vos services en un seul endroit.
311
+ </p>
312
+ </div>
313
+ </div>
314
 
315
+ <!-- Feature 6 -->
316
+ <div class="card-hover bg-white p-8 rounded-lg shadow-md border border-gray-100">
317
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
318
+ <i class="fas fa-headset text-xl"></i>
319
+ </div>
320
+ <div class="mt-5">
321
+ <h3 class="text-lg font-medium text-gray-900">Support 24/7</h3>
322
+ <p class="mt-2 text-base text-gray-500">
323
+ Notre équipe est disponible à tout moment pour vous aider.
324
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
325
  </div>
326
  </div>
327
  </div>
 
329
  </div>
330
 
331
  <!-- Pricing Section -->
332
+ <div id="pricing" class="py-16 bg-gray-50">
333
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
334
  <div class="text-center">
335
  <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
336
+ Tarifs transparents
337
  </h2>
338
  <p class="mt-4 text-xl text-gray-600">
339
  Tout inclus dans chaque offre - pas de frais cachés
 
341
  </div>
342
 
343
  <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
344
+ <!-- Free Plan -->
345
  <div class="bg-white border border-gray-200 rounded-2xl shadow-md overflow-hidden">
346
  <div class="h-3 bg-blue-500"></div>
347
  <div class="p-8">
348
+ <h3 class="text-2xl font-bold text-gray-900">Gratuit</h3>
349
+ <p class="mt-4 text-gray-500">Parfait pour commencer</p>
350
  <div class="mt-6">
351
+ <p class="text-4xl font-bold text-gray-900">0€<span class="text-base font-medium text-gray-500">/première année</span></p>
 
 
 
352
  </div>
353
  <ul class="mt-8 space-y-3">
354
  <li class="flex items-start">
355
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
356
+ <span class="text-gray-700">1 domaine .com gratuit</span>
357
  </li>
358
  <li class="flex items-start">
359
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
360
+ <span class="text-gray-700">Certificat SSL inclus</span>
361
  </li>
362
  <li class="flex items-start">
363
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
364
+ <span class="text-gray-700">10GB d'hébergement</span>
365
  </li>
366
  <li class="flex items-start">
367
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
368
+ <span class="text-gray-700">5 comptes email</span>
369
  </li>
370
  </ul>
371
+ <button onclick="showRegistrationForm('free')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
372
  Commencer
373
  </button>
374
  </div>
 
384
  <h3 class="text-2xl font-bold text-gray-900">Professionnel</h3>
385
  <p class="mt-4 text-gray-500">Pour les entreprises et projets sérieux</p>
386
  <div class="mt-6">
387
+ <p class="text-4xl font-bold text-gray-900">9.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
 
 
 
388
  </div>
389
  <ul class="mt-8 space-y-3">
390
  <li class="flex items-start">
 
397
  </li>
398
  <li class="flex items-start">
399
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
400
+ <span class="text-gray-700">50GB d'hébergement</span>
401
  </li>
402
  <li class="flex items-start">
403
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
404
+ <span class="text-gray-700">25 comptes email</span>
405
  </li>
406
  <li class="flex items-start">
407
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
408
+ <span class="text-gray-700">Support prioritaire</span>
409
  </li>
410
  </ul>
411
+ <button onclick="showRegistrationForm('pro')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
412
+ Choisir ce plan
413
  </button>
414
  </div>
415
  </div>
 
421
  <h3 class="text-2xl font-bold text-gray-900">Entreprise</h3>
422
  <p class="mt-4 text-gray-500">Pour les besoins critiques</p>
423
  <div class="mt-6">
424
+ <p class="text-4xl font-bold text-gray-900">29.99€<span class="text-base font-medium text-gray-500">/mois</span></p>
 
 
 
425
  </div>
426
  <ul class="mt-8 space-y-3">
427
  <li class="flex items-start">
 
434
  </li>
435
  <li class="flex items-start">
436
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
437
+ <span class="text-gray-700">500GB d'hébergement</span>
438
  </li>
439
  <li class="flex items-start">
440
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
441
+ <span class="text-gray-700">Comptes email illimités</span>
442
  </li>
443
  <li class="flex items-start">
444
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
445
+ <span class="text-gray-700">Support 24/7</span>
446
  </li>
447
  <li class="flex items-start">
448
  <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
449
+ <span class="text-gray-700">Gestionnaire dédié</span>
450
  </li>
451
  </ul>
452
+ <button onclick="showRegistrationForm('enterprise')" class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md">
453
+ Choisir ce plan
454
  </button>
455
  </div>
456
  </div>
457
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
  </div>
459
  </div>
460
 
461
  <!-- Contact Section -->
462
+ <div id="contact" class="py-16 bg-white">
463
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
464
  <div class="lg:text-center">
465
  <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Contact</h2>
466
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
467
  Nous sommes là pour vous aider
468
  </p>
 
 
 
469
  </div>
470
 
471
  <div class="mt-16">
 
562
  <ul class="space-y-2">
563
  <li><a href="#" class="text-gray-300 hover:text-white">Enregistrement de domaine</a></li>
564
  <li><a href="#" class="text-gray-300 hover:text-white">Certificats SSL</a></li>
565
+ <li><a href="#" class="text-gray-300 hover:text-white">Hébergement web</a></li>
566
+ <li><a href="#" class="text-gray-300 hover:text-white">Emails professionnels</a></li>
567
  </ul>
568
  </div>
569
  <div>
 
615
  </div>
616
  </footer>
617
 
618
+ <!-- Success Modal -->
619
+ <div id="success-modal" class="fixed z-50 inset-0 overflow-y-auto hidden">
620
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
621
  <div class="fixed inset-0 transition-opacity" aria-hidden="true">
622
  <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 
625
  <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">
626
  <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
627
  <div class="sm:flex sm:items-start">
628
+ <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">
629
+ <i class="fas fa-check text-green-600"></i>
630
  </div>
631
  <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
632
  <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
633
+ Félicitations !
634
  </h3>
635
  <div class="mt-2">
636
  <p class="text-sm text-gray-500">
637
+ Votre domaine <span id="registered-domain" class="font-bold">exemple.com</span> a été enregistré avec succès.
638
  </p>
639
+ <div class="mt-4 bg-gray-50 p-4 rounded-lg">
640
+ <h4 class="font-medium mb-2">Informations d'accès</h4>
641
+ <ul class="text-sm space-y-1">
642
+ <li class="flex justify-between">
643
+ <span class="text-gray-500">URL du tableau de bord:</span>
644
+ <span class="font-medium">dashboard.hyperspeed-web.com</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
645
  </li>
646
+ <li class="flex justify-between">
647
+ <span class="text-gray-500">Identifiant:</span>
648
+ <span class="font-medium" id="user-email">[email protected]</span>
 
 
649
  </li>
650
+ <li class="flex justify-between">
651
+ <span class="text-gray-500">Mot de passe temporaire:</span>
652
+ <span class="font-medium">••••••••</span>
 
 
653
  </li>
654
  </ul>
655
  </div>
656
+ <p class="mt-4 text-sm text-gray-500">
657
+ Un email de confirmation avec toutes les informations a été envoyé à votre adresse email.
658
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
659
  </div>
660
  </div>
661
  </div>
662
  </div>
663
  <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
664
+ <button type="button" onclick="closeSuccessModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
665
+ Accéder au tableau de bord
666
+ </button>
667
+ <button type="button" onclick="closeSuccessModal()" 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
668
  Fermer
669
  </button>
670
  </div>
 
678
  document.getElementById('mobile-menu').classList.toggle('hidden');
679
  });
680
 
681
+ // Domain search functionality
682
+ document.getElementById('search-domain').addEventListener('click', function() {
683
+ const domainInput = document.getElementById('domain-input').value.trim();
684
+ if (domainInput) {
685
+ searchDomain(domainInput);
686
+ } else {
687
+ alert('Veuillez entrer un nom de domaine');
688
+ }
689
  });
690
 
691
+ // TLD badges click event
692
+ document.querySelectorAll('.tld-badge').forEach(badge => {
693
+ badge.addEventListener('click', function() {
694
+ const domainInput = document.getElementById('domain-input');
695
+ const currentValue = domainInput.value.trim();
696
+ const tld = this.textContent;
697
+
698
+ if (currentValue) {
699
+ searchDomain(currentValue + tld);
700
+ } else {
701
+ domainInput.focus();
702
+ }
703
+ });
704
+ });
705
 
706
+ // Register domain button
707
+ document.getElementById('register-domain').addEventListener('click', function() {
708
+ if (!document.getElementById('terms-checkbox').checked) {
709
+ alert('Veuillez accepter les conditions générales');
710
+ return;
711
+ }
712
+
713
+ const domain = document.getElementById('selected-domain').value;
714
+ const tld = document.getElementById('selected-tld').textContent;
715
+ const email = document.getElementById('registrant-email').value;
716
+
717
+ if (!domain || !tld || !email) {
718
+ alert('Veuillez remplir tous les champs obligatoires');
719
+ return;
720
+ }
721
+
722
+ // Show success modal
723
+ document.getElementById('registered-domain').textContent = domain + tld;
724
+ document.getElementById('user-email').textContent = email;
725
+ document.getElementById('success-modal').classList.remove('hidden');
726
  document.body.classList.add('overflow-hidden');
727
+ });
728
+
729
+ // Close success modal
730
+ function closeSuccessModal() {
731
+ document.getElementById('success-modal').classList.add('hidden');
732
+ document.body.classList.remove('overflow-hidden');
733
  }
734
 
735
+ // Show registration form for plans
736
+ function showRegistrationForm(plan) {
737
+ document.getElementById('registration-form').classList.remove('hidden');
738
 
739
+ if (plan === 'free') {
740
+ document.getElementById('selected-domain').value = 'mon-domaine';
741
+ document.getElementById('selected-tld').textContent = '.com';
742
+ } else if (plan === 'pro') {
743
+ document.getElementById('selected-domain').value = 'mon-entreprise';
744
+ document.getElementById('selected-tld').textContent = '.com';
745
+ } else if (plan === 'enterprise') {
746
+ document.getElementById('selected-domain').value = 'ma-societe';
747
+ document.getElementById('selected-tld').textContent = '.com';
748
+ }
749
 
750
+ window.scrollTo({
751
+ top: document.getElementById('registration-form').offsetTop - 100,
752
+ behavior: 'smooth'
753
+ });
754
+ }
755
+
756
+ // Domain search function
757
+ function searchDomain(domain) {
758
+ // Simulate API call
759
  setTimeout(() => {
760
+ const resultsContainer = document.getElementById('domain-results');
761
+ const resultsDiv = document.getElementById('results-container');
762
 
763
+ // Clear previous results
764
+ resultsDiv.innerHTML = '';
765
+
766
+ // Add results
767
+ const extensions = ['.com', '.net', '.org', '.io', '.fr'];
768
+ extensions.forEach(ext => {
769
+ const isAvailable = Math.random() > 0.3; // 70% chance of being available
770
+
771
+ const resultItem = document.createElement('div');
772
+ resultItem.className = 'px-6 py-4 flex items-center justify-between';
773
+
774
+ const domainName = domain.endsWith(ext) ? domain : domain + ext;
775
+
776
+ resultItem.innerHTML = `
777
+ <div class="flex items-center">
778
+ <span class="font-medium">${domainName}</span>
779
+ <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isAvailable ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
780
+ ${isAvailable ? 'Disponible' : 'Indisponible'}
781
+ </span>
782
+ </div>
783
+ <div>
784
+ ${isAvailable ? `
785
+ <button onclick="selectDomain('${domainName.replace(ext, '')}', '${ext}')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
786
+ Sélectionner
787
+ </button>
788
+ ` : `
789
+ <span class="text-sm text-gray-500">Enregistré</span>
790
+ `}
791
+ </div>
792
+ `;
793
+
794
+ resultsDiv.appendChild(resultItem);
795
+ });
796
 
797
+ // Show results
798
+ resultsContainer.classList.remove('hidden');
799
+ window.scrollTo({
800
+ top: resultsContainer.offsetTop - 100,
801
+ behavior: 'smooth'
802
+ });
803
+ }, 500);
804
+ }
805
+
806
+ // Select domain function
807
+ function selectDomain(domain, tld) {
808
+ document.getElementById('registration-form').classList.remove('hidden');
809
+ document.getElementById('selected-domain').value = domain;
810
+ document.getElementById('selected-tld').textContent = tld;
811
+ document.getElementById('domain-results').classList.add('hidden');
812
+
813
+ window.scrollTo({
814
+ top: document.getElementById('registration-form').offsetTop - 100,
815
+ behavior: 'smooth'
816
+ });
817
+ }
818
+ </script>
819
+ <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/hyper-speed-domains" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
820
  </html>
prompts.txt CHANGED
@@ -6,4 +6,7 @@ aucun bouton du tableau de bors sont cliquable
6
  enregistrement domaine, ssl , serveur dns, etc.. en automatique , avec enregistrement au registraire directement dans la seconde qui suit sur toutes les navigateur du monde , serveur dns les plus puissant et plus rapide du monde a la seconde pres , avec référencement google searche console et google analytique directement robotisé le tout sur systeme sofistiqué 24/24 et 7jour sur 7jour le tout automatisé
7
  Infrastructure Web Automatisée en 1 Click Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/24 et 7j/7 avec propagation mondiale en secondes.
8
  ajouté des photos pour rendre le site plus attirant
9
- le bouton accéder au tableau de bors n'est pas cliquable et ne fonctionne pas , veuille corriger les erreur
 
 
 
 
6
  enregistrement domaine, ssl , serveur dns, etc.. en automatique , avec enregistrement au registraire directement dans la seconde qui suit sur toutes les navigateur du monde , serveur dns les plus puissant et plus rapide du monde a la seconde pres , avec référencement google searche console et google analytique directement robotisé le tout sur systeme sofistiqué 24/24 et 7jour sur 7jour le tout automatisé
7
  Infrastructure Web Automatisée en 1 Click Enregistrement instantané de domaine, déploiement SSL, DNS ultra-rapide et intégration Google - le tout automatisé 24h/24 et 7j/7 avec propagation mondiale en secondes.
8
  ajouté des photos pour rendre le site plus attirant
9
+ le bouton accéder au tableau de bors n'est pas cliquable et ne fonctionne pas , veuille corriger les erreur
10
+ les bouton ne fonctionne pas refaire mise a jours
11
+ Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes:: Domain Information Registrar Information Registrant Contact
12
+ corriger toutes les erreurs des bouton non cliquable qui ne fonction pas