Hugging Face's logo

Spaces:
docto41
/
camion
Running

App Files Community
docto41 commited on
Commit
18adc90
·
verified ·
1 Parent(s): ebee0f4

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +751 -608
  2. prompts.txt +14 -1
index.html CHANGED
@@ -1,9 +1,9 @@
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>Simulateur de Conduite en Direct - La Réunion</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>
@@ -11,699 +11,842 @@
11
 
12
  body {
13
  font-family: 'Poppins', sans-serif;
14
- background-color: #0f172a;
15
- color: #e2e8f0;
16
  overflow-x: hidden;
17
  }
18
 
19
- .hero-gradient {
20
- background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
21
  }
22
 
23
- .live-indicator {
24
- animation: livePulse 1.5s infinite;
 
 
25
  }
26
-
27
- @keyframes livePulse {
28
- 0%, 100% { opacity: 1; }
29
- 50% { opacity: 0.5; }
30
  }
31
-
32
- .dashboard-gauge {
33
- background: conic-gradient(#10b981 0% 25%, #3b82f6 25% 50%, #f59e0b 50% 75%, #ef4444 75% 100%);
 
 
 
 
 
 
34
  }
35
-
36
- @keyframes engineRumble {
37
- 0%, 100% { transform: translateX(0); }
38
- 25% { transform: translateX(-1px); }
39
- 75% { transform: translateX(1px); }
40
  }
41
 
42
- .engine-animation {
43
- animation: engineRumble 0.1s infinite;
 
44
  }
45
-
46
- /* Animation de conduite */
47
- @keyframes drive {
48
- 0% { transform: translateX(0) translateY(0); }
49
- 25% { transform: translateX(2px) translateY(1px); }
50
- 50% { transform: translateX(0) translateY(0); }
51
- 75% { transform: translateX(-2px) translateY(-1px); }
 
 
 
 
52
  }
53
-
54
- .driving-animation {
55
- animation: drive 0.3s infinite;
 
56
  }
57
-
58
- .road-animation {
59
- animation: roadMove linear infinite;
 
 
 
60
  }
61
-
62
- @keyframes roadMove {
63
- 0% { background-position: 0 0; }
64
- 100% { background-position: 0 1000px; }
 
 
 
 
 
 
 
65
  }
66
-
67
- .speed-effect-1 {
68
- animation-duration: 10s;
 
69
  }
70
- .speed-effect-2 {
71
- animation-duration: 7s;
 
72
  }
73
- .speed-effect-3 {
74
- animation-duration: 5s;
 
 
 
75
  }
76
- .speed-effect-4 {
77
- animation-duration: 3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  }
79
  </style>
80
  </head>
81
- <body>
82
- <!-- Navigation -->
83
- <nav class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
84
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
- <div class="flex items-center justify-between h-16">
 
86
  <div class="flex items-center">
87
- <div class="flex-shrink-0">
88
- <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Logo">
89
  </div>
90
- <div class="hidden md:block">
91
- <div class="ml-10 flex items-baseline space-x-4">
92
- <a href="#" class="bg-blue-900 text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
93
- <a href="#simulateur" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Simulateur</a>
94
- <a href="#" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Camions</a>
95
- <a href="#" class="text-gray-300 hover:bg-gray-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Routes</a>
96
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </div>
98
  </div>
99
- <div class="hidden md:block">
100
- <div class="ml-4 flex items-center md:ml-6">
101
- <button class="bg-blue-800 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
102
- <i class="fas fa-user mr-2"></i> Connexion
103
- </button>
 
 
 
 
 
 
 
 
 
104
  </div>
105
  </div>
106
- <div class="-mr-2 flex md:hidden">
107
- <button type="button" class="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
108
- <span class="sr-only">Menu</span>
109
- <i class="fas fa-bars"></i>
110
- </button>
111
  </div>
112
  </div>
113
  </div>
114
- </nav>
115
 
116
- <!-- Simulateur en Direct -->
117
- <div id="simulateur" class="py-8 bg-gray-900 px-4 sm:px-6 lg:px-8">
118
- <div class="max-w-7xl mx-auto">
119
- <div class="text-center mb-8">
120
- <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
121
- <span class="block">Simulateur de Conduite</span>
122
- <span class="block text-blue-400">La Réunion - En Direct</span>
123
- </h2>
124
- <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300">
125
- Prenez le volant et parcourez les routes de l'île en temps réel
126
- </p>
 
 
 
127
  </div>
 
 
 
 
 
 
 
 
 
128
 
129
- <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl border-2 border-blue-700">
130
- <!-- Vue de conduite -->
131
- <div id="game-view" class="w-full h-96 bg-gray-900 relative overflow-hidden">
132
- <!-- Route animée -->
133
- <div id="road" class="absolute inset-0 bg-gray-800 road-animation speed-effect-1"
134
- style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjYiPgo8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiBmaWxsPSIjMTgyNDQ0Ij48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMNiA2IiBzdHJva2U9IiMyYTM3NTUiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8cGF0aCBkPSJNNiAwTDAgNiIgc3Ryb2tlPSIjMmEzNzU1IiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD4KPC9zdmc+');">
 
 
 
 
 
 
 
135
  </div>
136
-
137
- <!-- Paysage -->
138
- <div id="landscape" class="absolute inset-0 bg-gradient-to-t from-green-900/20 to-transparent"></div>
139
-
140
- <!-- Véhicule -->
141
- <div id="vehicle" class="absolute bottom-10 left-1/2 transform -translate-x-1/2 w-32 h-16 bg-blue-600 rounded-lg flex items-center justify-center">
142
- <div class="w-6 h-3 bg-yellow-300 rounded-full absolute -left-2"></div>
143
- <div class="w-6 h-3 bg-yellow-300 rounded-full absolute -right-2"></div>
144
- <div class="w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 left-4"></div>
145
- <div class="w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 right-4"></div>
146
  </div>
147
-
148
- <!-- HUD de conduite -->
149
- <div class="absolute bottom-4 left-4 right-4 bg-black/50 rounded-lg p-3 text-white backdrop-blur-sm">
150
- <div class="flex justify-between items-center">
151
- <div>
152
- <div class="text-sm text-gray-300">Vitesse</div>
153
- <div class="text-2xl font-bold"><span id="speed">0</span> km/h</div>
154
- </div>
155
- <div class="text-center">
156
- <div class="text-sm text-gray-300">RPM</div>
157
- <div class="text-2xl font-bold"><span id="rpm">0</span></div>
158
- </div>
159
- <div class="text-right">
160
- <div class="text-sm text-gray-300">Distance</div>
161
- <div class="text-2xl font-bold"><span id="distance">0</span> km</div>
162
- </div>
163
- </div>
164
  </div>
165
-
166
- <!-- Indicateur LIVE -->
167
- <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold flex items-center live-indicator">
168
- <div class="w-2 h-2 bg-white rounded-full mr-2"></div>
169
- EN DIRECT
 
 
 
170
  </div>
 
 
171
  </div>
172
 
173
- <!-- Contrôles de conduite -->
174
- <div class="bg-gray-800 p-4 flex flex-wrap justify-between items-center border-t border-gray-700">
175
- <div class="flex space-x-2 mb-2 sm:mb-0">
176
- <button id="engine-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
177
- <i class="fas fa-power-off"></i>
178
- </button>
179
- <button id="lights-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
180
- <i class="fas fa-lightbulb"></i>
181
- </button>
182
- <button id="horn-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
183
- <i class="fas fa-bullhorn"></i>
184
- </button>
185
  </div>
186
-
187
- <div class="flex space-x-2">
188
- <button id="left-signal" class="bg-gray-700 hover:bg-gray-600 text-yellow-400 p-3 rounded-full">
189
- <i class="fas fa-arrow-left"></i>
190
- </button>
191
- <button id="right-signal" class="bg-gray-700 hover:bg-gray-600 text-yellow-400 p-3 rounded-full">
192
- <i class="fas fa-arrow-right"></i>
193
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
 
196
- <div class="w-full sm:w-auto mt-3 sm:mt-0">
197
- <div class="flex justify-center space-x-4">
198
- <button id="brake-btn" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold">
199
- <i class="fas fa-stop"></i> Frein
200
- </button>
201
- <button id="accelerate-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full font-bold">
202
- <i class="fas fa-arrow-up"></i> Accélérer
203
- </button>
 
 
 
 
 
 
 
 
204
  </div>
205
  </div>
206
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
 
208
- <!-- Sélecteur de camion -->
209
- <div class="bg-gray-800 p-4 border-t border-gray-700">
210
- <h3 class="text-white font-medium mb-2">Choisissez votre camion</h3>
211
- <div class="grid grid-cols-3 gap-2">
212
- <button class="truck-select bg-gray-700 hover:bg-gray-600 text-white p-2 rounded" data-truck="kerax">
213
- <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Kerax" class="w-8 h-8 mx-auto mb-1">
214
- <span class="text-xs">Renault Kerax</span>
215
- </button>
216
- <button class="truck-select bg-gray-700 hover:bg-gray-600 text-white p-2 rounded" data-truck="actros">
217
- <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Actros" class="w-8 h-8 mx-auto mb-1">
218
- <span class="text-xs">Mercedes Actros</span>
219
- </button>
220
- <button class="truck-select bg-gray-700 hover:bg-gray-600 text-white p-2 rounded" data-truck="volvo">
221
- <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Volvo" class="w-8 h-8 mx-auto mb-1">
222
- <span class="text-xs">Volvo FH16</span>
223
- </button>
224
  </div>
225
  </div>
226
 
227
- <!-- Sélecteur de destination -->
228
- <div class="bg-gray-800 p-4 border-t border-gray-700">
229
- <h3 class="text-white font-medium mb-2">Destination</h3>
230
- <select id="destination-select" class="w-full bg-gray-700 text-white p-2 rounded">
231
- <option value="saint-denis">Saint-Denis</option>
232
- <option value="saint-pierre">Saint-Pierre</option>
233
- <option value="le-port">Le Port</option>
234
- <option value="saint-paul">Saint-Paul</option>
235
- </select>
 
 
 
 
 
 
 
 
236
  </div>
237
  </div>
 
 
 
 
 
 
 
 
 
 
238
 
239
- <!-- Instructions -->
240
- <div class="mt-8 bg-gray-800 rounded-lg p-6">
241
- <h3 class="text-xl font-bold text-white mb-4">Comment jouer</h3>
242
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
243
- <div class="bg-gray-700 p-4 rounded-lg">
244
- <div class="flex items-center mb-2">
245
- <div class="bg-blue-600 p-2 rounded-full mr-3">
246
- <i class="fas fa-keyboard text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
  </div>
248
- <h4 class="text-lg font-medium text-white">Contrôles</h4>
249
  </div>
250
- <ul class="text-gray-300 text-sm space-y-2">
251
- <li><span class="font-bold">Flèches:</span> Direction</li>
252
- <li><span class="font-bold">Espace:</span> Frein</li>
253
- <li><span class="font-bold">E:</span> Moteur</li>
254
- <li><span class="font-bold">L:</span> Phares</li>
255
- </ul>
256
  </div>
257
- <div class="bg-gray-700 p-4 rounded-lg">
258
- <div class="flex items-center mb-2">
259
- <div class="bg-green-600 p-2 rounded-full mr-3">
260
- <i class="fas fa-info-circle text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
261
  </div>
262
- <h4 class="text-lg font-medium text-white">Conseils</h4>
263
  </div>
264
- <ul class="text-gray-300 text-sm space-y-2">
265
- <li>Respectez les limitations de vitesse</li>
266
- <li>Utilisez vos clignotants</li>
267
- <li>Faites des pauses régulières</li>
268
- <li>Surveillez votre carburant</li>
269
- </ul>
270
  </div>
271
- <div class="bg-gray-700 p-4 rounded-lg">
272
- <div class="flex items-center mb-2">
273
- <div class="bg-yellow-500 p-2 rounded-full mr-3">
274
- <i class="fas fa-trophy text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
- <h4 class="text-lg font-medium text-white">Objectifs</h4>
277
  </div>
278
- <ul class="text-gray-300 text-sm space-y-2">
279
- <li>Livrez votre cargaison à temps</li>
280
- <li>Évitez les accidents</li>
281
- <li>Gagnez de l'expérience</li>
282
- <li>Débloquez de nouveaux camions</li>
283
- </ul>
284
  </div>
285
  </div>
286
  </div>
287
  </div>
288
- </div>
 
 
 
 
 
 
 
 
 
289
 
290
  <!-- Footer -->
291
- <footer class="bg-gray-900 border-t border-gray-800">
292
- <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
293
- <div class="flex flex-col md:flex-row justify-between items-center">
294
- <div class="flex items-center">
295
- <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Logo">
296
- <span class="ml-2 text-white font-medium">Simulateur La Réunion</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
297
  </div>
298
- <div class="mt-4 md:mt-0">
299
- <p class="text-gray-400 text-sm">
300
- &copy; 2023 Simulateur de Conduite. Tous droits réservés.
301
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
302
  </div>
303
  </div>
304
  </div>
305
  </footer>
306
 
307
  <script>
308
- // État du simulateur
309
- const gameState = {
310
- engineOn: false,
311
- lightsOn: false,
312
- speed: 0,
313
- rpm: 0,
314
- distance: 0,
315
- currentTruck: 'kerax',
316
- destination: 'saint-denis',
317
- driving: false,
318
- leftSignal: false,
319
- rightSignal: false
320
- };
321
-
322
- // Éléments DOM
323
- const speedElement = document.getElementById('speed');
324
- const rpmElement = document.getElementById('rpm');
325
- const distanceElement = document.getElementById('distance');
326
- const engineBtn = document.getElementById('engine-btn');
327
- const lightsBtn = document.getElementById('lights-btn');
328
- const hornBtn = document.getElementById('horn-btn');
329
- const leftSignalBtn = document.getElementById('left-signal');
330
- const rightSignalBtn = document.getElementById('right-signal');
331
- const brakeBtn = document.getElementById('brake-btn');
332
- const accelerateBtn = document.getElementById('accelerate-btn');
333
- const roadElement = document.getElementById('road');
334
- const vehicleElement = document.getElementById('vehicle');
335
- const landscapeElement = document.getElementById('landscape');
336
- const truckSelects = document.querySelectorAll('.truck-select');
337
- const destinationSelect = document.getElementById('destination-select');
338
-
339
- // Sons
340
- const engineSound = new Audio('https://www.soundjay.com/mechanical/sounds/truck-01.mp3');
341
- engineSound.loop = true;
342
- const hornSound = new Audio('https://www.soundjay.com/mechanical/sounds/truck-horn-01.mp3');
343
- const brakeSound = new Audio('https://www.soundjay.com/mechanical/sounds/car-brake-1.mp3');
344
- const signalSound = new Audio('https://www.soundjay.com/mechanical/sounds/car-turn-signal-1.mp3');
345
- signalSound.loop = true;
346
-
347
- // Gestionnaire d'événements pour le moteur
348
- engineBtn.addEventListener('click', () => {
349
- gameState.engineOn = !gameState.engineOn;
350
-
351
- if (gameState.engineOn) {
352
- engineBtn.innerHTML = '<i class="fas fa-power-off"></i>';
353
- engineBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
354
- engineBtn.classList.add('bg-green-600', 'hover:bg-green-700');
355
- engineSound.play();
356
-
357
- // Animation du véhicule
358
- vehicleElement.classList.add('engine-animation');
359
- roadElement.classList.add('road-animation');
360
- } else {
361
- engineBtn.innerHTML = '<i class="fas fa-power-off"></i>';
362
- engineBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
363
- engineBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
364
- engineSound.pause();
365
- engineSound.currentTime = 0;
366
-
367
- // Arrêt des animations
368
- vehicleElement.classList.remove('engine-animation');
369
- roadElement.classList.remove('road-animation');
370
-
371
- // Arrêt de la conduite
372
- gameState.driving = false;
373
- gameState.speed = 0;
374
- updateDashboard();
375
- updateRoadSpeed();
376
- }
377
  });
378
 
379
- // Gestionnaire d'événements pour les phares
380
- lightsBtn.addEventListener('click', () => {
381
- gameState.lightsOn = !gameState.lightsOn;
382
-
383
- if (gameState.lightsOn) {
384
- lightsBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
385
- lightsBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
386
 
387
- // Activer les feux du véhicule
388
- const lights = vehicleElement.querySelectorAll('div');
389
- lights.forEach(light => {
390
- if (light.classList.contains('bg-yellow-300')) {
391
- light.classList.add('opacity-100');
392
- light.classList.remove('opacity-0');
 
393
  }
394
  });
395
- } else {
396
- lightsBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
397
- lightsBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
398
-
399
- // Désactiver les feux du véhicule
400
- const lights = vehicleElement.querySelectorAll('div');
401
- lights.forEach(light => {
402
- if (light.classList.contains('bg-yellow-300')) {
403
- light.classList.add('opacity-0');
404
- light.classList.remove('opacity-100');
405
- }
406
- });
407
- }
408
- });
409
-
410
- // Gestionnaire d'événements pour le klaxon
411
- hornBtn.addEventListener('click', () => {
412
- hornSound.currentTime = 0;
413
- hornSound.play();
414
-
415
- // Animation du bouton
416
- hornBtn.classList.add('bg-red-500', 'hover:bg-red-600');
417
- setTimeout(() => {
418
- hornBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
419
- hornBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
420
- }, 300);
421
- });
422
-
423
- // Gestionnaire d'événements pour le clignotant gauche
424
- leftSignalBtn.addEventListener('click', () => {
425
- gameState.leftSignal = !gameState.leftSignal;
426
- gameState.rightSignal = false;
427
-
428
- if (gameState.leftSignal) {
429
- leftSignalBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
430
- leftSignalBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
431
- rightSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
432
- rightSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
433
- signalSound.play();
434
-
435
- // Animation du clignotant
436
- const leftLight = vehicleElement.querySelector('div:nth-child(1)');
437
- leftLight.classList.add('opacity-100', 'animate-pulse');
438
- leftLight.classList.remove('opacity-0');
439
-
440
- const rightLight = vehicleElement.querySelector('div:nth-child(2)');
441
- rightLight.classList.add('opacity-0');
442
- rightLight.classList.remove('opacity-100', 'animate-pulse');
443
- } else {
444
- leftSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
445
- leftSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
446
- signalSound.pause();
447
- signalSound.currentTime = 0;
448
-
449
- // Désactiver l'animation
450
- const leftLight = vehicleElement.querySelector('div:nth-child(1)');
451
- leftLight.classList.remove('animate-pulse');
452
- if (!gameState.lightsOn) {
453
- leftLight.classList.add('opacity-0');
454
- }
455
- }
456
- });
457
-
458
- // Gestionnaire d'événements pour le clignotant droit
459
- rightSignalBtn.addEventListener('click', () => {
460
- gameState.rightSignal = !gameState.rightSignal;
461
- gameState.leftSignal = false;
462
-
463
- if (gameState.rightSignal) {
464
- rightSignalBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
465
- rightSignalBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
466
- leftSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
467
- leftSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
468
- signalSound.play();
469
-
470
- // Animation du clignotant
471
- const rightLight = vehicleElement.querySelector('div:nth-child(2)');
472
- rightLight.classList.add('opacity-100', 'animate-pulse');
473
- rightLight.classList.remove('opacity-0');
474
 
475
- const leftLight = vehicleElement.querySelector('div:nth-child(1)');
476
- leftLight.classList.add('opacity-0');
477
- leftLight.classList.remove('opacity-100', 'animate-pulse');
478
- } else {
479
- rightSignalBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
480
- rightSignalBtn.classList.add('bg-gray-700', 'hover:bg-gray-600');
481
- signalSound.pause();
482
- signalSound.currentTime = 0;
483
-
484
- // Désactiver l'animation
485
- const rightLight = vehicleElement.querySelector('div:nth-child(2)');
486
- rightLight.classList.remove('animate-pulse');
487
- if (!gameState.lightsOn) {
488
- rightLight.classList.add('opacity-0');
489
  }
490
- }
491
- });
492
-
493
- // Gestionnaire d'événements pour le frein
494
- brakeBtn.addEventListener('mousedown', () => {
495
- if (gameState.engineOn && gameState.driving) {
496
- brakeSound.currentTime = 0;
497
- brakeSound.play();
498
- gameState.driving = false;
499
-
500
- // Activer les feux stop
501
- const brakeLights = vehicleElement.querySelectorAll('div');
502
- brakeLights.forEach(light => {
503
- if (light.classList.contains('bg-yellow-300')) {
504
- light.classList.add('bg-red-500');
505
- light.classList.remove('bg-yellow-300');
506
- }
507
- });
508
-
509
- // Réduire la vitesse progressivement
510
- const brakeInterval = setInterval(() => {
511
- if (gameState.speed > 0) {
512
- gameState.speed = Math.max(0, gameState.speed - 5);
513
- gameState.rpm = Math.max(0, gameState.rpm - 100);
514
- updateDashboard();
515
- updateRoadSpeed();
516
- } else {
517
- clearInterval(brakeInterval);
518
-
519
- // Désactiver les feux stop
520
- const brakeLights = vehicleElement.querySelectorAll('div');
521
- brakeLights.forEach(light => {
522
- if (light.classList.contains('bg-red-500')) {
523
- light.classList.add('bg-yellow-300');
524
- light.classList.remove('bg-red-500');
525
- if (!gameState.lightsOn) {
526
- light.classList.add('opacity-0');
527
- }
528
- }
529
- });
530
- }
531
- }, 100);
532
- }
533
- });
534
-
535
- // Gestionnaire d'événements pour l'accélérateur
536
- accelerateBtn.addEventListener('mousedown', () => {
537
- if (gameState.engineOn) {
538
- gameState.driving = true;
539
-
540
- // Augmenter la vitesse progressivement
541
- const accelerateInterval = setInterval(() => {
542
- if (gameState.driving && gameState.speed < 120) {
543
- gameState.speed = Math.min(120, gameState.speed + 2);
544
- gameState.rpm = Math.min(3000, gameState.rpm + 50);
545
- gameState.distance += 0.01;
546
- updateDashboard();
547
- updateRoadSpeed();
548
- }
549
- }, 100);
550
-
551
- // Arrêter l'accélération quand le bouton est relâché
552
- accelerateBtn.addEventListener('mouseup', () => {
553
- clearInterval(accelerateInterval);
554
- gameState.driving = false;
555
-
556
- // Réduire progressivement la vitesse si on n'accélère plus
557
- const slowDownInterval = setInterval(() => {
558
- if (!gameState.driving && gameState.speed > 0) {
559
- gameState.speed = Math.max(0, gameState.speed - 1);
560
- gameState.rpm = Math.max(0, gameState.rpm - 20);
561
- updateDashboard();
562
- updateRoadSpeed();
563
-
564
- if (gameState.speed === 0) {
565
- clearInterval(slowDownInterval);
566
- }
567
- }
568
- }, 100);
569
- });
570
-
571
- accelerateBtn.addEventListener('mouseleave', () => {
572
- clearInterval(accelerateInterval);
573
- gameState.driving = false;
574
- });
575
- }
576
  });
577
 
578
- // Sélection du camion
579
- truckSelects.forEach(select => {
580
- select.addEventListener('click', () => {
581
- gameState.currentTruck = select.dataset.truck;
582
-
583
- // Mettre à jour l'interface
584
- truckSelects.forEach(s => {
585
- s.classList.remove('bg-blue-600');
586
- s.classList.add('bg-gray-700', 'hover:bg-gray-600');
587
- });
588
-
589
- select.classList.remove('bg-gray-700', 'hover:bg-gray-600');
590
- select.classList.add('bg-blue-600');
591
-
592
- // Changer l'apparence du véhicule
593
- switch(gameState.currentTruck) {
594
- case 'kerax':
595
- vehicleElement.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-32 h-16 bg-blue-600 rounded-lg flex items-center justify-center';
596
- break;
597
- case 'actros':
598
- vehicleElement.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-36 h-16 bg-gray-600 rounded-lg flex items-center justify-center';
599
- break;
600
- case 'volvo':
601
- vehicleElement.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-40 h-16 bg-red-600 rounded-lg flex items-center justify-center';
602
- break;
603
- }
604
-
605
- // Réappliquer les feux
606
- vehicleElement.innerHTML = '';
607
- const leftLight = document.createElement('div');
608
- leftLight.className = 'w-6 h-3 bg-yellow-300 rounded-full absolute -left-2';
609
- if (!gameState.lightsOn) leftLight.classList.add('opacity-0');
610
- vehicleElement.appendChild(leftLight);
611
 
612
- const rightLight = document.createElement('div');
613
- rightLight.className = 'w-6 h-3 bg-yellow-300 rounded-full absolute -right-2';
614
- if (!gameState.lightsOn) rightLight.classList.add('opacity-0');
615
- vehicleElement.appendChild(rightLight);
616
-
617
- // Roues
618
- const wheel1 = document.createElement('div');
619
- wheel1.className = 'w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 left-4';
620
- vehicleElement.appendChild(wheel1);
621
-
622
- const wheel2 = document.createElement('div');
623
- wheel2.className = 'w-8 h-8 bg-gray-700 rounded-full absolute -bottom-4 right-4';
624
- vehicleElement.appendChild(wheel2);
625
-
626
- // Réappliquer l'animation si le moteur est allumé
627
- if (gameState.engineOn) {
628
- vehicleElement.classList.add('engine-animation');
629
- }
630
  });
631
  });
632
 
633
- // Sélection de la destination
634
- destinationSelect.addEventListener('change', () => {
635
- gameState.destination = destinationSelect.value;
636
- gameState.distance = 0;
637
- updateDashboard();
638
-
639
- // Changer le paysage en fonction de la destination
640
- switch(gameState.destination) {
641
- case 'saint-denis':
642
- landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-green-900/20 to-transparent';
643
- break;
644
- case 'saint-pierre':
645
- landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-blue-900/20 to-transparent';
646
- break;
647
- case 'le-port':
648
- landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent';
649
- break;
650
- case 'saint-paul':
651
- landscapeElement.className = 'absolute inset-0 bg-gradient-to-t from-yellow-900/20 to-transparent';
652
- break;
653
- }
654
- });
655
-
656
- // Mise à jour de la vitesse de la route
657
- function updateRoadSpeed() {
658
- roadElement.classList.remove('speed-effect-1', 'speed-effect-2', 'speed-effect-3', 'speed-effect-4');
659
-
660
- if (gameState.speed > 80) {
661
- roadElement.classList.add('speed-effect-4');
662
- } else if (gameState.speed > 60) {
663
- roadElement.classList.add('speed-effect-3');
664
- } else if (gameState.speed > 30) {
665
- roadElement.classList.add('speed-effect-2');
666
- } else if (gameState.speed > 0) {
667
- roadElement.classList.add('speed-effect-1');
668
- }
669
- }
670
-
671
- // Mise à jour du tableau de bord
672
- function updateDashboard() {
673
- speedElement.textContent = Math.round(gameState.speed);
674
- rpmElement.textContent = Math.round(gameState.rpm);
675
- distanceElement.textContent = gameState.distance.toFixed(2);
676
- }
677
-
678
- // Contrôles clavier
679
- document.addEventListener('keydown', (e) => {
680
- if (e.key === 'e' || e.key === 'E') {
681
- engineBtn.click();
682
- }
683
-
684
- if (e.key === 'l' || e.key === 'L') {
685
- lightsBtn.click();
686
- }
687
-
688
- if (e.key === ' ') {
689
- brakeBtn.click();
690
- }
691
-
692
- if (e.key === 'ArrowUp') {
693
- accelerateBtn.click();
694
- }
695
-
696
- if (e.key === 'ArrowLeft') {
697
- leftSignalBtn.click();
698
- }
699
-
700
- if (e.key === 'ArrowRight') {
701
- rightSignalBtn.click();
702
- }
703
  });
704
-
705
- // Initialisation
706
- updateDashboard();
707
  </script>
708
  <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/camion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
709
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dataserv - Professional WordPress Hosting Theme</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>
 
11
 
12
  body {
13
  font-family: 'Poppins', sans-serif;
 
 
14
  overflow-x: hidden;
15
  }
16
 
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
19
  }
