Hugging Face's logo

Spaces:
docto41
/
freedomain
Running

App Files Community
docto41 commited on
Commit
866872e
·
verified ·
1 Parent(s): 4b0b68f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1209 -19
  3. prompts.txt +5 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Freedomain
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: freedomain
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1209 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FreeDomain Registry - Services 100% Gratuits</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .domain-search {
14
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
15
+ }
16
+ .feature-card:hover {
17
+ transform: translateY(-5px);
18
+ transition: all 0.3s ease;
19
+ }
20
+ .pulse {
21
+ animation: pulse 2s infinite;
22
+ }
23
+ @keyframes pulse {
24
+ 0% {
25
+ box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.7);
26
+ }
27
+ 70% {
28
+ box-shadow: 0 0 0 10px rgba(167, 119, 227, 0);
29
+ }
30
+ 100% {
31
+ box-shadow: 0 0 0 0 rgba(167, 119, 227, 0);
32
+ }
33
+ }
34
+ .cart-item {
35
+ transition: all 0.3s ease;
36
+ }
37
+ .cart-item:hover {
38
+ background-color: #f9fafb;
39
+ }
40
+ .dashboard-nav {
41
+ min-height: calc(100vh - 64px);
42
+ }
43
+ .dashboard-content {
44
+ min-height: calc(100vh - 64px);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="font-sans bg-gray-50">
49
+ <!-- Navigation -->
50
+ <nav class="bg-white shadow-sm">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex justify-between h-16">
53
+ <div class="flex items-center">
54
+ <div class="flex-shrink-0 flex items-center">
55
+ <i class="fas fa-globe text-purple-600 text-2xl mr-2"></i>
56
+ <span class="text-xl font-bold text-gray-900">FreeDomain</span>
57
+ </div>
58
+ </div>
59
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
60
+ <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-purple-500 text-sm font-medium">Accueil</a>
61
+ <a href="#services" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Services</a>
62
+ <a href="#faq" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">FAQ</a>
63
+ <a href="#contact" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>
64
+ </div>
65
+ <div class="flex items-center">
66
+ <button id="login-btn" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Connexion</button>
67
+ <button id="register-btn" class="ml-4 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">S'inscrire</button>
68
+ <button id="cart-btn" class="ml-4 relative">
69
+ <i class="fas fa-shopping-cart text-gray-600 hover:text-purple-600 text-xl"></i>
70
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
71
+ </button>
72
+ <button id="dashboard-btn" class="ml-4 hidden">
73
+ <i class="fas fa-tachometer-alt text-gray-600 hover:text-purple-600 text-xl"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Main Content -->
81
+ <div id="main-content">
82
+ <!-- Hero Section -->
83
+ <div class="gradient-bg">
84
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
85
+ <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
86
+ Enregistrez votre domaine gratuitement
87
+ </h1>
88
+ <p class="mt-6 max-w-lg mx-auto text-xl text-purple-100">
89
+ Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes
90
+ </p>
91
+ <div class="mt-10 max-w-md mx-auto sm:max-w-none sm:flex sm:justify-center">
92
+ <div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
93
+ <button id="search-domain-btn" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-purple-50 sm:px-8">
94
+ <i class="fas fa-search mr-2"></i> Rechercher un domaine
95
+ </button>
96
+ <button id="register-now-btn" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-800 bg-opacity-60 hover:bg-opacity-70 sm:px-8">
97
+ <i class="fas fa-user-plus mr-2"></i> Créer un compte
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Domain Search -->
105
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10" id="domain-search">
106
+ <div class="domain-search bg-white rounded-lg shadow-xl p-6">
107
+ <div class="flex flex-col md:flex-row">
108
+ <div class="flex-grow">
109
+ <input type="text" id="domain-input" class="w-full px-4 py-3 border border-gray-300 rounded-l-md focus:ring-purple-500 focus:border-purple-500" placeholder="Recherchez votre domaine parfait...">
110
+ </div>
111
+ <div class="mt-2 md:mt-0 md:ml-2">
112
+ <select id="domain-extension" class="w-full md:w-auto px-4 py-3 border border-gray-300 text-gray-700 rounded-r-md focus:ring-purple-500 focus:border-purple-500">
113
+ <option>.com</option>
114
+ <option>.net</option>
115
+ <option>.org</option>
116
+ <option>.fr</option>
117
+ <option>.io</option>
118
+ <option>.tech</option>
119
+ </select>
120
+ </div>
121
+ </div>
122
+ <button id="search-button" class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-md transition duration-300">
123
+ <i class="fas fa-search mr-2"></i> Vérifier la disponibilité
124
+ </button>
125
+ <div id="search-result" class="mt-4 hidden p-4 rounded bg-gray-50"></div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Features -->
130
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8" id="services">
131
+ <div class="text-center">
132
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
133
+ Tout ce dont vous avez besoin pour votre site web
134
+ </h2>
135
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
136
+ Des services complets 100% gratuits pour lancer votre présence en ligne
137
+ </p>
138
+ </div>
139
+
140
+ <div class="mt-20">
141
+ <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
142
+ <!-- Feature 1 -->
143
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md">
144
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
145
+ <i class="fas fa-globe text-xl"></i>
146
+ </div>
147
+ <div class="mt-6">
148
+ <h3 class="text-lg font-medium text-gray-900">Noms de domaine gratuits</h3>
149
+ <p class="mt-2 text-base text-gray-500">
150
+ Obtenez votre propre nom de domaine gratuitement avec des extensions populaires.
151
+ </p>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Feature 2 -->
156
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md">
157
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
158
+ <i class="fas fa-lock text-xl"></i>
159
+ </div>
160
+ <div class="mt-6">
161
+ <h3 class="text-lg font-medium text-gray-900">Certificats SSL gratuits</h3>
162
+ <p class="mt-2 text-base text-gray-500">
163
+ Sécurisez votre site avec des certificats SSL inclus automatiquement.
164
+ </p>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Feature 3 -->
169
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md">
170
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
171
+ <i class="fas fa-server text-xl"></i>
172
+ </div>
173
+ <div class="mt-6">
174
+ <h3 class="text-lg font-medium text-gray-900">Hébergement gratuit</h3>
175
+ <p class="mt-2 text-base text-gray-500">
176
+ Bénéficiez d'un hébergement web performant avec bande passante illimitée.
177
+ </p>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Feature 4 -->
182
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md">
183
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
184
+ <i class="fas fa-cog text-xl"></i>
185
+ </div>
186
+ <div class="mt-6">
187
+ <h3 class="text-lg font-medium text-gray-900">DNS managé</h3>
188
+ <p class="mt-2 text-base text-gray-500">
189
+ Gestion simplifiée des DNS avec interface intuitive et propagation rapide.
190
+ </p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- CTA Section -->
198
+ <div class="bg-purple-700">
199
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
200
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
201
+ <span class="block">Prêt à lancer votre site web?</span>
202
+ <span class="block">Créer un compte maintenant.</span>
203
+ </h2>
204
+ <div class="mt-8 flex justify-center">
205
+ <div class="inline-flex rounded-md shadow">
206
+ <button id="cta-register-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50 sm:px-8">
207
+ <i class="fas fa-user-plus mr-2"></i> S'inscrire gratuitement
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Testimonials -->
215
+ <div class="bg-white">
216
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
217
+ <h2 class="text-center text-3xl font-extrabold text-gray-900 sm:text-4xl">
218
+ Ce que nos utilisateurs disent
219
+ </h2>
220
+ <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
221
+ <!-- Testimonial 1 -->
222
+ <div class="pt-6">
223
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
224
+ <div class="-mt-6">
225
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
226
+ <i class="fas fa-user text-xl"></i>
227
+ </div>
228
+ <div class="mt-5">
229
+ <h3 class="text-lg font-medium text-gray-900">Jean Dupont</h3>
230
+ <p class="mt-2 text-base text-gray-600">
231
+ "J'ai pu lancer mon blog en quelques minutes seulement. Tout est vraiment gratuit comme promis!"
232
+ </p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Testimonial 2 -->
239
+ <div class="pt-6">
240
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
241
+ <div class="-mt-6">
242
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
243
+ <i class="fas fa-user text-xl"></i>
244
+ </div>
245
+ <div class="mt-5">
246
+ <h3 class="text-lg font-medium text-gray-900">Marie Lambert</h3>
247
+ <p class="mt-2 text-base text-gray-600">
248
+ "Le service client est exceptionnel. Ils m'ont aidé à configurer mon DNS en moins d'une heure."
249
+ </p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Testimonial 3 -->
256
+ <div class="pt-6">
257
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
258
+ <div class="-mt-6">
259
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
260
+ <i class="fas fa-user text-xl"></i>
261
+ </div>
262
+ <div class="mt-5">
263
+ <h3 class="text-lg font-medium text-gray-900">Thomas Martin</h3>
264
+ <p class="mt-2 text-base text-gray-600">
265
+ "Parfait pour les startups avec un budget limité. SSL gratuit et hébergement inclus, que demander de plus?"
266
+ </p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- FAQ -->
276
+ <div class="bg-gray-50" id="faq">
277
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
278
+ <div class="lg:max-w-4xl lg:mx-auto">
279
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl text-center">
280
+ Questions fréquentes
281
+ </h2>
282
+ <div class="mt-12 space-y-6">
283
+ <!-- FAQ Item 1 -->
284
+ <div class="bg-white shadow overflow-hidden rounded-lg">
285
+ <div class="px-4 py-5 sm:p-6">
286
+ <h3 class="text-lg font-medium text-gray-900 flex items-center">
287
+ <i class="fas fa-question-circle text-purple-600 mr-2"></i>
288
+ Est-ce vraiment gratuit?
289
+ </h3>
290
+ <div class="mt-2 text-sm text-gray-500">
291
+ <p>Oui, tous nos services de base (domaine, SSL, DNS et hébergement) sont 100% gratuits sans frais cachés. Nous offrons également des options premium pour ceux qui ont besoin de fonctionnalités avancées.</p>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- FAQ Item 2 -->
297
+ <div class="bg-white shadow overflow-hidden rounded-lg">
298
+ <div class="px-4 py-5 sm:p-6">
299
+ <h3 class="text-lg font-medium text-gray-900 flex items-center">
300
+ <i class="fas fa-question-circle text-purple-600 mr-2"></i>
301
+ Combien de temps dure l'enregistrement gratuit?
302
+ </h3>
303
+ <div class="mt-2 text-sm text-gray-500">
304
+ <p>Votre domaine est enregistré gratuitement pour 1 an. Vous pouvez le renouveler gratuitement chaque année tant que vous maintenez une utilisation active.</p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- FAQ Item 3 -->
310
+ <div class="bg-white shadow overflow-hidden rounded-lg">
311
+ <div class="px-4 py-5 sm:p-6">
312
+ <h3 class="text-lg font-medium text-gray-900 flex items-center">
313
+ <i class="fas fa-question-circle text-purple-600 mr-2"></i>
314
+ Quelles extensions de domaine sont disponibles?
315
+ </h3>
316
+ <div class="mt-2 text-sm text-gray-500">
317
+ <p>Nous offrons les extensions les plus populaires comme .com, .net, .org et plusieurs extensions régionales. Certaines extensions premium peuvent avoir des frais supplémentaires.</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Footer -->
327
+ <footer class="bg-gray-800" id="contact">
328
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
329
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
330
+ <div>
331
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3>
332
+ <ul class="mt-4 space-y-4">
333
+ <li><a href="#services" class="text-base text-gray-300 hover:text-white">Noms de domaine</a></li>
334
+ <li><a href="#services" class="text-base text-gray-300 hover:text-white">Hébergement web</a></li>
335
+ <li><a href="#services" class="text-base text-gray-300 hover:text-white">Certificats SSL</a></li>
336
+ <li><a href="#services" class="text-base text-gray-300 hover:text-white">DNS managé</a></li>
337
+ </ul>
338
+ </div>
339
+ <div>
340
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
341
+ <ul class="mt-4 space-y-4">
342
+ <li><a href="#faq" class="text-base text-gray-300 hover:text-white">Centre d'aide</a></li>
343
+ <li><a href="#faq" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
344
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Statut du service</a></li>
345
+ <li><a href="#contact" class="text-base text-gray-300 hover:text-white">Nous contacter</a></li>
346
+ </ul>
347
+ </div>
348
+ <div>
349
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3>
350
+ <ul class="mt-4 space-y-4">
351
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li>
352
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
353
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li>
354
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Presse</a></li>
355
+ </ul>
356
+ </div>
357
+ <div>
358
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
359
+ <ul class="mt-4 space-y-4">
360
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Confidentialité</a></li>
361
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Conditions</a></li>
362
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Politique de cookies</a></li>
363
+ </ul>
364
+ </div>
365
+ </div>
366
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
367
+ <div class="flex space-x-6 md:order-2">
368
+ <a href="#" class="text-gray-400 hover:text-white">
369
+ <i class="fab fa-facebook-f"></i>
370
+ </a>
371
+ <a href="#" class="text-gray-400 hover:text-white">
372
+ <i class="fab fa-twitter"></i>
373
+ </a>
374
+ <a href="#" class="text-gray-400 hover:text-white">
375
+ <i class="fab fa-instagram"></i>
376
+ </a>
377
+ <a href="#" class="text-gray-400 hover:text-white">
378
+ <i class="fab fa-github"></i>
379
+ </a>
380
+ </div>
381
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
382
+ &copy; 2023 FreeDomain Registry. Tous droits réservés.
383
+ </p>
384
+ </div>
385
+ </div>
386
+ </footer>
387
+ </div>
388
+
389
+ <!-- Dashboard Content (Hidden by default) -->
390
+ <div id="dashboard-content" class="hidden">
391
+ <div class="flex">
392
+ <!-- Dashboard Sidebar -->
393
+ <div class="dashboard-nav w-64 bg-gray-800 text-white">
394
+ <div class="p-4">
395
+ <h2 class="text-xl font-bold">Tableau de bord</h2>
396
+ <p class="text-gray-400 text-sm mt-1">Administration</p>
397
+ </div>
398
+ <nav class="mt-6">
399
+ <div>
400
+ <a href="#" class="dashboard-nav-item flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
401
+ <i class="fas fa-tachometer-alt mr-3"></i>
402
+ Tableau de bord
403
+ </a>
404
+ <a href="#" class="dashboard-nav-item flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
405
+ <i class="fas fa-users mr-3"></i>
406
+ Utilisateurs
407
+ </a>
408
+ <a href="#" class="dashboard-nav-item flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
409
+ <i class="fas fa-globe mr-3"></i>
410
+ Domaines
411
+ </a>
412
+ <a href="#" class="dashboard-nav-item flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
413
+ <i class="fas fa-credit-card mr-3"></i>
414
+ Paiements
415
+ </a>
416
+ <a href="#" class="dashboard-nav-item flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
417
+ <i class="fas fa-cog mr-3"></i>
418
+ Paramètres
419
+ </a>
420
+ </div>
421
+ </nav>
422
+ </div>
423
+
424
+ <!-- Dashboard Main Content -->
425
+ <div class="dashboard-content flex-1 bg-gray-100">
426
+ <div class="p-6">
427
+ <h1 class="text-2xl font-bold text-gray-800">Tableau de bord administratif</h1>
428
+
429
+ <!-- Stats Cards -->
430
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-6">
431
+ <div class="bg-white rounded-lg shadow p-6">
432
+ <div class="flex items-center">
433
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
434
+ <i class="fas fa-users text-xl"></i>
435
+ </div>
436
+ <div class="ml-4">
437
+ <p class="text-sm font-medium text-gray-500">Utilisateurs</p>
438
+ <p class="text-2xl font-semibold text-gray-800">1,254</p>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ <div class="bg-white rounded-lg shadow p-6">
443
+ <div class="flex items-center">
444
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
445
+ <i class="fas fa-globe text-xl"></i>
446
+ </div>
447
+ <div class="ml-4">
448
+ <p class="text-sm font-medium text-gray-500">Domaines</p>
449
+ <p class="text-2xl font-semibold text-gray-800">892</p>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ <div class="bg-white rounded-lg shadow p-6">
454
+ <div class="flex items-center">
455
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
456
+ <i class="fas fa-credit-card text-xl"></i>
457
+ </div>
458
+ <div class="ml-4">
459
+ <p class="text-sm font-medium text-gray-500">Revenus</p>
460
+ <p class="text-2xl font-semibold text-gray-800">$12,345</p>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ <div class="bg-white rounded-lg shadow p-6">
465
+ <div class="flex items-center">
466
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
467
+ <i class="fas fa-chart-line text-xl"></i>
468
+ </div>
469
+ <div class="ml-4">
470
+ <p class="text-sm font-medium text-gray-500">Croissance</p>
471
+ <p class="text-2xl font-semibold text-gray-800">+12%</p>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Recent Payments -->
478
+ <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
479
+ <div class="px-6 py-4 border-b border-gray-200">
480
+ <h2 class="text-lg font-semibold text-gray-800">Derniers paiements</h2>
481
+ </div>
482
+ <div class="overflow-x-auto">
483
+ <table class="min-w-full divide-y divide-gray-200">
484
+ <thead class="bg-gray-50">
485
+ <tr>
486
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
487
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
488
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
489
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Méthode</th>
490
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
491
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
492
+ </tr>
493
+ </thead>
494
+ <tbody class="bg-white divide-y divide-gray-200">
495
+ <tr>
496
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12345</td>
497
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user@example.com</td>
498
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$49.99</td>
499
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
500
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
501
+ PayPal
502
+ </span>
503
+ </td>
504
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
505
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
506
+ Complété
507
+ </span>
508
+ </td>
509
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
510
+ </tr>
511
+ <tr>
512
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12344</td>
513
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">client@example.com</td>
514
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$99.99</td>
515
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
516
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
517
+ Stripe
518
+ </span>
519
+ </td>
520
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
521
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
522
+ Complété
523
+ </span>
524
+ </td>
525
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td>
526
+ </tr>
527
+ <tr>
528
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#12343</td>
529
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">customer@example.com</td>
530
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$29.99</td>
531
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
532
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
533
+ PayPal
534
+ </span>
535
+ </td>
536
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
537
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
538
+ En attente
539
+ </span>
540
+ </td>
541
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13</td>
542
+ </tr>
543
+ </tbody>
544
+ </table>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Payment Methods Configuration -->
549
+ <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
550
+ <div class="px-6 py-4 border-b border-gray-200">
551
+ <h2 class="text-lg font-semibold text-gray-800">Configuration des paiements</h2>
552
+ </div>
553
+ <div class="p-6">
554
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
555
+ <!-- PayPal Configuration -->
556
+ <div class="border rounded-lg p-4">
557
+ <div class="flex items-center mb-4">
558
+ <i class="fab fa-paypal text-2xl text-blue-500 mr-3"></i>
559
+ <h3 class="text-lg font-medium">PayPal</h3>
560
+ </div>
561
+ <div class="space-y-4">
562
+ <div>
563
+ <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label>
564
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" value="AVHkPtbQ7Q5J1kZjxPq7vHvHZtFZ">
565
+ </div>
566
+ <div>
567
+ <label class="block text-sm font-medium text-gray-700 mb-1">Secret</label>
568
+ <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" value="************">
569
+ </div>
570
+ <div class="flex items-center">
571
+ <input type="checkbox" id="paypal-active" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
572
+ <label for="paypal-active" class="ml-2 block text-sm text-gray-700">Activer PayPal</label>
573
+ </div>
574
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">
575
+ Enregistrer les modifications
576
+ </button>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Stripe Configuration -->
581
+ <div class="border rounded-lg p-4">
582
+ <div class="flex items-center mb-4">
583
+ <i class="fab fa-stripe text-2xl text-purple-500 mr-3"></i>
584
+ <h3 class="text-lg font-medium">Stripe</h3>
585
+ </div>
586
+ <div class="space-y-4">
587
+ <div>
588
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé publique</label>
589
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" value="pk_test_51Hq7w9KvQFv5pZ3Q3J3J3J3">
590
+ </div>
591
+ <div>
592
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé secrète</label>
593
+ <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" value="************">
594
+ </div>
595
+ <div class="flex items-center">
596
+ <input type="checkbox" id="stripe-active" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
597
+ <label for="stripe-active" class="ml-2 block text-sm text-gray-700">Activer Stripe</label>
598
+ </div>
599
+ <button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium">
600
+ Enregistrer les modifications
601
+ </button>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+
612
+ <!-- Floating CTA Button -->
613
+ <div class="fixed bottom-6 right-6">
614
+ <button id="chat-button" class="pulse w-16 h-16 rounded-full bg-purple-600 text-white shadow-lg flex items-center justify-center">
615
+ <i class="fas fa-comment-dots text-2xl"></i>
616
+ </button>
617
+ </div>
618
+
619
+ <!-- Login Modal -->
620
+ <div id="login-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
621
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
622
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
623
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
624
+ </div>
625
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
626
+ <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">
627
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
628
+ <div class="sm:flex sm:items-start">
629
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
630
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Connexion à votre compte</h3>
631
+ <form id="login-form">
632
+ <div class="mb-4">
633
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
634
+ <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-purple-500 focus:border-purple-500" required>
635
+ </div>
636
+ <div class="mb-4">
637
+ <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
638
+ <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required>
639
+ </div>
640
+ <div class="flex items-center justify-between mb-4">
641
+ <div class="flex items-center">
642
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
643
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label>
644
+ </div>
645
+ <div class="text-sm">
646
+ <a href="#" class="font-medium text-purple-600 hover:text-purple-500">Mot de passe oublié?</a>
647
+ </div>
648
+ </div>
649
+ </form>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
654
+ <button type="button" id="login-submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
655
+ Se connecter
656
+ </button>
657
+ <button type="button" id="login-cancel" 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-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
658
+ Annuler
659
+ </button>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+
665
+ <!-- Register Modal -->
666
+ <div id="register-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
667
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
668
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
669
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
670
+ </div>
671
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
672
+ <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">
673
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
674
+ <div class="sm:flex sm:items-start">
675
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
676
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Créer un compte gratuit</h3>
677
+ <form id="register-form">
678
+ <div class="mb-4">
679
+ <label for="reg-email" class="block text-sm font-medium text-gray-700">Email</label>
680
+ <input type="email" id="reg-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required>
681
+ </div>
682
+ <div class="mb-4">
683
+ <label for="reg-password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
684
+ <input type="password" id="reg-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required>
685
+ </div>
686
+ <div class="mb-4">
687
+ <label for="reg-confirm-password" class="block text-sm font-medium text-gray-700">Confirmer le mot de passe</label>
688
+ <input type="password" id="reg-confirm-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500" required>
689
+ </div>
690
+ <div class="flex items-center mb-4">
691
+ <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" required>
692
+ <label for="terms" class="ml-2 block text-sm text-gray-700">J'accepte les <a href="#" class="text-purple-600 hover:text-purple-500">conditions d'utilisation</a></label>
693
+ </div>
694
+ </form>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
699
+ <button type="button" id="register-submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
700
+ S'inscrire
701
+ </button>
702
+ <button type="button" id="register-cancel" 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-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
703
+ Annuler
704
+ </button>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+
710
+ <!-- Chat Modal -->
711
+ <div id="chat-modal" class="fixed bottom-20 right-6 z-50 hidden">
712
+ <div class="w-80 bg-white rounded-lg shadow-xl overflow-hidden">
713
+ <div class="bg-purple-600 px-4 py-3 flex justify-between items-center">
714
+ <h3 class="text-white font-medium">Support en direct</h3>
715
+ <button id="chat-close" class="text-white hover:text-purple-200">
716
+ <i class="fas fa-times"></i>
717
+ </button>
718
+ </div>
719
+ <div class="p-4 h-64 overflow-y-auto">
720
+ <div class="mb-4">
721
+ <div class="bg-gray-100 rounded-lg p-3 max-w-xs">
722
+ <p class="text-sm">Bonjour! Comment puis-je vous aider aujourd'hui?</p>
723
+ </div>
724
+ </div>
725
+ </div>
726
+ <div class="border-t p-4">
727
+ <div class="flex">
728
+ <input type="text" placeholder="Tapez votre message..." class="flex-1 border rounded-l-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
729
+ <button class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700">
730
+ <i class="fas fa-paper-plane"></i>
731
+ </button>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+
737
+ <!-- Cart Modal -->
738
+ <div id="cart-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
739
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
740
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
741
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
742
+ </div>
743
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
744
+ <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">
745
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
746
+ <div class="sm:flex sm:items-start">
747
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
748
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Votre panier</h3>
749
+ <div id="cart-items" class="mb-4 max-h-96 overflow-y-auto">
750
+ <!-- Cart items will be added here dynamically -->
751
+ <p class="text-gray-500 text-center py-4">Votre panier est vide</p>
752
+ </div>
753
+ <div class="border-t pt-4">
754
+ <div class="flex justify-between mb-2">
755
+ <span class="font-medium">Total:</span>
756
+ <span id="cart-total" class="font-bold">0.00 €</span>
757
+ </div>
758
+ <div class="mt-4 grid grid-cols-2 gap-2">
759
+ <button id="paypal-checkout" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded flex items-center justify-center">
760
+ <i class="fab fa-paypal mr-2"></i> PayPal
761
+ </button>
762
+ <button id="stripe-checkout" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded flex items-center justify-center">
763
+ <i class="fab fa-cc-stripe mr-2"></i> Stripe
764
+ </button>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
771
+ <button type="button" id="cart-close" 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-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
772
+ Fermer
773
+ </button>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </div>
778
+
779
+ <!-- Payment Processing Modal -->
780
+ <div id="payment-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
781
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
782
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
783
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
784
+ </div>
785
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
786
+ <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">
787
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
788
+ <div class="sm:flex sm:items-start">
789
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
790
+ <i class="fas fa-credit-card text-purple-600"></i>
791
+ </div>
792
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
793
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="payment-modal-title">Paiement en cours</h3>
794
+ <div class="mt-2">
795
+ <p class="text-sm text-gray-500" id="payment-modal-message">Veuillez patienter pendant que nous traitons votre paiement...</p>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
801
+ <button type="button" id="payment-close" 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-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm hidden">
802
+ Fermer
803
+ </button>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </div>
808
+
809
+ <script>
810
+ // DOM Elements
811
+ const searchButton = document.getElementById('search-button');
812
+ const domainInput = document.getElementById('domain-input');
813
+ const domainExtension = document.getElementById('domain-extension');
814
+ const searchResult = document.getElementById('search-result');
815
+
816
+ // Login elements
817
+ const loginBtn = document.getElementById('login-btn');
818
+ const loginModal = document.getElementById('login-modal');
819
+ const loginSubmit = document.getElementById('login-submit');
820
+ const loginCancel = document.getElementById('login-cancel');
821
+ const loginForm = document.getElementById('login-form');
822
+
823
+ // Register elements
824
+ const registerBtn = document.getElementById('register-btn');
825
+ const registerModal = document.getElementById('register-modal');
826
+ const registerSubmit = document.getElementById('register-submit');
827
+ const registerCancel = document.getElementById('register-cancel');
828
+ const registerForm = document.getElementById('register-form');
829
+
830
+ // Other buttons
831
+ const searchDomainBtn = document.getElementById('search-domain-btn');
832
+ const registerNowBtn = document.getElementById('register-now-btn');
833
+ const ctaRegisterBtn = document.getElementById('cta-register-btn');
834
+
835
+ // Chat elements
836
+ const chatButton = document.getElementById('chat-button');
837
+ const chatModal = document.getElementById('chat-modal');
838
+ const chatClose = document.getElementById('chat-close');
839
+
840
+ // Cart elements
841
+ const cartBtn = document.getElementById('cart-btn');
842
+ const cartModal = document.getElementById('cart-modal');
843
+ const cartClose = document.getElementById('cart-close');
844
+ const cartItems = document.getElementById('cart-items');
845
+ const cartTotal = document.getElementById('cart-total');
846
+ const cartCount = document.getElementById('cart-count');
847
+
848
+ // Dashboard elements
849
+ const dashboardBtn = document.getElementById('dashboard-btn');
850
+ const mainContent = document.getElementById('main-content');
851
+ const dashboardContent = document.getElementById('dashboard-content');
852
+
853
+ // Payment elements
854
+ const paypalCheckout = document.getElementById('paypal-checkout');
855
+ const stripeCheckout = document.getElementById('stripe-checkout');
856
+ const paymentModal = document.getElementById('payment-modal');
857
+ const paymentClose = document.getElementById('payment-close');
858
+ const paymentModalTitle = document.getElementById('payment-modal-title');
859
+ const paymentModalMessage = document.getElementById('payment-modal-message');
860
+
861
+ // Admin credentials
862
+ const adminCredentials = [
863
+ { email: 'vgp.bavol@gmail.com', password: 'Admin270574@' },
864
+ { email: 'doctorblog.fr@gmail.com', password: 'Admin270574@' }
865
+ ];
866
+
867
+ // Cart data
868
+ let cart = [];
869
+ let isLoggedIn = false;
870
+ let currentUser = null;
871
+
872
+ // Navigation smooth scroll
873
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
874
+ anchor.addEventListener('click', function (e) {
875
+ e.preventDefault();
876
+
877
+ const targetId = this.getAttribute('href');
878
+ const targetElement = document.querySelector(targetId);
879
+ if(targetElement) {
880
+ targetElement.scrollIntoView({
881
+ behavior: 'smooth'
882
+ });
883
+ }
884
+ });
885
+ });
886
+
887
+ // Domain search functionality
888
+ searchButton.addEventListener('click', function() {
889
+ const domain = domainInput.value.trim();
890
+ const extension = domainExtension.value;
891
+
892
+ if(!domain) {
893
+ searchResult.innerHTML = '<p class="text-red-500">Veuillez entrer un nom de domaine</p>';
894
+ searchResult.classList.remove('hidden');
895
+ return;
896
+ }
897
+
898
+ // Simulate domain availability check
899
+ const isAvailable = Math.random() > 0.5;
900
+
901
+ if(isAvailable) {
902
+ searchResult.innerHTML = `
903
+ <div class="flex items-center justify-between">
904
+ <p class="text-green-600 font-medium">${domain}${extension} est disponible!</p>
905
+ <button class="add-to-cart bg-purple-600 text-white px-3 py-1 rounded text-sm hover:bg-purple-700" data-domain="${domain}${extension}" data-price="0">
906
+ Ajouter au panier
907
+ </button>
908
+ </div>
909
+ `;
910
+ } else {
911
+ searchResult.innerHTML = `
912
+ <div>
913
+ <p class="text-red-500 font-medium">${domain}${extension} n'est pas disponible.</p>
914
+ <p class="text-sm text-gray-600 mt-1">Essayez avec une autre extension ou un nom différent.</p>
915
+ </div>
916
+ `;
917
+ }
918
+
919
+ searchResult.classList.remove('hidden');
920
+
921
+ // Add event listener to the new "Add to cart" button
922
+ const addToCartBtn = document.querySelector('.add-to-cart');
923
+ if(addToCartBtn) {
924
+ addToCartBtn.addEventListener('click', function() {
925
+ if(!isLoggedIn) {
926
+ alert('Veuillez vous connecter ou vous inscrire pour ajouter des articles au panier');
927
+ registerModal.classList.remove('hidden');
928
+ return;
929
+ }
930
+
931
+ const domain = this.getAttribute('data-domain');
932
+ const price = parseFloat(this.getAttribute('data-price'));
933
+
934
+ addToCart(domain, price);
935
+ });
936
+ }
937
+ });
938
+
939
+ // Add to cart function
940
+ function addToCart(domain, price) {
941
+ cart.push({ domain, price });
942
+ updateCart();
943
+ cartModal.classList.remove('hidden');
944
+
945
+ // Show success message
946
+ const successMsg = document.createElement('div');
947
+ successMsg.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg';
948
+ successMsg.textContent = `${domain} ajouté au panier!`;
949
+ document.body.appendChild(successMsg);
950
+
951
+ setTimeout(() => {
952
+ successMsg.remove();
953
+ }, 3000);
954
+ }
955
+
956
+ // Update cart function
957
+ function updateCart() {
958
+ cartItems.innerHTML = '';
959
+
960
+ if(cart.length === 0) {
961
+ cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Votre panier est vide</p>';
962
+ cartCount.classList.add('hidden');
963
+ } else {
964
+ let total = 0;
965
+
966
+ cart.forEach((item, index) => {
967
+ total += item.price;
968
+
969
+ const itemElement = document.createElement('div');
970
+ itemElement.className = 'cart-item flex justify-between items-center p-3 border-b';
971
+ itemElement.innerHTML = `
972
+ <div>
973
+ <p class="font-medium">${item.domain}</p>
974
+ <p class="text-sm text-gray-500">Gratuit</p>
975
+ </div>
976
+ <button class="remove-item text-red-500 hover:text-red-700" data-index="${index}">
977
+ <i class="fas fa-trash"></i>
978
+ </button>
979
+ `;
980
+
981
+ cartItems.appendChild(itemElement);
982
+
983
+ // Add event listener to remove button
984
+ const removeBtn = itemElement.querySelector('.remove-item');
985
+ removeBtn.addEventListener('click', function() {
986
+ const index = parseInt(this.getAttribute('data-index'));
987
+ cart.splice(index, 1);
988
+ updateCart();
989
+ });
990
+ });
991
+
992
+ cartTotal.textContent = total.toFixed(2) + ' €';
993
+ cartCount.textContent = cart.length;
994
+ cartCount.classList.remove('hidden');
995
+ }
996
+ }
997
+
998
+ // Scroll to domain search
999
+ searchDomainBtn.addEventListener('click', function() {
1000
+ document.getElementById('domain-search').scrollIntoView({
1001
+ behavior: 'smooth'
1002
+ });
1003
+ });
1004
+
1005
+ // Login modal
1006
+ loginBtn.addEventListener('click', function(e) {
1007
+ e.preventDefault();
1008
+ loginModal.classList.remove('hidden');
1009
+ });
1010
+
1011
+ loginForm.addEventListener('submit', function(e) {
1012
+ e.preventDefault();
1013
+ const email = document.getElementById('email').value;
1014
+ const password = document.getElementById('password').value;
1015
+
1016
+ if(!email || !password) {
1017
+ alert('Veuillez remplir tous les champs');
1018
+ return;
1019
+ }
1020
+
1021
+ // Check if admin credentials
1022
+ const isAdmin = adminCredentials.some(cred => cred.email === email && cred.password === password);
1023
+
1024
+ if(isAdmin) {
1025
+ // Admin login
1026
+ isLoggedIn = true;
1027
+ currentUser = { email, isAdmin: true };
1028
+ alert(`Connexion admin réussie avec ${email}`);
1029
+ loginModal.classList.add('hidden');
1030
+
1031
+ // Update UI for admin
1032
+ loginBtn.textContent = 'Admin';
1033
+ loginBtn.classList.add('bg-yellow-500', 'text-white');
1034
+ loginBtn.classList.remove('text-gray-900', 'hover:text-purple-600');
1035
+
1036
+ // Show dashboard button
1037
+ dashboardBtn.classList.remove('hidden');
1038
+ } else {
1039
+ // Normal user login (simulated)
1040
+ isLoggedIn = true;
1041
+ currentUser = { email, isAdmin: false };
1042
+ alert(`Connexion réussie avec ${email}`);
1043
+ loginModal.classList.add('hidden');
1044
+
1045
+ // Update UI for normal user
1046
+ loginBtn.textContent = 'Mon compte';
1047
+ loginBtn.classList.add('bg-purple-100', 'text-purple-700');
1048
+ loginBtn.classList.remove('text-gray-900', 'hover:text-purple-600');
1049
+
1050
+ // Hide dashboard button
1051
+ dashboardBtn.classList.add('hidden');
1052
+ }
1053
+ });
1054
+
1055
+ loginCancel.addEventListener('click', function() {
1056
+ loginModal.classList.add('hidden');
1057
+ });
1058
+
1059
+ // Register modal
1060
+ registerBtn.addEventListener('click', function(e) {
1061
+ e.preventDefault();
1062
+ registerModal.classList.remove('hidden');
1063
+ });
1064
+
1065
+ registerNowBtn.addEventListener('click', function(e) {
1066
+ e.preventDefault();
1067
+ registerModal.classList.remove('hidden');
1068
+ });
1069
+
1070
+ ctaRegisterBtn.addEventListener('click', function(e) {
1071
+ e.preventDefault();
1072
+ registerModal.classList.remove('hidden');
1073
+ });
1074
+
1075
+ registerForm.addEventListener('submit', function(e) {
1076
+ e.preventDefault();
1077
+ const email = document.getElementById('reg-email').value;
1078
+ const password = document.getElementById('reg-password').value;
1079
+ const confirmPassword = document.getElementById('reg-confirm-password').value;
1080
+ const terms = document.getElementById('terms').checked;
1081
+
1082
+ if(!email || !password || !confirmPassword) {
1083
+ alert('Veuillez remplir tous les champs');
1084
+ return;
1085
+ }
1086
+
1087
+ if(password !== confirmPassword) {
1088
+ alert('Les mots de passe ne correspondent pas');
1089
+ return;
1090
+ }
1091
+
1092
+ if(!terms) {
1093
+ alert('Veuillez accepter les conditions d\'utilisation');
1094
+ return;
1095
+ }
1096
+
1097
+ // Simulate registration
1098
+ isLoggedIn = true;
1099
+ currentUser = { email, isAdmin: false };
1100
+ alert(`Compte créé avec succès pour ${email}`);
1101
+ registerModal.classList.add('hidden');
1102
+
1103
+ // Update UI
1104
+ loginBtn.textContent = 'Mon compte';
1105
+ loginBtn.classList.add('bg-purple-100', 'text-purple-700');
1106
+ loginBtn.classList.remove('text-gray-900', 'hover:text-purple-600');
1107
+
1108
+ // Hide dashboard button
1109
+ dashboardBtn.classList.add('hidden');
1110
+ });
1111
+
1112
+ registerCancel.addEventListener('click', function() {
1113
+ registerModal.classList.add('hidden');
1114
+ });
1115
+
1116
+ // Chat functionality
1117
+ chatButton.addEventListener('click', function() {
1118
+ chatModal.classList.toggle('hidden');
1119
+ });
1120
+
1121
+ chatClose.addEventListener('click', function() {
1122
+ chatModal.classList.add('hidden');
1123
+ });
1124
+
1125
+ // Cart functionality
1126
+ cartBtn.addEventListener('click', function() {
1127
+ if(!isLoggedIn) {
1128
+ alert('Veuillez vous connecter ou vous inscrire pour accéder au panier');
1129
+ registerModal.classList.remove('hidden');
1130
+ return;
1131
+ }
1132
+
1133
+ cartModal.classList.remove('hidden');
1134
+ });
1135
+
1136
+ cartClose.addEventListener('click', function() {
1137
+ cartModal.classList.add('hidden');
1138
+ });
1139
+
1140
+ // Dashboard functionality
1141
+ dashboardBtn.addEventListener('click', function() {
1142
+ if(currentUser && currentUser.isAdmin) {
1143
+ mainContent.classList.add('hidden');
1144
+ dashboardContent.classList.remove('hidden');
1145
+ }
1146
+ });
1147
+
1148
+ // Payment functionality
1149
+ paypalCheckout.addEventListener('click', function() {
1150
+ if(cart.length === 0) {
1151
+ alert('Votre panier est vide');
1152
+ return;
1153
+ }
1154
+
1155
+ paymentModalTitle.textContent = 'Paiement PayPal';
1156
+ paymentModalMessage.textContent = 'Redirection vers PayPal pour le paiement...';
1157
+ paymentClose.classList.add('hidden');
1158
+ paymentModal.classList.remove('hidden');
1159
+
1160
+ // Simulate payment processing
1161
+ setTimeout(() => {
1162
+ paymentModalTitle.textContent = 'Paiement réussi!';
1163
+ paymentModalMessage.textContent = 'Votre paiement PayPal a été traité avec succès. Merci pour votre achat!';
1164
+ paymentClose.classList.remove('hidden');
1165
+
1166
+ // Clear cart
1167
+ cart = [];
1168
+ updateCart();
1169
+ }, 3000);
1170
+ });
1171
+
1172
+ stripeCheckout.addEventListener('click', function() {
1173
+ if(cart.length === 0) {
1174
+ alert('Votre panier est vide');
1175
+ return;
1176
+ }
1177
+
1178
+ paymentModalTitle.textContent = 'Paiement Stripe';
1179
+ paymentModalMessage.textContent = 'Redirection vers Stripe pour le paiement...';
1180
+ paymentClose.classList.add('hidden');
1181
+ paymentModal.classList.remove('hidden');
1182
+
1183
+ // Simulate payment processing
1184
+ setTimeout(() => {
1185
+ paymentModalTitle.textContent = 'Paiement réussi!';
1186
+ paymentModalMessage.textContent = 'Votre paiement Stripe a été traité avec succès. Merci pour votre achat!';
1187
+ paymentClose.classList.remove('hidden');
1188
+
1189
+ // Clear cart
1190
+ cart = [];
1191
+ updateCart();
1192
+ }, 3000);
1193
+ });
1194
+
1195
+ paymentClose.addEventListener('click', function() {
1196
+ paymentModal.classList.add('hidden');
1197
+ });
1198
+
1199
+ // Input focus effect
1200
+ domainInput.addEventListener('focus', function() {
1201
+ this.parentElement.classList.add('ring-2', 'ring-purple-300');
1202
+ });
1203
+
1204
+ domainInput.addEventListener('blur', function() {
1205
+ this.parentElement.classList.remove('ring-2', 'ring-purple-300');
1206
+ });
1207
+ </script>
1208
+ <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/freedomain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1209
+ </html>
prompts.txt ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ FreeDomain Registry Services 100% Gratuits Connexion Enregistrez votre domaine gratuitement Obtenez un nom de domaine, SSL, DNS et hébergement en quelques secondes
2
+ aucun bouton fonctionne
3
+ les bouton sont pas activer
4
+ probleme des boutons non cliquable veuillez corriger toutes les erreur des boutons qui ne foctionne pas activer toutes les boutons non fonctionnel , réparer toute et refaire une mise a jours pour toute corriger les problelme de fonctionnement :ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement : je veux acces gratuite pour moi seulement administrateur : vgp.bavol@gmail.com : Admin270574@ et doctorblog.fr@gmail.com : Admin270574@
5
+ ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat