Hugging Face's logo

Spaces:
docto41
/
hyper-speed-domains
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +567 -665
  2. prompts.txt +2 -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>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,21 +37,30 @@
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>
54
- <body>
55
  <!-- Navigation -->
56
  <nav class="bg-white shadow-sm sticky top-0 z-50">
57
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -63,12 +72,51 @@
63
  </div>
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">
@@ -82,592 +130,447 @@
82
  <!-- Mobile menu -->
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>
136
  </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>
238
-
239
- <!-- Features Section -->
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>
328
- </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
340
- </p>
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>
375
- </div>
376
 
377
- <!-- Professional Plan -->
378
- <div class="relative bg-white border-2 border-blue-500 rounded-2xl shadow-md overflow-hidden">
379
- <div class="h-3 bg-blue-600"></div>
380
- <div class="absolute top-0 right-0 bg-blue-500 text-white px-4 py-1 text-xs font-bold rounded-bl-lg">
381
- POPULAIRE
382
- </div>
383
- <div class="p-8">
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">
391
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
392
- <span class="text-gray-700">5 domaines inclus</span>
393
- </li>
394
- <li class="flex items-start">
395
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
396
- <span class="text-gray-700">SSL Wildcard inclus</span>
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>
416
 
417
- <!-- Enterprise Plan -->
418
- <div class="bg-white border border-gray-200 rounded-2xl shadow-md overflow-hidden">
419
- <div class="h-3 bg-purple-500"></div>
420
- <div class="p-8">
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">
428
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
429
- <span class="text-gray-700">Domaines illimités</span>
430
- </li>
431
- <li class="flex items-start">
432
- <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
433
- <span class="text-gray-700">SSL EV avec validation étendue</span>
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">
472
- <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
473
  <div class="bg-white overflow-hidden shadow rounded-lg">
474
  <div class="px-4 py-5 sm:p-6">
475
- <h3 class="text-lg font-medium text-gray-900 mb-4">Contactez-nous</h3>
476
- <form class="space-y-6">
477
- <div>
478
- <label for="name" class="block text-sm font-medium text-gray-700">Nom complet</label>
479
- <input type="text" id="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">
480
- </div>
481
- <div>
482
- <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
483
- <input type="email" id="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">
484
- </div>
485
- <div>
486
- <label for="subject" class="block text-sm font-medium text-gray-700">Sujet</label>
487
- <select id="subject" 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">
488
- <option>Question générale</option>
489
- <option>Support technique</option>
490
- <option>Demande commerciale</option>
491
- <option>Autre</option>
492
- </select>
493
- </div>
494
- <div>
495
- <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
496
- <textarea id="message" rows="4" 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>
497
  </div>
498
- <div>
499
- <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
500
- Envoyer le message
501
- </button>
 
 
 
 
 
502
  </div>
503
- </form>
504
  </div>
505
  </div>
506
- <div class="bg-white overflow-hidden shadow rounded-lg">
507
- <div class="px-4 py-5 sm:p-6">
508
- <h3 class="text-lg font-medium text-gray-900 mb-4">Informations de contact</h3>
509
- <div class="space-y-4">
510
- <div class="flex items-start">
511
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
512
- <i class="fas fa-map-marker-alt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
513
  </div>
514
- <p class="ml-3 text-base text-gray-700">
515
- HyperSpeed Web<br>
516
- 12 Rue de la Vitesse<br>
517
- 75001 Paris, France
518
- </p>
519
  </div>
520
- <div class="flex items-start">
521
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
522
- <i class="fas fa-phone-alt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
523
  </div>
524
- <p class="ml-3 text-base text-gray-700">
525
- +33 1 23 45 67 89<br>
526
- Support 24h/24 et 7j/7
527
- </p>
528
  </div>
529
- <div class="flex items-start">
530
- <div class="flex-shrink-0 h-6 w-6 text-blue-500">
531
- <i class="fas fa-envelope"></i>
 
 
 
 
 
 
 
 
 
 
 
