Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MobileDev Learn - Apprendre la programmation mobile</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: #2d3748; | |
| color: #f7fafc; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| overflow-x: auto; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: #e2e8f0; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #6e8efb; | |
| transition: width 0.3s ease; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #4a5568; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-mobile-alt text-2xl"></i> | |
| <span class="text-xl font-bold">MobileDev Learn</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#tutoriels" class="hover:text-gray-200 transition">Tutoriels</a> | |
| <a href="#ressources" class="hover:text-gray-200 transition">Ressources</a> | |
| <a href="#quiz" class="hover:text-gray-200 transition">Quiz</a> | |
| <a href="#projets" class="hover:text-gray-200 transition">Projets</a> | |
| <a href="#communaute" class="hover:text-gray-200 transition">Communauté</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden mt-4" id="mobile-menu"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#tutoriels" class="hover:text-gray-200 transition">Tutoriels</a> | |
| <a href="#ressources" class="hover:text-gray-200 transition">Ressources</a> | |
| <a href="#quiz" class="hover:text-gray-200 transition">Quiz</a> | |
| <a href="#projets" class="hover:text-gray-200 transition">Projets</a> | |
| <a href="#communaute" class="hover:text-gray-200 transition">Communauté</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Apprenez le développement mobile</h1> | |
| <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> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> | |
| <button class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300"> | |
| Commencer maintenant | |
| </button> | |
| <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"> | |
| Explorer les tutoriels | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Learning Path Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Parcours d'apprentissage</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex flex-col space-y-8"> | |
| <!-- Flutter Path --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fab fa-flutter text-3xl text-blue-500 mr-4"></i> | |
| <h3 class="text-xl font-bold">Parcours Flutter</h3> | |
| <span class="ml-auto bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Populaire</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Devenez expert en développement d'applications multiplateformes avec Flutter et Dart.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progression</span> | |
| <span>25%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-2">1</div> | |
| <h4 class="font-medium">Bases de Dart</h4> | |
| </div> | |
| <p class="text-sm text-gray-500">Syntaxe, types de données, fonctions</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 opacity-50"> | |
| <div class="flex items-center mb-2"> | |
| <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> | |
| <h4 class="font-medium">Widgets Flutter</h4> | |
| </div> | |
| <p class="text-sm text-gray-400">Stateless vs Stateful widgets</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 opacity-50"> | |
| <div class="flex items-center mb-2"> | |
| <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> | |
| <h4 class="font-medium">Navigation</h4> | |
| </div> | |
| <p class="text-sm text-gray-400">Routes et navigation entre écrans</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition"> | |
| Continuer le parcours | |
| </button> | |
| </div> | |
| <!-- React Native Path --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fab fa-react text-3xl text-sky-500 mr-4"></i> | |
| <h3 class="text-xl font-bold">Parcours React Native</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Créez des applications natives avec JavaScript et React.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progression</span> | |
| <span>10%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-sky-500 text-white py-2 rounded hover:bg-sky-600 transition"> | |
| Commencer le parcours | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Pourquoi apprendre avec nous ?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-laptop-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Tutoriels pratiques</h3> | |
| <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> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Exemples de code</h3> | |
| <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> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md transition duration-300 card-hover"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-question-circle text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Quiz interactifs</h3> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tutorials Section --> | |
| <section id="tutoriels" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Tutoriels populaires</h2> | |
| <div class="mb-8 flex flex-wrap justify-center gap-2"> | |
| <button onclick="filterTutorials('all')" class="px-4 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition">Tous</button> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div id="tutorials-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Tutorials will be loaded here by JavaScript --> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <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"> | |
| Voir plus de tutoriels | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projets" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Projets pratiques</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover"> | |
| <div class="relative pb-2/3 mb-4 overflow-hidden rounded-lg"> | |
| <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"> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs mr-2">Débutant</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 2 heures</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Application ToDo</h3> | |
| <p class="text-gray-600 mb-4">Créez une application de liste de tâches avec Flutter et Firebase.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Flutter</span> | |
| <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded-full text-xs">Firebase</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800 transition"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover"> | |
| <div class="relative pb-2/3 mb-4 overflow-hidden rounded-lg"> | |
| <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"> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs mr-2">Intermédiaire</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 4 heures</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Application Météo</h3> | |
| <p class="text-gray-600 mb-4">Développez une application météo avec React Native et l'API OpenWeather.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-sky-100 text-sky-800 px-2 py-1 rounded-full text-xs">React Native</span> | |
| <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">API REST</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800 transition"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover"> | |
| <div class="relative pb-2/3 mb-4 overflow-hidden rounded-lg"> | |
| <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"> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs mr-2">Avancé</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 8 heures</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Application de Chat</h3> | |
| <p class="text-gray-600 mb-4">Construisez un chat en temps réel avec Kotlin et Firebase.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Kotlin</span> | |
| <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded-full text-xs">Firebase</span> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800 transition"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <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"> | |
| Voir tous les projets | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Code Example Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Exemples de code</h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-bold mb-4 text-purple-600">Flutter - Counter App</h3> | |
| <div class="code-block mb-4"> | |
| <pre>import 'package:flutter/material.dart'; | |
| void main() => runApp(MyApp()); | |
| class MyApp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Counter App', | |
| theme: ThemeData(primarySwatch: Colors.blue), | |
| home: MyHomePage(), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends StatefulWidget { | |
| @override | |
| _MyHomePageState createState() => _MyHomePageState(); | |
| } | |
| class _MyHomePageState extends State<MyHomePage> { | |
| int _counter = 0; | |
| void _incrementCounter() { | |
| setState(() { | |
| _counter++; | |
| }); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar(title: Text('Counter App')), | |
| body: Center( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: <Widget>[ | |
| Text('You have pushed the button this many times:'), | |
| Text('$_counter', style: Theme.of(context).textTheme.headline4), | |
| ], | |
| ), | |
| ), | |
| floatingActionButton: FloatingActionButton( | |
| onPressed: _incrementCounter, | |
| tooltip: 'Increment', | |
| child: Icon(Icons.add), | |
| ), | |
| ); | |
| } | |
| }</pre> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition"> | |
| <i class="fas fa-copy mr-2"></i> Copier le code | |
| </button> | |
| <div class="flex space-x-2"> | |
| <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 1,245</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-thumbs-up mr-1"></i> 89%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-bold mb-4 text-purple-600">React Native - Hello World</h3> | |
| <div class="code-block mb-4"> | |
| <pre>import React from 'react'; | |
| import { Text, View } from 'react-native'; | |
| const HelloWorldApp = () => { | |
| return ( | |
| <View style={{ | |
| flex: 1, | |
| justifyContent: 'center', | |
| alignItems: 'center' | |
| }}> | |
| <Text style={{ | |
| fontSize: 24, | |
| fontWeight: 'bold', | |
| color: '#6e8efb' | |
| }}> | |
| Hello, world! | |
| </Text> | |
| </View> | |
| ); | |
| } | |
| export default HelloWorldApp;</pre> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition"> | |
| <i class="fas fa-copy mr-2"></i> Copier le code | |
| </button> | |
| <div class="flex space-x-2"> | |
| <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 982</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-thumbs-up mr-1"></i> 92%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h3 class="text-xl font-bold mb-4 text-purple-600">Rechercher des exemples de code</h3> | |
| <div class="relative max-w-2xl mx-auto"> | |
| <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"> | |
| <button class="absolute right-3 top-3 text-gray-400 hover:text-purple-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quiz Section --> | |
| <section id="quiz" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Testez vos connaissances</h2> | |
| <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md"> | |
| <div id="quiz-container"> | |
| <h3 class="text-xl font-bold mb-6 text-purple-600">Quiz sur les concepts de base</h3> | |
| <div id="quiz-progress" class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Progression</span> | |
| <span id="quiz-progress-text">0/5</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="quiz-progress-fill" class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div id="quiz-question" class="mb-6 text-lg"> | |
| <!-- Question will be loaded here --> | |
| </div> | |
| <div id="quiz-options" class="space-y-3"> | |
| <!-- Options will be loaded here --> | |
| </div> | |
| <div id="quiz-feedback" class="mt-6 hidden"> | |
| <!-- Feedback will be shown here --> | |
| </div> | |
| <button id="quiz-next" class="mt-6 bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition hidden"> | |
| Question suivante | |
| </button> | |
| <button id="quiz-start" class="mt-6 bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition"> | |
| Commencer le quiz | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-4 text-purple-600">Quiz Flutter</h3> | |
| <p class="text-gray-600 mb-4">Testez vos connaissances sur Flutter et Dart avec ce quiz de 10 questions.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-question-circle mr-2"></i> | |
| <span>10 questions</span> | |
| </div> | |
| <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition"> | |
| Commencer | |
| </button> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-4 text-purple-600">Quiz React Native</h3> | |
| <p class="text-gray-600 mb-4">Évaluez votre maîtrise de React Native avec ce quiz complet.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-question-circle mr-2"></i> | |
| <span>15 questions</span> | |
| </div> | |
| <button class="mt-4 w-full bg-sky-500 text-white py-2 rounded hover:bg-sky-600 transition"> | |
| Commencer | |
| </button> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-4 text-purple-600">Quiz Kotlin</h3> | |
| <p class="text-gray-600 mb-4">Découvrez votre niveau en Kotlin pour le développement Android.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-question-circle mr-2"></i> | |
| <span>12 questions</span> | |
| </div> | |
| <button class="mt-4 w-full bg-green-500 text-white py-2 rounded hover:bg-green-600 transition"> | |
| Commencer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="ressources" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Ressources utiles</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <h3 class="font-bold text-lg mb-3">Documentation Flutter</h3> | |
| <p class="text-gray-600 mb-4">La documentation officielle de Flutter avec des guides complets.</p> | |
| <a href="https://flutter.dev/docs" target="_blank" class="text-purple-600 hover:underline flex items-center"> | |
| Visiter <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <h3 class="font-bold text-lg mb-3">React Native Docs</h3> | |
| <p class="text-gray-600 mb-4">Tout ce que vous devez savoir pour développer avec React Native.</p> | |
| <a href="https://reactnative.dev/docs/getting-started" target="_blank" class="text-purple-600 hover:underline flex items-center"> | |
| Visiter <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <h3 class="font-bold text-lg mb-3">Kotlin pour Android</h3> | |
| <p class="text-gray-600 mb-4">Ressources officielles pour le développement Android avec Kotlin.</p> | |
| <a href="https://developer.android.com/kotlin" target="_blank" class="text-purple-600 hover:underline flex items-center"> | |
| Visiter <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 card-hover"> | |
| <h3 class="font-bold text-lg mb-3">Swift Documentation</h3> | |
| <p class="text-gray-600 mb-4">Apprenez Swift pour développer des applications iOS.</p> | |
| <a href="https://developer.apple.com/swift/" target="_blank" class="text-purple-600 hover:underline flex items-center"> | |
| Visiter <i class="fas fa-external-link-alt ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">Outils recommandés</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center"> | |
| <div class="flex justify-center mb-3"> | |
| <i class="fab fa-android text-4xl text-green-500"></i> | |
| </div> | |
| <h4 class="font-bold">Android Studio</h4> | |
| <p class="text-sm text-gray-600 mt-1">IDE pour développement Android</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center"> | |
| <div class="flex justify-center mb-3"> | |
| <i class="fas fa-code text-4xl text-blue-500"></i> | |
| </div> | |
| <h4 class="font-bold">VS Code</h4> | |
| <p class="text-sm text-gray-600 mt-1">Éditeur de code polyvalent</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center"> | |
| <div class="flex justify-center mb-3"> | |
| <i class="fab fa-apple text-4xl text-gray-800"></i> | |
| </div> | |
| <h4 class="font-bold">Xcode</h4> | |
| <p class="text-sm text-gray-600 mt-1">IDE pour développement iOS</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 text-center"> | |
| <div class="flex justify-center mb-3"> | |
| <i class="fas fa-fire text-4xl text-orange-500"></i> | |
| </div> | |
| <h4 class="font-bold">Firebase</h4> | |
| <p class="text-sm text-gray-600 mt-1">Backend pour applications mobiles</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="communaute" class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Rejoignez notre communauté</h2> | |
| <div class="max-w-2xl mx-auto text-center"> | |
| <p class="text-xl mb-8">Connectez-vous avec d'autres apprenants, posez des questions et partagez vos projets.</p> | |
| <div class="flex justify-center space-x-6 mb-12"> | |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip"> | |
| <i class="fab fa-discord text-2xl"></i> | |
| <span class="tooltip-text">Rejoignez notre serveur Discord</span> | |
| </a> | |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip"> | |
| <i class="fab fa-github text-2xl"></i> | |
| <span class="tooltip-text">Contribuez sur GitHub</span> | |
| </a> | |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip"> | |
| <i class="fab fa-slack text-2xl"></i> | |
| <span class="tooltip-text">Chattez sur Slack</span> | |
| </a> | |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-200 transition duration-300 tooltip"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| <span class="tooltip-text">Suivez-nous sur Twitter</span> | |
| </a> | |
| </div> | |
| <div class="mt-12 bg-white bg-opacity-20 p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-4">Newsletter</h3> | |
| <p class="mb-4">Recevez les derniers tutoriels et ressources directement dans votre boîte mail.</p> | |
| <div class="flex flex-col md:flex-row gap-2"> | |
| <input type="email" placeholder="Votre email" class="flex-grow px-4 py-2 rounded text-gray-800"> | |
| <button class="bg-white text-purple-600 px-6 py-2 rounded font-bold hover:bg-gray-100 transition"> | |
| S'abonner | |
| </button> | |
| </div> | |
| <p class="text-sm mt-2 text-white text-opacity-70">Nous ne partagerons jamais votre email.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6 max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Questions fréquentes</h2> | |
| <div class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(1)"> | |
| <h3 class="text-lg font-medium text-left">Comment choisir entre Flutter et React Native ?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i> | |
| </button> | |
| <div class="px-4 pb-4 hidden" id="faq-content-1"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(2)"> | |
| <h3 class="text-lg font-medium text-left">Quelles sont les prérequis pour apprendre le développement mobile ?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i> | |
| </button> | |
| <div class="px-4 pb-4 hidden" id="faq-content-2"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(3)"> | |
| <h3 class="text-lg font-medium text-left">Est-ce que toutes les ressources sont vraiment gratuites ?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i> | |
| </button> | |
| <div class="px-4 pb-4 hidden" id="faq-content-3"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-4 focus:outline-none" onclick="toggleFAQ(4)"> | |
| <h3 class="text-lg font-medium text-left">Comment puis-je contribuer au projet ?</h3> | |
| <i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-4"></i> | |
| </button> | |
| <div class="px-4 pb-4 hidden" id="faq-content-4"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <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"> | |
| Voir toutes les questions | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-mobile-alt text-xl"></i> | |
| <span class="text-lg font-bold">MobileDev Learn</span> | |
| </div> | |
| <p class="text-gray-400">Apprenez le développement mobile gratuitement avec nos ressources et notre communauté.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Apprentissage</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Parcours</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriels</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Projets</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Quiz</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Exemples de code</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Ressources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Outils</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Livres</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Podcasts</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Communauté</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 MobileDev Learn. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tutorial data | |
| const tutorials = [ | |
| { | |
| id: 1, | |
| title: "Introduction à Flutter", | |
| description: "Apprenez les bases de Flutter et créez votre première application.", | |
| category: "flutter", | |
| level: "Débutant", | |
| duration: "30 min", | |
| icon: "fab fa-flutter", | |
| views: 1250, | |
| likes: 95 | |
| }, | |
| { | |
| id: 2, | |
| title: "State Management avec React Native", | |
| description: "Découvrez comment gérer l'état dans vos applications React Native.", | |
| category: "react", | |
| level: "Intermédiaire", | |
| duration: "45 min", | |
| icon: "fab fa-react", | |
| views: 980, | |
| likes: 87 | |
| }, | |
| { | |
| id: 3, | |
| title: "Kotlin pour Android - Les fondamentaux", | |
| description: "Maîtrisez les concepts de base de Kotlin pour le développement Android.", | |
| category: "kotlin", | |
| level: "Débutant", | |
| duration: "1 heure", | |
| icon: "fab fa-android", | |
| views: 750, | |
| likes: 82 | |
| }, | |
| { | |
| id: 4, | |
| title: "SwiftUI - Créer des interfaces", | |
| description: "Apprenez à créer des interfaces utilisateur avec SwiftUI pour iOS.", | |
| category: "swift", | |
| level: "Intermédiaire", | |
| duration: "50 min", | |
| icon: "fab fa-apple", | |
| views: 620, | |
| likes: 78 | |
| }, | |
| { | |
| id: 5, | |
| title: "Navigation dans Flutter", | |
| description: "Guide complet sur la navigation entre les écrans dans Flutter.", | |
| category: "flutter", | |
| level: "Intermédiaire", | |
| duration: "40 min", | |
| icon: "fab fa-flutter", | |
| views: 890, | |
| likes: 91 | |
| }, | |
| { | |
| id: 6, | |
| title: "API REST avec React Native", | |
| description: "Comment consommer des API REST dans une application React Native.", | |
| category: "react", | |
| level: "Avancé", | |
| duration: "1 heure", | |
| icon: "fab fa-react", | |
| views: 680, | |
| likes: 85 | |
| }, | |
| { | |
| id: 7, | |
| title: "Authentification avec Firebase", | |
| description: "Implémentez l'authentification dans votre app avec Firebase.", | |
| category: "firebase", | |
| level: "Intermédiaire", | |
| duration: "55 min", | |
| icon: "fas fa-fire", | |
| views: 720, | |
| likes: 88 | |
| }, | |
| { | |
| id: 8, | |
| title: "Tests unitaires en Kotlin", | |
| description: "Apprenez à écrire des tests unitaires pour vos apps Android.", | |
| category: "kotlin", | |
| level: "Avancé", | |
| duration: "1h 15min", | |
| icon: "fab fa-android", | |
| views: 510, | |
| likes: 76 | |
| }, | |
| { | |
| id: 9, | |
| title: "Consommer une API REST avec Swift", | |
| description: "Comment faire des requêtes HTTP et traiter les réponses en Swift.", | |
| category: "api", | |
| level: "Intermédiaire", | |
| duration: "45 min", | |
| icon: "fab fa-apple", | |
| views: 590, | |
| likes: 80 | |
| } | |
| ]; | |
| // Quiz data | |
| const quizQuestions = [ | |
| { | |
| question: "Quel langage est utilisé principalement pour développer des applications Flutter?", | |
| options: ["Dart", "JavaScript", "Kotlin", "Swift"], | |
| answer: 0 | |
| }, | |
| { | |
| question: "Quelle commande permet de créer un nouveau projet React Native?", | |
| options: ["react-native init", "npx react-native init", "create-react-native-app", "npm init react-native"], | |
| answer: 1 | |
| }, | |
| { | |
| question: "Quel framework utilise SwiftUI?", | |
| options: ["UIKit", "AppKit", "Combine", "Aucun, c'est un framework indépendant"], | |
| answer: 3 | |
| }, | |
| { | |
| question: "Quelle fonction est utilisée pour mettre à jour l'état dans un StatefulWidget Flutter?", | |
| options: ["updateState()", "setState()", "changeState()", "refreshState()"], | |
| answer: 1 | |
| }, | |
| { | |
| question: "Quel outil est utilisé pour compiler du code Kotlin en bytecode Android?", | |
| options: ["Gradle", "Kotlin Compiler", "Android Studio", "Dalvik"], | |
| answer: 0 | |
| } | |
| ]; | |
| // Load tutorials | |
| function loadTutorials(category = 'all') { | |
| const container = document.getElementById('tutorials-container'); | |
| container.innerHTML = ''; | |
| const filteredTutorials = category === 'all' | |
| ? tutorials | |
| : tutorials.filter(t => t.category === category); | |
| filteredTutorials.forEach(tutorial => { | |
| const tutorialCard = document.createElement('div'); | |
| tutorialCard.className = 'bg-white p-6 rounded-xl shadow-md transition duration-300 card-hover fade-in'; | |
| tutorialCard.innerHTML = ` | |
| <div class="flex items-center mb-4"> | |
| <i class="${tutorial.icon} text-2xl ${getCategoryColor(tutorial.category)} mr-3"></i> | |
| <span class="px-3 py-1 ${getCategoryBgColor(tutorial.category)} rounded-full text-sm">${getCategoryName(tutorial.category)}</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">${tutorial.title}</h3> | |
| <p class="text-gray-600 mb-4">${tutorial.description}</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500 mb-4"> | |
| <span class="${getLevelColor(tutorial.level)}">${tutorial.level}</span> | |
| <span><i class="far fa-clock mr-1"></i> ${tutorial.duration}</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span><i class="far fa-eye mr-1"></i> ${tutorial.views}</span> | |
| <span><i class="far fa-thumbs-up mr-1"></i> ${tutorial.likes}%</span> | |
| </div> | |
| <button class="mt-4 w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700 transition"> | |
| Voir le tutoriel | |
| </button> | |
| `; | |
| container.appendChild(tutorialCard); | |
| }); | |
| } | |
| // Helper functions for tutorial categories | |
| function getCategoryName(category) { | |
| const names = { | |
| 'flutter': 'Flutter', | |
| 'react': 'React Native', | |
| 'kotlin': 'Kotlin', | |
| 'swift': 'Swift', | |
| 'firebase': 'Firebase', | |
| 'api': 'API REST' | |
| }; | |
| return names[category] || category; | |
| } | |
| function getCategoryColor(category) { | |
| const colors = { | |
| 'flutter': 'text-blue-500', | |
| 'react': 'text-sky-500', | |
| 'kotlin': 'text-green-500', | |
| 'swift': 'text-gray-800', | |
| 'firebase': 'text-orange-500', | |
| 'api': 'text-purple-500' | |
| }; | |
| return colors[category] || 'text-gray-500'; | |
| } | |
| function getCategoryBgColor(category) { | |
| const colors = { | |
| 'flutter': 'bg-blue-100 text-blue-800', | |
| 'react': 'bg-sky-100 text-sky-800', | |
| 'kotlin': 'bg-green-100 text-green-800', | |
| 'swift': 'bg-gray-100 text-gray-800', | |
| 'firebase': 'bg-orange-100 text-orange-800', | |
| 'api': 'bg-purple-100 text-purple-800' | |
| }; | |
| return colors[category] || 'bg-gray-100 text-gray-800'; | |
| } | |
| function getLevelColor(level) { | |
| const colors = { | |
| 'Débutant': 'text-green-600', | |
| 'Intermédiaire': 'text-yellow-600', | |
| 'Avancé': 'text-red-600' | |
| }; | |
| return colors[level] || 'text-gray-600'; | |
| } | |
| // Filter tutorials | |
| function filterTutorials(category) { | |
| loadTutorials(category); | |
| } | |
| // Quiz functionality | |
| let currentQuestion = 0; | |
| let score = 0; | |
| function startQuiz() { | |
| document.getElementById('quiz-start').classList.add('hidden'); | |
| document.getElementById('quiz-next').classList.remove('hidden'); | |
| updateProgress(); | |
| showQuestion(); | |
| } | |
| function showQuestion() { | |
| const questionContainer = document.getElementById('quiz-question'); | |
| const optionsContainer = document.getElementById('quiz-options'); | |
| const feedbackContainer = document.getElementById('quiz-feedback'); | |
| feedbackContainer.classList.add('hidden'); | |
| feedbackContainer.innerHTML = ''; | |
| if (currentQuestion >= quizQuestions.length) { | |
| // Quiz finished | |
| questionContainer.innerHTML = ` | |
| <div class="text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Quiz terminé!</h3> | |
| <p class="text-lg">Votre score: ${score}/${quizQuestions.length}</p> | |
| <div class="mt-6"> | |
| ${score === quizQuestions.length ? | |
| '<p class="text-green-600 font-bold">Excellent travail! 🎉</p>' : | |
| score >= quizQuestions.length * 0.7 ? | |
| '<p class="text-blue-600">Bon score! Continuez comme ça!</p>' : | |
| '<p class="text-yellow-600">Pas mal! Revoyez certains concepts.</p>' | |
| } | |
| </div> | |
| </div> | |
| `; | |
| optionsContainer.innerHTML = ''; | |
| document.getElementById('quiz-next').classList.add('hidden'); | |
| document.getElementById('quiz-start').classList.remove('hidden'); | |
| document.getElementById('quiz-start').textContent = 'Recommencer'; | |
| currentQuestion = 0; | |
| score = 0; | |
| return; | |
| } | |
| const question = quizQuestions[currentQuestion]; | |
| questionContainer.textContent = `Question ${currentQuestion + 1}: ${question.question}`; | |
| optionsContainer.innerHTML = ''; | |
| question.options.forEach((option, index) => { | |
| const optionElement = document.createElement('button'); | |
| optionElement.className = 'w-full text-left bg-gray-100 hover:bg-gray-200 px-4 py-3 rounded transition'; | |
| optionElement.textContent = option; | |
| optionElement.onclick = () => checkAnswer(index); | |
| optionsContainer.appendChild(optionElement); | |
| }); | |
| } | |
| function checkAnswer(selectedIndex) { | |
| const question = quizQuestions[currentQuestion]; | |
| const feedbackContainer = document.getElementById('quiz-feedback'); | |
| const options = document.querySelectorAll('#quiz-options button'); | |
| // Disable all options | |
| options.forEach(opt => { | |
| opt.disabled = true; | |
| opt.classList.remove('hover:bg-gray-200'); | |
| }); | |
| if (selectedIndex === question.answer) { | |
| options[selectedIndex].className = 'w-full text-left bg-green-100 px-4 py-3 rounded'; | |
| feedbackContainer.innerHTML = '<p class="text-green-600 font-bold">Correct! 🎉</p>'; | |
| score++; | |
| } else { | |
| options[selectedIndex].className = 'w-full text-left bg-red-100 px-4 py-3 rounded'; | |
| options[question.answer].className = 'w-full text-left bg-green-100 px-4 py-3 rounded'; | |
| feedbackContainer.innerHTML = `<p class="text-red-600">Incorrect. La bonne réponse est: ${question.options[question.answer]}</p>`; | |
| } | |
| feedbackContainer.classList.remove('hidden'); | |
| updateProgress(); | |
| } | |
| function updateProgress() { | |
| const progressText = document.getElementById('quiz-progress-text'); | |
| const progressFill = document.getElementById('quiz-progress-fill'); | |
| const progress = currentQuestion / quizQuestions.length * 100; | |
| progressText.textContent = `${currentQuestion}/${quizQuestions.length}`; | |
| progressFill.style.width = `${progress}%`; | |
| } | |
| function nextQuestion() { | |
| currentQuestion++; | |
| updateProgress(); | |
| showQuestion(); | |
| } | |
| // FAQ toggle | |
| function toggleFAQ(index) { | |
| const content = document.getElementById(`faq-content-${index}`); | |
| const icon = document.getElementById(`faq-icon-${index}`); | |
| if (content.classList.contains('hidden')) { | |
| content.classList.remove('hidden'); | |
| icon.classList.add('transform', 'rotate-180'); | |
| } else { | |
| content.classList.add('hidden'); | |
| icon.classList.remove('transform', 'rotate-180'); | |
| } | |
| } | |
| // Mobile menu toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Copy code buttons | |
| function setupCopyButtons() { | |
| document.querySelectorAll('.code-block + div > button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const codeBlock = button.closest('div').previousElementSibling.querySelector('pre'); | |
| navigator.clipboard.writeText(codeBlock.textContent); | |
| const originalText = button.innerHTML; | |
| button.innerHTML = '<i class="fas fa-check mr-2"></i> Copié!'; | |
| button.classList.add('bg-green-600'); | |
| button.classList.remove('bg-purple-600'); | |
| setTimeout(() => { | |
| button.innerHTML = originalText; | |
| button.classList.remove('bg-green-600'); | |
| button.classList.add('bg-purple-600'); | |
| }, 2000); | |
| }); | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadTutorials(); | |
| setupCopyButtons(); | |
| document.getElementById('quiz-start').addEventListener('click', startQuiz); | |
| document.getElementById('quiz-next').addEventListener('click', nextQuestion); | |
| document.getElementById('mobile-menu-button').addEventListener('click', toggleMobileMenu); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |