Hugging Face's logo

Spaces:
docto41
/
mon-tisation
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +492 -399
  2. prompts.txt +2 -1
index.html CHANGED
@@ -37,6 +37,10 @@
37
  .progress-bar {
38
  transition: width 0.6s ease;
39
  }
 
 
 
 
40
  </style>
41
  </head>
42
  <body class="font-sans bg-gray-50">
@@ -45,14 +49,14 @@
45
  <div class="container mx-auto px-6 py-24">
46
  <div class="flex flex-col md:flex-row items-center">
47
  <div class="md:w-1/2 mb-12 md:mb-0">
48
- <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Monétisez Automatiquement Votre Site</h1>
49
- <p class="text-xl mb-8 opacity-90">Notre système intelligent maximise vos revenus sans effort grâce à des technologies avancées d'IA.</p>
50
  <div class="flex flex-col sm:flex-row gap-4">
51
- <button 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">
52
- Essai Gratuit <i class="fas fa-arrow-right ml-2"></i>
53
  </button>
54
- <button 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">
55
- Voir la démo
56
  </button>
57
  </div>
58
  <div class="mt-8 flex items-center">
@@ -73,189 +77,145 @@
73
  </div>
74
  </div>
75
 
76
- <!-- Features Section -->
77
  <div class="py-20 bg-white">
78
  <div class="container mx-auto px-6">
79
- <div class="text-center mb-16">
80
- <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Comment ça marche ?</h2>
81
- <p class="text-xl text-gray-600 max-w-2xl mx-auto">Notre système analyse votre trafic et optimise automatiquement vos sources de revenus.</p>
82
- </div>
83
-
84
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
85
- <!-- Feature 1 -->
86
- <div class="bg-gray-50 p-8 rounded-xl card-hover">
87
- <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
88
- <i class="fas fa-ad text-purple-600 text-2xl"></i>
89
- </div>
90
- <h3 class="text-xl font-bold text-gray-800 mb-3">Publicités Intelligentes</h3>
91
- <p class="text-gray-600 mb-4">Placement automatique des annonces en fonction du comportement des visiteurs pour des revenus maximisés.</p>
92
- <div class="flex items-center text-purple-600 font-medium">
93
- En savoir plus <i class="fas fa-chevron-right ml-2 text-sm"></i>
94
  </div>
95
- </div>
96
-
97
- <!-- Feature 2 -->
98
- <div class="bg-gray-50 p-8 rounded-xl card-hover">
99
- <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
100
- <i class="fas fa-handshake text-blue-600 text-2xl"></i>
101
  </div>
102
- <h3 class="text-xl font-bold text-gray-800 mb-3">Affiliation Automatisée</h3>
103
- <p class="text-gray-600 mb-4">Nos algorithmes recommandent les produits les plus pertinents à chaque visiteur pour augmenter vos commissions.</p>
104
- <div class="flex items-center text-blue-600 font-medium">
105
- En savoir plus <i class="fas fa-chevron-right ml-2 text-sm"></i>
106
  </div>
107
  </div>
108
-
109
- <!-- Feature 3 -->
110
- <div class="bg-gray-50 p-8 rounded-xl card-hover">
111
- <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
112
- <i class="fas fa-crown text-green-600 text-2xl"></i>
 
 
 
 
 
 
113
  </div>
114
- <h3 class="text-xl font-bold text-gray-800 mb-3">Contenu Premium</h3>
115
- <p class="text-gray-600 mb-4">Transformez vos meilleurs contenus en sources de revenus récurrents avec notre système d'abonnement clé en main.</p>
116
- <div class="flex items-center text-green-600 font-medium">
117
- En savoir plus <i class="fas fa-chevron-right ml-2 text-sm"></i>
 
 
 
 
118
  </div>
119
  </div>
