Hugging Face's logo

Spaces:
SaidAmchghal
/
mobildev
Running

App Files Community
SaidAmchghal commited on
Commit
a967c1e
·
verified ·
1 Parent(s): ebf5a7b

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +627 -50
  2. prompts.txt +2 -1
index.html CHANGED
@@ -29,11 +29,46 @@
29
  from { opacity: 0; }
30
  to { opacity: 1; }
31
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </style>
33
  </head>
34
  <body class="bg-gray-50 font-sans">
35
  <!-- Navigation -->
36
- <nav class="gradient-bg text-white shadow-lg">
37
  <div class="container mx-auto px-6 py-3">
38
  <div class="flex items-center justify-between">
39
  <div class="flex items-center space-x-4">
@@ -41,15 +76,26 @@
41
  <span class="text-xl font-bold">MobileDev Learn</span>
42
  </div>
43
  <div class="hidden md:flex items-center space-x-8">
44
- <a href="#tutoriels" class="hover:text-gray-200">Tutoriels</a>
45
- <a href="#ressources" class="hover:text-gray-200">Ressources</a>
46
- <a href="#quiz" class="hover:text-gray-200">Quiz</a>
47
- <a href="#communaute" class="hover:text-gray-200">Communauté</a>
 
48
  </div>
49
- <button class="md:hidden focus:outline-none">
50
  <i class="fas fa-bars text-xl"></i>
51
  </button>
52
  </div>
 
 
 
 
 
 
 
 
 
 
53
  </div>
54
  </nav>
55
 
@@ -69,59 +115,227 @@
69
  </div>
70
  </section>
71
 
72
- <!-- Features Section -->
73
  <section class="py-16 bg-white">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  <div class="container mx-auto px-6">
75
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Pourquoi apprendre avec nous ?</h2>
76
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
77
- <div class="bg-gray-50 p-8 rounded-xl shadow-md transition duration-300 card-hover">
78
  <div class="text-purple-600 mb-4">
79
  <i class="fas fa-laptop-code text-4xl"></i>
80
  </div>
81
  <h3 class="text-xl font-bold mb-3">Tutoriels pratiques</h3>
82
- <p class="text-gray-600">Des guides étape par étape avec des exemples concrets pour chaque concept.</p>
83
  </div>
84
- <div class="bg-gray-50 p-8 rounded-xl shadow-md transition duration-300 card-hover">
85
  <div class="text-purple-600 mb-4">
86
  <i class="fas fa-code text-4xl"></i>
87
  </div>
88
  <h3 class="text-xl font-bold mb-3">Exemples de code</h3>
89
- <p class="text-gray-600">Accédez à des snippets de code prêts à l'emploi pour vos projets.</p>
90
  </div>
91
- <div class="bg-gray-50 p-8 rounded-xl shadow-md transition duration-300 card-hover">
92
  <div class="text-purple-600 mb-4">
93
  <i class="fas fa-question-circle text-4xl"></i>
94
  </div>
95
  <h3 class="text-xl font-bold mb-3">Quiz interactifs</h3>
96
- <p class="text-gray-600">Testez vos connaissances avec nos quiz basés sur des API éducatives.</p>
97
  </div>
98
  </div>
99
  </div>
100
  </section>
101
 
102
  <!-- Tutorials Section -->
103
- <section id="tutoriels" class="py-16 bg-gray-50">
104
  <div class="container mx-auto px-6">
105
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Tutoriels populaires</h2>
106
 
107
- <div class="mb-8 flex justify-center space-x-4">
108
- <button onclick="filterTutorials('all')" class="px-4 py-2 bg-purple-600 text-white rounded-full">Tous</button>
109
  <button onclick="filterTutorials('flutter')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Flutter</button>
110
  <button onclick="filterTutorials('react')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">React Native</button>
111
  <button onclick="filterTutorials('kotlin')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Kotlin</button>
112
  <button onclick="filterTutorials('swift')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Swift</button>
 
 
113
  </div>
114
 
115
  <div id="tutorials-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
116
  <!-- Tutorials will be loaded here by JavaScript -->
117
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  </div>
119
  </section>
120
 
121
  <!-- Code Example Section -->
122
  <section class="py-16 bg-white">
123
  <div class="container mx-auto px-6">
124
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Exemple de code</h2>
125
 
126
  <div class="flex flex-col md:flex-row gap-8">
127
  <div class="flex-1">
@@ -178,9 +392,15 @@ class _MyHomePageState extends State&lt;MyHomePage&gt; {
178
  }
179
  }</pre>
180
  </div>
181
- <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">
182
- <i class="fas fa-copy mr-2"></i> Copier le code
183
- </button>
 
 
 
 
 
 
184
  </div>
185
 
186
  <div class="flex-1">
@@ -209,8 +429,24 @@ const HelloWorldApp = () => {
209
 
210
  export default HelloWorldApp;</pre>
211
  </div>
212
- <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">
213
- <i class="fas fa-copy mr-2"></i> Copier le code
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  </button>
215
  </div>
216
  </div>
@@ -225,6 +461,15 @@ export default HelloWorldApp;</pre>
225
  <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md">
226
  <div id="quiz-container">
227
  <h3 class="text-xl font-bold mb-6 text-purple-600">Quiz sur les concepts de base</h3>
 
 
 
 
 
 
 
 
 
228
  <div id="quiz-question" class="mb-6 text-lg">
229
  <!-- Question will be loaded here -->
230
  </div>
@@ -242,6 +487,44 @@ export default HelloWorldApp;</pre>
242
  </button>
243
  </div>
244
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  </div>
246
  </section>
247
 
@@ -280,6 +563,41 @@ export default HelloWorldApp;</pre>
280
  </a>
281
  </div>
282
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  </div>
284
  </section>
285
 
@@ -291,18 +609,22 @@ export default HelloWorldApp;</pre>
291
  <div class="max-w-2xl mx-auto text-center">
292
  <p class="text-xl mb-8">Connectez-vous avec d'autres apprenants, posez des questions et partagez vos projets.</p>
293
 
294
- <div class="flex justify-center space-x-6">
295
- <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300">
296
  <i class="fab fa-discord text-2xl"></i>
 
297
  </a>
298
- <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300">
299
  <i class="fab fa-github text-2xl"></i>
 
300
  </a>
301
- <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300">
302
  <i class="fab fa-slack text-2xl"></i>
 
303
  </a>
304
- <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300">
305
  <i class="fab fa-twitter text-2xl"></i>
 
306
  </a>
307
  </div>
308
 
@@ -315,29 +637,120 @@ export default HelloWorldApp;</pre>
315
  S'abonner
316
  </button>
317
  </div>
 
318
  </div>
319
  </div>
320
  </div>
321
  </section>
322
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
323
  <!-- Footer -->
324
- <footer class="bg-gray-800 text-white py-8">
325
  <div class="container mx-auto px-6">
326
- <div class="flex flex-col md:flex-row justify-between items-center">
327
- <div class="mb-4 md:mb-0">
328
- <div class="flex items-center space-x-2">
329
  <i class="fas fa-mobile-alt text-xl"></i>
330
  <span class="text-lg font-bold">MobileDev Learn</span>
331
  </div>
332
- <p class="text-gray-400 mt-2">Apprenez le développement mobile gratuitement.</p>
 
 
 
 
 
 
333
  </div>
334
- <div class="flex space-x-6">
335
- <a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a>
336
- <a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a>
337
- <a href="#" class="text-gray-400 hover:text-white transition">Contact</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
338
  </div>
339
  </div>
340
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
 
341
  <p>&copy; 2023 MobileDev Learn. Tous droits réservés.</p>
342
  </div>
343
  </div>
@@ -353,7 +766,9 @@ export default HelloWorldApp;</pre>
353
  category: "flutter",
354
  level: "Débutant",
355
  duration: "30 min",
356
- icon: "fab fa-flutter"
 
 
357
  },
358
  {
359
  id: 2,
@@ -362,7 +777,9 @@ export default HelloWorldApp;</pre>
362
  category: "react",
363
  level: "Intermédiaire",
364
  duration: "45 min",
365
- icon: "fab fa-react"
 
 
366
  },
367
  {
368
  id: 3,
@@ -371,7 +788,9 @@ export default HelloWorldApp;</pre>
371
  category: "kotlin",
372
  level: "Débutant",
373
  duration: "1 heure",
374
- icon: "fab fa-android"
 
 
375
  },
376
  {
377
  id: 4,
@@ -380,7 +799,9 @@ export default HelloWorldApp;</pre>
380
  category: "swift",
381
  level: "Intermédiaire",
382
  duration: "50 min",
383
- icon: "fab fa-apple"
 
 
384
  },
385
  {
386
  id: 5,
@@ -389,7 +810,9 @@ export default HelloWorldApp;</pre>
389
  category: "flutter",
390
  level: "Intermédiaire",
391
  duration: "40 min",
392
- icon: "fab fa-flutter"
 
 
393
  },
394
  {
395
  id: 6,
@@ -398,7 +821,42 @@ export default HelloWorldApp;</pre>
398
  category: "react",
399
  level: "Avancé",
400
  duration: "1 heure",
401
- icon: "fab fa-react"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
402
  }
403
  ];
404
 
@@ -445,14 +903,18 @@ export default HelloWorldApp;</pre>
445
  tutorialCard.className = 'bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover fade-in';
446
  tutorialCard.innerHTML = `
447
  <div class="flex items-center mb-4">
448
- <i class="${tutorial.icon} text-2xl text-purple-600 mr-3"></i>
449
- <span class="px-3 py-1 bg-${tutorial.category === 'flutter' ? 'blue' : tutorial.category === 'react' ? 'sky' : tutorial.category === 'kotlin' ? 'orange' : 'gray'}-100 text-${tutorial.category === 'flutter' ? 'blue' : tutorial.category === 'react' ? 'sky' : tutorial.category === 'kotlin' ? 'orange' : 'gray'}-800 text-sm rounded-full">${tutorial.category.charAt(0).toUpperCase() + tutorial.category.slice(1)}</span>
450
  </div>
451
  <h3 class="text-xl font-bold mb-2">${tutorial.title}</h3>
452
  <p class="text-gray-600 mb-4">${tutorial.description}</p>
 
 
 
 
453
  <div class="flex justify-between items-center text-sm text-gray-500">
454
- <span>${tutorial.level}</span>
455
- <span>${tutorial.duration}</span>
456
  </div>
457
  <button class="mt-4 w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700 transition">
458
  Voir le tutoriel
@@ -462,6 +924,52 @@ export default HelloWorldApp;</pre>
462
  });
463
  }
464
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
465
  // Filter tutorials
466
  function filterTutorials(category) {
467
  loadTutorials(category);
@@ -474,6 +982,7 @@ export default HelloWorldApp;</pre>
474
  function startQuiz() {
475
  document.getElementById('quiz-start').classList.add('hidden');
476
  document.getElementById('quiz-next').classList.remove('hidden');
 
477
  showQuestion();
478
  }
479
 
@@ -487,7 +996,20 @@ export default HelloWorldApp;</pre>
487
 
488
  if (currentQuestion >= quizQuestions.length) {
489
  // Quiz finished
490
- questionContainer.innerHTML = `Quiz terminé! Votre score: ${score}/${quizQuestions.length}`;
 
 
 
 
 
 
 
 
 
 
 
 
 
491
  optionsContainer.innerHTML = '';
492
  document.getElementById('quiz-next').classList.add('hidden');
493
  document.getElementById('quiz-start').classList.remove('hidden');
@@ -532,18 +1054,49 @@ export default HelloWorldApp;</pre>
532
  }
533
 
534
  feedbackContainer.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
535
  }
536
 
537
  function nextQuestion() {
538
  currentQuestion++;
 
539
  showQuestion();
540
  }
541
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
542
  // Copy code buttons
543
  function setupCopyButtons() {
544
- document.querySelectorAll('.code-block + button').forEach(button => {
545
  button.addEventListener('click', () => {
546
- const codeBlock = button.previousElementSibling.querySelector('pre');
547
  navigator.clipboard.writeText(codeBlock.textContent);
548
 
549
  const originalText = button.innerHTML;
@@ -567,6 +1120,30 @@ export default HelloWorldApp;</pre>
567
 
568
  document.getElementById('quiz-start').addEventListener('click', startQuiz);
569
  document.getElementById('quiz-next').addEventListener('click', nextQuestion);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
570
  });
571
  </script>
572
  <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=SaidAmchghal/mobildev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
29
  from { opacity: 0; }
30
  to { opacity: 1; }
31
  }
32
+ .progress-bar {
33
+ height: 6px;
34
+ background-color: #e2e8f0;
35
+ border-radius: 3px;
36
+ overflow: hidden;
37
+ }
38
+ .progress-fill {
39
+ height: 100%;
40
+ background-color: #6e8efb;
41
+ transition: width 0.3s ease;
42
+ }
43
+ .tooltip {
44
+ position: relative;
45
+ display: inline-block;
46
+ }
47
+ .tooltip .tooltip-text {
48
+ visibility: hidden;
49
+ width: 200px;
50
+ background-color: #4a5568;
51
+ color: #fff;
52
+ text-align: center;
53
+ border-radius: 6px;
54
+ padding: 5px;
55
+ position: absolute;
56
+ z-index: 1;
57
+ bottom: 125%;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ opacity: 0;
61
+ transition: opacity 0.3s;
62
+ }
63
+ .tooltip:hover .tooltip-text {
64
+ visibility: visible;
65
+ opacity: 1;
66
+ }
67
  </style>
68
  </head>
69
  <body class="bg-gray-50 font-sans">
70
  <!-- Navigation -->
71
+ <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50">
72
  <div class="container mx-auto px-6 py-3">
73
  <div class="flex items-center justify-between">
74
  <div class="flex items-center space-x-4">
 
76
  <span class="text-xl font-bold">MobileDev Learn</span>
77
  </div>
78
  <div class="hidden md:flex items-center space-x-8">
79
+ <a href="#tutoriels" class="hover:text-gray-200 transition">Tutoriels</a>
80
+ <a href="#ressources" class="hover:text-gray-200 transition">Ressources</a>
81
+ <a href="#quiz" class="hover:text-gray-200 transition">Quiz</a>
82
+ <a href="#projets" class="hover:text-gray-200 transition">Projets</a>
83
+ <a href="#communaute" class="hover:text-gray-200 transition">Communauté</a>
84
  </div>
85
+ <button class="md:hidden focus:outline-none" id="mobile-menu-button">
86
  <i class="fas fa-bars text-xl"></i>
87
  </button>
88
  </div>
89
+ <!-- Mobile menu -->
90
+ <div class="md:hidden hidden mt-4" id="mobile-menu">
91
+ <div class="flex flex-col space-y-3">
92
+ <a href="#tutoriels" class="hover:text-gray-200 transition">Tutoriels</a>
93
+ <a href="#ressources" class="hover:text-gray-200 transition">Ressources</a>
94
+ <a href="#quiz" class="hover:text-gray-200 transition">Quiz</a>
95
+ <a href="#projets" class="hover:text-gray-200 transition">Projets</a>
96
+ <a href="#communaute" class="hover:text-gray-200 transition">Communauté</a>
97
+ </div>
98
+ </div>
99
  </div>
100
  </nav>
101
 
 
115
  </div>
116
  </section>
117
 
118
+ <!-- Learning Path Section -->
119
  <section class="py-16 bg-white">
120
+ <div class="container mx-auto px-6">
121
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Parcours d'apprentissage</h2>
122
+
123
+ <div class="max-w-4xl mx-auto">
124
+ <div class="flex flex-col space-y-8">
125
+ <!-- Flutter Path -->
126
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md">
127
+ <div class="flex items-center mb-4">
128
+ <i class="fab fa-flutter text-3xl text-blue-500 mr-4"></i>
129
+ <h3 class="text-xl font-bold">Parcours Flutter</h3>
130
+ <span class="ml-auto bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Populaire</span>
131
+ </div>
132
+ <p class="text-gray-600 mb-4">Devenez expert en développement d'applications multiplateformes avec Flutter et Dart.</p>
133
+
134
+ <div class="mb-4">
135
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
136
+ <span>Progression</span>
137
+ <span>25%</span>
138
+ </div>
139
+ <div class="progress-bar">
140
+ <div class="progress-fill" style="width: 25%"></div>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
145
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
146
+ <div class="flex items-center mb-2">
147
+ <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-2">1</div>
148
+ <h4 class="font-medium">Bases de Dart</h4>
149
+ </div>
150
+ <p class="text-sm text-gray-500">Syntaxe, types de données, fonctions</p>
151
+ </div>
152
+ <div class="bg-white p-4 rounded-lg border border-gray-200 opacity-50">
153
+ <div class="flex items-center mb-2">
154
+ <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">2</div>
155
+ <h4 class="font-medium">Widgets Flutter</h4>
156
+ </div>
157
+ <p class="text-sm text-gray-400">Stateless vs Stateful widgets</p>
158
+ </div>
159
+ <div class="bg-white p-4 rounded-lg border border-gray-200 opacity-50">
160
+ <div class="flex items-center mb-2">
161
+ <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">3</div>
162
+ <h4 class="font-medium">Navigation</h4>
163
+ </div>
164
+ <p class="text-sm text-gray-400">Routes et navigation entre écrans</p>
165
+ </div>
166
+ </div>
167
+
168
+ <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">
169
+ Continuer le parcours
170
+ </button>
171
+ </div>
172
+
173
+ <!-- React Native Path -->
174
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md">
175
+ <div class="flex items-center mb-4">
176
+ <i class="fab fa-react text-3xl text-sky-500 mr-4"></i>
177
+ <h3 class="text-xl font-bold">Parcours React Native</h3>
178
+ </div>
179
+ <p class="text-gray-600 mb-4">Créez des applications natives avec JavaScript et React.</p>
180
+
181
+ <div class="mb-4">
182
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
183
+ <span>Progression</span>
184
+ <span>10%</span>
185
+ </div>
186
+ <div class="progress-bar">
187
+ <div class="progress-fill" style="width: 10%"></div>
188
+ </div>
189
+ </div>
190
+
191
+ <button class="w-full bg-sky-500 text-white py-2 rounded hover:bg-sky-600 transition">
192
+ Commencer le parcours
193
+ </button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Features Section -->
201
+ <section class="py-16 bg-gray-50">
202
  <div class="container mx-auto px-6">
203
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Pourquoi apprendre avec nous ?</h2>
204
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
205
+ <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
206
  <div class="text-purple-600 mb-4">
207
  <i class="fas fa-laptop-code text-4xl"></i>
208
  </div>
209
  <h3 class="text-xl font-bold mb-3">Tutoriels pratiques</h3>
210
+ <p class="text-gray-600">Des guides étape par étape avec des exemples concrets pour chaque concept. Accédez à des démonstrations interactives et des exercices pratiques.</p>
211
  </div>
212
+ <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
213
  <div class="text-purple-600 mb-4">
214
  <i class="fas fa-code text-4xl"></i>
215
  </div>
216
  <h3 class="text-xl font-bold mb-3">Exemples de code</h3>
217
+ <p class="text-gray-600">Accédez à des snippets de code prêts à l'emploi pour vos projets. Tous nos exemples sont testés et commentés pour une meilleure compréhension.</p>
218
  </div>
219
+ <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover">
220
  <div class="text-purple-600 mb-4">
221
  <i class="fas fa-question-circle text-4xl"></i>
222
  </div>
223
  <h3 class="text-xl font-bold mb-3">Quiz interactifs</h3>
224
+ <p class="text-gray-600">Testez vos connaissances avec nos quiz basés sur des API éducatives. Recevez des feedbacks immédiats et des explications détaillées.</p>
225
  </div>
226
  </div>
227
  </div>
228
  </section>
229
 
230
  <!-- Tutorials Section -->
231
+ <section id="tutoriels" class="py-16 bg-white">
232
  <div class="container mx-auto px-6">
233
  <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Tutoriels populaires</h2>
234
 
235
+ <div class="mb-8 flex flex-wrap justify-center gap-2">
236
+ <button onclick="filterTutorials('all')" class="px-4 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition">Tous</button>
237
  <button onclick="filterTutorials('flutter')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Flutter</button>
238
  <button onclick="filterTutorials('react')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">React Native</button>
239
  <button onclick="filterTutorials('kotlin')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Kotlin</button>
240
  <button onclick="filterTutorials('swift')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Swift</button>
241
+ <button onclick="filterTutorials('firebase')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">Firebase</button>
242
+ <button onclick="filterTutorials('api')" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-purple-600 hover:text-white transition">API REST</button>
243
  </div>
244
 
245
  <div id="tutorials-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
246
  <!-- Tutorials will be loaded here by JavaScript -->
247
  </div>
248
+
249
+ <div class="mt-12 text-center">
250
+ <button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-purple-600 hover:text-white transition">
251
+ Voir plus de tutoriels
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Projects Section -->
258
+ <section id="projets" class="py-16 bg-gray-50">
259
+ <div class="container mx-auto px-6">
260
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Projets pratiques</h2>
261
+
262
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
263
+ <div class="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover">
264
+ <div class="relative pb-2/3 mb-4 overflow-hidden rounded-lg">
265
+ <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="ToDo App" class="w-full h-48 object-cover">
266
+ </div>
267
+ <div class="flex items-center mb-2">
268
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs mr-2">Débutant</span>
269
+ <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 2 heures</span>
270
+ </div>
271
+ <h3 class="text-xl font-bold mb-2">Application ToDo</h3>
272
+ <p class="text-gray-600 mb-4">Créez une application de liste de tâches avec Flutter et Firebase.</p>
273
+ <div class="flex justify-between items-center">
274
+ <div class="flex space-x-2">
275
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Flutter</span>
276
+ <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded-full text-xs">Firebase</span>
277
+ </div>
278
+ <button class="text-purple-600 hover:text-purple-800 transition">
279
+ <i class="fas fa-arrow-right"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover">
285
+ <div class="relative pb-2/3 mb-4 overflow-hidden rounded-lg">
286
+ <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Weather App" class="w-full h-48 object-cover">
287
+ </div>
288
+ <div class="flex items-center mb-2">
289
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs mr-2">Intermédiaire</span>
290
+ <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 4 heures</span>
291
+ </div>
292
+ <h3 class="text-xl font-bold mb-2">Application Météo</h3>
293
+ <p class="text-gray-600 mb-4">Développez une application météo avec React Native et l'API OpenWeather.</p>
294
+ <div class="flex justify-between items-center">
295
+ <div class="flex space-x-2">
296
+ <span class="bg-sky-100 text-sky-800 px-2 py-1 rounded-full text-xs">React Native</span>
297
+ <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">API REST</span>
298
+ </div>
299
+ <button class="text-purple-600 hover:text-purple-800 transition">
300
+ <i class="fas fa-arrow-right"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover">
306
+ <div class="relative pb-2/3 mb-4 overflow-hidden rounded-lg">
307
+ <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Chat App" class="w-full h-48 object-cover">
308
+ </div>
309
+ <div class="flex items-center mb-2">
310
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs mr-2">Avancé</span>
311
+ <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 8 heures</span>
312
+ </div>
313
+ <h3 class="text-xl font-bold mb-2">Application de Chat</h3>
314
+ <p class="text-gray-600 mb-4">Construisez un chat en temps réel avec Kotlin et Firebase.</p>
315
+ <div class="flex justify-between items-center">
316
+ <div class="flex space-x-2">
317
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Kotlin</span>
318
+ <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded-full text-xs">Firebase</span>
319
+ </div>
320
+ <button class="text-purple-600 hover:text-purple-800 transition">
321
+ <i class="fas fa-arrow-right"></i>
322
+ </button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="mt-12 text-center">
328
+ <button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-purple-600 hover:text-white transition">
329
+ Voir tous les projets
330
+ </button>
331
+ </div>
332
  </div>
333
  </section>
334
 
335
  <!-- Code Example Section -->
336
  <section class="py-16 bg-white">
337
  <div class="container mx-auto px-6">
338
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Exemples de code</h2>
339
 
340
  <div class="flex flex-col md:flex-row gap-8">
341
  <div class="flex-1">
 
392
  }
393
  }</pre>
394
  </div>
395
+ <div class="flex justify-between items-center">
396
+ <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">
397
+ <i class="fas fa-copy mr-2"></i> Copier le code
398
+ </button>
399
+ <div class="flex space-x-2">
400
+ <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 1,245</span>
401
+ <span class="text-gray-500 text-sm"><i class="far fa-thumbs-up mr-1"></i> 89%</span>
402
+ </div>
403
+ </div>
404
  </div>
405
 
406
  <div class="flex-1">
 
429
 
430
  export default HelloWorldApp;</pre>
431
  </div>
432
+ <div class="flex justify-between items-center">
433
+ <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">
434
+ <i class="fas fa-copy mr-2"></i> Copier le code
435
+ </button>
436
+ <div class="flex space-x-2">
437
+ <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 982</span>
438
+ <span class="text-gray-500 text-sm"><i class="far fa-thumbs-up mr-1"></i> 92%</span>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="mt-12">
445
+ <h3 class="text-xl font-bold mb-4 text-purple-600">Rechercher des exemples de code</h3>
446
+ <div class="relative max-w-2xl mx-auto">
447
+ <input type="text" placeholder="Rechercher des snippets (ex: 'navigation', 'firebase', 'api')" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent">
448
+ <button class="absolute right-3 top-3 text-gray-400 hover:text-purple-600">
449
+ <i class="fas fa-search"></i>
450
  </button>
451
  </div>
452
  </div>
 
461
  <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md">
462
  <div id="quiz-container">
463
  <h3 class="text-xl font-bold mb-6 text-purple-600">Quiz sur les concepts de base</h3>
464
+ <div id="quiz-progress" class="mb-6">
465
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
466
+ <span>Progression</span>
467
+ <span id="quiz-progress-text">0/5</span>
468
+ </div>
469
+ <div class="progress-bar">
470
+ <div id="quiz-progress-fill" class="progress-fill" style="width: 0%"></div>
471
+ </div>
472
+ </div>
473
  <div id="quiz-question" class="mb-6 text-lg">
474
  <!-- Question will be loaded here -->
475
  </div>
 
487
  </button>
488
  </div>
489
  </div>
490
+
491
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
492
+ <div class="bg-white p-6 rounded-xl shadow-md">
493
+ <h3 class="text-xl font-bold mb-4 text-purple-600">Quiz Flutter</h3>
494
+ <p class="text-gray-600 mb-4">Testez vos connaissances sur Flutter et Dart avec ce quiz de 10 questions.</p>
495
+ <div class="flex items-center text-sm text-gray-500">
496
+ <i class="fas fa-question-circle mr-2"></i>
497
+ <span>10 questions</span>
498
+ </div>
499
+ <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition">
500
+ Commencer
501
+ </button>
502
+ </div>
503
+
504
+ <div class="bg-white p-6 rounded-xl shadow-md">
505
+ <h3 class="text-xl font-bold mb-4 text-purple-600">Quiz React Native</h3>
506
+ <p class="text-gray-600 mb-4">Évaluez votre maîtrise de React Native avec ce quiz complet.</p>
507
+ <div class="flex items-center text-sm text-gray-500">
508
+ <i class="fas fa-question-circle mr-2"></i>
509
+ <span>15 questions</span>
510
+ </div>
511
+ <button class="mt-4 w-full bg-sky-500 text-white py-2 rounded hover:bg-sky-600 transition">
512
+ Commencer
513
+ </button>
514
+ </div>
515
+
516
+ <div class="bg-white p-6 rounded-xl shadow-md">
517
+ <h3 class="text-xl font-bold mb-4 text-purple-600">Quiz Kotlin</h3>
518
+ <p class="text-gray-600 mb-4">Découvrez votre niveau en Kotlin pour le développement Android.</p>
519
+ <div class="flex items-center text-sm text-gray-500">
520
+ <i class="fas fa-question-circle mr-2"></i>
521
+ <span>12 questions</span>
522
+ </div>
523
+ <button class="mt-4 w-full bg-green-500 text-white py-2 rounded hover:bg-green-600 transition">
524
+ Commencer
525
+ </button>
526
+ </div>
527
+ </div>
528
  </div>
529
  </section>
530
 
 
563
  </a>
564
  </div>
565
  </div>
566
+
567
+ <div class="mt-12">
568
+ <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">Outils recommandés</h3>
569
+
570
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
571
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center">
572
+ <div class="flex justify-center mb-3">
573
+ <i class="fab fa-android text-4xl text-green-500"></i>
574
+ </div>
575
+ <h4 class="font-bold">Android Studio</h4>
576
+ <p class="text-sm text-gray-600 mt-1">IDE pour développement Android</p>
577
+ </div>
578
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center">
579
+ <div class="flex justify-center mb-3">
580
+ <i class="fas fa-code text-4xl text-blue-500"></i>
581
+ </div>
582
+ <h4 class="font-bold">VS Code</h4>
583
+ <p class="text-sm text-gray-600 mt-1">Éditeur de code polyvalent</p>
584
+ </div>
585
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center">
586
+ <div class="flex justify-center mb-3">
587
+ <i class="fab fa-apple text-4xl text-gray-800"></i>
588
+ </div>
589
+ <h4 class="font-bold">Xcode</h4>
590
+ <p class="text-sm text-gray-600 mt-1">IDE pour développement iOS</p>
591
+ </div>
592
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center">
593
+ <div class="flex justify-center mb-3">
594
+ <i class="fas fa-fire text-4xl text-orange-500"></i>
595
+ </div>
596
+ <h4 class="font-bold">Firebase</h4>
597
+ <p class="text-sm text-gray-600 mt-1">Backend pour applications mobiles</p>
598
+ </div>
599
+ </div>
600
+ </div>
601
  </div>
602
  </section>
603
 
 
609
  <div class="max-w-2xl mx-auto text-center">
610
  <p class="text-xl mb-8">Connectez-vous avec d'autres apprenants, posez des questions et partagez vos projets.</p>
611
 
612
+ <div class="flex justify-center space-x-6 mb-12">
613
+ <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip">
614
  <i class="fab fa-discord text-2xl"></i>
615
+ <span class="tooltip-text">Rejoignez notre serveur Discord</span>
616
  </a>
617
+ <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip">
618
  <i class="fab fa-github text-2xl"></i>
619
+ <span class="tooltip-text">Contribuez sur GitHub</span>
620
  </a>
621
+ <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip">
622
  <i class="fab fa-slack text-2xl"></i>
623
+ <span class="tooltip-text">Chattez sur Slack</span>
624
  </a>
625
+ <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip">
626
  <i class="fab fa-twitter text-2xl"></i>
627
+ <span class="tooltip-text">Suivez-nous sur Twitter</span>
628
  </a>
629
  </div>
630
 
 
637
  S'abonner
638
  </button>
639
  </div>
640
+ <p class="text-sm mt-2 text-white text-opacity-70">Nous ne partagerons jamais votre email.</p>
641
  </div>
642
  </div>
643
  </div>
644
  </section>
645
 
646
+ <!-- FAQ Section -->
647
+ <section class="py-16 bg-white">
648
+ <div class="container mx-auto px-6 max-w-4xl">
649
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Questions fréquentes</h2>
650
+
651
+ <div class="space-y-4">
652
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
653
+ <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(1)">
654
+ <h3 class="text-lg font-medium text-left">Comment choisir entre Flutter et React Native ?</h3>
655
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i>
656
+ </button>
657
+ <div class="px-4 pb-4 hidden" id="faq-content-1">
658
+ <p class="text-gray-600">Flutter utilise Dart comme langage et offre des performances natives grâce à son moteur de rendu personnalisé. React Native utilise JavaScript/TypeScript et s'intègre bien avec l'écosystème React. Le choix dépend de vos compétences existantes et des besoins de votre projet.</p>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
663
+ <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(2)">
664
+ <h3 class="text-lg font-medium text-left">Quelles sont les prérequis pour apprendre le développement mobile ?</h3>
665
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i>
666
+ </button>
667
+ <div class="px-4 pb-4 hidden" id="faq-content-2">
668
+ <p class="text-gray-600">Pour commencer, une compréhension de base de la programmation est utile. Pour Flutter, apprendre Dart est nécessaire. Pour React Native, JavaScript est requis. Pour le développement natif, Kotlin (Android) ou Swift (iOS) sont nécessaires. Nos parcours débutants vous guideront pas à pas.</p>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
673
+ <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(3)">
674
+ <h3 class="text-lg font-medium text-left">Est-ce que toutes les ressources sont vraiment gratuites ?</h3>
675
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i>
676
+ </button>
677
+ <div class="px-4 pb-4 hidden" id="faq-content-3">
678
+ <p class="text-gray-600">Oui, toutes nos ressources d'apprentissage sont entièrement gratuites. Nous croyons en l'accès libre à l'éducation en développement mobile. Nous maintenons ce modèle grâce à des partenariats et des contributions de la communauté.</p>
679
+ </div>
680
+ </div>
681
+
682
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
683
+ <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(4)">
684
+ <h3 class="text-lg font-medium text-left">Comment puis-je contribuer au projet ?</h3>
685
+ <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-4"></i>
686
+ </button>
687
+ <div class="px-4 pb-4 hidden" id="faq-content-4">
688
+ <p class="text-gray-600">Nous acceptons les contributions de plusieurs manières : soumission de tutoriels, correction de bugs, amélioration de la documentation, ou même simplement en partageant vos projets avec la communauté. Visitez notre page GitHub pour plus d'informations.</p>
689
+ </div>
690
+ </div>
691
+ </div>
692
+
693
+ <div class="mt-12 text-center">
694
+ <button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-purple-600 hover:text-white transition">
695
+ Voir toutes les questions
696
+ </button>
697
+ </div>
698
+ </div>
699
+ </section>
700
+
701
  <!-- Footer -->
702
+ <footer class="bg-gray-800 text-white py-12">
703
  <div class="container mx-auto px-6">
704
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
705
+ <div>
706
+ <div class="flex items-center space-x-2 mb-4">
707
  <i class="fas fa-mobile-alt text-xl"></i>
708
  <span class="text-lg font-bold">MobileDev Learn</span>
709
  </div>
710
+ <p class="text-gray-400">Apprenez le développement mobile gratuitement avec nos ressources et notre communauté.</p>
711
+ <div class="flex space-x-4 mt-4">
712
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
713
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
714
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a>
715
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
716
+ </div>
717
  </div>
718
+
719
+ <div>
720
+ <h4 class="text-lg font-bold mb-4">Apprentissage</h4>
721
+ <ul class="space-y-2">
722
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Parcours</a></li>
723
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriels</a></li>
724
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Projets</a></li>
725
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Quiz</a></li>
726
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Exemples de code</a></li>
727
+ </ul>
728
+ </div>
729
+
730
+ <div>
731
+ <h4 class="text-lg font-bold mb-4">Ressources</h4>
732
+ <ul class="space-y-2">
733
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
734
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Outils</a></li>
735
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Livres</a></li>
736
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Podcasts</a></li>
737
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
738
+ </ul>
739
+ </div>
740
+
741
+ <div>
742
+ <h4 class="text-lg font-bold mb-4">Support</h4>
743
+ <ul class="space-y-2">
744
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
745
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Communauté</a></li>
746
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
747
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
748
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
749
+ </ul>
750
  </div>
751
  </div>
752
+
753
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
754
  <p>&copy; 2023 MobileDev Learn. Tous droits réservés.</p>
755
  </div>
756
  </div>
 
766
  category: "flutter",
767
  level: "Débutant",
768
  duration: "30 min",
769
+ icon: "fab fa-flutter",
770
+ views: 1250,
771
+ likes: 95
772
  },
773
  {
774
  id: 2,
 
777
  category: "react",
778
  level: "Intermédiaire",
779
  duration: "45 min",
780
+ icon: "fab fa-react",
781
+ views: 980,
782
+ likes: 87
783
  },
784
  {
785
  id: 3,
 
788
  category: "kotlin",
789
  level: "Débutant",
790
  duration: "1 heure",
791
+ icon: "fab fa-android",
792
+ views: 750,
793
+ likes: 82
794
  },
795
  {
796
  id: 4,
 
799
  category: "swift",
800
  level: "Intermédiaire",
801
  duration: "50 min",
802
+ icon: "fab fa-apple",
803
+ views: 620,
804
+ likes: 78
805
  },
806
  {
807
  id: 5,
 
810
  category: "flutter",
811
  level: "Intermédiaire",
812
  duration: "40 min",
813
+ icon: "fab fa-flutter",
814
+ views: 890,
815
+ likes: 91
816
  },
817
  {
818
  id: 6,
 
821
  category: "react",
822
  level: "Avancé",
823
  duration: "1 heure",
824
+ icon: "fab fa-react",
825
+ views: 680,
826
+ likes: 85
827
+ },
828
+ {
829
+ id: 7,
830
+ title: "Authentification avec Firebase",
831
+ description: "Implémentez l'authentification dans votre app avec Firebase.",
832
+ category: "firebase",
833
+ level: "Intermédiaire",
834
+ duration: "55 min",
835
+ icon: "fas fa-fire",
836
+ views: 720,
837
+ likes: 88
838
+ },
839
+ {
840
+ id: 8,
841
+ title: "Tests unitaires en Kotlin",
842
+ description: "Apprenez à écrire des tests unitaires pour vos apps Android.",
843
+ category: "kotlin",
844
+ level: "Avancé",
845
+ duration: "1h 15min",
846
+ icon: "fab fa-android",
847
+ views: 510,
848
+ likes: 76
849
+ },
850
+ {
851
+ id: 9,
852
+ title: "Consommer une API REST avec Swift",
853
+ description: "Comment faire des requêtes HTTP et traiter les réponses en Swift.",
854
+ category: "api",
855
+ level: "Intermédiaire",
856
+ duration: "45 min",
857
+ icon: "fab fa-apple",
858
+ views: 590,
859
+ likes: 80
860
  }
861
  ];
862
 
 
903
  tutorialCard.className = 'bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover fade-in';
904
  tutorialCard.innerHTML = `
