Hugging Face's logo

Spaces:
SaidAmchghal
/
mobildev
Running

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

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +573 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mobildev
3
- emoji: 🌖
4
  colorFrom: yellow
5
- colorTo: indigo
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: mobildev
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: purple
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,573 @@
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>MobileDev Learn - Apprendre la programmation mobile</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .code-block {
14
+ font-family: 'Courier New', Courier, monospace;
15
+ background-color: #2d3748;
16
+ color: #f7fafc;
17
+ border-radius: 0.5rem;
18
+ padding: 1rem;
19
+ overflow-x: auto;
20
+ }
21
+ .card-hover:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+ .fade-in {
26
+ animation: fadeIn 0.5s ease-in;
27
+ }
28
+ @keyframes fadeIn {
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">
40
+ <i class="fas fa-mobile-alt text-2xl"></i>
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
+
56
+ <!-- Hero Section -->
57
+ <section class="gradient-bg text-white py-20">
58
+ <div class="container mx-auto px-6 text-center">
59
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Apprenez le développement mobile</h1>
60
+ <p class="text-xl md:text-2xl mb-8">Découvrez les meilleures ressources gratuites pour maîtriser Flutter, React Native, Kotlin et Swift</p>
61
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
62
+ <button class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">
63
+ Commencer maintenant
64
+ </button>
65
+ <button class="border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition duration-300">
66
+ Explorer les tutoriels
67
+ </button>
68
+ </div>
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">
128
+ <h3 class="text-xl font-bold mb-4 text-purple-600">Flutter - Counter App</h3>
129
+ <div class="code-block mb-4">
130
+ <pre>import 'package:flutter/material.dart';
131
+
132
+ void main() => runApp(MyApp());
133
+
134
+ class MyApp extends StatelessWidget {
135
+ @override
136
+ Widget build(BuildContext context) {
137
+ return MaterialApp(
138
+ title: 'Counter App',
139
+ theme: ThemeData(primarySwatch: Colors.blue),
140
+ home: MyHomePage(),
141
+ );
142
+ }
143
+ }
144
+
145
+ class MyHomePage extends StatefulWidget {
146
+ @override
147
+ _MyHomePageState createState() => _MyHomePageState();
148
+ }
149
+
150
+ class _MyHomePageState extends State&lt;MyHomePage&gt; {
151
+ int _counter = 0;
152
+
153
+ void _incrementCounter() {
154
+ setState(() {
155
+ _counter++;
156
+ });
157
+ }
158
+
159
+ @override
160
+ Widget build(BuildContext context) {
161
+ return Scaffold(
162
+ appBar: AppBar(title: Text('Counter App')),
163
+ body: Center(
164
+ child: Column(
165
+ mainAxisAlignment: MainAxisAlignment.center,
166
+ children: &lt;Widget&gt;[
167
+ Text('You have pushed the button this many times:'),
168
+ Text('$_counter', style: Theme.of(context).textTheme.headline4),
169
+ ],
170
+ ),
171
+ ),
172
+ floatingActionButton: FloatingActionButton(
173
+ onPressed: _incrementCounter,
174
+ tooltip: 'Increment',
175
+ child: Icon(Icons.add),
176
+ ),
177
+ );
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">
187
+ <h3 class="text-xl font-bold mb-4 text-purple-600">React Native - Hello World</h3>
188
+ <div class="code-block mb-4">
189
+ <pre>import React from 'react';
190
+ import { Text, View } from 'react-native';
191
+
192
+ const HelloWorldApp = () => {
193
+ return (
194
+ &lt;View style={{
195
+ flex: 1,
196
+ justifyContent: 'center',
197
+ alignItems: 'center'
198
+ }}&gt;
199
+ &lt;Text style={{
200
+ fontSize: 24,
201
+ fontWeight: 'bold',
202
+ color: '#6e8efb'
203
+ }}&gt;
204
+ Hello, world!
205
+ &lt;/Text&gt;
206
+ &lt;/View&gt;
207
+ );
208
+ }
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>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- Quiz Section -->
221
+ <section id="quiz" class="py-16 bg-gray-50">
222
+ <div class="container mx-auto px-6">
223
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Testez vos connaissances</h2>
224
+
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>
231
+ <div id="quiz-options" class="space-y-3">
232
+ <!-- Options will be loaded here -->
233
+ </div>
234
+ <div id="quiz-feedback" class="mt-6 hidden">
235
+ <!-- Feedback will be shown here -->
236
+ </div>
237
+ <button id="quiz-next" class="mt-6 bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition hidden">
238
+ Question suivante
239
+ </button>
240
+ <button id="quiz-start" class="mt-6 bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition">
241
+ Commencer le quiz
242
+ </button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Resources Section -->
249
+ <section id="ressources" class="py-16 bg-white">
250
+ <div class="container mx-auto px-6">
251
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Ressources utiles</h2>
252
+
253
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
254
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover">
255
+ <h3 class="font-bold text-lg mb-3">Documentation Flutter</h3>
256
+ <p class="text-gray-600 mb-4">La documentation officielle de Flutter avec des guides complets.</p>
257
+ <a href="https://flutter.dev/docs" target="_blank" class="text-purple-600 hover:underline flex items-center">
258
+ Visiter <i class="fas fa-external-link-alt ml-2"></i>
259
+ </a>
260
+ </div>
261
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover">
262
+ <h3 class="font-bold text-lg mb-3">React Native Docs</h3>
263
+ <p class="text-gray-600 mb-4">Tout ce que vous devez savoir pour développer avec React Native.</p>
264
+ <a href="https://reactnative.dev/docs/getting-started" target="_blank" class="text-purple-600 hover:underline flex items-center">
265
+ Visiter <i class="fas fa-external-link-alt ml-2"></i>
266
+ </a>
267
+ </div>
268
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover">
269
+ <h3 class="font-bold text-lg mb-3">Kotlin pour Android</h3>
270
+ <p class="text-gray-600 mb-4">Ressources officielles pour le développement Android avec Kotlin.</p>
271
+ <a href="https://developer.android.com/kotlin" target="_blank" class="text-purple-600 hover:underline flex items-center">
272
+ Visiter <i class="fas fa-external-link-alt ml-2"></i>
273
+ </a>
274
+ </div>
275
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover">
276
+ <h3 class="font-bold text-lg mb-3">Swift Documentation</h3>
277
+ <p class="text-gray-600 mb-4">Apprenez Swift pour développer des applications iOS.</p>
278
+ <a href="https://developer.apple.com/swift/" target="_blank" class="text-purple-600 hover:underline flex items-center">
279
+ Visiter <i class="fas fa-external-link-alt ml-2"></i>
280
+ </a>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Community Section -->
287
+ <section id="communaute" class="py-16 gradient-bg text-white">
288
+ <div class="container mx-auto px-6">
289
+ <h2 class="text-3xl font-bold text-center mb-12">Rejoignez notre communauté</h2>
290
+
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
+
309
+ <div class="mt-12 bg-white bg-opacity-20 p-6 rounded-xl">
310
+ <h3 class="text-xl font-bold mb-4">Newsletter</h3>
311
+ <p class="mb-4">Recevez les derniers tutoriels et ressources directement dans votre boîte mail.</p>
312
+ <div class="flex flex-col md:flex-row gap-2">
313
+ <input type="email" placeholder="Votre email" class="flex-grow px-4 py-2 rounded text-gray-800">
314
+ <button class="bg-white text-purple-600 px-6 py-2 rounded font-bold hover:bg-gray-100 transition">
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>
344
+ </footer>
345
+
346
+ <script>
347
+ // Tutorial data
348
+ const tutorials = [
349
+ {
350
+ id: 1,
351
+ title: "Introduction à Flutter",
352
+ description: "Apprenez les bases de Flutter et créez votre première application.",
353
+ category: "flutter",
354
+ level: "Débutant",
355
+ duration: "30 min",
356
+ icon: "fab fa-flutter"
357
+ },
358
+ {
359
+ id: 2,
360
+ title: "State Management avec React Native",
361
+ description: "Découvrez comment gérer l'état dans vos applications React Native.",
362
+ category: "react",
363
+ level: "Intermédiaire",
364
+ duration: "45 min",
365
+ icon: "fab fa-react"
366
+ },
367
+ {
368
+ id: 3,
369
+ title: "Kotlin pour Android - Les fondamentaux",
370
+ description: "Maîtrisez les concepts de base de Kotlin pour le développement Android.",
371
+ category: "kotlin",
372
+ level: "Débutant",
373
+ duration: "1 heure",
374
+ icon: "fab fa-android"
375
+ },
376
+ {
377
+ id: 4,
378
+ title: "SwiftUI - Créer des interfaces",
379
+ description: "Apprenez à créer des interfaces utilisateur avec SwiftUI pour iOS.",
380
+ category: "swift",
381
+ level: "Intermédiaire",
382
+ duration: "50 min",
383
+ icon: "fab fa-apple"
384
+ },
385
+ {
386
+ id: 5,
387
+ title: "Navigation dans Flutter",
388
+ description: "Guide complet sur la navigation entre les écrans dans Flutter.",
389
+ category: "flutter",
390
+ level: "Intermédiaire",
391
+ duration: "40 min",
392
+ icon: "fab fa-flutter"
393
+ },
394
+ {
395
+ id: 6,
396
+ title: "API REST avec React Native",
397
+ description: "Comment consommer des API REST dans une application React Native.",
398
+ category: "react",
399
+ level: "Avancé",
400
+ duration: "1 heure",
401
+ icon: "fab fa-react"
402
+ }
403
+ ];
404
+
405
+ // Quiz data
406
+ const quizQuestions = [
407
+ {
408
+ question: "Quel langage est utilisé principalement pour développer des applications Flutter?",
409
+ options: ["Dart", "JavaScript", "Kotlin", "Swift"],
410
+ answer: 0
411
+ },
412
+ {
413
+ question: "Quelle commande permet de créer un nouveau projet React Native?",
414
+ options: ["react-native init", "npx react-native init", "create-react-native-app", "npm init react-native"],
415
+ answer: 1
416
+ },
417
+ {
418
+ question: "Quel framework utilise SwiftUI?",
419
+ options: ["UIKit", "AppKit", "Combine", "Aucun, c'est un framework indépendant"],
420
+ answer: 3
421
+ },
422
+ {
423
+ question: "Quelle fonction est utilisée pour mettre à jour l'état dans un StatefulWidget Flutter?",
424
+ options: ["updateState()", "setState()", "changeState()", "refreshState()"],
425
+ answer: 1
426
+ },
427
+ {
428
+ question: "Quel outil est utilisé pour compiler du code Kotlin en bytecode Android?",
429
+ options: ["Gradle", "Kotlin Compiler", "Android Studio", "Dalvik"],
430
+ answer: 0
431
+ }
432
+ ];
433
+
434
+ // Load tutorials
435
+ function loadTutorials(category = 'all') {
436
+ const container = document.getElementById('tutorials-container');
437
+ container.innerHTML = '';
438
+
439
+ const filteredTutorials = category === 'all'
440
+ ? tutorials
441
+ : tutorials.filter(t => t.category === category);
442
+
443
+ filteredTutorials.forEach(tutorial => {
444
+ const tutorialCard = document.createElement('div');
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
459
+ </button>
460
+ `;
461
+ container.appendChild(tutorialCard);
462
+ });
463
+ }
464
+
465
+ // Filter tutorials
466
+ function filterTutorials(category) {
467
+ loadTutorials(category);
468
+ }
469
+
470
+ // Quiz functionality
471
+ let currentQuestion = 0;
472
+ let score = 0;
473
+
474
+ function startQuiz() {
475
+ document.getElementById('quiz-start').classList.add('hidden');
476
+ document.getElementById('quiz-next').classList.remove('hidden');
477
+ showQuestion();
478
+ }
479
+
480
+ function showQuestion() {
481
+ const questionContainer = document.getElementById('quiz-question');
482
+ const optionsContainer = document.getElementById('quiz-options');
483
+ const feedbackContainer = document.getElementById('quiz-feedback');
484
+
485
+ feedbackContainer.classList.add('hidden');
486
+ feedbackContainer.innerHTML = '';
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');
494
+ document.getElementById('quiz-start').textContent = 'Recommencer';
495
+ currentQuestion = 0;
496
+ score = 0;
497
+ return;
498
+ }
499
+
500
+ const question = quizQuestions[currentQuestion];
501
+ questionContainer.textContent = `Question ${currentQuestion + 1}: ${question.question}`;
502
+
503
+ optionsContainer.innerHTML = '';
504
+ question.options.forEach((option, index) => {
505
+ const optionElement = document.createElement('button');
506
+ optionElement.className = 'w-full text-left bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded transition';
507
+ optionElement.textContent = option;
508
+ optionElement.onclick = () => checkAnswer(index);
509
+ optionsContainer.appendChild(optionElement);
510
+ });
511
+ }
512
+
513
+ function checkAnswer(selectedIndex) {
514
+ const question = quizQuestions[currentQuestion];
515
+ const feedbackContainer = document.getElementById('quiz-feedback');
516
+ const options = document.querySelectorAll('#quiz-options button');
517
+
518
+ // Disable all options
519
+ options.forEach(opt => {
520
+ opt.disabled = true;
521
+ opt.classList.remove('hover:bg-gray-200');
522
+ });
523
+
524
+ if (selectedIndex === question.answer) {
525
+ options[selectedIndex].className = 'w-full text-left bg-green-100 px-4 py-3 rounded';
526
+ feedbackContainer.innerHTML = '<p class="text-green-600 font-bold">Correct! 🎉</p>';
527
+ score++;
528
+ } else {
529
+ options[selectedIndex].className = 'w-full text-left bg-red-100 px-4 py-3 rounded';
530
+ options[question.answer].className = 'w-full text-left bg-green-100 px-4 py-3 rounded';
531
+ feedbackContainer.innerHTML = `<p class="text-red-600">Incorrect. La bonne réponse est: ${question.options[question.answer]}</p>`;
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;
550
+ button.innerHTML = '<i class="fas fa-check mr-2"></i> Copié!';
551
+ button.classList.add('bg-green-600');
552
+ button.classList.remove('bg-purple-600');
553
+
554
+ setTimeout(() => {
555
+ button.innerHTML = originalText;
556
+ button.classList.remove('bg-green-600');
557
+ button.classList.add('bg-purple-600');
558
+ }, 2000);
559
+ });
560
+ });
561
+ }
562
+
563
+ // Initialize
564
+ document.addEventListener('DOMContentLoaded', () => {
565
+ loadTutorials();
566
+ setupCopyButtons();
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>
573
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Une application utilisant des API gratuites qui aide à apprendre la programmation des applications mobiles