Hugging Face's logo

Spaces:
docto41
/
futuristeaimarket
Running

App Files Community
docto41 commited on
Commit
77cc925
·
verified ·
1 Parent(s): 2a8029f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1397 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Futuristeaimarket
3
- emoji: 🏆
4
- colorFrom: gray
5
- colorTo: green
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: futuristeaimarket
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,1397 @@
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>Futuriste AI Marketplace</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://js.stripe.com/v3/"></script>
9
+ <script src="https://www.paypal.com/sdk/js?client-id=test&currency=EUR"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ :root {
13
+ --primary: #6e48aa;
14
+ --secondary: #9d50bb;
15
+ --accent: #4776E6;
16
+ --dark: #1a1a2e;
17
+ --darker: #16213e;
18
+ --neon: #00f2fe;
19
+ }
20
+
21
+ body {
22
+ background: linear-gradient(135deg, var(--dark), var(--darker));
23
+ color: white;
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ min-height: 100vh;
26
+ }
27
+
28
+ .neon-text {
29
+ text-shadow: 0 0 5px var(--neon), 0 0 10px var(--neon);
30
+ }
31
+
32
+ .neon-border {
33
+ box-shadow: 0 0 10px var(--neon), 0 0 20px var(--neon);
34
+ }
35
+
36
+ .service-btn {
37
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
38
+ transition: all 0.3s ease;
39
+ border-radius: 12px;
40
+ position: relative;
41
+ overflow: hidden;
42
+ }
43
+
44
+ .service-btn:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 10px 20px rgba(0, 242, 254, 0.3);
47
+ }
48
+
49
+ .service-btn::before {
50
+ content: '';
51
+ position: absolute;
52
+ top: -50%;
53
+ left: -50%;
54
+ width: 200%;
55
+ height: 200%;
56
+ background: linear-gradient(
57
+ to bottom right,
58
+ rgba(255, 255, 255, 0.3) 0%,
59
+ rgba(255, 255, 255, 0) 60%
60
+ );
61
+ transform: rotate(30deg);
62
+ }
63
+
64
+ .service-btn:hover::before {
65
+ animation: shine 1.5s infinite;
66
+ }
67
+
68
+ @keyframes shine {
69
+ 0% {
70
+ transform: rotate(30deg) translate(-30%, -30%);
71
+ }
72
+ 100% {
73
+ transform: rotate(30deg) translate(30%, 30%);
74
+ }
75
+ }
76
+
77
+ .dashboard-card {
78
+ background: rgba(26, 26, 46, 0.7);
79
+ backdrop-filter: blur(10px);
80
+ border: 1px solid rgba(113, 76, 175, 0.3);
81
+ border-radius: 15px;
82
+ transition: all 0.3s ease;
83
+ }
84
+
85
+ .dashboard-card:hover {
86
+ transform: translateY(-5px);
87
+ box-shadow: 0 10px 20px rgba(0, 242, 254, 0.2);
88
+ border-color: var(--neon);
89
+ }
90
+
91
+ .glow {
92
+ animation: glow 2s infinite alternate;
93
+ }
94
+
95
+ @keyframes glow {
96
+ from {
97
+ box-shadow: 0 0 5px var(--neon);
98
+ }
99
+ to {
100
+ box-shadow: 0 0 20px var(--neon);
101
+ }
102
+ }
103
+
104
+ /* Animation for futuristic feel */
105
+ @keyframes float {
106
+ 0% {
107
+ transform: translateY(0px);
108
+ }
109
+ 50% {
110
+ transform: translateY(-10px);
111
+ }
112
+ 100% {
113
+ transform: translateY(0px);
114
+ }
115
+ }
116
+
117
+ .floating {
118
+ animation: float 6s ease-in-out infinite;
119
+ }
120
+
121
+ /* Grid layout for services */
122
+ .services-grid {
123
+ display: grid;
124
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
125
+ gap: 15px;
126
+ }
127
+
128
+ /* Custom scrollbar */
129
+ ::-webkit-scrollbar {
130
+ width: 8px;
131
+ height: 8px;
132
+ }
133
+
134
+ ::-webkit-scrollbar-track {
135
+ background: rgba(26, 26, 46, 0.5);
136
+ }
137
+
138
+ ::-webkit-scrollbar-thumb {
139
+ background: linear-gradient(var(--primary), var(--secondary));
140
+ border-radius: 10px;
141
+ }
142
+
143
+ /* Holographic effect */
144
+ .holographic {
145
+ position: relative;
146
+ }
147
+
148
+ .holographic::after {
149
+ content: '';
150
+ position: absolute;
151
+ top: 0;
152
+ left: 0;
153
+ right: 0;
154
+ bottom: 0;
155
+ background: linear-gradient(
156
+ 135deg,
157
+ rgba(110, 72, 170, 0.3) 0%,
158
+ rgba(157, 80, 187, 0.3) 50%,
159
+ rgba(71, 118, 230, 0.3) 100%
160
+ );
161
+ z-index: -1;
162
+ border-radius: inherit;
163
+ opacity: 0.7;
164
+ }
165
+
166
+ /* Pulse animation for important elements */
167
+ @keyframes pulse {
168
+ 0% {
169
+ transform: scale(1);
170
+ box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7);
171
+ }
172
+ 70% {
173
+ transform: scale(1.05);
174
+ box-shadow: 0 0 0 10px rgba(0, 242, 254, 0);
175
+ }
176
+ 100% {
177
+ transform: scale(1);
178
+ box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
179
+ }
180
+ }
181
+
182
+ .pulse {
183
+ animation: pulse 2s infinite;
184
+ }
185
+
186
+ /* Admin specific styles */
187
+ .admin-only {
188
+ border-left: 4px solid var(--neon);
189
+ }
190
+
191
+ .payment-method {
192
+ transition: all 0.3s ease;
193
+ }
194
+
195
+ .payment-method:hover {
196
+ transform: scale(1.02);
197
+ box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
198
+ }
199
+ </style>
200
+ </head>
201
+ <body class="min-h-screen">
202
+ <!-- Navigation -->
203
+ <nav class="bg-gradient-to-r from-purple-900 to-blue-800 p-4 sticky top-0 z-50 shadow-xl">
204
+ <div class="container mx-auto flex justify-between items-center">
205
+ <div class="flex items-center space-x-2">
206
+ <i class="fas fa-robot text-3xl text-cyan-400"></i>
207
+ <h1 class="text-2xl font-bold neon-text">Futuriste<span class="text-cyan-400">AI</span>Market</h1>
208
+ </div>
209
+
210
+ <div class="flex items-center space-x-6">
211
+ <a href="#services" class="hover:text-cyan-400 transition">Services</a>
212
+ <a href="#pricing" class="hover:text-cyan-400 transition">Abonnements</a>
213
+ <a href="#dashboard" class="hover:text-cyan-400 transition">Tableau de bord</a>
214
+ <div class="relative group">
215
+ <button id="cartBtn" class="relative">
216
+ <i class="fas fa-shopping-cart text-xl"></i>
217
+ <span id="cartCount" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
218
+ </button>
219
+ <div id="cartDropdown" class="hidden group-hover:block absolute right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-xl z-50 p-4">
220
+ <h3 class="font-bold mb-2">Votre Panier</h3>
221
+ <div id="cartItems" class="max-h-60 overflow-y-auto">
222
+ <p class="text-gray-400 text-sm">Votre panier est vide</p>
223
+ </div>
224
+ <div class="mt-4 pt-2 border-t border-gray-700">
225
+ <p class="text-sm">Total: <span id="cartTotal" class="font-bold">€0.00</span></p>
226
+ <button id="checkoutBtn" class="mt-2 w-full bg-gradient-to-r from-cyan-500 to-blue-500 py-2 rounded-lg hover:opacity-90 transition">Payer</button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <button id="loginBtn" class="bg-gradient-to-r from-cyan-500 to-blue-500 px-4 py-2 rounded-lg hover:opacity-90 transition">Connexion</button>
231
+ </div>
232
+ </div>
233
+ </nav>
234
+
235
+ <!-- Hero Section -->
236
+ <section class="relative overflow-hidden">
237
+ <div class="absolute inset-0">
238
+ <div class="absolute inset-0 bg-gradient-to-b from-purple-900/30 to-blue-900/80 z-10"></div>
239
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80')] bg-cover bg-center opacity-20"></div>
240
+ </div>
241
+
242
+ <div class="container mx-auto relative z-20 py-20 px-4">
243
+ <div class="max-w-3xl mx-auto text-center">
244
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 neon-text">
245
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">L'Univers des IA</span> à Votre Service
246
+ </h1>
247
+ <p class="text-xl md:text-2xl mb-8 text-gray-300">
248
+ Accédez à plus de 99 millions de services IA spécialisés avec un simple abonnement. L'avenir de la productivité commence ici.
249
+ </p>
250
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
251
+ <a href="#pricing" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg neon-border">
252
+ S'abonner Maintenant
253
+ </a>
254
+ <a href="#services" class="bg-transparent border-2 border-cyan-400 hover:bg-cyan-400/10 text-cyan-400 font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105">
255
+ Explorer les Services
256
+ </a>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-gray-900 to-transparent z-10"></div>
262
+ </section>
263
+
264
+ <!-- Services Section -->
265
+ <section id="services" class="py-16 px-4 bg-gradient-to-b from-blue-900/30 to-purple-900/30">
266
+ <div class="container mx-auto">
267
+ <div class="text-center mb-16">
268
+ <h2 class="text-4xl font-bold mb-4 neon-text">Nos Services IA</h2>
269
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
270
+ Sélectionnez parmi notre vaste collection de services IA spécialisés. Cliquez sur n'importe quel service pour l'ouvrir dans une nouvelle fenêtre.
271
+ </p>
272
+ </div>
273
+
274
+ <!-- Search and Filter -->
275
+ <div class="mb-8 bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-xl">
276
+ <div class="flex flex-col md:flex-row gap-4">
277
+ <div class="flex-1 relative">
278
+ <input type="text" id="serviceSearch" placeholder="Rechercher un service IA..." class="w-full bg-gray-900/70 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent">
279
+ <i class="fas fa-search absolute right-3 top-3.5 text-gray-400"></i>
280
+ </div>
281
+ <select id="categoryFilter" class="bg-gray-900/70 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent">
282
+ <option value="all">Toutes catégories</option>
283
+ <option value="business">Business</option>
284
+ <option value="creative">Créativité</option>
285
+ <option value="education">Éducation</option>
286
+ <option value="health">Santé</option>
287
+ <option value="finance">Finance</option>
288
+ <option value="tech">Technologie</option>
289
+ <option value="productivity">Productivité</option>
290
+ </select>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Services Grid -->
295
+ <div id="servicesContainer" class="services-grid">
296
+ <!-- Services will be generated here by JavaScript -->
297
+ </div>
298
+
299
+ <div class="mt-8 text-center">
300
+ <button id="loadMoreBtn" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
301
+ Charger Plus de Services
302
+ </button>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Pricing Section -->
308
+ <section id="pricing" class="py-16 px-4 bg-gradient-to-b from-purple-900/30 to-blue-900/30">
309
+ <div class="container mx-auto">
310
+ <div class="text-center mb-16">
311
+ <h2 class="text-4xl font-bold mb-4 neon-text">Nos Plans d'Abonnement</h2>
312
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
313
+ Choisissez le plan qui correspond à vos besoins. Un abonnement est requis pour accéder à nos services IA.
314
+ </p>
315
+ </div>
316
+
317
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
318
+ <!-- Basic Plan -->
319
+ <div class="dashboard-card p-6 hover:border-cyan-400 transform transition-all duration-300 hover:-translate-y-2">
320
+ <div class="text-center mb-6">
321
+ <h3 class="text-2xl font-bold mb-2">Basique</h3>
322
+ <p class="text-gray-400">Parfait pour les débutants</p>
323
+ </div>
324
+ <div class="text-center mb-6">
325
+ <span class="text-4xl font-bold">€9.99</span>
326
+ <span class="text-gray-400">/mois</span>
327
+ </div>
328
+ <ul class="space-y-3 mb-8">
329
+ <li class="flex items-center">
330
+ <i class="fas fa-check text-green-400 mr-2"></i>
331
+ <span>Accès à 50 services IA</span>
332
+ </li>
333
+ <li class="flex items-center">
334
+ <i class="fas fa-check text-green-400 mr-2"></i>
335
+ <span>Support standard</span>
336
+ </li>
337
+ <li class="flex items-center">
338
+ <i class="fas fa-check text-green-400 mr-2"></i>
339
+ <span>1 utilisateur</span>
340
+ </li>
341
+ <li class="flex items-center text-gray-500">
342
+ <i class="fas fa-times text-red-400 mr-2"></i>
343
+ <span>Accès premium</span>
344
+ </li>
345
+ </ul>
346
+ <button class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105" onclick="addToCart('Abonnement Basique', 9.99, 'monthly')">
347
+ S'abonner
348
+ </button>
349
+ </div>
350
+
351
+ <!-- Pro Plan (Recommended) -->
352
+ <div class="dashboard-card p-6 border-2 border-cyan-400 transform transition-all duration-300 hover:-translate-y-2 scale-105 glow">
353
+ <div class="text-center mb-6">
354
+ <div class="absolute top-0 right-0 bg-cyan-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAIRE</div>
355
+ <h3 class="text-2xl font-bold mb-2">Professionnel</h3>
356
+ <p class="text-gray-400">Pour les utilisateurs avancés</p>
357
+ </div>
358
+ <div class="text-center mb-6">
359
+ <span class="text-4xl font-bold">€29.99</span>
360
+ <span class="text-gray-400">/mois</span>
361
+ </div>
362
+ <ul class="space-y-3 mb-8">
363
+ <li class="flex items-center">
364
+ <i class="fas fa-check text-green-400 mr-2"></i>
365
+ <span>Accès illimité aux services</span>
366
+ </li>
367
+ <li class="flex items-center">
368
+ <i class="fas fa-check text-green-400 mr-2"></i>
369
+ <span>Support prioritaire</span>
370
+ </li>
371
+ <li class="flex items-center">
372
+ <i class="fas fa-check text-green-400 mr-2"></i>
373
+ <span>5 utilisateurs</span>
374
+ </li>
375
+ <li class="flex items-center">
376
+ <i class="fas fa-check text-green-400 mr-2"></i>
377
+ <span>Accès premium</span>
378
+ </li>
379
+ </ul>
380
+ <button class="w-full bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105" onclick="addToCart('Abonnement Professionnel', 29.99, 'monthly')">
381
+ S'abonner
382
+ </button>
383
+ </div>
384
+
385
+ <!-- Enterprise Plan -->
386
+ <div class="dashboard-card p-6 hover:border-cyan-400 transform transition-all duration-300 hover:-translate-y-2">
387
+ <div class="text-center mb-6">
388
+ <h3 class="text-2xl font-bold mb-2">Entreprise</h3>
389
+ <p class="text-gray-400">Pour les organisations</p>
390
+ </div>
391
+ <div class="text-center mb-6">
392
+ <span class="text-4xl font-bold">€99.99</span>
393
+ <span class="text-gray-400">/mois</span>
394
+ </div>
395
+ <ul class="space-y-3 mb-8">
396
+ <li class="flex items-center">
397
+ <i class="fas fa-check text-green-400 mr-2"></i>
398
+ <span>Accès illimité aux services</span>
399
+ </li>
400
+ <li class="flex items-center">
401
+ <i class="fas fa-check text-green-400 mr-2"></i>
402
+ <span>Support 24/7</span>
403
+ </li>
404
+ <li class="flex items-center">
405
+ <i class="fas fa-check text-green-400 mr-2"></i>
406
+ <span>Utilisateurs illimités</span>
407
+ </li>
408
+ <li class="flex items-center">
409
+ <i class="fas fa-check text-green-400 mr-2"></i>
410
+ <span>Accès premium + API</span>
411
+ </li>
412
+ </ul>
413
+ <button class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105" onclick="addToCart('Abonnement Entreprise', 99.99, 'monthly')">
414
+ S'abonner
415
+ </button>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="mt-12 max-w-3xl mx-auto bg-gray-800/50 backdrop-blur-md rounded-xl p-6 shadow-xl">
420
+ <h3 class="text-2xl font-bold mb-4 text-center">Paiements Récurrents</h3>
421
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
422
+ <div class="flex items-center justify-center">
423
+ <div id="paypal-button-container" class="w-full"></div>
424
+ </div>
425
+ <div class="flex items-center justify-center">
426
+ <button id="stripeButton" class="w-full bg-[#635bff] hover:bg-[#7a73ff] text-white font-bold py-3 px-6 rounded-lg transition flex items-center justify-center">
427
+ <i class="fab fa-stripe text-2xl mr-2"></i>
428
+ Payer avec Stripe
429
+ </button>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </section>
435
+
436
+ <!-- Dashboard Section (Visible after login) -->
437
+ <section id="dashboard" class="py-16 px-4 bg-gradient-to-b from-blue-900/30 to-purple-900/30 hidden">
438
+ <div class="container mx-auto">
439
+ <div class="text-center mb-12">
440
+ <h2 class="text-4xl font-bold mb-4 neon-text">Tableau de Bord</h2>
441
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
442
+ Gérez votre compte, vos abonnements et vos paiements.
443
+ </p>
444
+ </div>
445
+
446
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
447
+ <!-- User Profile -->
448
+ <div class="dashboard-card p-6 lg:col-span-1">
449
+ <div class="flex flex-col items-center mb-6">
450
+ <div class="w-24 h-24 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center mb-4">
451
+ <i class="fas fa-user text-4xl text-white"></i>
452
+ </div>
453
+ <h3 id="userEmail" class="text-xl font-bold">[email protected]</h3>
454
+ <p id="userRole" class="text-cyan-400">Compte Admin</p>
455
+ </div>
456
+
457
+ <div class="space-y-4">
458
+ <div>
459
+ <h4 class="font-bold text-gray-400 mb-1">Abonnement Actif</h4>
460
+ <p id="userSubscription" class="text-lg">Entreprise</p>
461
+ </div>
462
+ <div>
463
+ <h4 class="font-bold text-gray-400 mb-1">Prochain Paiement</h4>
464
+ <p id="nextPayment" class="text-lg">15 Nov 2023</p>
465
+ </div>
466
+ <div>
467
+ <h4 class="font-bold text-gray-400 mb-1">Méthode de Paiement</h4>
468
+ <p id="paymentMethod" class="text-lg">PayPal</p>
469
+ </div>
470
+ </div>
471
+
472
+ <button id="logoutBtn" class="mt-6 w-full bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-lg transition">
473
+ Déconnexion
474
+ </button>
475
+ </div>
476
+
477
+ <!-- Subscription Details -->
478
+ <div class="dashboard-card p-6 lg:col-span-2">
479
+ <h3 class="text-2xl font-bold mb-6">Détails de l'Abonnement</h3>
480
+
481
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
482
+ <div>
483
+ <h4 class="font-bold text-gray-400 mb-2">Statut</h4>
484
+ <div class="flex items-center">
485
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
486
+ <span>Actif</span>
487
+ </div>
488
+ </div>
489
+ <div>
490
+ <h4 class="font-bold text-gray-400 mb-2">Date de Début</h4>
491
+ <p>15 Oct 2023</p>
492
+ </div>
493
+ <div>
494
+ <h4 class="font-bold text-gray-400 mb-2">Cycle de Facturation</h4>
495
+ <p>Mensuel</p>
496
+ </div>
497
+ <div>
498
+ <h4 class="font-bold text-gray-400 mb-2">Prochaine Facture</h4>
499
+ <p>€99.99 le 15 Nov 2023</p>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="mb-8">
504
+ <h4 class="font-bold text-gray-400 mb-2">Historique des Paiements</h4>
505
+ <div class="overflow-x-auto">
506
+ <table class="w-full">
507
+ <thead>
508
+ <tr class="border-b border-gray-700">
509
+ <th class="text-left py-2">Date</th>
510
+ <th class="text-left py-2">Montant</th>
511
+ <th class="text-left py-2">Méthode</th>
512
+ <th class="text-left py-2">Statut</th>
513
+ </tr>
514
+ </thead>
515
+ <tbody>
516
+ <tr class="border-b border-gray-700">
517
+ <td class="py-3">15 Oct 2023</td>
518
+ <td>€99.99</td>
519
+ <td>PayPal</td>
520
+ <td><span class="text-green-400">Réussi</span></td>
521
+ </tr>
522
+ <tr class="border-b border-gray-700">
523
+ <td class="py-3">15 Sep 2023</td>
524
+ <td>€99.99</td>
525
+ <td>PayPal</td>
526
+ <td><span class="text-green-400">Réussi</span></td>
527
+ </tr>
528
+ <tr>
529
+ <td class="py-3">15 Aug 2023</td>
530
+ <td>€99.99</td>
531
+ <td>Stripe</td>
532
+ <td><span class="text-green-400">Réussi</span></td>
533
+ </tr>
534
+ </tbody>
535
+ </table>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="flex flex-col sm:flex-row gap-4">
540
+ <button class="flex-1 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-2 px-4 rounded-lg transition">
541
+ Changer de Plan
542
+ </button>
543
+ <button class="flex-1 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-2 px-4 rounded-lg transition">
544
+ Mettre à Jour le Paiement
545
+ </button>
546
+ <button class="flex-1 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-lg transition">
547
+ Annuler l'Abonnement
548
+ </button>
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- Admin Payment Section (Visible only for admin) -->
554
+ <div id="adminPaymentSection" class="mt-12 dashboard-card p-6 admin-only hidden">
555
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
556
+ <i class="fas fa-lock mr-2 text-cyan-400"></i>
557
+ Paramètres de Paiement Admin
558
+ </h3>
559
+
560
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
561
+ <!-- PayPal Configuration -->
562
+ <div class="dashboard-card p-6 payment-method">
563
+ <div class="flex items-center mb-4">
564
+ <i class="fab fa-paypal text-4xl text-blue-500 mr-3"></i>
565
+ <h4 class="text-xl font-bold">Configuration PayPal</h4>
566
+ </div>
567
+
568
+ <div class="space-y-4">
569
+ <div>
570
+ <label class="block text-sm font-medium text-gray-400 mb-1">Email PayPal</label>
571
+ <input type="email" id="paypalEmail" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="[email protected]">
572
+ </div>
573
+
574
+ <div>
575
+ <label class="block text-sm font-medium text-gray-400 mb-1">ID Client PayPal</label>
576
+ <input type="text" id="paypalClientId" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="Axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
577
+ </div>
578
+
579
+ <div>
580
+ <label class="block text-sm font-medium text-gray-400 mb-1">Clé Secrète PayPal</label>
581
+ <input type="password" id="paypalSecret" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="••••••••••••">
582
+ </div>
583
+
584
+ <button id="savePaypal" class="w-full bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white font-bold py-2 px-4 rounded-lg transition mt-4">
585
+ <i class="fas fa-save mr-2"></i> Enregistrer
586
+ </button>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Stripe Configuration -->
591
+ <div class="dashboard-card p-6 payment-method">
592
+ <div class="flex items-center mb-4">
593
+ <i class="fab fa-stripe text-4xl text-purple-500 mr-3"></i>
594
+ <h4 class="text-xl font-bold">Configuration Stripe</h4>
595
+ </div>
596
+
597
+ <div class="space-y-4">
598
+ <div>
599
+ <label class="block text-sm font-medium text-gray-400 mb-1">Clé Publique Stripe</label>
600
+ <input type="text" id="stripePublishableKey" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="pk_test_xxxxxxxxxxxxxxxx">
601
+ </div>
602
+
603
+ <div>
604
+ <label class="block text-sm font-medium text-gray-400 mb-1">Clé Secrète Stripe</label>
605
+ <input type="password" id="stripeSecretKey" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="sk_test_xxxxxxxxxxxxxxxx">
606
+ </div>
607
+
608
+ <div>
609
+ <label class="block text-sm font-medium text-gray-400 mb-1">Webhook Secret</label>
610
+ <input type="password" id="stripeWebhookSecret" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="whsec_xxxxxxxxxxxxxxxx">
611
+ </div>
612
+
613
+ <button id="saveStripe" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-lg transition mt-4">
614
+ <i class="fas fa-save mr-2"></i> Enregistrer
615
+ </button>
616
+ </div>
617
+ </div>
618
+ </div>
619
+
620
+ <!-- Payment Stats -->
621
+ <div class="dashboard-card p-6">
622
+ <h4 class="text-xl font-bold mb-4">Statistiques de Paiement</h4>
623
+
624
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
625
+ <div class="dashboard-card p-4 hover:border-green-400">
626
+ <div class="flex items-center mb-2">
627
+ <div class="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center mr-2">
628
+ <i class="fas fa-euro-sign text-green-400 text-sm"></i>
629
+ </div>
630
+ <h5 class="font-bold">Revenus Totaux</h5>
631
+ </div>
632
+ <p class="text-2xl font-bold">€24,599</p>
633
+ <p class="text-xs text-gray-400">30 derniers jours</p>
634
+ </div>
635
+
636
+ <div class="dashboard-card p-4 hover:border-blue-400">
637
+ <div class="flex items-center mb-2">
638
+ <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-2">
639
+ <i class="fab fa-paypal text-blue-400 text-sm"></i>
640
+ </div>
641
+ <h5 class="font-bold">PayPal</h5>
642
+ </div>
643
+ <p class="text-2xl font-bold">€15,327</p>
644
+ <p class="text-xs text-gray-400">62% des paiements</p>
645
+ </div>
646
+
647
+ <div class="dashboard-card p-4 hover:border-purple-400">
648
+ <div class="flex items-center mb-2">
649
+ <div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-2">
650
+ <i class="fab fa-stripe text-purple-400 text-sm"></i>
651
+ </div>
652
+ <h5 class="font-bold">Stripe</h5>
653
+ </div>
654
+ <p class="text-2xl font-bold">€9,272</p>
655
+ <p class="text-xs text-gray-400">38% des paiements</p>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="bg-gray-900/50 rounded-lg p-4">
660
+ <div class="flex justify-between items-center mb-3">
661
+ <h5 class="font-bold">Transactions Récentes</h5>
662
+ <a href="#" class="text-cyan-400 text-sm hover:text-cyan-300">Voir tout</a>
663
+ </div>
664
+
665
+ <div class="overflow-x-auto">
666
+ <table class="w-full">
667
+ <thead>
668
+ <tr class="border-b border-gray-700 text-gray-400 text-sm">
669
+ <th class="text-left py-2">Date</th>
670
+ <th class="text-left py-2">Montant</th>
671
+ <th class="text-left py-2">Méthode</th>
672
+ <th class="text-left py-2">Utilisateur</th>
673
+ <th class="text-left py-2">Statut</th>
674
+ </tr>
675
+ </thead>
676
+ <tbody>
677
+ <tr class="border-b border-gray-700 text-sm">
678
+ <td class="py-3">2023-10-28</td>
679
+ <td>€99.99</td>
680
+ <td>PayPal</td>
681
+ <td>[email protected]</td>
682
+ <td><span class="text-green-400">Réussi</span></td>
683
+ </tr>
684
+ <tr class="border-b border-gray-700 text-sm">
685
+ <td class="py-3">2023-10-27</td>
686
+ <td>€29.99</td>
687
+ <td>Stripe</td>
688
+ <td>[email protected]</td>
689
+ <td><span class="text-green-400">Réussi</span></td>
690
+ </tr>
691
+ <tr class="border-b border-gray-700 text-sm">
692
+ <td class="py-3">2023-10-26</td>
693
+ <td>€9.99</td>
694
+ <td>PayPal</td>
695
+ <td>[email protected]</td>
696
+ <td><span class="text-yellow-400">En attente</span></td>
697
+ </tr>
698
+ <tr class="text-sm">
699
+ <td class="py-3">2023-10-25</td>
700
+ <td>€99.99</td>
701
+ <td>Stripe</td>
702
+ <td>[email protected]</td>
703
+ <td><span class="text-red-400">Échoué</span></td>
704
+ </tr>
705
+ </tbody>
706
+ </table>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <!-- User Payment Section (Visible for regular users) -->
713
+ <div id="userPaymentSection" class="mt-12 dashboard-card p-6 hidden">
714
+ <h3 class="text-2xl font-bold mb-6">Méthodes de Paiement</h3>
715
+
716
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
717
+ <!-- PayPal Method -->
718
+ <div class="dashboard-card p-6 payment-method">
719
+ <div class="flex items-center mb-4">
720
+ <i class="fab fa-paypal text-4xl text-blue-500 mr-3"></i>
721
+ <h4 class="text-xl font-bold">PayPal</h4>
722
+ </div>
723
+
724
+ <div id="paypalConnected" class="hidden">
725
+ <p class="text-green-400 mb-3"><i class="fas fa-check-circle mr-2"></i> Connecté</p>
726
+ <p class="text-sm text-gray-400 mb-4">Les paiements récurrents seront effectués via PayPal.</p>
727
+ <button id="disconnectPaypal" class="w-full bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white font-bold py-2 px-4 rounded-lg transition">
728
+ <i class="fas fa-unlink mr-2"></i> Déconnecter
729
+ </button>
730
+ </div>
731
+
732
+ <div id="paypalNotConnected">
733
+ <p class="text-gray-400 mb-4">Connectez votre compte PayPal pour effectuer des paiements.</p>
734
+ <button id="connectPaypal" class="w-full bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white font-bold py-2 px-4 rounded-lg transition">
735
+ <i class="fab fa-paypal mr-2"></i> Connecter PayPal
736
+ </button>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- Stripe Method -->
741
+ <div class="dashboard-card p-6 payment-method">
742
+ <div class="flex items-center mb-4">
743
+ <i class="fab fa-stripe text-4xl text-purple-500 mr-3"></i>
744
+ <h4 class="text-xl font-bold">Carte Bancaire</h4>
745
+ </div>
746
+
747
+ <div id="stripeConnected" class="hidden">
748
+ <div class="flex items-center mb-3">
749
+ <i class="far fa-credit-card text-xl mr-3"></i>
750
+ <div>
751
+ <p class="font-medium">•••• •••• •••• 4242</p>
752
+ <p class="text-xs text-gray-400">Expire 04/2025</p>
753
+ </div>
754
+ </div>
755
+ <p class="text-sm text-gray-400 mb-4">Les paiements récurrents seront effectués via cette carte.</p>
756
+ <button id="updateStripe" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-lg transition">
757
+ <i class="fas fa-edit mr-2"></i> Mettre à Jour
758
+ </button>
759
+ </div>
760
+
761
+ <div id="stripeNotConnected">
762
+ <p class="text-gray-400 mb-4">Ajoutez une carte pour effectuer des paiements sécurisés.</p>
763
+ <button id="connectStripe" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-lg transition">
764
+ <i class="fas fa-plus mr-2"></i> Ajouter une Carte
765
+ </button>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="dashboard-card p-6">
771
+ <h4 class="text-xl font-bold mb-4">Historique des Paiements</h4>
772
+
773
+ <div class="overflow-x-auto">
774
+ <table class="w-full">
775
+ <thead>
776
+ <tr class="border-b border-gray-700 text-gray-400 text-sm">
777
+ <th class="text-left py-2">Date</th>
778
+ <th class="text-left py-2">Description</th>
779
+ <th class="text-left py-2">Montant</th>
780
+ <th class="text-left py-2">Méthode</th>
781
+ <th class="text-left py-2">Statut</th>
782
+ </tr>
783
+ </thead>
784
+ <tbody>
785
+ <tr class="border-b border-gray-700 text-sm">
786
+ <td class="py-3">2023-10-15</td>
787
+ <td>Abonnement Entreprise</td>
788
+ <td>€99.99</td>
789
+ <td>PayPal</td>
790
+ <td><span class="text-green-400">Réussi</span></td>
791
+ </tr>
792
+ <tr class="border-b border-gray-700 text-sm">
793
+ <td class="py-3">2023-09-15</td>
794
+ <td>Abonnement Entreprise</td>
795
+ <td>€99.99</td>
796
+ <td>PayPal</td>
797
+ <td><span class="text-green-400">Réussi</span></td>
798
+ </tr>
799
+ <tr class="text-sm">
800
+ <td class="py-3">2023-08-15</td>
801
+ <td>Abonnement Entreprise</td>
802
+ <td>€99.99</td>
803
+ <td>Carte Bancaire</td>
804
+ <td><span class="text-green-400">Réussi</span></td>
805
+ </tr>
806
+ </tbody>
807
+ </table>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+ </section>
813
+
814
+ <!-- Login Modal -->
815
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
816
+ <div class="bg-gray-900 rounded-xl shadow-2xl w-full max-w-md relative overflow-hidden">
817
+ <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-blue-900/30"></div>
818
+ <div class="relative z-10 p-8">
819
+ <button id="closeLoginModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
820
+ <i class="fas fa-times text-xl"></i>
821
+ </button>
822
+
823
+ <div class="text-center mb-8">
824
+ <i class="fas fa-robot text-5xl text-cyan-400 mb-4"></i>
825
+ <h2 class="text-3xl font-bold mb-2">Connexion</h2>
826
+ <p class="text-gray-400">Accédez à votre tableau de bord</p>
827
+ </div>
828
+
829
+ <form id="loginForm" class="space-y-6">
830
+ <div>
831
+ <label for="email" class="block text-sm font-medium text-gray-400 mb-1">Email</label>
832
+ <input type="email" id="loginEmail" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="[email protected]" required>
833
+ </div>
834
+
835
+ <div>
836
+ <label for="password" class="block text-sm font-medium text-gray-400 mb-1">Mot de passe</label>
837
+ <input type="password" id="loginPassword" class="w-full bg-gray-800 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent" placeholder="••••••••" required>
838
+ </div>
839
+
840
+ <div class="flex items-center justify-between">
841
+ <div class="flex items-center">
842
+ <input id="rememberMe" type="checkbox" class="h-4 w-4 text-cyan-500 focus:ring-cyan-500 border-gray-700 rounded">
843
+ <label for="rememberMe" class="ml-2 block text-sm text-gray-400">Se souvenir de moi</label>
844
+ </div>
845
+ <a href="#" class="text-sm text-cyan-400 hover:text-cyan-300">Mot de passe oublié?</a>
846
+ </div>
847
+
848
+ <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white font-bold py-3 px-4 rounded-lg transition">
849
+ Se Connecter
850
+ </button>
851
+ </form>
852
+
853
+ <div class="mt-6 text-center">
854
+ <p class="text-gray-400">Pas encore de compte? <a href="#" class="text-cyan-400 hover:text-cyan-300 font-medium">S'inscrire</a></p>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+
860
+ <!-- Footer -->
861
+ <footer class="bg-gray-900/50 backdrop-blur-md py-12 px-4 border-t border-gray-800">
862
+ <div class="container mx-auto">
863
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
864
+ <div>
865
+ <div class="flex items-center space-x-2 mb-4">
866
+ <i class="fas fa-robot text-3xl text-cyan-400"></i>
867
+ <h3 class="text-2xl font-bold neon-text">Futuriste<span class="text-cyan-400">AI</span>Market</h3>
868
+ </div>
869
+ <p class="text-gray-400">La plus grande plateforme d'abonnements IA au monde. Accédez à des millions de services spécialisés.</p>
870
+ </div>
871
+
872
+ <div>
873
+ <h4 class="text-lg font-bold mb-4">Navigation</h4>
874
+ <ul class="space-y-2">
875
+ <li><a href="#services" class="text-gray-400 hover:text-cyan-400 transition">Services</a></li>
876
+ <li><a href="#pricing" class="text-gray-400 hover:text-cyan-400 transition">Abonnements</a></li>
877
+ <li><a href="#dashboard" class="text-gray-400 hover:text-cyan-400 transition">Tableau de bord</a></li>
878
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Blog</a></li>
879
+ </ul>
880
+ </div>
881
+
882
+ <div>
883
+ <h4 class="text-lg font-bold mb-4">Support</h4>
884
+ <ul class="space-y-2">
885
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Centre d'aide</a></li>
886
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Contact</a></li>
887
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">FAQ</a></li>
888
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Politique de confidentialité</a></li>
889
+ </ul>
890
+ </div>
891
+
892
+ <div>
893
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
894
+ <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir les dernières nouveautés.</p>
895
+ <div class="flex">
896
+ <input type="email" placeholder="Votre email" class="bg-gray-800 border border-gray-700 rounded-l-lg py-2 px-4 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent w-full">
897
+ <button class="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white font-bold py-2 px-4 rounded-r-lg transition">
898
+ <i class="fas fa-paper-plane"></i>
899
+ </button>
900
+ </div>
901
+ <div class="flex space-x-4 mt-4">
902
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition"><i class="fab fa-facebook-f"></i></a>
903
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition"><i class="fab fa-twitter"></i></a>
904
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition"><i class="fab fa-linkedin-in"></i></a>
905
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition"><i class="fab fa-instagram"></i></a>
906
+ </div>
907
+ </div>
908
+ </div>
909
+
910
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
911
+ <p class="text-gray-400 text-sm">© 2023 Futuriste AI Market. Tous droits réservés.</p>
912
+ <div class="flex space-x-6 mt-4 md:mt-0">
913
+ <img src="https://cdn.worldvectorlogo.com/logos/visa.svg" alt="Visa" class="h-8 opacity-70 hover:opacity-100 transition">
914
+ <img src="https://cdn.worldvectorlogo.com/logos/mastercard.svg" alt="Mastercard" class="h-8 opacity-70 hover:opacity-100 transition">
915
+ <img src="https://cdn.worldvectorlogo.com/logos/paypal.svg" alt="PayPal" class="h-8 opacity-70 hover:opacity-100 transition">
916
+ <img src="https://cdn.worldvectorlogo.com/logos/stripe-4.svg" alt="Stripe" class="h-8 opacity-70 hover:opacity-100 transition">
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </footer>
921
+
922
+ <script>
923
+ // Configuration de la plateforme
924
+ const config = {
925
+ adminEmails: ["[email protected]", "[email protected]"],
926
+ adminPassword: "Admin270574@",
927
+ servicesCount: 990099, // Nombre de services IA à générer
928
+ servicesPerPage: 100, // Nomres de services à afficher par page
929
+ currentPage: 1
930
+ };
931
+
932
+ // Catégories de services IA
933
+ const categories = [
934
+ "business", "creative", "education", "health",
935
+ "finance", "tech", "productivity", "marketing",
936
+ "legal", "medical", "engineering", "design",
937
+ "writing", "translation", "programming", "data",
938
+ "security", "gaming", "music", "video"
939
+ ];
940
+
941
+ // Types de services IA
942
+ const serviceTypes = [
943
+ "Assistant", "Générateur", "Analyseur", "Optimiseur",
944
+ "Conseiller", "Tuteur", "Modérateur", "Traducteur",
945
+ "Designer", "Programmeur", "Analyste", "Consultant",
946
+ "Gestionnaire", "Planificateur", "Organisateur", "Créateur",
947
+ "Évaluateur", "Auditeur", "Coach", "Mentor"
948
+ ];
949
+
950
+ // Domaines de services IA
951
+ const domains = [
952
+ "Business", "Marketing", "Ventes", "Finance",
953
+ "Droit", "Médecine", "Ingénierie", "Design",
954
+ "Écriture", "Traduction", "Programmation", "Données",
955
+ "Sécurité", "Jeux", "Musique", "Vidéo",
956
+ "Éducation", "Productivité", "Santé", "Forme"
957
+ ];
958
+
959
+ // Générer des services IA aléatoires
960
+ function generateRandomServices(count) {
961
+ const services = [];
962
+ for (let i = 0; i < count; i++) {
963
+ const category = categories[Math.floor(Math.random() * categories.length)];
964
+ const type = serviceTypes[Math.floor(Math.random() * serviceTypes.length)];
965
+ const domain = domains[Math.floor(Math.random() * domains.length)];
966
+
967
+ services.push({
968
+ id: `service-${i+1}`,
969
+ name: `IA ${type} ${domain}`,
970
+ description: `Une IA spécialisée dans ${domain.toLowerCase()} qui agit comme ${type.toLowerCase()}.`,
971
+ category: category,
972
+ price: (Math.random() * 50 + 5).toFixed(2),
973
+ url: `https://service-${i+1}.futuriste-ai-market.com`,
974
+ icon: getRandomIcon(category)
975
+ });
976
+ }
977
+ return services;
978
+ }
979
+
980
+ // Obtenir une icône aléatoire basée sur la catégorie
981
+ function getRandomIcon(category) {
982
+ const icons = {
983
+ business: ["fa-briefcase", "fa-chart-line", "fa-building"],
984
+ creative: ["fa-paint-brush", "fa-palette", "fa-magic"],
985
+ education: ["fa-graduation-cap", "fa-book", "fa-university"],
986
+ health: ["fa-heartbeat", "fa-hospital", "fa-medkit"],
987
+ finance: ["fa-money-bill-wave", "fa-chart-pie", "fa-coins"],
988
+ tech: ["fa-laptop-code", "fa-microchip", "fa-server"],
989
+ productivity: ["fa-tasks", "fa-calendar-check", "fa-stopwatch"],
990
+ marketing: ["fa-bullhorn", "fa-ad", "fa-chart-bar"],
991
+ legal: ["fa-gavel", "fa-balance-scale", "fa-file-contract"],
992
+ medical: ["fa-user-md", "fa-stethoscope", "fa-prescription"],
993
+ engineering: ["fa-cogs", "fa-tools", "fa-robot"],
994
+ design: ["fa-drafting-compass", "fa-ruler-combined", "fa-vector-square"],
995
+ writing: ["fa-pen-fancy", "fa-keyboard", "fa-feather-alt"],
996
+ translation: ["fa-language", "fa-globe-europe", "fa-comments"],
997
+ programming: ["fa-code", "fa-terminal", "fa-file-code"],
998
+ data: ["fa-database", "fa-table", "fa-project-diagram"],
999
+ security: ["fa-shield-alt", "fa-lock", "fa-fingerprint"],
1000
+ gaming: ["fa-gamepad", "fa-dice", "fa-chess"],
1001
+ music: ["fa-music", "fa-guitar", "fa-headphones"],
1002
+ video: ["fa-video", "fa-film", "fa-photo-video"]
1003
+ };
1004
+
1005
+ const categoryIcons = icons[category] || ["fa-robot"];
1006
+ return categoryIcons[Math.floor(Math.random() * categoryIcons.length)];
1007
+ }
1008
+
1009
+ // Générer tous les services
1010
+ const allServices = generateRandomServices(config.servicesCount);
1011
+ let displayedServices = [];
1012
+ let filteredServices = [...allServices];
1013
+
1014
+ // Afficher les services
1015
+ function displayServices() {
1016
+ const servicesContainer = document.getElementById('servicesContainer');
1017
+ servicesContainer.innerHTML = '';
1018
+
1019
+ const startIdx = (config.currentPage - 1) * config.servicesPerPage;
1020
+ const endIdx = startIdx + config.servicesPerPage;
1021
+ displayedServices = filteredServices.slice(startIdx, endIdx);
1022
+
1023
+ displayedServices.forEach(service => {
1024
+ const serviceElement = document.createElement('div');
1025
+ serviceElement.className = 'service-btn p-4 flex flex-col items-center text-center cursor-pointer holographic';
1026
+ serviceElement.innerHTML = `
1027
+ <i class="fas ${service.icon} text-3xl mb-3 text-cyan-400"></i>
1028
+ <h3 class="font-bold mb-1">${service.name}</h3>
1029
+ <p class="text-sm text-gray-300 mb-2">${service.description}</p>
1030
+ <span class="text-xs bg-gray-800/50 px-2 py-1 rounded-full">${service.category}</span>
1031
+ `;
1032
+
1033
+ serviceElement.addEventListener('click', () => {
1034
+ window.open(service.url, '_blank');
1035
+ });
1036
+
1037
+ servicesContainer.appendChild(serviceElement);
1038
+ });
1039
+
1040
+ // Masquer le bouton "Charger plus" si tout est affiché
1041
+ document.getElementById('loadMoreBtn').style.display =
1042
+ endIdx < filteredServices.length ? 'inline-block' : 'none';
1043
+ }
1044
+
1045
+ // Filtrer les services
1046
+ function filterServices() {
1047
+ const searchTerm = document.getElementById('serviceSearch').value.toLowerCase();
1048
+ const categoryFilter = document.getElementById('categoryFilter').value;
1049
+
1050
+ filteredServices = allServices.filter(service => {
1051
+ const matchesSearch = service.name.toLowerCase().includes(searchTerm) ||
1052
+ service.description.toLowerCase().includes(searchTerm);
1053
+ const matchesCategory = categoryFilter === 'all' || service.category === categoryFilter;
1054
+ return matchesSearch && matchesCategory;
1055
+ });
1056
+
1057
+ config.currentPage = 1;
1058
+ displayServices();
1059
+ }
1060
+
1061
+ // Gestion du panier
1062
+ let cart = [];
1063
+
1064
+ function addToCart(name, price, type) {
1065
+ cart.push({ name, price, type });
1066
+ updateCartUI();
1067
+
1068
+ // Animation de confirmation
1069
+ const confirmation = document.createElement('div');
1070
+ confirmation.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
1071
+ confirmation.innerHTML = `
1072
+ <i class="fas fa-check-circle mr-2"></i>
1073
+ Ajouté au panier: ${name}
1074
+ `;
1075
+ document.body.appendChild(confirmation);
1076
+
1077
+ setTimeout(() => {
1078
+ confirmation.classList.add('opacity-0', 'transition-opacity', 'duration-300');
1079
+ setTimeout(() => confirmation.remove(), 300);
1080
+ }, 2000);
1081
+ }
1082
+
1083
+ function updateCartUI() {
1084
+ const cartCount = document.getElementById('cartCount');
1085
+ const cartItems = document.getElementById('cartItems');
1086
+ const cartTotal = document.getElementById('cartTotal');
1087
+
1088
+ cartCount.textContent = cart.length;
1089
+
1090
+ if (cart.length === 0) {
1091
+ cartItems.innerHTML = '<p class="text-gray-400 text-sm">Votre panier est vide</p>';
1092
+ cartTotal.textContent = '€0.00';
1093
+ return;
1094
+ }
1095
+
1096
+ cartItems.innerHTML = '';
1097
+ let total = 0;
1098
+
1099
+ cart.forEach((item, index) => {
1100
+ total += item.price;
1101
+
1102
+ const cartItem = document.createElement('div');
1103
+ cartItem.className = 'flex justify-between items-center py-2 border-b border-gray-700';
1104
+ cartItem.innerHTML = `
1105
+ <div>
1106
+ <p class="text-sm">${item.name}</p>
1107
+ <p class="text-xs text-gray-400">${item.type === 'monthly' ? 'Mensuel' : 'Annuel'}</p>
1108
+ </div>
1109
+ <div class="flex items-center">
1110
+ <span class="text-sm font-bold mr-2">€${item.price.toFixed(2)}</span>
1111
+ <button onclick="removeFromCart(${index})" class="text-red-400 hover:text-red-300">
1112
+ <i class="fas fa-times"></i>
1113
+ </button>
1114
+ </div>
1115
+ `;
1116
+
1117
+ cartItems.appendChild(cartItem);
1118
+ });
1119
+
1120
+ cartTotal.textContent = `€${total.toFixed(2)}`;
1121
+ }
1122
+
1123
+ function removeFromCart(index) {
1124
+ cart.splice(index, 1);
1125
+ updateCartUI();
1126
+ }
1127
+
1128
+ function checkout() {
1129
+ if (cart.length === 0) return;
1130
+
1131
+ // Ici, vous intégreriez normalement Stripe ou PayPal
1132
+ alert(`Paiement de €${cart.reduce((sum, item) => sum + item.price, 0).toFixed(2)} en cours...`);
1133
+
1134
+ // Réinitialiser le panier après paiement
1135
+ cart = [];
1136
+ updateCartUI();
1137
+ }
1138
+
1139
+ // Gestion de l'authentification
1140
+ let isLoggedIn = false;
1141
+ let isAdmin = false;
1142
+
1143
+ function checkAuth() {
1144
+ const email = localStorage.getItem('email');
1145
+ const password = localStorage.getItem('password');
1146
+
1147
+ if (email && password) {
1148
+ login(email, password, true);
1149
+ }
1150
+ }
1151
+
1152
+ function login(email, password, remember = false) {
1153
+ // Vérifier les identifiants admin
1154
+ if (config.adminEmails.includes(email) && password === config.adminPassword) {
1155
+ isLoggedIn = true;
1156
+ isAdmin = true;
1157
+
1158
+ if (remember) {
1159
+ localStorage.setItem('email', email);
1160
+ localStorage.setItem('password', password);
1161
+ }
1162
+
1163
+ updateAuthUI();
1164
+ document.getElementById('loginModal').classList.add('hidden');
1165
+ return true;
1166
+ }
1167
+
1168
+ // Ici, vous vérifieriez normalement les autres utilisateurs dans une base de données
1169
+ // Pour cet exemple, nous considérons que tout autre email/password est valide
1170
+ isLoggedIn = true;
1171
+ isAdmin = false;
1172
+
1173
+ if (remember) {
1174
+ localStorage.setItem('email', email);
1175
+ localStorage.setItem('password', password);
1176
+ }
1177
+
1178
+ updateAuthUI();
1179
+ document.getElementById('loginModal').classList.add('hidden');
1180
+ return true;
1181
+ }
1182
+
1183
+ function logout() {
1184
+ isLoggedIn = false;
1185
+ isAdmin = false;
1186
+ localStorage.removeItem('email');
1187
+ localStorage.removeItem('password');
1188
+ updateAuthUI();
1189
+ }
1190
+
1191
+ function updateAuthUI() {
1192
+ const dashboardSection = document.getElementById('dashboard');
1193
+ const loginBtn = document.getElementById('loginBtn');
1194
+ const userEmail = document.getElementById('userEmail');
1195
+ const userRole = document.getElementById('userRole');
1196
+ const adminPaymentSection = document.getElementById('adminPaymentSection');
1197
+ const userPaymentSection = document.getElementById('userPaymentSection');
1198
+
1199
+ if (isLoggedIn) {
1200
+ loginBtn.textContent = 'Mon Compte';
1201
+ dashboardSection.classList.remove('hidden');
1202
+
1203
+ const email = localStorage.getItem('email') || '[email protected]';
1204
+ userEmail.textContent = email;
1205
+
1206
+ if (isAdmin) {
1207
+ userRole.textContent = "Compte Admin";
1208
+ adminPaymentSection.classList.remove('hidden');
1209
+ userPaymentSection.classList.add('hidden');
1210
+
1211
+ // Pré-remplir les champs admin avec des valeurs par défaut
1212
+ document.getElementById('paypalEmail').value = email;
1213
+ document.getElementById('paypalClientId').value = "Axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
1214
+ document.getElementById('paypalSecret').value = "••••••••••••";
1215
+ document.getElementById('stripePublishableKey').value = "pk_test_xxxxxxxxxxxxxxxx";
1216
+ document.getElementById('stripeSecretKey').value = "sk_test_xxxxxxxxxxxxxxxx";
1217
+ document.getElementById('stripeWebhookSecret').value = "whsec_xxxxxxxxxxxxxxxx";
1218
+ } else {
1219
+ userRole.textContent = "Compte Utilisateur";
1220
+ adminPaymentSection.classList.add('hidden');
1221
+ userPaymentSection.classList.remove('hidden');
1222
+
1223
+ // Simuler un utilisateur connecté à PayPal
1224
+ if (Math.random() > 0.5) {
1225
+ document.getElementById('paypalConnected').classList.remove('hidden');
1226
+ document.getElementById('paypalNotConnected').classList.add('hidden');
1227
+ } else {
1228
+ document.getElementById('paypalConnected').classList.add('hidden');
1229
+ document.getElementById('paypalNotConnected').classList.remove('hidden');
1230
+ }
1231
+
1232
+ // Simuler un utilisateur avec carte Stripe
1233
+ if (Math.random() > 0.5) {
1234
+ document.getElementById('stripeConnected').classList.remove('hidden');
1235
+ document.getElementById('stripeNotConnected').classList.add('hidden');
1236
+ } else {
1237
+ document.getElementById('stripeConnected').classList.add('hidden');
1238
+ document.getElementById('stripeNotConnected').classList.remove('hidden');
1239
+ }
1240
+ }
1241
+ } else {
1242
+ loginBtn.textContent = 'Connexion';
1243
+ dashboardSection.classList.add('hidden');
1244
+ }
1245
+ }
1246
+
1247
+ // Initialisation de PayPal
1248
+ function initPayPal() {
1249
+ paypal.Buttons({
1250
+ createOrder: function(data, actions) {
1251
+ if (cart.length === 0) {
1252
+ alert('Votre panier est vide');
1253
+ return;
1254
+ }
1255
+
1256
+ const total = cart.reduce((sum, item) => sum + item.price, 0).toFixed(2);
1257
+
1258
+ return actions.order.create({
1259
+ purchase_units: [{
1260
+ amount: {
1261
+ value: total
1262
+ }
1263
+ }]
1264
+ });
1265
+ },
1266
+ onApprove: function(data, actions) {
1267
+ return actions.order.capture().then(function(details) {
1268
+ alert('Paiement effectué avec succès par ' + details.payer.name.given_name);
1269
+ cart = [];
1270
+ updateCartUI();
1271
+ });
1272
+ }
1273
+ }).render('#paypal-button-container');
1274
+ }
1275
+
1276
+ // Initialisation de Stripe
1277
+ function initStripe() {
1278
+ const stripe = Stripe('pk_test_51N...'); // Clé publique de test
1279
+
1280
+ document.getElementById('stripeButton').addEventListener('click', async function() {
1281
+ if (cart.length === 0) {
1282
+ alert('Votre panier est vide');
1283
+ return;
1284
+ }
1285
+
1286
+ const total = cart.reduce((sum, item) => sum + item.price, 0).toFixed(2);
1287
+
1288
+ // En production, vous feriez une requête à votre serveur pour créer la session Stripe
1289
+ try {
1290
+ // Ceci est un exemple - en production, vous devriez faire une requête à votre backend
1291
+ alert(`Redirection vers Stripe pour payer €${total}`);
1292
+
1293
+ // Réinitialiser le panier après paiement
1294
+ cart = [];
1295
+ updateCartUI();
1296
+ } catch (err) {
1297
+ console.error('Erreur Stripe:', err);
1298
+ alert('Une erreur est survenue lors du paiement');
1299
+ }
1300
+ });
1301
+ }
1302
+
1303
+ // Gestion des boutons admin
1304
+ function setupAdminButtons() {
1305
+ document.getElementById('savePaypal').addEventListener('click', function(e) {
1306
+ e.preventDefault();
1307
+ alert('Configuration PayPal enregistrée avec succès!');
1308
+ });
1309
+
1310
+ document.getElementById('saveStripe').addEventListener('click', function(e) {
1311
+ e.preventDefault();
1312
+ alert('Configuration Stripe enregistrée avec succès!');
1313
+ });
1314
+ }
1315
+
1316
+ // Gestion des boutons utilisateur
1317
+ function setupUserButtons() {
1318
+ document.getElementById('connectPaypal').addEventListener('click', function() {
1319
+ alert('Redirection vers PayPal pour connecter votre compte...');
1320
+ setTimeout(() => {
1321
+ document.getElementById('paypalConnected').classList.remove('hidden');
1322
+ document.getElementById('paypalNotConnected').classList.add('hidden');
1323
+ }, 1000);
1324
+ });
1325
+
1326
+ document.getElementById('disconnectPaypal').addEventListener('click', function() {
1327
+ document.getElementById('paypalConnected').classList.add('hidden');
1328
+ document.getElementById('paypalNotConnected').classList.remove('hidden');
1329
+ });
1330
+
1331
+ document.getElementById('connectStripe').addEventListener('click', function() {
1332
+ alert('Ajout d\'une nouvelle carte bancaire...');
1333
+ setTimeout(() => {
1334
+ document.getElementById('stripeConnected').classList.remove('hidden');
1335
+ document.getElementById('stripeNotConnected').classList.add('hidden');
1336
+ }, 1000);
1337
+ });
1338
+
1339
+ document.getElementById('updateStripe').addEventListener('click', function() {
1340
+ alert('Mise à jour de votre carte bancaire...');
1341
+ });
1342
+ }
1343
+
1344
+ // Initialisation au chargement de la page
1345
+ document.addEventListener('DOMContentLoaded', function() {
1346
+ // Afficher les premiers services
1347
+ displayServices();
1348
+
1349
+ // Écouteurs d'événements
1350
+ document.getElementById('serviceSearch').addEventListener('input', filterServices);
1351
+ document.getElementById('categoryFilter').addEventListener('change', filterServices);
1352
+ document.getElementById('loadMoreBtn').addEventListener('click', function() {
1353
+ config.currentPage++;
1354
+ displayServices();
1355
+ });
1356
+
1357
+ // Panier
1358
+ document.getElementById('checkoutBtn').addEventListener('click', checkout);
1359
+
1360
+ // Authentification
1361
+ document.getElementById('loginBtn').addEventListener('click', function() {
1362
+ if (isLoggedIn) {
1363
+ document.getElementById('dashboard').scrollIntoView({ behavior: 'smooth' });
1364
+ } else {
1365
+ document.getElementById('loginModal').classList.remove('hidden');
1366
+ }
1367
+ });
1368
+
1369
+ document.getElementById('closeLoginModal').addEventListener('click', function() {
1370
+ document.getElementById('loginModal').classList.add('hidden');
1371
+ });
1372
+
1373
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
1374
+ e.preventDefault();
1375
+ const email = document.getElementById('loginEmail').value;
1376
+ const password = document.getElementById('loginPassword').value;
1377
+ const remember = document.getElementById('rememberMe').checked;
1378
+
1379
+ login(email, password, remember);
1380
+ });
1381
+
1382
+ document.getElementById('logoutBtn').addEventListener('click', logout);
1383
+
1384
+ // Vérifier l'authentification au chargement
1385
+ checkAuth();
1386
+
1387
+ // Initialiser les paiements
1388
+ initPayPal();
1389
+ initStripe();
1390
+
1391
+ // Configurer les boutons admin et utilisateur
1392
+ setupAdminButtons();
1393
+ setupUserButtons();
1394
+ });
1395
+ </script>
1396
+ <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/futuristeaimarket" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1397
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ 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
2
+ je veux charger toutes les 990099 bouton en automatique et ouvrer chaque bouton qu'on clique dessus dans une nouvelle page
3
+ je veux un tableau de bord personnel pour entrer mes information de paiement paypal , stripe etc.. pour etre payer je veux que moi seul a acces a se tableau be bors , acces interdit au autres il devront payer un abonnement il auront un autre tableau de bord pour eux , mais pas les memess,,
4
+ je veux un tableau de bord personnel pour entrer mes information de paiement paypal , stripe etc.. pour etre payer je veux que moi seul a acces a se tableau be bors , acces interdit au autres il devront payer un abonnement il auront un autre tableau de bord pour eux , mais pas les memess,,