905
  <div class="flex items-center mb-4">
906
+ <i class="${tutorial.icon} text-2xl ${getCategoryColor(tutorial.category)} mr-3"></i>
907
+ <span class="px-3 py-1 ${getCategoryBgColor(tutorial.category)} rounded-full text-sm">${getCategoryName(tutorial.category)}</span>
908
  </div>
909
  <h3 class="text-xl font-bold mb-2">${tutorial.title}</h3>
910
  <p class="text-gray-600 mb-4">${tutorial.description}</p>
911
+ <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
912
+ <span class="${getLevelColor(tutorial.level)}">${tutorial.level}</span>
913
+ <span><i class="far fa-clock mr-1"></i> ${tutorial.duration}</span>
914
+ </div>
915
  <div class="flex justify-between items-center text-sm text-gray-500">
916
+ <span><i class="far fa-eye mr-1"></i> ${tutorial.views}</span>
917
+ <span><i class="far fa-thumbs-up mr-1"></i> ${tutorial.likes}%</span>
918
  </div>
919
  <button class="mt-4 w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700 transition">
920
  Voir le tutoriel
 
924
  });
925
  }
926
 
927
+ // Helper functions for tutorial categories
928
+ function getCategoryName(category) {
929
+ const names = {
930
+ 'flutter': 'Flutter',
931
+ 'react': 'React Native',
932
+ 'kotlin': 'Kotlin',
933
+ 'swift': 'Swift',
934
+ 'firebase': 'Firebase',
935
+ 'api': 'API REST'
936
+ };
937
+ return names[category] || category;
938
+ }
939
+
940
+ function getCategoryColor(category) {
941
+ const colors = {
942
+ 'flutter': 'text-blue-500',
943
+ 'react': 'text-sky-500',
944
+ 'kotlin': 'text-green-500',
945
+ 'swift': 'text-gray-800',
946
+ 'firebase': 'text-orange-500',
947
+ 'api': 'text-purple-500'
948
+ };
949
+ return colors[category] || 'text-gray-500';
950
+ }
951
+
952
+ function getCategoryBgColor(category) {
953
+ const colors = {
954
+ 'flutter': 'bg-blue-100 text-blue-800',
955
+ 'react': 'bg-sky-100 text-sky-800',
956
+ 'kotlin': 'bg-green-100 text-green-800',
957
+ 'swift': 'bg-gray-100 text-gray-800',
958
+ 'firebase': 'bg-orange-100 text-orange-800',
959
+ 'api': 'bg-purple-100 text-purple-800'
960
+ };
961
+ return colors[category] || 'bg-gray-100 text-gray-800';
962
+ }
963
+
964
+ function getLevelColor(level) {
965
+ const colors = {
966
+ 'Débutant': 'text-green-600',
967
+ 'Intermédiaire': 'text-yellow-600',
968
+ 'Avancé': 'text-red-600'
969
+ };
970
+ return colors[level] || 'text-gray-600';
971
+ }
972
+
973
  // Filter tutorials
