Hugging Face's logo

Spaces:
zama1
/
linguaquest
Running

App Files Community
zama1 commited on
Commit
2a6654b
·
verified ·
1 Parent(s): 81cf8df

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +870 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Linguaquest
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: gray
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: linguaquest
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,870 @@
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>LinguaQuest - Apprentissage de Langues Interactif</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating {
15
+ animation: float 3s ease-in-out infinite;
16
+ }
17
+ .language-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .progress-ring__circle {
22
+ transition: stroke-dashoffset 0.5s;
23
+ transform: rotate(-90deg);
24
+ transform-origin: 50% 50%;
25
+ }
26
+ .chat-bubble {
27
+ position: relative;
28
+ border-radius: 1.25rem;
29
+ }
30
+ .chat-bubble:after {
31
+ content: '';
32
+ position: absolute;
33
+ bottom: 0;
34
+ left: 20%;
35
+ width: 0;
36
+ height: 0;
37
+ border: 10px solid transparent;
38
+ border-top-color: #3B82F6;
39
+ border-bottom: 0;
40
+ margin-left: -10px;
41
+ margin-bottom: -10px;
42
+ }
43
+ .user-bubble:after {
44
+ left: 80%;
45
+ border-top-color: #10B981;
46
+ }
47
+ .fade-in {
48
+ animation: fadeIn 0.5s ease-in;
49
+ }
50
+ @keyframes fadeIn {
51
+ from { opacity: 0; }
52
+ to { opacity: 1; }
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-50 font-sans">
57
+ <!-- Navigation -->
58
+ <nav class="bg-white shadow-lg">
59
+ <div class="max-w-6xl mx-auto px-4">
60
+ <div class="flex justify-between items-center py-4">
61
+ <div class="flex items-center space-x-4">
62
+ <div class="flex items-center">
63
+ <i class="fas fa-language text-3xl text-blue-500"></i>
64
+ <span class="ml-2 text-2xl font-bold text-blue-600">LinguaQuest</span>
65
+ </div>
66
+ </div>
67
+ <div class="hidden md:flex items-center space-x-8">
68
+ <a href="#" class="text-blue-600 font-medium">Accueil</a>
69
+ <a href="#" class="text-gray-600 hover:text-blue-600">Cours</a>
70
+ <a href="#" class="text-gray-600 hover:text-blue-600">Jeux</a>
71
+ <a href="#" class="text-gray-600 hover:text-blue-600">Progression</a>
72
+ <a href="#" class="text-gray-600 hover:text-blue-600">Communauté</a>
73
+ </div>
74
+ <div class="flex items-center space-x-4">
75
+ <button class="px-4 py-2 text-blue-600 border border-blue-600 rounded-full hover:bg-blue-50 transition">
76
+ Connexion
77
+ </button>
78
+ <button id="upgradeBtn" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full hover:from-blue-600 hover:to-blue-700 transition shadow-md">
79
+ Premium
80
+ </button>
81
+ <button class="md:hidden text-gray-600">
82
+ <i class="fas fa-bars text-2xl"></i>
83
+ </button>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </nav>
88
+
89
+ <!-- Hero Section -->
90
+ <section class="bg-gradient-to-r from-blue-500 to-blue-600 text-white py-16">
91
+ <div class="max-w-6xl mx-auto px-4">
92
+ <div class="flex flex-col md:flex-row items-center">
93
+ <div class="md:w-1/2 mb-10 md:mb-0">
94
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Apprenez une langue comme jamais auparavant</h1>
95
+ <p class="text-xl mb-8 opacity-90">Jeux interactifs, quiz captivants et conversations simulées pour maîtriser une nouvelle langue naturellement.</p>
96
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
97
+ <button class="px-6 py-3 bg-white text-blue-600 rounded-full font-medium hover:bg-gray-100 transition shadow-lg">
98
+ Commencer gratuitement
99
+ </button>
100
+ <button class="px-6 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">
101
+ <i class="fas fa-play mr-2"></i> Voir la démo
102
+ </button>
103
+ </div>
104
+ </div>
105
+ <div class="md:w-1/2 flex justify-center">
106
+ <div class="relative w-80 h-80">
107
+ <div class="absolute top-0 left-0 w-64 h-64 bg-blue-400 rounded-full opacity-20"></div>
108
+ <div class="absolute top-10 right-0 w-64 h-64 bg-blue-300 rounded-full opacity-20"></div>
109
+ <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
110
+ class="absolute floating w-64 h-64 object-cover rounded-xl shadow-2xl border-4 border-white" alt="Language Learning">
111
+ <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-xl shadow-lg">
112
+ <div class="flex items-center">
113
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
114
+ <i class="fas fa-trophy text-green-600 text-xl"></i>
115
+ </div>
116
+ <div class="ml-3">
117
+ <p class="text-xs text-gray-500">Points gagnés</p>
118
+ <p class="font-bold text-gray-800">1,245 XP</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Languages Section -->
129
+ <section class="py-16 bg-white">
130
+ <div class="max-w-6xl mx-auto px-4">
131
+ <div class="text-center mb-12">
132
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Choisissez votre langue</h2>
133
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Apprenez n'importe quelle langue avec nos méthodes interactives et amusantes.</p>
134
+ </div>
135
+
136
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
137
+ <!-- Language Cards -->
138
+ <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
139
+ <div class="p-6">
140
+ <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
141
+ <span class="text-3xl">🇫🇷</span>
142
+ </div>
143
+ <h3 class="text-xl font-semibold text-center text-gray-800">Français</h3>
144
+ <p class="text-gray-500 text-center mt-2">Débutant</p>
145
+ <div class="mt-4 flex justify-center">
146
+ <div class="w-12 h-12 relative">
147
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
148
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle>
149
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-blue-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="40"></circle>
150
+ </svg>
151
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-blue-600">60%</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
158
+ <div class="p-6">
159
+ <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
160
+ <span class="text-3xl">🇪🇸</span>
161
+ </div>
162
+ <h3 class="text-xl font-semibold text-center text-gray-800">Espagnol</h3>
163
+ <p class="text-gray-500 text-center mt-2">Intermédiaire</p>
164
+ <div class="mt-4 flex justify-center">
165
+ <div class="w-12 h-12 relative">
166
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
167
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle>
168
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-red-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="25"></circle>
169
+ </svg>
170
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-red-600">75%</span>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
177
+ <div class="p-6">
178
+ <div class="w-16 h-16 bg-yellow-50 rounded-full flex items-center justify-center mx-auto mb-4">
179
+ <span class="text-3xl">🇩🇪</span>
180
+ </div>
181
+ <h3 class="text-xl font-semibold text-center text-gray-800">Allemand</h3>
182
+ <p class="text-gray-500 text-center mt-2">Débutant</p>
183
+ <div class="mt-4 flex justify-center">
184
+ <div class="w-12 h-12 relative">
185
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
186
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle>
187
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-yellow-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="70"></circle>
188
+ </svg>
189
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-yellow-600">30%</span>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
196
+ <div class="p-6">
197
+ <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4">
198
+ <span class="text-3xl">🇮🇹</span>
199
+ </div>
200
+ <h3 class="text-xl font-semibold text-center text-gray-800">Italien</h3>
201
+ <p class="text-gray-500 text-center mt-2">Avancé</p>
202
+ <div class="mt-4 flex justify-center">
203
+ <div class="w-12 h-12 relative">
204
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
205
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle>
206
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-green-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="10"></circle>
207
+ </svg>
208
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-green-600">90%</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
215
+ <div class="p-6">
216
+ <div class="w-16 h-16 bg-purple-50 rounded-full flex items-center justify-center mx-auto mb-4">
217
+ <span class="text-3xl">🇯🇵</span>
218
+ </div>
219
+ <h3 class="text-xl font-semibold text-center text-gray-800">Japonais</h3>
220
+ <p class="text-gray-500 text-center mt-2">Débutant</p>
221
+ <div class="mt-4 flex justify-center">
222
+ <div class="w-12 h-12 relative">
223
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
224
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle>
225
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-purple-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="85"></circle>
226
+ </svg>
227
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-purple-600">15%</span>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer">
234
+ <div class="p-6">
235
+ <div class="w-16 h-16 bg-pink-50 rounded-full flex items-center justify-center mx-auto mb-4">
236
+ <span class="text-3xl">🇨🇳</span>
237
+ </div>
238
+ <h3 class="text-xl font-semibold text-center text-gray-800">Chinois</h3>
239
+ <p class="text-gray-500 text-center mt-2">Nouveau</p>
240
+ <div class="mt-4 flex justify-center">
241
+ <div class="w-12 h-12 relative">
242
+ <svg class="w-12 h-12" viewBox="0 0 36 36">
243
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle>
244
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-pink-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="95"></circle>
245
+ </svg>
246
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-pink-600">5%</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="mt-12 text-center">
254
+ <button class="px-6 py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition">
255
+ <i class="fas fa-plus mr-2"></i> Voir plus de langues
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Features Section -->
262
+ <section class="py-16 bg-gray-50">
263
+ <div class="max-w-6xl mx-auto px-4">
264
+ <div class="text-center mb-12">
265
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Notre méthode révolutionnaire</h2>
266
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Apprenez naturellement avec des activités interactives conçues par des experts.</p>
267
+ </div>
268
+
269
+ <div class="grid md:grid-cols-3 gap-8">
270
+ <!-- Feature 1 -->
271
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
272
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
273
+ <i class="fas fa-gamepad text-blue-600 text-2xl"></i>
274
+ </div>
275
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Jeux éducatifs</h3>
276
+ <p class="text-gray-600">Apprenez sans effort avec nos jeux conçus pour renforcer votre mémoire et votre compréhension.</p>
277
+ <div class="mt-6">
278
+ <div class="flex items-center mb-2">
279
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
280
+ <span class="text-sm text-gray-600">Mémorisation par répétition espacée</span>
281
+ </div>
282
+ <div class="flex items-center mb-2">
283
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
284
+ <span class="text-sm text-gray-600">Adapté à votre niveau</span>
285
+ </div>
286
+ <div class="flex items-center">
287
+ <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
288
+ <span class="text-sm text-gray-600">Système de récompenses</span>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Feature 2 -->
294
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
295
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
296
+ <i class="fas fa-comments text-green-600 text-2xl"></i>
297
+ </div>
298
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Conversations simulées</h3>
299
+ <p class="text-gray-600">Pratiquez des dialogues réels avec notre IA qui s'adapte à vos réponses pour une expérience naturelle.</p>
300
+ <div class="mt-6">
301
+ <div class="flex items-center mb-2">
302
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
303
+ <span class="text-sm text-gray-600">Scénarios de la vie quotidienne</span>
304
+ </div>
305
+ <div class="flex items-center mb-2">
306
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
307
+ <span class="text-sm text-gray-600">Correction instantanée</span>
308
+ </div>
309
+ <div class="flex items-center">
310
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
311
+ <span class="text-sm text-gray-600">Prononciation évaluée</span>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Feature 3 -->
317
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
318
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
319
+ <i class="fas fa-trophy text-purple-600 text-2xl"></i>
320
+ </div>
321
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Quiz interactifs</h3>
322
+ <p class="text-gray-600">Testez vos connaissances avec des quiz variés qui s'adaptent à votre progression.</p>
323
+ <div class="mt-6">
324
+ <div class="flex items-center mb-2">
325
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
326
+ <span class="text-sm text-gray-600">Questions à choix multiples</span>
327
+ </div>
328
+ <div class="flex items-center mb-2">
329
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
330
+ <span class="text-sm text-gray-600">Associations d'images</span>
331
+ </div>
332
+ <div class="flex items-center">
333
+ <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
334
+ <span class="text-sm text-gray-600">Défis chronométrés</span>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Interactive Demo Section -->
343
+ <section class="py-16 bg-white">
344
+ <div class="max-w-6xl mx-auto px-4">
345
+ <div class="text-center mb-12">
346
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Essayez notre simulateur de conversation</h2>
347
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Pratiquez une conversation réelle avec notre IA linguistique.</p>
348
+ </div>
349
+
350
+ <div class="bg-gray-50 rounded-xl p-6 shadow-inner max-w-3xl mx-auto">
351
+ <div class="flex items-center justify-between mb-6">
352
+ <div class="flex items-center">
353
+ <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
354
+ <i class="fas fa-robot text-white"></i>
355
+ </div>
356
+ <span class="ml-3 font-medium">Assistant Lingua</span>
357
+ </div>
358
+ <div class="flex items-center space-x-2">
359
+ <span class="text-sm text-gray-500">Niveau : Débutant</span>
360
+ <span class="text-sm px-2 py-1 bg-blue-100 text-blue-600 rounded-full">Français</span>
361
+ </div>
362
+ </div>
363
+
364
+ <div id="chatContainer" class="h-96 overflow-y-auto mb-6 space-y-4">
365
+ <!-- Chat messages will appear here -->
366
+ <div class="chat-bubble bg-blue-100 text-gray-800 p-4 max-w-xs fade-in">
367
+ <p>Bonjour ! Je m'appelle Lingua. Comment puis-je vous aider à apprendre le français aujourd'hui ?</p>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="flex items-center space-x-4">
372
+ <div class="flex-1 bg-white rounded-full shadow-sm border border-gray-200 overflow-hidden">
373
+ <input id="userInput" type="text" placeholder="Tapez votre réponse en français..." class="w-full px-4 py-3 focus:outline-none">
374
+ </div>
375
+ <button id="sendBtn" class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition">
376
+ <i class="fas fa-paper-plane"></i>
377
+ </button>
378
+ </div>
379
+
380
+ <div class="mt-4 flex items-center justify-between">
381
+ <div class="flex items-center space-x-2">
382
+ <button class="text-gray-500 hover:text-blue-500">
383
+ <i class="fas fa-microphone"></i>
384
+ </button>
385
+ <button class="text-gray-500 hover:text-blue-500">
386
+ <i class="fas fa-image"></i>
387
+ </button>
388
+ <button class="text-gray-500 hover:text-blue-500">
389
+ <i class="fas fa-language"></i>
390
+ </button>
391
+ </div>
392
+ <button id="hintBtn" class="text-sm text-blue-500 hover:text-blue-700 flex items-center">
393
+ <i class="fas fa-lightbulb mr-1"></i> Aide
394
+ </button>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="mt-8 text-center">
399
+ <p class="text-gray-600 mb-4">Cette démo utilise notre version gratuite avec des fonctionnalités limitées.</p>
400
+ <button class="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-md">
401
+ <i class="fas fa-crown mr-2"></i> Débloquer toutes les fonctionnalités
402
+ </button>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Pricing Section -->
408
+ <section class="py-16 bg-gray-50">
409
+ <div class="max-w-6xl mx-auto px-4">
410
+ <div class="text-center mb-12">
411
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Choisissez votre plan</h2>
412
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Accédez à plus de fonctionnalités et apprenez sans limites.</p>
413
+ </div>
414
+
415
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
416
+ <!-- Free Plan -->
417
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
418
+ <div class="p-8">
419
+ <div class="flex items-center mb-6">
420
+ <h3 class="text-2xl font-bold text-gray-800">Gratuit</h3>
421
+ <span class="ml-auto px-3 py-1 bg-blue-100 text-blue-600 text-sm rounded-full">Basique</span>
422
+ </div>
423
+ <p class="text-gray-600 mb-6">Parfait pour essayer et découvrir notre plateforme.</p>
424
+ <div class="mb-8">
425
+ <span class="text-4xl font-bold text-gray-800">$0</span>
426
+ <span class="text-gray-500">/mois</span>
427
+ </div>
428
+ <button class="w-full py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition">
429
+ Commencer
430
+ </button>
431
+ </div>
432
+ <div class="border-t border-gray-200 px-8 py-6 bg-gray-50">
433
+ <h4 class="text-sm font-semibold text-gray-500 uppercase mb-4">Ce qui est inclus</h4>
434
+ <ul class="space-y-3">
435
+ <li class="flex items-center">
436
+ <i class="fas fa-check text-green-500 mr-3"></i>
437
+ <span class="text-gray-600">Accès à 3 jeux par jour</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-check text-green-500 mr-3"></i>
441
+ <span class="text-gray-600">5 minutes de conversation simulée</span>
442
+ </li>
443
+ <li class="flex items-center">
444
+ <i class="fas fa-check text-green-500 mr-3"></i>
445
+ <span class="text-gray-600">1 quiz quotidien</span>
446
+ </li>
447
+ <li class="flex items-center text-gray-400">
448
+ <i class="fas fa-times text-red-400 mr-3"></i>
449
+ <span>Contenu avancé</span>
450
+ </li>
451
+ <li class="flex items-center text-gray-400">
452
+ <i class="fas fa-times text-red-400 mr-3"></i>
453
+ <span>Mode hors ligne</span>
454
+ </li>
455
+ </ul>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Premium Plan -->
460
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-blue-500 relative">
461
+ <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
462
+ Le plus populaire
463
+ </div>
464
+ <div class="p-8">
465
+ <div class="flex items-center mb-6">
466
+ <h3 class="text-2xl font-bold text-gray-800">Premium</h3>
467
+ <span class="ml-auto px-3 py-1 bg-blue-100 text-blue-600 text-sm rounded-full">Illimité</span>
468
+ </div>
469
+ <p class="text-gray-600 mb-6">Pour ceux qui veulent apprendre sérieusement.</p>
470
+ <div class="mb-8">
471
+ <span class="text-4xl font-bold text-gray-800">$9.99</span>
472
+ <span class="text-gray-500">/mois</span>
473
+ </div>
474
+ <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-md">
475
+ Essayer gratuitement
476
+ </button>
477
+ </div>
478
+ <div class="border-t border-gray-200 px-8 py-6 bg-gray-50">
479
+ <h4 class="text-sm font-semibold text-gray-500 uppercase mb-4">Ce qui est inclus</h4>
480
+ <ul class="space-y-3">
481
+ <li class="flex items-center">
482
+ <i class="fas fa-check text-green-500 mr-3"></i>
483
+ <span class="text-gray-600">Accès illimité à tous les jeux</span>
484
+ </li>
485
+ <li class="flex items-center">
486
+ <i class="fas fa-check text-green-500 mr-3"></i>
487
+ <span class="text-gray-600">Conversations simulées illimitées</span>
488
+ </li>
489
+ <li class="flex items-center">
490
+ <i class="fas fa-check text-green-500 mr-3"></i>
491
+ <span class="text-gray-600">Quiz personnalisés</span>
492
+ </li>
493
+ <li class="flex items-center">
494
+ <i class="fas fa-check text-green-500 mr-3"></i>
495
+ <span class="text-gray-600">Contenu avancé et exclusif</span>
496
+ </li>
497
+ <li class="flex items-center">
498
+ <i class="fas fa-check text-green-500 mr-3"></i>
499
+ <span class="text-gray-600">Mode hors ligne</span>
500
+ </li>
501
+ </ul>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Family Plan -->
506
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
507
+ <div class="p-8">
508
+ <div class="flex items-center mb-6">
509
+ <h3 class="text-2xl font-bold text-gray-800">Famille</h3>
510
+ <span class="ml-auto px-3 py-1 bg-purple-100 text-purple-600 text-sm rounded-full">Économique</span>
511
+ </div>
512
+ <p class="text-gray-600 mb-6">Parfait pour les familles ou les petits groupes.</p>
513
+ <div class="mb-8">
514
+ <span class="text-4xl font-bold text-gray-800">$19.99</span>
515
+ <span class="text-gray-500">/mois</span>
516
+ </div>
517
+ <button class="w-full py-3 border-2 border-purple-500 text-purple-500 rounded-full font-medium hover:bg-purple-50 transition">
518
+ En savoir plus
519
+ </button>
520
+ </div>
521
+ <div class="border-t border-gray-200 px-8 py-6 bg-gray-50">
522
+ <h4 class="text-sm font-semibold text-gray-500 uppercase mb-4">Ce qui est inclus</h4>
523
+ <ul class="space-y-3">
524
+ <li class="flex items-center">
525
+ <i class="fas fa-check text-green-500 mr-3"></i>
526
+ <span class="text-gray-600">Jusqu'à 6 comptes Premium</span>
527
+ </li>
528
+ <li class="flex items-center">
529
+ <i class="fas fa-check text-green-500 mr-3"></i>
530
+ <span class="text-gray-600">Suivi des progrès individuels</span>
531
+ </li>
532
+ <li class="flex items-center">
533
+ <i class="fas fa-check text-green-500 mr-3"></i>
534
+ <span class="text-gray-600">Contrôle parental</span>
535
+ </li>
536
+ <li class="flex items-center">
537
+ <i class="fas fa-check text-green-500 mr-3"></i>
538
+ <span class="text-gray-600">Toutes les fonctionnalités Premium</span>
539
+ </li>
540
+ <li class="flex items-center">
541
+ <i class="fas fa-check text-green-500 mr-3"></i>
542
+ <span class="text-gray-600">Support prioritaire</span>
543
+ </li>
544
+ </ul>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="mt-12 text-center">
550
+ <p class="text-gray-600">Vous avez une entreprise ou une école ? <a href="#" class="text-blue-500 hover:underline">Contactez-nous</a> pour des tarifs spéciaux.</p>
551
+ </div>
552
+ </div>
553
+ </section>
554
+
555
+ <!-- Testimonials Section -->
556
+ <section class="py-16 bg-white">
557
+ <div class="max-w-6xl mx-auto px-4">
558
+ <div class="text-center mb-12">
559
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Ce que disent nos utilisateurs</h2>
560
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Des milliers d'étudiants ont amélioré leurs compétences linguistiques avec LinguaQuest.</p>
561
+ </div>
562
+
563
+ <div class="grid md:grid-cols-3 gap-8">
564
+ <!-- Testimonial 1 -->
565
+ <div class="bg-gray-50 p-6 rounded-xl">
566
+ <div class="flex items-center mb-4">
567
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full object-cover" alt="User">
568
+ <div class="ml-4">
569
+ <h4 class="font-semibold">Sophie Martin</h4>
570
+ <div class="flex items-center mt-1">
571
+ <i class="fas fa-star text-yellow-400"></i>
572
+ <i class="fas fa-star text-yellow-400"></i>
573
+ <i class="fas fa-star text-yellow-400"></i>
574
+ <i class="fas fa-star text-yellow-400"></i>
575
+ <i class="fas fa-star text-yellow-400"></i>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ <p class="text-gray-600 italic">"Les jeux de LinguaQuest m'ont fait oublier que j'étais en train d'apprendre. En trois mois, je peux maintenant tenir une conversation en espagnol avec mes collègues !"</p>
580
+ </div>
581
+
582
+ <!-- Testimonial 2 -->
583
+ <div class="bg-gray-50 p-6 rounded-xl">
584
+ <div class="flex items-center mb-4">
585
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full object-cover" alt="User">
586
+ <div class="ml-4">
587
+ <h4 class="font-semibold">Thomas Leroy</h4>
588
+ <div class="flex items-center mt-1">
589
+ <i class="fas fa-star text-yellow-400"></i>
590
+ <i class="fas fa-star text-yellow-400"></i>
591
+ <i class="fas fa-star text-yellow-400"></i>
592
+ <i class="fas fa-star text-yellow-400"></i>
593
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ <p class="text-gray-600 italic">"Le simulateur de conversation est incroyablement réaliste. C'est comme avoir un tuteur personnel disponible 24/7. J'ai enfin surmonté ma peur de parler allemand."</p>
598
+ </div>
599
+
600
+ <!-- Testimonial 3 -->
601
+ <div class="bg-gray-50 p-6 rounded-xl">
602
+ <div class="flex items-center mb-4">
603
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full object-cover" alt="User">
604
+ <div class="ml-4">
605
+ <h4 class="font-semibold">Camille Dubois</h4>
606
+ <div class="flex items-center mt-1">
607
+ <i class="fas fa-star text-yellow-400"></i>
608
+ <i class="fas fa-star text-yellow-400"></i>
609
+ <i class="fas fa-star text-yellow-400"></i>
610
+ <i class="fas fa-star text-yellow-400"></i>
611
+ <i class="fas fa-star text-yellow-400"></i>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ <p class="text-gray-600 italic">"J'utilise LinguaQuest avec mes enfants. Le plan famille est parfait et ils adorent les jeux éducatifs. Nous apprenons l'italien ensemble avant nos vacances !"</p>
616
+ </div>
617
+ </div>
618
+
619
+ <div class="mt-12 text-center">
620
+ <button class="px-6 py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition">
621
+ <i class="fas fa-comment-alt mr-2"></i> Lire plus de témoignages
622
+ </button>
623
+ </div>
624
+ </div>
625
+ </section>
626
+
627
+ <!-- CTA Section -->
628
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-700 text-white">
629
+ <div class="max-w-6xl mx-auto px-4 text-center">
630
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à parler couramment une nouvelle langue ?</h2>
631
+ <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Rejoignez plus de 500,000 apprenants qui utilisent déjà LinguaQuest.</p>
632
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
633
+ <button class="px-8 py-4 bg-white text-blue-600 rounded-full font-bold hover:bg-gray-100 transition shadow-xl text-lg">
634
+ Commencer gratuitement
635
+ </button>
636
+ <button class="px-8 py-4 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition text-lg">
637
+ <i class="fas fa-crown mr-2"></i> Essayer Premium
638
+ </button>
639
+ </div>
640
+ </div>
641
+ </section>
642
+
643
+ <!-- Footer -->
644
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
645
+ <div class="max-w-6xl mx-auto px-4">
646
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
647
+ <div class="col-span-2">
648
+ <div class="flex items-center mb-4">
649
+ <i class="fas fa-language text-3xl text-blue-400"></i>
650
+ <span class="ml-2 text-2xl font-bold text-white">LinguaQuest</span>
651
+ </div>
652
+ <p class="text-gray-400 mb-4">La manière la plus amusante et efficace d'apprendre une nouvelle langue.</p>
653
+ <div class="flex space-x-4">
654
+ <a href="#" class="text-gray-400 hover:text-white">
655
+ <i class="fab fa-facebook-f"></i>
656
+ </a>
657
+ <a href="#" class="text-gray-400 hover:text-white">
658
+ <i class="fab fa-twitter"></i>
659
+ </a>
660
+ <a href="#" class="text-gray-400 hover:text-white">
661
+ <i class="fab fa-instagram"></i>
662
+ </a>
663
+ <a href="#" class="text-gray-400 hover:text-white">
664
+ <i class="fab fa-youtube"></i>
665
+ </a>
666
+ </div>
667
+ </div>
668
+
669
+ <div>
670
+ <h4 class="text-lg font-semibold mb-4">Apprendre</h4>
671
+ <ul class="space-y-2">
672
+ <li><a href="#" class="text-gray-400 hover:text-white">Cours</a></li>
673
+ <li><a href="#" class="text-gray-400 hover:text-white">Jeux</a></li>
674
+ <li><a href="#" class="text-gray-400 hover:text-white">Quiz</a></li>
675
+ <li><a href="#" class="text-gray-400 hover:text-white">Conversations</a></li>
676
+ <li><a href="#" class="text-gray-400 hover:text-white">Langues</a></li>
677
+ </ul>
678
+ </div>
679
+
680
+ <div>
681
+ <h4 class="text-lg font-semibold mb-4">Entreprise</h4>
682
+ <ul class="space-y-2">
683
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
684
+ <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
685
+ <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
686
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
687
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
688
+ </ul>
689
+ </div>
690
+
691
+ <div>
692
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
693
+ <ul class="space-y-2">
694
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
695
+ <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
696
+ <li><a href="#" class="text-gray-400 hover:text-white">Confidentialité</a></li>
697
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions</a></li>
698
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li>
699
+ </ul>
700
+ </div>
701
+ </div>
702
+
703
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
704
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 LinguaQuest. Tous droits réservés.</p>
705
+ <div class="flex space-x-6">
706
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a>
707
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a>
708
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Paramètres des cookies</a>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </footer>
713
+
714
+ <!-- Upgrade Modal -->
715
+ <div id="upgradeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
716
+ <div class="bg-white rounded-xl max-w-md w-full mx-4 p-8 relative">
717
+ <button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
718
+ <i class="fas fa-times"></i>
719
+ </button>
720
+ <div class="text-center mb-6">
721
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
722
+ <i class="fas fa-crown text-blue-500 text-2xl"></i>
723
+ </div>
724
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Passez à Premium</h3>
725
+ <p class="text-gray-600">Débloquez toutes les fonctionnalités et apprenez sans limites.</p>
726
+ </div>
727
+
728
+ <div class="space-y-4 mb-6">
729
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg">
730
+ <div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center mr-4">
731
+ <i class="fas fa-infinity text-blue-500"></i>
732
+ </div>
733
+ <div>
734
+ <h4 class="font-medium">Accès illimité</h4>
735
+ <p class="text-sm text-gray-500">À tous les jeux et conversations</p>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg">
740
+ <div class="w-10 h-10 bg-green-50 rounded-full flex items-center justify-center mr-4">
741
+ <i class="fas fa-chart-line text-green-500"></i>
742
+ </div>
743
+ <div>
744
+ <h4 class="font-medium">Progression rapide</h4>
745
+ <p class="text-sm text-gray-500">Apprenez 2x plus vite</p>
746
+ </div>
747
+ </div>
748
+
749
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg">
750
+ <div class="w-10 h-10 bg-purple-50 rounded-full flex items-center justify-center mr-4">
751
+ <i class="fas fa-mobile-alt text-purple-500"></i>
752
+ </div>
753
+ <div>
754
+ <h4 class="font-medium">Mode hors ligne</h4>
755
+ <p class="text-sm text-gray-500">Apprenez n'importe où</p>
756
+ </div>
757
+ </div>
758
+ </div>
759
+
760
+ <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-md mb-4">
761
+ Essayer 7 jours gratuitement
762
+ </button>
763
+ <p class="text-center text-xs text-gray-500">Ensuite $9.99/mois. Annulez à tout moment.</p>
764
+ </div>
765
+ </div>
766
+
767
+ <script>
768
+ // Chat simulation
769
+ const chatContainer = document.getElementById('chatContainer');
770
+ const userInput = document.getElementById('userInput');
771
+ const sendBtn = document.getElementById('sendBtn');
772
+ const hintBtn = document.getElementById('hintBtn');
773
+
774
+ const botResponses = [
775
+ "Très bien ! Pouvez-vous me dire comment vous vous appelez en français ?",
776
+ "Enchanté de faire votre connaissance ! Quel âge avez-vous ?",
777
+ "C'est un bon début. Parlons de vos hobbies. Qu'aimez-vous faire pendant votre temps libre ?",
778
+ "Intéressant ! Moi j'aide les gens à apprendre le français. Avez-vous déjà visité la France ?",
779
+ "Merci pour cette conversation ! Voulez-vous pratiquer un autre sujet ?"
780
+ ];
781
+
782
+ let currentResponse = 0;
783
+
784
+ function addBotMessage(message) {
785
+ const messageDiv = document.createElement('div');
786
+ messageDiv.className = 'chat-bubble bg-blue-100 text-gray-800 p-4 max-w-xs fade-in';
787
+ messageDiv.innerHTML = `<p>${message}</p>`;
788
+ chatContainer.appendChild(messageDiv);
789
+ chatContainer.scrollTop = chatContainer.scrollHeight;
790
+ }
791
+
792
+ function addUserMessage(message) {
793
+ const messageDiv = document.createElement('div');
794
+ messageDiv.className = 'chat-bubble user-bubble bg-green-100 text-gray-800 p-4 max-w-xs ml-auto fade-in';
795
+ messageDiv.innerHTML = `<p>${message}</p>`;
796
+ chatContainer.appendChild(messageDiv);
797
+ chatContainer.scrollTop = chatContainer.scrollHeight;
798
+
799
+ // Bot responds after a short delay
800
+ setTimeout(() => {
801
+ if (currentResponse < botResponses.length) {
802
+ addBotMessage(botResponses[currentResponse]);
803
+ currentResponse++;
804
+ } else {
805
+ addBotMessage("Nous avons atteint la limite de la version gratuite. Passez à Premium pour continuer !");
806
+ }
807
+ }, 1000);
808
+ }
809
+
810
+ sendBtn.addEventListener('click', () => {
811
+ const message = userInput.value.trim();
812
+ if (message) {
813
+ addUserMessage(message);
814
+ userInput.value = '';
815
+ }
816
+ });
817
+
818
+ userInput.addEventListener('keypress', (e) => {
819
+ if (e.key === 'Enter') {
820
+ const message = userInput.value.trim();
821
+ if (message) {
822
+ addUserMessage(message);
823
+ userInput.value = '';
824
+ }
825
+ }
826
+ });
827
+
828
+ hintBtn.addEventListener('click', () => {
829
+ const hints = [
830
+ "Essayez de dire 'Bonjour, je m'appelle [votre nom]'",
831
+ "Vous pourriez répondre avec 'J'ai [âge] ans'",
832
+ "Dites quelque chose comme 'J'aime [activité]'",
833
+ "Répondez avec 'Oui' ou 'Non' puis développez",
834
+ "Essayez de poser une question comme 'Quel est votre plat préféré ?'"
835
+ ];
836
+
837
+ if (currentResponse < hints.length) {
838
+ alert(`Indice: ${hints[currentResponse]}`);
839
+ } else {
840
+ alert("Passez à Premium pour plus d'indices et de fonctionnalités !");
841
+ }
842
+ });
843
+
844
+ // Upgrade modal
845
+ const upgradeBtn = document.getElementById('upgradeBtn');
846
+ const upgradeModal = document.getElementById('upgradeModal');
847
+ const closeModal = document.getElementById('closeModal');
848
+
849
+ upgradeBtn.addEventListener('click', () => {
850
+ upgradeModal.classList.remove('hidden');
851
+ });
852
+
853
+ closeModal.addEventListener('click', () => {
854
+ upgradeModal.classList.add('hidden');
855
+ });
856
+
857
+ // Close modal when clicking outside
858
+ upgradeModal.addEventListener('click', (e) => {
859
+ if (e.target === upgradeModal) {
860
+ upgradeModal.classList.add('hidden');
861
+ }
862
+ });
863
+
864
+ // Demo conversation starter
865
+ setTimeout(() => {
866
+ addBotMessage("Essayez de taper 'Bonjour' pour commencer la conversation !");
867
+ }, 2000);
868
+ </script>
869
+ <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=zama1/linguaquest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
870
+ </html>