Hugging Face's logo

Spaces:
docto41
/
autodomain
Running

App Files Community
docto41 commited on
Commit
0ac1fbe
·
verified ·
1 Parent(s): fb7cbcb

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1082 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Autodomain
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: autodomain
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,1082 @@
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>AutoDomain Pro - Enregistrement Automatique de Domaines</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, #1e3a8a, #3b82f6);
12
+ }
13
+ .domain-card {
14
+ transition: all 0.3s ease;
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .domain-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
20
+ }
21
+ .progress-bar {
22
+ height: 6px;
23
+ transition: width 0.5s ease;
24
+ }
25
+ .pulse {
26
+ animation: pulse 2s infinite;
27
+ }
28
+ @keyframes pulse {
29
+ 0% { transform: scale(1); }
30
+ 50% { transform: scale(1.05); }
31
+ 100% { transform: scale(1); }
32
+ }
33
+ .feature-icon {
34
+ width: 60px;
35
+ height: 60px;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ border-radius: 50%;
40
+ margin: 0 auto 1rem;
41
+ }
42
+ .dns-server {
43
+ position: relative;
44
+ padding-left: 30px;
45
+ }
46
+ .dns-server:before {
47
+ content: "";
48
+ position: absolute;
49
+ left: 0;
50
+ top: 50%;
51
+ transform: translateY(-50%);
52
+ width: 20px;
53
+ height: 20px;
54
+ background-color: #10b981;
55
+ border-radius: 50%;
56
+ }
57
+ .modal {
58
+ display: none;
59
+ position: fixed;
60
+ z-index: 100;
61
+ left: 0;
62
+ top: 0;
63
+ width: 100%;
64
+ height: 100%;
65
+ background-color: rgba(0,0,0,0.7);
66
+ }
67
+ .modal-content {
68
+ background-color: white;
69
+ margin: 5% auto;
70
+ padding: 30px;
71
+ border-radius: 12px;
72
+ width: 90%;
73
+ max-width: 800px;
74
+ max-height: 90vh;
75
+ overflow-y: auto;
76
+ }
77
+ .log-entry {
78
+ font-family: monospace;
79
+ padding: 5px 0;
80
+ border-bottom: 1px solid #eee;
81
+ }
82
+ .log-time {
83
+ color: #6b7280;
84
+ margin-right: 10px;
85
+ }
86
+ .log-success {
87
+ color: #10b981;
88
+ }
89
+ .log-warning {
90
+ color: #f59e0b;
91
+ }
92
+ .log-error {
93
+ color: #ef4444;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="font-sans bg-gray-50">
98
+ <!-- Header -->
99
+ <header class="gradient-bg text-white">
100
+ <div class="container mx-auto px-4 py-6">
101
+ <div class="flex justify-between items-center">
102
+ <div class="flex items-center space-x-3">
103
+ <i class="fas fa-bolt text-yellow-300 text-3xl"></i>
104
+ <div>
105
+ <h1 class="text-2xl font-bold">AutoDomain Pro</h1>
106
+ <p class="text-sm opacity-80">Enregistrement instantané 24/7</p>
107
+ </div>
108
+ </div>
109
+ <nav class="hidden md:flex space-x-8">
110
+ <a href="#features" class="hover:text-yellow-200 transition">Fonctionnalités</a>
111
+ <a href="#how-it-works" class="hover:text-yellow-200 transition">Technologie</a>
112
+ <a href="#pricing" class="hover:text-yellow-200 transition">Tarifs</a>
113
+ <a href="#testimonials" class="hover:text-yellow-200 transition">Témoignages</a>
114
+ </nav>
115
+ <div class="flex items-center space-x-4">
116
+ <button id="loginBtn" class="px-4 py-2 rounded-full bg-white text-blue-600 font-semibold hover:bg-gray-100 transition">Connexion</button>
117
+ <button class="md:hidden" id="mobileMenuBtn">
118
+ <i class="fas fa-bars text-2xl"></i>
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </header>
124
+
125
+ <!-- Hero Section -->
126
+ <section class="gradient-bg text-white py-20">
127
+ <div class="container mx-auto px-4 text-center">
128
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Enregistrement de Domaines Automatisé</h2>
129
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">
130
+ Obtenez votre domaine, SSL, DNS et référencement en <span class="font-bold text-yellow-300">quelques secondes</span> avec notre système 24/7
131
+ </p>
132
+
133
+ <div class="max-w-2xl mx-auto bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-2 flex">
134
+ <input type="text" id="domainSearch" placeholder="Recherchez votre domaine..." class="flex-grow px-6 py-4 rounded-l-xl bg-white bg-opacity-20 text-white placeholder-white placeholder-opacity-70 focus:outline-none">
135
+ <button id="searchBtn" class="bg-yellow-400 text-blue-900 px-8 py-4 rounded-r-xl hover:bg-yellow-300 transition font-bold">
136
+ <i class="fas fa-search mr-2"></i>Rechercher
137
+ </button>
138
+ </div>
139
+
140
+ <div class="mt-8 flex flex-wrap justify-center gap-4">
141
+ <div class="flex items-center">
142
+ <i class="fas fa-check-circle text-yellow-300 mr-2"></i>
143
+ <span>Propagation DNS instantanée</span>
144
+ </div>
145
+ <div class="flex items-center">
146
+ <i class="fas fa-check-circle text-yellow-300 mr-2"></i>
147
+ <span>SSL automatique</span>
148
+ </div>
149
+ <div class="flex items-center">
150
+ <i class="fas fa-check-circle text-yellow-300 mr-2"></i>
151
+ <span>Référencement immédiat</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Domain Registration Process -->
158
+ <section class="py-16 bg-white" id="registration-process">
159
+ <div class="container mx-auto px-4">
160
+ <h2 class="text-3xl font-bold text-center mb-12">Processus d'Enregistrement Automatisé</h2>
161
+
162
+ <div id="processContainer" class="hidden">
163
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-6 mb-8">
164
+ <div class="flex justify-between items-center mb-4">
165
+ <h3 class="text-xl font-semibold">Enregistrement de <span id="currentDomain" class="text-blue-600">example.com</span></h3>
166
+ <span id="processTimer" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">0s</span>
167
+ </div>
168
+
169
+ <div class="mb-4 bg-gray-200 rounded-full h-2">
170
+ <div id="processProgress" class="progress-bar bg-blue-600 rounded-full" style="width: 0%"></div>
171
+ </div>
172
+
173
+ <div id="processSteps" class="grid grid-cols-2 md:grid-cols-4 gap-4">
174
+ <!-- Steps will be added by JavaScript -->
175
+ </div>
176
+ </div>
177
+
178
+ <div id="processLogs" class="max-w-4xl mx-auto bg-gray-900 text-gray-100 rounded-xl p-6 font-mono text-sm h-64 overflow-y-auto">
179
+ <!-- Logs will be added by JavaScript -->
180
+ </div>
181
+
182
+ <div class="max-w-4xl mx-auto mt-6 flex justify-center">
183
+ <button id="completeRegistration" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 hidden">
184
+ <i class="fas fa-check-circle mr-2"></i>Finaliser l'enregistrement
185
+ </button>
186
+ </div>
187
+ </div>
188
+
189
+ <div id="domainResults" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 hidden">
190
+ <!-- Domain cards will be added here by JavaScript -->
191
+ </div>
192
+
193
+ <div id="domainFeatures" class="mt-16">
194
+ <h3 class="text-2xl font-semibold text-center mb-8">Extensions populaires</h3>
195
+ <div class="flex flex-wrap justify-center gap-3">
196
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.com</span>
197
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.net</span>
198
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.org</span>
199
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.io</span>
200
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.fr</span>
201
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.ai</span>
202
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.app</span>
203
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full cursor-pointer hover:bg-blue-200">.xyz</span>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Features Section -->
210
+ <section class="py-16 bg-gray-50" id="features">
211
+ <div class="container mx-auto px-4">
212
+ <h2 class="text-3xl font-bold text-center mb-12">Fonctionnalités Avancées</h2>
213
+
214
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
215
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
216
+ <div class="feature-icon bg-blue-100 text-blue-600">
217
+ <i class="fas fa-globe text-2xl"></i>
218
+ </div>
219
+ <h3 class="text-xl font-semibold mb-3 text-center">Enregistrement Instantané</h3>
220
+ <p class="text-gray-600 text-center">
221
+ Votre domaine est enregistré directement auprès des registrars en temps réel, avec une propagation mondiale en quelques secondes.
222
+ </p>
223
+ </div>
224
+
225
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
226
+ <div class="feature-icon bg-green-100 text-green-600">
227
+ <i class="fas fa-lock text-2xl"></i>
228
+ </div>
229
+ <h3 class="text-xl font-semibold mb-3 text-center">SSL Automatique</h3>
230
+ <p class="text-gray-600 text-center">
231
+ Certificat SSL délivré et installé automatiquement avec renouvellement auto. Compatible avec tous les navigateurs.
232
+ </p>
233
+ </div>
234
+
235
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
236
+ <div class="feature-icon bg-purple-100 text-purple-600">
237
+ <i class="fas fa-server text-2xl"></i>
238
+ </div>
239
+ <h3 class="text-xl font-semibold mb-3 text-center">DNS Haute Performance</h3>
240
+ <p class="text-gray-600 text-center">
241
+ Réseau Anycast mondial avec des temps de réponse inférieurs à 10ms. 100% uptime garanti.
242
+ </p>
243
+ </div>
244
+
245
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
246
+ <div class="feature-icon bg-yellow-100 text-yellow-600">
247
+ <i class="fas fa-search text-2xl"></i>
248
+ </div>
249
+ <h3 class="text-xl font-semibold mb-3 text-center">Référencement Automatique</h3>
250
+ <p class="text-gray-600 text-center">
251
+ Soumission automatique à Google Search Console et Analytics. Indexation accélérée.
252
+ </p>
253
+ </div>
254
+
255
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
256
+ <div class="feature-icon bg-red-100 text-red-600">
257
+ <i class="fas fa-sync-alt text-2xl"></i>
258
+ </div>
259
+ <h3 class="text-xl font-semibold mb-3 text-center">Monitoring 24/7</h3>
260
+ <p class="text-gray-600 text-center">
261
+ Surveillance permanente de votre domaine avec alertes instantanées en cas de problème.
262
+ </p>
263
+ </div>
264
+
265
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
266
+ <div class="feature-icon bg-indigo-100 text-indigo-600">
267
+ <i class="fas fa-robot text-2xl"></i>
268
+ </div>
269
+ <h3 class="text-xl font-semibold mb-3 text-center">API Automatisée</h3>
270
+ <p class="text-gray-600 text-center">
271
+ Intégration facile avec notre API RESTful pour automatiser vos processus métier.
272
+ </p>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- How It Works -->
279
+ <section class="py-16 bg-white" id="how-it-works">
280
+ <div class="container mx-auto px-4">
281
+ <h2 class="text-3xl font-bold text-center mb-12">Notre Technologie Exclusive</h2>
282
+
283
+ <div class="max-w-4xl mx-auto">
284
+ <div class="mb-12">
285
+ <h3 class="text-xl font-semibold mb-4 text-blue-600">1. Infrastructure DNS Globale</h3>
286
+ <p class="text-gray-700 mb-4">
287
+ Notre réseau Anycast distribué sur 5 continents garantit des temps de réponse records :
288
+ </p>
289
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
290
+ <div class="bg-gray-50 p-4 rounded-lg">
291
+ <div class="dns-server">
292
+ <h4 class="font-medium">DNS Principal (Amsterdam)</h4>
293
+ <p class="text-sm text-gray-600">Temps moyen: 3ms</p>
294
+ </div>
295
+ </div>
296
+ <div class="bg-gray-50 p-4 rounded-lg">
297
+ <div class="dns-server">
298
+ <h4 class="font-medium">DNS Secondaire (New York)</h4>
299
+ <p class="text-sm text-gray-600">Temps moyen: 5ms</p>
300
+ </div>
301
+ </div>
302
+ <div class="bg-gray-50 p-4 rounded-lg">
303
+ <div class="dns-server">
304
+ <h4 class="font-medium">DNS Tertiaire (Singapour)</h4>
305
+ <p class="text-sm text-gray-600">Temps moyen: 7ms</p>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mb-12">
312
+ <h3 class="text-xl font-semibold mb-4 text-blue-600">2. Propagation Instantanée</h3>
313
+ <p class="text-gray-700 mb-4">
314
+ Grâce à nos partenariats avec les principaux registrars et fournisseurs DNS, votre domaine est disponible immédiatement :
315
+ </p>
316
+ <div class="bg-gray-50 p-6 rounded-lg">
317
+ <div class="flex items-center mb-4">
318
+ <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4">1</div>
319
+ <div>
320
+ <h4 class="font-medium">Enregistrement chez le registrar</h4>
321
+ <p class="text-sm text-gray-600">Temps réel via API directe</p>
322
+ </div>
323
+ </div>
324
+ <div class="flex items-center mb-4">
325
+ <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4">2</div>
326
+ <div>
327
+ <h4 class="font-medium">Mise à jour des serveurs racine</h4>
328
+ <p class="text-sm text-gray-600">Propagation en 30 secondes</p>
329
+ </div>
330
+ </div>
331
+ <div class="flex items-center">
332
+ <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4">3</div>
333
+ <div>
334
+ <h4 class="font-medium">Disponibilité mondiale</h4>
335
+ <p class="text-sm text-gray-600">Moins de 60 secondes</p>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <div>
342
+ <h3 class="text-xl font-semibold mb-4 text-blue-600">3. Référencement Automatisé</h3>
343
+ <p class="text-gray-700 mb-4">
344
+ Notre système soumet automatiquement votre site aux moteurs de recherche :
345
+ </p>
346
+ <div class="bg-gray-50 p-6 rounded-lg">
347
+ <div class="flex items-center mb-4">
348
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
349
+ <i class="fab fa-google text-blue-600"></i>
350
+ </div>
351
+ <div>
352
+ <h4 class="font-medium">Google Search Console</h4>
353
+ <p class="text-sm text-gray-600">Indexation accélérée</p>
354
+ </div>
355
+ </div>
356
+ <div class="flex items-center mb-4">
357
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
358
+ <i class="fab fa-google text-blue-600"></i>
359
+ </div>
360
+ <div>
361
+ <h4 class="font-medium">Google Analytics</h4>
362
+ <p class="text-sm text-gray-600">Tracking immédiat</p>
363
+ </div>
364
+ </div>
365
+ <div class="flex items-center">
366
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
367
+ <i class="fas fa-search text-blue-600"></i>
368
+ </div>
369
+ <div>
370
+ <h4 class="font-medium">Sitemap XML</h4>
371
+ <p class="text-sm text-gray-600">Génération automatique</p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- Pricing Section -->
381
+ <section class="py-16 bg-gray-50" id="pricing">
382
+ <div class="container mx-auto px-4">
383
+ <h2 class="text-3xl font-bold text-center mb-12">Nos Offres</h2>
384
+
385
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
386
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
387
+ <div class="bg-gray-100 py-6 px-8">
388
+ <h3 class="text-xl font-semibold text-center">Starter</h3>
389
+ <div class="text-center mt-4">
390
+ <span class="text-4xl font-bold">€9.99</span>
391
+ <span class="text-gray-600">/mois</span>
392
+ </div>
393
+ </div>
394
+ <div class="p-8">
395
+ <ul class="space-y-3">
396
+ <li class="flex items-center">
397
+ <i class="fas fa-check text-green-500 mr-2"></i>
398
+ <span>1 domaine inclus</span>
399
+ </li>
400
+ <li class="flex items-center">
401
+ <i class="fas fa-check text-green-500 mr-2"></i>
402
+ <span>SSL automatique</span>
403
+ </li>
404
+ <li class="flex items-center">
405
+ <i class="fas fa-check text-green-500 mr-2"></i>
406
+ <span>DNS Basic</span>
407
+ </li>
408
+ <li class="flex items-center text-gray-400">
409
+ <i class="fas fa-times text-red-400 mr-2"></i>
410
+ <span>Référencement avancé</span>
411
+ </li>
412
+ <li class="flex items-center text-gray-400">
413
+ <i class="fas fa-times text-red-400 mr-2"></i>
414
+ <span>Monitoring 24/7</span>
415
+ </li>
416
+ </ul>
417
+ <button class="w-full mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
418
+ Commencer
419
+ </button>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transform scale-105 border-2 border-blue-500">
424
+ <div class="bg-blue-500 text-white py-6 px-8">
425
+ <h3 class="text-xl font-semibold text-center">Pro</h3>
426
+ <div class="text-center mt-4">
427
+ <span class="text-4xl font-bold">€24.99</span>
428
+ <span class="opacity-80">/mois</span>
429
+ </div>
430
+ </div>
431
+ <div class="p-8">
432
+ <ul class="space-y-3">
433
+ <li class="flex items-center">
434
+ <i class="fas fa-check text-green-500 mr-2"></i>
435
+ <span>5 domaines inclus</span>
436
+ </li>
437
+ <li class="flex items-center">
438
+ <i class="fas fa-check text-green-500 mr-2"></i>
439
+ <span>SSL automatique</span>
440
+ </li>
441
+ <li class="flex items-center">
442
+ <i class="fas fa-check text-green-500 mr-2"></i>
443
+ <span>DNS Premium</span>
444
+ </li>
445
+ <li class="flex items-center">
446
+ <i class="fas fa-check text-green-500 mr-2"></i>
447
+ <span>Référencement avancé</span>
448
+ </li>
449
+ <li class="flex items-center">
450
+ <i class="fas fa-check text-green-500 mr-2"></i>
451
+ <span>Monitoring 24/7</span>
452
+ </li>
453
+ </ul>
454
+ <button class="w-full mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
455
+ Choisir cette offre
456
+ </button>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
461
+ <div class="bg-gray-100 py-6 px-8">
462
+ <h3 class="text-xl font-semibold text-center">Enterprise</h3>
463
+ <div class="text-center mt-4">
464
+ <span class="text-4xl font-bold">€99.99</span>
465
+ <span class="text-gray-600">/mois</span>
466
+ </div>
467
+ </div>
468
+ <div class="p-8">
469
+ <ul class="space-y-3">
470
+ <li class="flex items-center">
471
+ <i class="fas fa-check text-green-500 mr-2"></i>
472
+ <span>Domaines illimités</span>
473
+ </li>
474
+ <li class="flex items-center">
475
+ <i class="fas fa-check text-green-500 mr-2"></i>
476
+ <span>SSL EV (Extended Validation)</span>
477
+ </li>
478
+ <li class="flex items-center">
479
+ <i class="fas fa-check text-green-500 mr-2"></i>
480
+ <span>DNS Enterprise</span>
481
+ </li>
482
+ <li class="flex items-center">
483
+ <i class="fas fa-check text-green-500 mr-2"></i>
484
+ <span>Référencement premium</span>
485
+ </li>
486
+ <li class="flex items-center">
487
+ <i class="fas fa-check text-green-500 mr-2"></i>
488
+ <span>Support prioritaire 24/7</span>
489
+ </li>
490
+ </ul>
491
+ <button class="w-full mt-8 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
492
+ Contactez-nous
493
+ </button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </section>
499
+
500
+ <!-- Testimonials -->
501
+ <section class="py-16 bg-white" id="testimonials">
502
+ <div class="container mx-auto px-4">
503
+ <h2 class="text-3xl font-bold text-center mb-12">Ils nous font confiance</h2>
504
+
505
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
506
+ <div class="bg-gray-50 p-8 rounded-xl">
507
+ <div class="flex items-center mb-4">
508
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-xl mr-4">JD</div>
509
+ <div>
510
+ <h4 class="font-semibold">Jean Dupont</h4>
511
+ <p class="text-sm text-gray-600">CEO, StartupTech</p>
512
+ </div>
513
+ </div>
514
+ <p class="text-gray-700">
515
+ "J'ai enregistré mon domaine à 3h du matin et il était disponible partout dans le monde en moins d'une minute. Impressionnant !"
516
+ </p>
517
+ <div class="mt-4 text-yellow-400">
518
+ <i class="fas fa-star"></i>
519
+ <i class="fas fa-star"></i>
520
+ <i class="fas fa-star"></i>
521
+ <i class="fas fa-star"></i>
522
+ <i class="fas fa-star"></i>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="bg-gray-50 p-8 rounded-xl">
527
+ <div class="flex items-center mb-4">
528
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-xl mr-4">MS</div>
529
+ <div>
530
+ <h4 class="font-semibold">Marie Simon</h4>
531
+ <p class="text-sm text-gray-600">Directrice Marketing</p>
532
+ </div>
533
+ </div>
534
+ <p class="text-gray-700">
535
+ "Le référencement automatique sur Google a fonctionné à merveille. Notre site était indexé en 24h seulement."
536
+ </p>
537
+ <div class="mt-4 text-yellow-400">
538
+ <i class="fas fa-star"></i>
539
+ <i class="fas fa-star"></i>
540
+ <i class="fas fa-star"></i>
541
+ <i class="fas fa-star"></i>
542
+ <i class="fas fa-star"></i>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="bg-gray-50 p-8 rounded-xl">
547
+ <div class="flex items-center mb-4">
548
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-xl mr-4">TP</div>
549
+ <div>
550
+ <h4 class="font-semibold">Thomas Petit</h4>
551
+ <p class="text-sm text-gray-600">CTO, DevAgency</p>
552
+ </div>
553
+ </div>
554
+ <p class="text-gray-700">
555
+ "L'API est parfaitement documentée et nous permet d'automatiser tous nos enregistrements de domaine. Un gain de temps énorme."
556
+ </p>
557
+ <div class="mt-4 text-yellow-400">
558
+ <i class="fas fa-star"></i>
559
+ <i class="fas fa-star"></i>
560
+ <i class="fas fa-star"></i>
561
+ <i class="fas fa-star"></i>
562
+ <i class="fas fa-star-half-alt"></i>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </section>
568
+
569
+ <!-- CTA Section -->
570
+ <section class="py-16 gradient-bg text-white">
571
+ <div class="container mx-auto px-4 text-center">
572
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à enregistrer votre domaine en quelques secondes ?</h2>
573
+ <p class="text-xl mb-10 max-w-2xl mx-auto">
574
+ Essayez notre service gratuitement pendant 7 jours. Aucune carte de crédit requise.
575
+ </p>
576
+ <button class="px-8 py-4 bg-yellow-400 text-blue-900 rounded-xl hover:bg-yellow-300 transition font-bold text-lg">
577
+ <i class="fas fa-bolt mr-2"></i>Commencer maintenant
578
+ </button>
579
+ </div>
580
+ </section>
581
+
582
+ <!-- Footer -->
583
+ <footer class="bg-gray-900 text-gray-400 py-12">
584
+ <div class="container mx-auto px-4">
585
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
586
+ <div>
587
+ <h3 class="text-white text-lg font-semibold mb-4">AutoDomain Pro</h3>
588
+ <p class="mb-4">
589
+ La solution la plus rapide pour enregistrer et gérer vos domaines avec tous les services associés.
590
+ </p>
591
+ <div class="flex space-x-4">
592
+ <a href="#" class="text-gray-400 hover:text-white">
593
+ <i class="fab fa-twitter"></i>
594
+ </a>
595
+ <a href="#" class="text-gray-400 hover:text-white">
596
+ <i class="fab fa-facebook"></i>
597
+ </a>
598
+ <a href="#" class="text-gray-400 hover:text-white">
599
+ <i class="fab fa-linkedin"></i>
600
+ </a>
601
+ </div>
602
+ </div>
603
+
604
+ <div>
605
+ <h3 class="text-white text-lg font-semibold mb-4">Services</h3>
606
+ <ul class="space-y-2">
607
+ <li><a href="#" class="hover:text-white transition">Enregistrement de domaine</a></li>
608
+ <li><a href="#" class="hover:text-white transition">Certificats SSL</a></li>
609
+ <li><a href="#" class="hover:text-white transition">Hébergement DNS</a></li>
610
+ <li><a href="#" class="hover:text-white transition">Référencement SEO</a></li>
611
+ <li><a href="#" class="hover:text-white transition">Monitoring</a></li>
612
+ </ul>
613
+ </div>
614
+
615
+ <div>
616
+ <h3 class="text-white text-lg font-semibold mb-4">Support</h3>
617
+ <ul class="space-y-2">
618
+ <li><a href="#" class="hover:text-white transition">Centre d'aide</a></li>
619
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
620
+ <li><a href="#" class="hover:text-white transition">API Developer</a></li>
621
+ <li><a href="#" class="hover:text-white transition">Statut du service</a></li>
622
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
623
+ </ul>
624
+ </div>
625
+
626
+ <div>
627
+ <h3 class="text-white text-lg font-semibold mb-4">Legal</h3>
628
+ <ul class="space-y-2">
629
+ <li><a href="#" class="hover:text-white transition">Conditions générales</a></li>
630
+ <li><a href="#" class="hover:text-white transition">Politique de confidentialité</a></li>
631
+ <li><a href="#" class="hover:text-white transition">Politique de cookies</a></li>
632
+ <li><a href="#" class="hover:text-white transition">Mentions légales</a></li>
633
+ </ul>
634
+ </div>
635
+ </div>
636
+
637
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
638
+ <p>&copy; 2023 AutoDomain Pro. Tous droits réservés.</p>
639
+ </div>
640
+ </div>
641
+ </footer>
642
+
643
+ <!-- Registration Process Modal -->
644
+ <div id="registrationModal" class="modal">
645
+ <div class="modal-content">
646
+ <div class="flex justify-between items-center mb-6">
647
+ <h3 class="text-2xl font-bold">Enregistrement en cours</h3>
648
+ <button id="closeRegistrationModal" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
649
+ </div>
650
+
651
+ <div class="mb-6">
652
+ <div class="flex justify-between items-center mb-2">
653
+ <h4 id="modalDomainName" class="font-semibold">example.com</h4>
654
+ <span id="modalTimer" class="text-sm text-gray-600">0 secondes</span>
655
+ </div>
656
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
657
+ <div id="modalProgress" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
658
+ </div>
659
+ </div>
660
+
661
+ <div id="modalSteps" class="mb-6">
662
+ <!-- Steps will be added by JavaScript -->
663
+ </div>
664
+
665
+ <div id="modalLogs" class="bg-gray-100 p-4 rounded-lg font-mono text-sm h-64 overflow-y-auto mb-6">
666
+ <!-- Logs will be added by JavaScript -->
667
+ </div>
668
+
669
+ <div class="flex justify-end">
670
+ <button id="cancelRegistration" class="px-4 py-2 border border-gray-300 rounded-lg mr-2 hover:bg-gray-100">
671
+ Annuler
672
+ </button>
673
+ <button id="continueRegistration" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
674
+ Continuer
675
+ </button>
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <!-- Login Modal -->
681
+ <div id="loginModal" class="modal">
682
+ <div class="modal-content">
683
+ <div class="flex justify-between items-center mb-6">
684
+ <h3 class="text-2xl font-bold">Connexion</h3>
685
+ <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
686
+ </div>
687
+
688
+ <form id="loginForm">
689
+ <div class="mb-4">
690
+ <label for="loginEmail" class="block text-gray-700 mb-2">Email</label>
691
+ <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
692
+ </div>
693
+ <div class="mb-6">
694
+ <label for="loginPassword" class="block text-gray-700 mb-2">Mot de passe</label>
695
+ <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
696
+ </div>
697
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-medium">
698
+ Se connecter
699
+ </button>
700
+ <p class="text-center mt-4 text-sm text-gray-600">
701
+ Pas encore de compte? <a href="#" id="showRegisterLink" class="text-blue-600 hover:underline">S'inscrire</a>
702
+ </p>
703
+ </form>
704
+
705
+ <form id="registerForm" class="hidden">
706
+ <div class="mb-4">
707
+ <label for="registerEmail" class="block text-gray-700 mb-2">Email</label>
708
+ <input type="email" id="registerEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
709
+ </div>
710
+ <div class="mb-4">
711
+ <label for="registerPassword" class="block text-gray-700 mb-2">Mot de passe</label>
712
+ <input type="password" id="registerPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
713
+ </div>
714
+ <div class="mb-6">
715
+ <label for="registerConfirmPassword" class="block text-gray-700 mb-2">Confirmer le mot de passe</label>
716
+ <input type="password" id="registerConfirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
717
+ </div>
718
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-medium">
719
+ S'inscrire
720
+ </button>
721
+ <p class="text-center mt-4 text-sm text-gray-600">
722
+ Déjà un compte? <a href="#" id="showLoginLink" class="text-blue-600 hover:underline">Se connecter</a>
723
+ </p>
724
+ </form>
725
+ </div>
726
+ </div>
727
+
728
+ <script>
729
+ // DOM Elements
730
+ const loginBtn = document.getElementById('loginBtn');
731
+ const loginModal = document.getElementById('loginModal');
732
+ const closeLoginModal = document.getElementById('closeLoginModal');
733
+ const loginForm = document.getElementById('loginForm');
734
+ const registerForm = document.getElementById('registerForm');
735
+ const showRegisterLink = document.getElementById('showRegisterLink');
736
+ const showLoginLink = document.getElementById('showLoginLink');
737
+ const searchBtn = document.getElementById('searchBtn');
738
+ const domainSearch = document.getElementById('domainSearch');
739
+ const domainResults = document.getElementById('domainResults');
740
+ const processContainer = document.getElementById('processContainer');
741
+ const currentDomain = document.getElementById('currentDomain');
742
+ const processTimer = document.getElementById('processTimer');
743
+ const processProgress = document.getElementById('processProgress');
744
+ const processSteps = document.getElementById('processSteps');
745
+ const processLogs = document.getElementById('processLogs');
746
+ const completeRegistration = document.getElementById('completeRegistration');
747
+ const registrationModal = document.getElementById('registrationModal');
748
+ const closeRegistrationModal = document.getElementById('closeRegistrationModal');
749
+ const modalDomainName = document.getElementById('modalDomainName');
750
+ const modalTimer = document.getElementById('modalTimer');
751
+ const modalProgress = document.getElementById('modalProgress');
752
+ const modalSteps = document.getElementById('modalSteps');
753
+ const modalLogs = document.getElementById('modalLogs');
754
+ const cancelRegistration = document.getElementById('cancelRegistration');
755
+ const continueRegistration = document.getElementById('continueRegistration');
756
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
757
+ const mobileMenu = document.getElementById('mobileMenu');
758
+
759
+ // Sample domain data
760
+ const domains = [
761
+ { name: 'example', tld: '.com', price: 12.99, available: true },
762
+ { name: 'test', tld: '.net', price: 10.99, available: true },
763
+ { name: 'awesome', tld: '.org', price: 9.99, available: true },
764
+ { name: 'business', tld: '.io', price: 25.99, available: false },
765
+ { name: 'france', tld: '.fr', price: 15.99, available: true },
766
+ { name: 'shop', tld: '.shop', price: 20.99, available: true },
767
+ { name: 'tech', tld: '.ai', price: 49.99, available: true },
768
+ { name: 'app', tld: '.app', price: 18.99, available: false },
769
+ { name: 'creative', tld: '.xyz', price: 8.99, available: true }
770
+ ];
771
+
772
+ // Registration process steps
773
+ const registrationSteps = [
774
+ { name: 'Vérification disponibilité', duration: 1, description: 'Vérification auprès des registrars mondiaux' },
775
+ { name: 'Enregistrement du domaine', duration: 3, description: 'Enregistrement en temps réel via API' },
776
+ { name: 'Configuration DNS', duration: 2, description: 'Mise en place des serveurs Anycast' },
777
+ { name: 'Déploiement SSL', duration: 2, description: 'Certificat Let\'s Encrypt automatique' },
778
+ { name: 'Propagation mondiale', duration: 5, description: 'Mise à jour des serveurs racine DNS' },
779
+ { name: 'Soumission SEO', duration: 2, description: 'Google Search Console & Analytics' },
780
+ { name: 'Finalisation', duration: 1, description: 'Vérification complète du domaine' }
781
+ ];
782
+
783
+ // State
784
+ let selectedDomain = null;
785
+ let timerInterval = null;
786
+ let secondsElapsed = 0;
787
+ let currentStep = 0;
788
+ let isProcessRunning = false;
789
+
790
+ // Event Listeners
791
+ loginBtn.addEventListener('click', () => loginModal.style.display = 'block');
792
+ closeLoginModal.addEventListener('click', () => loginModal.style.display = 'none');
793
+ showRegisterLink.addEventListener('click', (e) => {
794
+ e.preventDefault();
795
+ loginForm.classList.add('hidden');
796
+ registerForm.classList.remove('hidden');
797
+ });
798
+ showLoginLink.addEventListener('click', (e) => {
799
+ e.preventDefault();
800
+ registerForm.classList.add('hidden');
801
+ loginForm.classList.remove('hidden');
802
+ });
803
+ searchBtn.addEventListener('click', searchDomains);
804
+ completeRegistration.addEventListener('click', completeDomainRegistration);
805
+ closeRegistrationModal.addEventListener('click', () => registrationModal.style.display = 'none');
806
+ cancelRegistration.addEventListener('click', cancelDomainRegistration);
807
+ continueRegistration.addEventListener('click', continueDomainRegistration);
808
+ mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
809
+
810
+ // Form submissions
811
+ loginForm.addEventListener('submit', handleLogin);
812
+ registerForm.addEventListener('submit', handleRegister);
813
+
814
+ // Search domains
815
+ function searchDomains() {
816
+ const query = domainSearch.value.trim().toLowerCase();
817
+
818
+ if (!query) {
819
+ alert('Veuillez entrer un terme de recherche');
820
+ return;
821
+ }
822
+
823
+ // Filter domains (in a real app, this would be a server call)
824
+ const results = domains.filter(domain =>
825
+ domain.name.includes(query) || domain.tld.includes(query)
826
+ );
827
+
828
+ // Display results
829
+ domainResults.innerHTML = '';
830
+
831
+ if (results.length === 0) {
832
+ domainResults.innerHTML = '<p class="text-gray-500 text-center col-span-3">Aucun domaine trouvé</p>';
833
+ } else {
834
+ results.forEach(domain => {
835
+ const domainEl = document.createElement('div');
836
+ domainEl.className = 'domain-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition';
837
+ domainEl.innerHTML = `
838
+ <div class="p-6">
839
+ <div class="flex justify-between items-start mb-4">
840
+ <h3 class="text-xl font-bold text-gray-800">${domain.name}<span class="text-blue-600">${domain.tld}</span></h3>
841
+ <span class="px-3 py-1 rounded-full text-sm ${domain.available ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
842
+ ${domain.available ? 'Disponible' : 'Indisponible'}
843
+ </span>
844
+ </div>
845
+ <div class="flex justify-between items-center">
846
+ <span class="text-2xl font-bold text-blue-600">€${domain.price.toFixed(2)}</span>
847
+ <button class="register-domain px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ${!domain.available ? 'opacity-50 cursor-not-allowed' : ''}"
848
+ data-name="${domain.name}"
849
+ data-tld="${domain.tld}"
850
+ data-price="${domain.price}"
851
+ ${!domain.available ? 'disabled' : ''}>
852
+ ${!domain.available ? 'Indisponible' : 'Enregistrer'}
853
+ </button>
854
+ </div>
855
+ </div>
856
+ `;
857
+ domainResults.appendChild(domainEl);
858
+ });
859
+
860
+ // Add event listeners to register buttons
861
+ document.querySelectorAll('.register-domain').forEach(btn => {
862
+ btn.addEventListener('click', (e) => {
863
+ if (btn.disabled) return;
864
+
865
+ const domainName = btn.getAttribute('data-name');
866
+ const domainTld = btn.getAttribute('data-tld');
867
+ const domainPrice = parseFloat(btn.getAttribute('data-price'));
868
+
869
+ startDomainRegistration(domainName, domainTld, domainPrice);
870
+ });
871
+ });
872
+ }
873
+
874
+ domainResults.classList.remove('hidden');
875
+ }
876
+
877
+ // Start domain registration
878
+ function startDomainRegistration(name, tld, price) {
879
+ selectedDomain = { name, tld, price };
880
+ currentDomain.textContent = `${name}${tld}`;
881
+ modalDomainName.textContent = `${name}${tld}`;
882
+
883
+ // Reset process
884
+ secondsElapsed = 0;
885
+ currentStep = 0;
886
+ processSteps.innerHTML = '';
887
+ processLogs.innerHTML = '';
888
+ modalSteps.innerHTML = '';
889
+ modalLogs.innerHTML = '';
890
+
891
+ // Show process container
892
+ processContainer.classList.remove('hidden');
893
+
894
+ // Start timer
895
+ startTimer();
896
+
897
+ // Start process steps
898
+ startNextStep();
899
+
900
+ // Show modal
901
+ registrationModal.style.display = 'block';
902
+ }
903
+
904
+ // Start timer
905
+ function startTimer() {
906
+ clearInterval(timerInterval);
907
+ secondsElapsed = 0;
908
+ updateTimer();
909
+ timerInterval = setInterval(updateTimer, 1000);
910
+ }
911
+
912
+ // Update timer
913
+ function updateTimer() {
914
+ secondsElapsed++;
915
+ processTimer.textContent = `${secondsElapsed}s`;
916
+ modalTimer.textContent = `${secondsElapsed} secondes`;
917
+ }
918
+
919
+ // Start next step
920
+ function startNextStep() {
921
+ if (currentStep >= registrationSteps.length) {
922
+ completeProcess();
923
+ return;
924
+ }
925
+
926
+ const step = registrationSteps[currentStep];
927
+
928
+ // Update progress
929
+ const progress = ((currentStep) / registrationSteps.length) * 100;
930
+ processProgress.style.width = `${progress}%`;
931
+ modalProgress.style.width = `${progress}%`;
932
+
933
+ // Add step to UI
934
+ const stepEl = document.createElement('div');
935
+ stepEl.className = 'bg-gray-50 p-4 rounded-lg';
936
+ stepEl.innerHTML = `
937
+ <div class="flex items-center">
938
+ <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4">
939
+ ${currentStep + 1}
940
+ </div>
941
+ <div>
942
+ <h4 class="font-medium">${step.name}</h4>
943
+ <p class="text-sm text-gray-600">${step.description}</p>
944
+ </div>
945
+ </div>
946
+ `;
947
+ processSteps.appendChild(stepEl);
948
+
949
+ const modalStepEl = stepEl.cloneNode(true);
950
+ modalSteps.appendChild(modalStepEl);
951
+
952
+ // Add log entry
953
+ addLogEntry(`Début: ${step.name}`, 'info');
954
+
955
+ // Simulate step processing
956
+ setTimeout(() => {
957
+ addLogEntry(`${step.name} terminé avec succès`, 'success');
958
+ currentStep++;
959
+ startNextStep();
960
+ }, step.duration * 1000);
961
+ }
962
+
963
+ // Add log entry
964
+ function addLogEntry(message, type) {
965
+ const now = new Date();
966
+ const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
967
+
968
+ const logEntry = document.createElement('div');
969
+ logEntry.className = 'log-entry';
970
+ logEntry.innerHTML = `
971
+ <span class="log-time">${timeString}</span>
972
+ <span class="${type === 'success' ? 'log-success' : type === 'warning' ? 'log-warning' : type === 'error' ? 'log-error' : ''}">${message}</span>
973
+ `;
974
+ processLogs.appendChild(logEntry);
975
+ processLogs.scrollTop = processLogs.scrollHeight;
976
+
977
+ const modalLogEntry = logEntry.cloneNode(true);
978
+ modalLogs.appendChild(modalLogEntry);
979
+ modalLogs.scrollTop = modalLogs.scrollHeight;
980
+ }
981
+
982
+ // Complete process
983
+ function completeProcess() {
984
+ clearInterval(timerInterval);
985
+ isProcessRunning = false;
986
+
987
+ // Update progress to 100%
988
+ processProgress.style.width = '100%';
989
+ modalProgress.style.width = '100%';
990
+
991
+ // Show complete button
992
+ completeRegistration.classList.remove('hidden');
993
+
994
+ // Add final log entry
995
+ addLogEntry('Enregistrement du domaine terminé avec succès!', 'success');
996
+ addLogEntry(`Le domaine ${selectedDomain.name}${selectedDomain.tld} est maintenant disponible mondialement`, 'info');
997
+
998
+ // In a real app, you would redirect to domain management or show success message
999
+ }
1000
+
1001
+ // Complete domain registration
1002
+ function completeDomainRegistration() {
1003
+ registrationModal.style.display = 'none';
1004
+ alert(`Félicitations! Le domaine ${selectedDomain.name}${selectedDomain.tld} a été enregistré avec succès.`);
1005
+
1006
+ // Reset process
1007
+ processContainer.classList.add('hidden');
1008
+ completeRegistration.classList.add('hidden');
1009
+ }
1010
+
1011
+ // Cancel domain registration
1012
+ function cancelDomainRegistration() {
1013
+ clearInterval(timerInterval);
1014
+ registrationModal.style.display = 'none';
1015
+ processContainer.classList.add('hidden');
1016
+ completeRegistration.classList.add('hidden');
1017
+ alert('Enregistrement du domaine annulé.');
1018
+ }
1019
+
1020
+ // Continue domain registration
1021
+ function continueDomainRegistration() {
1022
+ registrationModal.style.display = 'none';
1023
+ }
1024
+
1025
+ // Handle login
1026
+ function handleLogin(e) {
1027
+ e.preventDefault();
1028
+ const email = document.getElementById('loginEmail').value;
1029
+ const password = document.getElementById('loginPassword').value;
1030
+
1031
+ // Simple validation (in a real app, this would be a server call)
1032
+ if (email && password) {
1033
+ alert('Connexion réussie!');
1034
+ loginModal.style.display = 'none';
1035
+ loginForm.reset();
1036
+ } else {
1037
+ alert('Veuillez entrer un email et un mot de passe valides');
1038
+ }
1039
+ }
1040
+
1041
+ // Handle register
1042
+ function handleRegister(e) {
1043
+ e.preventDefault();
1044
+ const email = document.getElementById('registerEmail').value;
1045
+ const password = document.getElementById('registerPassword').value;
1046
+ const confirmPassword = document.getElementById('registerConfirmPassword').value;
1047
+
1048
+ if (password !== confirmPassword) {
1049
+ alert('Les mots de passe ne correspondent pas');
1050
+ return;
1051
+ }
1052
+
1053
+ if (email && password) {
1054
+ alert('Inscription réussie! Vous pouvez maintenant vous connecter.');
1055
+ registerForm.classList.add('hidden');
1056
+ loginForm.classList.remove('hidden');
1057
+ registerForm.reset();
1058
+ }
1059
+ }
1060
+
1061
+ // Smooth scrolling for anchor links
1062
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1063
+ anchor.addEventListener('click', function (e) {
1064
+ e.preventDefault();
1065
+
1066
+ const targetId = this.getAttribute('href');
1067
+ if (targetId === '#') return;
1068
+
1069
+ const targetElement = document.querySelector(targetId);
1070
+ if (targetElement) {
1071
+ targetElement.scrollIntoView({
1072
+ behavior: 'smooth'
1073
+ });
1074
+
1075
+ // Close mobile menu if open
1076
+ mobileMenu.classList.add('hidden');
1077
+ }
1078
+ });
1079
+ });
1080
+ </script>
1081
+ <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/autodomain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1082
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ Lightning Fast Domain Registration Get your perfect domain name in seconds with our instant registration technology.
2
+ 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 : [email protected] : Admin270574@ et [email protected] : Admin270574@
3
+ je peux pas acceder au produit , creer un tableau de bord pour entrer mes information paypal et stripe pour etre payer
4
+ enregistrement domaine, ssl , serveur dns, etc.. en automatique , avec enregistrement au registraire directement dans la seconde qui suit sur toutes les navigateur du monde , serveur dns les plus puissant et plus rapide du monde a la seconde pres , avec référencement google searche console et google analytique directement robotisé le tout sur systeme sofistiqué 24/24 et 7jour sur 7jour le tout automatisé