532
  </div>
533
- <p class="ml-3 text-base text-gray-700">
534
- contact@hyperspeed-web.com<br>
535
- Réponse garantie en moins de 5 minutes
536
- </p>
537
  </div>
538
  </div>
539
-
540
- <div class="mt-8">
541
- <h4 class="text-lg font-medium text-gray-900 mb-4">Support instantané</h4>
542
- <button class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
543
- <i class="fas fa-comment-dots mr-2"></i> Chat en direct
544
- </button>
545
- <p class="mt-2 text-sm text-gray-500 text-center">
546
- Connectez-vous avec un expert en moins de 10 secondes
547
- </p>
548
- </div>
549
  </div>
550
  </div>
551
  </div>
552
- </div>
553
- </div>
554
- </div>
555
 
556
- <!-- Footer -->
557
- <footer class="bg-gray-800">
558
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
559
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
560
- <div>
561
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Produits</h3>
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>
570
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Support</h3>
571
- <ul class="space-y-2">
572
- <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li>
573
- <li><a href="#" class="text-gray-300 hover:text-white">Forum communautaire</a></li>
574
- <li><a href="#" class="text-gray-300 hover:text-white">Nous contacter</a></li>
575
- <li><a href="#" class="text-gray-300 hover:text-white">Statut des services</a></li>
576
- </ul>
577
- </div>
578
- <div>
579
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Entreprise</h3>
580
- <ul class="space-y-2">
581
- <li><a href="#" class="text-gray-300 hover:text-white">À propos</a></li>
582
- <li><a href="#" class="text-gray-300 hover:text-white">Carrières</a></li>
583
- <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
584
- <li><a href="#" class="text-gray-300 hover:text-white">Presse</a></li>
585
- </ul>
586
- </div>
587
- <div>
588
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Légal</h3>
589
- <ul class="space-y-2">
590
- <li><a href="#" class="text-gray-300 hover:text-white">Politique de confidentialité</a></li>
591
- <li><a href="#" class="text-gray-300 hover:text-white">Conditions d'utilisation</a></li>
592
- <li><a href="#" class="text-gray-300 hover:text-white">Politique de remboursement</a></li>
593
- </ul>
594
- </div>
595
- </div>
596
- <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
597
- <div class="flex space-x-6 md:order-2">
598
- <a href="#" class="text-gray-400 hover:text-white">
599
- <span class="sr-only">Facebook</span>
600
- <i class="fab fa-facebook-f"></i>
601
- </a>
602
- <a href="#" class="text-gray-400 hover:text-white">
603
- <span class="sr-only">Twitter</span>
604
- <i class="fab fa-twitter"></i>
605
- </a>
606
- <a href="#" class="text-gray-400 hover:text-white">
607
- <span class="sr-only">GitHub</span>
608
- <i class="fab fa-github"></i>
609
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
  </div>
611
- <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
612
- &copy; 2023 HyperSpeed Web. Tous droits réservés.
613
- </p>
614
- </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>
623
- </div>
624
- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
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">votre@email.com</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>
671
  </div>
672
  </div>
673
  </div>