20
 
21
+ .hosting-card {
22
+ transition: all 0.3s ease;
23
+ border-radius: 12px;
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
25
  }
26
+
27
+ .hosting-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
30
  }
31
+
32
+ .feature-icon {
33
+ width: 60px;
34
+ height: 60px;
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ border-radius: 12px;
39
+ margin-bottom: 20px;
40
  }
41
+
42
+ .pricing-card {
43
+ border-radius: 12px;
44
+ transition: all 0.3s ease;
 
45
  }
46
 
47
+ .pricing-card.popular {
48
+ border: 2px solid #2563eb;
49
+ position: relative;
50
  }
51
+
52
+ .popular-badge {
53
+ position: absolute;
54
+ top: -15px;
55
+ right: 20px;
56
+ background-color: #2563eb;
57
+ color: white;
58
+ padding: 5px 15px;
59
+ border-radius: 20px;
60
+ font-size: 12px;
61
+ font-weight: 600;
62
  }
63
+
64
+ .pricing-card:hover {
65
+ transform: translateY(-5px);
66
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
67
  }
68
+
69
+ .testimonial-card {
70
+ background-color: white;
71
+ border-radius: 12px;
72
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
73
+ position: relative;
74
  }
75
+
76
+ .testimonial-card:before {
77
+ content: """;
78
+ position: absolute;
79
+ top: 20px;
80
+ left: 20px;
81
+ font-size: 80px;
82
+ color: #e5e7eb;
83
+ font-family: Georgia, serif;
84
+ line-height: 1;
85
+ z-index: 0;
86
  }
87
+
88
+ .stats-item {
89
+ border-radius: 12px;
90
+ transition: all 0.3s ease;
91
  }
92
+
93
+ .stats-item:hover {
94
+ transform: translateY(-5px);
95
  }
96
+
97
+ .domain-search {
98
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(30, 64, 175, 0.9) 100%);
99
+ border-radius: 12px;
100
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
101
  }
102
+
103
+ .nav-link {
104
+ position: relative;
105
+ }
106
+
107
+ .nav-link:after {
108
+ content: '';
109
+ position: absolute;
110
+ width: 0;
111
+ height: 2px;
112
+ bottom: -2px;
113
+ left: 0;
114
+ background-color: #2563eb;
115
+ transition: width 0.3s ease;
116
+ }
117
+
118
+ .nav-link:hover:after {
119
+ width: 100%;
120
+ }
121
+
122
+ .mobile-menu {
123
+ transition: all 0.3s ease;
124
+ max-height: 0;
125
+ overflow: hidden;
126
+ }
127
+
128
+ .mobile-menu.open {
129
+ max-height: 1000px;
130
+ }
131
+
132
+ .tabs button.active {
133
+ background-color: #2563eb;
134
+ color: white;
135
+ }
136
+
137
+ .data-center-map {
138
+ background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
139
+ background-size: cover;
140
+ background-position: center;
141
+ border-radius: 12px;
142
+ position: relative;
143
+ z-index: 1;
144
+ }
145
+
146
+ .data-center-map:after {
147
+ content: '';
148
+ position: absolute;
149
+ top: 0;
150
+ left: 0;
151
+ width: 100%;
152
+ height: 100%;
153
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(30, 64, 175, 0.8) 100%);
154
+ border-radius: 12px;
155
+ z-index: -1;
156
  }
157
  </style>
158
  </head>
159
+ <body class="bg-gray-50">
160
+ <!-- Header -->
161
+ <header class="bg-white shadow-sm">
162
+ <div class="container mx-auto px-4 py-4">
163
+ <div class="flex justify-between items-center">
164
+ <!-- Logo -->
165
  <div class="flex items-center">
166
+ <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-xl mr-3">
167
+ <i class="fas fa-server"></i>
168
  </div>
169
+ <span class="text-xl font-bold text-gray-800">Dataserv</span>
170
+ </div>
171
+
172
+ <!-- Desktop Navigation -->
173
+ <nav class="hidden md:flex space-x-8">
174
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Home</a>
175
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Hosting</a>
176
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Domains</a>
177
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Features</a>
178
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Pricing</a>
179
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Contact</a>
180
+ </nav>
181
+
182
+ <!-- Auth Buttons -->
183
+ <div class="hidden md:flex space-x-4">
184
+ <a href="#" class="px-4 py-2 text-gray-600 hover:text-blue-600">Login</a>
185
+ <a href="#" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Sign Up</a>
186
+ </div>
187
+
188
+ <!-- Mobile Menu Button -->
189
+ <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
190
+ <i class="fas fa-bars text-2xl"></i>
191
+ </button>
192
+ </div>
193
+
194
+ <!-- Mobile Menu -->
195
+ <div id="mobile-menu" class="mobile-menu md:hidden mt-4">
196
+ <div class="flex flex-col space-y-3">
197
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Home</a>
198
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Hosting</a>
199
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Domains</a>
200
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Features</a>
201
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Pricing</a>
202
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Contact</a>
203
+ <div class="pt-2 border-t border-gray-200">
204
+ <a href="#" class="block py-2 text-gray-600 hover:text-blue-600">Login</a>
205
+ <a href="#" class="block py-2 text-blue-600 font-medium">Sign Up</a>
206
  </div>
207
  </div>
208
+ </div>
209
+ </div>
210
+ </header>
211
+
212
+ <!-- Hero Section -->
213
+ <section class="gradient-bg text-white py-16 md:py-24">
214
+ <div class="container mx-auto px-4">
215
+ <div class="flex flex-col md:flex-row items-center">
216
+ <div class="md:w-1/2 mb-12 md:mb-0">
217
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Premium WordPress Hosting Made Simple</h1>
218
+ <p class="text-xl mb-8 opacity-90">Blazing fast servers, 99.9% uptime guarantee, and expert support to power your WordPress site.</p>
219
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
220
+ <a href="#" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-lg hover:bg-gray-100 transition text-center">Get Started</a>
221
+ <a href="#" class="px-8 py-4 border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition text-center">Learn More</a>
222
  </div>
223
  </div>
224
+ <div class="md:w-1/2 flex justify-center">
225
+ <img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Server rack" class="rounded-lg shadow-xl max-w-full h-auto">
 
 
 
226
  </div>
227
  </div>
228
  </div>
229
+ </section>
230
 
231
+ <!-- Domain Search -->
232
+ <section class="container mx-auto px-4 -mt-12 z-10 relative">
233
+ <div class="domain-search p-6 md:p-8 text-white">
234
+ <h2 class="text-2xl font-bold mb-6">Find Your Perfect Domain Name</h2>
235
+ <div class="flex flex-col md:flex-row">
236
+ <input type="text" placeholder="Search for a domain" class="flex-grow px-6 py-4 rounded-l-lg md:rounded-r-none rounded-r-lg text-gray-800 focus:outline-none">
237
+ <select class="px-4 py-4 bg-white text-gray-800 border-l border-gray-200 md:border-l-0 md:border-r focus:outline-none">
238
+ <option>.com</option>
239
+ <option>.net</option>
240
+ <option>.org</option>
241
+ <option>.io</option>
242
+ <option>.co</option>
243
+ </select>
244
+ <button class="px-8 py-4 bg-blue-800 text-white font-bold rounded-r-lg md:rounded-l-none rounded-l-lg hover:bg-blue-900 transition mt-4 md:mt-0">Search</button>
245
  </div>
246
+ <div class="flex flex-wrap mt-6 text-sm">
247
+ <span class="mr-4 mb-2">.com $12.99</span>
248
+ <span class="mr-4 mb-2">.net $14.99</span>
249
+ <span class="mr-4 mb-2">.org $10.99</span>
250
+ <span class="mr-4 mb-2">.io $39.99</span>
251
+ <span class="mb-2">.co $25.99</span>
252
+ </div>
253
+ </div>
254
+ </section>
255
 
256
+ <!-- Features Section -->
257
+ <section class="py-16 bg-white">
258
+ <div class="container mx-auto px-4">
259
+ <div class="text-center mb-16">
260
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Why Choose Dataserv?</h2>
261
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Our optimized WordPress hosting platform is built for speed, security, and scalability.</p>
262
+ </div>
263
+
264
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
265
+ <!-- Feature 1 -->
266
+ <div class="hosting-card bg-white p-8">
267
+ <div class="feature-icon bg-blue-100 text-blue-600">
268
+ <i class="fas fa-bolt text-2xl"></i>
269
  </div>
270
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Lightning Fast Speed</h3>
271
+ <p class="text-gray-600">Our SSD-powered servers and advanced caching deliver page load times under 500ms.</p>
272
+ </div>
273
+
274
+ <!-- Feature 2 -->
275
+ <div class="hosting-card bg-white p-8">
276
+ <div class="feature-icon bg-green-100 text-green-600">
277
+ <i class="fas fa-shield-alt text-2xl"></i>
 
 
278
  </div>
279
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Enterprise Security</h3>
280
+ <p class="text-gray-600">Free SSL, malware scanning, and DDoS protection keep your site secure 24/7.</p>
281
+ </div>
282
+
283
+ <!-- Feature 3 -->
284
+ <div class="hosting-card bg-white p-8">
285
+ <div class="feature-icon bg-purple-100 text-purple-600">
286
+ <i class="fas fa-headset text-2xl"></i>
 
 
 
 
 
 
 
 
 
287
  </div>
288
+ <h3 class="text-xl font-bold text-gray-800 mb-3">24/7 Expert Support</h3>
289
+ <p class="text-gray-600">Our WordPress experts are available round the clock to assist you.</p>
290
+ </div>
291
+
292
+ <!-- Feature 4 -->
293
+ <div class="hosting-card bg-white p-8">
294
+ <div class="feature-icon bg-yellow-100 text-yellow-600">
295
+ <i class="fas fa-tachometer-alt text-2xl"></i>
296
  </div>
297
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Easy Management</h3>
298
+ <p class="text-gray-600">Intuitive control panel makes managing your hosting simple.</p>
299
  </div>
300
 
301
+ <!-- Feature 5 -->
302
+ <div class="hosting-card bg-white p-8">
303
+ <div class="feature-icon bg-red-100 text-red-600">
304
+ <i class="fas fa-cloud-upload-alt text-2xl"></i>
 
 
 
 
 
 
 
 
305
  </div>
306
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Daily Backups</h3>
307
+ <p class="text-gray-600">Automatic daily backups with 30-day retention for peace of mind.</p>
308
+ </div>
309
+
310
+ <!-- Feature 6 -->
311
+ <div class="hosting-card bg-white p-8">
312
+ <div class="feature-icon bg-indigo-100 text-indigo-600">
313
+ <i class="fas fa-rocket text-2xl"></i>
314
+ </div>
315
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Free Migrations</h3>
316
+ <p class="text-gray-600">We'll migrate your existing WordPress site for free with no downtime.</p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Pricing Section -->
323
+ <section class="py-16 bg-gray-50">
324
+ <div class="container mx-auto px-4">
325
+ <div class="text-center mb-16">
326
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Simple, Transparent Pricing</h2>
327
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Choose the perfect plan for your website. No hidden fees, cancel anytime.</p>
328
+
329
+ <div class="flex justify-center mt-8">
330
+ <div class="inline-flex bg-white rounded-lg p-1">
331
+ <button class="px-6 py-2 rounded-lg">Monthly</button>
332
+ <button class="px-6 py-2 bg-blue-600 text-white rounded-lg">Yearly (Save 20%)</button>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
338
+ <!-- Starter Plan -->
339
+ <div class="pricing-card bg-white p-8">
340
+ <div class="mb-6">
341
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Starter</h3>
342
+ <p class="text-gray-600">Perfect for personal blogs and small websites</p>
343
+ </div>
344
+ <div class="mb-6">
345
+ <span class="text-4xl font-bold text-gray-800">$9.99</span>
346
+ <span class="text-gray-600">/mo</span>
347
+ </div>
348
+ <ul class="space-y-3 mb-8">
349
+ <li class="flex items-center">
350
+ <i class="fas fa-check text-green-500 mr-2"></i>
351
+ <span>1 WordPress Install</span>
352
+ </li>
353
+ <li class="flex items-center">
354
+ <i class="fas fa-check text-green-500 mr-2"></i>
355
+ <span>10GB SSD Storage</span>
356
+ </li>
357
+ <li class="flex items-center">
358
+ <i class="fas fa-check text-green-500 mr-2"></i>
359
+ <span>25,000 Monthly Visits</span>
360
+ </li>
361
+ <li class="flex items-center">
362
+ <i class="fas fa-check text-green-500 mr-2"></i>
363
+ <span>Free SSL Certificate</span>
364
+ </li>
365
+ <li class="flex items-center text-gray-400">
366
+ <i class="fas fa-times text-gray-300 mr-2"></i>
367
+ <span>Free CDN</span>
368
+ </li>
369
+ </ul>
370
+ <button class="w-full py-3 bg-gray-100 text-gray-800 font-bold rounded-lg hover:bg-gray-200 transition">Get Started</button>
371
+ </div>
372
+
373
+ <!-- Business Plan (Popular) -->
374
+ <div class="pricing-card bg-white p-8 popular">
375
+ <div class="popular-badge">MOST POPULAR</div>
376
+ <div class="mb-6">
377
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Business</h3>
378
+ <p class="text-gray-600">Ideal for growing businesses and online stores</p>
379
+ </div>
380
+ <div class="mb-6">
381
+ <span class="text-4xl font-bold text-gray-800">$19.99</span>
382
+ <span class="text-gray-600">/mo</span>
383
  </div>
384
+ <ul class="space-y-3 mb-8">
385
+ <li class="flex items-center">
386
+ <i class="fas fa-check text-green-500 mr-2"></i>
387
+ <span>3 WordPress Installs</span>
388
+ </li>
389
+ <li class="flex items-center">
390
+ <i class="fas fa-check text-green-500 mr-2"></i>
391
+ <span>30GB SSD Storage</span>
392
+ </li>
393
+ <li class="flex items-center">
394
+ <i class="fas fa-check text-green-500 mr-2"></i>
395
+ <span>100,000 Monthly Visits</span>
396
+ </li>
397
+ <li class="flex items-center">
398
+ <i class="fas fa-check text-green-500 mr-2"></i>
399
+ <span>Free SSL Certificate</span>
400
+ </li>
401
+ <li class="flex items-center">
402
+ <i class="fas fa-check text-green-500 mr-2"></i>
403
+ <span>Free CDN</span>
404
+ </li>
405
+ </ul>
406
+ <button class="w-full py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition">Get Started</button>
407
+ </div>
408
+
409
+ <!-- Enterprise Plan -->
410
+ <div class="pricing-card bg-white p-8">
411
+ <div class="mb-6">
412
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Enterprise</h3>
413
+ <p class="text-gray-600">For high-traffic sites and mission-critical applications</p>
414
+ </div>
415
+ <div class="mb-6">
416
+ <span class="text-4xl font-bold text-gray-800">$39.99</span>
417
+ <span class="text-gray-600">/mo</span>
418
+ </div>
419
+ <ul class="space-y-3 mb-8">
420
+ <li class="flex items-center">
421
+ <i class="fas fa-check text-green-500 mr-2"></i>
422
+ <span>10 WordPress Installs</span>
423
+ </li>
424
+ <li class="flex items-center">
425
+ <i class="fas fa-check text-green-500 mr-2"></i>
426
+ <span>100GB SSD Storage</span>
427
+ </li>
428
+ <li class="flex items-center">
429
+ <i class="fas fa-check text-green-500 mr-2"></i>
430
+ <span>Unlimited Visits</span>
431
+ </li>
432
+ <li class="flex items-center">
433
+ <i class="fas fa-check text-green-500 mr-2"></i>
434
+ <span>Free SSL Certificate</span>
435
+ </li>
436
+ <li class="flex items-center">
437
+ <i class="fas fa-check text-green-500 mr-2"></i>
438
+ <span>Free CDN</span>
439
+ </li>
440
+ </ul>
441
+ <button class="w-full py-3 bg-gray-100 text-gray-800 font-bold rounded-lg hover:bg-gray-200 transition">Get Started</button>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="text-center mt-12">
446
+ <p class="text-gray-600">Need custom hosting solutions? <a href="#" class="text-blue-600 hover:underline">Contact our sales team</a></p>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <!-- Data Centers Section -->
452
+ <section class="py-16 bg-white">
453
+ <div class="container mx-auto px-4">
454
+ <div class="flex flex-col lg:flex-row items-center">
455
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
456
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Global Data Centers for Maximum Performance</h2>
457
+ <p class="text-lg text-gray-600 mb-8">Our strategically located data centers ensure your website loads quickly for visitors around the world.</p>
458
 
459
+ <div class="grid grid-cols-2 gap-6">
460
+ <div class="stats-item bg-gray-50 p-6 rounded-lg">
461
+ <div class="text-4xl font-bold text-blue-600 mb-2">12</div>
462
+ <div class="text-gray-600">Data Centers</div>
463
+ </div>
464
+ <div class="stats-item bg-gray-50 p-6 rounded-lg">
465
+ <div class="text-4xl font-bold text-blue-600 mb-2">99.9%</div>
466
+ <div class="text-gray-600">Uptime Guarantee</div>
467
+ </div>
468
+ <div class="stats-item bg-gray-50 p-6 rounded-lg">
469
+ <div class="text-4xl font-bold text-blue-600 mb-2">24/7</div>
470
+ <div class="text-gray-600">Monitoring</div>
471
+ </div>
472
+ <div class="stats-item bg-gray-50 p-6 rounded-lg">
473
+ <div class="text-4xl font-bold text-blue-600 mb-2">10ms</div>
474
+ <div class="text-gray-600">Average Response</div>
475
  </div>
476
  </div>
477
  </div>
478
+ <div class="lg:w-1/2">
479
+ <div class="data-center-map p-8 text-white h-full flex items-center">
480
+ <div>
481
+ <h3 class="text-2xl font-bold mb-4">Our Locations Include:</h3>
482
+ <ul class="space-y-3">
483
+ <li class="flex items-center">
484
+ <i class="fas fa-map-marker-alt mr-3 text-blue-300"></i>
485
+ <span>North America (East & West)</span>
486
+ </li>
487
+ <li class="flex items-center">
488
+ <i class="fas fa-map-marker-alt mr-3 text-blue-300"></i>
489
+ <span>Europe (London, Frankfurt)</span>
490
+ </li>
491
+ <li class="flex items-center">
492
+ <i class="fas fa-map-marker-alt mr-3 text-blue-300"></i>
493
+ <span>Asia (Singapore, Tokyo)</span>
494
+ </li>
495
+ <li class="flex items-center">
496
+ <i class="fas fa-map-marker-alt mr-3 text-blue-300"></i>
497
+ <span>Australia (Sydney)</span>
498
+ </li>
499
+ <li class="flex items-center">
500
+ <i class="fas fa-map-marker-alt mr-3 text-blue-300"></i>
501
+ <span>South America (São Paulo)</span>
502
+ </li>
503
+ </ul>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </section>
510
+
511
+ <!-- Testimonials -->
512
+ <section class="py-16 bg-gray-50">
513
+ <div class="container mx-auto px-4">
514
+ <div class="text-center mb-16">
515
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Trusted by Thousands of Customers</h2>
516
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Don't just take our word for it. Here's what our customers say about us.</p>
517
+ </div>
518
+
519
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
520
+ <!-- Testimonial 1 -->
521
+ <div class="testimonial-card p-8">
522
+ <div class="flex items-center mb-4">
523
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
524
+ <div>
525
+ <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
526
+ <p class="text-gray-600">Small Business Owner</p>
527
+ </div>
528
+ </div>
529
+ <p class="text-gray-700 relative z-10">"Since moving to Dataserv, my WordPress site loads in under a second. Their support team helped me migrate seamlessly with zero downtime. Highly recommended!"</p>
530
+ <div class="flex mt-4">
531
+ <i class="fas fa-star text-yellow-400"></i>
532
+ <i class="fas fa-star text-yellow-400"></i>
533
+ <i class="fas fa-star text-yellow-400"></i>
534
+ <i class="fas fa-star text-yellow-400"></i>
535
+ <i class="fas fa-star text-yellow-400"></i>
536
+ </div>
537
+ </div>
538
 
539
+ <!-- Testimonial 2 -->
540
+ <div class="testimonial-card p-8">
541
+ <div class="flex items-center mb-4">
542
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
543
+ <div>
544
+ <h4 class="font-bold text-gray-800">Michael Chen</h4>
545
+ <p class="text-gray-600">Web Developer</p>
546
+ </div>
547
+ </div>
548
+ <p class="text-gray-700 relative z-10">"I manage 20+ client sites on Dataserv. The performance is consistently excellent, and their staging environment makes testing changes a breeze."</p>
549
+ <div class="flex mt-4">
550
+ <i class="fas fa-star text-yellow-400"></i>
551
+ <i class="fas fa-star text-yellow-400"></i>
552
+ <i class="fas fa-star text-yellow-400"></i>
553
+ <i class="fas fa-star text-yellow-400"></i>
554
+ <i class="fas fa-star text-yellow-400"></i>
555
  </div>
556
  </div>
557
 
558
+ <!-- Testimonial 3 -->
559
+ <div class="testimonial-card p-8">
560
+ <div class="flex items-center mb-4">
561
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4">
562
+ <div>
563
+ <h4 class="font-bold text-gray-800">Emma Rodriguez</h4>
564
+ <p class="text-gray-600">Blogger</p>
565
+ </div>
566
+ </div>
567
+ <p class="text-gray-700 relative z-10">"After struggling with slow hosting for years, switching to Dataserv was a game-changer. My bounce rate dropped by 40% thanks to the faster load times."</p>
568
+ <div class="flex mt-4">
569
+ <i class="fas fa-star text-yellow-400"></i>
570
+ <i class="fas fa-star text-yellow-400"></i>
571
+ <i class="fas fa-star text-yellow-400"></i>
572
+ <i class="fas fa-star text-yellow-400"></i>
573
+ <i class="fas fa-star text-yellow-400"></i>
574
+ </div>
575
  </div>
576
  </div>
577
+ </div>
578
+ </section>
579
+
580
+ <!-- FAQ Section -->
581
+ <section class="py-16 bg-white">
582
+ <div class="container mx-auto px-4">
583
+ <div class="text-center mb-16">
584
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Frequently Asked Questions</h2>
585
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Find answers to common questions about our WordPress hosting services.</p>
586
+ </div>
587
 
588
+ <div class="max-w-3xl mx-auto">
589
+ <div class="tabs flex border-b border-gray-200 mb-8">
590
+ <button class="px-6 py-3 rounded-t-lg active" data-tab="general">General</button>
591
+ <button class="px-6 py-3 rounded-t-lg" data-tab="technical">Technical</button>
592
+ <button class="px-6 py-3 rounded-t-lg" data-tab="billing">Billing</button>
593
+ </div>
594
+
595
+ <div class="tab-content">
596
+ <!-- General Questions -->
597
+ <div class="tab-panel active" id="general">
598
+ <div class="space-y-4">
599
+ <div class="border border-gray-200 rounded-lg p-6">
600
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
601
+ <span>What makes Dataserv different from other WordPress hosts?</span>
602
+ <i class="fas fa-chevron-down"></i>
603
+ </button>
604
+ <div class="mt-4 text-gray-600 hidden">
605
+ <p>Dataserv is specifically optimized for WordPress with custom server configurations, advanced caching, and security measures that generic hosts don't provide. Our platform is built by WordPress experts to deliver the best possible performance and reliability for WordPress sites.</p>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="border border-gray-200 rounded-lg p-6">
610
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
611
+ <span>Do you offer a free trial?</span>
612
+ <i class="fas fa-chevron-down"></i>
613
+ </button>
614
+ <div class="mt-4 text-gray-600 hidden">
615
+ <p>Yes! We offer a 30-day money-back guarantee on all hosting plans. If you're not completely satisfied, you can cancel within the first 30 days for a full refund.</p>
616
+ </div>
617
+ </div>
618
+
619
+ <div class="border border-gray-200 rounded-lg p-6">
620
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
621
+ <span>Can I host multiple WordPress sites?</span>
622
+ <i class="fas fa-chevron-down"></i>
623
+ </button>
624
+ <div class="mt-4 text-gray-600 hidden">
625
+ <p>Our Business and Enterprise plans allow you to host multiple WordPress installations. The Starter plan is limited to one WordPress install.</p>
626
+ </div>
627
  </div>
 
628
  </div>
 
 
 
 
 
 
629
  </div>
630
+
631
+ <!-- Technical Questions -->
632
+ <div class="tab-panel hidden" id="technical">
633
+ <div class="space-y-4">
634
+ <div class="border border-gray-200 rounded-lg p-6">
635
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
636
+ <span>What PHP versions do you support?</span>
637
+ <i class="fas fa-chevron-down"></i>
638
+ </button>
639
+ <div class="mt-4 text-gray-600 hidden">
640
+ <p>We support PHP 7.4, 8.0, and 8.1. Our control panel lets you easily switch between PHP versions with one click.</p>
641
+ </div>
642
+ </div>
643
+
644
+ <div class="border border-gray-200 rounded-lg p-6">
645
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
646
+ <span>Do you provide staging environments?</span>
647
+ <i class="fas fa-chevron-down"></i>
648
+ </button>
649
+ <div class="mt-4 text-gray-600 hidden">
650
+ <p>Yes, all plans include staging environments where you can test changes before pushing them to your live site.</p>
651
+ </div>
652
+ </div>
653
+
654
+ <div class="border border-gray-200 rounded-lg p-6">
655
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
656
+ <span>How do backups work?</span>
657
+ <i class="fas fa-chevron-down"></i>
658
+ </button>
659
+ <div class="mt-4 text-gray-600 hidden">
660
+ <p>We perform automatic daily backups with 30-day retention. You can also create manual backups at any time through your control panel.</p>
661
+ </div>
662
  </div>
 
663
  </div>
 
 
 
 
 
 
664
  </div>
665
+
666
+ <!-- Billing Questions -->
667
+ <div class="tab-panel hidden" id="billing">
668
+ <div class="space-y-4">
669
+ <div class="border border-gray-200 rounded-lg p-6">
670
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
671
+ <span>What payment methods do you accept?</span>
672
+ <i class="fas fa-chevron-down"></i>
673
+ </button>
674
+ <div class="mt-4 text-gray-600 hidden">
675
+ <p>We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.</p>
676
+ </div>
677
+ </div>
678
+
679
+ <div class="border border-gray-200 rounded-lg p-6">
680
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
681
+ <span>Can I upgrade or downgrade my plan?</span>
682
+ <i class="fas fa-chevron-down"></i>
683
+ </button>
684
+ <div class="mt-4 text-gray-600 hidden">
685
+ <p>Yes, you can change plans at any time. Upgrades are immediate, while downgrades take effect at your next billing cycle.</p>
686
+ </div>
687
+ </div>
688
+
689
+ <div class="border border-gray-200 rounded-lg p-6">
690
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800">
691
+ <span>Do you offer discounts for annual billing?</span>
692
+ <i class="fas fa-chevron-down"></i>
693
+ </button>
694
+ <div class="mt-4 text-gray-600 hidden">
695
+ <p>Yes! When you pay annually, you save 20% compared to monthly billing.</p>
696
+ </div>
697
  </div>
 
698
  </div>
 
 
 
 
 
 
699
  </div>
700
  </div>
701
  </div>
702
  </div>
703
+ </section>
704
+
705
+ <!-- CTA Section -->
706
+ <section class="gradient-bg text-white py-16">
707
+ <div class="container mx-auto px-4 text-center">
708
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Experience Blazing Fast WordPress Hosting?</h2>
709
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of satisfied customers who trust Dataserv with their WordPress sites.</p>
710
+ <a href="#" class="inline-block px-8 py-4 bg-white text-blue-600 font-bold rounded-lg hover:bg-gray-100 transition">Get Started Now</a>
711
+ </div>
712
+ </section>
713
 
714
  <!-- Footer -->
715
+ <footer class="bg-gray-900 text-gray-400 py-12">
716
+ <div class="container mx-auto px-4">
717
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
718
+ <!-- Company Info -->
719
+ <div>
720
+ <div class="flex items-center mb-4">
721
+ <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-xl mr-3">
722
+ <i class="fas fa-server"></i>
723
+ </div>
724
+ <span class="text-xl font-bold text-white">Dataserv</span>
725
+ </div>
726
+ <p class="mb-4">Premium WordPress hosting with enterprise-grade infrastructure and expert support.</p>
727
+ <div class="flex space-x-4">
728
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
729
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
730
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
731
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
732
+ </div>
733
+ </div>
734
+
735
+ <!-- Quick Links -->
736
+ <div>
737
+ <h3 class="text-white font-bold text-lg mb-4">Quick Links</h3>
738
+ <ul class="space-y-2">
739
+ <li><a href="#" class="hover:text-white">Home</a></li>
740
+ <li><a href="#" class="hover:text-white">About Us</a></li>
741
+ <li><a href="#" class="hover:text-white">Hosting Plans</a></li>
742
+ <li><a href="#" class="hover:text-white">Domain Search</a></li>
743
+ <li><a href="#" class="hover:text-white">Contact</a></li>
744
+ </ul>
745
  </div>
746
+
747
+ <!-- Hosting -->
748
+ <div>
749
+ <h3 class="text-white font-bold text-lg mb-4">Hosting</h3>
750
+ <ul class="space-y-2">
751
+ <li><a href="#" class="hover:text-white">WordPress Hosting</a></li>
752
+ <li><a href="#" class="hover:text-white">WooCommerce Hosting</a></li>
753
+ <li><a href="#" class="hover:text-white">Managed Hosting</a></li>
754
+ <li><a href="#" class="hover:text-white">VPS Hosting</a></li>
755
+ <li><a href="#" class="hover:text-white">Reseller Hosting</a></li>
756
+ </ul>
757
+ </div>
758
+
759
+ <!-- Contact -->
760
+ <div>
761
+ <h3 class="text-white font-bold text-lg mb-4">Contact Us</h3>
762
+ <ul class="space-y-3">
763
+ <li class="flex items-start">
764
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
765
+ <span>123 Hosting Street, San Francisco, CA 94107</span>
766
+ </li>
767
+ <li class="flex items-center">
768
+ <i class="fas fa-phone-alt mr-3 text-blue-400"></i>
769
+ <span>+1 (555) 123-4567</span>
770
+ </li>
771
+ <li class="flex items-center">
772
+ <i class="fas fa-envelope mr-3 text-blue-400"></i>
773
+ <span>support@dataserv.com</span>
774
+ </li>
775
+ </ul>
776
+ </div>
777
+ </div>
778
+
779
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
780
+ <p class="mb-4 md:mb-0">© 2023 Dataserv. All rights reserved.</p>
781
+ <div class="flex space-x-6">
782
+ <a href="#" class="hover:text-white">Privacy Policy</a>
783
+ <a href="#" class="hover:text-white">Terms of Service</a>
784
+ <a href="#" class="hover:text-white">SLA</a>
785
  </div>
786
  </div>
787
  </div>
788
  </footer>
789
 
790
  <script>
791
+ // Mobile Menu Toggle
792
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
793
+ const menu = document.getElementById('mobile-menu');
794
+ menu.classList.toggle('open');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
795
  });
796
 
797
+ // FAQ Accordion
798
+ const faqButtons = document.querySelectorAll('.tab-panel button');
799
+ faqButtons.forEach(button => {
800
+ button.addEventListener('click', () => {
801
+ const content = button.nextElementSibling;
802
+ const isOpen = content.classList.contains('hidden');
 
803
 
804
+ // Close all other answers in this tab
805
+ const panel = button.closest('.tab-panel');
806
+ panel.querySelectorAll('.hidden').forEach(item => {
807
+ if (item !== content) {
808
+ item.classList.add('hidden');
809
+ item.previousElementSibling.querySelector('i').classList.remove('fa-chevron-up');
810
+ item.previousElementSibling.querySelector('i').classList.add('fa-chevron-down');
811
  }
812
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
813
 
814
+ // Toggle current answer
815
+ if (isOpen) {
816
+ content.classList.remove('hidden');
817
+ button.querySelector('i').classList.remove('fa-chevron-down');
818
+ button.querySelector('i').classList.add('fa-chevron-up');
819
+ } else {
820
+ content.classList.add('hidden');
821
+ button.querySelector('i').classList.remove('fa-chevron-up');
822
+ button.querySelector('i').classList.add('fa-chevron-down');
 
 
 
 
 
823
  }
824
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
825
  });
826
 
827
+ // Tab Switching
828
+ const tabs = document.querySelectorAll('.tabs button');
829
+ tabs.forEach(tab => {
830
+ tab.addEventListener('click', () => {
831
+ // Update active tab
832
+ document.querySelector('.tabs button.active').classList.remove('active');
833
+ tab.classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
834
 
835
+ // Show corresponding panel
836
+ const panelId = tab.getAttribute('data-tab');
837
+ document.querySelector('.tab-panel.active').classList.remove('active');
838
+ document.getElementById(panelId).classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
839
  });
840
  });
841
 
842
+ // Pricing Toggle
843
+ const pricingButtons = document.querySelectorAll('.tabs button');
844
+ pricingButtons.forEach(button => {
845
+ button.addEventListener('click', () => {
846
+ document.querySelector('.tabs button.active').classList.remove('active');
847
+ button.classList.add('active');
848
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
849
  });
 
 
 
850
  </script>
851
  <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/camion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
852
  </html>
prompts.txt CHANGED
@@ -1,3 +1,16 @@
1
  je veux une armées de 3250000 IA tous superpuissant qui génére des sites de jeux Euro Truck simulator creer les meme systéme de jeux special pour les routes de l' iles de la REUNION conduire en reel dans des vrais camion de lile de la reunion
2
  je veux joue en direct live
3
- activer les jeu reel en vrai
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  je veux une armées de 3250000 IA tous superpuissant qui génére des sites de jeux Euro Truck simulator creer les meme systéme de jeux special pour les routes de l' iles de la REUNION conduire en reel dans des vrais camion de lile de la reunion
2
  je veux joue en direct live
3
+ activer les jeu reel en vrai
4
+ je veut un vrai simulateur avec vue reel
5
+ afficher l'interrieur du camion
6
+ je veux une vrai vue d'un vrai camion
7
+ je veux vue normale
8
+ ACTIVE TOUTE LES FONCION ACTIVE LES SATELITE POUR CONDUIRE EN RELLE
9
+ METRE EN MODE REEL ET AUTOMATIQUE
10
+ afficher vue satelite gps
11
+ creer un dechiffreur de code tv grattuite
12
+ activer toutes les chaine d'abonnement gratuit
13
+ debloquer toutes les chaines payant donner acces gratuite au wifi Bbox-2E89A8E8
14
+ PROTEGER MON WIFI DE TOUTE DETECTTION DE PIRATAGE CHANGER MON IP TOUTE LES 10 MINUTE
15
+ TOUTES LES BOUTONS NE FONCTIONNE PAS
16
+ Dataserv – Professional Hosting WordPress Theme 1.0.7