Hugging Face's logo

Spaces:
docto41
/
assistant-marketplace
Running

App Files Community
docto41 commited on
Commit
84eb0c8
·
verified ·
1 Parent(s): b7ad289

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1013 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Assistant Marketplace
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: yellow
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: assistant-marketplace
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,1013 @@
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>AI Assistant Marketplace - Admin Access</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
+ <script src="https://js.stripe.com/v3/"></script>
10
+ <script src="https://www.paypal.com/sdk/js?client-id=YOUR_PAYPAL_CLIENT_ID&currency=USD"></script>
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
14
+ }
15
+ .card-hover:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+ .blur-effect {
20
+ backdrop-filter: blur(10px);
21
+ background-color: rgba(255, 255, 255, 0.1);
22
+ }
23
+ .cart-item-animation {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .cart-item-animation:hover {
27
+ background-color: rgba(249, 250, 251, 0.5);
28
+ }
29
+ .admin-badge {
30
+ position: absolute;
31
+ top: 10px;
32
+ left: 10px;
33
+ background-color: #10B981;
34
+ color: white;
35
+ padding: 2px 8px;
36
+ border-radius: 9999px;
37
+ font-size: 12px;
38
+ font-weight: bold;
39
+ z-index: 10;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50 font-sans">
44
+ <!-- Subscription Modal (Mandatory for regular users) -->
45
+ <div id="subscriptionModal" class="fixed inset-0 flex items-center justify-center z-50" style="background-color: rgba(0,0,0,0.7);">
46
+ <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
47
+ <div class="text-center mb-6">
48
+ <i class="fas fa-lock text-4xl text-purple-600 mb-4"></i>
49
+ <h2 class="text-2xl font-bold text-gray-800">Abonnement Requis</h2>
50
+ <p class="text-gray-600 mt-2">Vous devez vous abonner pour accéder à notre marketplace d'assistants IA.</p>
51
+ </div>
52
+ <form id="subscriptionForm" class="space-y-4">
53
+ <div>
54
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
55
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
56
+ </div>
57
+ <div>
58
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
59
+ <input type="password" id="password" name="password" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
60
+ </div>
61
+ <div class="flex items-center">
62
+ <input type="checkbox" id="terms" name="terms" required class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
63
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
64
+ J'accepte les <a href="#" class="text-purple-600 hover:underline">conditions d'utilisation</a>
65
+ </label>
66
+ </div>
67
+ <button type="submit" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition duration-300 font-medium">
68
+ S'abonner (€29.99/mois)
69
+ </button>
70
+ <div class="text-center text-sm text-gray-500">
71
+ <p>Vous avez déjà un compte? <a href="#" id="loginLink" class="text-purple-600 hover:underline">Connectez-vous</a></p>
72
+ </div>
73
+ </form>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Login Modal -->
78
+ <div id="loginModal" class="fixed inset-0 flex items-center justify-center z-50 hidden" style="background-color: rgba(0,0,0,0.7);">
79
+ <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
80
+ <div class="text-center mb-6">
81
+ <i class="fas fa-user-lock text-4xl text-purple-600 mb-4"></i>
82
+ <h2 class="text-2xl font-bold text-gray-800">Connexion</h2>
83
+ <p class="text-gray-600 mt-2">Connectez-vous à votre compte</p>
84
+ </div>
85
+ <form id="loginForm" class="space-y-4">
86
+ <div>
87
+ <label for="loginEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
88
+ <input type="email" id="loginEmail" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
89
+ </div>
90
+ <div>
91
+ <label for="loginPassword" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
92
+ <input type="password" id="loginPassword" name="password" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
93
+ </div>
94
+ <button type="submit" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition duration-300 font-medium">
95
+ Se connecter
96
+ </button>
97
+ <div class="text-center text-sm text-gray-500">
98
+ <p>Pas encore de compte? <a href="#" id="registerLink" class="text-purple-600 hover:underline">Inscrivez-vous</a></p>
99
+ </div>
100
+ </form>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Admin Dashboard Overlay -->
105
+ <div id="adminOverlay" class="fixed bottom-4 right-4 z-50 hidden">
106
+ <div class="bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center">
107
+ <i class="fas fa-user-shield mr-2"></i>
108
+ <span>Mode Admin Actif</span>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Header -->
113
+ <header class="gradient-bg text-white shadow-lg">
114
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
115
+ <div class="flex items-center space-x-2">
116
+ <i class="fas fa-robot text-2xl"></i>
117
+ <h1 class="text-2xl font-bold">AI Assistant Marketplace</h1>
118
+ </div>
119
+ <div class="flex items-center space-x-4">
120
+ <button id="cartButton" class="relative p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
121
+ <i class="fas fa-shopping-cart text-xl"></i>
122
+ <span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
123
+ </button>
124
+ <button id="dashboardButton" class="flex items-center space-x-1 bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-md transition">
125
+ <i class="fas fa-tachometer-alt"></i>
126
+ <span>Tableau de bord</span>
127
+ </button>
128
+ <div class="relative group">
129
+ <button id="profileButton" class="flex items-center space-x-1">
130
+ <img id="profileImage" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="h-8 w-8 rounded-full">
131
+ <i class="fas fa-caret-down"></i>
132
+ </button>
133
+ <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
134
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Mon Profil</a>
135
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Paramètres</a>
136
+ <a href="#" id="logoutButton" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Déconnexion</a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </header>
142
+
143
+ <!-- Shopping Cart Sidebar -->
144
+ <div id="cartSidebar" class="fixed top-0 right-0 h-full w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-40">
145
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
146
+ <h3 class="text-lg font-semibold">Panier d'achat</h3>
147
+ <button id="closeCart" class="text-gray-500 hover:text-gray-700">
148
+ <i class="fas fa-times"></i>
149
+ </button>
150
+ </div>
151
+ <div id="cartItems" class="p-4 overflow-y-auto h-3/4">
152
+ <!-- Cart items will be added here dynamically -->
153
+ <div class="text-center text-gray-500 py-10">
154
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
155
+ <p>Votre panier est vide</p>
156
+ </div>
157
+ </div>
158
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 bg-gray-50">
159
+ <div class="flex justify-between mb-2">
160
+ <span class="font-medium">Total:</span>
161
+ <span id="cartTotal" class="font-bold">€0.00</span>
162
+ </div>
163
+ <button id="checkoutButton" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition duration-300 font-medium disabled:opacity-50" disabled>
164
+ Passer à la caisse
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Dashboard Modal -->
170
+ <div id="dashboardModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
171
+ <div class="bg-white rounded-lg shadow-xl w-11/12 max-w-6xl max-h-screen overflow-y-auto">
172
+ <div class="p-6">
173
+ <div class="flex justify-between items-center border-b pb-4">
174
+ <h2 class="text-2xl font-bold text-gray-800">Tableau de bord</h2>
175
+ <button id="closeDashboard" class="text-gray-500 hover:text-gray-700">
176
+ <i class="fas fa-times"></i>
177
+ </button>
178
+ </div>
179
+
180
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
181
+ <!-- Payment Methods -->
182
+ <div class="bg-gray-50 p-4 rounded-lg">
183
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
184
+ <i class="fas fa-credit-card mr-2 text-purple-600"></i>
185
+ Méthodes de paiement
186
+ </h3>
187
+ <div class="space-y-3">
188
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
189
+ <div class="flex items-center">
190
+ <i class="fab fa-paypal text-2xl text-blue-500 mr-3"></i>
191
+ <span>PayPal</span>
192
+ </div>
193
+ <button id="paypalButton" class="px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600">
194
+ Connecter
195
+ </button>
196
+ </div>
197
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
198
+ <div class="flex items-center">
199
+ <i class="fab fa-stripe text-2xl text-purple-500 mr-3"></i>
200
+ <span>Stripe</span>
201
+ </div>
202
+ <button id="stripeButton" class="px-3 py-1 bg-purple-500 text-white rounded text-sm hover:bg-purple-600">
203
+ Connecter
204
+ </button>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Payment History -->
210
+ <div class="bg-gray-50 p-4 rounded-lg">
211
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
212
+ <i class="fas fa-history mr-2 text-purple-600"></i>
213
+ Historique des paiements
214
+ </h3>
215
+ <div class="overflow-x-auto">
216
+ <table class="min-w-full divide-y divide-gray-200">
217
+ <thead class="bg-gray-100">
218
+ <tr>
219
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
220
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Montant</th>
221
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
222
+ </tr>
223
+ </thead>
224
+ <tbody id="paymentHistory" class="bg-white divide-y divide-gray-200">
225
+ <!-- Payment history will be loaded here -->
226
+ <tr>
227
+ <td colspan="3" class="px-4 py-4 text-center text-gray-500">Aucun historique de paiement</td>
228
+ </tr>
229
+ </tbody>
230
+ </table>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Account Info -->
235
+ <div class="bg-gray-50 p-4 rounded-lg">
236
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
237
+ <i class="fas fa-user mr-2 text-purple-600"></i>
238
+ Informations du compte
239
+ </h3>
240
+ <div class="space-y-3">
241
+ <div>
242
+ <label class="block text-sm font-medium text-gray-700">Nom</label>
243
+ <p id="accountName" class="mt-1 text-sm text-gray-900">Invité</p>
244
+ </div>
245
+ <div>
246
+ <label class="block text-sm font-medium text-gray-700">Email</label>
247
+ <p id="accountEmail" class="mt-1 text-sm text-gray-900">Non connecté</p>
248
+ </div>
249
+ <div>
250
+ <label class="block text-sm font-medium text-gray-700">Type de compte</label>
251
+ <p id="accountType" class="mt-1 text-sm text-gray-900">Standard</p>
252
+ </div>
253
+ <button class="mt-4 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-md text-sm font-medium transition">
254
+ Mettre à jour le profil
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Admin Section (only visible for admin users) -->
261
+ <div id="adminSection" class="mt-8 bg-green-50 border border-green-200 p-4 rounded-lg hidden">
262
+ <h3 class="text-lg font-semibold mb-4 flex items-center text-green-800">
263
+ <i class="fas fa-user-shield mr-2"></i>
264
+ Zone Administrateur
265
+ </h3>
266
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
267
+ <div class="p-3 border border-green-200 rounded-lg bg-white">
268
+ <h4 class="font-medium text-green-700 mb-2">Statistiques</h4>
269
+ <div class="flex justify-between text-sm">
270
+ <span>Utilisateurs:</span>
271
+ <span class="font-medium">1,248</span>
272
+ </div>
273
+ <div class="flex justify-between text-sm">
274
+ <span>Revenus:</span>
275
+ <span class="font-medium">€24,856.00</span>
276
+ </div>
277
+ </div>
278
+ <div class="p-3 border border-green-200 rounded-lg bg-white">
279
+ <h4 class="font-medium text-green-700 mb-2">Actions rapides</h4>
280
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm mb-2">
281
+ Ajouter un produit
282
+ </button>
283
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm">
284
+ Voir les rapports
285
+ </button>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Payment Processing Modals -->
294
+ <div id="paypalModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
295
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
296
+ <div class="flex justify-between items-center mb-4">
297
+ <h3 class="text-xl font-semibold">Paiement via PayPal</h3>
298
+ <button id="closePaypalModal" class="text-gray-500 hover:text-gray-700">
299
+ <i class="fas fa-times"></i>
300
+ </button>
301
+ </div>
302
+ <div id="paypal-button-container" class="mt-4"></div>
303
+ </div>
304
+ </div>
305
+
306
+ <div id="stripeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
307
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
308
+ <div class="flex justify-between items-center mb-4">
309
+ <h3 class="text-xl font-semibold">Paiement via Stripe</h3>
310
+ <button id="closeStripeModal" class="text-gray-500 hover:text-gray-700">
311
+ <i class="fas fa-times"></i>
312
+ </button>
313
+ </div>
314
+ <form id="stripe-payment-form" class="space-y-4">
315
+ <div id="stripe-card-element" class="p-3 border border-gray-300 rounded-md"></div>
316
+ <div id="stripe-card-errors" role="alert" class="text-red-500 text-sm"></div>
317
+ <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition">
318
+ Payer <span id="stripe-amount">€0.00</span>
319
+ </button>
320
+ </form>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Main Content -->
325
+ <main class="container mx-auto px-4 py-8">
326
+ <div class="flex justify-between items-center mb-8">
327
+ <h2 class="text-2xl font-bold text-gray-800">Nos Assistants IA</h2>
328
+ <div class="relative w-64">
329
+ <input type="text" placeholder="Rechercher un assistant..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
330
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
335
+ <!-- AI Assistant Cards -->
336
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover relative">
337
+ <div class="admin-badge">ACCÈS ADMIN</div>
338
+ <div class="relative">
339
+ <img src="https://source.unsplash.com/random/400x300/?ai,robot" alt="AI Assistant" class="w-full h-48 object-cover">
340
+ </div>
341
+ <div class="p-4">
342
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Marketing Pro</h3>
343
+ <p class="text-gray-600 text-sm mb-3">Version premium avec analyse avancée des campagnes.</p>
344
+ <div class="flex justify-between items-center mb-3">
345
+ <div class="flex items-center">
346
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
347
+ <span class="text-sm font-medium">4.9</span>
348
+ <span class="text-gray-500 text-sm ml-1">(256)</span>
349
+ </div>
350
+ <span class="text-sm font-medium text-purple-600">€99.99/mois</span>
351
+ </div>
352
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
353
+ data-id="101"
354
+ data-name="Assistant Marketing Pro"
355
+ data-price="99.99"
356
+ data-image="https://source.unsplash.com/random/400x300/?ai,robot">
357
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
358
+ </button>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover relative">
363
+ <div class="admin-badge">ACCÈS ADMIN</div>
364
+ <div class="relative">
365
+ <img src="https://source.unsplash.com/random/400x300/?ai,tech" alt="AI Assistant" class="w-full h-48 object-cover">
366
+ </div>
367
+ <div class="p-4">
368
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Rédaction Pro</h3>
369
+ <p class="text-gray-600 text-sm mb-3">Génération de contenu premium avec style personnalisé.</p>
370
+ <div class="flex justify-between items-center mb-3">
371
+ <div class="flex items-center">
372
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
373
+ <span class="text-sm font-medium">4.8</span>
374
+ <span class="text-gray-500 text-sm ml-1">(187)</span>
375
+ </div>
376
+ <span class="text-sm font-medium text-purple-600">€89.99/mois</span>
377
+ </div>
378
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
379
+ data-id="102"
380
+ data-name="Assistant Rédaction Pro"
381
+ data-price="89.99"
382
+ data-image="https://source.unsplash.com/random/400x300/?ai,tech">
383
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
384
+ </button>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
389
+ <div class="relative">
390
+ <img src="https://source.unsplash.com/random/400x300/?ai,code" alt="AI Assistant" class="w-full h-48 object-cover">
391
+ <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">
392
+ Populaire
393
+ </div>
394
+ </div>
395
+ <div class="p-4">
396
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Développement</h3>
397
+ <p class="text-gray-600 text-sm mb-3">Générez et optimisez du code dans plusieurs langages.</p>
398
+ <div class="flex justify-between items-center mb-3">
399
+ <div class="flex items-center">
400
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
401
+ <span class="text-sm font-medium">4.9</span>
402
+ <span class="text-gray-500 text-sm ml-1">(156)</span>
403
+ </div>
404
+ <span class="text-sm font-medium text-purple-600">€34.99/mois</span>
405
+ </div>
406
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
407
+ data-id="3"
408
+ data-name="Assistant Développement"
409
+ data-price="34.99"
410
+ data-image="https://source.unsplash.com/random/400x300/?ai,code">
411
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
412
+ </button>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
417
+ <div class="relative">
418
+ <img src="https://source.unsplash.com/random/400x300/?ai,design" alt="AI Assistant" class="w-full h-48 object-cover">
419
+ </div>
420
+ <div class="p-4">
421
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Design</h3>
422
+ <p class="text-gray-600 text-sm mb-3">Créez des designs professionnels en quelques clics.</p>
423
+ <div class="flex justify-between items-center mb-3">
424
+ <div class="flex items-center">
425
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
426
+ <span class="text-sm font-medium">4.6</span>
427
+ <span class="text-gray-500 text-sm ml-1">(87)</span>
428
+ </div>
429
+ <span class="text-sm font-medium text-purple-600">€27.99/mois</span>
430
+ </div>
431
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
432
+ data-id="4"
433
+ data-name="Assistant Design"
434
+ data-price="27.99"
435
+ data-image="https://source.unsplash.com/random/400x300/?ai,design">
436
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
437
+ </button>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- More AI Assistant Cards -->
442
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover relative">
443
+ <div class="admin-badge">ACCÈS ADMIN</div>
444
+ <div class="relative">
445
+ <img src="https://source.unsplash.com/random/400x300/?ai,finance" alt="AI Assistant" class="w-full h-48 object-cover">
446
+ </div>
447
+ <div class="p-4">
448
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Finance Pro</h3>
449
+ <p class="text-gray-600 text-sm mb-3">Analyse des marchés en temps réel avec prédictions.</p>
450
+ <div class="flex justify-between items-center mb-3">
451
+ <div class="flex items-center">
452
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
453
+ <span class="text-sm font-medium">4.9</span>
454
+ <span class="text-gray-500 text-sm ml-1">(132)</span>
455
+ </div>
456
+ <span class="text-sm font-medium text-purple-600">€129.99/mois</span>
457
+ </div>
458
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
459
+ data-id="103"
460
+ data-name="Assistant Finance Pro"
461
+ data-price="129.99"
462
+ data-image="https://source.unsplash.com/random/400x300/?ai,finance">
463
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
464
+ </button>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
469
+ <div class="relative">
470
+ <img src="https://source.unsplash.com/random/400x300/?ai,health" alt="AI Assistant" class="w-full h-48 object-cover">
471
+ <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
472
+ Professionnel
473
+ </div>
474
+ </div>
475
+ <div class="p-4">
476
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Santé</h3>
477
+ <p class="text-gray-600 text-sm mb-3">Analyse médicale et recommandations personnalisées.</p>
478
+ <div class="flex justify-between items-center mb-3">
479
+ <div class="flex items-center">
480
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
481
+ <span class="text-sm font-medium">4.8</span>
482
+ <span class="text-gray-500 text-sm ml-1">(112)</span>
483
+ </div>
484
+ <span class="text-sm font-medium text-purple-600">€49.99/mois</span>
485
+ </div>
486
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
487
+ data-id="6"
488
+ data-name="Assistant Santé"
489
+ data-price="49.99"
490
+ data-image="https://source.unsplash.com/random/400x300/?ai,health">
491
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
492
+ </button>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
497
+ <div class="relative">
498
+ <img src="https://source.unsplash.com/random/400x300/?ai,education" alt="AI Assistant" class="w-full h-48 object-cover">
499
+ </div>
500
+ <div class="p-4">
501
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Éducation</h3>
502
+ <p class="text-gray-600 text-sm mb-3">Apprentissage personnalisé pour tous les niveaux.</p>
503
+ <div class="flex justify-between items-center mb-3">
504
+ <div class="flex items-center">
505
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
506
+ <span class="text-sm font-medium">4.7</span>
507
+ <span class="text-gray-500 text-sm ml-1">(89)</span>
508
+ </div>
509
+ <span class="text-sm font-medium text-purple-600">€19.99/mois</span>
510
+ </div>
511
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
512
+ data-id="7"
513
+ data-name="Assistant Éducation"
514
+ data-price="19.99"
515
+ data-image="https://source.unsplash.com/random/400x300/?ai,education">
516
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
517
+ </button>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover relative">
522
+ <div class="admin-badge">ACCÈS ADMIN</div>
523
+ <div class="relative">
524
+ <img src="https://source.unsplash.com/random/400x300/?ai,legal" alt="AI Assistant" class="w-full h-48 object-cover">
525
+ </div>
526
+ <div class="p-4">
527
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Assistant Juridique Pro</h3>
528
+ <p class="text-gray-600 text-sm mb-3">Analyse de contrats avancée avec vérification légale.</p>
529
+ <div class="flex justify-between items-center mb-3">
530
+ <div class="flex items-center">
531
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
532
+ <span class="text-sm font-medium">4.9</span>
533
+ <span class="text-gray-500 text-sm ml-1">(78)</span>
534
+ </div>
535
+ <span class="text-sm font-medium text-purple-600">€149.99/mois</span>
536
+ </div>
537
+ <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md text-sm font-medium transition"
538
+ data-id="104"
539
+ data-name="Assistant Juridique Pro"
540
+ data-price="149.99"
541
+ data-image="https://source.unsplash.com/random/400x300/?ai,legal">
542
+ <i class="fas fa-cart-plus mr-2"></i> Ajouter au panier
543
+ </button>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Pagination -->
549
+ <div class="mt-8 flex justify-center">
550
+ <nav class="inline-flex rounded-md shadow">
551
+ <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
552
+ <i class="fas fa-chevron-left"></i>
553
+ </a>
554
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-purple-600 font-medium hover:bg-gray-50">1</a>
555
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a>
556
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a>
557
+ <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
558
+ <i class="fas fa-chevron-right"></i>
559
+ </a>
560
+ </nav>
561
+ </div>
562
+ </main>
563
+
564
+ <!-- Footer -->
565
+ <footer class="bg-gray-800 text-white py-8">
566
+ <div class="container mx-auto px-4">
567
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
568
+ <div>
569
+ <h3 class="text-lg font-semibold mb-4">AI Assistant Marketplace</h3>
570
+ <p class="text-gray-400">La plateforme ultime pour trouver l'assistant IA parfait pour vos besoins professionnels et personnels.</p>
571
+ </div>
572
+ <div>
573
+ <h4 class="text-md font-semibold mb-4">Navigation</h4>
574
+ <ul class="space-y-2">
575
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Assistants</a></li>
577
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Prix</a></li>
578
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
579
+ </ul>
580
+ </div>
581
+ <div>
582
+ <h4 class="text-md font-semibold mb-4">Support</h4>
583
+ <ul class="space-y-2">
584
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
585
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
586
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
587
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
588
+ </ul>
589
+ </div>
590
+ <div>
591
+ <h4 class="text-md font-semibold mb-4">Newsletter</h4>
592
+ <p class="text-gray-400 mb-2">Abonnez-vous pour recevoir les dernières mises à jour.</p>
593
+ <div class="flex">
594
+ <input type="email" placeholder="Votre email" class="px-3 py-2 bg-gray-700 text-white rounded-l-md focus:outline-none w-full">
595
+ <button class="gradient-bg text-white px-4 py-2 rounded-r-md hover:opacity-90 transition">
596
+ <i class="fas fa-paper-plane"></i>
597
+ </button>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
602
+ <p>&copy; 2023 AI Assistant Marketplace. Tous droits réservés.</p>
603
+ </div>
604
+ </div>
605
+ </footer>
606
+
607
+ <script>
608
+ // Admin accounts with special access
609
+ const ADMIN_ACCOUNTS = {
610
+ "[email protected]": "Admin270574@",
611
+ "[email protected]": "Admin270574@"
612
+ };
613
+
614
+ // Initialize Stripe
615
+ const stripe = Stripe('YOUR_STRIPE_PUBLIC_KEY');
616
+ const elements = stripe.elements();
617
+ const cardElement = elements.create('card');
618
+ cardElement.mount('#stripe-card-element');
619
+
620
+ // Cart functionality
621
+ let cart = [];
622
+ let currentUser = null;
623
+ const cartButton = document.getElementById('cartButton');
624
+ const cartSidebar = document.getElementById('cartSidebar');
625
+ const closeCart = document.getElementById('closeCart');
626
+ const cartItems = document.getElementById('cartItems');
627
+ const cartCount = document.getElementById('cartCount');
628
+ const cartTotal = document.getElementById('cartTotal');
629
+ const checkoutButton = document.getElementById('checkoutButton');
630
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
631
+
632
+ // Dashboard functionality
633
+ const dashboardButton = document.getElementById('dashboardButton');
634
+ const dashboardModal = document.getElementById('dashboardModal');
635
+ const closeDashboard = document.getElementById('closeDashboard');
636
+
637
+ // Payment modals
638
+ const paypalModal = document.getElementById('paypalModal');
639
+ const stripeModal = document.getElementById('stripeModal');
640
+ const closePaypalModal = document.getElementById('closePaypalModal');
641
+ const closeStripeModal = document.getElementById('closeStripeModal');
642
+ const paypalButton = document.getElementById('paypalButton');
643
+ const stripeButton = document.getElementById('stripeButton');
644
+
645
+ // Subscription and login forms
646
+ const subscriptionForm = document.getElementById('subscriptionForm');
647
+ const subscriptionModal = document.getElementById('subscriptionModal');
648
+ const loginModal = document.getElementById('loginModal');
649
+ const loginForm = document.getElementById('loginForm');
650
+ const loginLink = document.getElementById('loginLink');
651
+ const registerLink = document.getElementById('registerLink');
652
+ const logoutButton = document.getElementById('logoutButton');
653
+
654
+ // Admin elements
655
+ const adminOverlay = document.getElementById('adminOverlay');
656
+ const adminSection = document.getElementById('adminSection');
657
+ const accountName = document.getElementById('accountName');
658
+ const accountEmail = document.getElementById('accountEmail');
659
+ const accountType = document.getElementById('accountType');
660
+ const profileImage = document.getElementById('profileImage');
661
+
662
+ // Event listeners
663
+ cartButton.addEventListener('click', () => {
664
+ cartSidebar.style.transform = 'translateX(0)';
665
+ });
666
+
667
+ closeCart.addEventListener('click', () => {
668
+ cartSidebar.style.transform = 'translateX(100%)';
669
+ });
670
+
671
+ dashboardButton.addEventListener('click', () => {
672
+ dashboardModal.classList.remove('hidden');
673
+ });
674
+
675
+ closeDashboard.addEventListener('click', () => {
676
+ dashboardModal.classList.add('hidden');
677
+ });
678
+
679
+ paypalButton.addEventListener('click', () => {
680
+ dashboardModal.classList.add('hidden');
681
+ paypalModal.classList.remove('hidden');
682
+ // Render PayPal button
683
+ paypal.Buttons({
684
+ createOrder: function(data, actions) {
685
+ return actions.order.create({
686
+ purchase_units: [{
687
+ amount: {
688
+ value: calculateCartTotal().toFixed(2)
689
+ }
690
+ }]
691
+ });
692
+ },
693
+ onApprove: function(data, actions) {
694
+ return actions.order.capture().then(function(details) {
695
+ alert('Paiement PayPal réussi! ID de transaction: ' + details.id);
696
+ clearCart();
697
+ paypalModal.classList.add('hidden');
698
+ });
699
+ },
700
+ onError: function(err) {
701
+ console.error('Erreur PayPal:', err);
702
+ alert('Une erreur est survenue lors du paiement PayPal.');
703
+ }
704
+ }).render('#paypal-button-container');
705
+ });
706
+
707
+ stripeButton.addEventListener('click', () => {
708
+ dashboardModal.classList.add('hidden');
709
+ stripeModal.classList.remove('hidden');
710
+ document.getElementById('stripe-amount').textContent = '€' + calculateCartTotal().toFixed(2);
711
+ });
712
+
713
+ closePaypalModal.addEventListener('click', () => {
714
+ paypalModal.classList.add('hidden');
715
+ });
716
+
717
+ closeStripeModal.addEventListener('click', () => {
718
+ stripeModal.classList.add('hidden');
719
+ });
720
+
721
+ // Toggle between login and registration forms
722
+ loginLink.addEventListener('click', (e) => {
723
+ e.preventDefault();
724
+ subscriptionModal.style.display = 'none';
725
+ loginModal.classList.remove('hidden');
726
+ });
727
+
728
+ registerLink.addEventListener('click', (e) => {
729
+ e.preventDefault();
730
+ loginModal.classList.add('hidden');
731
+ subscriptionModal.style.display = 'flex';
732
+ });
733
+
734
+ // Login form submission
735
+ loginForm.addEventListener('submit', (e) => {
736
+ e.preventDefault();
737
+ const email = document.getElementById('loginEmail').value;
738
+ const password = document.getElementById('loginPassword').value;
739
+
740
+ // Check if this is an admin account
741
+ if (ADMIN_ACCOUNTS[email] && ADMIN_ACCOUNTS[email] === password) {
742
+ // Admin login
743
+ currentUser = {
744
+ email: email,
745
+ name: "Administrateur",
746
+ isAdmin: true,
747
+ subscribed: true
748
+ };
749
+
750
+ // Update UI for admin
751
+ accountName.textContent = currentUser.name;
752
+ accountEmail.textContent = currentUser.email;
753
+ accountType.textContent = "Administrateur";
754
+ profileImage.src = "https://randomuser.me/api/portraits/men/75.jpg";
755
+
756
+ // Show admin features
757
+ adminSection.classList.remove('hidden');
758
+ adminOverlay.classList.remove('hidden');
759
+
760
+ // Hide subscription modal
761
+ loginModal.classList.add('hidden');
762
+ subscriptionModal.style.display = 'none';
763
+
764
+ // Show welcome message
765
+ alert('Bienvenue Administrateur! Vous avez accès à tous les produits.');
766
+ } else {
767
+ // Regular user login (simulated)
768
+ currentUser = {
769
+ email: email,
770
+ name: "Utilisateur Standard",
771
+ isAdmin: false,
772
+ subscribed: true
773
+ };
774
+
775
+ // Update UI
776
+ accountName.textContent = currentUser.name;
777
+ accountEmail.textContent = currentUser.email;
778
+ accountType.textContent = "Standard";
779
+ profileImage.src = "https://randomuser.me/api/portraits/women/65.jpg";
780
+
781
+ // Hide admin features
782
+ adminSection.classList.add('hidden');
783
+ adminOverlay.classList.add('hidden');
784
+
785
+ // Hide modals
786
+ loginModal.classList.add('hidden');
787
+ subscriptionModal.style.display = 'none';
788
+
789
+ // Show welcome message
790
+ alert('Connexion réussie! Bienvenue sur notre marketplace.');
791
+ }
792
+ });
793
+
794
+ // Subscription form submission
795
+ subscriptionForm.addEventListener('submit', function(e) {
796
+ e.preventDefault();
797
+ const email = document.getElementById('email').value;
798
+ const password = document.getElementById('password').value;
799
+
800
+ // For demo purposes, we'll treat all non-admin registrations as standard users
801
+ currentUser = {
802
+ email: email,
803
+ name: "Nouvel Utilisateur",
804
+ isAdmin: false,
805
+ subscribed: true
806
+ };
807
+
808
+ // Update UI
809
+ accountName.textContent = currentUser.name;
810
+ accountEmail.textContent = currentUser.email;
811
+ accountType.textContent = "Standard";
812
+ profileImage.src = "https://randomuser.me/api/portraits/women/45.jpg";
813
+
814
+ // Hide admin features
815
+ adminSection.classList.add('hidden');
816
+ adminOverlay.classList.add('hidden');
817
+
818
+ // Hide modal
819
+ subscriptionModal.style.display = 'none';
820
+
821
+ // Show welcome message
822
+ alert('Merci pour votre abonnement! Vous pouvez maintenant accéder à notre marketplace.');
823
+ });
824
+
825
+ // Logout functionality
826
+ logoutButton.addEventListener('click', (e) => {
827
+ e.preventDefault();
828
+ currentUser = null;
829
+
830
+ // Reset UI
831
+ accountName.textContent = "Invité";
832
+ accountEmail.textContent = "Non connecté";
833
+ accountType.textContent = "Standard";
834
+ profileImage.src = "https://randomuser.me/api/portraits/men/32.jpg";
835
+
836
+ // Hide admin features
837
+ adminSection.classList.add('hidden');
838
+ adminOverlay.classList.add('hidden');
839
+
840
+ // Show subscription modal again
841
+ subscriptionModal.style.display = 'flex';
842
+
843
+ // Clear cart
844
+ clearCart();
845
+
846
+ alert('Vous avez été déconnecté avec succès.');
847
+ });
848
+
849
+ // Add to cart functionality
850
+ addToCartButtons.forEach(button => {
851
+ button.addEventListener('click', function() {
852
+ // Check if user is logged in
853
+ if (!currentUser) {
854
+ alert('Veuillez vous connecter ou vous abonner pour ajouter des articles au panier.');
855
+ subscriptionModal.style.display = 'flex';
856
+ return;
857
+ }
858
+
859
+ // Check if product is admin-only
860
+ const isAdminProduct = this.closest('.relative').querySelector('.admin-badge') !== null;
861
+
862
+ if (isAdminProduct && !currentUser.isAdmin) {
863
+ alert('Ce produit est réservé aux administrateurs. Veuillez choisir un autre produit.');
864
+ return;
865
+ }
866
+
867
+ const id = this.getAttribute('data-id');
868
+ const name = this.getAttribute('data-name');
869
+ const price = parseFloat(this.getAttribute('data-price'));
870
+ const image = this.getAttribute('data-image');
871
+
872
+ addToCart(id, name, price, image);
873
+ });
874
+ });
875
+
876
+ // Checkout button
877
+ checkoutButton.addEventListener('click', function() {
878
+ if (!currentUser || !currentUser.subscribed) {
879
+ alert('Veuillez vous abonner pour procéder au paiement.');
880
+ subscriptionModal.style.display = 'flex';
881
+ return;
882
+ }
883
+
884
+ cartSidebar.style.transform = 'translateX(100%)';
885
+ dashboardModal.classList.remove('hidden');
886
+ });
887
+
888
+ // Cart functions
889
+ function addToCart(id, name, price, image) {
890
+ const existingItem = cart.find(item => item.id === id);
891
+
892
+ if (existingItem) {
893
+ existingItem.quantity += 1;
894
+ } else {
895
+ cart.push({
896
+ id,
897
+ name,
898
+ price,
899
+ image,
900
+ quantity: 1
901
+ });
902
+ }
903
+
904
+ updateCart();
905
+ }
906
+
907
+ function updateCart() {
908
+ cartCount.textContent = cart.reduce((total, item) => total + item.quantity, 0);
909
+ cartTotal.textContent = '€' + calculateCartTotal().toFixed(2);
910
+
911
+ if (cart.length === 0) {
912
+ cartItems.innerHTML = `
913
+ <div class="text-center text-gray-500 py-10">
914
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
915
+ <p>Votre panier est vide</p>
916
+ </div>
917
+ `;
918
+ checkoutButton.disabled = true;
919
+ } else {
920
+ cartItems.innerHTML = '';
921
+ cart.forEach(item => {
922
+ const cartItem = document.createElement('div');
923
+ cartItem.className = 'flex items-center justify-between p-3 border-b border-gray-200 cart-item-animation';
924
+ cartItem.innerHTML = `
925
+ <div class="flex items-center">
926
+ <img src="${item.image}" alt="${item.name}" class="w-12 h-12 object-cover rounded-md mr-3">
927
+ <div>
928
+ <h4 class="text-sm font-medium">${item.name}</h4>
929
+ <p class="text-xs text-gray-500">€${item.price.toFixed(2)}/mois</p>
930
+ </div>
931
+ </div>
932
+ <div class="flex items-center">
933
+ <button class="decrease-quantity px-2 py-1 bg-gray-200 rounded-l-md" data-id="${item.id}">
934
+ <i class="fas fa-minus text-xs"></i>
935
+ </button>
936
+ <span class="quantity px-2 py-1 bg-gray-100 text-sm">${item.quantity}</span>
937
+ <button class="increase-quantity px-2 py-1 bg-gray-200 rounded-r-md" data-id="${item.id}">
938
+ <i class="fas fa-plus text-xs"></i>
939
+ </button>
940
+ <button class="remove-item ml-2 text-red-500 hover:text-red-700" data-id="${item.id}">
941
+ <i class="fas fa-trash"></i>
942
+ </button>
943
+ </div>
944
+ `;
945
+ cartItems.appendChild(cartItem);
946
+ });
947
+
948
+ checkoutButton.disabled = false;
949
+
950
+ // Add event listeners to quantity buttons
951
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
952
+ button.addEventListener('click', function() {
953
+ const id = this.getAttribute('data-id');
954
+ decreaseQuantity(id);
955
+ });
956
+ });
957
+
958
+ document.querySelectorAll('.increase-quantity').forEach(button => {
959
+ button.addEventListener('click', function() {
960
+ const id = this.getAttribute('data-id');
961
+ increaseQuantity(id);
962
+ });
963
+ });
964
+
965
+ document.querySelectorAll('.remove-item').forEach(button => {
966
+ button.addEventListener('click', function() {
967
+ const id = this.getAttribute('data-id');
968
+ removeFromCart(id);
969
+ });
970
+ });
971
+ }
972
+ }
973
+
974
+ function decreaseQuantity(id) {
975
+ const item = cart.find(item => item.id === id);
976
+ if (item.quantity > 1) {
977
+ item.quantity -= 1;
978
+ } else {
979
+ removeFromCart(id);
980
+ }
981
+ updateCart();
982
+ }
983
+
984
+ function increaseQuantity(id) {
985
+ const item = cart.find(item => item.id === id);
986
+ item.quantity += 1;
987
+ updateCart();
988
+ }
989
+
990
+ function removeFromCart(id) {
991
+ cart = cart.filter(item => item.id !== id);
992
+ updateCart();
993
+ }
994
+
995
+ function calculateCartTotal() {
996
+ return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
997
+ }
998
+
999
+ function clearCart() {
1000
+ cart = [];
1001
+ updateCart();
1002
+ }
1003
+
1004
+ // Initialize the page
1005
+ updateCart();
1006
+
1007
+ // For demo purposes, you can automatically log in as admin by uncommenting this:
1008
+ // document.getElementById('loginEmail').value = '[email protected]';
1009
+ // document.getElementById('loginPassword').value = 'Admin270574@';
1010
+ // document.getElementById('loginForm').dispatchEvent(new Event('submit'));
1011
+ </script>
1012
+ <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/assistant-marketplace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1013
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ creer un site de marketplace composer de 986200 bouton d'assisat IA TRES puissant avec des vrais bouton reel et actif pas des bouton d'exemple je veux un vrais site avec des bouton reel : 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 paiement
2
+ je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@