@@ -678,143 +581,142 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tableau de bord | 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
+ .sidebar {
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .stripe-button {
45
+ background: #635bff;
46
+ background-image: linear-gradient(to right, #635bff, #5a53e8);
47
  }
48
 
49
+ .paypal-button {
50
+ background: #0070ba;
51
+ background-image: linear-gradient(to right, #0070ba, #005ea6);
52
+ }
53
+
54
+ .cart-item {
55
  transition: all 0.2s ease;
56
  }
57
 
58
+ .cart-item:hover {
59
+ background-color: #f8f9fa;
 
60
  }
61
  </style>
62
  </head>
63
+ <body class="bg-gray-100">
64
  <!-- Navigation -->
65
  <nav class="bg-white shadow-sm sticky top-0 z-50">
66
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
72
  </div>
73
  </div>
74
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
75
+ <a href="#dashboard" class="text-blue-600 px-3 py-2 text-sm font-medium">Tableau de bord</a>
76
+ <a href="#domains" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Mes domaines</a>
77
+ <a href="#hosting" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Hébergement</a>
78
+ <a href="#billing" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Facturation</a>
79
  </div>
80
  <div class="hidden md:ml-6 md:flex md:items-center">
81
+ <div class="relative">
82
+ <button id="cart-button" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium relative">
83
+ <i class="fas fa-shopping-cart"></i>
84
+ <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
85
+ </button>
86
+ <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50">
87
+ <div class="px-4 py-3 border-b">
88
+ <h3 class="text-sm font-medium text-gray-900">Votre panier</h3>
89
+ </div>
90
+ <div id="cart-items" class="max-h-60 overflow-y-auto">
91
+ <!-- Cart items will be added here -->
92
+ <div class="px-4 py-3 text-center text-gray-500">
93
+ Votre panier est vide
94
+ </div>
95
+ </div>
96
+ <div class="px-4 py-3 border-t">
97
+ <div class="flex justify-between mb-2">
98
+ <span class="text-sm text-gray-600">Total:</span>
99
+ <span id="cart-total" class="text-sm font-medium">0.00€</span>
100
+ </div>
101
+ <button id="checkout-button" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded text-sm">
102
+ Passer à la caisse
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="ml-3 relative">
108
+ <div>
109
+ <button id="user-menu-button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
110
+ <span class="sr-only">Ouvrir le menu utilisateur</span>
111
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
112
+ </button>
113
+ </div>
114
+ <div id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
115
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Votre profil</a>
116
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Paramètres</a>
117
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Déconnexion</a>
118
+ </div>
119
+ </div>
120
  </div>
121
  <div class="-mr-2 flex items-center md:hidden">
122
  <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">
 
130
  <!-- Mobile menu -->
131
  <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
132
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
133
+ <a href="#dashboard" class="block px-3 py-2 text-base font-medium text-blue-600 hover:bg-gray-50">Tableau de bord</a>
134
+ <a href="#domains" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Mes domaines</a>
135
+ <a href="#hosting" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Hébergement</a>
136
+ <a href="#billing" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Facturation</a>
137
  <div class="pt-4 border-t">
138
+ <div class="flex items-center px-5">
139
+ <div class="flex-shrink-0">
140
+ <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  </div>
142
+ <div class="ml-3">
143
+ <div class="text-base font-medium text-gray-800">John Doe</div>
144
+ <div class="text-sm font-medium text-gray-500">john@example.com</div>
145
  </div>
146
  </div>
147
+ <div class="mt-3 space-y-1">
148
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Votre profil</a>
149
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Paramètres</a>
150
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Déconnexion</a>
151
+ </div>
152
  </div>
153
  </div>
154
  </div>
155
+ </nav>
156
 
157
+ <!-- Dashboard Content -->
158
+ <div class="flex">
159
+ <!-- Sidebar (hidden on mobile) -->
160
+ <div class="hidden md:block md:w-64 bg-white shadow-sm h-screen sticky top-16">
161
+ <div class="p-4">
162
+ <div class="flex items-center mb-6">
163
+ <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
164
+ <div class="ml-3">
165
+ <div class="text-sm font-medium text-gray-900">John Doe</div>
166
+ <div class="text-xs text-gray-500">Client depuis 2023</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
  </div>
169
 
170
+ <nav class="space-y-1">
171
+ <a href="#dashboard" class="bg-blue-50 text-blue-600 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
172
+ <i class="fas fa-tachometer-alt text-blue-500 mr-3"></i>
173
+ Tableau de bord
174
+ </a>
175
+ <a href="#domains" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
176
+ <i class="fas fa-globe text-gray-400 group-hover:text-gray-500 mr-3"></i>
177
+ Mes domaines
178
+ </a>
179
+ <a href="#hosting" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
180
+ <i class="fas fa-server text-gray-400 group-hover:text-gray-500 mr-3"></i>
181
+ Hébergement
182
+ </a>
183
+ <a href="#billing" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
184
+ <i class="fas fa-credit-card text-gray-400 group-hover:text-gray-500 mr-3"></i>
185
+ Facturation
186
+ </a>
187
+ <a href="#support" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
188
+ <i class="fas fa-headset text-gray-400 group-hover:text-gray-500 mr-3"></i>
189
+ Support
190
+ </a>
191
+ </nav>
192
+
193
+ <div class="mt-8">
194
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Compte</h3>
195
+ <nav class="mt-2 space-y-1">
196
+ <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
197
+ <i class="fas fa-user text-gray-400 group-hover:text-gray-500 mr-3"></i>
198
+ Profil
199
+ </a>
200
+ <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-3 py-2 text-sm font-medium rounded-md">
201
+ <i class="fas fa-cog text-gray-400 group-hover:text-gray-500 mr-3"></i>
202
+ Paramètres
203
+ </a>
204
+ </nav>
205
  </div>
206
  </div>
207
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
208
 
209
+ <!-- Main Content -->
210
+ <div class="flex-1">
211
+ <!-- Dashboard Header -->
212
+ <div id="dashboard" class="bg-white shadow-sm">
213
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
214
+ <div class="md:flex md:items-center md:justify-between">
215
+ <div class="flex-1 min-w-0">
216
+ <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
217
+ Tableau de bord
218
+ </h1>
219
+ </div>
220
+ <div class="mt-4 flex md:mt-0 md:ml-4">
221
+ <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
222
+ <i class="fas fa-plus mr-2"></i> Nouveau service
223
+ </button>
224
+ </div>
 
 
 
 
 
 
 
225
  </div>
226
  </div>
227
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
 
229
+ <!-- Main Content Area -->
230
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
231
+ <!-- Stats Cards -->
232
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
233
+ <!-- Active Domains -->
234
+ <div class="bg-white overflow-hidden shadow rounded-lg">
235
+ <div class="px-4 py-5 sm:p-6">
236
+ <div class="flex items-center">
237
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
238
+ <i class="fas fa-globe text-white"></i>
239
+ </div>
240
+ <div class="ml-5 w-0 flex-1">
241
+ <dt class="text-sm font-medium text-gray-500 truncate">
242
+ Domaines actifs
243
+ </dt>
244
+ <dd class="flex items-baseline">
245
+ <div class="text-2xl font-semibold text-gray-900">
246
+ 5
247
+ </div>
248
+ </dd>
249
+ </div>
250
+ </div>
251
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
  </div>
 
253
 
254
+ <!-- Hosting Usage -->
255
+ <div class="bg-white overflow-hidden shadow rounded-lg">
256
+ <div class="px-4 py-5 sm:p-6">
257
+ <div class="flex items-center">
258
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
259
+ <i class="fas fa-server text-white"></i>
260
+ </div>
261
+ <div class="ml-5 w-0 flex-1">
262
+ <dt class="text-sm font-medium text-gray-500 truncate">
263
+ Espace utilisé
264
+ </dt>
265
+ <dd class="flex items-baseline">
266
+ <div class="text-2xl font-semibold text-gray-900">
267
+ 3.2 GB
268
+ </div>
269
+ <div class="ml-2 text-sm font-medium text-gray-500">
270
+ sur 10 GB
271
+ </div>
272
+ </dd>
273
+ </div>
274
+ </div>
275
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
276
  </div>
 
277
 
278
+ <!-- Next Invoice -->
279
+ <div class="bg-white overflow-hidden shadow rounded-lg">
280
+ <div class="px-4 py-5 sm:p-6">
281
+ <div class="flex items-center">
282
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
283
+ <i class="fas fa-file-invoice-dollar text-white"></i>
284
+ </div>
285
+ <div class="ml-5 w-0 flex-1">
286
+ <dt class="text-sm font-medium text-gray-500 truncate">
287
+ Prochaine facture
288
+ </dt>
289
+ <dd class="flex items-baseline">
290
+ <div class="text-2xl font-semibold text-gray-900">
291
+ 15.99€
292
+ </div>
293
+ <div class="ml-2 text-sm font-medium text-gray-500">
294
+ 15 juin
295
+ </div>
296
+ </dd>
297
+ </div>
298
+ </div>
299
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
 
302
+ <!-- Support Tickets -->
 
303
  <div class="bg-white overflow-hidden shadow rounded-lg">
304
  <div class="px-4 py-5 sm:p-6">
305
+ <div class="flex items-center">
306
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
307
+ <i class="fas fa-headset text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
  </div>
309
+ <div class="ml-5 w-0 flex-1">
310
+ <dt class="text-sm font-medium text-gray-500 truncate">
311
+ Tickets ouverts
312
+ </dt>
313
+ <dd class="flex items-baseline">
314
+ <div class="text-2xl font-semibold text-gray-900">
315
+ 1
316
+ </div>
317
+ </dd>
318
  </div>
319
+ </div>
320
  </div>
321
  </div>
322
+ </div>
323
+
324
+ <!-- Payment Methods Section -->
325
+ <div class="mt-8">
326
+ <div class="bg-white shadow rounded-lg overflow-hidden">
327
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
328
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
329
+ Méthodes de paiement
330
+ </h3>
331
+ <p class="mt-1 text-sm text-gray-500">
332
+ Gérer vos méthodes de paiement pour les renouvellements automatiques
333
+ </p>
334
+ </div>
335
+ <div class="bg-white px-4 py-5 sm:p-6">
336
+ <div class="space-y-6">
337
+ <!-- Stripe Card -->
338
+ <div class="bg-gray-50 p-4 rounded-lg">
339
+ <div class="flex items-center justify-between">
340
+ <div class="flex items-center">
341
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-8">
342
+ <div class="ml-4">
343
+ <div class="text-sm font-medium text-gray-900">Carte Visa •••• 4242</div>
344
+ <div class="text-sm text-gray-500">Expire le 04/2025</div>
345
+ </div>
346
+ </div>
347
+ <div>
348
+ <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
349
+ Modifier
350
+ </button>
351
+ </div>
352
  </div>
 
 
 
 
 
353
  </div>
354
+
355
+ <!-- PayPal -->
356
+ <div class="bg-gray-50 p-4 rounded-lg">
357
+ <div class="flex items-center justify-between">
358
+ <div class="flex items-center">
359
+ <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-8">
360
+ <div class="ml-4">
361
+ <div class="text-sm font-medium text-gray-900">john.doe@example.com</div>
362
+ <div class="text-sm text-gray-500">Compte PayPal</div>
363
+ </div>
364
+ </div>
365
+ <div>
366
+ <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
367
+ Modifier
368
+ </button>
369
+ </div>
370
  </div>
 
 
 
 
371
  </div>
372
+
373
+ <!-- Add Payment Method -->
374
+ <div class="border-t border-gray-200 pt-6">
375
+ <h4 class="text-lg font-medium text-gray-900 mb-4">Ajouter une méthode de paiement</h4>
376
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
377
+ <!-- Stripe Button -->
378
+ <button id="stripe-button" type="button" class="stripe-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
379
+ <i class="fab fa-cc-stripe mr-2"></i> Ajouter une carte
380
+ </button>
381
+
382
+ <!-- PayPal Button -->
383
+ <button id="paypal-button" type="button" class="paypal-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
384
+ <i class="fab fa-paypal mr-2"></i> Lier PayPal
385
+ </button>
386
  </div>
 
 
 
 
387
  </div>
388
  </div>
 
 
 
 
 
 
 
 
 
 
389
  </div>
390
  </div>
391
  </div>
 
 
 
392
 
393
+ <!-- Recent Invoices -->
394
+ <div class="mt-8">
395
+ <div class="bg-white shadow rounded-lg overflow-hidden">
396
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
397
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
398
+ Factures récentes
399
+ </h3>
400
+ <p class="mt-1 text-sm text-gray-500">
401
+ Historique de vos 5 dernières factures
402
+ </p>
403
+ </div>
404
+ <div class="bg-white px-4 py-5 sm:p-6">
405
+ <div class="overflow-x-auto">
406
+ <table class="min-w-full divide-y divide-gray-200">
407
+ <thead class="bg-gray-50">
408
+ <tr>
409
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
410
+ N° Facture
411
+ </th>
412
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
413
+ Date
414
+ </th>
415
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
416
+ Montant
417
+ </th>
418
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
419
+ Statut
420
+ </th>
421
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
422
+ Action
423
+ </th>
424
+ </tr>
425
+ </thead>
426
+ <tbody class="bg-white divide-y divide-gray-200">
427
+ <tr>
428
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
429
+ #HSW-2023-0012
430
+ </td>
431
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
432
+ 15 mai 2023
433
+ </td>
434
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
435
+ 15.99€
436
+ </td>
437
+ <td class="px-6 py-4 whitespace-nowrap">
438
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
439
+ Payée
440
+ </span>
441
+ </td>
442
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
443
+ <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a>
444
+ </td>
445
+ </tr>
446
+ <tr>
447
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
448
+ #HSW-2023-0011
449
+ </td>
450
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
451
+ 15 avril 2023
452
+ </td>
453
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
454
+ 15.99€
455
+ </td>
456
+ <td class="px-6 py-4 whitespace-nowrap">
457
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
458
+ Payée
459
+ </span>
460
+ </td>
461
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
462
+ <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a>
463
+ </td>
464
+ </tr>
465
+ <tr>
466
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
467
+ #HSW-2023-0010
468
+ </td>
469
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
470
+ 15 mars 2023
471
+ </td>
472
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
473
+ 15.99€
474
+ </td>
475
+ <td class="px-6 py-4 whitespace-nowrap">
476
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
477
+ Payée
478
+ </span>
479
+ </td>
480
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
481
+ <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a>
482
+ </td>
483
+ </tr>
484
+ <tr>
485
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
486
+ #HSW-2023-0009
487
+ </td>
488
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
489
+ 15 février 2023
490
+ </td>
491
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
492
+ 15.99€
493
+ </td>
494
+ <td class="px-6 py-4 whitespace-nowrap">
495
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
496
+ Payée
497
+ </span>
498
+ </td>
499
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
500
+ <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a>
501
+ </td>
502
+ </tr>
503
+ <tr>
504
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
505
+ #HSW-2023-0008
506
+ </td>
507
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
508
+ 15 janvier 2023
509
+ </td>
510
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
511
+ 15.99€
512
+ </td>
513
+ <td class="px-6 py-4 whitespace-nowrap">
514
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
515
+ Payée
516
+ </span>
517
+ </td>
518
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
519
+ <a href="#" class="text-blue-600 hover:text-blue-900">Télécharger</a>
520
+ </td>
521
+ </tr>
522
+ </tbody>
523
+ </table>
524
+ </div>
525
+ </div>
526
+ </div>
527
  </div>
 
 
 
 
 
 
528
 
529
+ <!-- Shopping Cart Modal -->
530
+ <div id="cart-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
531
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
532
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
533
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 
 
 
 
 
 
 
534
  </div>
535
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
536
+ <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">
537
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
538
+ <div class="sm:flex sm:items-start">
539
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
540
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
541
+ Votre panier
542
+ </h3>
543
+ <div id="modal-cart-items" class="divide-y divide-gray-200">
544
+ <!-- Cart items will be added here -->
545
+ <div class="py-4 text-center text-gray-500">
546
+ Votre panier est vide
547
+ </div>
548
+ </div>
549
+ <div class="mt-6 border-t border-gray-200 pt-4">
550
+ <div class="flex justify-between mb-4">
551
+ <span class="text-base font-medium text-gray-900">Total:</span>
552
+ <span id="modal-cart-total" class="text-base font-medium">0.00€</span>
553
+ </div>
554
+ <div class="grid grid-cols-1 gap-4">
555
+ <button id="modal-stripe-button" type="button" class="stripe-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
556
+ <i class="fab fa-cc-stripe mr-2"></i> Payer avec Stripe
557
+ </button>
558
+ <button id="modal-paypal-button" type="button" class="paypal-button inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-md text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
559
+ <i class="fab fa-paypal mr-2"></i> Payer avec PayPal
560
+ </button>
561
+ </div>
562
+ </div>
563
+ </div>
564
  </div>
565
+ </div>
566
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
567
+ <button type="button" onclick="closeCartModal()" 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">
568
+ Continuer mes achats
569
+ </button>
570
  </div>
571
  </div>
572
  </div>
573
  </div>
 
 
 
 
 
 
 
 
574
  </div>
575
  </div>
576
  </div>
 
581
  document.getElementById('mobile-menu').classList.toggle('hidden');
582
  });
583
 
584
+ // User menu toggle
585
+ document.getElementById('user-menu-button').addEventListener('click', function() {
586
+ document.getElementById('user-menu').classList.toggle('hidden');
 
 
 
 
 
587
  });
588
 
589
+ // Cart dropdown toggle
590
+ document.getElementById('cart-button').addEventListener('click', function(e) {
591
+ e.stopPropagation();
592
+ document.getElementById('cart-dropdown').classList.toggle('hidden');
 
 
 
 
 
 
 
 
 
593
  });
594
 
595
+ // Close dropdown when clicking outside
596
+ document.addEventListener('click', function() {
597
+ document.getElementById('cart-dropdown').classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
598
  });
599
 
600
+ // Sample cart data
601
+ let cartItems = [
602
+ { id: 1, name: 'Domaine .com', price: 9.99, quantity: 1 },
603
+ { id: 2, name: 'Hébergement Premium', price: 15.99, quantity: 1 }
604
+ ];
605
 
606
+ // Update cart display
607
+ function updateCartDisplay() {
608
+ const cartCount = document.getElementById('cart-count');
609
+ const cartItemsContainer = document.getElementById('cart-items');
610
+ const cartTotal = document.getElementById('cart-total');
611
+ const modalCartItems = document.getElementById('modal-cart-items');
612
+ const modalCartTotal = document.getElementById('modal-cart-total');
613
 
614
+ // Update cart count
615
+ cartCount.textContent = cartItems.reduce((total, item) => total + item.quantity, 0);
 
 
 
 
 
 
 
 
616
 
617
+ // Update cart dropdown
618
+ if (cartItems.length === 0) {
619
+ cartItemsContainer.innerHTML = '<div class="px-4 py-3 text-center text-gray-500">Votre panier est vide</div>';
620
+ cartTotal.textContent = '0.00€';
621
+ } else {
622
+ cartItemsContainer.innerHTML = cartItems.map(item => `
623
+ <div class="cart-item px-4 py-3 flex justify-between items-center border-b">
624
+ <div>
625
+ <div class="text-sm font-medium">${item.name}</div>
626
+ <div class="text-sm text-gray-500">${item.quantity} x ${item.price.toFixed(2)}€</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
627
  </div>
628
+ <div class="text-sm font-medium">${(item.quantity * item.price).toFixed(2)}€</div>
629
+ </div>
630
+ `).join('');
631
+
632
+ const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
633
+ cartTotal.textContent = `${total.toFixed(2)}€`;
634
+ }
635
+
636
+ // Update modal cart
637
+ if (cartItems.length === 0) {
638
+ modalCartItems.innerHTML = '<div class="py-4 text-center text-gray-500">Votre panier est vide</div>';
639
+ modalCartTotal.textContent = '0.00€';
640
+ } else {
641
+ modalCartItems.innerHTML = cartItems.map(item => `
642
+ <div class="cart-item py-4 flex justify-between items-center">
643
  <div>
644
+ <div class="text-sm font-medium">${item.name}</div>
645
+ <div class="flex items-center mt-1">
646
+ <button onclick="updateQuantity(${item.id}, -1)" class="text-gray-500 hover:text-gray-700">
647
+ <i class="fas fa-minus-circle"></i>
648
+ </button>
649
+ <span class="mx-2">${item.quantity}</span>
650
+ <button onclick="updateQuantity(${item.id}, 1)" class="text-gray-500 hover:text-gray-700">
651
+ <i class="fas fa-plus-circle"></i>
652
  </button>
653
+ </div>
654
+ </div>
655
+ <div class="flex items-center">
656
+ <div class="text-sm font-medium mr-4">${(item.quantity * item.price).toFixed(2)}€</div>
657
+ <button onclick="removeFromCart(${item.id})" class="text-red-500 hover:text-red-700">
658
+ <i class="fas fa-trash"></i>
659
+ </button>
660
  </div>
661
+ </div>
662
+ `).join('');
 
 
663
 
664
+ const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
665
+ modalCartTotal.textContent = `${total.toFixed(2)}€`;
666
+ }
 
 
 
 
667
  }
668
 
669
+ // Update item quantity
670
+ function updateQuantity(id, change) {
671
+ const item = cartItems.find(item => item.id === id);
672
+ if (item) {
673
+ item.quantity += change;
674
+ if (item.quantity <= 0) {
675
+ cartItems = cartItems.filter(item => item.id !== id);
676
+ }
677
+ updateCartDisplay();
678
+ }
679
+ }
680
+
681
+ // Remove item from cart
682
+ function removeFromCart(id) {
683
+ cartItems = cartItems.filter(item => item.id !== id);
684
+ updateCartDisplay();
685
  }
686
+
687
+ // Checkout button
688
+ document.getElementById('checkout-button').addEventListener('click', function() {
689
+ document.getElementById('cart-dropdown').classList.add('hidden');
690
+ document.getElementById('cart-modal').classList.remove('hidden');
691
+ document.body.classList.add('overflow-hidden');
692
+ });
693
+
694
+ // Close cart modal
695
+ function closeCartModal() {
696
+ document.getElementById('cart-modal').classList.add('hidden');
697
+ document.body.classList.remove('overflow-hidden');
698
+ }
699
+
700
+ // Stripe button handler
701
+ document.getElementById('stripe-button').addEventListener('click', function() {
702
+ alert('Intégration Stripe: Redirection vers le formulaire de paiement');
703
+ });
704
+
705
+ document.getElementById('modal-stripe-button').addEventListener('click', function() {
706
+ alert('Intégration Stripe: Redirection vers le formulaire de paiement');
707
+ });
708
+
709
+ // PayPal button handler
710
+ document.getElementById('paypal-button').addEventListener('click', function() {
711
+ alert('Intégration PayPal: Redirection vers PayPal');
712
+ });
713
+
714
+ document.getElementById('modal-paypal-button').addEventListener('click', function() {
715
+ alert('Intégration PayPal: Redirection vers PayPal');
716
+ });
717
+
718
+ // Initialize cart display
719
+ updateCartDisplay();
720
  </script>
721
  <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>
722
  </html>
prompts.txt CHANGED
@@ -9,4 +9,5 @@ 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
 
 
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
13
+ ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat