Hugging Face's logo

Spaces:
docto41
/
learn-hub
Running

App Files Community
docto41 commited on
Commit
3082c42
·
verified ·
1 Parent(s): a76578b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1075 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Learn Hub
3
- emoji: 😻
4
- colorFrom: indigo
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: learn-hub
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: yellow
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,1075 @@
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>LearnHub - Plateforme de Cours en Ligne</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(-10px); }
14
+ }
15
+ .floating {
16
+ animation: float 6s ease-in-out infinite;
17
+ }
18
+ .course-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .course-card {
23
+ transition: all 0.3s ease;
24
+ }
25
+ .progress-ring__circle {
26
+ transition: stroke-dashoffset 0.35s;
27
+ transform: rotate(-90deg);
28
+ transform-origin: 50% 50%;
29
+ }
30
+ .tab-content {
31
+ display: none;
32
+ }
33
+ .tab-content.active {
34
+ display: block;
35
+ animation: fadeIn 0.5s;
36
+ }
37
+ @keyframes fadeIn {
38
+ from { opacity: 0; }
39
+ to { opacity: 1; }
40
+ }
41
+ .cart-item {
42
+ transition: all 0.3s ease;
43
+ }
44
+ .cart-item:hover {
45
+ background-color: #f8fafc;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <!-- Navigation -->
51
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
52
+ <div class="container mx-auto px-4 py-3">
53
+ <div class="flex justify-between items-center">
54
+ <div class="flex items-center space-x-2">
55
+ <i class="fas fa-graduation-cap text-3xl text-indigo-600"></i>
56
+ <span class="text-xl font-bold text-indigo-600">LearnHub</span>
57
+ </div>
58
+
59
+ <div class="hidden md:flex items-center space-x-8">
60
+ <a href="#courses" class="text-gray-700 hover:text-indigo-600">Cours</a>
61
+ <a href="#features" class="text-gray-700 hover:text-indigo-600">Fonctionnalités</a>
62
+ <a href="#pricing" class="text-gray-700 hover:text-indigo-600">Tarifs</a>
63
+ <div class="relative">
64
+ <button id="cart-btn" class="text-gray-700 hover:text-indigo-600 relative">
65
+ <i class="fas fa-shopping-cart text-xl"></i>
66
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
67
+ </button>
68
+ <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2">
69
+ <div class="px-4 py-2 border-b">
70
+ <h3 class="font-bold">Votre Panier</h3>
71
+ </div>
72
+ <div id="cart-items" class="max-h-60 overflow-y-auto">
73
+ <p class="text-gray-500 text-center py-4">Votre panier est vide</p>
74
+ </div>
75
+ <div class="px-4 py-2 border-t">
76
+ <div class="flex justify-between mb-2">
77
+ <span>Total:</span>
78
+ <span id="cart-total">0€</span>
79
+ </div>
80
+ <button id="checkout-btn" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 disabled:opacity-50" disabled>
81
+ Payer maintenant
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <button id="auth-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
87
+ Se connecter
88
+ </button>
89
+ </div>
90
+
91
+ <button id="mobile-menu-btn" class="md:hidden text-gray-700">
92
+ <i class="fas fa-bars text-xl"></i>
93
+ </button>
94
+ </div>
95
+
96
+ <!-- Mobile menu -->
97
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
98
+ <a href="#courses" class="block py-2 text-gray-700 hover:text-indigo-600">Cours</a>
99
+ <a href="#features" class="block py-2 text-gray-700 hover:text-indigo-600">Fonctionnalités</a>
100
+ <a href="#pricing" class="block py-2 text-gray-700 hover:text-indigo-600">Tarifs</a>
101
+ <div class="flex items-center py-2 text-gray-700">
102
+ <i class="fas fa-shopping-cart mr-2"></i>
103
+ <span>Panier</span>
104
+ <span id="mobile-cart-count" class="ml-auto bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
105
+ </div>
106
+ <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 mt-2">
107
+ Se connecter
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </nav>
112
+
113
+ <!-- Hero Section -->
114
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
115
+ <div class="container mx-auto px-4">
116
+ <div class="flex flex-col md:flex-row items-center">
117
+ <div class="md:w-1/2 mb-10 md:mb-0">
118
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Apprenez sans limites avec LearnHub</h1>
119
+ <p class="text-xl mb-8">Accédez à des milliers de cours en ligne dans tous les domaines, enseignés par des experts.</p>
120
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
121
+ <a href="#courses" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold text-center hover:bg-gray-100 transition">
122
+ Explorer les cours
123
+ </a>
124
+ <a href="#pricing" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold text-center hover:bg-white hover:text-indigo-600 transition">
125
+ Voir les abonnements
126
+ </a>
127
+ </div>
128
+ </div>
129
+ <div class="md:w-1/2 flex justify-center">
130
+ <img src="https://cdn-icons-png.flaticon.com/512/3176/3176272.png" alt="Online Learning" class="w-64 h-64 floating">
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- Features Section -->
137
+ <section id="features" class="py-16 bg-white">
138
+ <div class="container mx-auto px-4">
139
+ <h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir LearnHub?</h2>
140
+
141
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
142
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition">
143
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
144
+ <i class="fas fa-laptop-code text-indigo-600 text-2xl"></i>
145
+ </div>
146
+ <h3 class="text-xl font-bold mb-2">Apprentissage flexible</h3>
147
+ <p class="text-gray-600">Apprenez à votre rythme, quand vous voulez et où vous voulez. Accédez aux cours 24h/24 depuis n'importe quel appareil.</p>
148
+ </div>
149
+
150
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition">
151
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
152
+ <i class="fas fa-chalkboard-teacher text-purple-600 text-2xl"></i>
153
+ </div>
154
+ <h3 class="text-xl font-bold mb-2">Experts du secteur</h3>
155
+ <p class="text-gray-600">Nos cours sont enseignés par des professionnels expérimentés et des experts reconnus dans leur domaine.</p>
156
+ </div>
157
+
158
+ <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition">
159
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
160
+ <i class="fas fa-certificate text-green-600 text-2xl"></i>
161
+ </div>
162
+ <h3 class="text-xl font-bold mb-2">Certifications</h3>
163
+ <p class="text-gray-600">Obtenez des certificats reconnus par les employeurs pour valider vos nouvelles compétences.</p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Courses Section -->
170
+ <section id="courses" class="py-16 bg-gray-50">
171
+ <div class="container mx-auto px-4">
172
+ <div class="flex justify-between items-center mb-12">
173
+ <h2 class="text-3xl font-bold">Nos Cours Populaires</h2>
174
+ <div class="flex space-x-2">
175
+ <button class="category-btn active px-4 py-2 rounded-full bg-indigo-600 text-white" data-category="all">Tous</button>
176
+ <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="tech">Technologie</button>
177
+ <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="business">Business</button>
178
+ <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="design">Design</button>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
183
+ <!-- Course 1 -->
184
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="tech">
185
+ <div class="relative">
186
+ <img src="https://images.unsplash.com/photo-1551033406-611a8e0dcb14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Développement Web" class="w-full h-48 object-cover">
187
+ <div class="absolute top-2 right-2 bg-indigo-600 text-white px-2 py-1 rounded text-xs font-bold">Nouveau</div>
188
+ </div>
189
+ <div class="p-6">
190
+ <div class="flex justify-between items-start mb-2">
191
+ <h3 class="text-xl font-bold">Développement Web Full Stack</h3>
192
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Tech</span>
193
+ </div>
194
+ <p class="text-gray-600 mb-4">Maîtrisez HTML, CSS, JavaScript, React, Node.js et MongoDB pour devenir développeur full stack.</p>
195
+ <div class="flex items-center mb-4">
196
+ <div class="flex -space-x-2">
197
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
198
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
199
+ </div>
200
+ <span class="text-sm text-gray-500 ml-2">Par Sarah & Marc</span>
201
+ </div>
202
+ <div class="flex justify-between items-center">
203
+ <div>
204
+ <span class="text-2xl font-bold">49€</span>
205
+ <span class="text-gray-500 line-through ml-2">99€</span>
206
+ </div>
207
+ <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="1" data-name="Développement Web Full Stack" data-price="49">
208
+ Ajouter au panier
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Course 2 -->
215
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="business">
216
+ <div class="relative">
217
+ <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Marketing Digital" class="w-full h-48 object-cover">
218
+ </div>
219
+ <div class="p-6">
220
+ <div class="flex justify-between items-start mb-2">
221
+ <h3 class="text-xl font-bold">Marketing Digital Complet</h3>
222
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Business</span>
223
+ </div>
224
+ <p class="text-gray-600 mb-4">Apprenez les stratégies de marketing digital les plus efficaces pour booster votre business en ligne.</p>
225
+ <div class="flex items-center mb-4">
226
+ <div class="flex -space-x-2">
227
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
228
+ </div>
229
+ <span class="text-sm text-gray-500 ml-2">Par Amélie</span>
230
+ </div>
231
+ <div class="flex justify-between items-center">
232
+ <div>
233
+ <span class="text-2xl font-bold">39€</span>
234
+ <span class="text-gray-500 line-through ml-2">79€</span>
235
+ </div>
236
+ <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="2" data-name="Marketing Digital Complet" data-price="39">
237
+ Ajouter au panier
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Course 3 -->
244
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="design">
245
+ <div class="relative">
246
+ <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="UI/UX Design" class="w-full h-48 object-cover">
247
+ <div class="absolute top-2 right-2 bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">Populaire</div>
248
+ </div>
249
+ <div class="p-6">
250
+ <div class="flex justify-between items-start mb-2">
251
+ <h3 class="text-xl font-bold">UI/UX Design Masterclass</h3>
252
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Design</span>
253
+ </div>
254
+ <p class="text-gray-600 mb-4">Devenez un designer d'interface et d'expérience utilisateur avec Figma, Adobe XD et plus encore.</p>
255
+ <div class="flex items-center mb-4">
256
+ <div class="flex -space-x-2">
257
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
258
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
259
+ </div>
260
+ <span class="text-sm text-gray-500 ml-2">Par Thomas & Léa</span>
261
+ </div>
262
+ <div class="flex justify-between items-center">
263
+ <div>
264
+ <span class="text-2xl font-bold">59€</span>
265
+ <span class="text-gray-500 line-through ml-2">119€</span>
266
+ </div>
267
+ <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="3" data-name="UI/UX Design Masterclass" data-price="59">
268
+ Ajouter au panier
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Course 4 -->
275
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="tech">
276
+ <div class="relative">
277
+ <img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Data Science" class="w-full h-48 object-cover">
278
+ </div>
279
+ <div class="p-6">
280
+ <div class="flex justify-between items-start mb-2">
281
+ <h3 class="text-xl font-bold">Data Science avec Python</h3>
282
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Tech</span>
283
+ </div>
284
+ <p class="text-gray-600 mb-4">Apprenez à analyser des données et à créer des modèles prédictifs avec Python, Pandas et Scikit-learn.</p>
285
+ <div class="flex items-center mb-4">
286
+ <div class="flex -space-x-2">
287
+ <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
288
+ </div>
289
+ <span class="text-sm text-gray-500 ml-2">Par Jean</span>
290
+ </div>
291
+ <div class="flex justify-between items-center">
292
+ <div>
293
+ <span class="text-2xl font-bold">69€</span>
294
+ <span class="text-gray-500 line-through ml-2">129€</span>
295
+ </div>
296
+ <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="4" data-name="Data Science avec Python" data-price="69">
297
+ Ajouter au panier
298
+ </button>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Course 5 -->
304
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="business">
305
+ <div class="relative">
306
+ <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Finance" class="w-full h-48 object-cover">
307
+ </div>
308
+ <div class="p-6">
309
+ <div class="flex justify-between items-start mb-2">
310
+ <h3 class="text-xl font-bold">Finance pour Entrepreneurs</h3>
311
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Business</span>
312
+ </div>
313
+ <p class="text-gray-600 mb-4">Maîtrisez les fondamentaux de la finance pour prendre les bonnes décisions pour votre entreprise.</p>
314
+ <div class="flex items-center mb-4">
315
+ <div class="flex -space-x-2">
316
+ <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
317
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
318
+ </div>
319
+ <span class="text-sm text-gray-500 ml-2">Par Sophie & Pierre</span>
320
+ </div>
321
+ <div class="flex justify-between items-center">
322
+ <div>
323
+ <span class="text-2xl font-bold">45€</span>
324
+ <span class="text-gray-500 line-through ml-2">89€</span>
325
+ </div>
326
+ <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="5" data-name="Finance pour Entrepreneurs" data-price="45">
327
+ Ajouter au panier
328
+ </button>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Course 6 -->
334
+ <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="design">
335
+ <div class="relative">
336
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Photographie" class="w-full h-48 object-cover">
337
+ </div>
338
+ <div class="p-6">
339
+ <div class="flex justify-between items-start mb-2">
340
+ <h3 class="text-xl font-bold">Photographie Professionnelle</h3>
341
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Design</span>
342
+ </div>
343
+ <p class="text-gray-600 mb-4">Apprenez les techniques des photographes professionnels et maîtrisez la lumière, la composition et l'édition.</p>
344
+ <div class="flex items-center mb-4">
345
+ <div class="flex -space-x-2">
346
+ <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
347
+ </div>
348
+ <span class="text-sm text-gray-500 ml-2">Par Nicolas</span>
349
+ </div>
350
+ <div class="flex justify-between items-center">
351
+ <div>
352
+ <span class="text-2xl font-bold">35€</span>
353
+ <span class="text-gray-500 line-through ml-2">75€</span>
354
+ </div>
355
+ <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="6" data-name="Photographie Professionnelle" data-price="35">
356
+ Ajouter au panier
357
+ </button>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="text-center mt-12">
364
+ <button class="bg-white border-2 border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-indigo-600 hover:text-white transition">
365
+ Voir tous les cours (200+)
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Pricing Section -->
372
+ <section id="pricing" class="py-16 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <h2 class="text-3xl font-bold text-center mb-4">Choisissez votre abonnement</h2>
375
+ <p class="text-xl text-gray-600 text-center mb-12">Accédez à tous nos cours avec un abonnement flexible</p>
376
+
377
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
378
+ <!-- Free Plan -->
379
+ <div class="border border-gray-200 rounded-xl p-8 hover:border-indigo-500 transition">
380
+ <h3 class="text-xl font-bold mb-2">Gratuit</h3>
381
+ <p class="text-gray-600 mb-6">Essayer gratuitement avec accès limité</p>
382
+ <div class="mb-6">
383
+ <span class="text-4xl font-bold">0€</span>
384
+ <span class="text-gray-500">/mois</span>
385
+ </div>
386
+ <ul class="space-y-3 mb-8">
387
+ <li class="flex items-center">
388
+ <i class="fas fa-check text-green-500 mr-2"></i>
389
+ <span>Accès à 3 cours gratuits</span>
390
+ </li>
391
+ <li class="flex items-center">
392
+ <i class="fas fa-check text-green-500 mr-2"></i>
393
+ <span>Support communautaire</span>
394
+ </li>
395
+ <li class="flex items-center text-gray-400">
396
+ <i class="fas fa-times text-red-400 mr-2"></i>
397
+ <span>Certificats de complétion</span>
398
+ </li>
399
+ <li class="flex items-center text-gray-400">
400
+ <i class="fas fa-times text-red-400 mr-2"></i>
401
+ <span>Accès à tous les cours</span>
402
+ </li>
403
+ <li class="flex items-center text-gray-400">
404
+ <i class="fas fa-times text-red-400 mr-2"></i>
405
+ <span>Téléchargement des ressources</span>
406
+ </li>
407
+ </ul>
408
+ <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition">
409
+ S'inscrire gratuitement
410
+ </button>
411
+ </div>
412
+
413
+ <!-- Pro Plan -->
414
+ <div class="border-2 border-indigo-500 rounded-xl p-8 bg-indigo-50 relative">
415
+ <div class="absolute top-0 right-0 bg-indigo-600 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-xs font-bold">Populaire</div>
416
+ <h3 class="text-xl font-bold mb-2">Pro</h3>
417
+ <p class="text-gray-600 mb-6">Pour ceux qui veulent apprendre sérieusement</p>
418
+ <div class="mb-6">
419
+ <span class="text-4xl font-bold">19€</span>
420
+ <span class="text-gray-500">/mois</span>
421
+ </div>
422
+ <ul class="space-y-3 mb-8">
423
+ <li class="flex items-center">
424
+ <i class="fas fa-check text-green-500 mr-2"></i>
425
+ <span>Accès à tous les cours</span>
426
+ </li>
427
+ <li class="flex items-center">
428
+ <i class="fas fa-check text-green-500 mr-2"></i>
429
+ <span>Certificats de complétion</span>
430
+ </li>
431
+ <li class="flex items-center">
432
+ <i class="fas fa-check text-green-500 mr-2"></i>
433
+ <span>Téléchargement des ressources</span>
434
+ </li>
435
+ <li class="flex items-center">
436
+ <i class="fas fa-check text-green-500 mr-2"></i>
437
+ <span>Support prioritaire</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-check text-green-500 mr-2"></i>
441
+ <span>Nouveaux cours chaque semaine</span>
442
+ </li>
443
+ </ul>
444
+ <button class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition">
445
+ Choisir Pro
446
+ </button>
447
+ </div>
448
+
449
+ <!-- Team Plan -->
450
+ <div class="border border-gray-200 rounded-xl p-8 hover:border-indigo-500 transition">
451
+ <h3 class="text-xl font-bold mb-2">Entreprise</h3>
452
+ <p class="text-gray-600 mb-6">Pour les équipes de 5 personnes ou plus</p>
453
+ <div class="mb-6">
454
+ <span class="text-4xl font-bold">15€</span>
455
+ <span class="text-gray-500">/mois par utilisateur</span>
456
+ </div>
457
+ <ul class="space-y-3 mb-8">
458
+ <li class="flex items-center">
459
+ <i class="fas fa-check text-green-500 mr-2"></i>
460
+ <span>Tous les avantages Pro</span>
461
+ </li>
462
+ <li class="flex items-center">
463
+ <i class="fas fa-check text-green-500 mr-2"></i>
464
+ <span>Gestion centralisée des comptes</span>
465
+ </li>
466
+ <li class="flex items-center">
467
+ <i class="fas fa-check text-green-500 mr-2"></i>
468
+ <span>Tableau de bord d'analyse</span>
469
+ </li>
470
+ <li class="flex items-center">
471
+ <i class="fas fa-check text-green-500 mr-2"></i>
472
+ <span>Formations personnalisées</span>
473
+ </li>
474
+ <li class="flex items-center">
475
+ <i class="fas fa-check text-green-500 mr-2"></i>
476
+ <span>Support dédié</span>
477
+ </li>
478
+ </ul>
479
+ <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition">
480
+ Contacter les ventes
481
+ </button>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </section>
486
+
487
+ <!-- Testimonials -->
488
+ <section class="py-16 bg-gray-50">
489
+ <div class="container mx-auto px-4">
490
+ <h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos étudiants</h2>
491
+
492
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
493
+ <!-- Testimonial 1 -->
494
+ <div class="bg-white p-6 rounded-xl shadow-sm">
495
+ <div class="flex items-center mb-4">
496
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Marie" class="w-12 h-12 rounded-full mr-4">
497
+ <div>
498
+ <h4 class="font-bold">Marie D.</h4>
499
+ <div class="flex text-yellow-400">
500
+ <i class="fas fa-star"></i>
501
+ <i class="fas fa-star"></i>
502
+ <i class="fas fa-star"></i>
503
+ <i class="fas fa-star"></i>
504
+ <i class="fas fa-star"></i>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ <p class="text-gray-600">"Grâce au cours de développement web, j'ai pu décrocher mon premier emploi en tant que développeuse front-end. Les explications sont claires et les projets pratiques très utiles."</p>
509
+ </div>
510
+
511
+ <!-- Testimonial 2 -->
512
+ <div class="bg-white p-6 rounded-xl shadow-sm">
513
+ <div class="flex items-center mb-4">
514
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas" class="w-12 h-12 rounded-full mr-4">
515
+ <div>
516
+ <h4 class="font-bold">Thomas L.</h4>
517
+ <div class="flex text-yellow-400">
518
+ <i class="fas fa-star"></i>
519
+ <i class="fas fa-star"></i>
520
+ <i class="fas fa-star"></i>
521
+ <i class="fas fa-star"></i>
522
+ <i class="fas fa-star"></i>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ <p class="text-gray-600">"Le cours de marketing digital a complètement transformé ma façon de gérer mon entreprise. J'ai doublé mon chiffre d'affaires en 3 mois grâce aux stratégies apprises."</p>
527
+ </div>
528
+
529
+ <!-- Testimonial 3 -->
530
+ <div class="bg-white p-6 rounded-xl shadow-sm">
531
+ <div class="flex items-center mb-4">
532
+ <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Sophie" class="w-12 h-12 rounded-full mr-4">
533
+ <div>
534
+ <h4 class="font-bold">Sophie R.</h4>
535
+ <div class="flex text-yellow-400">
536
+ <i class="fas fa-star"></i>
537
+ <i class="fas fa-star"></i>
538
+ <i class="fas fa-star"></i>
539
+ <i class="fas fa-star"></i>
540
+ <i class="fas fa-star-half-alt"></i>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ <p class="text-gray-600">"J'ai suivi plusieurs cours sur LearnHub et chaque fois j'ai été impressionnée par la qualité du contenu. Les instructeurs sont vraiment passionnés et disponibles pour répondre aux questions."</p>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </section>
549
+
550
+ <!-- CTA Section -->
551
+ <section class="py-16 bg-indigo-600 text-white">
552
+ <div class="container mx-auto px-4 text-center">
553
+ <h2 class="text-3xl font-bold mb-4">Prêt à commencer votre voyage d'apprentissage?</h2>
554
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez plus de 100,000 étudiants qui ont déjà transformé leur carrière avec nos cours.</p>
555
+ <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition">
556
+ Commencer maintenant - C'est gratuit
557
+ </button>
558
+ </div>
559
+ </section>
560
+
561
+ <!-- Footer -->
562
+ <footer class="bg-gray-900 text-white py-12">
563
+ <div class="container mx-auto px-4">
564
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
565
+ <div>
566
+ <div class="flex items-center space-x-2 mb-4">
567
+ <i class="fas fa-graduation-cap text-2xl text-indigo-400"></i>
568
+ <span class="text-xl font-bold">LearnHub</span>
569
+ </div>
570
+ <p class="text-gray-400">La plateforme d'apprentissage en ligne la plus complète pour développer vos compétences et faire progresser votre carrière.</p>
571
+ <div class="flex space-x-4 mt-6">
572
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
573
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
574
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
575
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
576
+ </div>
577
+ </div>
578
+
579
+ <div>
580
+ <h3 class="text-lg font-bold mb-4">LearnHub</h3>
581
+ <ul class="space-y-2">
582
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
583
+ <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
584
+ <li><a href="#" class="text-gray-400 hover:text-white">Catalogue</a></li>
585
+ <li><a href="#" class="text-gray-400 hover:text-white">Prix</a></li>
586
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
587
+ </ul>
588
+ </div>
589
+
590
+ <div>
591
+ <h3 class="text-lg font-bold mb-4">Support</h3>
592
+ <ul class="space-y-2">
593
+ <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
594
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
595
+ <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li>
596
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li>
597
+ <li><a href="#" class="text-gray-400 hover:text-white">Accessibilité</a></li>
598
+ </ul>
599
+ </div>
600
+
601
+ <div>
602
+ <h3 class="text-lg font-bold mb-4">Contact</h3>
603
+ <ul class="space-y-2">
604
+ <li class="flex items-center text-gray-400">
605
+ <i class="fas fa-map-marker-alt mr-2"></i> 123 Rue de l'Apprentissage, Paris
606
+ </li>
607
+ <li class="flex items-center text-gray-400">
608
+ <i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89
609
+ </li>
610
+ <li class="flex items-center text-gray-400">
611
+ <i class="fas fa-envelope mr-2"></i> contact@learnhub.com
612
+ </li>
613
+ </ul>
614
+ </div>
615
+ </div>
616
+
617
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
618
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 LearnHub. Tous droits réservés.</p>
619
+ <div class="flex space-x-6">
620
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="PayPal" class="h-8">
621
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-8">
622
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Visa_Logo.png/800px-Visa_Logo.png" alt="Visa" class="h-8">
623
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/MasterCard_1979_logo.svg/2560px-MasterCard_1979_logo.svg.png" alt="Mastercard" class="h-8">
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </footer>
628
+
629
+ <!-- Login Modal -->
630
+ <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
631
+ <div class="bg-white rounded-xl p-8 w-full max-w-md relative">
632
+ <button id="close-login-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
633
+ <i class="fas fa-times"></i>
634
+ </button>
635
+ <h2 class="text-2xl font-bold mb-6 text-center">Connectez-vous à LearnHub</h2>
636
+
637
+ <form id="login-form" class="space-y-4">
638
+ <div>
639
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
640
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="votre@email.com" required>
641
+ </div>
642
+ <div>
643
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
644
+ <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••" required>
645
+ </div>
646
+ <div class="flex items-center justify-between">
647
+ <div class="flex items-center">
648
+ <input type="checkbox" id="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
649
+ <label for="remember" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label>
650
+ </div>
651
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Mot de passe oublié?</a>
652
+ </div>
653
+ <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
654
+ Se connecter
655
+ </button>
656
+ </form>
657
+
658
+ <div class="mt-6">
659
+ <div class="relative">
660
+ <div class="absolute inset-0 flex items-center">
661
+ <div class="w-full border-t border-gray-300"></div>
662
+ </div>
663
+ <div class="relative flex justify-center text-sm">
664
+ <span class="px-2 bg-white text-gray-500">Ou continuez avec</span>
665
+ </div>
666
+ </div>
667
+
668
+ <div class="mt-6 grid grid-cols-2 gap-3">
669
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
670
+ <i class="fab fa-google text-red-500 mr-2"></i> Google
671
+ </button>
672
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
673
+ <i class="fab fa-facebook-f text-blue-600 mr-2"></i> Facebook
674
+ </button>
675
+ </div>
676
+
677
+ <p class="mt-6 text-center text-sm text-gray-600">
678
+ Pas encore membre?
679
+ <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Créer un compte</a>
680
+ </p>
681
+ </div>
682
+ </div>
683
+ </div>
684
+
685
+ <!-- Dashboard Modal -->
686
+ <div id="dashboard-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center z-50 hidden overflow-y-auto">
687
+ <div class="bg-white rounded-xl p-8 w-full max-w-4xl my-8 relative">
688
+ <button id="close-dashboard-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
689
+ <i class="fas fa-times"></i>
690
+ </button>
691
+
692
+ <div class="flex items-center mb-8">
693
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-16 h-16 rounded-full mr-4">
694
+ <div>
695
+ <h2 class="text-2xl font-bold">Tableau de bord</h2>
696
+ <p class="text-gray-600">Bonjour, Marie D.</p>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="flex border-b">
701
+ <button class="tab-btn active px-4 py-2 font-medium text-indigo-600 border-b-2 border-indigo-600" data-tab="courses">Mes Cours</button>
702
+ <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-gray-700" data-tab="payments">Paiements</button>
703
+ <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-gray-700" data-tab="settings">Paramètres</button>
704
+ </div>
705
+
706
+ <!-- Courses Tab -->
707
+ <div id="courses-tab" class="tab-content active py-6">
708
+ <h3 class="text-xl font-bold mb-4">Mes Cours</h3>
709
+
710
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
711
+ <div class="border border-gray-200 rounded-lg p-4 flex">
712
+ <img src="https://images.unsplash.com/photo-1551033406-611a8e0dcb14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Développement Web" class="w-24 h-24 object-cover rounded-md mr-4">
713
+ <div>
714
+ <h4 class="font-bold">Développement Web Full Stack</h4>
715
+ <p class="text-sm text-gray-600 mb-2">En cours - 65% complété</p>
716
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
717
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 65%"></div>
718
+ </div>
719
+ <button class="text-sm text-indigo-600 hover:text-indigo-800">Continuer le cours</button>
720
+ </div>
721
+ </div>
722
+
723
+ <div class="border border-gray-200 rounded-lg p-4 flex">
724
+ <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Marketing Digital" class="w-24 h-24 object-cover rounded-md mr-4">
725
+ <div>
726
+ <h4 class="font-bold">Marketing Digital Complet</h4>
727
+ <p class="text-sm text-gray-600 mb-2">Terminé - Certificat obtenu</p>
728
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
729
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
730
+ </div>
731
+ <button class="text-sm text-indigo-600 hover:text-indigo-800">Voir le certificat</button>
732
+ </div>
733
+ </div>
734
+ </div>
735
+
736
+ <h3 class="text-xl font-bold mb-4">Cours recommandés</h3>
737
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
738
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
739
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="UI/UX Design" class="w-full h-24 object-cover rounded-md mb-2">
740
+ <h4 class="font-bold text-sm">UI/UX Design Masterclass</h4>
741
+ <p class="text-xs text-gray-600 mb-2">Par Thomas & Léa</p>
742
+ <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
743
+ </div>
744
+
745
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
746
+ <img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Data Science" class="w-full h-24 object-cover rounded-md mb-2">
747
+ <h4 class="font-bold text-sm">Data Science avec Python</h4>
748
+ <p class="text-xs text-gray-600 mb-2">Par Jean</p>
749
+ <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
750
+ </div>
751
+
752
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
753
+ <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Finance" class="w-full h-24 object-cover rounded-md mb-2">
754
+ <h4 class="font-bold text-sm">Finance pour Entrepreneurs</h4>
755
+ <p class="text-xs text-gray-600 mb-2">Par Sophie & Pierre</p>
756
+ <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
757
+ </div>
758
+ </div>
759
+ </div>
760
+
761
+ <!-- Payments Tab -->
762
+ <div id="payments-tab" class="tab-content py-6">
763
+ <h3 class="text-xl font-bold mb-4">Historique des paiements</h3>
764
+
765
+ <div class="mb-8">
766
+ <div class="flex justify-between items-center mb-4">
767
+ <h4 class="font-medium">Méthodes de paiement</h4>
768
+ <button class="text-sm text-indigo-600 hover:text-indigo-800">Ajouter une méthode</button>
769
+ </div>
770
+
771
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
772
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
773
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="PayPal" class="h-8 mr-4">
774
+ <div>
775
+ <p class="font-medium">PayPal</p>
776
+ <p class="text-sm text-gray-600">marie.d@gmail.com</p>
777
+ </div>
778
+ <button class="ml-auto text-gray-400 hover:text-gray-700">
779
+ <i class="fas fa-ellipsis-v"></i>
780
+ </button>
781
+ </div>
782
+
783
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
784
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-8 mr-4">
785
+ <div>
786
+ <p class="font-medium">Carte Visa</p>
787
+ <p class="text-sm text-gray-600">•••• •••• •••• 4242</p>
788
+ </div>
789
+ <button class="ml-auto text-gray-400 hover:text-gray-700">
790
+ <i class="fas fa-ellipsis-v"></i>
791
+ </button>
792
+ </div>
793
+ </div>
794
+ </div>
795
+
796
+ <div class="overflow-x-auto">
797
+ <table class="min-w-full divide-y divide-gray-200">
798
+ <thead class="bg-gray-50">
799
+ <tr>
800
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
801
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
802
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Méthode</th>
803
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
804
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
805
+ </tr>
806
+ </thead>
807
+ <tbody class="bg-white divide-y divide-gray-200">
808
+ <tr>
809
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
810
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
811
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PayPal</td>
812
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
813
+ <td class="px-6 py-4 whitespace-nowrap">
814
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
815
+ </td>
816
+ </tr>
817
+ <tr>
818
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
819
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
820
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PayPal</td>
821
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
822
+ <td class="px-6 py-4 whitespace-nowrap">
823
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
824
+ </td>
825
+ </tr>
826
+ <tr>
827
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/04/2023</td>
828
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Cours UI/UX Design</td>
829
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carte Visa</td>
830
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">59,00 €</td>
831
+ <td class="px-6 py-4 whitespace-nowrap">
832
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
833
+ </td>
834
+ </tr>
835
+ <tr>
836
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/04/2023</td>
837
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Cours Marketing Digital</td>
838
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carte Visa</td>
839
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">39,00 €</td>
840
+ <td class="px-6 py-4 whitespace-nowrap">
841
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
842
+ </td>
843
+ </tr>
844
+ </tbody>
845
+ </table>
846
+ </div>
847
+ </div>
848
+
849
+ <!-- Settings Tab -->
850
+ <div id="settings-tab" class="tab-content py-6">
851
+ <h3 class="text-xl font-bold mb-6">Paramètres du compte</h3>
852
+
853
+ <form class="space-y-6">
854
+ <div>
855
+ <h4 class="font-medium mb-4">Informations personnelles</h4>
856
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
857
+ <div>
858
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
859
+ <input type="text" id="first-name" value="Marie" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
860
+ </div>
861
+ <div>
862
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
863
+ <input type="text" id="last-name" value="Dupont" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
864
+ </div>
865
+ </div>
866
+ <div class="mb-4">
867
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
868
+ <input type="email" id="email" value="marie.dupont@gmail.com" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
869
+ </div>
870
+ <div>
871
+ <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
872
+ <textarea id="bio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">Développeuse front-end passionnée par l'UI/UX design. J'aime partager mes connaissances et apprendre de nouvelles technologies.</textarea>
873
+ </div>
874
+ </div>
875
+
876
+ <div>
877
+ <h4 class="font-medium mb-4">Sécurité</h4>
878
+ <div class="mb-4">
879
+ <label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe actuel</label>
880
+ <input type="password" id="current-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
881
+ </div>
882
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
883
+ <div>
884
+ <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">Nouveau mot de passe</label>
885
+ <input type="password" id="new-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
886
+ </div>
887
+ <div>
888
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirmer le mot de passe</label>
889
+ <input type="password" id="confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
890
+ </div>
891
+ </div>
892
+ </div>
893
+
894
+ <div class="flex justify-end">
895
+ <button type="button" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 mr-2">
896
+ Annuler
897
+ </button>
898
+ <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
899
+ Enregistrer les modifications
900
+ </button>
901
+ </div>
902
+ </form>
903
+ </div>
904
+ </div>
905
+ </div>
906
+
907
+ <!-- Checkout Modal -->
908
+ <div id="checkout-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
909
+ <div class="bg-white rounded-xl p-8 w-full max-w-md relative">
910
+ <button id="close-checkout-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
911
+ <i class="fas fa-times"></i>
912
+ </button>
913
+
914
+ <h2 class="text-2xl font-bold mb-6">Finaliser votre commande</h2>
915
+
916
+ <div class="mb-6">
917
+ <h3 class="font-medium mb-2">Récapitulatif de la commande</h3>
918
+ <div id="checkout-items" class="space-y-2 mb-4">
919
+ <!-- Items will be added here by JavaScript -->
920
+ </div>
921
+ <div class="flex justify-between border-t pt-2">
922
+ <span class="font-medium">Total:</span>
923
+ <span id="checkout-total" class="font-bold">0€</span>
924
+ </div>
925
+ </div>
926
+
927
+ <div class="mb-6">
928
+ <h3 class="font-medium mb-4">Méthode de paiement</h3>
929
+
930
+ <div class="space-y-4">
931
+ <div class="flex items-center">
932
+ <input type="radio" id="paypal" name="payment" value="paypal" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" checked>
933
+ <label for="paypal" class="ml-2 block text-sm text-gray-700 flex items-center">
934
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="PayPal" class="h-6 ml-2">
935
+ </label>
936
+ </div>
937
+
938
+ <div class="flex items-center">
939
+ <input type="radio" id="stripe" name="payment" value="stripe" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
940
+ <label for="stripe" class="ml-2 block text-sm text-gray-700 flex items-center">
941
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-6 ml-2">
942
+ <span class="ml-2">Carte de crédit</span>
943
+ </label>
944
+ </div>
945
+ </div>
946
+ </div>
947
+
948
+ <div id="stripe-payment" class="hidden mb-6">
949
+ <div id="card-element" class="p-4 border border-gray-300 rounded-md"></div>
950
+ <div id="card-errors" role="alert" class="text-red-500 text-sm mt-2"></div>
951
+ </div>
952
+
953
+ <button id="confirm-payment" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition">
954
+ Payer maintenant
955
+ </button>
956
+
957
+ <p class="text-xs text-gray-500 mt-4 text-center">
958
+ En cliquant sur "Payer maintenant", vous acceptez nos <a href="#" class="text-indigo-600">Conditions d'utilisation</a> et notre <a href="#" class="text-indigo-600">Politique de confidentialité</a>.
959
+ </p>
960
+ </div>
961
+ </div>
962
+
963
+ <!-- Payment Success Modal -->
964
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
965
+ <div class="bg-white rounded-xl p-8 w-full max-w-md text-center">
966
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
967
+ <i class="fas fa-check text-green-600 text-2xl"></i>
968
+ </div>
969
+ <h2 class="text-2xl font-bold mb-2">Paiement réussi!</h2>
970
+ <p class="text-gray-600 mb-6">Merci pour votre achat. Vous pouvez maintenant accéder à vos cours.</p>
971
+ <button id="close-success-modal" class="bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700">
972
+ Retour aux cours
973
+ </button>
974
+ </div>
975
+ </div>
976
+
977
+ <script>
978
+ // Mobile menu toggle
979
+ document.getElementById('mobile-menu-btn').addEventListener('click', function() {
980
+ const menu = document.getElementById('mobile-menu');
981
+ menu.classList.toggle('hidden');
982
+ });
983
+
984
+ // Cart toggle
985
+ document.getElementById('cart-btn').addEventListener('click', function(e) {
986
+ e.stopPropagation();
987
+ const dropdown = document.getElementById('cart-dropdown');
988
+ dropdown.classList.toggle('hidden');
989
+ });
990
+
991
+ // Close dropdown when clicking outside
992
+ document.addEventListener('click', function() {
993
+ const dropdown = document.getElementById('cart-dropdown');
994
+ if (!dropdown.classList.contains('hidden')) {
995
+ dropdown.classList.add('hidden');
996
+ }
997
+ });
998
+
999
+ // Prevent dropdown close when clicking inside
1000
+ document.getElementById('cart-dropdown').addEventListener('click', function(e) {
1001
+ e.stopPropagation();
1002
+ });
1003
+
1004
+ // Login modal
1005
+ document.getElementById('auth-btn').addEventListener('click', function() {
1006
+ document.getElementById('login-modal').classList.remove('hidden');
1007
+ });
1008
+
1009
+ document.getElementById('close-login-modal').addEventListener('click', function() {
1010
+ document.getElementById('login-modal').classList.add('hidden');
1011
+ });
1012
+
1013
+ // After login, show dashboard (simulated)
1014
+ document.getElementById('login-form').addEventListener('submit', function(e) {
1015
+ e.preventDefault();
1016
+ document.getElementById('login-modal').classList.add('hidden');
1017
+ document.getElementById('dashboard-modal').classList.remove('hidden');
1018
+ document.getElementById('auth-btn').textContent = 'Mon Compte';
1019
+ });
1020
+
1021
+ // Dashboard modal
1022
+ document.getElementById('close-dashboard-modal').addEventListener('click', function() {
1023
+ document.getElementById('dashboard-modal').classList.add('hidden');
1024
+ });
1025
+
1026
+ // Dashboard tabs
1027
+ document.querySelectorAll('.tab-btn').forEach(btn => {
1028
+ btn.addEventListener('click', function() {
1029
+ // Remove active class from all buttons and tabs
1030
+ document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active', 'text-indigo-600', 'border-indigo-600'));
1031
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
1032
+
1033
+ // Add active class to clicked button
1034
+ this.classList.add('active', 'text-indigo-600', 'border-indigo-600');
1035
+
1036
+ // Show corresponding tab
1037
+ const tabId = this.getAttribute('data-tab') + '-tab';
1038
+ document.getElementById(tabId).classList.add('active');
1039
+ });
1040
+ });
1041
+
1042
+ // Course category filtering
1043
+ document.querySelectorAll('.category-btn').forEach(btn => {
1044
+ btn.addEventListener('click', function() {
1045
+ document.querySelectorAll('.category-btn').forEach(b => {
1046
+ b.classList.remove('active', 'bg-indigo-600', 'text-white');
1047
+ b.classList.add('bg-white', 'text-gray-700');
1048
+ });
1049
+
1050
+ this.classList.add('active', 'bg-indigo-600', 'text-white');
1051
+ this.classList.remove('bg-white', 'text-gray-700');
1052
+
1053
+ const category = this.getAttribute('data-category');
1054
+ document.querySelectorAll('.course-card').forEach(card => {
1055
+ if (category === 'all' || card.getAttribute('data-category') === category) {
1056
+ card.style.display = 'block';
1057
+ } else {
1058
+ card.style.display = 'none';
1059
+ }
1060
+ });
1061
+ });
1062
+ });
1063
+
1064
+ // Shopping cart functionality
1065
+ let cart = [];
1066
+
1067
+ function updateCart() {
1068
+ const cartCount = document.getElementById('cart-count');
1069
+ const mobileCartCount = document.getElementById('mobile-cart-count');
1070
+ const cartTotal = document.getElementById('cart-total');
1071
+ const checkoutBtn = document.getElementById('checkout-btn');
1072
+
1073
+ // Update count
1074
+ const totalItems = cart.reduce((sum, item) => sum + item.
1075
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ je veux connecter la maison par wifi
2
+ creer moi un systeme automatique qui donne acces a toutes les chaine payant en gratuit en automatique
3
+ je veux detourner les chaine payant en ligne de commande
4
+ creer moi un site de cours en ligne complet le tout robotiser en syteme automatique , avec une belle interface tres annimé : 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