Hugging Face's logo

Spaces:
docto41
/
ia-boot
Running

App Files Community
docto41 commited on
Commit
9f3a75d
·
verified ·
1 Parent(s): 3e13fd1

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +289 -858
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,940 +3,371 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mega AI Market - La plus grande plateforme d'IA au monde</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  :root {
12
- --primary: #3b82f6;
13
- --secondary: #8b5cf6;
14
- --accent: #10b981;
15
- --dark: #1e293b;
16
- --light: #f8fafc;
17
  }
18
 
19
  body {
20
- background: radial-gradient(circle at center, #0f172a, #1e293b);
21
  color: var(--light);
22
- min-height: 100vh;
23
- font-family: 'Segoe UI', system-ui, sans-serif;
24
  }
25
 
26
- .neon-text {
27
- text-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
28
  }
29
 
30
- .neon-card {
31
- box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
32
- transition: all 0.3s ease;
33
- background: rgba(30, 41, 59, 0.7);
34
- backdrop-filter: blur(10px);
35
- border: 1px solid rgba(59, 130, 246, 0.2);
36
  }
37
 
38
- .neon-card:hover {
39
- transform: translateY(-5px);
40
- box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
41
- border-color: rgba(59, 130, 246, 0.4);
42
  }
43
 
44
- .glow-button {
45
- position: relative;
46
- overflow: hidden;
47
  }
48
 
49
- .glow-button::before {
50
- content: '';
51
- position: absolute;
52
- top: -50%;
53
- left: -50%;
54
- width: 200%;
55
- height: 200%;
56
- background: linear-gradient(
57
- 45deg,
58
- transparent,
59
- rgba(255, 255, 255, 0.1),
60
- transparent
61
- );
62
- transform: rotate(45deg);
63
- animation: shine 3s infinite;
64
- }
65
-
66
- @keyframes shine {
67
- 0% { transform: rotate(45deg) translate(-30%, -30%); }
68
- 100% { transform: rotate(45deg) translate(30%, 30%); }
69
- }
70
-
71
- .grid-ai {
72
- display: grid;
73
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
74
- gap: 1.5rem;
75
- }
76
-
77
- .dashboard-grid {
78
- display: grid;
79
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
80
- gap: 1.5rem;
81
- }
82
-
83
- .holographic-effect {
84
- position: relative;
85
- }
86
-
87
- .holographic-effect::after {
88
- content: '';
89
- position: absolute;
90
- top: 0;
91
- left: 0;
92
- right: 0;
93
- bottom: 0;
94
- background: linear-gradient(
95
- 135deg,
96
- rgba(59, 130, 246, 0.1) 0%,
97
- rgba(139, 92, 246, 0.1) 50%,
98
- rgba(16, 185, 129, 0.1) 100%
99
- );
100
- z-index: -1;
101
- border-radius: inherit;
102
- }
103
-
104
- .cyber-font {
105
- font-family: 'Orbitron', 'Arial Narrow', sans-serif;
106
- letter-spacing: 1px;
107
- }
108
-
109
- .pulse {
110
- animation: pulse 2s infinite;
111
- }
112
-
113
- @keyframes pulse {
114
- 0%, 100% { transform: scale(1); }
115
- 50% { transform: scale(1.05); }
116
  }
117
  </style>
118
  </head>
119
  <body class="min-h-screen">
120
- <!-- Navigation futuriste -->
121
- <nav class="fixed w-full z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-700">
122
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
123
- <div class="flex items-center justify-between h-16">
124
- <div class="flex items-center">
125
- <div class="flex-shrink-0">
126
- <span class="text-xl font-bold neon-text cyber-font">MEGA AI MARKET</span>
127
- </div>
128
- <div class="hidden md:block">
129
- <div class="ml-10 flex items-baseline space-x-4">
130
- <a href="#ai-assistants" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition-all">Assistants IA</a>
131
- <a href="#dashboard" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition-all">Tableau de bord</a>
132
- <a href="#cart" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition-all">Panier</a>
133
- </div>
134
- </div>
135
  </div>
136
- <div class="hidden md:block">
137
- <div class="ml-4 flex items-center md:ml-6">
138
- <button id="user-menu" class="p-1 rounded-full text-gray-300 hover:text-white focus:outline-none">
139
- <span class="sr-only">Menu utilisateur</span>
140
- <i class="fas fa-user-circle text-2xl"></i>
141
- <span id="user-status" class="ml-2 text-sm hidden md:inline">Non connecté</span>
142
- </button>
143
- </div>
144
- </div>
145
- <div class="-mr-2 flex md:hidden">
146
- <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-300 hover:text-white focus:outline-none">
147
- <span class="sr-only">Menu principal</span>
148
- <i class="fas fa-bars"></i>
149
  </button>
150
  </div>
151
- </div>
152
- </div>
153
-
154
- <!-- Mobile menu -->
155
- <div id="mobile-menu" class="hidden md:hidden">
156
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
157
- <a href="#ai-assistants" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Assistants IA</a>
158
- <a href="#dashboard" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Tableau de bord</a>
159
- <a href="#cart" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Panier</a>
160
- </div>
161
- <div class="pt-4 pb-3 border-t border-gray-700">
162
- <div class="flex items-center px-5">
163
- <div class="flex-shrink-0">
164
- <i class="fas fa-user-circle text-2xl"></i>
165
- </div>
166
- <div class="ml-3">
167
- <div id="mobile-user-status" class="text-base font-medium">Non connecté</div>
168
- </div>
169
  </div>
170
- <div class="mt-3 px-2 space-y-1">
171
- <a href="#" id="mobile-login-btn" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Connexion</a>
172
- <a href="#" id="mobile-logout-btn" class="hidden block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Déconnexion</a>
173
  </div>
174
  </div>
175
  </div>
176
  </nav>
177
 
178
- <!-- Login Modal futuriste -->
179
- <div id="login-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
180
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
181
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
182
- <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
 
 
 
 
 
 
183
  </div>
184
- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
185
- <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full neon-card">
186
- <div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
187
- <div class="sm:flex sm:items-start">
188
- <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-500/20 sm:mx-0 sm:h-10 sm:w-10">
189
- <i class="fas fa-sign-in-alt text-blue-400"></i>
190
- </div>
191
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
192
- <h3 class="text-lg leading-6 font-medium text-white cyber-font" id="modal-title">
193
- CONNEXION ADMIN
194
- </h3>
195
- <div class="mt-2">
196
- <p class="text-sm text-gray-300">
197
- Accédez au tableau de bord administrateur
198
- </p>
199
- <form class="mt-4 space-y-4">
200
- <div>
201
- <label for="login-email" class="block text-sm font-medium text-gray-300">Email</label>
202
- <input type="email" id="login-email" name="email" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-600 rounded-md p-2 bg-gray-700 text-white border">
203
- </div>
204
- <div>
205
- <label for="login-password" class="block text-sm font-medium text-gray-300">Mot de passe</label>
206
- <input type="password" id="login-password" name="password" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-600 rounded-md p-2 bg-gray-700 text-white border">
207
- </div>
208
- </form>
209
- </div>
210
- </div>
211
- </div>
212
- </div>
213
- <div class="bg-gray-700/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
214
- <button type="button" id="confirm-login" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 glow-button sm:ml-3 sm:w-auto sm:text-sm">
215
- <i class="fas fa-fingerprint mr-2"></i> Authentifier
216
- </button>
217
- <button type="button" id="cancel-login" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-700 text-base font-medium text-gray-300 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
218
- Annuler
219
- </button>
220
- </div>
221
  </div>
222
  </div>
223
- </div>
224
 
225
- <!-- Subscription Modal futuriste -->
226
- <div id="subscribe-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
227
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
228
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
229
- <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
230
- </div>
231
- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
232
- <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full neon-card">
233
- <div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
234
- <div class="sm:flex sm:items-start">
235
- <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-500/20 sm:mx-0 sm:h-10 sm:w-10">
236
- <i class="fas fa-crown text-purple-400"></i>
237
- </div>
238
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
239
- <h3 class="text-lg leading-6 font-medium text-white cyber-font" id="modal-title">
240
- ABONNEMENT PREMIUM
241
- </h3>
242
- <div class="mt-2">
243
- <p class="text-sm text-gray-300">
244
- Débloquez l'accès à nos 990099 assistants IA
245
- </p>
246
- <div class="mt-4 grid grid-cols-1 gap-4">
247
- <div class="border border-gray-700 rounded-lg p-4 hover:border-blue-500 transition-all neon-card">
248
- <div class="flex items-center">
249
- <input id="monthly-plan" name="subscription-plan" type="radio" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600 bg-gray-700">
250
- <label for="monthly-plan" class="ml-3 block">
251
- <span class="font-medium text-white">Abonnement Mensuel</span>
252
- <span class="block text-sm text-gray-300">49.99€/mois - Accès illimité</span>
253
- </label>
254
- </div>
255
- </div>
256
- <div class="border border-gray-700 rounded-lg p-4 hover:border-purple-500 transition-all neon-card">
257
- <div class="flex items-center">
258
- <input id="yearly-plan" name="subscription-plan" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-600 bg-gray-700">
259
- <label for="yearly-plan" class="ml-3 block">
260
- <span class="font-medium text-white">Abonnement Annuel</span>
261
- <span class="block text-sm text-gray-300">499.99€/an (41.66€/mois) - Économisez 20%</span>
262
- </label>
263
- </div>
264
- </div>
265
- </div>
266
- </div>
267
- </div>
268
  </div>
269
  </div>
270
- <div class="bg-gray-700/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
271
- <button type="button" id="confirm-subscribe" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 glow-button sm:ml-3 sm:w-auto sm:text-sm">
272
- <i class="fas fa-lock-open mr-2"></i> S'abonner
273
- </button>
274
- <button type="button" id="cancel-subscribe" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-700 text-base font-medium text-gray-300 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
275
- Annuler
276
- </button>
277
- </div>
278
- </div>
279
- </div>
280
- </div>
281
 
282
- <!-- Hero Section futuriste -->
283
- <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8">
284
- <div class="max-w-7xl mx-auto">
285
- <div class="text-center">
286
- <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl cyber-font neon-text">
287
- <span class="block">MEGA AI MARKET</span>
288
- <span class="block text-blue-400">990,099 ASSISTANTS IA</span>
289
- </h1>
290
- <p class="mt-3 max-w-md mx-auto text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
291
- La plus grande plateforme d'intelligence artificielle au monde couvrant tous les domaines de services.
292
- </p>
293
- <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
294
- <div class="rounded-md shadow">
295
- <button id="subscribe-btn" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition-all pulse">
296
- <i class="fas fa-crown mr-2"></i> S'abonner Maintenant
297
- </button>
298
- </div>
299
- <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
300
- <a href="#ai-assistants" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 transition-all">
301
- <i class="fas fa-robot mr-2"></i> Explorer les IA
302
- </a>
303
  </div>
304
  </div>
305
- </div>
306
- </div>
307
- </div>
308
 
309
- <!-- AI Assistants Section -->
310
- <section id="ai-assistants" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
311
- <div class="text-center mb-12">
312
- <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl cyber-font neon-text">
313
- NOS ASSISTANTS IA
314
- </h2>
315
- <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4">
316
- Choisissez parmi nos 990,099 intelligences artificielles spécialisées
317
- </p>
318
- </div>
319
-
320
- <div class="grid-ai" id="ai-container">
321
- <!-- AI assistants will be dynamically loaded here -->
322
- </div>
323
-
324
- <div class="mt-12 text-center">
325
- <button id="load-more-ai" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-all glow-button">
326
- <i class="fas fa-plus-circle mr-2"></i> Charger plus d'IA
327
- </button>
328
- </div>
329
- </section>
330
-
331
- <!-- Dashboard Section futuriste -->
332
- <section id="dashboard" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto mt-12">
333
- <div class="bg-gray-800/50 rounded-xl p-8 neon-card">
334
- <div class="text-center mb-12">
335
- <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl cyber-font neon-text">
336
- TABLEAU DE BORD ADMIN
337
- </h2>
338
- <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-300 sm:mt-4">
339
- Gérez vos paiements et vos abonnements
340
- </p>
341
- </div>
342
-
343
- <div class="dashboard-grid">
344
- <!-- Payment Methods -->
345
- <div class="bg-gray-800/30 rounded-lg p-6 neon-card">
346
- <h3 class="text-xl font-semibold mb-4 cyber-font text-blue-400">MÉTHODES DE PAIEMENT</h3>
347
-
348
- <div class="space-y-4">
349
- <div class="flex items-center justify-between p-4 bg-gray-800/50 rounded-lg neon-card">
350
- <div class="flex items-center">
351
- <i class="fab fa-cc-paypal text-3xl text-blue-500 mr-3"></i>
352
- <div>
353
- <h4 class="font-medium">PayPal</h4>
354
- <p class="text-sm text-gray-300">Paiements sécurisés via PayPal</p>
355
- <p class="text-xs text-blue-300 mt-1">[email protected]</p>
356
- </div>
357
- </div>
358
- <button onclick="window.open('https://www.paypal.com/paypalme/vgpbavol', '_blank')" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-all glow-button">
359
- <i class="fab fa-cc-paypal mr-2"></i> Payer
360
- </button>
361
- </div>
362
-
363
- <div class="flex items-center justify-between p-4 bg-gray-800/50 rounded-lg neon-card">
364
- <div class="flex items-center">
365
- <i class="fab fa-cc-stripe text-3xl text-purple-500 mr-3"></i>
366
- <div>
367
- <h4 class="font-medium">Stripe</h4>
368
- <p class="text-sm text-gray-300">Paiements par carte bancaire</p>
369
- <p class="text-xs text-purple-300 mt-1">[email protected]</p>
370
- </div>
371
- </div>
372
- <button onclick="window.open('https://buy.stripe.com/test_14k6rD5JZ3mD4OQ6oo', '_blank')" class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 transition-all glow-button">
373
- <i class="fab fa-cc-stripe mr-2"></i> Payer
374
- </button>
375
- </div>
376
  </div>
377
  </div>
 
378
 
379
- <!-- Payment Stats -->
380
- <div class="bg-gray-800/30 rounded-lg p-6 neon-card">
381
- <h3 class="text-xl font-semibold mb-4 cyber-font text-purple-400">STATISTIQUES</h3>
382
-
383
- <div class="grid grid-cols-2 gap-4 mb-6">
384
- <div class="bg-gray-800/50 p-4 rounded-lg neon-card">
385
- <p class="text-sm text-gray-300">Revenus Totaux</p>
386
- <p class="text-2xl font-bold text-blue-400" id="total-revenue">2,845.50€</p>
387
- </div>
388
- <div class="bg-gray-800/50 p-4 rounded-lg neon-card">
389
- <p class="text-sm text-gray-300">Paiements ce mois</p>
390
- <p class="text-2xl font-bold text-purple-400" id="monthly-revenue">725.97€</p>
391
- </div>
392
  </div>
393
-
394
- <canvas id="paymentChart" height="200" class="w-full"></canvas>
395
- </div>
396
- </div>
397
-
398
- <!-- Recent Payments -->
399
- <div class="mt-8 bg-gray-800/30 rounded-lg p-6 neon-card">
400
- <h3 class="text-xl font-semibold mb-4 cyber-font text-green-400">PAIEMENTS RÉCENTS</h3>
401
-
402
- <div class="overflow-x-auto">
403
- <table class="min-w-full divide-y divide-gray-700">
404
- <thead class="bg-gray-800/50">
405
- <tr>
406
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date</th>
407
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Service</th>
408
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Montant</th>
409
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Méthode</th>
410
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Statut</th>
411
- </tr>
412
- </thead>
413
- <tbody class="bg-gray-800/20 divide-y divide-gray-700" id="recent-payments">
414
- <!-- Payments will be loaded here -->
415
- </tbody>
416
- </table>
417
- </div>
418
- </div>
419
- </div>
420
- </section>
421
-
422
- <!-- Cart Section futuriste -->
423
- <section id="cart" class="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto mt-12">
424
- <div class="bg-gray-800/50 rounded-xl p-8 neon-card">
425
- <h2 class="text-3xl font-extrabold tracking-tight mb-8 cyber-font neon-text">
426
- <i class="fas fa-shopping-cart mr-3"></i> VOTRE PANIER
427
- </h2>
428
-
429
- <div id="cart-items" class="space-y-4">
430
- <!-- Cart items will be added here dynamically -->
431
- <p class="text-center text-gray-300" id="empty-cart-message">Votre panier est empty</p>
432
- </div>
433
-
434
- <div class="mt-8 border-t border-gray-700 pt-6">
435
- <div class="flex justify-between">
436
- <span class="text-xl font-medium text-gray-300">Total</span>
437
- <span id="cart-total" class="text-xl font-bold text-blue-400">0.00€</span>
438
- </div>
439
-
440
- <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
441
- <button onclick="window.open('https://www.paypal.com/paypalme/vgpbavol', '_blank')" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-all glow-button">
442
- <i class="fab fa-cc-paypal mr-2"></i> Payer avec PayPal
443
- </button>
444
- <button onclick="window.open('https://buy.stripe.com/test_14k6rD5JZ3mD4OQ6oo', '_blank')" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition-all glow-button">
445
- <i class="fab fa-cc-stripe mr-2"></i> Payer avec Stripe
446
- </button>
447
  </div>
448
- </div>
449
  </div>
450
- </section>
451
 
452
- <!-- Footer futuriste -->
453
- <footer class="bg-gray-900/80 mt-20 border-t border-gray-800">
454
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
455
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
456
- <div>
457
- <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-400">IA</h3>
458
- <ul class="mt-4 space-y-2">
459
- <li><a href="#" class="text-gray-300 hover:text-white">Tous les assistants</a></li>
460
- <li><a href="#" class="text-gray-300 hover:text-white">Nouveautés</a></li>
461
- <li><a href="#" class="text-gray-300 hover:text-white">Populaires</a></li>
462
- </ul>
463
- </div>
464
- <div>
465
- <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-400">Support</h3>
466
- <ul class="mt-4 space-y-2">
467
- <li><a href="#" class="text-gray-300 hover:text-white">Centre d'aide</a></li>
468
- <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
469
- <li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li>
470
- </ul>
471
- </div>
472
- <div>
473
- <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-400">Entreprise</h3>
474
- <ul class="mt-4 space-y-2">
475
- <li><a href="#" class="text-gray-300 hover:text-white">À propos</a></li>
476
- <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
477
- <li><a href="#" class="text-gray-300 hover:text-white">Carrières</a></li>
478
- </ul>
479
  </div>
480
- <div>
481
- <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-400">Légal</h3>
482
- <ul class="mt-4 space-y-2">
483
- <li><a href="#" class="text-gray-300 hover:text-white">Confidentialité</a></li>
484
- <li><a href="#" class="text-gray-300 hover:text-white">Conditions</a></li>
485
- <li><a href="#" class="text-gray-300 hover:text-white">Cookies</a></li>
486
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
487
  </div>
488
  </div>
489
- <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col items-center">
490
- <p class="text-gray-400 text-sm">
491
- &copy; 2023 Mega AI Market. Tous droits réservés.
492
- </p>
493
- <div class="mt-4 flex space-x-6">
494
- <a href="#" class="text-gray-400 hover:text-white">
495
- <i class="fab fa-facebook-f"></i>
496
- </a>
497
- <a href="#" class="text-gray-400 hover:text-white">
498
- <i class="fab fa-twitter"></i>
499
- </a>
500
- <a href="#" class="text-gray-400 hover:text-white">
501
- <i class="fab fa-instagram"></i>
502
- </a>
503
- <a href="#" class="text-gray-400 hover:text-white">
504
- <i class="fab fa-linkedin-in"></i>
505
- </a>
506
- </div>
507
  </div>
508
  </div>
509
  </footer>
510
 
511
  <script>
512
- // Admin accounts
513
- const adminAccounts = [
514
- { email: "[email protected]", password: "Admin270574@" },
515
- { email: "[email protected]", password: "Admin270574@" }
516
- ];
517
-
518
- // Sample AI assistants data (990,099 AIs)
519
- const allAIs = [];
520
- const categories = [
521
- "Médecine", "Finance", "Éducation", "Design",
522
- "Programmation", "Marketing", "Juridique", "Ressources Humaines",
523
- "Ingénierie", "Art", "Musique", "Écriture",
524
- "Traduction", "Recherche", "Sécurité", "Jeux"
525
- ];
526
- const prices = [9.99, 19.99, 29.99, 39.99, 49.99, 59.99, 69.99, 79.99, 89.99, 99.99];
527
- const icons = [
528
- "user-md", "chart-line", "graduation-cap", "paint-brush",
529
- "code", "bullhorn", "balance-scale", "users",
530
- "cogs", "palette", "music", "pen-fancy",
531
- "language", "search", "shield-alt", "gamepad"
532
- ];
533
-
534
- for (let i = 1; i <= 990099; i++) {
535
- allAIs.push({
536
- id: `ai-${i}`,
537
- name: `Assistant IA ${i}`,
538
- category: categories[i % categories.length],
539
- description: `Cet assistant IA spécialisé en ${categories[i % categories.length]} offre des services avancés avec une précision de 99.9%.`,
540
- price: prices[i % prices.length],
541
- icon: icons[i % icons.length],
542
- url: `https://ai-service.example.com/ai/${i}`
543
- });
544
- }
545
-
546
- // Current displayed AIs
547
- let displayedAIs = 0;
548
- const AIsPerLoad = 50;
549
-
550
- // Mobile menu toggle
551
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
552
- const menu = document.getElementById('mobile-menu');
553
- menu.classList.toggle('hidden');
554
- });
555
-
556
- // Login modal
557
- document.getElementById('user-menu').addEventListener('click', function() {
558
- if (localStorage.getItem('loggedIn')) {
559
- // Show user dropdown if logged in
560
- alert('Vous êtes déjà connecté');
561
- } else {
562
- document.getElementById('login-modal').classList.remove('hidden');
563
- }
564
- });
565
-
566
- document.getElementById('mobile-login-btn').addEventListener('click', function(e) {
567
- e.preventDefault();
568
- document.getElementById('login-modal').classList.remove('hidden');
569
- });
570
-
571
- document.getElementById('cancel-login').addEventListener('click', function() {
572
- document.getElementById('login-modal').classList.add('hidden');
573
- });
574
-
575
- document.getElementById('confirm-login').addEventListener('click', function() {
576
- const email = document.getElementById('login-email').value;
577
- const password = document.getElementById('login-password').value;
578
-
579
- if (!email || !password) {
580
- alert('Veuillez remplir tous les champs');
581
- return;
582
- }
583
-
584
- // Check if it's an admin account
585
- const isAdmin = adminAccounts.some(account =>
586
- account.email === email && account.password === password
587
- );
588
-
589
- if (isAdmin) {
590
- localStorage.setItem('loggedIn', 'true');
591
- localStorage.setItem('isAdmin', 'true');
592
- localStorage.setItem('userEmail', email);
593
-
594
- updateUserStatus();
595
- document.getElementById('login-modal').classList.add('hidden');
596
-
597
- alert('Bienvenue Administrateur! Vous avez accès à tous les assistants IA gratuitement.');
598
- } else {
599
- // For regular users, show subscription modal
600
- localStorage.setItem('loggedIn', 'true');
601
- localStorage.setItem('isAdmin', 'false');
602
- localStorage.setItem('userEmail', email);
603
-
604
- updateUserStatus();
605
- document.getElementById('login-modal').classList.add('hidden');
606
-
607
- // Show subscription modal for regular users
608
- document.getElementById('subscribe-modal').classList.remove('hidden');
609
- }
610
- });
611
-
612
- // Subscription modal
613
- document.getElementById('subscribe-btn').addEventListener('click', function() {
614
- if (!localStorage.getItem('loggedIn')) {
615
- document.getElementById('login-modal').classList.remove('hidden');
616
- } else if (localStorage.getItem('isAdmin') === 'true') {
617
- alert('Vous êtes administrateur, vous avez déjà accès à tous les assistants IA gratuitement.');
618
- } else {
619
- document.getElementById('subscribe-modal').classList.remove('hidden');
620
- }
621
- });
622
-
623
- document.getElementById('cancel-subscribe').addEventListener('click', function() {
624
- document.getElementById('subscribe-modal').classList.add('hidden');
625
- });
626
-
627
- document.getElementById('confirm-subscribe').addEventListener('click', function() {
628
- const plan = document.querySelector('input[name="subscription-plan"]:checked').id;
629
- const price = plan === 'monthly-plan' ? '49.99€/mois' : '499.99€/an';
630
-
631
- localStorage.setItem('subscribed', 'true');
632
- localStorage.setItem('subscriptionPlan', plan);
633
-
634
- document.getElementById('subscribe-modal').classList.add('hidden');
635
- alert(`Merci pour votre abonnement ${price}! Vous avez maintenant accès à tous les assistants IA.`);
636
-
637
- updateUserStatus();
638
- });
639
-
640
- // Logout functionality
641
- document.getElementById('mobile-logout-btn').addEventListener('click', function(e) {
642
- e.preventDefault();
643
- logout();
644
- });
645
-
646
- function logout() {
647
- localStorage.removeItem('loggedIn');
648
- localStorage.removeItem('isAdmin');
649
- localStorage.removeItem('userEmail');
650
- localStorage.removeItem('subscribed');
651
- localStorage.removeItem('subscriptionPlan');
652
-
653
- updateUserStatus();
654
-
655
- alert('Vous avez été déconnecté avec succès.');
656
- }
657
-
658
- function updateUserStatus() {
659
- const isLoggedIn = localStorage.getItem('loggedIn') === 'true';
660
- const isAdmin = localStorage.getItem('isAdmin') === 'true';
661
- const isSubscribed = localStorage.getItem('subscribed') === 'true';
662
- const userEmail = localStorage.getItem('userEmail');
663
-
664
- if (isLoggedIn) {
665
- let statusText = isAdmin ? 'Admin' : (isSubscribed ? 'Abonné' : 'Connecté');
666
- statusText += ` (${userEmail})`;
667
-
668
- document.getElementById('user-status').textContent = statusText;
669
- document.getElementById('user-status').classList.remove('hidden');
670
- document.getElementById('mobile-user-status').textContent = statusText;
671
-
672
- document.getElementById('mobile-login-btn').classList.add('hidden');
673
- document.getElementById('mobile-logout-btn').classList.remove('hidden');
674
- } else {
675
- document.getElementById('user-status').textContent = 'Non connecté';
676
- document.getElementById('mobile-user-status').textContent = 'Non connecté';
677
-
678
- document.getElementById('mobile-login-btn').classList.remove('hidden');
679
- document.getElementById('mobile-logout-btn').classList.add('hidden');
680
  }
681
- }
682
 
683
- // Cart functionality
684
- let cart = [];
685
-
686
- function addToCart(name, price, id) {
687
- // Check if user is logged in
688
- if (!localStorage.getItem('loggedIn')) {
689
- document.getElementById('login-modal').classList.remove('hidden');
690
- return;
691
- }
692
-
693
- // Check if user is admin (free access)
694
- if (localStorage.getItem('isAdmin') === 'true') {
695
- alert('En tant qu\'administrateur, vous avez accès gratuit à cet assistant IA.');
696
- return;
697
- }
698
-
699
- // Check if user is subscribed
700
- if (localStorage.getItem('subscribed') !== 'true') {
701
- document.getElementById('subscribe-modal').classList.remove('hidden');
702
- return;
703
- }
704
-
705
- const existingItem = cart.find(item => item.id === id);
706
-
707
- if (existingItem) {
708
- existingItem.quantity += 1;
709
- } else {
710
- cart.push({
711
- id,
712
- name,
713
- price,
714
- quantity: 1
715
- });
716
- }
717
-
718
- updateCartDisplay();
719
- }
720
-
721
- function removeFromCart(id) {
722
- cart = cart.filter(item => item.id !== id);
723
- updateCartDisplay();
724
- }
725
-
726
- function updateCartDisplay() {
727
- const cartItemsContainer = document.getElementById('cart-items');
728
- const emptyCartMessage = document.getElementById('empty-cart-message');
729
- const cartTotal = document.getElementById('cart-total');
730
-
731
- if (cart.length === 0) {
732
- emptyCartMessage.classList.remove('hidden');
733
- cartItemsContainer.innerHTML = '';
734
- cartTotal.textContent = '0.00€';
735
- return;
736
  }
737
 
738
- emptyCartMessage.classList.add('hidden');
739
-
740
- let itemsHTML = '';
741
- let total = 0;
742
-
743
- cart.forEach(item => {
744
- total += item.price * item.quantity;
745
-
746
- itemsHTML += `
747
- <div class="flex items-center justify-between p-4 bg-gray-800/50 rounded-lg neon-card">
748
- <div>
749
- <h4 class="font-medium">${item.name}</h4>
750
- <p class="text-sm text-gray-300">${item.price.toFixed(2)}€ x ${item.quantity}</p>
751
- </div>
752
- <div class="flex items-center">
753
- <span class="font-medium mr-4 text-blue-400">${(item.price * item.quantity).toFixed(2)}€</span>
754
- <button onclick="removeFromCart('${item.id}')" class="p-1 text-red-400 hover:text-red-300">
755
- <i class="fas fa-trash"></i>
756
- </button>
757
  </div>
758
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
759
  `;
 
 
 
 
 
 
 
760
  });
761
 
762
- cartItemsContainer.innerHTML = itemsHTML;
763
- cartTotal.textContent = total.toFixed(2) + '€';
764
  }
765
 
766
- function addRecentPayment(amount, method) {
767
- const payment = {
768
- date: new Date().toLocaleDateString('fr-FR'),
769
- service: cart.length > 1 ? `${cart.length} assistants IA` : cart[0].name,
770
- amount: amount.toFixed(2) + '€',
771
- method: method,
772
- status: 'Complété'
773
- };
774
-
775
- // Add to recent payments in dashboard
776
- const payments = JSON.parse(localStorage.getItem('recentPayments') || '[]');
777
- payments.unshift(payment);
778
- localStorage.setItem('recentPayments', JSON.stringify(payments));
779
-
780
- // Update dashboard
781
- updateDashboard();
782
- }
783
-
784
- function updateDashboard() {
785
- const payments = JSON.parse(localStorage.getItem('recentPayments') || '[]');
786
-
787
- // Update recent payments table
788
- const paymentsContainer = document.getElementById('recent-payments');
789
- paymentsContainer.innerHTML = '';
790
-
791
- payments.slice(0, 5).forEach(payment => {
792
- paymentsContainer.innerHTML += `
793
- <tr>
794
- <td class="px-6 py-4 whitespace-nowrap text-sm">${payment.date}</td>
795
- <td class="px-6 py-4 whitespace-nowrap text-sm">${payment.service}</td>
796
- <td class="px-6 py-4 whitespace-nowrap text-sm">${payment.amount}</td>
797
- <td class="px-6 py-4 whitespace-nowrap text-sm">
798
- <span class="flex items-center">
799
- <i class="fab fa-cc-${payment.method.toLowerCase()} text-${payment.method === 'PayPal' ? 'blue' : 'purple'}-400 mr-2"></i> ${payment.method}
800
- </span>
801
- </td>
802
- <td class="px-6 py-4 whitespace-nowrap text-sm">
803
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">
804
- ${payment.status}
805
- </span>
806
- </td>
807
- </tr>
808
- `;
809
  });
810
 
811
- // Update revenue stats
812
- const totalRevenue = payments.reduce((sum, payment) => sum + parseFloat(payment.amount), 0);
813
- const monthlyRevenue = payments
814
- .filter(p => new Date(p.date).getMonth() === new Date().getMonth())
815
- .reduce((sum, payment) => sum + parseFloat(payment.amount), 0);
816
-
817
- document.getElementById('total-revenue').textContent = totalRevenue.toFixed(2) + '€';
818
- document.getElementById('monthly-revenue').textContent = monthlyRevenue.toFixed(2) + '€';
819
- }
820
-
821
- // Load more AIs
822
- document.getElementById('load-more-ai').addEventListener('click', function() {
823
- loadAIs();
824
- });
825
-
826
- function loadAIs() {
827
- const aiContainer = document.getElementById('ai-container');
828
- const end = Math.min(displayedAIs + AIsPerLoad, allAIs.length);
829
-
830
- for (let i = displayedAIs; i < end; i++) {
831
- const ai = allAIs[i];
832
- aiContainer.innerHTML += `
833
- <div class="neon-card p-6 rounded-lg relative">
834
- <div class="flex items-center mb-4">
835
- <div class="flex-shrink-0 bg-blue-500/20 rounded-full p-3">
836
- <i class="fas fa-${ai.icon} text-blue-400"></i>
837
- </div>
838
- <div class="ml-4">
839
- <h3 class="text-lg font-medium text-white">${ai.name}</h3>
840
- <p class="text-sm text-blue-300">${ai.category}</p>
841
- </div>
842
- </div>
843
- <p class="text-gray-300 text-sm mb-4">${ai.description}</p>
844
- <div class="flex items-center justify-between">
845
- <span class="font-bold text-blue-400">${ai.price.toFixed(2)}€</span>
846
- <div class="flex space-x-2">
847
- <button onclick="addToCart('${ai.name}', ${ai.price}, '${ai.id}')" class="px-3 py-1 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700 transition-all ${localStorage.getItem('isAdmin') === 'true' ? 'hidden' : ''}">
848
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
849
- </button>
850
- <button onclick="window.open('${ai.url}', '_blank', 'width=800,height=600')" class="px-3 py-1 bg-gray-700 text-white text-xs font-medium rounded hover:bg-gray-600 transition-all">
851
- <i class="fas fa-external-link-alt mr-1"></i> Détails
852
- </button>
853
- <button onclick="window.open('${ai.url}', '_blank', 'width=800,height=600')" class="px-3 py-1 bg-green-600 text-white text-xs font-medium rounded hover:bg-green-700 transition-all ${localStorage.getItem('isAdmin') === 'true' ? '' : 'hidden'}">
854
- <i class="fas fa-unlock mr-1"></i> Accéder
855
- </button>
856
- </div>
857
- </div>
858
- </div>
859
- `;
860
- }
861
-
862
- displayedAIs = end;
863
-
864
- if (displayedAIs >= allAIs.length) {
865
- document.getElementById('load-more-ai').classList.add('hidden');
866
- }
867
- }
868
-
869
- // Initialize
870
- document.addEventListener('DOMContentLoaded', function() {
871
- // Initialize user status
872
- updateUserStatus();
873
 
874
- // Load initial AIs
875
- loadAIs();
 
 
876
 
877
- // Initialize payment chart
878
- const ctx = document.getElementById('paymentChart').getContext('2d');
879
- const chart = new Chart(ctx, {
880
- type: 'line',
881
- data: {
882
- labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
883
- datasets: [{
884
- label: 'Revenus (€)',
885
- data: [520, 750, 980, 1020, 1250, 1590],
886
- backgroundColor: 'rgba(59, 130, 246, 0.2)',
887
- borderColor: 'rgba(59, 130, 246, 1)',
888
- borderWidth: 2,
889
- tension: 0.4,
890
- fill: true
891
- }]
892
- },
893
- options: {
894
- responsive: true,
895
- plugins: {
896
- legend: {
897
- display: false
898
- }
899
- },
900
- scales: {
901
- y: {
902
- beginAtZero: true,
903
- grid: {
904
- color: 'rgba(255, 255, 255, 0.1)'
905
- },
906
- ticks: {
907
- color: 'rgba(255, 255, 255, 0.7)'
908
- }
909
- },
910
- x: {
911
- grid: {
912
- color: 'rgba(255, 255, 255, 0.1)'
913
- },
914
- ticks: {
915
- color: 'rgba(255, 255, 255, 0.7)'
916
- }
917
- }
918
- }
919
- }
920
  });
921
 
922
- // Update dashboard with any existing payments
923
- updateDashboard();
 
924
 
925
- // Automatically open all buttons in new windows
926
- document.querySelectorAll('button').forEach(button => {
927
- if (!button.onclick) {
928
- button.onclick = function() {
929
- window.open('https://ai-service.example.com', '_blank', 'width=800,height=600');
930
- };
931
- }
932
  });
933
 
934
- document.querySelectorAll('a').forEach(link => {
935
- if (!link.onclick && link.href && !link.href.startsWith('#')) {
936
- link.onclick = function(e) {
937
- e.preventDefault();
938
- window.open(link.href, '_blank', 'width=800,height=600');
939
- };
940
  }
941
  });
942
  });
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>StreamFlix - Films et Séries en Streaming</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
  :root {
11
+ --primary: #e50914;
12
+ --dark: #141414;
13
+ --light: #f5f5f1;
 
 
14
  }
15
 
16
  body {
17
+ background-color: var(--dark);
18
  color: var(--light);
19
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
20
  }
21
 
22
+ .hero-gradient {
23
+ background: linear-gradient(to top, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0.6) 60%, rgba(20, 20, 20, 0.3) 100%);
24
  }
25
 
26
+ .scroll-hide::-webkit-scrollbar {
27
+ display: none;
 
 
 
 
28
  }
29
 
30
+ .film-card:hover .play-icon {
31
+ opacity: 1;
32
+ transform: scale(1.1);
 
33
  }
34
 
35
+ .loading-spinner {
36
+ animation: spin 1s linear infinite;
 
37
  }
38
 
39
+ @keyframes spin {
40
+ 0% { transform: rotate(0deg); }
41
+ 100% { transform: rotate(360deg); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
  </style>
44
  </head>
45
  <body class="min-h-screen">
46
+ <!-- Navigation -->
47
+ <nav class="fixed w-full z-50 bg-gradient-to-b from-black to-transparent px-4 py-3">
48
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
49
+ <div class="flex items-center">
50
+ <span class="text-red-600 font-bold text-2xl mr-10">STREAMFLIX</span>
51
+ <div class="hidden md:flex space-x-6">
52
+ <a href="#" class="text-white hover:text-gray-300">Accueil</a>
53
+ <a href="#" class="text-white hover:text-gray-300">Séries</a>
54
+ <a href="#" class="text-white hover:text-gray-300">Films</a>
55
+ <a href="#" class="text-white hover:text-gray-300">Nouveautés</a>
56
+ <a href="#" class="text-white hover:text-gray-300">Ma liste</a>
 
 
 
 
57
  </div>
58
+ </div>
59
+ <div class="flex items-center space-x-4">
60
+ <div class="relative">
61
+ <input type="text" placeholder="Rechercher..." class="bg-black/70 text-white px-4 py-1 rounded border border-gray-600 focus:outline-none focus:border-white w-0 opacity-0 transition-all duration-300" id="search-input">
62
+ <button class="text-white" id="search-btn">
63
+ <i class="fas fa-search"></i>
 
 
 
 
 
 
 
64
  </button>
65
  </div>
66
+ <div class="hidden md:block text-white">
67
+ <i class="fas fa-bell"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  </div>
69
+ <div class="w-8 h-8 rounded bg-red-600 flex items-center justify-center text-white font-bold">
70
+ <i class="fas fa-user"></i>
 
71
  </div>
72
  </div>
73
  </div>
74
  </nav>
75
 
76
+ <!-- Hero Section -->
77
+ <section class="relative h-screen">
78
+ <div class="absolute inset-0 bg-black/50 z-10 hero-gradient"></div>
79
+ <img src="https://image.tmdb.org/t/p/original/9dKCd55IuTT5QRs989m9Qlb7d2B.jpg" alt="Film Hero" class="w-full h-full object-cover">
80
+
81
+ <div class="absolute bottom-0 left-0 z-20 p-16 w-full md:w-2/3">
82
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">The Witcher</h1>
83
+ <div class="flex space-x-4 mb-6">
84
+ <span class="text-green-500 font-semibold">97% Match</span>
85
+ <span>2023</span>
86
+ <span class="border border-gray-400 px-1">HD</span>
87
  </div>
88
+ <p class="text-lg mb-6">Geralt de Riv, un chasseur de monstres mutant, parcourt le continent en quête de sa place dans un monde où les humains se révèlent souvent plus vicieux que les bêtes.</p>
89
+ <div class="flex space-x-4">
90
+ <button class="bg-white text-black px-6 py-2 rounded flex items-center hover:bg-opacity-80">
91
+ <i class="fas fa-play mr-2"></i> Lecture
92
+ </button>
93
+ <button class="bg-gray-600/70 text-white px-6 py-2 rounded flex items-center hover:bg-opacity-50">
94
+ <i class="fas fa-info-circle mr-2"></i> Plus d'infos
95
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
  </div>
98
+ </section>
99
 
100
+ <!-- Content Sections -->
101
+ <main class="relative z-30 -mt-32">
102
+ <div class="space-y-12 pb-20">
103
+ <!-- Trending Now -->
104
+ <section class="px-4">
105
+ <h2 class="text-xl font-bold mb-4">Tendances actuelles</h2>
106
+ <div class="relative">
107
+ <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="trending">
108
+ <!-- Films will be loaded here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </div>
110
  </div>
111
+ </section>
 
 
 
 
 
 
 
 
 
 
112
 
113
+ <!-- Popular on StreamFlix -->
114
+ <section class="px-4">
115
+ <h2 class="text-xl font-bold mb-4">Populaire sur StreamFlix</h2>
116
+ <div class="relative">
117
+ <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="popular">
118
+ <!-- Films will be loaded here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
  </div>
121
+ </section>
 
 
122
 
123
+ <!-- Continue Watching -->
124
+ <section class="px-4">
125
+ <h2 class="text-xl font-bold mb-4">Continuer à regarder</h2>
126
+ <div class="relative">
127
+ <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="continue">
128
+ <!-- Films will be loaded here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
  </div>
131
+ </section>
132
 
133
+ <!-- New Releases -->
134
+ <section class="px-4">
135
+ <h2 class="text-xl font-bold mb-4">Nouveautés</h2>
136
+ <div class="relative">
137
+ <div class="flex overflow-x-auto scroll-hide space-x-4 pb-4" id="new-releases">
138
+ <!-- Films will be loaded here -->
 
 
 
 
 
 
 
139
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </div>
141
+ </section>
142
  </div>
143
+ </main>
144
 
145
+ <!-- Footer -->
146
+ <footer class="bg-black text-gray-400 py-12 px-4">
147
+ <div class="max-w-7xl mx-auto">
148
+ <div class="flex flex-col md:flex-row justify-between">
149
+ <div class="mb-8">
150
+ <h3 class="text-white text-2xl font-bold mb-4">STREAMFLIX</h3>
151
+ <div class="flex space-x-4 text-2xl">
152
+ <a href="#"><i class="fab fa-facebook"></i></a>
153
+ <a href="#"><i class="fab fa-instagram"></i></a>
154
+ <a href="#"><i class="fab fa-twitter"></i></a>
155
+ <a href="#"><i class="fab fa-youtube"></i></a>
156
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
159
+ <div>
160
+ <h4 class="text-white mb-4">Navigation</h4>
161
+ <ul class="space-y-2">
162
+ <li><a href="#" class="hover:text-white">Accueil</a></li>
163
+ <li><a href="#" class="hover:text-white">Séries</a></li>
164
+ <li><a href="#" class="hover:text-white">Films</a></li>
165
+ <li><a href="#" class="hover:text-white">Nouveautés</a></li>
166
+ </ul>
167
+ </div>
168
+ <div>
169
+ <h4 class="text-white mb-4">Compte</h4>
170
+ <ul class="space-y-2">
171
+ <li><a href="#" class="hover:text-white">Mon compte</a></li>
172
+ <li><a href="#" class="hover:text-white">Abonnements</a></li>
173
+ <li><a href="#" class="hover:text-white">Historique</a></li>
174
+ <li><a href="#" class="hover:text-white">Liste de souhaits</a></li>
175
+ </ul>
176
+ </div>
177
+ <div>
178
+ <h4 class="text-white mb-4">Informations</h4>
179
+ <ul class="space-y-2">
180
+ <li><a href="#" class="hover:text-white">À propos</a></li>
181
+ <li><a href="#" class="hover:text-white">Contact</a></li>
182
+ <li><a href="#" class="hover:text-white">Presse</a></li>
183
+ <li><a href="#" class="hover:text-white">Carrières</a></li>
184
+ </ul>
185
+ </div>
186
+ <div>
187
+ <h4 class="text-white mb-4">Légal</h4>
188
+ <ul class="space-y-2">
189
+ <li><a href="#" class="hover:text-white">Conditions</a></li>
190
+ <li><a href="#" class="hover:text-white">Confidentialité</a></li>
191
+ <li><a href="#" class="hover:text-white">Cookies</a></li>
192
+ <li><a href="#" class="hover:text-white">RGPD</a></li>
193
+ </ul>
194
+ </div>
195
  </div>
196
  </div>
197
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
198
+ <p>&copy; 2023 StreamFlix. Tous droits réservés.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  </div>
200
  </div>
201
  </footer>
202
 
203
  <script>
204
+ // Sample movie data
205
+ const movies = [
206
+ {
207
+ id: 1,
208
+ title: "Stranger Things",
209
+ image: "https://image.tmdb.org/t/p/w500/x49FVwmViyGxflIbU3mH1dGVB3r.jpg",
210
+ year: "2022",
211
+ type: "Série",
212
+ progress: 65
213
+ },
214
+ {
215
+ id: 2,
216
+ title: "The Mandalorian",
217
+ image: "https://image.tmdb.org/t/p/w500/sWgBv7LV2PRoQgkxwlibdGXKz1S.jpg",
218
+ year: "2023",
219
+ type: "Série",
220
+ progress: 40
221
+ },
222
+ {
223
+ id: 3,
224
+ title: "Avatar 2",
225
+ image: "https://image.tmdb.org/t/p/w500/94xxm5701CzlOdgDkggvSw9NtQX.jpg",
226
+ year: "2022",
227
+ type: "Film",
228
+ progress: 0
229
+ },
230
+ {
231
+ id: 4,
232
+ title: "Oppenheimer",
233
+ image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
234
+ year: "2023",
235
+ type: "Film",
236
+ progress: 0
237
+ },
238
+ {
239
+ id: 5,
240
+ title: "Peaky Blinders",
241
+ image: "https://image.tmdb.org/t/p/w500/6PX0r5TRRU5y0jZ70y1OtbLYmoD.jpg",
242
+ year: "2022",
243
+ type: "Série",
244
+ progress: 90
245
+ },
246
+ {
247
+ id: 6,
248
+ title: "Dune",
249
+ image: "https://image.tmdb.org/t/p/w500/8gchj8DCl82B3vL3HZQ1Xe2dUwb.jpg",
250
+ year: "2021",
251
+ type: "Film",
252
+ progress: 0
253
+ },
254
+ {
255
+ id: 7,
256
+ title: "The Last of Us",
257
+ image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg",
258
+ year: "2023",
259
+ type: "Série",
260
+ progress: 30
261
+ },
262
+ {
263
+ id: 8,
264
+ title: "John Wick 4",
265
+ image: "https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg",
266
+ year: "2023",
267
+ type: "Film",
268
+ progress: 0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
269
  }
270
+ ];
271
 
272
+ // Function to create movie card
273
+ function createMovieCard(movie, category) {
274
+ const card = document.createElement('div');
275
+ card.className = 'flex-none w-48 md:w-56 relative group film-card';
276
+
277
+ let progressBar = '';
278
+ if (movie.progress > 0) {
279
+ progressBar = `
280
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600">
281
+ <div class="h-full bg-red-600" style="width: ${movie.progress}%"></div>
282
+ </div>
283
+ `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
284
  }
285
 
286
+ card.innerHTML = `
287
+ <div class="relative rounded overflow-hidden">
288
+ <img src="${movie.image}" alt="${movie.title}" class="w-full h-auto rounded transition-transform duration-300 group-hover:scale-105">
289
+ <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
290
+ <div class="play-icon opacity-0 transform scale-90 transition-all duration-300 text-white text-4xl bg-red-600 rounded-full w-16 h-16 flex items-center justify-center">
291
+ <i class="fas fa-play"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
292
  </div>
293
  </div>
294
+ ${progressBar}
295
+ </div>
296
+ <div class="mt-2">
297
+ <h3 class="font-semibold truncate">${movie.title}</h3>
298
+ <div class="flex justify-between text-sm text-gray-400">
299
+ <span>${movie.year}</span>
300
+ <span>${movie.type}</span>
301
+ </div>
302
+ </div>
303
+ `;
304
+
305
+ card.addEventListener('click', () => {
306
+ // Simulate loading
307
+ const loading = document.createElement('div');
308
+ loading.className = 'fixed inset-0 bg-black/90 z-50 flex items-center justify-center';
309
+ loading.innerHTML = `
310
+ <div class="text-center">
311
+ <div class="loading-spinner inline-block w-16 h-16 border-4 border-red-600 border-t-transparent rounded-full mb-4"></div>
312
+ <p class="text-white text-xl">Chargement du film...</p>
313
+ </div>
314
  `;
315
+ document.body.appendChild(loading);
316
+
317
+ // After 3 seconds, redirect to player
318
+ setTimeout(() => {
319
+ document.body.removeChild(loading);
320
+ window.open(`https://example.com/player/${movie.id}`, '_blank');
321
+ }, 3000);
322
  });
323
 
324
+ return card;
 
325
  }
326
 
327
+ // Initialize the page
328
+ document.addEventListener('DOMContentLoaded', () => {
329
+ // Load movies into sections
330
+ const trendingSection = document.getElementById('trending');
331
+ const popularSection = document.getElementById('popular');
332
+ const continueSection = document.getElementById('continue');
333
+ const newReleasesSection = document.getElementById('new-releases');
334
+
335
+ // Shuffle movies for variety
336
+ const shuffledMovies = [...movies].sort(() => 0.5 - Math.random());
337
+
338
+ // Add movies to sections
339
+ shuffledMovies.slice(0, 6).forEach(movie => {
340
+ trendingSection.appendChild(createMovieCard(movie, 'trending'));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
341
  });
342
 
343
+ shuffledMovies.slice(2, 8).forEach(movie => {
344
+ popularSection.appendChild(createMovieCard(movie, 'popular'));
345
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
 
347
+ // Only movies with progress > 0 for "Continue Watching"
348
+ shuffledMovies.filter(movie => movie.progress > 0).slice(0, 5).forEach(movie => {
349
+ continueSection.appendChild(createMovieCard(movie, 'continue'));
350
+ });
351
 
352
+ shuffledMovies.slice(4, 10).forEach(movie => {
353
+ newReleasesSection.appendChild(createMovieCard(movie, 'new-releases'));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  });
355
 
356
+ // Search functionality
357
+ const searchBtn = document.getElementById('search-btn');
358
+ const searchInput = document.getElementById('search-input');
359
 
360
+ searchBtn.addEventListener('click', () => {
361
+ searchInput.classList.toggle('w-64');
362
+ searchInput.classList.toggle('opacity-100');
363
+ searchInput.classList.toggle('ml-2');
364
+ searchInput.focus();
 
 
365
  });
366
 
367
+ searchInput.addEventListener('keypress', (e) => {
368
+ if (e.key === 'Enter') {
369
+ alert(`Recherche pour: ${searchInput.value}`);
370
+ // In a real app, you would redirect to search results
 
 
371
  }
372
  });
373
  });
prompts.txt CHANGED
@@ -4,4 +4,5 @@ activer les 986200 bouton en vrai je veux pas de bouton d'exemple ,ajouter bout
4
  je veux creer le plis imense marketp ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ lace au monde de plus de 9790078 bouton cliquable automatique ouvrir chaque bouton cliquéé dans une nouvel fenetre je veux des vrai bouton et des site reel pas d 'exemple
5
  je veux creer le plus gigantesque marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de services, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste
6
  je veux ouvrir chaque bouton cliquer s'ouvre dans une nouvel fenetre
7
- ouvrer les bouton en automatique dans une nouvel page
 
 
4
  je veux creer le plis imense marketp ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ lace au monde de plus de 9790078 bouton cliquable automatique ouvrir chaque bouton cliquéé dans une nouvel fenetre je veux des vrai bouton et des site reel pas d 'exemple
5
  je veux creer le plus gigantesque marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de services, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste
6
  je veux ouvrir chaque bouton cliquer s'ouvre dans une nouvel fenetre
7
+ ouvrer les bouton en automatique dans une nouvel page
8
+ createur de site de films de streaming en 10 seconde