Hugging Face's logo

Spaces:
docto41
/
mon-tisation
Running

App Files Community
docto41 commited on
Commit
a8057c6
·
verified ·
1 Parent(s): f1a6463

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +577 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mon Tisation
3
- emoji: 🏆
4
- colorFrom: indigo
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mon-tisation
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,577 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>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>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux un systeme automaique pour monetisé un site