974
  function filterTutorials(category) {
975
  loadTutorials(category);
 
982
  function startQuiz() {
983
  document.getElementById('quiz-start').classList.add('hidden');
984
  document.getElementById('quiz-next').classList.remove('hidden');
985
+ updateProgress();
986
  showQuestion();
987
  }
988
 
 
996
 
997
  if (currentQuestion >= quizQuestions.length) {
998
  // Quiz finished
999
+ questionContainer.innerHTML = `
1000
+ <div class="text-center">
1001
+ <h3 class="text-2xl font-bold mb-4">Quiz terminé!</h3>
1002
+ <p class="text-lg">Votre score: ${score}/${quizQuestions.length}</p>
1003
+ <div class="mt-6">
1004
+ ${score === quizQuestions.length ?
1005
+ '<p class="text-green-600 font-bold">Excellent travail! 🎉</p>' :
1006
+ score >= quizQuestions.length * 0.7 ?
1007
+ '<p class="text-blue-600">Bon score! Continuez comme ça!</p>' :
1008
+ '<p class="text-yellow-600">Pas mal! Revoyez certains concepts.</p>'
1009
+ }
1010
+ </div>
1011
+ </div>
1012
+ `;
1013
  optionsContainer.innerHTML = '';
1014
  document.getElementById('quiz-next').classList.add('hidden');
1015
  document.getElementById('quiz-start').classList.remove('hidden');
 
1054
  }
1055
 
1056
  feedbackContainer.classList.remove('hidden');
1057
+ updateProgress();
1058
+ }
1059
+
1060
+ function updateProgress() {
1061
+ const progressText = document.getElementById('quiz-progress-text');
1062
+ const progressFill = document.getElementById('quiz-progress-fill');
1063
+
1064
+ const progress = currentQuestion / quizQuestions.length * 100;
1065
+ progressText.textContent = `${currentQuestion}/${quizQuestions.length}`;
1066
+ progressFill.style.width = `${progress}%`;
1067
  }
