Hugging Face's logo

Spaces:
docto41
/
ai-marketplace
Running

App Files Community
docto41 commited on
Commit
af578c4
·
verified ·
1 Parent(s): be72c2e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +995 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Marketplace
3
- emoji: 🚀
4
  colorFrom: green
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-marketplace
3
+ emoji: 🐳
4
  colorFrom: green
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,995 @@
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 Marketplace - Boutons d'Assistance IA</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
+ <style>
11
+ @keyframes float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-20px); }
14
+ }
15
+ @keyframes pulse {
16
+ 0%, 100% { transform: scale(1); }
17
+ 50% { transform: scale(1.05); }
18
+ }
19
+ .floating { animation: float 6s ease-in-out infinite; }
20
+ .pulse { animation: pulse 2s infinite; }
21
+ .gradient-bg {
22
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
23
+ }
24
+ .btn-ai {
25
+ transition: all 0.3s ease;
26
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
27
+ }
28
+ .btn-ai:hover {
29
+ transform: translateY(-3px);
30
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
31
+ }
32
+ .glass-effect {
33
+ background: rgba(255, 255, 255, 0.1);
34
+ backdrop-filter: blur(10px);
35
+ border: 1px solid rgba(255, 255, 255, 0.2);
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="min-h-screen bg-gray-900 text-white">
40
+ <!-- Background Animation -->
41
+ <div class="fixed inset-0 overflow-hidden z-0">
42
+ <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-900 to-blue-900 opacity-50"></div>
43
+ <div class="absolute top-0 left-0 w-full h-full">
44
+ <div class="absolute top-10 left-20 w-32 h-32 rounded-full bg-purple-600 opacity-20 floating" style="animation-delay: 0s;"></div>
45
+ <div class="absolute top-1/3 right-20 w-40 h-40 rounded-full bg-blue-600 opacity-20 floating" style="animation-delay: 1s;"></div>
46
+ <div class="absolute bottom-20 left-1/4 w-24 h-24 rounded-full bg-indigo-600 opacity-20 floating" style="animation-delay: 2s;"></div>
47
+ <div class="absolute bottom-1/3 right-1/3 w-28 h-28 rounded-full bg-pink-600 opacity-20 floating" style="animation-delay: 3s;"></div>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Header -->
52
+ <header class="relative z-10 glass-effect shadow-lg">
53
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
54
+ <div class="flex items-center space-x-2">
55
+ <i class="fas fa-robot text-3xl text-purple-400"></i>
56
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
57
+ AI Marketplace
58
+ </h1>
59
+ </div>
60
+ <div class="flex items-center space-x-4">
61
+ <button id="cartBtn" class="relative p-2 rounded-full hover:bg-gray-800 transition">
62
+ <i class="fas fa-shopping-cart text-xl"></i>
63
+ <span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
64
+ </button>
65
+ <button id="loginBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition">
66
+ <i class="fas fa-user mr-2"></i>Connexion
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </header>
71
+
72
+ <!-- Main Content -->
73
+ <main class="relative z-10 container mx-auto px-4 py-8">
74
+ <!-- Hero Section -->
75
+ <section class="mb-16 text-center">
76
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
77
+ 986,200 Boutons d'Assistance IA
78
+ </h2>
79
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
80
+ Accédez à notre collection massive de boutons d'assistance IA ultra-puissants pour tous vos besoins.
81
+ </p>
82
+ <div class="flex justify-center space-x-4">
83
+ <button id="subscribeBtn" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 rounded-lg font-semibold text-lg transition transform hover:scale-105">
84
+ <i class="fas fa-crown mr-2"></i>S'abonner Gratuitement
85
+ </button>
86
+ <button id="exploreBtn" class="px-6 py-3 glass-effect hover:bg-gray-800 rounded-lg font-semibold text-lg transition transform hover:scale-105">
87
+ <i class="fas fa-compass mr-2"></i>Explorer
88
+ </button>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- AI Buttons Grid -->
93
+ <section class="mb-16">
94
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
95
+ <i class="fas fa-star mr-2 text-yellow-400"></i>Boutons IA Populaires
96
+ </h3>
97
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
98
+ <!-- AI Button 1 -->
99
+ <div class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
100
+ <div class="p-4">
101
+ <div class="w-full h-32 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg mb-3 flex items-center justify-center">
102
+ <i class="fas fa-brain text-5xl text-white opacity-80"></i>
103
+ </div>
104
+ <h4 class="font-semibold mb-1">Générateur de Contenu IA</h4>
105
+ <p class="text-sm text-gray-400 mb-3">Créez du contenu unique en quelques secondes</p>
106
+ <div class="flex justify-between items-center">
107
+ <span class="text-purple-400 font-bold">9.99€</span>
108
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="1" data-name="Générateur de Contenu IA" data-price="9.99">
109
+ <i class="fas fa-cart-plus"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- AI Button 2 -->
116
+ <div class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
117
+ <div class="p-4">
118
+ <div class="w-full h-32 bg-gradient-to-br from-pink-500 to-red-500 rounded-lg mb-3 flex items-center justify-center">
119
+ <i class="fas fa-image text-5xl text-white opacity-80"></i>
120
+ </div>
121
+ <h4 class="font-semibold mb-1">Générateur d'Images IA</h4>
122
+ <p class="text-sm text-gray-400 mb-3">Créez des images à partir de descriptions</p>
123
+ <div class="flex justify-between items-center">
124
+ <span class="text-purple-400 font-bold">14.99€</span>
125
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="2" data-name="Générateur d'Images IA" data-price="14.99">
126
+ <i class="fas fa-cart-plus"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- AI Button 3 -->
133
+ <div class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
134
+ <div class="p-4">
135
+ <div class="w-full h-32 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg mb-3 flex items-center justify-center">
136
+ <i class="fas fa-code text-5xl text-white opacity-80"></i>
137
+ </div>
138
+ <h4 class="font-semibold mb-1">Assistant Code IA</h4>
139
+ <p class="text-sm text-gray-400 mb-3">Générez et optimisez du code automatiquement</p>
140
+ <div class="flex justify-between items-center">
141
+ <span class="text-purple-400 font-bold">19.99€</span>
142
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="3" data-name="Assistant Code IA" data-price="19.99">
143
+ <i class="fas fa-cart-plus"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- AI Button 4 -->
150
+ <div class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
151
+ <div class="p-4">
152
+ <div class="w-full h-32 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg mb-3 flex items-center justify-center">
153
+ <i class="fas fa-chart-line text-5xl text-white opacity-80"></i>
154
+ </div>
155
+ <h4 class="font-semibold mb-1">Analyse de Marché IA</h4>
156
+ <p class="text-sm text-gray-400 mb-3">Analysez les tendances du marché en temps réel</p>
157
+ <div class="flex justify-between items-center">
158
+ <span class="text-purple-400 font-bold">24.99€</span>
159
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="4" data-name="Analyse de Marché IA" data-price="24.99">
160
+ <i class="fas fa-cart-plus"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- AI Button 5 -->
167
+ <div class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
168
+ <div class="p-4">
169
+ <div class="w-full h-32 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg mb-3 flex items-center justify-center">
170
+ <i class="fas fa-language text-5xl text-white opacity-80"></i>
171
+ </div>
172
+ <h4 class="font-semibold mb-1">Traducteur IA Avancé</h4>
173
+ <p class="text-sm text-gray-400 mb-3">Traduisez avec précision dans 50+ langues</p>
174
+ <div class="flex justify-between items-center">
175
+ <span class="text-purple-400 font-bold">12.99€</span>
176
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="5" data-name="Traducteur IA Avancé" data-price="12.99">
177
+ <i class="fas fa-cart-plus"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- More AI Buttons Section -->
186
+ <section>
187
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
188
+ <i class="fas fa-bolt mr-2 text-yellow-400"></i>Autres Boutons IA Puissants
189
+ </h3>
190
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
191
+ <!-- 6 more AI buttons -->
192
+ <div class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
193
+ <div class="flex items-start">
194
+ <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
195
+ <i class="fas fa-microphone text-xl"></i>
196
+ </div>
197
+ <div>
198
+ <h4 class="font-semibold">Assistant Vocal IA</h4>
199
+ <p class="text-sm text-gray-400">Contrôle vocal avancé pour vos applications</p>
200
+ <div class="flex justify-between items-center mt-2">
201
+ <span class="text-purple-400 font-bold">8.99€</span>
202
+ <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="6" data-name="Assistant Vocal IA" data-price="8.99">
203
+ <i class="fas fa-cart-plus"></i>
204
+ </button>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
211
+ <div class="flex items-start">
212
+ <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
213
+ <i class="fas fa-video text-xl"></i>
214
+ </div>
215
+ <div>
216
+ <h4 class="font-semibold">Éditeur Vidéo IA</h4>
217
+ <p class="text-sm text-gray-400">Montage vidéo automatisé avec intelligence</p>
218
+ <div class="flex justify-between items-center mt-2">
219
+ <span class="text-purple-400 font-bold">17.99€</span>
220
+ <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="7" data-name="Éditeur Vidéo IA" data-price="17.99">
221
+ <i class="fas fa-cart-plus"></i>
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
229
+ <div class="flex items-start">
230
+ <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mr-3">
231
+ <i class="fas fa-music text-xl"></i>
232
+ </div>
233
+ <div>
234
+ <h4 class="font-semibold">Compositeur Musical IA</h4>
235
+ <p class="text-sm text-gray-400">Créez des musiques originales en quelques clics</p>
236
+ <div class="flex justify-between items-center mt-2">
237
+ <span class="text-purple-400 font-bold">21.99€</span>
238
+ <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="8" data-name="Compositeur Musical IA" data-price="21.99">
239
+ <i class="fas fa-cart-plus"></i>
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
247
+ <div class="flex items-start">
248
+ <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center mr-3">
249
+ <i class="fas fa-robot text-xl"></i>
250
+ </div>
251
+ <div>
252
+ <h4 class="font-semibold">Chatbot IA Avancé</h4>
253
+ <p class="text-sm text-gray-400">Solution de chatbot conversationnel intelligent</p>
254
+ <div class="flex justify-between items-center mt-2">
255
+ <span class="text-purple-400 font-bold">15.99€</span>
256
+ <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="9" data-name="Chatbot IA Avancé" data-price="15.99">
257
+ <i class="fas fa-cart-plus"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
265
+ <div class="flex items-start">
266
+ <div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mr-3">
267
+ <i class="fas fa-chart-pie text-xl"></i>
268
+ </div>
269
+ <div>
270
+ <h4 class="font-semibold">Analyse de Données IA</h4>
271
+ <p class="text-sm text-gray-400">Découvrez des insights cachés dans vos données</p>
272
+ <div class="flex justify-between items-center mt-2">
273
+ <span class="text-purple-400 font-bold">22.99€</span>
274
+ <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="10" data-name="Analyse de Données IA" data-price="22.99">
275
+ <i class="fas fa-cart-plus"></i>
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
283
+ <div class="flex items-start">
284
+ <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center mr-3">
285
+ <i class="fas fa-search-dollar text-xl"></i>
286
+ </div>
287
+ <div>
288
+ <h4 class="font-semibold">Optimisation SEO IA</h4>
289
+ <p class="text-sm text-gray-400">Améliorez votre référencement automatiquement</p>
290
+ <div class="flex justify-between items-center mt-2">
291
+ <span class="text-purple-400 font-bold">11.99€</span>
292
+ <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="11" data-name="Optimisation SEO IA" data-price="11.99">
293
+ <i class="fas fa-cart-plus"></i>
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </section>
301
+ </main>
302
+
303
+ <!-- Footer -->
304
+ <footer class="relative z-10 bg-gray-800 mt-16 glass-effect">
305
+ <div class="container mx-auto px-4 py-8">
306
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
307
+ <div>
308
+ <h4 class="text-lg font-semibold mb-4">AI Marketplace</h4>
309
+ <p class="text-gray-400">La plus grande collection de boutons d'assistance IA pour tous vos besoins professionnels et personnels.</p>
310
+ </div>
311
+ <div>
312
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
313
+ <ul class="space-y-2">
314
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
315
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Boutons IA</a></li>
316
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Abonnements</a></li>
317
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tableau de bord</a></li>
318
+ </ul>
319
+ </div>
320
+ <div>
321
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
322
+ <ul class="space-y-2">
323
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
324
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
325
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
326
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
327
+ </ul>
328
+ </div>
329
+ <div>
330
+ <h4 class="text-lg font-semibold mb-4">Paiements Sécurisés</h4>
331
+ <div class="flex space-x-2 mb-4">
332
+ <div class="p-2 bg-gray-700 rounded">
333
+ <i class="fab fa-cc-paypal text-2xl text-blue-400"></i>
334
+ </div>
335
+ <div class="p-2 bg-gray-700 rounded">
336
+ <i class="fab fa-cc-stripe text-2xl text-purple-400"></i>
337
+ </div>
338
+ <div class="p-2 bg-gray-700 rounded">
339
+ <i class="fab fa-cc-visa text-2xl text-blue-600"></i>
340
+ </div>
341
+ </div>
342
+ <p class="text-gray-400 text-sm">Tous les paiements sont sécurisés et cryptés.</p>
343
+ </div>
344
+ </div>
345
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
346
+ <p>&copy; 2023 AI Marketplace. Tous droits réservés.</p>
347
+ </div>
348
+ </div>
349
+ </footer>
350
+
351
+ <!-- Modals -->
352
+ <!-- Login Modal -->
353
+ <div id="loginModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
354
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
355
+ <div class="relative bg-gray-800 rounded-xl max-w-md w-full mx-4 glass-effect p-8">
356
+ <button id="closeLoginModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
357
+ <i class="fas fa-times text-xl"></i>
358
+ </button>
359
+ <h3 class="text-2xl font-bold mb-6 text-center">Connexion</h3>
360
+ <form id="loginForm">
361
+ <div class="mb-4">
362
+ <label for="loginEmail" class="block text-gray-300 mb-2">Email</label>
363
+ <input type="email" id="loginEmail" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
364
+ </div>
365
+ <div class="mb-6">
366
+ <label for="loginPassword" class="block text-gray-300 mb-2">Mot de passe</label>
367
+ <input type="password" id="loginPassword" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
368
+ </div>
369
+ <button type="submit" class="w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition mb-4">
370
+ Se connecter
371
+ </button>
372
+ <p class="text-center text-gray-400">Pas encore de compte? <button id="showRegisterBtn" class="text-purple-400 hover:text-purple-300">S'inscrire</button></p>
373
+ </form>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Register Modal -->
378
+ <div id="registerModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
379
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
380
+ <div class="relative bg-gray-800 rounded-xl max-w-md w-full mx-4 glass-effect p-8">
381
+ <button id="closeRegisterModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
382
+ <i class="fas fa-times text-xl"></i>
383
+ </button>
384
+ <h3 class="text-2xl font-bold mb-6 text-center">Inscription</h3>
385
+ <form id="registerForm">
386
+ <div class="mb-4">
387
+ <label for="registerName" class="block text-gray-300 mb-2">Nom complet</label>
388
+ <input type="text" id="registerName" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
389
+ </div>
390
+ <div class="mb-4">
391
+ <label for="registerEmail" class="block text-gray-300 mb-2">Email</label>
392
+ <input type="email" id="registerEmail" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
393
+ </div>
394
+ <div class="mb-6">
395
+ <label for="registerPassword" class="block text-gray-300 mb-2">Mot de passe</label>
396
+ <input type="password" id="registerPassword" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
397
+ </div>
398
+ <button type="submit" class="w-full py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition mb-4">
399
+ S'inscrire
400
+ </button>
401
+ <p class="text-center text-gray-400">Déjà un compte? <button id="showLoginBtn" class="text-purple-400 hover:text-purple-300">Se connecter</button></p>
402
+ </form>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Subscribe Modal -->
407
+ <div id="subscribeModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
408
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
409
+ <div class="relative bg-gray-800 rounded-xl max-w-2xl w-full mx-4 glass-effect p-8">
410
+ <button id="closeSubscribeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
411
+ <i class="fas fa-times text-xl"></i>
412
+ </button>
413
+ <h3 class="text-2xl font-bold mb-6 text-center">Abonnement Gratuit</h3>
414
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
415
+ <div class="bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition">
416
+ <h4 class="text-xl font-semibold mb-2">Gratuit</h4>
417
+ <p class="text-3xl font-bold mb-4">0€<span class="text-sm font-normal text-gray-400">/mois</span></p>
418
+ <ul class="space-y-2 mb-6">
419
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Accès à 10 boutons IA</li>
420
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Support de base</li>
421
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> 100 requêtes/mois</li>
422
+ </ul>
423
+ <button id="selectFreeBtn" class="w-full py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition">
424
+ Sélectionner
425
+ </button>
426
+ </div>
427
+ <div class="bg-gradient-to-br from-purple-600 to-blue-600 rounded-lg p-6 hover:from-purple-700 hover:to-blue-700 transition">
428
+ <h4 class="text-xl font-semibold mb-2">Premium</h4>
429
+ <p class="text-3xl font-bold mb-4">29.99€<span class="text-sm font-normal text-gray-200">/mois</span></p>
430
+ <ul class="space-y-2 mb-6">
431
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Accès illimité à tous les boutons IA</li>
432
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Support prioritaire</li>
433
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Requêtes illimitées</li>
434
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Fonctionnalités avancées</li>
435
+ </ul>
436
+ <button id="selectPremiumBtn" class="w-full py-2 bg-white hover:bg-gray-100 text-purple-600 rounded-lg font-medium transition">
437
+ Sélectionner
438
+ </button>
439
+ </div>
440
+ </div>
441
+ <p class="text-center text-gray-400">Vous pouvez annuler votre abonnement à tout moment.</p>
442
+ </div>
443
+ </>
444
+
445
+ <!-- Payment Modal -->
446
+ <div id="paymentModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
447
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
448
+ <div class="relative bg-gray-800 rounded-xl max-w-md w-full mx-4 glass-effect p-8">
449
+ <button id="closePaymentModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
450
+ <i class="fas fa-times text-xl"></i>
451
+ </button>
452
+ <h3 class="text-2xl font-bold mb-6 text-center">Paiement Premium</h3>
453
+ <div class="mb-6">
454
+ <label class="block text-gray-300 mb-2">Méthode de paiement</label>
455
+ <div class="grid grid-cols-2 gap-4 mb-4">
456
+ <button id="paypalBtn" class="py-3 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center transition">
457
+ <i class="fab fa-cc-paypal text-2xl text-blue-400 mr-2"></i> PayPal
458
+ </button>
459
+ <button id="stripeBtn" class="py-3 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center transition">
460
+ <i class="fab fa-cc-stripe text-2xl text-purple-400 mr-2"></i> Stripe
461
+ </button>
462
+ </div>
463
+ </div>
464
+ <div class="bg-gray-700 rounded-lg p-4 mb-6">
465
+ <div class="flex justify-between mb-2">
466
+ <span class="text-gray-400">Abonnement Premium</span>
467
+ <span class="font-semibold">29.99€</span>
468
+ </div>
469
+ <div class="flex justify-between">
470
+ <span class="text-gray-400">Taxes</span>
471
+ <span class="font-semibold">5.99€</span>
472
+ </div>
473
+ <div class="border-t border-gray-600 my-2"></div>
474
+ <div class="flex justify-between font-bold text-lg">
475
+ <span>Total</span>
476
+ <span>35.98€</span>
477
+ </div>
478
+ </div>
479
+ <button id="confirmPaymentBtn" class="w-full py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition">
480
+ Confirmer le paiement
481
+ </button>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Cart Modal -->
486
+ <div id="cartModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
487
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
488
+ <div class="relative bg-gray-800 rounded-xl max-w-md w-full mx-4 glass-effect p-6">
489
+ <button id="closeCartModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
490
+ <i class="fas fa-times text-xl"></i>
491
+ </button>
492
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
493
+ <i class="fas fa-shopping-cart mr-2"></i>Votre Panier
494
+ </h3>
495
+ <div id="cartItems" class="max-h-96 overflow-y-auto mb-4">
496
+ <!-- Cart items will be added here dynamically -->
497
+ <p class="text-gray-400 text-center py-8">Votre panier est vide</p>
498
+ </div>
499
+ <div class="border-t border-gray-700 pt-4">
500
+ <div class="flex justify-between mb-2">
501
+ <span class="text-gray-400">Sous-total</span>
502
+ <span id="cartSubtotal" class="font-semibold">0.00€</span>
503
+ </div>
504
+ <div class="flex justify-between mb-4">
505
+ <span class="text-gray-400">Taxes</span>
506
+ <span id="cartTaxes" class="font-semibold">0.00€</span>
507
+ </div>
508
+ <div class="flex justify-between font-bold text-lg border-t border-gray-700 pt-2 mb-6">
509
+ <span>Total</span>
510
+ <span id="cartTotal" class="text-purple-400">0.00€</span>
511
+ </div>
512
+ <div class="grid grid-cols-2 gap-4">
513
+ <button id="clearCartBtn" class="py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
514
+ Vider le panier
515
+ </button>
516
+ <button id="checkoutBtn" class="py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition">
517
+ Paiement
518
+ </button>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Dashboard Modal -->
525
+ <div id="dashboardModal" class="fixed inset-0 z-50 flex items-start justify-center hidden overflow-y-auto py-8">
526
+ <div class="absolute inset-0 bg-black bg-opacity-70"></div>
527
+ <div class="relative bg-gray-800 rounded-xl max-w-4xl w-full mx-4 glass-effect p-8">
528
+ <button id="closeDashboardModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
529
+ <i class="fas fa-times text-xl"></i>
530
+ </button>
531
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
532
+ <i class="fas fa-tachometer-alt mr-2"></i>Tableau de bord
533
+ </h3>
534
+
535
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
536
+ <div class="bg-gray-700 rounded-lg p-6">
537
+ <h4 class="text-xl font-semibold mb-4 flex items-center">
538
+ <i class="fas fa-user-circle mr-2 text-blue-400"></i>Profil
539
+ </h4>
540
+ <div class="space-y-3">
541
+ <div>
542
+ <p class="text-gray-400 text-sm">Nom complet</p>
543
+ <p id="dashboardName" class="font-medium">Jean Dupont</p>
544
+ </div>
545
+ <div>
546
+ <p class="text-gray-400 text-sm">Email</p>
547
+ <p id="dashboardEmail" class="font-medium">[email protected]</p>
548
+ </div>
549
+ <div>
550
+ <p class="text-gray-400 text-sm">Date d'inscription</p>
551
+ <p class="font-medium">15/03/2023</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="bg-gray-700 rounded-lg p-6">
557
+ <h4 class="text-xl font-semibold mb-4 flex items-center">
558
+ <i class="fas fa-crown mr-2 text-yellow-400"></i>Abonnement
559
+ </h4>
560
+ <div class="space-y-3">
561
+ <div>
562
+ <p class="text-gray-400 text-sm">Statut</p>
563
+ <p class="font-medium text-green-400">Actif (Premium)</p>
564
+ </div>
565
+ <div>
566
+ <p class="text-gray-400 text-sm">Prochain paiement</p>
567
+ <p class="font-medium">15/04/2023</p>
568
+ </div>
569
+ <div>
570
+ <p class="text-gray-400 text-sm">Méthode de paiement</p>
571
+ <p class="font-medium flex items-center">
572
+ <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
573
+ </p>
574
+ </div>
575
+ <button id="manageSubscriptionBtn" class="mt-4 w-full py-2 bg-gray-600 hover:bg-gray-500 rounded-lg transition">
576
+ Gérer l'abonnement
577
+ </button>
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="bg-gray-700 rounded-lg p-6 mb-8">
583
+ <h4 class="text-xl font-semibold mb-4 flex items-center">
584
+ <i class="fas fa-history mr-2 text-purple-400"></i>Historique des paiements
585
+ </h4>
586
+ <div class="overflow-x-auto">
587
+ <table class="w-full">
588
+ <thead>
589
+ <tr class="text-left text-gray-400 border-b border-gray-600">
590
+ <th class="pb-2">Date</th>
591
+ <th class="pb-2">Montant</th>
592
+ <th class="pb-2">Méthode</th>
593
+ <th class="pb-2">Statut</th>
594
+ </tr>
595
+ </thead>
596
+ <tbody>
597
+ <tr class="border-b border-gray-600">
598
+ <td class="py-3">15/03/2023</td>
599
+ <td>35.98€</td>
600
+ <td class="flex items-center">
601
+ <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
602
+ </td>
603
+ <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
604
+ </tr>
605
+ <tr class="border-b border-gray-600">
606
+ <td class="py-3">15/02/2023</td>
607
+ <td>35.98€</td>
608
+ <td class="flex items-center">
609
+ <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
610
+ </td>
611
+ <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
612
+ </tr>
613
+ <tr>
614
+ <td class="py-3">15/01/2023</td>
615
+ <td>35.98€</td>
616
+ <td class="flex items-center">
617
+ <i class="fab fa-cc-stripe text-purple-400 mr-2"></i> Stripe
618
+ </td>
619
+ <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
620
+ </tr>
621
+ </tbody>
622
+ </table>
623
+ </div>
624
+ </div>
625
+
626
+ <div class="flex justify-end space-x-4">
627
+ <button id="logoutBtn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
628
+ <i class="fas fa-sign-out-alt mr-2"></i>Déconnexion
629
+ </button>
630
+ <button id="refreshDashboardBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition">
631
+ <i class="fas fa-sync-alt mr-2"></i>Actualiser
632
+ </button>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Success Notification -->
638
+ <div id="successNotification" class="fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center transform translate-y-10 opacity-0 transition-all duration-300 z-50">
639
+ <i class="fas fa-check-circle mr-2"></i>
640
+ <span id="successMessage">Opération réussie!</span>
641
+ </div>
642
+
643
+ <script>
644
+ // Cart functionality
645
+ let cart = [];
646
+
647
+ // DOM Elements
648
+ const cartBtn = document.getElementById('cartBtn');
649
+ const cartModal = document.getElementById('cartModal');
650
+ const closeCartModal = document.getElementById('closeCartModal');
651
+ const cartItems = document.getElementById('cartItems');
652
+ const cartSubtotal = document.getElementById('cartSubtotal');
653
+ const cartTaxes = document.getElementById('cartTaxes');
654
+ const cartTotal = document.getElementById('cartTotal');
655
+ const clearCartBtn = document.getElementById('clearCartBtn');
656
+ const checkoutBtn = document.getElementById('checkoutBtn');
657
+ const cartCount = document.getElementById('cartCount');
658
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
659
+
660
+ // Login/Register elements
661
+ const loginBtn = document.getElementById('loginBtn');
662
+ const loginModal = document.getElementById('loginModal');
663
+ const closeLoginModal = document.getElementById('closeLoginModal');
664
+ const registerModal = document.getElementById('registerModal');
665
+ const closeRegisterModal = document.getElementById('closeRegisterModal');
666
+ const showRegisterBtn = document.getElementById('showRegisterBtn');
667
+ const showLoginBtn = document.getElementById('showLoginBtn');
668
+
669
+ // Subscribe elements
670
+ const subscribeBtn = document.getElementById('subscribeBtn');
671
+ const subscribeModal = document.getElementById('subscribeModal');
672
+ const closeSubscribeModal = document.getElementById('closeSubscribeModal');
673
+ const selectFreeBtn = document.getElementById('selectFreeBtn');
674
+ const selectPremiumBtn = document.getElementById('selectPremiumBtn');
675
+
676
+ // Payment elements
677
+ const paymentModal = document.getElementById('paymentModal');
678
+ const closePaymentModal = document.getElementById('closePaymentModal');
679
+ const paypalBtn = document.getElementById('paypalBtn');
680
+ const stripeBtn = document.getElementById('stripeBtn');
681
+ const confirmPaymentBtn = document.getElementById('confirmPaymentBtn');
682
+
683
+ // Dashboard elements
684
+ const dashboardModal = document.getElementById('dashboardModal');
685
+ const closeDashboardModal = document.getElementById('closeDashboardModal');
686
+ const manageSubscriptionBtn = document.getElementById('manageSubscriptionBtn');
687
+ const logoutBtn = document.getElementById('logoutBtn');
688
+ const refreshDashboardBtn = document.getElementById('refreshDashboardBtn');
689
+
690
+ // Success notification
691
+ const successNotification = document.getElementById('successNotification');
692
+
693
+ // Event Listeners
694
+ cartBtn.addEventListener('click', () => {
695
+ updateCartDisplay();
696
+ cartModal.classList.remove('hidden');
697
+ });
698
+
699
+ closeCartModal.addEventListener('click', () => {
700
+ cartModal.classList.add('hidden');
701
+ });
702
+
703
+ clearCartBtn.addEventListener('click', () => {
704
+ cart = [];
705
+ updateCartCount();
706
+ updateCartDisplay();
707
+ showSuccess('Panier vidé avec succès');
708
+ });
709
+
710
+ checkoutBtn.addEventListener('click', () => {
711
+ if (cart.length === 0) {
712
+ showSuccess('Votre panier est vide');
713
+ return;
714
+ }
715
+ cartModal.classList.add('hidden');
716
+ paymentModal.classList.remove('hidden');
717
+ });
718
+
719
+ addToCartButtons.forEach(button => {
720
+ button.addEventListener('click', () => {
721
+ const id = button.getAttribute('data-id');
722
+ const name = button.getAttribute('data-name');
723
+ const price = parseFloat(button.getAttribute('data-price'));
724
+
725
+ // Check if item already in cart
726
+ const existingItem = cart.find(item => item.id === id);
727
+
728
+ if (existingItem) {
729
+ existingItem.quantity += 1;
730
+ } else {
731
+ cart.push({
732
+ id,
733
+ name,
734
+ price,
735
+ quantity: 1
736
+ });
737
+ }
738
+
739
+ updateCartCount();
740
+ showSuccess(`${name} ajouté au panier`);
741
+
742
+ // Add pulse animation to cart button
743
+ cartBtn.classList.add('pulse');
744
+ setTimeout(() => {
745
+ cartBtn.classList.remove('pulse');
746
+ }, 1000);
747
+ });
748
+ });
749
+
750
+ // Login/Register functionality
751
+ loginBtn.addEventListener('click', () => {
752
+ loginModal.classList.remove('hidden');
753
+ });
754
+
755
+ closeLoginModal.addEventListener('click', () => {
756
+ loginModal.classList.add('hidden');
757
+ });
758
+
759
+ closeRegisterModal.addEventListener('click', () => {
760
+ registerModal.classList.add('hidden');
761
+ });
762
+
763
+ showRegisterBtn.addEventListener('click', () => {
764
+ loginModal.classList.add('hidden');
765
+ registerModal.classList.remove('hidden');
766
+ });
767
+
768
+ showLoginBtn.addEventListener('click', () => {
769
+ registerModal.classList.add('hidden');
770
+ loginModal.classList.remove('hidden');
771
+ });
772
+
773
+ // Subscribe functionality
774
+ subscribeBtn.addEventListener('click', () => {
775
+ subscribeModal.classList.remove('hidden');
776
+ });
777
+
778
+ closeSubscribeModal.addEventListener('click', () => {
779
+ subscribeModal.classList.add('hidden');
780
+ });
781
+
782
+ selectFreeBtn.addEventListener('click', () => {
783
+ subscribeModal.classList.add('hidden');
784
+ showSuccess('Abonnement gratuit activé!');
785
+ loginBtn.innerHTML = '<i class="fas fa-user mr-2"></i>Mon compte';
786
+ loginBtn.removeEventListener('click', loginBtnClickHandler);
787
+ loginBtn.addEventListener('click', dashboardBtnClickHandler);
788
+ });
789
+
790
+ selectPremiumBtn.addEventListener('click', () => {
791
+ subscribeModal.classList.add('hidden');
792
+ paymentModal.classList.remove('hidden');
793
+ });
794
+
795
+ // Payment functionality
796
+ closePaymentModal.addEventListener('click', () => {
797
+ paymentModal.classList.add('hidden');
798
+ });
799
+
800
+ paypalBtn.addEventListener('click', () => {
801
+ // In a real app, this would redirect to PayPal
802
+ showSuccess('Redirection vers PayPal...');
803
+ setTimeout(() => {
804
+ paymentModal.classList.add('hidden');
805
+ showSuccess('Paiement réussi via PayPal!');
806
+ loginBtn.innerHTML = '<i class="fas fa-user mr-2"></i>Mon compte';
807
+ loginBtn.removeEventListener('click', loginBtnClickHandler);
808
+ loginBtn.addEventListener('click', dashboardBtnClickHandler);
809
+ }, 2000);
810
+ });
811
+
812
+ stripeBtn.addEventListener('click', () => {
813
+ // In a real app, this would process via Stripe
814
+ showSuccess('Traitement du paiement Stripe...');
815
+ setTimeout(() => {
816
+ paymentModal.classList.add('hidden');
817
+ showSuccess('Paiement réussi via Stripe!');
818
+ loginBtn.innerHTML = '<i class="fas fa-user mr-2"></i>Mon compte';
819
+ loginBtn.removeEventListener('click', loginBtnClickHandler);
820
+ loginBtn.addEventListener('click', dashboardBtnClickHandler);
821
+ }, 2000);
822
+ });
823
+
824
+ confirmPaymentBtn.addEventListener('click', () => {
825
+ // This would confirm the selected payment method
826
+ if (paypalBtn.classList.contains('bg-purple-600')) {
827
+ paypalBtn.click();
828
+ } else if (stripeBtn.classList.contains('bg-purple-600')) {
829
+ stripeBtn.click();
830
+ } else {
831
+ showSuccess('Veuillez sélectionner une méthode de paiement');
832
+ }
833
+ });
834
+
835
+ // Dashboard functionality
836
+ function dashboardBtnClickHandler() {
837
+ dashboardModal.classList.remove('hidden');
838
+ }
839
+
840
+ function loginBtnClickHandler() {
841
+ loginModal.classList.remove('hidden');
842
+ }
843
+
844
+ closeDashboardModal.addEventListener('click', () => {
845
+ dashboardModal.classList.add('hidden');
846
+ });
847
+
848
+ manageSubscriptionBtn.addEventListener('click', () => {
849
+ dashboardModal.classList.add('hidden');
850
+ paymentModal.classList.remove('hidden');
851
+ });
852
+
853
+ logoutBtn.addEventListener('click', () => {
854
+ dashboardModal.classList.add('hidden');
855
+ loginBtn.innerHTML = '<i class="fas fa-user mr-2"></i>Connexion';
856
+ loginBtn.removeEventListener('click', dashboardBtnClickHandler);
857
+ loginBtn.addEventListener('click', loginBtnClickHandler);
858
+ showSuccess('Déconnexion réussie');
859
+ });
860
+
861
+ refreshDashboardBtn.addEventListener('click', () => {
862
+ showSuccess('Tableau de bord actualisé');
863
+ });
864
+
865
+ // Payment method selection
866
+ paypalBtn.addEventListener('click', function() {
867
+ this.classList.add('bg-purple-600');
868
+ stripeBtn.classList.remove('bg-purple-600');
869
+ });
870
+
871
+ stripeBtn.addEventListener('click', function() {
872
+ this.classList.add('bg-purple-600');
873
+ paypalBtn.classList.remove('bg-purple-600');
874
+ });
875
+
876
+ // Helper functions
877
+ function updateCartCount() {
878
+ const count = cart.reduce((total, item) => total + item.quantity, 0);
879
+ cartCount.textContent = count;
880
+ cartCount.classList.toggle('hidden', count === 0);
881
+ }
882
+
883
+ function updateCartDisplay() {
884
+ if (cart.length === 0) {
885
+ cartItems.innerHTML = '<p class="text-gray-400 text-center py-8">Votre panier est vide</p>';
886
+ cartSubtotal.textContent = '0.00€';
887
+ cartTaxes.textContent = '0.00€';
888
+ cartTotal.textContent = '0.00€';
889
+ return;
890
+ }
891
+
892
+ let itemsHTML = '';
893
+ let subtotal = 0;
894
+
895
+ cart.forEach(item => {
896
+ const itemTotal = item.price * item.quantity;
897
+ subtotal += itemTotal;
898
+
899
+ itemsHTML += `
900
+ <div class="flex justify-between items-center py-3 border-b border-gray-700">
901
+ <div>
902
+ <h4 class="font-medium">${item.name}</h4>
903
+ <div class="flex items-center mt-1">
904
+ <button class="decrease-quantity px-2 py-1 bg-gray-700 rounded mr-2" data-id="${item.id}">
905
+ <i class="fas fa-minus text-xs"></i>
906
+ </button>
907
+ <span class="quantity">${item.quantity}</span>
908
+ <button class="increase-quantity px-2 py-1 bg-gray-700 rounded ml-2" data-id="${item.id}">
909
+ <i class="fas fa-plus text-xs"></i>
910
+ </button>
911
+ </div>
912
+ </div>
913
+ <div class="text-right">
914
+ <p class="text-purple-400 font-medium">${itemTotal.toFixed(2)}€</p>
915
+ <button class="remove-item text-red-400 text-sm mt-1" data-id="${item.id}">
916
+ <i class="fas fa-trash"></i>
917
+ </button>
918
+ </div>
919
+ </div>
920
+ `;
921
+ });
922
+
923
+ const taxes = subtotal * 0.2; // 20% tax
924
+ const total = subtotal + taxes;
925
+
926
+ cartItems.innerHTML = itemsHTML;
927
+ cartSubtotal.textContent = subtotal.toFixed(2) + '€';
928
+ cartTaxes.textContent = taxes.toFixed(2) + '€';
929
+ cartTotal.textContent = total.toFixed(2) + '€';
930
+
931
+ // Add event listeners to new buttons
932
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
933
+ button.addEventListener('click', function() {
934
+ const id = this.getAttribute('data-id');
935
+ const item = cart.find(item => item.id === id);
936
+
937
+ if (item.quantity > 1) {
938
+ item.quantity -= 1;
939
+ updateCartCount();
940
+ updateCartDisplay();
941
+ }
942
+ });
943
+ });
944
+
945
+ document.querySelectorAll('.increase-quantity').forEach(button => {
946
+ button.addEventListener('click', function() {
947
+ const id = this.getAttribute('data-id');
948
+ const item = cart.find(item => item.id === id);
949
+
950
+ item.quantity += 1;
951
+ updateCartCount();
952
+ updateCartDisplay();
953
+ });
954
+ });
955
+
956
+ document.querySelectorAll('.remove-item').forEach(button => {
957
+ button.addEventListener('click', function() {
958
+ const id = this.getAttribute('data-id');
959
+ cart = cart.filter(item => item.id !== id);
960
+ updateCartCount();
961
+ updateCartDisplay();
962
+ showSuccess('Article supprimé du panier');
963
+ });
964
+ });
965
+ }
966
+
967
+ function showSuccess(message) {
968
+ const successMessage = document.getElementById('successMessage');
969
+ successMessage.textContent = message;
970
+
971
+ successNotification.classList.remove('translate-y-10', 'opacity-0');
972
+ successNotification.classList.add('translate-y-0', 'opacity-100');
973
+
974
+ setTimeout(() => {
975
+ successNotification.classList.remove('translate-y-0', 'opacity-100');
976
+ successNotification.classList.add('translate-y-10', 'opacity-0');
977
+ }, 3000);
978
+ }
979
+
980
+ // Initialize login button handler
981
+ loginBtn.addEventListener('click', loginBtnClickHandler);
982
+
983
+ // Open external payment links in new window
984
+ paypalBtn.addEventListener('click', function(e) {
985
+ e.preventDefault();
986
+ window.open('https://www.paypal.com/signin', '_blank');
987
+ });
988
+
989
+ stripeBtn.addEventListener('click', function(e) {
990
+ e.preventDefault();
991
+ window.open('https://dashboard.stripe.com/login', '_blank');
992
+ });
993
+ </script>
994
+ <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/ai-marketplace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
995
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
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 : le tout en automatique ouvrer chaque bouton cliquéé dans une nouvel fenetre , je veut un tres belle interface tres animer et un jolie arriere plant