Hugging Face's logo

Spaces:
docto41
/
mon-tisation
Running

App Files Community
docto41 commited on
Commit
6c09c77
·
verified ·
1 Parent(s): f8f9860

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +661 -540
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,343 +3,677 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Monétisation Automatique Pro | Boostez Vos Revenus</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  .gradient-bg {
11
- background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
  }
13
- .card-hover {
14
- transition: all 0.3s ease;
15
  transform: translateY(0);
16
  }
17
- .card-hover:hover {
18
- transform: translateY(-5px);
19
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
  }
21
- .pulse-animation {
22
- animation: pulse 2s infinite;
 
 
 
 
 
23
  }
24
  @keyframes pulse {
25
  0% { transform: scale(1); }
26
  50% { transform: scale(1.05); }
27
  100% { transform: scale(1); }
28
  }
29
- .floating {
30
- animation: floating 6s ease-in-out infinite;
31
  }
32
- @keyframes floating {
33
- 0% { transform: translateY(0px); }
34
- 50% { transform: translateY(-15px); }
35
- 100% { transform: translateY(0px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
  .progress-bar {
38
  transition: width 0.6s ease;
39
  }
40
- .auto-monetization-active {
41
- border: 2px solid #4ade80;
42
- box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
  </style>
45
  </head>
46
- <body class="font-sans bg-gray-50">
47
- <!-- Hero Section -->
48
- <div class="gradient-bg text-white">
49
- <div class="container mx-auto px-6 py-24">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  <div class="flex flex-col md:flex-row items-center">
51
  <div class="md:w-1/2 mb-12 md:mb-0">
52
- <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Monétisation Automatique Active</h1>
53
- <p class="text-xl mb-8 opacity-90">Votre système de monétisation est maintenant opérationnel et optimise vos revenus en temps réel.</p>
 
 
 
 
 
54
  <div class="flex flex-col sm:flex-row gap-4">
55
- <button id="startBtn" class="bg-white text-purple-700 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 transform hover:scale-105 shadow-lg">
56
- <i class="fas fa-play mr-2"></i> Démarrer
57
  </button>
58
- <button id="stopBtn" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-purple-700 transition duration-300">
59
- <i class="fas fa-stop mr-2"></i> Arrêter
60
  </button>
61
  </div>
62
- <div class="mt-8 flex items-center">
63
- <div class="flex -space-x-2">
64
- <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
65
- <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/43.jpg" alt="">
66
- <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="">
 
67
  </div>
68
- <p class="ml-4 text-sm opacity-90">Rejoint par <span class="font-bold">850+</span> propriétaires de sites</p>
 
 
69
  </div>
70
  </div>
71
  <div class="md:w-1/2 relative">
72
  <div class="floating">
73
- <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Monétisation automatique" class="w-full max-w-lg mx-auto">
 
 
 
 
 
 
74
  </div>
75
  </div>
76
  </div>
77
  </div>
78
- </div>
79
 
80
- <!-- Dashboard Section -->
81
- <div class="py-20 bg-white">
82
  <div class="container mx-auto px-6">
83
- <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-16">Tableau de Bord en Temps Réel</h2>
 
 
 
84
 
85
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
86
- <!-- Revenue Card -->
87
- <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 card-hover">
88
- <div class="flex justify-between items-start mb-4">
89
- <div>
90
- <h3 class="text-lg font-semibold text-gray-700">Revenus Totaux</h3>
91
- <p class="text-sm text-gray-500">Aujourd'hui</p>
 
 
92
  </div>
93
- <div class="bg-purple-100 p-2 rounded-lg">
94
- <i class="fas fa-euro-sign text-purple-600"></i>
 
 
 
 
95
  </div>
96
  </div>
97
- <div class="flex items-end mb-2">
98
- <span id="totalRevenue" class="text-3xl font-bold text-gray-800">€0.00</span>
99
- <span id="revenueChange" class="ml-2 text-sm font-medium text-green-500 flex items-center">
100
- <i class="fas fa-arrow-up mr-1"></i> 0%
101
- </span>
102
- </div>
103
- <div class="w-full bg-gray-200 rounded-full h-2">
104
- <div id="revenueProgress" class="progress-bar bg-purple-600 h-2 rounded-full" style="width: 0%"></div>
105
- </div>
106
- </div>
107
-
108
- <!-- Visitors Card -->
109
- <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 card-hover">
110
- <div class="flex justify-between items-start mb-4">
111
- <div>
112
- <h3 class="text-lg font-semibold text-gray-700">Visiteurs</h3>
113
- <p class="text-sm text-gray-500">Aujourd'hui</p>
114
  </div>
115
- <div class="bg-blue-100 p-2 rounded-lg">
116
- <i class="fas fa-users text-blue-600"></i>
 
 
 
 
117
  </div>
118
  </div>
119
- <div class="flex items-end mb-2">
120
- <span id="totalVisitors" class="text-3xl font-bold text-gray-800">0</span>
121
- <span id="visitorsChange" class="ml-2 text-sm font-medium text-green-500 flex items-center">
122
- <i class="fas fa-arrow-up mr-1"></i> 0%
123
- </span>
124
- </div>
125
- <div class="w-full bg-gray-200 rounded-full h-2">
126
- <div id="visitorsProgress" class="progress-bar bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
127
- </div>
128
- </div>
129
-
130
- <!-- Conversion Card -->
131
- <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 card-hover">
132
- <div class="flex justify-between items-start mb-4">
133
- <div>
134
- <h3 class="text-lg font-semibold text-gray-700">Taux de Conversion</h3>
135
- <p class="text-sm text-gray-500">Aujourd'hui</p>
136
  </div>
137
- <div class="bg-green-100 p-2 rounded-lg">
138
- <i class="fas fa-percentage text-green-600"></i>
 
 
 
 
139
  </div>
140
  </div>
141
- <div class="flex items-end mb-2">
142
- <span id="conversionRate" class="text-3xl font-bold text-gray-800">0%</span>
143
- <span id="conversionChange" class="ml-2 text-sm font-medium text-green-500 flex items-center">
144
- <i class="fas fa-arrow-up mr-1"></i> 0%
145
- </span>
146
- </div>
147
- <div class="w-full bg-gray-200 rounded-full h-2">
148
- <div id="conversionProgress" class="progress-bar bg-green-600 h-2 rounded-full" style="width: 0%"></div>
 
 
 
 
 
 
 
 
149
  </div>
150
  </div>
151
  </div>
152
 
153
- <!-- Monetization Status -->
154
- <div id="monetizationStatus" class="bg-gray-50 border border-gray-200 rounded-xl p-6 mb-12 transition-all duration-500">
155
- <div class="flex items-center justify-between mb-4">
156
- <h3 class="text-xl font-bold text-gray-800">Statut de Monétisation</h3>
157
- <span id="statusBadge" class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">INACTIF</span>
158
- </div>
159
- <p id="statusText" class="text-gray-600 mb-4">Le système de monétisation est actuellement arrêté. Cliquez sur "Démarrer" pour activer l'optimisation automatique des revenus.</p>
160
- <div class="w-full bg-gray-200 rounded-full h-2.5">
161
- <div id="systemProgress" class="progress-bar h-2.5 rounded-full bg-gray-400" style="width: 0%"></div>
162
- </div>
163
- </div>
164
-
165
- <!-- Revenue Sources -->
166
- <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
167
- <div class="px-6 py-4 border-b border-gray-200">
168
- <h3 class="text-lg font-semibold text-gray-800">Sources de Revenus</h3>
169
  </div>
170
- <div class="divide-y divide-gray-200">
171
- <!-- Ad Revenue -->
172
- <div class="p-6 flex items-center justify-between">
173
- <div class="flex items-center">
174
- <div class="bg-purple-100 p-3 rounded-lg mr-4">
175
- <i class="fas fa-ad text-purple-600"></i>
 
 
 
176
  </div>
177
- <div>
178
- <h4 class="font-medium text-gray-800">Publicités</h4>
179
- <p class="text-sm text-gray-500">Réseaux publicitaires automatisés</p>
180
  </div>
181
- </div>
182
- <div class="text-right">
183
- <p id="adRevenue" class="font-bold text-gray-800">€0.00</p>
184
- <p id="adRevenuePct" class="text-sm text-gray-500">0% du total</p>
185
- </div>
186
- </div>
187
-
188
- <!-- Affiliate Revenue -->
189
- <div class="p-6 flex items-center justify-between">
190
- <div class="flex items-center">
191
- <div class="bg-blue-100 p-3 rounded-lg mr-4">
192
- <i class="fas fa-handshake text-blue-600"></i>
193
  </div>
194
- <div>
195
- <h4 class="font-medium text-gray-800">Affiliation</h4>
196
- <p class="text-sm text-gray-500">Programmes d'affiliation optimisés</p>
197
  </div>
198
  </div>
199
- <div class="text-right">
200
- <p id="affiliateRevenue" class="font-bold text-gray-800">€0.00</p>
201
- <p id="affiliateRevenuePct" class="text-sm text-gray-500">0% du total</p>
202
- </div>
203
- </div>
204
-
205
- <!-- Premium Revenue -->
206
- <div class="p-6 flex items-center justify-between">
207
- <div class="flex items-center">
208
- <div class="bg-green-100 p-3 rounded-lg mr-4">
209
- <i class="fas fa-crown text-green-600"></i>
 
 
 
 
210
  </div>
211
- <div>
212
- <h4 class="font-medium text-gray-800">Contenu Premium</h4>
213
- <p class="text-sm text-gray-500">Abonnements et contenus payants</p>
214
  </div>
215
  </div>
216
- <div class="text-right">
217
- <p id="premiumRevenue" class="font-bold text-gray-800">€0.00</p>
218
- <p id="premiumRevenuePct" class="text-sm text-gray-500">0% du total</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
219
  </div>
220
  </div>
221
  </div>
222
  </div>
223
  </div>
224
- </div>
225
 
226
- <!-- Optimization Section -->
227
- <div class="py-20 bg-gray-50">
228
  <div class="container mx-auto px-6">
229
- <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-16">Optimisation Automatique en Cours</h2>
 
 
 
230
 
231
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
232
- <div>
233
- <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm mb-8">
234
- <div class="flex items-center mb-4">
235
- <div class="bg-purple-100 p-2 rounded-lg mr-4">
236
- <i class="fas fa-brain text-purple-600"></i>
237
- </div>
238
- <h3 class="text-xl font-bold text-gray-800">Analyse du Comportement</h3>
 
 
239
  </div>
240
- <p class="text-gray-600 mb-4">Notre IA analyse en temps réel le comportement de vos visiteurs pour afficher les publicités et produits les plus pertinents.</p>
241
- <div class="w-full bg-gray-200 rounded-full h-2.5">
242
- <div id="behaviorProgress" class="progress-bar bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
243
  </div>
244
  </div>
245
-
246
- <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
247
- <div class="flex items-center mb-4">
248
- <div class="bg-blue-100 p-2 rounded-lg mr-4">
249
- <i class="fas fa-sync-alt text-blue-600"></i>
250
- </div>
251
- <h3 class="text-xl font-bold text-gray-800">Rotation des Réseaux</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
  </div>
253
- <p class="text-gray-600 mb-4">Le système fait tourner automatiquement différents réseaux publicitaires pour toujours obtenir les meilleurs taux de revenus.</p>
254
- <div class="w-full bg-gray-200 rounded-full h-2.5">
255
- <div id="rotationProgress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
256
  </div>
257
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  </div>
259
 
260
- <div class="relative">
261
- <div id="networkVisualization" class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm h-full">
262
- <h3 class="text-xl font-bold text-gray-800 mb-6 text-center">Réseaux Actifs</h3>
263
- <div class="flex flex-wrap justify-center gap-4" id="networkIcons">
264
- <!-- Network icons will be added dynamically -->
 
 
 
 
265
  </div>
266
- <p id="networkStatus" class="text-center text-gray-500 mt-6">Aucun réseau actif pour le moment</p>
267
  </div>
268
- <div id="optimizationBadge" class="absolute -top-4 -right-4 bg-green-500 text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg hidden">
269
- <i class="fas fa-bolt mr-1"></i> OPTIMISÉ
 
270
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  </div>
272
  </div>
 
 
 
 
 
 
 
 
 
 
273
 
274
- <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
275
- <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
276
- <h3 class="text-lg font-semibold text-gray-800">Historique des Revenus</h3>
277
- <div class="flex space-x-2">
278
- <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-lg text-sm">7j</button>
279
- <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-lg text-sm">30j</button>
280
- <button class="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm">90j</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  </div>
282
  </div>
283
- <div class="p-6">
284
- <canvas id="revenueChart" height="300"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
285
  </div>
286
  </div>
287
  </div>
288
- </div>
289
 
290
  <!-- CTA Section -->
291
- <div class="py-20 gradient-bg text-white">
292
  <div class="container mx-auto px-6 text-center">
293
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Vos Revenus sur Pilote Automatique</h2>
294
- <p class="text-xl opacity-90 max-w-2xl mx-auto mb-8">Notre système travaille 24h/24 pour maximiser vos revenus sans que vous ayez à intervenir.</p>
295
  <div class="flex flex-col sm:flex-row justify-center gap-4">
296
- <button id="ctaStartBtn" class="bg-white hover:bg-gray-100 text-purple-700 font-bold py-4 px-10 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
297
- <i class="fas fa-play mr-2"></i> Démarrer la Monétisation
298
  </button>
299
  <button class="bg-transparent hover:bg-white hover:bg-opacity-10 border-2 border-white text-white font-bold py-4 px-10 rounded-full transition duration-300">
300
- <i class="fas fa-question-circle mr-2"></i> Aide & Support
301
  </button>
302
  </div>
303
  </div>
304
- </div>
305
 
306
  <!-- Footer -->
307
- <footer class="bg-gray-800 text-gray-300 py-12">
308
  <div class="container mx-auto px-6">
309
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
310
  <div>
311
- <h3 class="text-white text-lg font-bold mb-4">Monétisation Auto</h3>
312
- <p class="mb-4">Le système automatique de monétisation le plus avancé pour les propriétaires de sites web.</p>
 
 
 
313
  <div class="flex space-x-4">
314
- <a href="#" class="text-gray-400 hover:text-white">
315
  <i class="fab fa-facebook-f"></i>
316
  </a>
317
- <a href="#" class="text-gray-400 hover:text-white">
318
  <i class="fab fa-twitter"></i>
319
  </a>
320
- <a href="#" class="text-gray-400 hover:text-white">
321
  <i class="fab fa-linkedin-in"></i>
322
  </a>
 
 
 
323
  </div>
324
  </div>
325
 
326
  <div>
327
- <h3 class="text-white text-lg font-bold mb-4">Ressources</h3>
328
  <ul class="space-y-2">
329
- <li><a href="#" class="hover:text-white transition">Documentation</a></li>
330
- <li><a href="#" class="hover:text-white transition">Blog</a></li>
331
- <li><a href="#" class="hover:text-white transition">Tutoriels</a></li>
332
- <li><a href="#" class="hover:text-white transition">FAQ</a></li>
 
333
  </ul>
334
  </div>
335
 
336
  <div>
337
- <h3 class="text-white text-lg font-bold mb-4">Support</h3>
338
  <ul class="space-y-2">
339
- <li><a href="#" class="hover:text-white transition">Centre d'aide</a></li>
340
- <li><a href="#" class="hover:text-white transition">Contact</a></li>
341
- <li><a href="#" class="hover:text-white transition">Statut</a></li>
342
- <li><a href="#" class="hover:text-white transition">Mises à jour</a></li>
 
343
  </ul>
344
  </div>
345
 
@@ -347,351 +681,138 @@
347
  <h3 class="text-white text-lg font-bold mb-4">Contact</h3>
348
  <ul class="space-y-2">
349
  <li class="flex items-center">
350
- <i class="fas fa-envelope mr-2 text-purple-400"></i>
351
- <span>[email protected]</span>
352
  </li>
353
  <li class="flex items-center">
354
- <i class="fas fa-phone-alt mr-2 text-purple-400"></i>
355
  <span>+33 1 23 45 67 89</span>
356
  </li>
357
  <li class="flex items-center">
358
- <i class="fas fa-map-marker-alt mr-2 text-purple-400"></i>
359
- <span>Paris, France</span>
 
 
 
 
360
  </li>
361
  </ul>
362
  </div>
363
  </div>
364
 
365
- <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
366
- <p>© 2023 Monétisation Auto. Tous droits réservés.</p>
367
  <div class="flex space-x-6 mt-4 md:mt-0">
368
- <a href="#" class="hover:text-white transition">Confidentialité</a>
369
- <a href="#" class="hover:text-white transition">Conditions</a>
370
- <a href="#" class="hover:text-white transition">Cookies</a>
371
  </div>
372
  </div>
373
  </div>
374
  </footer>
375
 
376
- <!-- Chart.js -->
377
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
378
-
379
  <script>
380
- // System State
381
- let isSystemActive = false;
382
- let revenueInterval;
383
- let optimizationInterval;
384
-
385
- // Network icons
386
- const networks = [
387
- { name: 'AdSense', icon: 'fab fa-google', color: 'text-red-500' },
388
- { name: 'Media.net', icon: 'fas fa-ad', color: 'text-blue-500' },
389
- { name: 'Amazon', icon: 'fab fa-amazon', color: 'text-yellow-500' },
390
- { name: 'eBay', icon: 'fab fa-ebay', color: 'text-purple-500' },
391
- { name: 'Shopify', icon: 'fab fa-shopify', color: 'text-green-500' },
392
- { name: 'AdThrive', icon: 'fas fa-chart-line', color: 'text-indigo-500' }
393
- ];
394
-
395
- // Initialize Chart
396
- let revenueChart;
397
- function initChart() {
398
- const ctx = document.getElementById('revenueChart').getContext('2d');
399
- revenueChart = new Chart(ctx, {
400
- type: 'line',
401
- data: {
402
- labels: Array.from({length: 90}, (_, i) => `J-${90 - i}`),
403
- datasets: [
404
- {
405
- label: 'Revenus Publicitaires',
406
- data: Array(90).fill(0),
407
- borderColor: '#8b5cf6',
408
- backgroundColor: 'rgba(139, 92, 246, 0.1)',
409
- tension: 0.3,
410
- fill: true
411
- },
412
- {
413
- label: 'Revenus Affiliation',
414
- data: Array(90).fill(0),
415
- borderColor: '#3b82f6',
416
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
417
- tension: 0.3,
418
- fill: true
419
- },
420
- {
421
- label: 'Revenus Premium',
422
- data: Array(90).fill(0),
423
- borderColor: '#10b981',
424
- backgroundColor: 'rgba(16, 185, 129, 0.1)',
425
- tension: 0.3,
426
- fill: true
427
- }
428
- ]
429
- },
430
- options: {
431
- responsive: true,
432
- plugins: {
433
- legend: {
434
- position: 'top',
435
- },
436
- tooltip: {
437
- mode: 'index',
438
- intersect: false,
439
- }
440
- },
441
- scales: {
442
- y: {
443
- beginAtZero: true,
444
- ticks: {
445
- callback: function(value) {
446
- return '€' + value;
447
- }
448
- }
449
- }
450
- }
451
  }
452
- });
453
- }
454
-
455
- // Update chart with random data
456
- function updateChartData() {
457
- if (!revenueChart) return;
458
-
459
- // Generate realistic revenue data
460
- const adData = [];
461
- const affiliateData = [];
462
- const premiumData = [];
463
-
464
- let adValue = 0;
465
- let affiliateValue = 0;
466
- let premiumValue = 0;
467
-
468
- for (let i = 0; i < 90; i++) {
469
- // Base growth trend
470
- const dayTrend = i / 90 * 2;
471
-
472
- // Random fluctuations
473
- const adFluctuation = Math.random() * 5;
474
- const affiliateFluctuation = Math.random() * 3;
475
- const premiumFluctuation = Math.random() * 2;
476
-
477
- // Calculate values with trends and fluctuations
478
- adValue = (10 + i * 1.5 + adFluctuation) * dayTrend;
479
- affiliateValue = (5 + i * 0.8 + affiliateFluctuation) * dayTrend;
480
- premiumValue = (3 + i * 0.5 + premiumFluctuation) * dayTrend;
481
-
482
- // Ensure values don't go negative
483
- adData.push(Math.max(0, adValue));
484
- affiliateData.push(Math.max(0, affiliateValue));
485
- premiumData.push(Math.max(0, premiumValue));
486
- }
487
-
488
- // Update chart datasets
489
- revenueChart.data.datasets[0].data = adData;
490
- revenueChart.data.datasets[1].data = affiliateData;
491
- revenueChart.data.datasets[2].data = premiumData;
492
- revenueChart.update();
493
- }
494
-
495
- // Simulate revenue generation
496
- function simulateRevenue() {
497
- if (!isSystemActive) return;
498
-
499
- // Generate random but realistic revenue values
500
- const adRevenue = (Math.random() * 50 + 20).toFixed(2);
501
- const affiliateRevenue = (Math.random() * 30 + 10).toFixed(2);
502
- const premiumRevenue = (Math.random() * 20 + 5).toFixed(2);
503
-
504
- const totalRevenue = (parseFloat(adRevenue) + parseFloat(affiliateRevenue) + parseFloat(premiumRevenue)).toFixed(2);
505
-
506
- // Update UI
507
- document.getElementById('totalRevenue').textContent = `€${totalRevenue}`;
508
- document.getElementById('adRevenue').textContent = `€${adRevenue}`;
509
- document.getElementById('affiliateRevenue').textContent = `€${affiliateRevenue}`;
510
- document.getElementById('premiumRevenue').textContent = `€${premiumRevenue}`;
511
-
512
- // Calculate percentages
513
- const adPct = ((adRevenue / totalRevenue) * 100).toFixed(1);
514
- const affiliatePct = ((affiliateRevenue / totalRevenue) * 100).toFixed(1);
515
- const premiumPct = ((premiumRevenue / totalRevenue) * 100).toFixed(1);
516
-
517
- document.getElementById('adRevenuePct').textContent = `${adPct}% du total`;
518
- document.getElementById('affiliateRevenuePct').textContent = `${affiliatePct}% du total`;
519
- document.getElementById('premiumRevenuePct').textContent = `${premiumPct}% du total`;
520
-
521
- // Update progress bars
522
- document.getElementById('revenueProgress').style.width = `${Math.min(100, (totalRevenue / 100) * 100)}%`;
523
-
524
- // Generate visitors and conversion data
525
- const visitors = Math.floor(Math.random() * 500 + 100);
526
- const conversions = Math.floor(visitors * (0.05 + Math.random() * 0.05));
527
- const conversionRate = ((conversions / visitors) * 100).toFixed(1);
528
-
529
- document.getElementById('totalVisitors').textContent = visitors;
530
- document.getElementById('conversionRate').textContent = `${conversionRate}%`;
531
-
532
- document.getElementById('visitorsProgress').style.width = `${Math.min(100, (visitors / 1000) * 100)}%`;
533
- document.getElementById('conversionProgress').style.width = `${conversionRate}%`;
534
-
535
- // Generate change percentages
536
- const revenueChange = (Math.random() * 15 + 5).toFixed(1);
537
- const visitorsChange = (Math.random() * 20 + 5).toFixed(1);
538
- const conversionChange = (Math.random() * 10 + 2).toFixed(1);
539
-
540
- document.getElementById('revenueChange').innerHTML = `<i class="fas fa-arrow-up mr-1"></i> ${revenueChange}%`;
541
- document.getElementById('visitorsChange').innerHTML = `<i class="fas fa-arrow-up mr-1"></i> ${visitorsChange}%`;
542
- document.getElementById('conversionChange').innerHTML = `<i class="fas fa-arrow-up mr-1"></i> ${conversionChange}%`;
543
- }
544
-
545
- // Simulate optimization progress
546
- function simulateOptimization() {
547
- if (!isSystemActive) return;
548
-
549
- // Random but increasing progress
550
- const behaviorProgress = Math.min(100, parseFloat(document.getElementById('behaviorProgress').style.width) || 0 + Math.random() * 5);
551
- const rotationProgress = Math.min(100, parseFloat(document.getElementById('rotationProgress').style.width) || 0 + Math.random() * 5);
552
-
553
- document.getElementById('behaviorProgress').style.width = `${behaviorProgress}%`;
554
- document.getElementById('rotationProgress').style.width = `${rotationProgress}%`;
555
-
556
- // Show optimization badge when both are above 50%
557
- if (behaviorProgress > 50 && rotationProgress > 50) {
558
- document.getElementById('optimizationBadge').classList.remove('hidden');
559
- } else {
560
- document.getElementById('optimizationBadge').classList.add('hidden');
561
- }
562
-
563
- // Update active networks
564
- const activeNetworks = Math.floor(3 + Math.random() * 3);
565
- const networkContainer = document.getElementById('networkIcons');
566
- networkContainer.innerHTML = '';
567
-
568
- if (activeNetworks > 0) {
569
- document.getElementById('networkStatus').textContent = `${activeNetworks} réseaux actifs`;
570
-
571
- // Shuffle networks and pick active ones
572
- const shuffled = [...networks].sort(() => 0.5 - Math.random());
573
- for (let i = 0; i < activeNetworks; i++) {
574
- const network = shuffled[i];
575
- const icon = document.createElement('div');
576
- icon.className = `flex flex-col items-center p-3 rounded-lg bg-gray-100 ${network.color}`;
577
- icon.innerHTML = `<i class="${network.icon} text-2xl mb-1"></i><span class="text-xs text-gray-600">${network.name}</span>`;
578
- networkContainer.appendChild(icon);
579
  }
580
- } else {
581
- document.getElementById('networkStatus').textContent = 'Aucun réseau actif pour le moment';
582
- }
583
- }
584
-
585
- // Start monetization system
586
- function startSystem() {
587
- if (isSystemActive) return;
588
-
589
- isSystemActive = true;
590
-
591
- // Update UI
592
- document.getElementById('monetizationStatus').classList.add('auto-monetization-active');
593
- document.getElementById('statusBadge').className = 'bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full';
594
- document.getElementById('statusBadge').textContent = 'ACTIF';
595
- document.getElementById('statusText').textContent = 'Le système de monétisation est actif et optimise vos revenus en temps réel.';
596
-
597
- // Start progress bars
598
- let progress = 0;
599
- const progressInterval = setInterval(() => {
600
- progress += 2;
601
- document.getElementById('systemProgress').style.width = `${progress}%`;
602
- document.getElementById('systemProgress').className = 'progress-bar h-2.5 rounded-full bg-green-500';
603
-
604
- if (progress >= 100) {
605
- clearInterval(progressInterval);
606
  }
607
- }, 50);
608
-
609
- // Start revenue simulation
610
- revenueInterval = setInterval(simulateRevenue, 2000);
611
-
612
- // Start optimization simulation
613
- optimizationInterval = setInterval(simulateOptimization, 1500);
614
-
615
- // Show notification
616
- showNotification('Système activé', 'La monétisation automatique est maintenant active et optimise vos revenus.', 'green');
617
- }
618
-
619
- // Stop monetization system
620
- function stopSystem() {
621
- if (!isSystemActive) return;
622
-
623
- isSystemActive = false;
624
-
625
- // Clear intervals
626
- clearInterval(revenueInterval);
627
- clearInterval(optimizationInterval);
628
-
629
- // Update UI
630
- document.getElementById('monetizationStatus').classList.remove('auto-monetization-active');
631
- document.getElementById('statusBadge').className = 'bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full';
632
- document.getElementById('statusBadge').textContent = 'INACTIF';
633
- document.getElementById('statusText').textContent = 'Le système de monétisation est actuellement arrêté. Cliquez sur "Démarrer" pour activer l\'optimisation automatique des revenus.';
634
- document.getElementById('systemProgress').style.width = '0%';
635
- document.getElementById('systemProgress').className = 'progress-bar h-2.5 rounded-full bg-gray-400';
636
-
637
- document.getElementById('optimizationBadge').classList.add('hidden');
638
- document.getElementById('networkIcons').innerHTML = '';
639
- document.getElementById('networkStatus').textContent = 'Aucun réseau actif pour le moment';
640
-
641
- // Show notification
642
- showNotification('Système arrêté', 'La monétisation automatique a été désactivée.', 'red');
643
- }
644
-
645
- // Show notification
646
- function showNotification(title, message, color) {
647
- const notification = document.createElement('div');
648
- notification.className = `fixed bottom-4 right-4 bg-${color}-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center animate-fade-in z-50 max-w-md`;
649
- notification.innerHTML = `
650
- <i class="fas fa-${color === 'green' ? 'check-circle' : 'exclamation-circle'} text-white mr-3"></i>
651
- <div>
652
- <div class="font-bold">${title}</div>
653
- <div class="text-sm">${message}</div>
654
- </div>
655
- <button class="ml-4 text-white hover:text-gray-200" onclick="this.parentElement.remove()">
656
- <i class="fas fa-times"></i>
657
- </button>
658
- `;
659
- document.body.appendChild(notification);
660
-
661
- // Remove after 5 seconds
662
- setTimeout(() => {
663
- notification.classList.add('animate-fade-out');
664
- setTimeout(() => {
665
- notification.remove();
666
- }, 300);
667
- }, 5000);
668
  }
669
-
670
- // Initialize on DOM load
671
  document.addEventListener('DOMContentLoaded', function() {
672
- initChart();
673
- updateChartData();
674
-
675
- // Event listeners
676
- document.getElementById('startBtn').addEventListener('click', startSystem);
677
- document.getElementById('stopBtn').addEventListener('click', stopSystem);
678
- document.getElementById('ctaStartBtn').addEventListener('click', startSystem);
 
 
 
 
 
679
 
680
- // Add animation styles
681
- const style = document.createElement('style');
682
- style.textContent = `
683
- @keyframes animate-fade-in {
684
- from { opacity: 0; transform: translateY(20px); }
685
- to { opacity: 1; transform: translateY(0); }
686
- }
687
- @keyframes animate-fade-out {
688
- from { opacity: 1; transform: translateY(0); }
689
- to { opacity: 0; transform: translateY(20px); }
690
- }
691
- .animate-fade-in { animation: animate-fade-in 0.3s forwards; }
692
- .animate-fade-out { animation: animate-fade-out 0.3s forwards; }
693
- `;
694
- document.head.appendChild(style);
695
  });
696
  </script>
697
  <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/mon-tisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HosterWeb Pro - Hébergement Hautes Performances</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 0%, #2563eb 50%, #3b82f6 100%);
12
  }
13
+ .server-card {
14
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
15
  transform: translateY(0);
16
  }
17
+ .server-card:hover {
18
+ transform: translateY(-10px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
  }
21
+ @keyframes float {
22
+ 0% { transform: translateY(0px); }
23
+ 50% { transform: translateY(-20px); }
24
+ 100% { transform: translateY(0px); }
25
+ }
26
+ .floating {
27
+ animation: float 6s ease-in-out infinite;
28
  }
29
  @keyframes pulse {
30
  0% { transform: scale(1); }
31
  50% { transform: scale(1.05); }
32
  100% { transform: scale(1); }
33
  }
34
+ .pulse {
35
+ animation: pulse 3s infinite;
36
  }
37
+ @keyframes wave {
38
+ 0% { background-position-x: 0; }
39
+ 100% { background-position-x: 1000px; }
40
+ }
41
+ .wave-bg {
42
+ background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.1)" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="rgba(255,255,255,0.1)" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="rgba(255,255,255,0.07)"/></svg>');
43
+ background-size: 1200px 120px;
44
+ animation: wave 60s linear infinite;
45
+ }
46
+ .glow {
47
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
48
+ }
49
+ .glow:hover {
50
+ box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
51
+ }
52
+ .tech-icon {
53
+ transition: all 0.3s ease;
54
+ filter: grayscale(30%);
55
+ }
56
+ .tech-icon:hover {
57
+ transform: scale(1.1);
58
+ filter: grayscale(0%);
59
  }
60
  .progress-bar {
61
  transition: width 0.6s ease;
62
  }
63
+ .dashboard-card {
64
+ background: rgba(255, 255, 255, 0.05);
65
+ backdrop-filter: blur(10px);
66
+ border: 1px solid rgba(255, 255, 255, 0.1);
67
+ }
68
+ .animated-border {
69
+ position: relative;
70
+ overflow: hidden;
71
+ }
72
+ .animated-border::after {
73
+ content: '';
74
+ position: absolute;
75
+ top: 0;
76
+ left: -100%;
77
+ width: 100%;
78
+ height: 2px;
79
+ background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
80
+ animation: borderSlide 3s infinite;
81
+ }
82
+ @keyframes borderSlide {
83
+ 0% { left: -100%; }
84
+ 100% { left: 100%; }
85
  }
86
  </style>
87
  </head>
88
+ <body class="font-sans bg-gray-900 text-gray-100">
89
+ <!-- Animated Navbar -->
90
+ <nav class="gradient-bg fixed w-full z-50 shadow-lg">
91
+ <div class="container mx-auto px-6 py-4">
92
+ <div class="flex justify-between items-center">
93
+ <div class="flex items-center space-x-4">
94
+ <div class="pulse">
95
+ <i class="fas fa-server text-2xl text-white"></i>
96
+ </div>
97
+ <span class="text-xl font-bold text-white">HosterWeb<span class="text-blue-300">Pro</span></span>
98
+ </div>
99
+ <div class="hidden md:flex items-center space-x-8">
100
+ <a href="#" class="text-white hover:text-blue-200 transition duration-300 font-medium">Accueil</a>
101
+ <a href="#" class="text-white hover:text-blue-200 transition duration-300 font-medium">Hébergement</a>
102
+ <a href="#" class="text-white hover:text-blue-200 transition duration-300 font-medium">Domaines</a>
103
+ <a href="#" class="text-white hover:text-blue-200 transition duration-300 font-medium">Serveurs</a>
104
+ <a href="#" class="text-white hover:text-blue-200 transition duration-300 font-medium">Support</a>
105
+ </div>
106
+ <div class="flex items-center space-x-4">
107
+ <button class="hidden md:block bg-white text-blue-600 font-bold py-2 px-6 rounded-full hover:bg-blue-50 transition duration-300">
108
+ Connexion
109
+ </button>
110
+ <button class="md:hidden text-white">
111
+ <i class="fas fa-bars text-2xl"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </nav>
117
+
118
+ <!-- Hero Section with Waves -->
119
+ <section class="gradient-bg pt-32 pb-20 wave-bg">
120
+ <div class="container mx-auto px-6">
121
  <div class="flex flex-col md:flex-row items-center">
122
  <div class="md:w-1/2 mb-12 md:mb-0">
123
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
124
+ <span class="text-white">Hébergement Web</span>
125
+ <span class="text-blue-200">Ultra-Rapide</span>
126
+ </h1>
127
+ <p class="text-xl text-blue-100 mb-8 max-w-lg">
128
+ Des serveurs optimisés avec SSD NVMe, protection DDoS et assistance 24/7 pour des performances exceptionnelles.
129
+ </p>
130
  <div class="flex flex-col sm:flex-row gap-4">
131
+ <button class="glow bg-white text-blue-600 font-bold py-4 px-8 rounded-full hover:bg-blue-50 transition duration-300 transform hover:scale-105">
132
+ <i class="fas fa-rocket mr-2"></i> Commencer dès €2.99/mois
133
  </button>
134
+ <button class="bg-transparent border-2 border-white text-white font-bold py-4 px-8 rounded-full hover:bg-white hover:bg-opacity-10 transition duration-300">
135
+ <i class="fas fa-play-circle mr-2"></i> Voir la démo
136
  </button>
137
  </div>
138
+ <div class="mt-10 flex items-center">
139
+ <div class="flex -space-x-3">
140
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
141
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
142
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
143
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
144
  </div>
145
+ <p class="ml-4 text-blue-100">
146
+ <span class="font-bold">+15,000</span> clients satisfaits
147
+ </p>
148
  </div>
149
  </div>
150
  <div class="md:w-1/2 relative">
151
  <div class="floating">
152
+ <img src="https://illustrations.popsy.co/amber/server-cluster.svg" alt="Serveurs HosterWeb" class="w-full max-w-lg mx-auto">
153
+ </div>
154
+ <div class="absolute -bottom-10 left-0 right-0 flex justify-center">
155
+ <div class="bg-white text-gray-800 py-3 px-6 rounded-full shadow-lg flex items-center">
156
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></div>
157
+ <span class="font-medium">99.9% Uptime Garanti</span>
158
+ </div>
159
  </div>
160
  </div>
161
  </div>
162
  </div>
163
+ </section>
164
 
165
+ <!-- Server Dashboard Animation -->
166
+ <section class="py-20 bg-gray-800">
167
  <div class="container mx-auto px-6">
168
+ <div class="text-center mb-16">
169
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Tableau de Bord en Temps Réel</h2>
170
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">Surveillez et gérez vos ressources serveur avec notre interface intuitive</p>
171
+ </div>
172
 
173
+ <div class="dashboard-card rounded-2xl p-6 mb-12">
174
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
175
+ <!-- CPU Usage -->
176
+ <div class="bg-gray-900 rounded-xl p-6 border border-gray-700">
177
+ <div class="flex justify-between items-center mb-4">
178
+ <h3 class="text-lg font-semibold">CPU</h3>
179
+ <div class="bg-blue-900 text-blue-300 px-2 py-1 rounded text-xs font-bold">
180
+ Intel Xeon
181
+ </div>
182
  </div>
183
+ <div class="flex items-end mb-4">
184
+ <span id="cpuUsage" class="text-3xl font-bold">0%</span>
185
+ <span class="ml-2 text-sm text-gray-400">Utilisation</span>
186
+ </div>
187
+ <div class="w-full bg-gray-700 rounded-full h-2">
188
+ <div id="cpuBar" class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
189
  </div>
190
  </div>
191
+
192
+ <!-- RAM Usage -->
193
+ <div class="bg-gray-900 rounded-xl p-6 border border-gray-700">
194
+ <div class="flex justify-between items-center mb-4">
195
+ <h3 class="text-lg font-semibold">RAM</h3>
196
+ <div class="bg-purple-900 text-purple-300 px-2 py-1 rounded text-xs font-bold">
197
+ 16GB DDR4
198
+ </div>
 
 
 
 
 
 
 
 
 
199
  </div>
200
+ <div class="flex items-end mb-4">
201
+ <span id="ramUsage" class="text-3xl font-bold">0GB</span>
202
+ <span class="ml-2 text-sm text-gray-400">/ 16GB utilisé</span>
203
+ </div>
204
+ <div class="w-full bg-gray-700 rounded-full h-2">
205
+ <div id="ramBar" class="progress-bar bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
206
  </div>
207
  </div>
208
+
209
+ <!-- Storage -->
210
+ <div class="bg-gray-900 rounded-xl p-6 border border-gray-700">
211
+ <div class="flex justify-between items-center mb-4">
212
+ <h3 class="text-lg font-semibold">Stockage</h3>
213
+ <div class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs font-bold">
214
+ NVMe SSD
215
+ </div>
 
 
 
 
 
 
 
 
 
216
  </div>
217
+ <div class="flex items-end mb-4">
218
+ <span id="storageUsage" class="text-3xl font-bold">0GB</span>
219
+ <span class="ml-2 text-sm text-gray-400">/ 200GB utilisé</span>
220
+ </div>
221
+ <div class="w-full bg-gray-700 rounded-full h-2">
222
+ <div id="storageBar" class="progress-bar bg-green-500 h-2 rounded-full" style="width: 0%"></div>
223
  </div>
224
  </div>
225
+
226
+ <!-- Bandwidth -->
227
+ <div class="bg-gray-900 rounded-xl p-6 border border-gray-700">
228
+ <div class="flex justify-between items-center mb-4">
229
+ <h3 class="text-lg font-semibold">Bande passante</h3>
230
+ <div class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs font-bold">
231
+ 10Gbps
232
+ </div>
233
+ </div>
234
+ <div class="flex items-end mb-4">
235
+ <span id="bandwidthUsage" class="text-3xl font-bold">0TB</span>
236
+ <span class="ml-2 text-sm text-gray-400">/ ∞ utilisé</span>
237
+ </div>
238
+ <div class="w-full bg-gray-700 rounded-full h-2">
239
+ <div id="bandwidthBar" class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 0%"></div>
240
+ </div>
241
  </div>
242
  </div>
243
  </div>
244
 
245
+ <!-- Server Status -->
246
+ <div class="bg-gray-900 rounded-2xl border border-gray-700 overflow-hidden">
247
+ <div class="px-6 py-4 border-b border-gray-700 flex items-center justify-between">
248
+ <h3 class="text-lg font-semibold flex items-center">
249
+ <i class="fas fa-server mr-2 text-blue-400"></i>
250
+ Statut des Serveurs
251
+ </h3>
252
+ <div class="flex items-center">
253
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-1 animate-pulse"></div>
254
+ <span class="text-sm text-gray-300">Tous systèmes opérationnels</span>
255
+ </div>
 
 
 
 
 
256
  </div>
257
+ <div class="p-6">
258
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
259
+ <!-- Web Server -->
260
+ <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
261
+ <div class="flex items-center mb-3">
262
+ <div class="bg-blue-500 p-2 rounded-lg mr-3">
263
+ <i class="fas fa-globe text-white"></i>
264
+ </div>
265
+ <h4 class="font-medium">Serveur Web</h4>
266
  </div>
267
+ <div class="flex justify-between items-center mb-2">
268
+ <span class="text-sm text-gray-400">Nginx 1.23</span>
269
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-0.5 rounded">Online</span>
270
  </div>
271
+ <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
272
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
+ <div class="flex justify-between text-xs text-gray-400">
275
+ <span>Requêtes: <span class="font-bold text-white">1,248/min</span></span>
276
+ <span>Latence: <span class="font-bold text-white">12ms</span></span>
277
  </div>
278
  </div>
279
+
280
+ <!-- Database -->
281
+ <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
282
+ <div class="flex items-center mb-3">
283
+ <div class="bg-purple-500 p-2 rounded-lg mr-3">
284
+ <i class="fas fa-database text-white"></i>
285
+ </div>
286
+ <h4 class="font-medium">Base de Données</h4>
287
+ </div>
288
+ <div class="flex justify-between items-center mb-2">
289
+ <span class="text-sm text-gray-400">MySQL 8.0</span>
290
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-0.5 rounded">Online</span>
291
+ </div>
292
+ <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
293
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
294
  </div>
295
+ <div class="flex justify-between text-xs text-gray-400">
296
+ <span>Requêtes: <span class="font-bold text-white">864/min</span></span>
297
+ <span>Latence: <span class="font-bold text-white">8ms</span></span>
298
  </div>
299
  </div>
300
+
301
+ <!-- Firewall -->
302
+ <div class="bg-gray-800 rounded-xl p-4 border border-gray-700">
303
+ <div class="flex items-center mb-3">
304
+ <div class="bg-red-500 p-2 rounded-lg mr-3">
305
+ <i class="fas fa-shield-alt text-white"></i>
306
+ </div>
307
+ <h4 class="font-medium">Pare-feu</h4>
308
+ </div>
309
+ <div class="flex justify-between items-center mb-2">
310
+ <span class="text-sm text-gray-400">Cloudflare</span>
311
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-0.5 rounded">Online</span>
312
+ </div>
313
+ <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
314
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
315
+ </div>
316
+ <div class="flex justify-between text-xs text-gray-400">
317
+ <span>Bloqués: <span class="font-bold text-white">42/min</span></span>
318
+ <span>Détections: <span class="font-bold text-white">3/min</span></span>
319
+ </div>
320
  </div>
321
  </div>
322
  </div>
323
  </div>
324
  </div>
325
+ </section>
326
 
327
+ <!-- Hosting Plans -->
328
+ <section class="py-20 bg-gray-900">
329
  <div class="container mx-auto px-6">
330
+ <div class="text-center mb-16">
331
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Nos Offres d'Hébergement</h2>
332
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">Choisissez la solution parfaitement adaptée à vos besoins</p>
333
+ </div>
334
 
335
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
336
+ <!-- Starter Plan -->
337
+ <div class="server-card bg-gray-800 rounded-xl border border-gray-700 p-8 relative overflow-hidden">
338
+ <div class="absolute top-0 right-0 bg-blue-600 text-white px-4 py-1 text-xs font-bold transform rotate-45 translate-x-8 -translate-y-2">
339
+ POPULAIRE
340
+ </div>
341
+ <div class="flex justify-between items-start mb-6">
342
+ <div>
343
+ <h3 class="text-2xl font-bold mb-1">Starter</h3>
344
+ <p class="text-gray-400">Parfait pour les petits sites</p>
345
  </div>
346
+ <div class="bg-blue-900 text-blue-300 p-3 rounded-lg">
347
+ <i class="fas fa-rocket text-xl"></i>
 
348
  </div>
349
  </div>
350
+ <div class="mb-8">
351
+ <span class="text-4xl font-bold">€2.99</span>
352
+ <span class="text-gray-400">/mois</span>
353
+ </div>
354
+ <ul class="space-y-3 mb-8">
355
+ <li class="flex items-center">
356
+ <i class="fas fa-check text-green-500 mr-2"></i>
357
+ <span>1 Site Web</span>
358
+ </li>
359
+ <li class="flex items-center">
360
+ <i class="fas fa-check text-green-500 mr-2"></i>
361
+ <span>10GB Stockage SSD</span>
362
+ </li>
363
+ <li class="flex items-center">
364
+ <i class="fas fa-check text-green-500 mr-2"></i>
365
+ <span>100GB Bande passante</span>
366
+ </li>
367
+ <li class="flex items-center">
368
+ <i class="fas fa-check text-green-500 mr-2"></i>
369
+ <span>Comptes Email Illimités</span>
370
+ </li>
371
+ <li class="flex items-center">
372
+ <i class="fas fa-check text-green-500 mr-2"></i>
373
+ <span>Certificat SSL Gratuit</span>
374
+ </li>
375
+ </ul>
376
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
377
+ Choisir ce plan
378
+ </button>
379
+ </div>
380
+
381
+ <!-- Business Plan -->
382
+ <div class="server-card bg-gray-800 rounded-xl border-2 border-blue-500 p-8 relative overflow-hidden transform scale-105">
383
+ <div class="absolute top-0 right-0 bg-blue-600 text-white px-4 py-1 text-xs font-bold transform rotate-45 translate-x-8 -translate-y-2">
384
+ RECOMMANDÉ
385
+ </div>
386
+ <div class="flex justify-between items-start mb-6">
387
+ <div>
388
+ <h3 class="text-2xl font-bold mb-1">Business</h3>
389
+ <p class="text-gray-400">Idéal pour les PME</p>
390
  </div>
391
+ <div class="bg-blue-900 text-blue-300 p-3 rounded-lg">
392
+ <i class="fas fa-briefcase text-xl"></i>
 
393
  </div>
394
  </div>
395
+ <div class="mb-8">
396
+ <span class="text-4xl font-bold">€6.99</span>
397
+ <span class="text-gray-400">/mois</span>
398
+ </div>
399
+ <ul class="space-y-3 mb-8">
400
+ <li class="flex items-center">
401
+ <i class="fas fa-check text-green-500 mr-2"></i>
402
+ <span>Sites Web Illimités</span>
403
+ </li>
404
+ <li class="flex items-center">
405
+ <i class="fas fa-check text-green-500 mr-2"></i>
406
+ <span>50GB Stockage SSD</span>
407
+ </li>
408
+ <li class="flex items-center">
409
+ <i class="fas fa-check text-green-500 mr-2"></i>
410
+ <span>Bande passante Illimitée</span>
411
+ </li>
412
+ <li class="flex items-center">
413
+ <i class="fas fa-check text-green-500 mr-2"></i>
414
+ <span>Comptes Email Illimités</span>
415
+ </li>
416
+ <li class="flex items-center">
417
+ <i class="fas fa-check text-green-500 mr-2"></i>
418
+ <span>CDN Gratuit</span>
419
+ </li>
420
+ </ul>
421
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
422
+ Choisir ce plan
423
+ </button>
424
  </div>
425
 
426
+ <!-- Enterprise Plan -->
427
+ <div class="server-card bg-gray-800 rounded-xl border border-gray-700 p-8 relative overflow-hidden">
428
+ <div class="flex justify-between items-start mb-6">
429
+ <div>
430
+ <h3 class="text-2xl font-bold mb-1">Enterprise</h3>
431
+ <p class="text-gray-400">Pour les sites à fort trafic</p>
432
+ </div>
433
+ <div class="bg-blue-900 text-blue-300 p-3 rounded-lg">
434
+ <i class="fas fa-server text-xl"></i>
435
  </div>
 
436
  </div>
437
+ <div class="mb-8">
438
+ <span class="text-4xl font-bold">€12.99</span>
439
+ <span class="text-gray-400">/mois</span>
440
  </div>
441
+ <ul class="space-y-3 mb-8">
442
+ <li class="flex items-center">
443
+ <i class="fas fa-check text-green-500 mr-2"></i>
444
+ <span>Sites Web Illimités</span>
445
+ </li>
446
+ <li class="flex items-center">
447
+ <i class="fas fa-check text-green-500 mr-2"></i>
448
+ <span>200GB Stockage SSD</span>
449
+ </li>
450
+ <li class="flex items-center">
451
+ <i class="fas fa-check text-green-500 mr-2"></i>
452
+ <span>Bande passante Illimitée</span>
453
+ </li>
454
+ <li class="flex items-center">
455
+ <i class="fas fa-check text-green-500 mr-2"></i>
456
+ <span>Serveur Privé Virtuel (VPS)</span>
457
+ </li>
458
+ <li class="flex items-center">
459
+ <i class="fas fa-check text-green-500 mr-2"></i>
460
+ <span>Protection DDoS</span>
461
+ </li>
462
+ </ul>
463
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
464
+ Choisir ce plan
465
+ </button>
466
  </div>
467
  </div>
468
+ </div>
469
+ </section>
470
+
471
+ <!-- Features Section -->
472
+ <section class="py-20 bg-gray-800">
473
+ <div class="container mx-auto px-6">
474
+ <div class="text-center mb-16">
475
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Technologies de Pointe</h2>
476
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">Nous utilisons les dernières technologies pour des performances optimales</p>
477
+ </div>
478
 
479
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
480
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-900 rounded-xl border border-gray-700">
481
+ <i class="fab fa-php text-5xl text-purple-400 mb-4"></i>
482
+ <h3 class="text-lg font-semibold">PHP 8.2</h3>
483
+ <p class="text-sm text-gray-400 text-center">Version la plus récente avec OPcache</p>
484
+ </div>
485
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-900 rounded-xl border border-gray-700">
486
+ <i class="fas fa-bolt text-5xl text-yellow-400 mb-4"></i>
487
+ <h3 class="text-lg font-semibold">LiteSpeed</h3>
488
+ <p class="text-sm text-gray-400 text-center">Serveur web 6x plus rapide</p>
489
+ </div>
490
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-900 rounded-xl border border-gray-700">
491
+ <i class="fas fa-database text-5xl text-blue-400 mb-4"></i>
492
+ <h3 class="text-lg font-semibold">MySQL 8.0</h3>
493
+ <p class="text-sm text-gray-400 text-center">Performances optimisées</p>
494
+ </div>
495
+ <div class="tech-icon flex flex-col items-center p-6 bg-gray-900 rounded-xl border border-gray-700">
496
+ <i class="fab fa-node-js text-5xl text-green-400 mb-4"></i>
497
+ <h3 class="text-lg font-semibold">Node.js</h3>
498
+ <p class="text-sm text-gray-400 text-center">Support pour applications JS</p>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="bg-gray-900 rounded-2xl border border-gray-700 overflow-hidden">
503
+ <div class="grid grid-cols-1 md:grid-cols-2">
504
+ <div class="p-10">
505
+ <h3 class="text-2xl font-bold mb-6">Sécurité Avancée</h3>
506
+ <ul class="space-y-4">
507
+ <li class="flex items-start">
508
+ <div class="bg-blue-600 p-2 rounded-lg mr-4 mt-1">
509
+ <i class="fas fa-shield-alt text-white"></i>
510
+ </div>
511
+ <div>
512
+ <h4 class="font-semibold mb-1">Protection DDoS</h4>
513
+ <p class="text-gray-400">Protection contre les attaques par déni de service distribué</p>
514
+ </div>
515
+ </li>
516
+ <li class="flex items-start">
517
+ <div class="bg-blue-600 p-2 rounded-lg mr-4 mt-1">
518
+ <i class="fas fa-lock text-white"></i>
519
+ </div>
520
+ <div>
521
+ <h4 class="font-semibold mb-1">SSL Gratuit</h4>
522
+ <p class="text-gray-400">Certificats Let's Encrypt pour tous vos sites</p>
523
+ </div>
524
+ </li>
525
+ <li class="flex items-start">
526
+ <div class="bg-blue-600 p-2 rounded-lg mr-4 mt-1">
527
+ <i class="fas fa-cloud text-white"></i>
528
+ </div>
529
+ <div>
530
+ <h4 class="font-semibold mb-1">Sauvegardes Automatiques</h4>
531
+ <p class="text-gray-400">Sauvegardes quotidiennes avec restauration en 1 clic</p>
532
+ </div>
533
+ </li>
534
+ </ul>
535
+ </div>
536
+ <div class="bg-gray-800 p-10 flex items-center justify-center">
537
+ <img src="https://illustrations.popsy.co/amber/security.svg" alt="Sécurité" class="w-full max-w-md">
538
  </div>
539
  </div>
540
+ </div>
541
+ </div>
542
+ </section>
543
+
544
+ <!-- Testimonials -->
545
+ <section class="py-20 bg-gray-900">
546
+ <div class="container mx-auto px-6">
547
+ <div class="text-center mb-16">
548
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Ce Que Disent Nos Clients</h2>
549
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">Des milliers de clients nous font confiance pour leurs projets web</p>
550
+ </div>
551
+
552
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
553
+ <div class="bg-gray-800 rounded-xl border border-gray-700 p-8">
554
+ <div class="flex items-center mb-6">
555
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
556
+ <div>
557
+ <h4 class="font-semibold">Sophie Martin</h4>
558
+ <p class="text-sm text-gray-400">Fondatrice de BoutiqueBio</p>
559
+ </div>
560
+ </div>
561
+ <p class="text-gray-300 mb-6">
562
+ "Depuis que j'ai migré mon site vers HosterWeb, les temps de chargement ont été divisés par 3. Le support est réactif et professionnel."
563
+ </p>
564
+ <div class="flex text-yellow-400">
565
+ <i class="fas fa-star"></i>
566
+ <i class="fas fa-star"></i>
567
+ <i class="fas fa-star"></i>
568
+ <i class="fas fa-star"></i>
569
+ <i class="fas fa-star"></i>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="bg-gray-800 rounded-xl border border-gray-700 p-8">
574
+ <div class="flex items-center mb-6">
575
+ <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
576
+ <div>
577
+ <h4 class="font-semibold">Thomas Leroy</h4>
578
+ <p class="text-sm text-gray-400">Développeur Freelance</p>
579
+ </div>
580
+ </div>
581
+ <p class="text-gray-300 mb-6">
582
+ "Je gère plus de 20 sites clients sur HosterWeb. L'interface est intuitive et les performances sont constantes. Aucun problème en 2 ans."
583
+ </p>
584
+ <div class="flex text-yellow-400">
585
+ <i class="fas fa-star"></i>
586
+ <i class="fas fa-star"></i>
587
+ <i class="fas fa-star"></i>
588
+ <i class="fas fa-star"></i>
589
+ <i class="fas fa-star-half-alt"></i>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="bg-gray-800 rounded-xl border border-gray-700 p-8">
594
+ <div class="flex items-center mb-6">
595
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
596
+ <div>
597
+ <h4 class="font-semibold">Émilie Dubois</h4>
598
+ <p class="text-sm text-gray-400">Responsable Marketing</p>
599
+ </div>
600
+ </div>
601
+ <p class="text-gray-300 mb-6">
602
+ "La migration a été transparente et notre site e-commerce a gagné en stabilité. Les sauvegardes automatiques sont rassurantes."
603
+ </p>
604
+ <div class="flex text-yellow-400">
605
+ <i class="fas fa-star"></i>
606
+ <i class="fas fa-star"></i>
607
+ <i class="fas fa-star"></i>
608
+ <i class="fas fa-star"></i>
609
+ <i class="fas fa-star"></i>
610
+ </div>
611
  </div>
612
  </div>
613
  </div>
614
+ </section>
615
 
616
  <!-- CTA Section -->
617
+ <section class="gradient-bg py-20">
618
  <div class="container mx-auto px-6 text-center">
619
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à Démarrer ?</h2>
620
+ <p class="text-xl opacity-90 max-w-2xl mx-auto mb-8">Rejoignez plus de 15,000 clients satisfaits et profitez d'un hébergement ultra-rapide dès aujourd'hui.</p>
621
  <div class="flex flex-col sm:flex-row justify-center gap-4">
622
+ <button class="glow bg-white hover:bg-gray-100 text-blue-600 font-bold py-4 px-10 rounded-full transition duration-300 transform hover:scale-105">
623
+ <i class="fas fa-rocket mr-2"></i> Commencer dès €2.99/mois
624
  </button>
625
  <button class="bg-transparent hover:bg-white hover:bg-opacity-10 border-2 border-white text-white font-bold py-4 px-10 rounded-full transition duration-300">
626
+ <i class="fas fa-question-circle mr-2"></i> Questions ?
627
  </button>
628
  </div>
629
  </div>
630
+ </section>
631
 
632
  <!-- Footer -->
633
+ <footer class="bg-gray-900 text-gray-400 py-12">
634
  <div class="container mx-auto px-6">
635
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
636
  <div>
637
+ <div class="flex items-center space-x-2 mb-4">
638
+ <i class="fas fa-server text-blue-500"></i>
639
+ <span class="text-xl font-bold text-white">HosterWeb<span class="text-blue-400">Pro</span></span>
640
+ </div>
641
+ <p class="mb-4">L'hébergement web le plus performant avec des technologies de pointe et un support exceptionnel.</p>
642
  <div class="flex space-x-4">
643
+ <a href="#" class="text-gray-400 hover:text-blue-400">
644
  <i class="fab fa-facebook-f"></i>
645
  </a>
646
+ <a href="#" class="text-gray-400 hover:text-blue-400">
647
  <i class="fab fa-twitter"></i>
648
  </a>
649
+ <a href="#" class="text-gray-400 hover:text-blue-400">
650
  <i class="fab fa-linkedin-in"></i>
651
  </a>
652
+ <a href="#" class="text-gray-400 hover:text-blue-400">
653
+ <i class="fab fa-instagram"></i>
654
+ </a>
655
  </div>
656
  </div>
657
 
658
  <div>
659
+ <h3 class="text-white text-lg font-bold mb-4">Hébergement</h3>
660
  <ul class="space-y-2">
661
+ <li><a href="#" class="hover:text-blue-400 transition">Hébergement Mutualisé</a></li>
662
+ <li><a href="#" class="hover:text-blue-400 transition">Serveurs VPS</a></li>
663
+ <li><a href="#" class="hover:text-blue-400 transition">Serveurs Dédiés</a></li>
664
+ <li><a href="#" class="hover:text-blue-400 transition">Hébergement WordPress</a></li>
665
+ <li><a href="#" class="hover:text-blue-400 transition">Hébergement Cloud</a></li>
666
  </ul>
667
  </div>
668
 
669
  <div>
670
+ <h3 class="text-white text-lg font-bold mb-4">Domaine</h3>
671
  <ul class="space-y-2">
672
+ <li><a href="#" class="hover:text-blue-400 transition">Enregistrement de domaine</a></li>
673
+ <li><a href="#" class="hover:text-blue-400 transition">Transfert de domaine</a></li>
674
+ <li><a href="#" class="hover:text-blue-400 transition">WHOIS privé</a></li>
675
+ <li><a href="#" class="hover:text-blue-400 transition">Extensions disponibles</a></li>
676
+ <li><a href="#" class="hover:text-blue-400 transition">Gestion DNS</a></li>
677
  </ul>
678
  </div>
679
 
 
681
  <h3 class="text-white text-lg font-bold mb-4">Contact</h3>
682
  <ul class="space-y-2">
683
  <li class="flex items-center">
684
+ <i class="fas fa-map-marker-alt mr-2 text-blue-400"></i>
685
+ <span>12 Rue du Serveur, 75000 Paris</span>
686
  </li>
687
  <li class="flex items-center">
688
+ <i class="fas fa-phone-alt mr-2 text-blue-400"></i>
689
  <span>+33 1 23 45 67 89</span>
690
  </li>
691
  <li class="flex items-center">
692
+ <i class="fas fa-envelope mr-2 text-blue-400"></i>
693
+ <span>[email protected]</span>
694
+ </li>
695
+ <li class="flex items-center">
696
+ <i class="fas fa-headset mr-2 text-blue-400"></i>
697
+ <span>Support 24/7/365</span>
698
  </li>
699
  </ul>
700
  </div>
701
  </div>
702
 
703
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
704
+ <p>© 2023 HosterWeb Pro. Tous droits réservés.</p>
705
  <div class="flex space-x-6 mt-4 md:mt-0">
706
+ <a href="#" class="hover:text-blue-400 transition">Confidentialité</a>
707
+ <a href="#" class="hover:text-blue-400 transition">Conditions</a>
708
+ <a href="#" class="hover:text-blue-400 transition">Mentions légales</a>
709
  </div>
710
  </div>
711
  </div>
712
  </footer>
713
 
 
 
 
714
  <script>
715
+ // Animate resource usage
716
+ function animateResources() {
717
+ // CPU
718
+ let cpu = 0;
719
+ const cpuInterval = setInterval(() => {
720
+ cpu += Math.random() * 5;
721
+ if (cpu >= 30 + Math.random() * 40) {
722
+ clearInterval(cpuInterval);
723
+ // Random fluctuations after reaching target
724
+ setInterval(() => {
725
+ document.getElementById('cpuUsage').textContent = Math.floor(30 + Math.random() * 40) + '%';
726
+ document.getElementById('cpuBar').style.width = (30 + Math.random() * 40) + '%';
727
+ }, 2000);
728
+ } else {
729
+ document.getElementById('cpuUsage').textContent = Math.floor(cpu) + '%';
730
+ document.getElementById('cpuBar').style.width = cpu + '%';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
731
  }
732
+ }, 100);
733
+
734
+ // RAM
735
+ let ram = 0;
736
+ const ramInterval = setInterval(() => {
737
+ ram += Math.random() * 0.5;
738
+ if (ram >= 4 + Math.random() * 8) {
739
+ clearInterval(ramInterval);
740
+ // Random fluctuations after reaching target
741
+ setInterval(() => {
742
+ const ramValue = (4 + Math.random() * 8).toFixed(1);
743
+ document.getElementById('ramUsage').textContent = ramValue + 'GB';
744
+ document.getElementById('ramBar').style.width = (ramValue / 16 * 100) + '%';
745
+ }, 2000);
746
+ } else {
747
+ document.getElementById('ramUsage').textContent = ram.toFixed(1) + 'GB';
748
+ document.getElementById('ramBar').style.width = (ram / 16 * 100) + '%';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
749
  }
750
+ }, 100);
751
+
752
+ // Storage
753
+ let storage = 0;
754
+ const storageInterval = setInterval(() => {
755
+ storage += Math.random() * 2;
756
+ if (storage >= 50 + Math.random() * 100) {
757
+ clearInterval(storageInterval);
758
+ // Random fluctuations after reaching target
759
+ setInterval(() => {
760
+ const storageValue = Math.floor(50 + Math.random() * 100);
761
+ document.getElementById('storageUsage').textContent = storageValue + 'GB';
762
+ document.getElementById('storageBar').style.width = (storageValue / 200 * 100) + '%';
763
+ }, 2000);
764
+ } else {
765
+ document.getElementById('storageUsage').textContent = Math.floor(storage) + 'GB';
766
+ document.getElementById('storageBar').style.width = (storage / 200 * 100) + '%';
 
 
 
 
 
 
 
 
 
767
  }
768
+ }, 100);
769
+
770
+ // Bandwidth
771
+ let bandwidth = 0;
772
+ const bandwidthInterval = setInterval(() => {
773
+ bandwidth += Math.random() * 0.5;
774
+ if (bandwidth >= 1 + Math.random() * 4) {
775
+ clearInterval(bandwidthInterval);
776
+ // Random fluctuations after reaching target
777
+ setInterval(() => {
778
+ const bandwidthValue = (1 + Math.random() * 4).toFixed(2);
779
+ document.getElementById('bandwidthUsage').textContent = bandwidthValue + 'TB';
780
+ document.getElementById('bandwidthBar').style.width = (Math.random() * 30 + 10) + '%';
781
+ }, 2000);
782
+ } else {
783
+ document.getElementById('bandwidthUsage').textContent = bandwidth.toFixed(2) + 'TB';
784
+ document.getElementById('bandwidthBar').style.width = (bandwidth * 10) + '%';
785
+ }
786
+ }, 100);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
787
  }
788
+
789
+ // Initialize animations
790
  document.addEventListener('DOMContentLoaded', function() {
791
+ animateResources();
792
+
793
+ // Add hover effect to server cards
794
+ const cards = document.querySelectorAll('.server-card');
795
+ cards.forEach(card => {
796
+ card.addEventListener('mouseenter', () => {
797
+ card.classList.add('shadow-xl');
798
+ });
799
+ card.addEventListener('mouseleave', () => {
800
+ card.classList.remove('shadow-xl');
801
+ });
802
+ });
803
 
804
+ // Add animation to tech icons
805
+ const techIcons = document.querySelectorAll('.tech-icon');
806
+ techIcons.forEach(icon => {
807
+ icon.addEventListener('mouseenter', () => {
808
+ icon.style.transform = 'scale(1.1)';
809
+ icon.style.filter = 'grayscale(0%)';
810
+ });
811
+ icon.addEventListener('mouseleave', () => {
812
+ icon.style.transform = 'scale(1)';
813
+ icon.style.filter = 'grayscale(30%)';
814
+ });
815
+ });
 
 
 
816
  });
817
  </script>
818
  <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/mon-tisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  je veux un systeme automaique pour monetisé un site
2
  creer un site tres atractif avec systeme automatique pour monetiséé mon site
3
- DEMMARER AUTOMATIQUEMENT
 
 
1
  je veux un systeme automaique pour monetisé un site
2
  creer un site tres atractif avec systeme automatique pour monetiséé mon site
3
+ DEMMARER AUTOMATIQUEMENT
4
+ https://hoster-web.net/ , avec interface tres annimé