Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Application Trilingue - Bac Scientifique</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .rtl { | |
| direction: rtl; | |
| } | |
| .ltr { | |
| direction: ltr; | |
| } | |
| .subject-card { | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .subject-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .exam-card { | |
| border-left: 4px solid; | |
| } | |
| .math-card { | |
| border-left-color: #3b82f6; | |
| } | |
| .physics-card { | |
| border-left-color: #ef4444; | |
| } | |
| .biology-card { | |
| border-left-color: #10b981; | |
| } | |
| .chemistry-card { | |
| border-left-color: #f59e0b; | |
| } | |
| .dark-mode { | |
| background-color: #1a1a1a; | |
| color: #e5e7eb; | |
| } | |
| .dark-mode .bg-white { | |
| background-color: #2d2d2d ; | |
| color: #e5e7eb; | |
| } | |
| .dark-mode .text-gray-700 { | |
| color: #d1d5db ; | |
| } | |
| .dark-mode .border-gray-200 { | |
| border-color: #4b5563 ; | |
| } | |
| .dark-mode .subject-card:hover { | |
| box-shadow: 0 10px 20px rgba(255,255,255,0.05); | |
| } | |
| .resource-item { | |
| transition: all 0.3s; | |
| } | |
| .resource-item:hover { | |
| background-color: #f3f4f6 ; | |
| } | |
| .dark-mode .resource-item:hover { | |
| background-color: #374151 ; | |
| } | |
| .course-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .course-content.show { | |
| max-height: 1000px; | |
| } | |
| .course-toggle { | |
| transition: transform 0.3s; | |
| } | |
| .course-toggle.rotated { | |
| transform: rotate(180deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 transition-colors duration-300"> | |
| <header class="bg-blue-600 text-white py-4 px-6 shadow-md"> | |
| <div class="container mx-auto flex flex-wrap justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-graduation-cap text-2xl"></i> | |
| <h1 id="headerTitle" class="text-xl font-bold">Application Éducative - Bac Scientifique</h1> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-2 sm:mt-0"> | |
| <select id="languageSelect" class="bg-blue-700 text-white px-3 py-1 rounded border-none focus:ring-2 focus:ring-blue-300"> | |
| <option value="fr">Français</option> | |
| <option value="en">English</option> | |
| <option value="ar">العربية</option> | |
| </select> | |
| <button id="modeToggle" class="bg-blue-700 hover:bg-blue-800 text-white px-3 py-1 rounded flex items-center space-x-1"> | |
| <i class="fas fa-moon"></i> | |
| <span>Mode Sombre</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <nav class="bg-white shadow-sm sticky top-0 z-10 dark:bg-gray-800"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <ul class="flex flex-wrap space-x-6"> | |
| <li><a href="#cours" id="navCours" class="text-blue-600 hover:text-blue-800 font-medium dark:text-blue-300 dark:hover:text-blue-200">Cours</a></li> | |
| <li><a href="#examens" id="navExamens" class="text-blue-600 hover:text-blue-800 font-medium dark:text-blue-300 dark:hover:text-blue-200">Examens</a></li> | |
| <li><a href="#ressources" id="navRessources" class="text-blue-600 hover:text-blue-800 font-medium dark:text-blue-300 dark:hover:text-blue-200">Ressources</a></li> | |
| <li><a href="#quiz" id="navQuiz" class="text-blue-600 hover:text-blue-800 font-medium dark:text-blue-300 dark:hover:text-blue-200">Quiz</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Section Cours --> | |
| <section id="cours" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow-md p-6 dark:bg-gray-800"> | |
| <h2 id="sectionCoursTitle" class="text-2xl font-bold mb-4 text-blue-600 dark:text-blue-300">Cours Scientifiques</h2> | |
| <p id="coursDescription" class="text-gray-700 mb-6 dark:text-gray-300"> | |
| Bienvenue sur notre plateforme d'apprentissage. Ici, vous pouvez consulter vos cours, approfondir vos connaissances et interagir avec des exercices interactifs. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Mathématiques --> | |
| <div class="subject-card bg-white rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3 dark:bg-blue-900"> | |
| <i class="fas fa-square-root-alt text-blue-600 text-xl dark:text-blue-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Mathématiques</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-700 dark:text-gray-300"> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Algèbre et analyse</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Géométrie dans l'espace</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Probabilités</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Suites numériques</li> | |
| </ul> | |
| <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md w-full transition-colors course-toggle-btn" data-subject="math"> | |
| <i class="fas fa-book-open mr-2"></i> Voir le cours | |
| </button> | |
| <!-- Contenu du cours de Mathématiques --> | |
| <div class="course-content mt-4" id="math-content"> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">Suites Numériques</h4> | |
| <p class="text-sm mb-2">Une suite numérique est une fonction définie sur ℕ à valeurs dans ℝ.</p> | |
| <div class="bg-blue-50 p-3 rounded mb-3 dark:bg-gray-700"> | |
| <h5 class="font-medium text-blue-800 dark:text-blue-300">Exemple de suite arithmétique :</h5> | |
| <p class="text-sm">Soit (Uₙ) la suite définie par U₀ = 5 et Uₙ₊₁ = Uₙ + 3</p> | |
| <p class="text-sm">Terme général : Uₙ = 5 + 3n</p> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded dark:bg-gray-700"> | |
| <h5 class="font-medium text-blue-800 dark:text-blue-300">Exemple de suite géométrique :</h5> | |
| <p class="text-sm">Soit (Vₙ) la suite définie par V₀ = 2 et Vₙ₊₁ = 3 × Vₙ</p> | |
| <p class="text-sm">Terme général : Vₙ = 2 × 3ⁿ</p> | |
| </div> | |
| <button class="mt-3 bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded text-sm w-full dark:bg-blue-900 dark:text-blue-200 download-pdf-btn" data-subject="math"> | |
| <i class="fas fa-download mr-1"></i> Télécharger le PDF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Physique --> | |
| <div class="subject-card bg-white rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-3 dark:bg-red-900"> | |
| <i class="fas fa-atom text-red-600 text-xl dark:text-red-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Physique</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-700 dark:text-gray-300"> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Mécanique</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Électricité</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Ondes et optique</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Thermodynamique</li> | |
| </ul> | |
| <button class="mt-4 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md w-full transition-colors course-toggle-btn" data-subject="physics"> | |
| <i class="fas fa-book-open mr-2"></i> Voir le cours | |
| </button> | |
| <!-- Contenu du cours de Physique --> | |
| <div class="course-content mt-4" id="physics-content"> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">Mécanique - Lois de Newton</h4> | |
| <p class="text-sm mb-2">La mécanique newtonienne repose sur trois lois fondamentales.</p> | |
| <div class="bg-red-50 p-3 rounded mb-3 dark:bg-gray-700"> | |
| <h5 class="font-medium text-red-800 dark:text-red-300">1ère loi : Principe d'inertie</h5> | |
| <p class="text-sm">Un corps persévère dans son état de repos ou de mouvement rectiligne uniforme si les forces qui s'exercent sur lui se compensent.</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded dark:bg-gray-700"> | |
| <h5 class="font-medium text-red-800 dark:text-red-300">2ème loi : Relation fondamentale</h5> | |
| <p class="text-sm">ΣF = m×a (la somme des forces égale la masse fois l'accélération)</p> | |
| <p class="text-sm mt-1">Exemple : Un objet de 2kg soumis à une force de 10N a une accélération de 5m/s²</p> | |
| </div> | |
| <button class="mt-3 bg-red-100 hover:bg-red-200 text-red-800 px-3 py-1 rounded text-sm w-full dark:bg-red-900 dark:text-red-200 download-pdf-btn" data-subject="physics"> | |
| <i class="fas fa-download mr-1"></i> Télécharger le PDF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chimie --> | |
| <div class="subject-card bg-white rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-3 dark:bg-yellow-900"> | |
| <i class="fas fa-flask text-yellow-600 text-xl dark:text-yellow-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Chimie</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-700 dark:text-gray-300"> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Cinétique chimique</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Équilibres chimiques</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Chimie organique</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Électrochimie</li> | |
| </ul> | |
| <button class="mt-4 bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md w-full transition-colors course-toggle-btn" data-subject="chemistry"> | |
| <i class="fas fa-book-open mr-2"></i> Voir le cours | |
| </button> | |
| <!-- Contenu du cours de Chimie --> | |
| <div class="course-content mt-4" id="chemistry-content"> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">Réactions d'oxydoréduction</h4> | |
| <p class="text-sm mb-2">Une réaction d'oxydoréduction met en jeu un transfert d'électrons entre deux espèces chimiques.</p> | |
| <div class="bg-yellow-50 p-3 rounded mb-3 dark:bg-gray-700"> | |
| <h5 class="font-medium text-yellow-800 dark:text-yellow-300">Demi-équations :</h5> | |
| <p class="text-sm">Cu²⁺ + 2e⁻ → Cu (réduction)</p> | |
| <p class="text-sm">Zn → Zn²⁺ + 2e⁻ (oxydation)</p> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded dark:bg-gray-700"> | |
| <h5 class="font-medium text-yellow-800 dark:text-yellow-300">Pile zinc-cuivre :</h5> | |
| <p class="text-sm">Zn | Zn²⁺ || Cu²⁺ | Cu</p> | |
| <p class="text-sm mt-1">FEM = E°(Cu²⁺/Cu) - E°(Zn²⁺/Zn) = +0,34 - (-0,76) = 1,10V</p> | |
| </div> | |
| <button class="mt-3 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-3 py-1 rounded text-sm w-full dark:bg-yellow-900 dark:text-yellow-200 download-pdf-btn" data-subject="chemistry"> | |
| <i class="fas fa-download mr-1"></i> Télécharger le PDF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SVT --> | |
| <div class="subject-card bg-white rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3 dark:bg-green-900"> | |
| <i class="fas fa-dna text-green-600 text-xl dark:text-green-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Sciences de la Vie</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-700 dark:text-gray-300"> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Génétique</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Évolution</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Immunologie</li> | |
| <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Écologie</li> | |
| </ul> | |
| <button class="mt-4 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md w-full transition-colors course-toggle-btn" data-subject="biology"> | |
| <i class="fas fa-book-open mr-2"></i> Voir le cours | |
| </button> | |
| <!-- Contenu du cours de SVT --> | |
| <div class="course-content mt-4" id="biology-content"> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-semibold mb-2">La Réplication de l'ADN</h4> | |
| <p class="text-sm mb-2">La réplication est semi-conservative et nécessite plusieurs enzymes.</p> | |
| <div class="bg-green-50 p-3 rounded mb-3 dark:bg-gray-700"> | |
| <h5 class="font-medium text-green-800 dark:text-green-300">Étapes clés :</h5> | |
| <ol class="list-decimal pl-4 text-sm space-y-1"> | |
| <li>Déroulement de l'hélice par l'hélicase</li> | |
| <li>Synthèse des brins complémentaires par l'ADN polymérase</li> | |
| <li>Correction des erreurs par l'ADN polymérase</li> | |
| </ol> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded dark:bg-gray-700"> | |
| <h5 class="font-medium text-green-800 dark:text-green-300">Brins direct et retardé :</h5> | |
| <p class="text-sm">Le brin direct ème synthétisé continûment alors que le brin retardé est synthétisé sous forme de fragments d'Okazaki.</p> | |
| </div> | |
| <button class="mt-3 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded text-sm w-full dark:bg-green-900 dark:text-green-200 download-pdf-btn" data-subject="biology"> | |
| <i class="fas fa-download mr-1"></i> Télécharger le PDF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Examens --> | |
| <section id="examens" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow-md p-6 dark:bg-gray-800"> | |
| <h2 id="sectionExamensTitle" class="text-2xl font-bold mb-4 text-blue-600 dark:text-blue-300">Préparation aux Examens</h2> | |
| <p id="examensDescription" class="text-gray-700 mb-6 dark:text-gray-300"> | |
| Découvrez des conseils, astuces et annales pour réussir brillamment vos examens du baccalauréat scientifique. | |
| </p> | |
| <div class="space-y-6"> | |
| <!-- Conseils généraux --> | |
| <div class="bg-blue-50 rounded-lg p-6 dark:bg-gray-700"> | |
| <h3 class="font-bold text-lg mb-3 text-blue-700 dark:text-blue-300"><i class="fas fa-lightbulb mr-2"></i> Conseils pour réussir</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-700 dark:text-gray-300"> | |
| <li>Gérez bien votre temps pendant l'examen</li> | |
| <li>Lisez attentivement tous les énoncés avant de commencer</li> | |
| <li>Commencez par les questions qui vous semblent les plus faciles</li> | |
| <li>Vérifiez toujours vos calculs et vos unités</li> | |
| <li>Ne laissez aucune question sans réponse</li> | |
| </ul> | |
| </div> | |
| <!-- Annales --> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4 text-gray-800 dark:text-gray-200"><i class="fas fa-file-alt mr-2"></i> Annales des années précédentes</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Mathématiques --> | |
| <div class="exam-card math-card bg-white rounded shadow p-4 border-l-4 dark:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 dark:bg-blue-900"> | |
| <i class="fas fa-square-root-alt text-blue-600 dark:text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Mathématiques</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Série S - 2023</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Télécharger</a> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Corrigé</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Physique --> | |
| <div class="exam-card physics-card bg-white rounded shadow p-4 border-l-4 dark:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3 dark:bg-red-900"> | |
| <i class="fas fa-atom text-red-600 dark:text-red-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Physique-Chimie</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Série S - 2023</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Télécharger</a> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Corrigé</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SVT --> | |
| <div class="exam-card biology-card bg-white rounded shadow p-4 border-l-4 dark:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3 dark:bg-green-900"> | |
| <i class="fas fa-dna text-green-600 dark:text-green-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sciences de la Vie</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Série S - 2023</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Télécharger</a> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Corrigé</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Anglais --> | |
| <div class="exam-card chemistry-card bg-white rounded shadow p-4 border-l-4 dark:bg-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3 dark:bg-yellow-900"> | |
| <i class="fas fa-language text-yellow-600 dark:text-yellow-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Anglais LV1</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Série S - 2023</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Télécharger</a> | |
| <a href="#" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Corrigé</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Ressources --> | |
| <section id="ressources" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow-md p-6 dark:bg-gray-800"> | |
| <h2 id="sectionRessourcesTitle" class="text-2xl font-bold mb-4 text-blue-600 dark:text-blue-300">Ressources Externes</h2> | |
| <p id="ressourcesDescription" class="text-gray-700 mb-6 dark:text-gray-300"> | |
| Chargez des ressources supplémentaires via des API gratuites pour enrichir votre apprentissage. | |
| </p> | |
| <div class="mb-6"> | |
| <button id="loadResources" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center space-x-2"> | |
| <i class="fas fa-sync-alt"></i> | |
| <span>Charger les Ressources</span> | |
| </button> | |
| </div> | |
| <div id="resourcesContainer" class="space-y-4"> | |
| <!-- Exemples de ressources statiques --> | |
| <div class="resource-item bg-gray-50 p-4 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3 dark:bg-blue-900"> | |
| <i class="fas fa-book text-blue-600 dark:text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Khan Academy</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Ressources gratuites pour les mathématiques et les sciences</p> | |
| <a href="https://www.khanacademy.org" target="_blank" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Visiter le site</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-item bg-gray-50 p-4 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3 dark:bg-green-900"> | |
| <i class="fas fa-video text-green-600 dark:text-green-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">YouTube EDU</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Chaînes éducatives pour le bac scientifique</p> | |
| <a href="https://www.youtube.com/edu" target="_blank" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Visiter la chaîne</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resource-item bg-gray-50 p-4 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3 dark:bg-purple-900"> | |
| <i class="fas fa-flask text-purple-600 dark:text-purple-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">PhET Simulations</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Simulations interactives pour la physique et la chimie</p> | |
| <a href="https://phet.colorado.edu" target="_blank" class="text-blue-600 text-sm hover:underline dark:text-blue-300">Visiter le site</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Quiz --> | |
| <section id="quiz" class="mb-12"> | |
| <div class="bg-white rounded-lg shadow-md p-6 dark:bg-gray-800"> | |
| <h2 id="sectionQuizTitle" class="text-2xl font-bold mb-4 text-blue-600 dark:text-blue-300">Quiz Scientifique</h2> | |
| <p id="quizDescription" class="text-gray-700 mb-6 dark:text-gray-300"> | |
| Testez vos connaissances avec nos quiz interactifs couvrant toutes les matières du bac scientifique. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Quiz Mathématiques --> | |
| <div class="bg-blue-50 rounded-lg p-6 dark:bg-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3 dark:bg-blue-900"> | |
| <i class="fas fa-square-root-alt text-blue-600 dark:text-blue-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Quiz Mathématiques</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4 dark:text-gray-300">10 questions sur les suites, fonctions et probabilités</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fas fa-clock mr-1"></i> 15 min</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md"> | |
| Commencer <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quiz Physique --> | |
| <div class="bg-red-50 rounded-lg p-6 dark:bg-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-3 dark:bg-red-900"> | |
| <i class="fas fa-atom text-red-600 dark:text-red-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Quiz Physique</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4 dark:text-gray-300">12 questions sur la mécanique et l'électricité</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fas fa-clock mr-1"></i> 20 min</span> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md"> | |
| Commencer <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quiz Chimie --> | |
| <div class="bg-yellow-50 rounded-lg p-6 dark:bg-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-3 dark:bg-yellow-900"> | |
| <i class="fas fa-flask text-yellow-600 dark:text-yellow-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Quiz Chimie</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4 dark:text-gray-300">8 questions sur la cinétique et les équilibres</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fas fa-clock mr-1"></i> 12 min</span> | |
| <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md"> | |
| Commencer <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quiz SVT --> | |
| <div class="bg-green-50 rounded-lg p-6 dark:bg-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3 dark:bg-green-900"> | |
| <i class="fas fa-dna text-green-600 dark:text-green-300"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Quiz SVT</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4 dark:text-gray-300">15 questions sur la génétique et l'évolution</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-600 dark:text-gray-400"><i class="fas fa-clock mr-1"></i> 25 min</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md"> | |
| Commencer <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-lg font-bold mb-4" id="footerTitle">Application Éducative</h3> | |
| <p id="footerDescription" class="text-gray-400">Votre compagnon pour réussir le baccalauréat scientifique.</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#cours" class="text-gray-400 hover:text-white transition-colors" id="footerNavCours">Cours</a></li> | |
| <li><a href="#examens" class="text-gray-400 hover:text-white transition-colors" id="footerNavExamens">Examens</a></li> | |
| <li><a href="#ressources" class="text-gray-400 hover:text-white transition-colors" id="footerNavRessources">Ressources</a></li> | |
| <li><a href="#quiz" class="text-gray-400 hover:text-white transition-colors" id="footerNavQuiz">Quiz</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2 text-gray-400"></i> <span class="text-gray-400">contact@education-app.com</span></li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2 text-gray-400"></i> <span class="text-gray-400">+33 1 23 45 67 89</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p id="footerText" class="text-gray-400 text-sm">© 2025 Application Éducative - Tous droits réservés.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialisation de jsPDF | |
| const { jsPDF } = window.jspdf; | |
| // Objet de traductions étendu avec les nouvelles sections | |
| const translations = { | |
| fr: { | |
| headerTitle: "Application Éducative - Bac Scientifique", | |
| navCours: "Cours", | |
| navExamens: "Examens", | |
| navRessources: "Ressources", | |
| navQuiz: "Quiz", | |
| sectionCoursTitle: "Cours Scientifiques", | |
| coursDescription: "Bienvenue sur notre plateforme d'apprentissage. Ici, vous pouvez consulter vos cours, approfondir vos connaissances et interagir avec des exercices interactifs.", | |
| sectionExamensTitle: "Préparation aux Examens", | |
| examensDescription: "Découvrez des conseils, astuces et annales pour réussir brillamment vos examens du baccalauréat scientifique.", | |
| sectionRessourcesTitle: "Ressources Externes", | |
| ressourcesDescription: "Chargez des ressources supplémentaires via des API gratuites pour enrichir votre apprentissage.", | |
| sectionQuizTitle: "Quiz Scientifique", | |
| quizDescription: "Testez vos connaissances avec nos quiz interactifs couvrant toutes les matières du bac scientifique.", | |
| loadResources: "Charger les Ressources", | |
| footerTitle: "Application Éducative", | |
| footerDescription: "Votre compagnon pour réussir le baccalauréat scientifique.", | |
| footerNavCours: "Cours", | |
| footerNavExamens: "Examens", | |
| footerNavRessources: "Ressources", | |
| footerNavQuiz: "Quiz", | |
| footerText: "© 2025 Application Éducative - Tous droits réservés.", | |
| modeToggleLight: "Mode Sombre", | |
| modeToggleDark: "Mode Clair", | |
| viewCourse: "Voir le cours", | |
| downloadPDF: "Télécharger le PDF", | |
| pdfTitle: "Cours de {subject}", | |
| pdfGenerated: "Généré par l'Application Éducative" | |
| }, | |
| en: { | |
| headerTitle: "Educational Application - Scientific Baccalaureate", | |
| navCours: "Courses", | |
| navExamens: "Exams", | |
| navRessources: "Resources", | |
| navQuiz: "Quizzes", | |
| sectionCoursTitle: "Scientific Courses", | |
| coursDescription: "Welcome to our learning platform. Here you can view your courses, deepen your knowledge and interact with interactive exercises.", | |
| sectionExamensTitle: "Exam Preparation", | |
| examensDescription: "Discover tips, strategies and past papers to excel in your scientific baccalaureate exams.", | |
| sectionRessourcesTitle: "External Resources", | |
| ressourcesDescription: "Load additional resources via free APIs to enhance your learning.", | |
| sectionQuizTitle: "Science Quizzes", | |
| quizDescription: "Test your knowledge with our interactive quizzes covering all scientific subjects.", | |
| loadResources: "Load Resources", | |
| footerTitle: "Educational App", | |
| footerDescription: "Your companion to succeed in the scientific baccalaureate.", | |
| footerNavCours: "Courses", | |
| footerNavExamens: "Exams", | |
| footerNavRessources: "Resources", | |
| footerNavQuiz: "Quizzes", | |
| footerText: "© 2025 Educational Application - All rights reserved.", | |
| modeToggleLight: "Dark Mode", | |
| modeToggleDark: "Light Mode", | |
| viewCourse: "View Course", | |
| downloadPDF: "Download PDF", | |
| pdfTitle: "{subject} Course", | |
| pdfGenerated: "Generated by Educational App" | |
| }, | |
| ar: { | |
| headerTitle: "تطبيق تعليمي - البكالوريا العلمية", | |
| navCours: "الدروس", | |
| navExamens: "الامتحانات", | |
| navRessources: "المصادر", | |
| navQuiz: "اختبارات", | |
| sectionCoursTitle: "الدروس العلمية", | |
| coursDescription: "مرحباً بكم في منصتنا التعليمية. هنا يمكنك الاطلاع على الدروس، تعميق معارفك والتفاعل مع التمارين التفاعلية.", | |
| sectionExamensTitle: "التحضير للامتحانات", | |
| examensDescription: "اكتشف النصائح والاستراتيجيات والامتحانات السابقة لتتفوق في امتحانات البكالوريا العلمية.", | |
| sectionRessourcesTitle: "مصادر خارجية", | |
| ressourcesDescription: "حمّل المزيد من المصادر عبر API مجانية لتعزيز تعلمك.", | |
| sectionQuizTitle: "اختبارات علمية", | |
| quizDescription: "اختبر معلوماتك مع اختباراتنا التفاعلية التي تغطي جميع المواد العلمية.", | |
| loadResources: "تحميل المصادر", | |
| footerTitle: "التطبيق التعليمي", | |
| footerDescription: "رفيقك للنجاح في البكالوريا العلمية.", | |
| footerNavCours: "الدروس", | |
| footerNavExamens: "الامتحانات", | |
| footerNavRessources: "المصادر", | |
| footerNavQuiz: "اختبارات", | |
| footerText: "© 2025 التطبيق التعليمي - جميع الحقوق محفوظة.", | |
| modeToggleLight: "الوضع الداكن", | |
| modeToggleDark: "الوضع الفاتح", | |
| viewCourse: "عرض الدرس", | |
| downloadPDF: "تحميل PDF", | |
| pdfTitle: "درس {subject}", | |
| pdfGenerated: "تم إنشاؤه بواسطة التطبيق التعليمي" | |
| } | |
| }; | |
| // Fonction pour générer un PDF à partir du contenu du cours | |
| function generatePDF(subject) { | |
| const lang = document.getElementById("languageSelect").value; | |
| const contentElement = document.getElementById(`${subject}-content`); | |
| // Créer un nouveau document PDF | |
| const doc = new jsPDF(); | |
| // Titre du PDF | |
| const title = translations[lang].pdfTitle.replace('{subject}', translations[lang][`nav${subject.charAt(0).toUpperCase() + subject.slice(1)}`] || subject); | |
| doc.setFontSize(18); | |
| doc.text(title, 105, 20, { align: 'center' }); | |
| // Contenu du cours | |
| doc.setFontSize(12); | |
| let y = 40; | |
| // Parcourir tous les éléments de contenu | |
| const elements = contentElement.querySelectorAll('h4, p, h5, li, div'); | |
| elements.forEach(element => { | |
| // Ignorer les boutons et certains éléments | |
| if (element.classList.contains('download-pdf-btn')) return; | |
| // Traiter différemment selon le type d'élément | |
| if (element.tagName === 'H4') { | |
| doc.setFontSize(14); | |
| doc.setTextColor(0, 0, 0); | |
| doc.setFont(undefined, 'bold'); | |
| doc.text(element.textContent, 15, y); | |
| y += 10; | |
| } | |
| else if (element.tagName === 'H5') { | |
| doc.setFontSize(12); | |
| doc.setTextColor(0, 0, 0); | |
| doc.setFont(undefined, 'bold'); | |
| doc.text(element.textContent, 15, y); | |
| y += 7; | |
| } | |
| else if (element.tagName === 'P' || element.tagName === 'LI') { | |
| doc.setFontSize(10); | |
| doc.setTextColor(0, 0, 0); | |
| doc.setFont(undefined, 'normal'); | |
| // Gérer le texte long avec splitTextToSize | |
| const textLines = doc.splitTextToSize(element.textContent, 180); | |
| doc.text(textLines, 15, y); | |
| y += 7 * textLines.length; | |
| } | |
| // Ajouter un espace après chaque élément | |
| y += 5; | |
| // Nouvelle page si nécessaire | |
| if (y > 280) { | |
| doc.addPage(); | |
| y = 20; | |
| } | |
| }); | |
| // Pied de page | |
| doc.setFontSize(10); | |
| doc.setTextColor(100); | |
| doc.text(translations[lang].pdfGenerated, 105, 290, { align: 'center' }); | |
| // Enregistrer le PDF | |
| doc.save(`${subject}_course.pdf`); | |
| } | |
| // Fonction de mise à jour de l'interface en fonction de la langue sélectionnée | |
| function updateLanguage(lang) { | |
| document.getElementById("headerTitle").innerText = translations[lang].headerTitle; | |
| document.getElementById("navCours").innerText = translations[lang].navCours; | |
| document.getElementById("navExamens").innerText = translations[lang].navExamens; | |
| document.getElementById("navRessources").innerText = translations[lang].navRessources; | |
| document.getElementById("navQuiz").innerText = translations[lang].navQuiz; | |
| document.getElementById("sectionCoursTitle").innerText = translations[lang].sectionCoursTitle; | |
| document.getElementById("coursDescription").innerText = translations[lang].coursDescription; | |
| document.getElementById("sectionExamensTitle").innerText = translations[lang].sectionExamensTitle; | |
| document.getElementById("examensDescription").innerText = translations[lang].examensDescription; | |
| document.getElementById("sectionRessourcesTitle").innerText = translations[lang].sectionRessourcesTitle; | |
| document.getElementById("ressourcesDescription").innerText = translations[lang].ressourcesDescription; | |
| document.getElementById("sectionQuizTitle").innerText = translations[lang].sectionQuizTitle; | |
| document.getElementById("quizDescription").innerText = translations[lang].quizDescription; | |
| document.getElementById("loadResources").innerHTML = `<i class="fas fa-sync-alt"></i> <span>${translations[lang].loadResources}</span>`; | |
| document.getElementById("footerTitle").innerText = translations[lang].footerTitle; | |
| document.getElementById("footerDescription").innerText = translations[lang].footerDescription; | |
| document.getElementById("footerNavCours").innerText = translations[lang].footerNavCours; | |
| document.getElementById("footerNavExamens").innerText = translations[lang].footerNavExamens; | |
| document.getElementById("footerNavRessources").innerText = translations[lang].footerNavRessources; | |
| document.getElementById("footerNavQuiz").innerText = translations[lang].footerNavQuiz; | |
| document.getElementById("footerText").innerText = translations[lang].footerText; | |
| // Mettre à jour les boutons "Voir le cours" | |
| document.querySelectorAll('.course-toggle-btn').forEach(btn => { | |
| btn.innerHTML = `<i class="fas fa-book-open mr-2"></i> ${translations[lang].viewCourse}`; | |
| }); | |
| // Mettre à jour les boutons "Télécharger le PDF" | |
| document.querySelectorAll('.download-pdf-btn').forEach(btn => { | |
| btn.innerHTML = `<i class="fas fa-download mr-1"></i> ${translations[lang].downloadPDF}`; | |
| }); | |
| // Mettre à jour le texte du bouton mode sombre/clair | |
| if(document.body.classList.contains("dark-mode")) { | |
| document.getElementById("modeToggle").innerHTML = `<i class="fas fa-sun"></i> <span>${translations[lang].modeToggleDark}</span>`; | |
| } else { | |
| document.getElementById("modeToggle").innerHTML = `<i class="fas fa-moon"></i> <span>${translations[lang].modeToggleLight}</span>`; | |
| } | |
| // Modifier la direction du texte pour l'arabe | |
| if (lang === "ar") { | |
| document.documentElement.lang = "ar"; | |
| document.body.classList.add("rtl"); | |
| document.body.classList.remove("ltr"); | |
| } else { | |
| document.documentElement.lang = lang; | |
| document.body.classList.add("ltr"); | |
| document.body.classList.remove("rtl"); | |
| } | |
| } | |
| // Gestion du changement de langue via le selecteur | |
| document.getElementById("languageSelect").addEventListener("change", function() { | |
| updateLanguage(this.value); | |
| }); | |
| // Basculement entre mode sombre et clair | |
| const modeToggle = document.getElementById("modeToggle"); | |
| modeToggle.addEventListener("click", function() { | |
| document.body.classList.toggle("dark-mode"); | |
| // Changer l'icône et le texte du bouton | |
| const lang = document.getElementById("languageSelect").value; | |
| if(document.body.classList.contains("dark-mode")) { | |
| this.innerHTML = `<i class="fas fa-sun"></i> <span>${translations[lang].modeToggleDark}</span>`; | |
| } else { | |
| this.innerHTML = `<i class="fas fa-moon"></i> <span>${translations[lang].modeToggleLight}</span>`; | |
| } | |
| }); | |
| // Chargement de ressources externes via une API gratuite | |
| document.getElementById("loadResources").addEventListener("click", function() { | |
| const button = this; | |
| const lang = document.getElementById("languageSelect").value; | |
| // Afficher un indicateur de chargement | |
| button.innerHTML = `<i class="fas fa-spinner fa-spin"></i> <span>${translations[lang].loadResources}</span>`; | |
| button.disabled = true; | |
| // Utilisation de l'API publique "Public APIs" pour récupérer des ressources dans la catégorie éducation | |
| fetch("https://api.publicapis.org/entries?category=Education") | |
| .then(response => response.json()) | |
| .then(data => { | |
| const resourcesContainer = document.getElementById("resourcesContainer"); | |
| resourcesContainer.innerHTML = ""; | |
| // Affichage des 5 premiers résultats | |
| data.entries.slice(0, 5).forEach(entry => { | |
| const randomIcon = getRandomIcon(); | |
| const randomColor = getRandomColor(); | |
| const resourceItem = document.createElement("div"); | |
| resourceItem.className = "resource-item bg-gray-50 p-4 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600"; | |
| resourceItem.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="${randomColor.bg} p-2 rounded-full mr-3 dark:${randomColor.bgDark}"> | |
| <i class="${randomIcon} ${randomColor.text} dark:${randomColor.textDark}"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">${entry.API}</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">${entry.Description}</p> | |
| <a href="${entry.Link}" target="_blank" class="text-blue-600 text-sm hover:underline dark:text-blue-300">${translations[lang].loadResources}</a> | |
| </div> | |
| </div> | |
| `; | |
| resourcesContainer.appendChild(resourceItem); | |
| }); | |
| }) | |
| .catch(error => { | |
| console.error("Erreur lors du chargement des ressources :", error); | |
| alert(translations[lang].loadError || "Erreur lors du chargement des ressources"); | |
| }) | |
| .finally(() => { | |
| // Réinitialiser le bouton | |
| button.innerHTML = `<i class="fas fa-sync-alt"></i> <span>${translations[lang].loadResources}</span>`; | |
| button.disabled = false; | |
| }); | |
| }); | |
| // Fonction pour obtenir une icône aléatoire | |
| function getRandomIcon() { | |
| const icons = [ | |
| "fas fa-book", | |
| "fas fa-graduation-cap", | |
| "fas fa-university", | |
| "fas fa-chalkboard-teacher", | |
| "fas fa-atom", | |
| "fas fa-flask", | |
| "fas fa-square-root-alt", | |
| "fas fa-dna", | |
| "fas fa-microscope", | |
| "fas fa-brain" | |
| ]; | |
| return icons[Math.floor(Math.random() * icons.length)]; | |
| } | |
| // Fonction pour obtenir une couleur aléatoire | |
| function getRandomColor() { | |
| const colors = [ | |
| { bg: "bg-blue-100", text: "text-blue-600", bgDark: "bg-blue-900", textDark: "text-blue-300" }, | |
| { bg: "bg-red-100", text: "text-red-600", bgDark: "bg-red-900", textDark: "text-red-300" }, | |
| { bg: "bg-green-100", text: "text-green-600", bgDark: "bg-green-900", textDark: "text-green-300" }, | |
| { bg: "bg-yellow-100", text: "text-yellow-600", bgDark: "bg-yellow-900", textDark: "text-yellow-300" }, | |
| { bg: "bg-purple-100", text: "text-purple-600", bgDark: "bg-purple-900", textDark: "text-purple-300" }, | |
| { bg: "bg-pink-100", text: "text-pink-600", bgDark: "bg-pink-900", textDark: "text-pink-300" }, | |
| { bg: "bg-indigo-100", text: "text-indigo-600", bgDark: "bg-indigo-900", textDark: "text-indigo-300" } | |
| ]; | |
| return colors[Math.floor(Math.random() * colors.length)]; | |
| } | |
| // Gestion de l'affichage des contenus de cours | |
| document.querySelectorAll('.course-toggle-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const subject = this.getAttribute('data-subject'); | |
| const content = document.getElementById(`${subject}-content`); | |
| const icon = this.querySelector('i'); | |
| // Basculer la classe 'show' pour afficher/masquer le contenu | |
| content.classList.toggle('show'); | |
| // Faire pivoter l'icône | |
| icon.classList.toggle('fa-book-open'); | |
| icon.classList.toggle('fa-times'); | |
| // Changer le texte du bouton | |
| const lang = document.getElementById("languageSelect").value; | |
| if(content.classList.contains('show')) { | |
| this.innerHTML = `<i class="fas fa-times mr-2"></i> ${translations[lang].viewCourse}`; | |
| } else { | |
| this.innerHTML = `<i class="fas fa-book-open mr-2"></i> ${translations[lang].viewCourse}`; | |
| } | |
| }); | |
| }); | |
| // Gestion du téléchargement des PDF | |
| document.querySelectorAll('.download-pdf-btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const subject = this.getAttribute('data-subject'); | |
| generatePDF(subject); | |
| }); | |
| }); | |
| // Initialisation par défaut en français | |
| updateLanguage("fr"); | |
| </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/math-application" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |