Hugging Face's logo

Spaces:
docto41
/
mon-tisation
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +495 -467
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,575 +3,603 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Système Automatique de Monétisation</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
- .progress-bar {
11
- transition: width 0.5s ease-in-out;
 
 
 
 
12
  }
13
- .ad-container:hover {
14
- transform: scale(1.02);
15
- transition: transform 0.3s ease;
16
  }
17
- .premium-badge {
18
  animation: pulse 2s infinite;
19
  }
20
  @keyframes pulse {
21
- 0% { opacity: 0.8; }
22
- 50% { opacity: 1; }
23
- 100% { opacity: 0.8; }
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
  </style>
26
  </head>
27
- <body class="bg-gray-50 font-sans">
28
- <div class="container mx-auto px-4 py-8">
29
- <!-- Header -->
30
- <header class="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl shadow-lg mb-8">
31
- <div class="p-6 flex justify-between items-center">
32
- <div>
33
- <h1 class="text-3xl font-bold">Monétisation Automatique</h1>
34
- <p class="opacity-90">Générez des revenus passifs avec votre site</p>
35
- </div>
36
- <div class="flex items-center space-x-4">
37
- <div class="bg-white bg-opacity-20 p-3 rounded-full">
38
- <i class="fas fa-coins text-2xl"></i>
 
 
 
39
  </div>
40
- <div>
41
- <p class="text-sm">Revenus estimés</p>
42
- <p class="text-xl font-bold">€<span id="total-earnings">0.00</span></p>
 
 
 
 
43
  </div>
44
  </div>
45
- </div>
46
- </header>
47
-
48
- <!-- Dashboard -->
49
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
50
- <!-- Ad Revenue Card -->
51
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
52
- <div class="bg-blue-100 p-4 flex items-center">
53
- <i class="fas fa-ad text-blue-600 text-xl mr-3"></i>
54
- <h2 class="text-lg font-semibold text-blue-800">Publicités</h2>
55
- </div>
56
- <div class="p-5">
57
- <div class="flex justify-between items-center mb-3">
58
- <span class="text-gray-600">Revenus</span>
59
- <span class="font-bold text-blue-600">€<span id="ad-earnings">0.00</span></span>
60
- </div>
61
- <div class="h-2 bg-gray-200 rounded-full mb-4">
62
- <div id="ad-progress" class="progress-bar h-2 rounded-full bg-blue-500" style="width: 0%"></div>
63
  </div>
64
- <div class="flex justify-between text-sm text-gray-500 mb-4">
65
- <span>0 vues</span>
66
- <span>Objectif: 10,000</span>
67
- </div>
68
- <button onclick="toggleAdSettings()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
69
- Configurer
70
- </button>
71
  </div>
72
  </div>
 
 
73
 
74
- <!-- Affiliate Card -->
75
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
76
- <div class="bg-purple-100 p-4 flex items-center">
77
- <i class="fas fa-handshake text-purple-600 text-xl mr-3"></i>
78
- <h2 class="text-lg font-semibold text-purple-800">Programme d'affiliation</h2>
79
- </div>
80
- <div class="p-5">
81
- <div class="flex justify-between items-center mb-3">
82
- <span class="text-gray-600">Revenus</span>
83
- <span class="font-bold text-purple-600">€<span id="affiliate-earnings">0.00</span></span>
84
- </div>
85
- <div class="h-2 bg-gray-200 rounded-full mb-4">
86
- <div id="affiliate-progress" class="progress-bar h-2 rounded-full bg-purple-500" style="width: 0%"></div>
87
- </div>
88
- <div class="flex justify-between text-sm text-gray-500 mb-4">
89
- <span>0 clics</span>
90
- <span>Objectif: 500</span>
91
- </div>
92
- <button onclick="toggleAffiliateSettings()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
93
- Configurer
94
- </button>
95
- </div>
96
  </div>
97
 
98
- <!-- Premium Content Card -->
99
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
100
- <div class="bg-green-100 p-4 flex items-center">
101
- <i class="fas fa-crown text-green-600 text-xl mr-3"></i>
102
- <h2 class="text-lg font-semibold text-green-800">Contenu Premium</h2>
103
- </div>
104
- <div class="p-5">
105
- <div class="flex justify-between items-center mb-3">
106
- <span class="text-gray-600">Revenus</span>
107
- <span class="font-bold text-green-600">€<span id="premium-earnings">0.00</span></span>
108
  </div>
109
- <div class="h-2 bg-gray-200 rounded-full mb-4">
110
- <div id="premium-progress" class="progress-bar h-2 rounded-full bg-green-500" style="width: 0%"></div>
 
 
111
  </div>
112
- <div class="flex justify-between text-sm text-gray-500 mb-4">
113
- <span>0 abonnés</span>
114
- <span>Objectif: 100</span>
115
- </div>
116
- <button onclick="togglePremiumSettings()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition">
117
- Configurer
118
- </button>
119
  </div>
120
- </div>
121
- </div>
122
 
123
- <!-- Ad Settings Panel (Hidden by default) -->
124
- <div id="ad-settings" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8">
125
- <div class="flex justify-between items-center mb-4">
126
- <h2 class="text-xl font-bold text-blue-800">Configuration des Publicités</h2>
127
- <button onclick="toggleAdSettings()" class="text-gray-500 hover:text-gray-700">
128
- <i class="fas fa-times"></i>
129
- </button>
130
- </div>
131
-
132
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
133
- <div>
134
- <h3 class="font-semibold mb-3">Types de publicités</h3>
135
- <div class="space-y-3">
136
- <label class="flex items-center">
137
- <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" checked>
138
- <span class="ml-2">Bannières</span>
139
- </label>
140
- <label class="flex items-center">
141
- <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" checked>
142
- <span class="ml-2">Pop-ups</span>
143
- </label>
144
- <label class="flex items-center">
145
- <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600">
146
- <span class="ml-2">Vidéos</span>
147
- </label>
148
  </div>
149
- </div>
150
-
151
- <div>
152
- <h3 class="font-semibold mb-3">Réseaux publicitaires</h3>
153
- <select class="w-full p-2 border border-gray-300 rounded-lg">
154
- <option>Google AdSense</option>
155
- <option>Media.net</option>
156
- <option>Amazon Associates</option>
157
- <option>Autre</option>
158
- </select>
159
-
160
- <div class="mt-4">
161
- <label class="block font-semibold mb-1">Fréquence des publicités</label>
162
- <input type="range" min="1" max="10" value="5" class="w-full">
163
  </div>
164
  </div>
165
- </div>
166
-
167
- <div class="mt-6">
168
- <h3 class="font-semibold mb-2">Aperçu des publicités</h3>
169
- <div class="ad-container bg-gray-100 p-4 rounded-lg border border-dashed border-gray-300 text-center">
170
- <p class="text-gray-500">Espace publicitaire</p>
171
- <div class="bg-white p-2 my-2 inline-block">
172
- <p class="text-sm font-bold">PUBLICITÉ</p>
 
 
173
  </div>
174
- <p class="text-xs text-gray-400">Cette publicité rapporte €0.02 par vue</p>
175
  </div>
176
  </div>
177
-
178
- <div class="flex justify-end mt-6">
179
- <button onclick="saveAdSettings()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg transition">
180
- Enregistrer
181
- </button>
182
- </div>
183
  </div>
 
184
 
185
- <!-- Affiliate Settings Panel (Hidden by default) -->
186
- <div id="affiliate-settings" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8">
187
- <div class="flex justify-between items-center mb-4">
188
- <h2 class="text-xl font-bold text-purple-800">Configuration du Programme d'Affiliation</h2>
189
- <button onclick="toggleAffiliateSettings()" class="text-gray-500 hover:text-gray-700">
190
- <i class="fas fa-times"></i>
191
- </button>
192
- </div>
193
-
194
- <div class="space-y-4">
195
- <div>
196
- <label class="block font-semibold mb-1">Programme d'affiliation</label>
197
- <select class="w-full p-2 border border-gray-300 rounded-lg">
198
- <option>Amazon Associates</option>
199
- <option>eBay Partner Network</option>
200
- <option>Shopify Affiliate</option>
201
- <option>Autre</option>
202
- </select>
203
- </div>
204
-
205
- <div>
206
- <label class="block font-semibold mb-1">ID d'affiliation</label>
207
- <input type="text" placeholder="Votre identifiant unique" class="w-full p-2 border border-gray-300 rounded-lg">
208
- </div>
209
-
210
- <div>
211
- <label class="block font-semibold mb-1">Produits à promouvoir</label>
212
- <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
213
- <div class="border rounded-lg p-2 text-center cursor-pointer hover:bg-purple-50">
214
- <i class="fas fa-laptop text-xl mb-1"></i>
215
- <p class="text-sm">Technologie</p>
216
- </div>
217
- <div class="border rounded-lg p-2 text-center cursor-pointer hover:bg-purple-50">
218
- <i class="fas fa-tshirt text-xl mb-1"></i>
219
- <p class="text-sm">Mode</p>
220
  </div>
221
- <div class="border rounded-lg p-2 text-center cursor-pointer hover:bg-purple-50">
222
- <i class="fas fa-home text-xl mb-1"></i>
223
- <p class="text-sm">Maison</p>
 
 
 
 
 
 
224
  </div>
225
- <div class="border rounded-lg p-2 text-center cursor-pointer hover:bg-purple-50">
226
- <i class="fas fa-book text-xl mb-1"></i>
227
- <p class="text-sm">Livres</p>
 
 
 
 
 
 
228
  </div>
229
  </div>
 
 
 
 
230
  </div>
231
 
232
- <div class="mt-4">
233
- <h3 class="font-semibold mb-2">Exemple de lien d'affiliation</h3>
234
- <div class="bg-gray-100 p-3 rounded-lg text-sm overflow-x-auto">
235
- https://www.example.com/?ref=<span class="font-bold">votreID</span>&product=12345
 
 
236
  </div>
237
  </div>
238
  </div>
239
-
240
- <div class="flex justify-end mt-6">
241
- <button onclick="saveAffiliateSettings()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-6 rounded-lg transition">
242
- Enregistrer
243
- </button>
244
- </div>
245
  </div>
 
246
 
247
- <!-- Premium Content Settings Panel (Hidden by default) -->
248
- <div id="premium-settings" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8">
249
- <div class="flex justify-between items-center mb-4">
250
- <h2 class="text-xl font-bold text-green-800">Configuration du Contenu Premium</h2>
251
- <button onclick="togglePremiumSettings()" class="text-gray-500 hover:text-gray-700">
252
- <i class="fas fa-times"></i>
253
- </button>
254
  </div>
255
-
256
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
257
  <div>
258
- <h3 class="font-semibold mb-3">Options d'abonnement</h3>
 
 
 
 
 
 
 
 
 
 
259
 
260
- <div class="space-y-4">
261
- <div class="border rounded-lg p-4 hover:border-green-500 transition">
262
- <div class="flex justify-between items-start">
263
- <div>
264
- <h4 class="font-bold">Basique</h4>
265
- <p class="text-sm text-gray-600">Accès limité</p>
266
- </div>
267
- <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">€4.99/mois</span>
268
  </div>
269
- <div class="mt-3">
270
- <label class="flex items-center">
271
- <input type="radio" name="premium-tier" class="form-radio h-4 w-4 text-green-600" checked>
272
- <span class="ml-2">Sélectionner</span>
273
- </label>
274
  </div>
275
  </div>
276
-
277
- <div class="border rounded-lg p-4 hover:border-green-500 transition">
278
- <div class="flex justify-between items-start">
279
- <div>
280
- <h4 class="font-bold">Pro</h4>
281
- <p class="text-sm text-gray-600">Accès complet</p>
282
- </div>
283
- <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">€9.99/mois</span>
284
  </div>
285
- <div class="mt-3">
286
- <label class="flex items-center">
287
- <input type="radio" name="premium-tier" class="form-radio h-4 w-4 text-green-600">
288
- <span class="ml-2">Sélectionner</span>
289
- </label>
290
  </div>
291
  </div>
292
  </div>
293
  </div>
294
 
295
- <div>
296
- <h3 class="font-semibold mb-3">Contenu premium</h3>
297
-
298
- <div class="space-y-3">
299
- <label class="flex items-center">
300
- <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600" checked>
301
- <span class="ml-2">Articles exclusifs</span>
302
- </label>
303
- <label class="flex items-center">
304
- <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600" checked>
305
- <span class="ml-2">Vidéos premium</span>
306
- </label>
307
- <label class="flex items-center">
308
- <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600">
309
- <span class="ml-2">Téléchargements</span>
310
- </label>
311
- <label class="flex items-center">
312
- <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600">
313
- <span class="ml-2">Support prioritaire</span>
314
- </label>
 
 
 
 
 
 
 
315
  </div>
316
-
317
- <div class="mt-6">
318
- <h3 class="font-semibold mb-2">Exemple de badge premium</h3>
319
- <div class="inline-flex items-center bg-gradient-to-r from-green-500 to-green-600 text-white px-3 py-1 rounded-full text-sm premium-badge">
320
- <i class="fas fa-crown mr-1"></i>
321
- <span>Premium</span>
322
  </div>
323
  </div>
324
  </div>
325
  </div>
326
-
327
- <div class="flex justify-end mt-6">
328
- <button onclick="savePremiumSettings()" class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg transition">
329
- Enregistrer
330
- </button>
331
- </div>
332
  </div>
 
333
 
334
- <!-- Analytics Section -->
335
- <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
336
- <h2 class="text-xl font-bold mb-4">Analytiques de Monétisation</h2>
337
-
338
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
339
- <div class="bg-blue-50 p-4 rounded-lg">
340
- <div class="flex justify-between items-center">
341
- <div>
342
- <p class="text-sm text-blue-800">Vues aujourd'hui</p>
343
- <p class="text-2xl font-bold">1,248</p>
 
 
 
 
 
 
344
  </div>
345
- <i class="fas fa-eye text-blue-500 text-xl"></i>
346
  </div>
347
- <div class="mt-2 h-1 bg-blue-200 rounded-full">
348
- <div class="h-1 bg-blue-500 rounded-full" style="width: 65%"></div>
 
 
 
 
 
349
  </div>
350
  </div>
351
-
352
- <div class="bg-purple-50 p-4 rounded-lg">
353
- <div class="flex justify-between items-center">
354
- <div>
355
- <p class="text-sm text-purple-800">Clics affiliés</p>
356
- <p class="text-2xl font-bold">42</p>
 
 
357
  </div>
358
- <i class="fas fa-mouse-pointer text-purple-500 text-xl"></i>
359
  </div>
360
- <div class="mt-2 h-1 bg-purple-200 rounded-full">
361
- <div class="h-1 bg-purple-500 rounded-full" style="width: 28%"></div>
 
 
 
 
 
362
  </div>
363
  </div>
364
-
365
- <div class="bg-green-50 p-4 rounded-lg">
366
- <div class="flex justify-between items-center">
367
- <div>
368
- <p class="text-sm text-green-800">Abonnés premium</p>
369
- <p class="text-2xl font-bold">17</p>
 
 
370
  </div>
371
- <i class="fas fa-user-plus text-green-500 text-xl"></i>
372
  </div>
373
- <div class="mt-2 h-1 bg-green-200 rounded-full">
374
- <div class="h-1 bg-green-500 rounded-full" style="width: 17%"></div>
 
 
 
 
 
375
  </div>
376
  </div>
377
  </div>
378
-
379
- <div class="bg-gray-50 p-4 rounded-lg">
380
- <h3 class="font-semibold mb-3">Projection des revenus</h3>
381
- <div class="h-64">
382
- <!-- Graph placeholder - in a real app, you would use a chart library like Chart.js -->
383
- <div class="bg-white border border-gray-200 rounded-lg p-4 h-full flex items-center justify-center text-gray-400">
384
- Graphique des revenus au fil du temps
 
 
 
 
 
 
 
 
 
 
 
 
385
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
386
  </div>
387
  </div>
388
  </div>
 
389
 
390
- <!-- Integration Guide -->
391
- <div class="bg-white rounded-xl shadow-lg p-6">
392
- <h2 class="text-xl font-bold mb-4">Guide d'Intégration</h2>
393
-
394
- <div class="space-y-4">
395
- <div class="border-l-4 border-blue-500 pl-4 py-1">
396
- <h3 class="font-semibold">1. Intégration des publicités</h3>
397
- <p class="text-sm text-gray-600 mt-1">Copiez ce code dans le &lt;head&gt; de votre site :</p>
398
- <div class="bg-gray-800 text-gray-100 p-3 rounded-lg text-sm mt-2 overflow-x-auto">
399
- <pre>&lt;script src="https://monetisation-system.com/ads.js?id=VOTRE_ID"&gt;&lt;/script&gt;</pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
400
  </div>
401
  </div>
402
 
403
- <div class="border-l-4 border-purple-500 pl-4 py-1">
404
- <h3 class="font-semibold">2. Liens d'affiliation</h3>
405
- <p class="text-sm text-gray-600 mt-1">Utilisez cette structure pour vos liens :</p>
406
- <div class="bg-gray-800 text-gray-100 p-3 rounded-lg text-sm mt-2 overflow-x-auto">
407
- <pre>&lt;a href="https://affiliate.example.com?ref=VOTRE_ID" class="affiliate-link"&gt;Produit recommandé&lt;/a&gt;</pre>
408
- </div>
 
 
409
  </div>
410
 
411
- <div class="border-l-4 border-green-500 pl-4 py-1">
412
- <h3 class="font-semibold">3. Contenu premium</h3>
413
- <p class="text-sm text-gray-600 mt-1">Entourez votre contenu premium avec :</p>
414
- <div class="bg-gray-800 text-gray-100 p-3 rounded-lg text-sm mt-2 overflow-x-auto">
415
- <pre>&lt;div class="premium-content"&gt;
416
- &lt;p&gt;Ce contenu est réservé aux abonnés premium.&lt;/p&gt;
417
- &lt;button class="subscribe-button"&gt;Devenir Premium&lt;/button&gt;
418
- &lt;/div&gt;</pre>
419
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
420
  </div>
421
  </div>
422
 
423
- <div class="mt-6 bg-blue-50 p-4 rounded-lg flex items-start">
424
- <i class="fas fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
425
- <div>
426
- <h3 class="font-semibold text-blue-800">Conseil de monétisation</h3>
427
- <p class="text-sm text-blue-700 mt-1">Pour maximiser vos revenus, combinez plusieurs méthodes de monétisation et testez différents emplacements pour vos publicités et liens d'affiliation.</p>
 
428
  </div>
429
  </div>
430
  </div>
431
- </div>
432
 
433
  <script>
434
- // Simulation de données de monétisation
435
- let earnings = {
436
- ads: 0,
437
- affiliate: 0,
438
- premium: 0
439
- };
440
-
441
- // Fonctions pour basculer les panels de configuration
442
- function toggleAdSettings() {
443
- document.getElementById('ad-settings').classList.toggle('hidden');
444
- }
445
-
446
- function toggleAffiliateSettings() {
447
- document.getElementById('affiliate-settings').classList.toggle('hidden');
448
- }
449
-
450
- function togglePremiumSettings() {
451
- document.getElementById('premium-settings').classList.toggle('hidden');
452
- }
453
-
454
- // Fonctions pour sauvegarder les configurations (simulées)
455
- function saveAdSettings() {
456
- toggleAdSettings();
457
- simulateEarnings('ads');
458
- showNotification('Configuration des publicités enregistrée avec succès!', 'blue');
459
- }
460
-
461
- function saveAffiliateSettings() {
462
- toggleAffiliateSettings();
463
- simulateEarnings('affiliate');
464
- showNotification('Configuration d\'affiliation enregistrée avec succès!', 'purple');
465
- }
466
-
467
- function savePremiumSettings() {
468
- togglePremiumSettings();
469
- simulateEarnings('premium');
470
- showNotification('Configuration premium enregistrée avec succès!', 'green');
471
- }
472
-
473
- // Simulation de revenus progressifs
474
- function simulateEarnings(type) {
475
- const intervals = {
476
- ads: setInterval(() => {
477
- earnings.ads += Math.random() * 0.5;
478
- updateEarningsDisplay();
479
- }, 3000),
480
- affiliate: setInterval(() => {
481
- earnings.affiliate += Math.random() * 0.2;
482
- updateEarningsDisplay();
483
- }, 5000),
484
- premium: setInterval(() => {
485
- earnings.premium += Math.random() * 1.5;
486
- updateEarningsDisplay();
487
- }, 10000)
488
  };
489
-
490
- // Arrêter la simulation après un certain temps pour cet exemple
491
- setTimeout(() => {
492
- clearInterval(intervals[type]);
493
- }, 60000);
494
- }
495
-
496
- // Mise à jour de l'affichage des revenus
497
- function updateEarningsDisplay() {
498
- document.getElementById('ad-earnings').textContent = earnings.ads.toFixed(2);
499
- document.getElementById('affiliate-earnings').textContent = earnings.affiliate.toFixed(2);
500
- document.getElementById('premium-earnings').textContent = earnings.premium.toFixed(2);
501
 
502
- // Calcul du total
503
- const total = earnings.ads + earnings.affiliate + earnings.premium;
504
- document.getElementById('total-earnings').textContent = total.toFixed(2);
 
 
 
505
 
506
- // Mise à jour des barres de progression
507
- updateProgressBars();
508
- }
509
-
510
- // Mise à jour des barres de progression
511
- function updateProgressBars() {
512
- const adProgress = Math.min(earnings.ads / 50 * 100, 100);
513
- const affiliateProgress = Math.min(earnings.affiliate / 20 * 100, 100);
514
- const premiumProgress = Math.min(earnings.premium / 150 * 100, 100);
515
 
516
- document.getElementById('ad-progress').style.width = `${adProgress}%`;
517
- document.getElementById('affiliate-progress').style.width = `${affiliateProgress}%`;
518
- document.getElementById('premium-progress').style.width = `${premiumProgress}%`;
519
- }
520
-
521
- // Fonction pour afficher des notifications
522
- function showNotification(message, color) {
523
- const colors = {
524
- blue: 'bg-blue-100 border-blue-400 text-blue-700',
525
- purple: 'bg-purple-100 border-purple-400 text-purple-700',
526
- green: 'bg-green-100 border-green-400 text-green-700'
527
- };
528
-
529
- const notification = document.createElement('div');
530
- notification.className = `fixed top-4 right-4 border-l-4 ${colors[color]} p-4 rounded-lg shadow-lg max-w-xs z-50 animate-fade-in`;
531
- notification.innerHTML = `
532
- <div class="flex items-start">
533
- <div class="flex-shrink-0">
534
- <i class="fas fa-check-circle text-${color}-500"></i>
535
- </div>
536
- <div class="ml-3">
537
- <p class="text-sm">${message}</p>
538
- </div>
539
- </div>
540
- `;
541
 
542
- document.body.appendChild(notification);
 
 
 
 
 
 
543
 
 
544
  setTimeout(() => {
545
- notification.classList.add('animate-fade-out');
 
 
 
 
 
 
 
 
 
 
 
546
  setTimeout(() => {
547
- notification.remove();
548
- }, 500);
 
 
 
549
  }, 3000);
550
- }
551
-
552
- // Démarrer la simulation au chargement de la page
553
- window.onload = function() {
554
- // Démarrer toutes les simulations
555
- simulateEarnings('ads');
556
- simulateEarnings('affiliate');
557
- simulateEarnings('premium');
558
-
559
- // Ajouter des styles d'animation
560
- const style = document.createElement('style');
561
- style.textContent = `
562
- @keyframes animate-fade-in {
563
- from { opacity: 0; transform: translateX(20px); }
564
- to { opacity: 1; transform: translateX(0); }
565
- }
566
- @keyframes animate-fade-out {
567
- from { opacity: 1; transform: translateX(0); }
568
- to { opacity: 0; transform: translateX(20px); }
569
- }
570
- .animate-fade-in { animation: animate-fade-in 0.3s forwards; }
571
- .animate-fade-out { animation: animate-fade-out 0.3s forwards; }
572
- `;
573
- document.head.appendChild(style);
574
- };
575
  </script>
576
  <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>
577
  </html>
 
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
  </style>
41
  </head>
42
+ <body class="font-sans bg-gray-50">
43
+ <!-- Hero Section -->
44
+ <div class="gradient-bg text-white">
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">
59
+ <div class="flex -space-x-2">
60
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
61
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/43.jpg" alt="">
62
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="">
63
+ </div>
64
+ <p class="ml-4 text-sm opacity-90">Rejoint par <span class="font-bold">850+</span> propriétaires de sites</p>
65
  </div>
66
  </div>
67
+ <div class="md:w-1/2 relative">
68
+ <div class="floating">
69
+ <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Monétisation automatique" class="w-full max-w-lg mx-auto">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </div>
 
 
 
 
 
 
 
71
  </div>
72
  </div>
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>
262
  </div>
 
 
 
 
 
 
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>
457
+ </div>
458
+
459
+ <!-- Footer -->
460
+ <footer class="bg-gray-800 text-gray-300 py-12">
461
+ <div class="container mx-auto px-6">
462
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
463
+ <div>
464
+ <h3 class="text-white text-lg font-bold mb-4">Monétisation Auto</h3>
465
+ <p class="mb-4">Le système automatique de monétisation le plus avancé pour les propriétaires de sites web.</p>
466
+ <div class="flex space-x-4">
467
+ <a href="#" class="text-gray-400 hover:text-white">
468
+ <i class="fab fa-facebook-f"></i>
469
+ </a>
470
+ <a href="#" class="text-gray-400 hover:text-white">
471
+ <i class="fab fa-twitter"></i>
472
+ </a>
473
+ <a href="#" class="text-gray-400 hover:text-white">
474
+ <i class="fab fa-linkedin-in"></i>
475
+ </a>
476
  </div>
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
+
499
+ <div>
500
+ <h3 class="text-white text-lg font-bold mb-4">Contact</h3>
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>[email protected]</span>
505
+ </li>
506
+ <li class="flex items-center">
507
+ <i class="fas fa-phone-alt mr-2 text-purple-400"></i>
508
+ <span>+33 1 23 45 67 89</span>
509
+ </li>
510
+ <li class="flex items-center">
511
+ <i class="fas fa-map-marker-alt mr-2 text-purple-400"></i>
512
+ <span>Paris, France</span>
513
+ </li>
514
+ </ul>
515
  </div>
516
  </div>
517
 
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>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- je veux un systeme automaique pour monetisé un site
 
 
1
+ je veux un systeme automaique pour monetisé un site
2
+ creer un site tres atractif avec systeme automatique pour monetiséé mon site