Spaces:

SaidAmchghal
/

math-application

Running

App Files Files Community

SaidAmchghal commited on May 28, 2025

Commit

3567698

verified ·

1 Parent(s): 8b74ee0

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +840 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Math Application
-emoji: 🌖
-colorFrom: green
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: math-application
+emoji: 🐳
+colorFrom: purple
 colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,840 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>
+  <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 !important;
+      color: #e5e7eb;
+    }
+    .dark-mode .text-gray-700 {
+      color: #d1d5db !important;
+    }
+    .dark-mode .border-gray-200 {
+      border-color: #4b5563 !important;
+    }
+    .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 !important;
+    }
+    .dark-mode .resource-item:hover {
+      background-color: #374151 !important;
+    }
+    .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">
+                  <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">
+                  <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">
+                  <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 est 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">
+                  <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>
+    // 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"
+      },
+      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"
+      },
+      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"
+      }
+    };
+    // 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('.course-content button').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}`;
+        }
+      });
+    });
+    // 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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Enrichir le contenu de cette application par des exemples des cours