1068
 
1069
  function nextQuestion() {
1070
  currentQuestion++;
1071
+ updateProgress();
1072
  showQuestion();
1073
  }
1074
 
1075
+ // FAQ toggle
1076
+ function toggleFAQ(index) {
1077
+ const content = document.getElementById(`faq-content-${index}`);
1078
+ const icon = document.getElementById(`faq-icon-${index}`);
1079
+
1080
+ if (content.classList.contains('hidden')) {
1081
+ content.classList.remove('hidden');
1082
+ icon.classList.add('transform', 'rotate-180');
1083
+ } else {
1084
+ content.classList.add('hidden');
1085
+ icon.classList.remove('transform', 'rotate-180');
1086
+ }
1087
+ }
1088
+
1089
+ // Mobile menu toggle
1090
+ function toggleMobileMenu() {
1091
+ const menu = document.getElementById('mobile-menu');
1092
+ menu.classList.toggle('hidden');
1093
+ }
1094
+
1095
  // Copy code buttons
1096
  function setupCopyButtons() {
1097
+ document.querySelectorAll('.code-block + div > button').forEach(button => {
1098
  button.addEventListener('click', () => {
1099
+ const codeBlock = button.closest('div').previousElementSibling.querySelector('pre');
1100
  navigator.clipboard.writeText(codeBlock.textContent);
1101
 
1102
  const originalText = button.innerHTML;
 
1120
 
1121
  document.getElementById('quiz-start').addEventListener('click', startQuiz);
1122
  document.getElementById('quiz-next').addEventListener('click', nextQuestion);
1123
+ document.getElementById('mobile-menu-button').addEventListener('click', toggleMobileMenu);
1124
+
1125
+ // Smooth scroll for anchor links
1126
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1127
+ anchor.addEventListener('click', function (e) {
1128
+ e.preventDefault();
1129
+
1130
+ const targetId = this.getAttribute('href');
1131
+ if (targetId === '#') return;
1132
+
1133
+ const targetElement = document.querySelector(targetId);
1134
+ if (targetElement) {
1135
+ targetElement.scrollIntoView({
1136
+ behavior: 'smooth'
1137
+ });
1138
+
1139
+ // Close mobile menu if open
1140
+ const mobileMenu = document.getElementById('mobile-menu');
1141
+ if (!mobileMenu.classList.contains('hidden')) {
1142
+ mobileMenu.classList.add('hidden');
1143
+ }
1144
+ }
1145
+ });
1146
+ });
1147
  });
1148
  </script>
1149
  <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=SaidAmchghal/mobildev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Une application utilisant des API gratuites qui aide à apprendre la programmation des applications mobiles
 
 
1
+ Une application utilisant des API gratuites qui aide à apprendre la programmation des applications mobiles
2
+ Enrichir le contenu