|
|
<!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> |