120
- </div>
121
- </div>
122
- </div>
123
-
124
- <!-- Dashboard Preview -->
125
- <div class="py-20 bg-gray-50">
126
- <div class="container mx-auto px-6">
127
- <div class="flex flex-col md:flex-row items-center">
128
- <div class="md:w-1/2 mb-12 md:mb-0">
129
- <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Tableau de Bord Intelligent</h2>
130
- <p class="text-xl text-gray-600 mb-8">Visualisez en temps réel vos performances et revenus avec notre interface intuitive.</p>
131
-
132
- <div class="space-y-6">
133
- <div>
134
- <div class="flex justify-between mb-2">
135
- <span class="font-medium text-gray-700">Revenus Publicitaires</span>
136
- <span class="font-bold text-purple-600">€124.50</span>
137
- </div>
138
- <div class="w-full bg-gray-200 rounded-full h-2.5">
139
- <div class="progress-bar bg-purple-600 h-2.5 rounded-full" style="width: 75%"></div>
140
- </div>
141
- </div>
142
-
143
  <div>
144
- <div class="flex justify-between mb-2">
145
- <span class="font-medium text-gray-700">Commissions d'Affiliation</span>
146
- <span class="font-bold text-blue-600">€89.30</span>
147
- </div>
148
- <div class="w-full bg-gray-200 rounded-full h-2.5">
149
- <div class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 55%"></div>
150
- </div>
151
  </div>
152
-
153
- <div>
154
- <div class="flex justify-between mb-2">
155
- <span class="font-medium text-gray-700">Abonnements Premium</span>
156
- <span class="font-bold text-green-600">€210.00</span>
157
- </div>
158
- <div class="w-full bg-gray-200 rounded-full h-2.5">
159
- <div class="progress-bar bg-green-600 h-2.5 rounded-full" style="width: 90%"></div>
160
- </div>
161
  </div>
162
  </div>
163
-
164
- <button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
165
- Accéder au Dashboard <i class="fas fa-chart-line ml-2"></i>
166
- </button>
167
- </div>
168
-
169
- <div class="md:w-1/2 relative">
170
- <div class="bg-white p-2 rounded-xl shadow-2xl border border-gray-100">
171
- <img src="https://illustrations.popsy.co/amber/revenue.svg" alt="Dashboard de monétisation" class="w-full rounded-lg">
172
  </div>
173
- <div class="absolute -bottom-6 -left-6 bg-yellow-400 text-yellow-900 px-4 py-2 rounded-full font-bold text-sm shadow-lg">
174
- <i class="fas fa-bolt mr-1"></i> Nouveauté
175
  </div>
176
  </div>
177
  </div>
178
- </div>
179
- </div>
180
-
181
- <!-- Monetization System -->
182
- <div class="py-20 bg-white">
183
- <div class="container mx-auto px-6">
184
- <div class="text-center mb-16">
185
- <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Notre Système de Monétisation</h2>
186
- <p class="text-xl text-gray-600 max-w-2xl mx-auto">Une combinaison puissante de technologies pour maximiser vos revenus</p>
 
 
187
  </div>
188
-
189
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
190
- <div>
191
- <div class="mb-8">
192
- <div class="flex items-start mb-4">
193
- <div class="bg-purple-100 p-3 rounded-full mr-4">
194
- <i class="fas fa-brain text-purple-600 text-xl"></i>
 
 
 
 
 
195
  </div>
196
  <div>
197
- <h3 class="text-xl font-bold text-gray-800 mb-2">Optimisation par IA</h3>
198
- <p class="text-gray-600">Notre intelligence artificielle analyse en temps réel le comportement de vos visiteurs pour afficher les publicités et produits les plus pertinents.</p>
199
  </div>
200
  </div>
 
 
 
 
201
  </div>
202
 
203
- <div class="mb-8">
204
- <div class="flex items-start mb-4">
205
- <div class="bg-blue-100 p-3 rounded-full mr-4">
206
- <i class="fas fa-sync-alt text-blue-600 text-xl"></i>
 
207
  </div>
208
  <div>
209
- <h3 class="text-xl font-bold text-gray-800 mb-2">Rotation Automatique</h3>
210
- <p class="text-gray-600">Le système fait tourner automatiquement différents réseaux publicitaires pour toujours obtenir les meilleurs taux de revenus.</p>
211
  </div>
212
  </div>
 
 
 
 
213
  </div>
214
 
215
- <div>
216
- <div class="flex items-start mb-4">
217
- <div class="bg-green-100 p-3 rounded-full mr-4">
218
- <i class="fas fa-chart-pie text-green-600 text-xl"></i>
 
219
  </div>
220
  <div>
221
- <h3 class="text-xl font-bold text-gray-800 mb-2">Analytiques Avancées</h3>
222
- <p class="text-gray-600">Des rapports détaillés vous montrent exactement ce qui génère des revenus et comment améliorer vos performances.</p>
223
- </div>
224
- </div>
225
- </div>
226
- </div>
227
-
228
- <div class="relative">
229
- <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl">
230
- <div class="p-4 bg-gray-900 flex items-center">
231
- <div class="flex space-x-2 mr-4">
232
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
233
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
234
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
235
  </div>
236
- <div class="text-white text-sm font-mono">monetisation-system.js</div>
237
- </div>
238
- <div class="p-6">
239
- <pre class="text-green-400 text-sm font-mono overflow-x-auto">
240
- <span class="text-gray-500">// Configuration automatique du système</span>
241
- const monetizationSystem = new AutoMonetization({
242
- <span class="text-yellow-300">adNetworks</span>: ['adsense', 'media.net', 'amazon'],
243
- <span class="text-yellow-300">affiliatePrograms</span>: ['amazon', 'ebay', 'shopify'],
244
- <span class="text-yellow-300">premiumContent</span>: {
245
- <span class="text-blue-300">tiers</span>: ['basic', 'pro', 'enterprise'],
246
- <span class="text-blue-300">pricing</span>: { monthly: 4.99, yearly: 49.99 }
247
- },
248
- <span class="text-yellow-300">aiOptimization</span>: <span class="text-purple-300">true</span>,
249
- <span class="text-yellow-300">autoRotation</span>: <span class="text-purple-300">true</span>
250
- });
251
-
252
- <span class="text-gray-500">// Démarrer la monétisation</span>
253
- monetizationSystem.<span class="text-blue-300">start</span>();</pre>
254
  </div>
255
- </div>
256
- <div class="absolute -bottom-5 -right-5 bg-white p-3 rounded-full shadow-lg">
257
- <div class="bg-green-500 text-white p-3 rounded-full pulse-animation">
258
- <i class="fas fa-play text-lg"></i>
259
  </div>
260
  </div>
261
  </div>
@@ -263,194 +223,81 @@ monetizationSystem.<span class="text-blue-300">start</span>();</pre>
263
  </div>
264
  </div>
265
 
266
- <!-- Testimonials -->
267
- <div class="py-20 gradient-bg text-white">
268
  <div class="container mx-auto px-6">
269
- <div class="text-center mb-16">
270
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Ils nous font confiance</h2>
271
- <p class="text-xl opacity-90 max-w-2xl mx-auto">Des milliers de propriétaires de sites ont multiplié leurs revenus avec notre système</p>
272
- </div>
273
-
274
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
275
- <!-- Testimonial 1 -->
276
- <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-filter backdrop-blur-sm card-hover">
277
- <div class="flex items-center mb-4">
278
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sophie Martin" class="w-12 h-12 rounded-full border-2 border-white">
279
- <div class="ml-4">
280
- <h4 class="font-bold">Sophie Martin</h4>
281
- <p class="text-sm opacity-80">Blogueuse voyage</p>
282
  </div>
283
- </div>
284
- <p class="mb-4">"En 3 mois seulement, mes revenus ont été multipliés par 5 grâce au système automatique. Je recommande à 100% !"</p>
285
- <div class="flex text-yellow-400">
286
- <i class="fas fa-star"></i>
287
- <i class="fas fa-star"></i>
288
- <i class="fas fa-star"></i>
289
- <i class="fas fa-star"></i>
290
- <i class="fas fa-star"></i>
291
- </div>
292
- </div>
293
-
294
- <!-- Testimonial 2 -->
295
- <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-filter backdrop-blur-sm card-hover">
296
- <div class="flex items-center mb-4">
297
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Leroy" class="w-12 h-12 rounded-full border-2 border-white">
298
- <div class="ml-4">
299
- <h4 class="font-bold">Thomas Leroy</h4>
300
- <p class="text-sm opacity-80">Site de technologie</p>
301
  </div>
302
  </div>
303
- <p class="mb-4">"La partie affiliation automatisée est révolutionnaire. J'ai gagné plus en 1 mois qu'en 1 an avec mon ancien système."</p>
304
- <div class="flex text-yellow-400">
305
- <i class="fas fa-star"></i>
306
- <i class="fas fa-star"></i>
307
- <i class="fas fa-star"></i>
308
- <i class="fas fa-star"></i>
309
- <i class="fas fa-star"></i>
 
 
 
 
 
310
  </div>
311
  </div>
312
-
313
- <!-- Testimonial 3 -->
314
- <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-filter backdrop-blur-sm card-hover">
315
- <div class="flex items-center mb-4">
316
- <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Dubois" class="w-12 h-12 rounded-full border-2 border-white">
317
- <div class="ml-4">
318
- <h4 class="font-bold">Emma Dubois</h4>
319
- <p class="text-sm opacity-80">Site de mode</p>
320
  </div>
 
321
  </div>
322
- <p class="mb-4">"Je passe moins de temps à gérer la monétisation et pourtant je gagne plus. C'est magique !"</p>
323
- <div class="flex text-yellow-400">
324
- <i class="fas fa-star"></i>
325
- <i class="fas fa-star"></i>
326
- <i class="fas fa-star"></i>
327
- <i class="fas fa-star"></i>
328
- <i class="fas fa-star-half-alt"></i>
329
  </div>
330
  </div>
331
  </div>
332
- </div>
333
- </div>
334
-
335
- <!-- Pricing -->
336
- <div class="py-20 bg-white">
337
- <div class="container mx-auto px-6">
338
- <div class="text-center mb-16">
339
- <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nos Offres</h2>
340
- <p class="text-xl text-gray-600 max-w-2xl mx-auto">Choisissez la formule qui correspond à vos besoins</p>
341
- </div>
342
-
343
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
344
- <!-- Plan 1 -->
345
- <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover">
346
- <h3 class="text-xl font-bold text-gray-800 mb-2">Starter</h3>
347
- <p class="text-gray-600 mb-6">Parfait pour les petits sites</p>
348
- <div class="mb-6">
349
- <span class="text-4xl font-bold text-purple-600">€19</span>
350
- <span class="text-gray-500">/mois</span>
351
- </div>
352
- <ul class="space-y-3 mb-8">
353
- <li class="flex items-center">
354
- <i class="fas fa-check text-green-500 mr-2"></i>
355
- <span>Publicités automatiques</span>
356
- </li>
357
- <li class="flex items-center">
358
- <i class="fas fa-check text-green-500 mr-2"></i>
359
- <span>1 programme d'affiliation</span>
360
- </li>
361
- <li class="flex items-center text-gray-400">
362
- <i class="fas fa-times text-red-400 mr-2"></i>
363
- <span>Contenu premium</span>
364
- </li>
365
- <li class="flex items-center text-gray-400">
366
- <i class="fas fa-times text-red-400 mr-2"></i>
367
- <span>Optimisation par IA</span>
368
- </li>
369
- </ul>
370
- <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg transition">
371
- Commencer
372
- </button>
373
- </div>
374
-
375
- <!-- Plan 2 (Featured) -->
376
- <div class="bg-gradient-to-b from-purple-600 to-purple-700 p-8 rounded-xl shadow-xl text-white transform scale-105 card-hover">
377
- <div class="absolute top-0 right-0 bg-yellow-400 text-yellow-900 px-3 py-1 rounded-bl-lg rounded-tr-xl text-sm font-bold">
378
- POPULAIRE
379
- </div>
380
- <h3 class="text-xl font-bold mb-2">Pro</h3>
381
- <p class="opacity-90 mb-6">Le choix des professionnels</p>
382
- <div class="mb-6">
383
- <span class="text-4xl font-bold">€49</span>
384
- <span class="opacity-90">/mois</span>
385
  </div>
386
- <ul class="space-y-3 mb-8">
387
- <li class="flex items-center">
388
- <i class="fas fa-check text-white mr-2"></i>
389
- <span>Publicités automatiques</span>
390
- </li>
391
- <li class="flex items-center">
392
- <i class="fas fa-check text-white mr-2"></i>
393
- <span>5 programmes d'affiliation</span>
394
- </li>
395
- <li class="flex items-center">
396
- <i class="fas fa-check text-white mr-2"></i>
397
- <span>Système de contenu premium</span>
398
- </li>
399
- <li class="flex items-center">
400
- <i class="fas fa-check text-white mr-2"></i>
401
- <span>Optimisation par IA</span>
402
- </li>
403
- </ul>
404
- <button class="w-full bg-white hover:bg-gray-100 text-purple-600 font-bold py-3 px-4 rounded-lg transition transform hover:scale-105">
405
- Essai Gratuit
406
- </button>
407
  </div>
408
-
409
- <!-- Plan 3 -->
410
- <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover">
411
- <h3 class="text-xl font-bold text-gray-800 mb-2">Enterprise</h3>
412
- <p class="text-gray-600 mb-6">Pour les sites à fort trafic</p>
413
- <div class="mb-6">
414
- <span class="text-4xl font-bold text-purple-600">€99</span>
415
- <span class="text-gray-500">/mois</span>
416
- </div>
417
- <ul class="space-y-3 mb-8">
418
- <li class="flex items-center">
419
- <i class="fas fa-check text-green-500 mr-2"></i>
420
- <span>Toutes les fonctionnalités Pro</span>
421
- </li>
422
- <li class="flex items-center">
423
- <i class="fas fa-check text-green-500 mr-2"></i>
424
- <span>Support prioritaire</span>
425
- </li>
426
- <li class="flex items-center">
427
- <i class="fas fa-check text-green-500 mr-2"></i>
428
- <span>Analytiques avancées</span>
429
- </li>
430
- <li class="flex items-center">
431
- <i class="fas fa-check text-green-500 mr-2"></i>
432
- <span>Réseaux premium</span>
433
- </li>
434
- </ul>
435
- <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg transition">
436
- Nous contacter
437
- </button>
438
  </div>
439
  </div>
440
  </div>
441
  </div>
442
 
443
  <!-- CTA Section -->
444
- <div class="py-20 bg-gray-900 text-white">
445
  <div class="container mx-auto px-6 text-center">
446
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à booster vos revenus ?</h2>
447
- <p class="text-xl opacity-90 max-w-2xl mx-auto mb-8">Rejoignez des milliers de propriétaires de sites qui ont multiplié leurs revenus avec notre système automatique.</p>
448
  <div class="flex flex-col sm:flex-row justify-center gap-4">
449
- <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-10 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
450
- Essai Gratuit 14 Jours <i class="fas fa-arrow-right ml-2"></i>
451
  </button>
452
- <button class="bg-transparent hover:bg-gray-800 border-2 border-gray-700 text-white font-bold py-4 px-10 rounded-full transition duration-300">
453
- Voir une démo
454
  </button>
455
  </div>
456
  </div>
@@ -477,22 +324,22 @@ monetizationSystem.<span class="text-blue-300">start</span>();</pre>
477
  </div>
478
 
479
  <div>
480
- <h3 class="text-white text-lg font-bold mb-4">Produit</h3>
481
  <ul class="space-y-2">
482
- <li><a href="#" class="hover:text-white transition">Fonctionnalités</a></li>
483
- <li><a href="#" class="hover:text-white transition">Tarifs</a></li>
484
- <li><a href="#" class="hover:text-white transition">API</a></li>
485
- <li><a href="#" class="hover:text-white transition">Intégrations</a></li>
486
  </ul>
487
  </div>
488
 
489
  <div>
490
- <h3 class="text-white text-lg font-bold mb-4">Ressources</h3>
491
  <ul class="space-y-2">
492
- <li><a href="#" class="hover:text-white transition">Documentation</a></li>
493
- <li><a href="#" class="hover:text-white transition">Blog</a></li>
494
- <li><a href="#" class="hover:text-white transition">Tutoriels</a></li>
495
- <li><a href="#" class="hover:text-white transition">Support</a></li>
496
  </ul>
497
  </div>
498
 
@@ -501,7 +348,7 @@ monetizationSystem.<span class="text-blue-300">start</span>();</pre>
501
  <ul class="space-y-2">
502
  <li class="flex items-center">
503
  <i class="fas fa-envelope mr-2 text-purple-400"></i>
504
- <span>contact@monetisationauto.com</span>
505
  </li>
506
  <li class="flex items-center">
507
  <i class="fas fa-phone-alt mr-2 text-purple-400"></i>
@@ -518,88 +365,334 @@ monetizationSystem.<span class="text-blue-300">start</span>();</pre>
518
  <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
519
  <p>© 2023 Monétisation Auto. Tous droits réservés.</p>
520
  <div class="flex space-x-6 mt-4 md:mt-0">
521
- <a href="#" class="hover:text-white transition">Mentions légales</a>
522
- <a href="#" class="hover:text-white transition">Politique de confidentialité</a>
523
- <a href="#" class="hover:text-white transition">CGU</a>
524
  </div>
525
  </div>
526
  </div>
527
  </footer>
528
 
 
 
 
529
  <script>
530
- // Animation for the progress bars
531
- document.addEventListener('DOMContentLoaded', function() {
532
- const progressBars = document.querySelectorAll('.progress-bar');
533
-
534
- // Animate progress bars on scroll
535
- const animateOnScroll = function() {
536
- progressBars.forEach(bar => {
537
- const rect = bar.getBoundingClientRect();
538
- if (rect.top <= window.innerHeight) {
539
- bar.style.width = bar.parentElement.getAttribute('data-width');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
540
  }
541
- });
542
- };
543
-
544
- // Set initial width attributes
545
- document.querySelectorAll('.progress-bar').forEach(bar => {
546
- const width = bar.style.width;
547
- bar.style.width = '0';
548
- bar.parentElement.setAttribute('data-width', width);
549
  });
 
 
 
 
 
550
 
551
- // Run once on load
552
- animateOnScroll();
553
-
554
- // Run on scroll
555
- window.addEventListener('scroll', animateOnScroll);
556
 
557
- // Demo hover effect for pricing cards
558
- const pricingCards = document.querySelectorAll('.card-hover');
559
- pricingCards.forEach(card => {
560
- card.addEventListener('mouseenter', function() {
561
- this.style.transition = 'all 0.3s ease';
562
- });
563
- });
564
 
565
- // Simulate a notification
566
- setTimeout(() => {
567
- const notification = document.createElement('div');
568
- notification.className = 'fixed bottom-4 right-4 bg-purple-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center animate-fade-in';
569
- notification.innerHTML = `
570
- <i class="fas fa-bell text-white mr-3"></i>
571
- <span>Votre site est prêt à être monétisé !</span>
572
- <button class="ml-4 text-white hover:text-gray-200" onclick="this.parentElement.remove()">
573
- <i class="fas fa-times"></i>
574
- </button>
575
- `;
576
- document.body.appendChild(notification);
577
 
578
- // Remove after 5 seconds
579
- setTimeout(() => {
580
- notification.classList.add('animate-fade-out');
581
- setTimeout(() => {
582
- notification.remove();
583
- }, 300);
584
- }, 5000);
585
- }, 3000);
586
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
587
 
588
- // Add animation styles
589
- const style = document.createElement('style');
590
- style.textContent = `
591
- @keyframes animate-fade-in {
592
- from { opacity: 0; transform: translateY(20px); }
593
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
 
 
594
  }
595
- @keyframes animate-fade-out {
596
- from { opacity: 1; transform: translateY(0); }
597
- to { opacity: 0; transform: translateY(20px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
598
  }
599
- .animate-fade-in { animation: animate-fade-in 0.3s forwards; }
600
- .animate-fade-out { animation: animate-fade-out 0.3s forwards; }
601
- `;
602
- document.head.appendChild(style);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
603
  </script>
604
  <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>
605
  </html>
 
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">
 
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">
 
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>
 
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>
 
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
 
 
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>support@monetisationauto.com</span>
352
  </li>
353
  <li class="flex items-center">
354
  <i class="fas fa-phone-alt mr-2 text-purple-400"></i>
 
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>
698
  </html>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  je veux un systeme automaique pour monetisé un site
2
- creer un site tres atractif avec systeme automatique pour monetiséé mon site
 
 
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