| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cours 1ère D - Côte d'Ivoire</title> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <style> |
| :root { |
| |
| --primary-color: #0056D2; |
| --secondary-color: #F77F00; |
| --accent-color: #FCBF49; |
| --bg-light: #F8F9FA; |
| --bg-white: #FFFFFF; |
| --text-main: #2B2D42; |
| --text-light: #8D99AE; |
| --border-color: #E9ECEF; |
| --sidebar-width: 280px; |
| --header-height: 70px; |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.08); |
| --transition: all 0.3s ease; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--bg-light); |
| color: var(--text-main); |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| |
| header { |
| height: var(--header-height); |
| background-color: var(--bg-white); |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 2rem; |
| position: fixed; |
| top: 0; |
| width: 100%; |
| z-index: 100; |
| box-shadow: var(--shadow-sm); |
| } |
| |
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-weight: 700; |
| font-size: 1.25rem; |
| color: var(--primary-color); |
| } |
| |
| .brand i { |
| font-size: 1.5rem; |
| color: var(--secondary-color); |
| } |
| |
| .header-actions { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| } |
| |
| .anycoder-link { |
| font-size: 0.85rem; |
| color: var(--text-light); |
| text-decoration: none; |
| transition: var(--transition); |
| font-weight: 500; |
| } |
| |
| .anycoder-link:hover { |
| color: var(--primary-color); |
| } |
| |
| .mobile-menu-btn { |
| display: none; |
| background: none; |
| border: none; |
| font-size: 1.5rem; |
| color: var(--text-main); |
| cursor: pointer; |
| } |
| |
| |
| .app-container { |
| display: flex; |
| margin-top: var(--header-height); |
| height: calc(100vh - var(--header-height)); |
| width: 100%; |
| } |
| |
| |
| aside { |
| width: var(--sidebar-width); |
| background-color: var(--bg-white); |
| border-right: 1px solid var(--border-color); |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| transition: transform 0.3s ease-in-out; |
| } |
| |
| .search-container { |
| padding: 1.5rem; |
| position: sticky; |
| top: 0; |
| background: var(--bg-white); |
| z-index: 10; |
| } |
| |
| .search-box { |
| position: relative; |
| } |
| |
| .search-box input { |
| width: 100%; |
| padding: 10px 15px 10px 40px; |
| border: 1px solid var(--border-color); |
| border-radius: 8px; |
| font-family: inherit; |
| font-size: 0.9rem; |
| background-color: var(--bg-light); |
| transition: var(--transition); |
| } |
| |
| .search-box input:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| background-color: var(--bg-white); |
| box-shadow: 0 0 0 3px rgba(0, 86, 210, 0.1); |
| } |
| |
| .search-box i { |
| position: absolute; |
| left: 14px; |
| top: 50%; |
| transform: translateY(-50%); |
| color: var(--text-light); |
| } |
| |
| .subject-list { |
| list-style: none; |
| padding: 0 1rem 2rem 1rem; |
| } |
| |
| .subject-item { |
| margin-bottom: 0.5rem; |
| } |
| |
| .subject-btn { |
| width: 100%; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 16px; |
| border: none; |
| background: none; |
| border-radius: 8px; |
| cursor: pointer; |
| text-align: left; |
| font-size: 0.95rem; |
| font-weight: 500; |
| color: var(--text-main); |
| transition: var(--transition); |
| } |
| |
| .subject-btn:hover { |
| background-color: var(--bg-light); |
| color: var(--primary-color); |
| } |
| |
| .subject-btn.active { |
| background-color: rgba(0, 86, 210, 0.1); |
| color: var(--primary-color); |
| font-weight: 600; |
| } |
| |
| .subject-icon { |
| width: 32px; |
| height: 32px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background-color: var(--bg-light); |
| border-radius: 6px; |
| font-size: 0.9rem; |
| transition: var(--transition); |
| } |
| |
| .subject-btn.active .subject-icon { |
| background-color: var(--primary-color); |
| color: white; |
| } |
| |
| |
| main { |
| flex: 1; |
| background-color: var(--bg-light); |
| overflow-y: auto; |
| padding: 2rem; |
| position: relative; |
| } |
| |
| |
| .empty-state { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| height: 100%; |
| color: var(--text-light); |
| text-align: center; |
| } |
| |
| .empty-state i { |
| font-size: 4rem; |
| margin-bottom: 1.5rem; |
| color: #DEE2E6; |
| } |
| |
| .empty-state h2 { |
| font-size: 1.5rem; |
| color: var(--text-main); |
| margin-bottom: 0.5rem; |
| } |
| |
| |
| .content-header { |
| margin-bottom: 2rem; |
| } |
| |
| .breadcrumb { |
| font-size: 0.85rem; |
| color: var(--text-light); |
| margin-bottom: 0.5rem; |
| } |
| |
| .content-title { |
| font-size: 2rem; |
| font-weight: 700; |
| color: var(--text-main); |
| } |
| |
| .chapters-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .chapter-card { |
| background: var(--bg-white); |
| border: 1px solid var(--border-color); |
| border-radius: 12px; |
| padding: 1.5rem; |
| cursor: pointer; |
| transition: var(--transition); |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
| |
| .chapter-card:hover { |
| transform: translateY(-4px); |
| box-shadow: var(--shadow-md); |
| border-color: var(--primary-color); |
| } |
| |
| .chapter-meta { |
| font-size: 0.8rem; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| color: var(--secondary-color); |
| font-weight: 600; |
| margin-bottom: 0.75rem; |
| } |
| |
| .chapter-title { |
| font-size: 1.1rem; |
| font-weight: 600; |
| margin-bottom: 0.75rem; |
| line-height: 1.4; |
| } |
| |
| .chapter-desc { |
| font-size: 0.9rem; |
| color: var(--text-light); |
| line-height: 1.5; |
| margin-bottom: 1.5rem; |
| flex-grow: 1; |
| } |
| |
| .chapter-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.85rem; |
| color: var(--primary-color); |
| font-weight: 500; |
| } |
| |
| |
| .lesson-view { |
| background: var(--bg-white); |
| border-radius: 12px; |
| padding: 3rem; |
| box-shadow: var(--shadow-sm); |
| max-width: 900px; |
| margin: 0 auto; |
| animation: fadeIn 0.4s ease; |
| } |
| |
| .lesson-header { |
| border-bottom: 1px solid var(--border-color); |
| padding-bottom: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .lesson-title { |
| font-size: 2.25rem; |
| font-weight: 800; |
| color: var(--text-main); |
| margin-bottom: 1rem; |
| } |
| |
| .lesson-tags { |
| display: flex; |
| gap: 10px; |
| } |
| |
| .tag { |
| padding: 4px 12px; |
| background-color: var(--bg-light); |
| border-radius: 20px; |
| font-size: 0.8rem; |
| color: var(--text-light); |
| font-weight: 500; |
| } |
| |
| .lesson-content { |
| font-size: 1.1rem; |
| line-height: 1.8; |
| color: #374151; |
| } |
| |
| .lesson-content h3 { |
| font-size: 1.5rem; |
| color: var(--text-main); |
| margin-top: 2.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .lesson-content p { |
| margin-bottom: 1.5rem; |
| } |
| |
| .lesson-content ul { |
| margin-bottom: 1.5rem; |
| padding-left: 1.5rem; |
| } |
| |
| .lesson-content li { |
| margin-bottom: 0.5rem; |
| } |
| |
| .lesson-content blockquote { |
| border-left: 4px solid var(--secondary-color); |
| padding-left: 1.5rem; |
| font-style: italic; |
| color: #555; |
| background: #FFF8F0; |
| padding: 1.5rem; |
| border-radius: 0 8px 8px 0; |
| margin: 2rem 0; |
| } |
| |
| .back-btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 10px 20px; |
| background-color: var(--bg-light); |
| border: 1px solid var(--border-color); |
| border-radius: 8px; |
| color: var(--text-main); |
| font-weight: 500; |
| cursor: pointer; |
| transition: var(--transition); |
| margin-bottom: 2rem; |
| } |
| |
| .back-btn:hover { |
| background-color: #E9ECEF; |
| } |
| |
| |
| @media (max-width: 768px) { |
| header { |
| padding: 0 1rem; |
| } |
| |
| .mobile-menu-btn { |
| display: block; |
| } |
| |
| aside { |
| position: fixed; |
| left: 0; |
| top: var(--header-height); |
| height: calc(100vh - var(--header-height)); |
| transform: translateX(-100%); |
| z-index: 90; |
| box-shadow: var(--shadow-md); |
| } |
| |
| aside.open { |
| transform: translateX(0); |
| } |
| |
| main { |
| padding: 1.5rem; |
| } |
| |
| .lesson-view { |
| padding: 1.5rem; |
| } |
| |
| .lesson-title { |
| font-size: 1.75rem; |
| } |
| |
| .content-title { |
| font-size: 1.5rem; |
| } |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| |
| .app-footer { |
| margin-top: auto; |
| padding-top: 3rem; |
| text-align: center; |
| font-size: 0.85rem; |
| color: var(--text-light); |
| border-top: 1px solid var(--border-color); |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <header> |
| <div class="brand"> |
| <button class="mobile-menu-btn" id="menuToggle" aria-label="Menu"> |
| <i class="fa-solid fa-bars"></i> |
| </button> |
| <i class="fa-solid fa-graduation-cap"></i> |
| <span>Première D CI</span> |
| </div> |
| <div class="header-actions"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> |
| Built with anycoder |
| </a> |
| <div style="width: 35px; height: 35px; background: #e0e0e0; border-radius: 50%; overflow: hidden;"> |
| <img src="https://picsum.photos/seed/student/100/100" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover;"> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="app-container"> |
| |
| |
| <aside id="sidebar"> |
| <div class="search-container"> |
| <div class="search-box"> |
| <i class="fa-solid fa-search"></i> |
| <input type="text" id="searchInput" placeholder="Rechercher un cours..."> |
| </div> |
| </div> |
| <ul class="subject-list" id="subjectList"> |
| |
| </ul> |
| </aside> |
|
|
| |
| <main id="mainContent"> |
| |
| </main> |
|
|
| </div> |
|
|
| <script> |
| // --- DONNÉES PÉDAGOGIQUES (Simulation du programme 1ère D CI) --- |
| const curriculumData = { |
| mathematiques: { |
| title: "Mathématiques", |
| icon: "fa-calculator", |
| color: "#e74c3c", |
| chapters: [ |
| { |
| id: "m1", |
| title: "Généralités sur les suites numériques", |
| desc: "Définitions, suites arithmétiques et géométriques, sens de variation.", |
| content: ` |
| <h2>1. Définition d'une suite</h2> |
| <p>Une suite numérique est une fonction définie sur l'ensemble des entiers naturels <strong>N</strong> (ou une partie de N) à valeurs dans <strong>R</strong>.</p> |
| <p>On note généralement <em>(u<sub>n</sub>)</em> ou <em>u<sub>n</sub></em> le terme de rang <em>n</em>.</p> |
| |
| <h2>2. Modes de génération d'une suite</h2> |
| <ul> |
| <li><strong>Par formule explicite :</strong> u<sub>n</sub> = f(n). Exemple : u<sub>n</sub> = 2n + 1.</li> |
| <li><strong>Par récurrence :</strong> u<sub>n+1</sub> = f(u<sub>n</sub>). Exemple : u<sub>0</sub> = 1 et u<sub>n+1</sub> = 2u<sub>n</sub> + 3.</li> |
| </ul> |
| |
| <h2>3. Suites arithmétiques</h2> |
| <p>Une suite (u<sub>n</sub>) est arithmétique s'il existe un réel <strong>r</strong> (raison) tel que pour tout n, u<sub>n+1</sub> = u<sub>n</sub> + r.</p> |
| <blockquote>Propriété : Pour tout n, u<sub>n</sub> = u<sub>0</sub> + nr. La somme des n premiers termes est S<sub>n</sub> = n(u<sub>0</sub> + u<sub>n-1</sub>)/2.</blockquote> |
| |
| <h2>4. Suites géométriques</h2> |
| <p>Une suite (u<sub>n</sub>) est géométrique s'il existe un réel <strong>q</strong> (raison) tel que pour tout n, u<sub>n+1</sub> = q × u<sub>n</sub>.</p> |
| ` |
| }, |
| { |
| id: "m2", |
| title: "Étude de fonctions", |
| desc: "Limites, continuité, dérivabilité et variations des fonctions usuelles.", |
| content: ` |
| <h2>1. Limites de fonctions</h2> |
| <p>Soit f une fonction définie sur un intervalle contenant a ou admettant a comme borne.</p> |
| <p>On dit que f admet une limite finie L en a si tout intervalle ouvert contenant L contient toutes les valeurs f(x) pour x assez proche de a.</p> |
| |
| <h2>2. Continuité</h2> |
| <p>Une fonction f est continue en un point a si elle admet une limite finie en a et que cette limite est égale à f(a).</p> |
| <p><strong>Théorème des valeurs intermédiaires :</strong> Si f est continue sur [a; b], alors pour tout réel k compris entre f(a) et f(b), il existe au moins un réel c dans [a; b] tel que f(c) = k.</p> |
| |
| <h2>3. Dérivabilité</h2> |
| <p>Le nombre dérivé de f en a, noté f'(a), est le coefficient directeur de la tangente à la courbe au point d'abscisse a.</p> |
| ` |
| }, |
| { |
| id: "m3", |
| title: "Géométrie dans l'espace", |
| desc: "Positions relatives de droites et plans, vecteurs de l'espace, produit scalaire.", |
| content: ` |
| <h2>1. Positions relatives</h2> |
| <ul> |
| <li>Droites : Parallèles, sécantes ou non coplanaires.</li> |
| <li>Plans : Parallèles ou sécants (l'intersection est une droite).</li> |
| </ul> |
| <h2>2. Vecteurs de l'espace</h2> |
| <p>Les opérations sur les vecteurs du plan s'étendent à l'espace. Repère (O, i, j, k).</p> |
| ` |
| } |
| ] |
| }, |
| physique_chimie: { |
| title: "Physique-Chimie", |
| icon: "fa-flask", |
| color: "#2ecc71", |
| chapters: [ |
| { |
| id: "pc1", |
| title: "Chimie organique : Extraction", |
| desc: "Principes de l'extraction, hydrodistillation et chromatographie.", |
| content: ` |
| <h2>1. Les techniques d'extraction</h2> |
| <p>L'extraction consiste à séparer une substance (通常 un composé organique) d'un mélange (milieu biologique ou synthétique) en utilisant un solvant approprié.</p> |
| <p><strong>Choix du solvant :</strong> Il doit être non miscible avec le milieu initial, dissoudre efficacement la substance recherchée et être le moins toxique possible.</p> |
| |
| <h2>2. L'hydrodistillation</h2> |
| <p>Technique utilisée pour extraire les huiles essentielles de végétaux. Le mélange (eau et plante) est porté à ébullition. La vapeur d'eau entraîne les huiles, puis est refroidie dans un réfrigérant.</p> |
| ` |
| }, |
| { |
| id: "pc2", |
| title: "Électricité : Dipôle RC", |
| desc: "Charge et décharge d'un condensateur, énergie emmagasinée.", |
| content: ` |
| <h2>1. Le condensateur</h2> |
| <p>Un condensateur est constitué de deux armatures conductrices séparées par un isolant (diélectrique). Il est caractérisé par sa capacité C en Farads (F).</p> |
| |
| <h2>2. Charge d'un condensateur</h2> |
| <p>On soumet le dipôle RC à un échelon de tension E. La tension aux bornes du condensateur u<sub>c</sub> augmente progressivement selon la loi :</p> |
| <p style="text-align:center; font-family:serif; font-size:1.2em;">u<sub>c</sub>(t) = E(1 - e<sup>-t/τ</sup>)</p> |
| <p>Où τ = RC est la constante de temps du dipôle.</p> |
| ` |
| } |
| ] |
| }, |
| svt: { |
| title: "SVT", |
| icon: "fa-dna", |
| color: "#9b59b6", |
| chapters: [ |
| { |
| id: "svt1", |
| title: "La digestion chez l'homme", |
| desc: "Les enzymes digestives, l'absorption intestinale et l'assimilation.", |
| content: ` |
| <h2>1. Transformation des aliments</h2> |
| <p>La digestion est un processus mécanique et chimique. Les enzymes (protéines) catalysent l'hydrolyse des polymères alimentaires en monomères assimilables.</p> |
| <ul> |
| <li>Glucides → Oses (ex: Amidon → Glucose)</li> |
| <li>Protéines → Acides aminés</li> |
| <li>Lipides → Acides gras et Glycérol</li> |
| </ul> |
| <h2>2. Absorption intestinale</h2> |
| <p>Les nutriments passent de la lumière intestinale vers le sang (glucides, acides aminés) ou la lymphe (lipides) au niveau des villosités intestinales.</p> |
| ` |
| }, |
| { |
| id: "svt2", |
| title: "La transmission de la vie chez l'homme", |
| desc: "Le fonctionnement des appareils reproducteurs et le contrôle hormonal.", |
| content: ` |
| <h2>1. L'appareil reproducteur masculin</h2> |
| <p>Les testicules produisent les spermatozoïdes et la testostérone. L'éjaculation libère des millions de spermatozoïdes.</p> |
| |
| <h2>2. L'appareil reproducteur féminin</h2> |
| <p>Les ovaires produisent les ovules et les œstrogènes/progestérone. Le cycle utérin dure environ 28 jours.</p> |
| |
| <h2>3. La fécondation</h2> |
| <p>Rencontre de l'ovule et du spermatozoïde dans la trompe (ampoule tubaire), aboutissant à la formation d'un œuf diploïde.</p> |
| ` |
| } |
| ] |
| }, |
| francais: { |
| title: "Français", |
| icon: "fa-book-open", |
| color: "#f39c12", |
| chapters: [ |
| { |
| id: "fr1", |
| title: "L'argumentation", |
| desc: "Convaincre, persuader et délibérer. Analyse d'essais et discours.", |
| content: ` |
| <h2>1. Les buts de l'argumentation</h2> |
| <ul> |
| <li><strong>Convaincre :</strong> Faire appel à la raison (logos), utilisant des arguments rationnels.</li> |
| <li><strong>Persuader :</strong> Faire appel aux sentiments (pathos), cherchant à toucher l'émotion.</li> |
| <li><strong>Délibérer :</strong> Peser le pour et le contre pour prendre une décision.</li> |
| </ul> |
| <h2>2. Les types d'arguments</h2> |
| <p>On distingue l'argument d'autorité, l'argument par l'exemple, l'ad hominem, le causal, etc.</p> |
| ` |
| }, |
| { |
| id: "fr2", |
| title: "Le théâtre", |
| desc: "Le texte théâtral, la double énonciation et la représentation.", |
| content: ` |
| <h2>1. Spécificités du texte de théâtre</h2> |
| <p>Le texte théâtral est destiné à être joué. Il comprend des didascalies (indications scéniques) et des répliques.</p> |
| <h2>2. La double énonciation</h2> |
| <p>Le personnage s'adresse à un autre personnage, mais le spectateur reçoit aussi le message, souvent avec une compréhension différente (ironie, double sens).</p> |
| ` |
| } |
| ] |
| }, |
| histoire_geo: { |
| title: "Histoire-Géo", |
| icon: "fa-globe-africa", |
| color: "#34495e", |
| chapters: [ |
| { |
| id: "hg1", |
| title: "La Première Guerre Mondiale", |
| desc: "Les causes, les grandes phases et les conséquences du conflit.", |
| content: ` |
| <h2>1. Les causes de la guerre</h2> |
| <p>Un système d'alliances (Triple-Entente vs Triple-Alliance), les rivalités coloniales et nationalistes, ainsi que l'assassinat de l'archiduc François-Ferdinand à Sarajevo en 1914.</p> |
| <h2>2. Une guerre totale</h2> |
| <p>Mobilisation de toutes les ressources : économie de guerre, propagande, et implication des civils.</p> |
| ` |
| }, |
| { |
| id: "hg2", |
| title: "L'Afrique : défis et développement", |
| desc: "Démographie, urbanisation et enjeux économiques du continent africain.", |
| content: ` |
| <h2>1. La transition démographique</h2> |
| <p>L'Afrique connaît une forte croissance démographique, entraînant une population très jeune.</p> |
| <h2>2. L'urbanisation rapide</h2> |
| <p>Les villes africaines grossissent vite, posant des défis d'infrastructures (eau, électricité) mais offrant des opportunités économiques.</p> |
| ` |
| } |
| ] |
| }, |
| philosophie: { |
| title: "Philosophie", |
| icon: "fa-lightbulb", |
| color: "#d35400", |
| chapters: [ |
| { |
| id: "ph1", |
| title: "La conscience", |
| desc: "La conscience de soi, l'inconscient et l'identité personnelle.", |
| content: ` |
| <h2>1. Qu'est-ce que la conscience ?</h2> |
| <p>La conscience est la présence immédiate de l'esprit à lui-même. C'est le savoir réflexif que l'homme a de ses pensées et de ses actes.</p> |
| <h2>2. Conscience et Inconscient</h2> |
| <p>Freud a montré que la conscience n'est pas la totalité de la vie psychique. L'inconscient (pulsions, refoulements) influence nos comportements à notre insu.</p> |
| ` |
| } |
| ] |
| }, |
| anglais: { |
| title: "Anglais", |
| icon: "fa-language", |
| color: "#16a085", |
| chapters: [ |
| { |
| id: "en1", |
| title: "Communication Skills", |
| desc: "Expressing opinions, agreeing and disagreeing in debates.", |
| content: ` |
| <h2>1. Useful phrases for opinions</h2> |
| <ul> |
| <li>"In my opinion..."</li> |
| <li>"I strongly believe that..."</li> |
| <li>"From my point of view..."</li> |
| </ul> |
| <h2>2. Agreeing and Disagreeing</h2> |
| <p>"I couldn't agree more" (strong agreement).<br>"I see your point, but..." (polite disagreement).</p> |
| ` |
| } |
| ] |
| } |
| }; |
| |
| // --- ÉLÉMENTS DU DOM --- |
| const subjectListEl = document.getElementById('subjectList'); |
| const mainContentEl = document.getElementById('mainContent'); |
| const searchInput = document.getElementById('searchInput'); |
| const menuToggle = document.getElementById('menuToggle'); |
| const sidebar = document.getElementById('sidebar'); |
| |
| // --- ÉTAT DE L'APPLICATION --- |
| let currentSubject = null; |
| |
| // --- FONCTIONS --- |
| |
| // 1. Initialisation |
| function init() { |
| renderSubjects(); |
| renderEmptyState(); |
| |
| // Event Listeners |
| searchInput.addEventListener('input', handleSearch); |
| menuToggle.addEventListener('click', () => { |
| sidebar.classList.toggle('open'); |
| }); |
| |
| // Fermer la sidebar si on clique en dehors sur mobile |
| mainContentEl.addEventListener('click', () => { |
| if(window.innerWidth <= 768) { |
| sidebar.classList.remove('open'); |
| } |
| }); |
| } |
| |
| // 2. Rendu de la liste des matières |
| function renderSubjects(filter = "") { |
| subjectListEl.innerHTML = ""; |
| |
| Object.keys(curriculumData).forEach(key => { |
| const subject = curriculumData[key]; |
| |
| // Filtrage par recherche |
| if (filter && !subject.title.toLowerCase().includes(filter.toLowerCase())) { |
| return; |
| } |
| |
| const li = document.createElement('li'); |
| li.className = 'subject-item'; |
| |
| const btn = document.createElement('button'); |
| btn.className = `subject-btn ${currentSubject === key ? 'active' : ''}`; |
| btn.onclick = () => selectSubject(key); |
| |
| btn.innerHTML = ` |
| <div class="subject-icon" style="color: ${currentSubject === key ? 'white' : subject.color}"> |
| <i class="fa-solid ${subject.icon}"></i> |
| </div> |
| <span>${subject.title}</span> |
| `; |
| |
| li.appendChild(btn); |
| subjectListEl.appendChild(li); |
| }); |
| } |
| |
| // 3. Sélection d'une matière |
| function selectSubject(subjectKey) { |
| currentSubject = subjectKey; |
| renderSubjects(searchInput.value); // Re-render pour mettre à jour la classe active |
| renderChapterList(subjectKey); |
| |
| // Sur mobile, fermer le menu après sélection |
| if(window.innerWidth <= 768) { |
| sidebar.classList.remove('open'); |
| } |
| } |
| |
| // 4. Rendu de la liste des chapitres (Vue principale) |
| function renderChapterList(subjectKey) { |
| const subject = curriculumData[subjectKey]; |
| const chapters = subject.chapters; |
| |
| let html = ` |
| <div class="content-header"> |
| <div class="breadcrumb">Accueil > ${subject.title}</div> |
| <h1 class="content-title">${subject.title}</h1> |
| </div> |
| <div class="chapters-grid"> |
| `; |
| |
| chapters.forEach(chapter => { |
| html += ` |
| <div class="chapter-card" onclick="renderLesson('${subjectKey}', '${chapter.id}')"> |
| <div class="chapter-meta">Chapitre ${chapter.id.replace(/\D/g, '')}</div> |
| <h3 class="chapter-title">${chapter.title}</h3> |
| <p class="chapter-desc">${chapter.desc}</p> |
| <div class="chapter-footer"> |
| <span>Voir le cours</span> |
| <i class="fa-solid fa-arrow-right"></i> |
| </div> |
| </div> |
| `; |
| }); |
| |
| html += `</div>`; |
| mainContentEl.innerHTML = html; |
| } |
| |
| // 5. Rendu du détail d'une leçon |
| window.renderLesson = function(subjectKey, chapterId) { |
| const subject = curriculumData[subjectKey]; |
| const chapter = subject.chapters.find(c => c.id === chapterId); |
| |
| if (!chapter) return; |
| |
| const html = ` |
| <button class="back-btn" onclick="selectSubject('${subjectKey}')"> |
| <i class="fa-solid fa-arrow-left"></i> Retour aux chapitres |
| </button> |
| <div class="lesson-view"> |
| <div class="lesson-header"> |
| <div class="lesson-tags"> |
| <span class="tag">${subject.title}</span> |
| <span class="tag">1ère D</span> |
| </div> |
| <h1 class="lesson-title">${chapter.title}</h1> |
| </div> |
| <div class="lesson-content"> |
| ${chapter.content} |
| </div> |
| </div> |
| <div class="app-footer"> |
| <p>© 2023-2024 Cours Première D Côte d'Ivoire</p> |
| </div> |
| `; |
| |
| mainContentEl.innerHTML = html; |
| // Scroll to top |
| mainContentEl.scrollTop = 0; |
| }; |
| |
| // 6. État vide |
| function renderEmptyState() { |
| mainContentEl.innerHTML = ` |
| <div class="empty-state"> |
| <i class="fa-solid fa-book-open-reader"></i> |
| <h2>Bienvenue sur votre plateforme de cours</h2> |
| <p>Sélectionnez une matière dans le menu latéral pour accéder aux chapitres complets de la classe de Première D.</p> |
| <p style="margin-top: 10px; font-size: 0.9rem;">Programme officiel - Côte d'Ivoire</p> |
| </div> |
| `; |
| } |
| |
| // 7. Gestion de la recherche |
| function handleSearch(e) { |
| const term = e.target.value; |
| renderSubjects(term); |
| } |
| |
| // Lancer l'application |
| init(); |
| |
| </script> |
| </body> |
| </html> |
