Hugging Face's logo

Spaces:
Mousco
/
anycoder-f13f4aa5
Running

App Files Community
Mousco commited on
Commit
89802b8
·
verified ·
1 Parent(s): 06a59e8

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +830 -19
index.html CHANGED
@@ -1,19 +1,830 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Première D Côte d'Ivoire - Cours & Exercices</title>
7
+
8
+ <!-- Importation des icônes (FontAwesome via CDN) -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <style>
12
+ /* --- VARIABLES & RESET --- */
13
+ :root {
14
+ --primary-color: #009739; /* Vert Côte d'Ivoire */
15
+ --secondary-color: #FF7722; /* Orange Côte d'Ivoire */
16
+ --accent-color: #2c3e50;
17
+ --bg-color: #f4f7f6;
18
+ --sidebar-bg: #ffffff;
19
+ --text-color: #333;
20
+ --text-light: #666;
21
+ --border-color: #e0e0e0;
22
+ --shadow: 0 4px 6px rgba(0,0,0,0.05);
23
+ --radius: 8px;
24
+ --max-width: 1200px;
25
+ }
26
+
27
+ * {
28
+ box-sizing: border-box;
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+
33
+ body {
34
+ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
35
+ background-color: var(--bg-color);
36
+ color: var(--text-color);
37
+ line-height: 1.6;
38
+ height: 100vh;
39
+ display: flex;
40
+ flex-direction: column;
41
+ overflow: hidden; /* Le scroll sera géré dans Main */
42
+ }
43
+
44
+ /* --- HEADER --- */
45
+ header {
46
+ background: linear-gradient(135deg, var(--primary-color), #007a2e);
47
+ color: white;
48
+ padding: 0.8rem 1.5rem;
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
53
+ z-index: 100;
54
+ }
55
+
56
+ .logo-area {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 10px;
60
+ font-weight: 700;
61
+ font-size: 1.2rem;
62
+ }
63
+
64
+ .logo-area i {
65
+ font-size: 1.5rem;
66
+ color: var(--secondary-color);
67
+ }
68
+
69
+ .anycoder-link {
70
+ font-size: 0.85rem;
71
+ background: rgba(255, 255, 255, 0.2);
72
+ padding: 5px 12px;
73
+ border-radius: 20px;
74
+ text-decoration: none;
75
+ color: white;
76
+ transition: background 0.3s;
77
+ }
78
+
79
+ .anycoder-link:hover {
80
+ background: rgba(255, 255, 255, 0.3);
81
+ }
82
+
83
+ /* --- LAYOUT PRINCIPAL --- */
84
+ .app-container {
85
+ display: flex;
86
+ flex: 1;
87
+ overflow: hidden;
88
+ position: relative;
89
+ }
90
+
91
+ /* --- SIDEBAR (Navigation) --- */
92
+ .sidebar {
93
+ width: 280px;
94
+ background: var(--sidebar-bg);
95
+ border-right: 1px solid var(--border-color);
96
+ display: flex;
97
+ flex-direction: column;
98
+ overflow-y: auto;
99
+ transition: transform 0.3s ease;
100
+ }
101
+
102
+ .subject-list {
103
+ list-style: none;
104
+ padding: 1rem 0;
105
+ }
106
+
107
+ .subject-item {
108
+ border-bottom: 1px solid #f0f0f0;
109
+ }
110
+
111
+ .subject-header {
112
+ padding: 1rem 1.5rem;
113
+ cursor: pointer;
114
+ display: flex;
115
+ justify-content: space-between;
116
+ align-items: center;
117
+ font-weight: 600;
118
+ color: var(--accent-color);
119
+ transition: background 0.2s;
120
+ }
121
+
122
+ .subject-header:hover {
123
+ background-color: #f9f9f9;
124
+ }
125
+
126
+ .subject-header i.icon {
127
+ margin-right: 10px;
128
+ width: 20px;
129
+ text-align: center;
130
+ color: var(--primary-color);
131
+ }
132
+
133
+ .subject-header .arrow {
134
+ font-size: 0.8rem;
135
+ transition: transform 0.3s;
136
+ }
137
+
138
+ .subject-item.active .subject-header {
139
+ background-color: #e8f5e9;
140
+ color: var(--primary-color);
141
+ }
142
+
143
+ .subject-item.active .arrow {
144
+ transform: rotate(90deg);
145
+ }
146
+
147
+ /* Sous-menu Chapitres */
148
+ .chapter-list {
149
+ list-style: none;
150
+ max-height: 0;
151
+ overflow: hidden;
152
+ transition: max-height 0.3s ease-out;
153
+ background-color: #fafafa;
154
+ }
155
+
156
+ .subject-item.active .chapter-list {
157
+ max-height: 500px; /* Valeur arbitraire suffisante */
158
+ transition: max-height 0.5s ease-in;
159
+ overflow-y: auto;
160
+ }
161
+
162
+ .chapter-item {
163
+ padding: 0.8rem 1.5rem 0.8rem 3rem;
164
+ cursor: pointer;
165
+ font-size: 0.9rem;
166
+ color: var(--text-light);
167
+ border-left: 3px solid transparent;
168
+ transition: all 0.2s;
169
+ }
170
+
171
+ .chapter-item:hover {
172
+ color: var(--primary-color);
173
+ background-color: #f0f0f0;
174
+ }
175
+
176
+ .chapter-item.active-chapter {
177
+ border-left-color: var(--secondary-color);
178
+ background-color: #fff;
179
+ color: var(--accent-color);
180
+ font-weight: 600;
181
+ box-shadow: 0 2px 4px rgba(0,0,0,0.03);
182
+ }
183
+
184
+ /* --- MAIN CONTENT --- */
185
+ .main-content {
186
+ flex: 1;
187
+ padding: 2rem;
188
+ overflow-y: auto;
189
+ scroll-behavior: smooth;
190
+ }
191
+
192
+ .content-wrapper {
193
+ max-width: 900px;
194
+ margin: 0 auto;
195
+ background: white;
196
+ padding: 3rem;
197
+ border-radius: var(--radius);
198
+ box-shadow: var(--shadow);
199
+ min-height: 80vh;
200
+ }
201
+
202
+ /* --- TYPOGRAPHIE DU COURS --- */
203
+ h1.course-title {
204
+ color: var(--primary-color);
205
+ margin-bottom: 0.5rem;
206
+ font-size: 2rem;
207
+ }
208
+
209
+ .course-meta {
210
+ color: #888;
211
+ font-size: 0.9rem;
212
+ margin-bottom: 2rem;
213
+ display: flex;
214
+ gap: 15px;
215
+ }
216
+
217
+ .course-meta span {
218
+ display: flex;
219
+ align-items: center;
220
+ gap: 5px;
221
+ }
222
+
223
+ h2 {
224
+ margin-top: 2rem;
225
+ margin-bottom: 1rem;
226
+ color: var(--accent-color);
227
+ border-bottom: 2px solid #f0f0f0;
228
+ padding-bottom: 0.5rem;
229
+ }
230
+
231
+ p {
232
+ margin-bottom: 1rem;
233
+ text-align: justify;
234
+ }
235
+
236
+ ul, ol {
237
+ margin-left: 1.5rem;
238
+ margin-bottom: 1rem;
239
+ }
240
+
241
+ li {
242
+ margin-bottom: 0.5rem;
243
+ }
244
+
245
+ /* --- EXEMPLES & DEFINITIONS --- */
246
+ .box {
247
+ padding: 1.2rem;
248
+ border-radius: var(--radius);
249
+ margin: 1.5rem 0;
250
+ border-left: 4px solid;
251
+ }
252
+
253
+ .box.definition {
254
+ background-color: #e3f2fd;
255
+ border-color: #2196f3;
256
+ }
257
+
258
+ .box.example {
259
+ background-color: #e8f5e9;
260
+ border-color: var(--primary-color);
261
+ }
262
+
263
+ .box-title {
264
+ font-weight: bold;
265
+ display: block;
266
+ margin-bottom: 0.5rem;
267
+ text-transform: uppercase;
268
+ font-size: 0.85rem;
269
+ letter-spacing: 0.5px;
270
+ }
271
+
272
+ .definition .box-title { color: #1565c0; }
273
+ .example .box-title { color: #2e7d32; }
274
+
275
+ /* --- MATHS STYLE --- */
276
+ .math {
277
+ font-family: 'Times New Roman', Times, serif;
278
+ font-style: italic;
279
+ background: #f5f5f5;
280
+ padding: 0 4px;
281
+ }
282
+
283
+ /* --- EXERCICES --- */
284
+ .exercise-section {
285
+ margin-top: 3rem;
286
+ border-top: 1px solid var(--border-color);
287
+ padding-top: 2rem;
288
+ }
289
+
290
+ .exercise-card {
291
+ background: #fafafa;
292
+ border: 1px solid #eee;
293
+ padding: 1.5rem;
294
+ border-radius: var(--radius);
295
+ margin-bottom: 1.5rem;
296
+ }
297
+
298
+ .exercise-question {
299
+ font-weight: 600;
300
+ margin-bottom: 1rem;
301
+ }
302
+
303
+ .solution-container {
304
+ margin-top: 1rem;
305
+ padding: 1rem;
306
+ background: #fff;
307
+ border-left: 3px solid var(--secondary-color);
308
+ display: none; /* Caché par défaut */
309
+ }
310
+
311
+ .solution-container.visible {
312
+ display: block;
313
+ animation: fadeIn 0.5s;
314
+ }
315
+
316
+ .btn {
317
+ display: inline-block;
318
+ padding: 0.6rem 1.2rem;
319
+ background-color: var(--primary-color);
320
+ color: white;
321
+ border: none;
322
+ border-radius: 4px;
323
+ cursor: pointer;
324
+ font-size: 0.9rem;
325
+ transition: background 0.2s;
326
+ }
327
+
328
+ .btn:hover {
329
+ background-color: #007a2e;
330
+ }
331
+
332
+ .btn-outline {
333
+ background: transparent;
334
+ border: 1px solid var(--primary-color);
335
+ color: var(--primary-color);
336
+ }
337
+
338
+ .btn-outline:hover {
339
+ background: #e8f5e9;
340
+ }
341
+
342
+ /* --- MOBILE MENU BUTTON --- */
343
+ .mobile-toggle {
344
+ display: none;
345
+ background: none;
346
+ border: none;
347
+ color: white;
348
+ font-size: 1.5rem;
349
+ cursor: pointer;
350
+ }
351
+
352
+ /* --- RESPONSIVE --- */
353
+ @media (max-width: 768px) {
354
+ .mobile-toggle {
355
+ display: block;
356
+ }
357
+
358
+ .sidebar {
359
+ position: absolute;
360
+ top: 0;
361
+ left: 0;
362
+ height: 100%;
363
+ z-index: 200;
364
+ transform: translateX(-100%);
365
+ box-shadow: 2px 0 10px rgba(0,0,0,0.1);
366
+ }
367
+
368
+ .sidebar.open {
369
+ transform: translateX(0);
370
+ }
371
+
372
+ .main-content {
373
+ padding: 1rem;
374
+ }
375
+
376
+ .content-wrapper {
377
+ padding: 1.5rem;
378
+ }
379
+
380
+ h1.course-title {
381
+ font-size: 1.5rem;
382
+ }
383
+ }
384
+
385
+ @keyframes fadeIn {
386
+ from { opacity: 0; transform: translateY(-5px); }
387
+ to { opacity: 1; transform: translateY(0); }
388
+ }
389
+
390
+ /* Utility */
391
+ .hidden { display: none; }
392
+ .badge {
393
+ display: inline-block;
394
+ padding: 2px 8px;
395
+ border-radius: 12px;
396
+ font-size: 0.75rem;
397
+ background: #eee;
398
+ color: #555;
399
+ }
400
+ </style>
401
+ </head>
402
+ <body>
403
+
404
+ <!-- HEADER -->
405
+ <header>
406
+ <div class="logo-area">
407
+ <button class="mobile-toggle" onclick="toggleSidebar()">
408
+ <i class="fas fa-bars"></i>
409
+ </button>
410
+ <i class="fas fa-graduation-cap"></i>
411
+ <span>1ère D Côte d'Ivoire</span>
412
+ </div>
413
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
414
+ Built with anycoder <i class="fas fa-external-link-alt" style="font-size: 0.7em;"></i>
415
+ </a>
416
+ </header>
417
+
418
+ <div class="app-container">
419
+ <!-- SIDEBAR NAVIGATION -->
420
+ <nav class="sidebar" id="sidebar">
421
+ <ul class="subject-list" id="subjectList">
422
+ <!-- La liste des matières sera générée par JS -->
423
+ </ul>
424
+ </nav>
425
+
426
+ <!-- MAIN CONTENT AREA -->
427
+ <main class="main-content" onclick="closeSidebarOnMobile(event)">
428
+ <div class="content-wrapper" id="contentArea">
429
+ <!-- Le contenu du cours sera injecté ici -->
430
+ <div style="text-align: center; margin-top: 50px; color: #888;">
431
+ <i class="fas fa-book-open" style="font-size: 3rem; margin-bottom: 1rem;"></i>
432
+ <h2>Bienvenue élève de Première D</h2>
433
+ <p>Sélectionnez une matière et un chapitre dans le menu pour commencer votre révision.</p>
434
+ </div>
435
+ </div>
436
+ </main>
437
+ </div>
438
+
439
+ <script>
440
+ // --- DONNÉES DU PROGRAMME (Structure JSON) ---
441
+ const curriculum = [
442
+ {
443
+ id: "maths",
444
+ name: "Mathématiques",
445
+ icon: "fa-calculator",
446
+ chapters: [
447
+ {
448
+ id: "m1",
449
+ title: "Second Degré : Polynômes",
450
+ content: `
451
+ <h1 class="course-title">Le Second Degré</h1>
452
+ <div class="course-meta">
453
+ <span><i class="far fa-clock"></i> 4 Heures</span>
454
+ <span><i class="fas fa-signal"></i> Difficulté: Moyenne</span>
455
+ </div>
456
+
457
+ <h2>1. Définition et Forme Canonique</h2>
458
+ <p>Une fonction polynôme de degré 2 est une fonction définie sur ℝ par <span class="math">f(x) = ax² + bx + c</span> où <span class="math">a</span>, <span class="math">b</span>, <span class="math">c</span> sont des réels avec <span class="math">a ≠ 0</span>.</p>
459
+
460
+ <div class="box definition">
461
+ <span class="box-title">Définition : Forme Canonique</span>
462
+ Toute fonction polynôme de degré 2 peut s'écrire sous la forme :<br>
463
+ <span class="math">f(x) = a(x - α)² + β</span><br>
464
+ Où <span class="math">α = -b/2a</span> et <span class="math">β = f(α)</span>.
465
+ </div>
466
+
467
+ <h2>2. Équation du Second Degré</h2>
468
+ <p>Pour résoudre <span class="math">ax² + bx + c = 0</span>, on calcule le discriminant <span class="math">Δ = b² - 4ac</span>.</p>
469
+ <ul>
470
+ <li>Si <span class="math">Δ > 0</span> : deux solutions distinctes <span class="math">x₁</span> et <span class="math">x₂</span>.</li>
471
+ <li>Si <span class="math">Δ = 0</span> : une solution double <span class="math">x₀ = -b/2a</span>.</li>
472
+ <li>Si <span class="math">Δ < 0</span> : pas de solution réelle.</li>
473
+ </ul>
474
+
475
+ <div class="box example">
476
+ <span class="box-title">Exemple</span>
477
+ Résoudre <span class="math">2x² - 5x + 2 = 0</span>.<br>
478
+ <span class="math">Δ = (-5)² - 4(2)(2) = 25 - 16 = 9 > 0</span>.<br>
479
+ <span class="math">x₁ = (5 - 3)/4 = 0.5</span> et <span class="math">x₂ = (5 + 3)/4 = 2</span>.<br>
480
+ S = {0.5 ; 2}.
481
+ </div>
482
+
483
+ <h2>3. Signe du Trinôme</h2>
484
+ <p>Le signe de <span class="math">ax² + bx + c</span> dépend du signe de <span class="math">a</span> et du discriminant <span class="math">Δ</span>.</p>
485
+ <p>Si <span class="math">a > 0</span>, la parabole est orientée "vers le haut". Le polynôme est positif à l'extérieur des racines (si elles existent) et négatif entre elles.</p>
486
+ `,
487
+ exercises: [
488
+ {
489
+ question: "Résoudre l'équation : x² - 4x + 4 = 0",
490
+ solution: "Calcul du discriminant : Δ = (-4)² - 4(1)(4) = 16 - 16 = 0.<br>Comme Δ = 0, il y a une racine double : x₀ = -(-4)/(2*1) = 2.<br>L'ensemble des solutions est S = {2}."
491
+ },
492
+ {
493
+ question: "Factoriser 3x² + 7x + 2",
494
+ solution: "Posons P(x) = 3x² + 7x + 2.<br>Δ = 7² - 4(3)(2) = 49 - 24 = 25.<br>Les racines sont :<br>x₁ = (-7 - 5)/6 = -2<br>x₂ = (-7 + 5)/6 = -1/3<br>La forme factorisée est : a(x - x₁)(x - x₂) = 3(x + 2)(x + 1/3) = (x + 2)(3x + 1)."
495
+ }
496
+ ]
497
+ },
498
+ {
499
+ id: "m2",
500
+ title: "Géométrie : Barycentre",
501
+ content: `
502
+ <h1 class="course-title">Barycentre</h1>
503
+ <div class="course-meta">
504
+ <span><i class="far fa-clock"></i> 3 Heures</span>
505
+ <span><i class="fas fa-shapes"></i> Géométrie Plane</span>
506
+ </div>
507
+ <p>Le barycentre est une généralisation de la notion de milieu ou de centre de gravité.</p>
508
+ <h2>1. Définition</h2>
509
+ <div class="box definition">
510
+ <span class="box-title">Définition</span>
511
+ Soient A et B deux points, α et β deux réels tels que α + β ≠ 0.<br>
512
+ Il existe un unique point G tel que : <span class="math">αGA⃗ + βGB⃗ = 0⃗</span>.<br>
513
+ Ce point G est appelé le barycentre des points pondérés (A, α) et (B, β).
514
+ </div>
515
+ <h2>2. Propriétés</h2>
516
+ <ul>
517
+ <li><strong>Homogénéité :</strong> On ne change pas le barycentre en multipliant tous les coefficients par un même nombre non nul.</li>
518
+ <li><strong>Associativité :</strong> On peut remplacer un groupe de points par leur barycentre affecté de la somme de leurs coefficients.</li>
519
+ </ul>
520
+ `,
521
+ exercises: [
522
+ {
523
+ question: "Construire le barycentre G de (A, 2), (B, -1) sachant que AB = 6cm.",
524
+ solution: "On a 2GA⃗ - 1GB⃗ = 0⃗.<br>Donc 2GA⃗ - (GA⃗ + AB⃗) = 0⃗ => GA⃗ - AB⃗ = 0⃗ => GA⃗ = AB⃗.<br>Le point G est le point tel que ABGA est un parallélogramme (ou G est le translaté de A par le vecteur AB).<br>Donc G est le point tel que AG = 6cm et G est sur la demi-droite [AB)."
525
+ }
526
+ ]
527
+ }
528
+ ]
529
+ },
530
+ {
531
+ id: "physique",
532
+ name: "Physique-Chimie",
533
+ icon: "fa-atom",
534
+ chapters: [
535
+ {
536
+ id: "p1",
537
+ title: "Forces et Mouvements",
538
+ content: `
539
+ <h1 class="course-title">Forces et Mouvements</h1>
540
+ <div class="course-meta">
541
+ <span><i class="far fa-clock"></i> 5 Heures</span>
542
+ <span><i class="fas fa-running"></i> Mécanique</span>
543
+ </div>
544
+
545
+ <h2>1. Référentiel et Relativité</h2>
546
+ <p>Le mouvement d'un objet est relatif : il dépend de l'observateur (référentiel). Les référentiels courants sont :</p>
547
+ <ul>
548
+ <li>Référentiel terrestre (pour les mouvements sur Terre).</li>
549
+ <li>Référentiel géocentrique (satellites, Lune).</li>
550
+ <li>Référentiel héliocentrique (planètes du système solaire).</li>
551
+ </ul>
552
+
553
+ <h2>2. Les Forces</h2>
554
+ <div class="box definition">
555
+ <span class="box-title">Définition</span>
556
+ Une force est une action mécanique capable de modifier le mouvement d'un corps ou de le déformer. Elle est modélisée par un vecteur caractérisé par : direction, sens, intensité (en Newton N) et point d'application.
557
+ </div>
558
+
559
+ <h2>3. Principe d'Inertie</h2>
560
+ <div class="box example">
561
+ <span class="box-title">1ère Loi de Newton</span>
562
+ Dans un référentiel galiléen, si les forces qui s'exercent sur un solide se compensent (somme vectorielle nulle), alors le solide est soit au repos, soit animé d'un mouvement rectiligne uniforme.
563
+ </div>
564
+ `,
565
+ exercises: [
566
+ {
567
+ question: "Un skieur descend une pente enneigée à vitesse constante. Que peut-on dire des forces qui s'appliquent sur lui ?",
568
+ solution: "Puisque la vitesse est constante (et en l'absence de changement de direction indiqué), le mouvement est rectiligne uniforme par rapport au sol.<br>D'après le principe d'inertie, les forces qui s'exercent sur le skieur (Poids, Réaction du sol, Frottements) se compensent : <span class="math">P⃗ + R⃗ + f⃗ = 0⃗</span>."
569
+ },
570
+ {
571
+ question: "Une voiture accélère sur une route horizontale. Les forces se compensent-elles ?",
572
+ solution: "Non. Puisque la vitesse varie (accélération), le mouvement n'est pas uniforme.<br>Le vecteur vitesse change. Les forces ne se compensent pas. La force motrice est supérieure aux forces de frottement."
573
+ }
574
+ ]
575
+ },
576
+ {
577
+ id: "p2",
578
+ title: "Les Spectres Lumineux",
579
+ content: `
580
+ <h1 class="course-title">Les Spectres Lumineux</h1>
581
+ <div class="course-meta">
582
+ <span><i class="far fa-clock"></i> 3 Heures</span>
583
+ <span><i class="fas fa-lightbulb"></i> Optique</span>
584
+ </div>
585
+ <p>L'étude des spectres permet d'identifier la composition chimique d'une source de lumière (étoile, gaz).</p>
586
+
587
+ <h2>1. Spectre d'émission</h2>
588
+ <ul>
589
+ <li><strong>Spectre continu :</strong> Arc-en-ciel (lampe à incandescence). Présence de toutes les couleurs.</li>
590
+ <li><strong>Spectre de raies :</strong> Discontinu. Obtenu avec un gaz à basse pression excité (ex: néon). Chaque élément chimique possède sa propre signature (raies).</li>
591
+ </ul>
592
+
593
+ <h2>2. Spectre d'absorption</h2>
594
+ <p>Lorsqu'une lumière blanche traverse un gaz froid, le gaz absorbe les radiations qu'il serait capable d'émettre. On obtient un fond coloré continu avec des raies noires.</p>
595
+ `,
596
+ exercises: [
597
+ {
598
+ question: "Comment peut-on savoir que le Soleil contient de l'hydrogène ?",
599
+ solution: "En analysant le spectre de la lumière solaire. On observe des raies d'absorption noires qui correspondent exactement aux raies d'émission caractéristiques de l'hydrogène (spectre de raies)."
600
+ }
601
+ ]
602
+ }
603
+ ]
604
+ },
605
+ {
606
+ id: "svt",
607
+ name: "SVT",
608
+ icon: "fa-dna",
609
+ chapters: [
610
+ {
611
+ id: "s1",
612
+ title: "Reproduction Humaine",
613
+ content: `
614
+ <h1 class="course-title">Reproduction Humaine</h1>
615
+ <div class="course-meta">
616
+ <span><i class="far fa-clock"></i> 4 Heures</span>
617
+ <span><i class="fas fa-female"></i> Biologie</span>
618
+ </div>
619
+
620
+ <h2>1. Le fonctionnement de l'appareil reproducteur féminin</h2>
621
+ <p>L'appareil reproducteur féminin est constitué de deux ovaires, des trompes de Fallope et de l'utérus.</p>
622
+ <p>À partir de la puberté, les ovaires libèrent un ovule environ tous les 28 jours : c'est <strong>l'ovulation</strong>.</p>
623
+ <div class="box definition">
624
+ <span class="box-title">Cycle Utérin</span>
625
+ La muqueuse utérine s'épaissit pour accueillir un éventuel embryon. S'il n'y a pas de fécondation, cette muqueuse est éliminée : ce sont les règles.
626
+ </div>
627
+
628
+ <h2>2. La Fécondation</h2>
629
+ <p>La rencontre entre l'ovule et un spermatozoïde a lieu dans la trompe de Fallope. La fécondation aboutit à la formation d'une cellule unique : l'œuf (ou zygote).</p>
630
+ `,
631
+ exercises: [
632
+ {
633
+ question: "Où se produit généralement la fécondation chez la femme ?",
634
+ solution: "La fécondation a généralement lieu dans la trompe de Fallope (ou oviducte), et non dans l'utérus."
635
+ },
636
+ {
637
+ question: "Qu'est-ce que la nidation ?",
638
+ solution: "La nidation est l'implantation de l'embryon (qui est devenu blastocyste) dans la paroi de l'utérus (endomètre), environ 6 jours après la fécondation."
639
+ }
640
+ ]
641
+ }
642
+ ]
643
+ },
644
+ {
645
+ id: "francais",
646
+ name: "Français",
647
+ icon: "fa-feather-alt",
648
+ chapters: [
649
+ {
650
+ id: "f1",
651
+ title: "L'Argumentation",
652
+ content: `
653
+ <h1 class="course-title">Les Genres de l'Argumentation</h1>
654
+ <div class="course-meta">
655
+ <span><i class="far fa-clock"></i> 2 Heures</span>
656
+ <span><i class="fas fa-pen-nib"></i> Littérature</span>
657
+ </div>
658
+
659
+ <p>Argumenter, c'est tenter de convaincre ou de persuader un destinataire d'une thèse (une opinion) en utilisant des arguments.</p>
660
+
661
+ <h2>1. Convaincre vs Persuader</h2>
662
+ <ul>
663
+ <li><strong>Convaincre</strong> : Faire appel à la raison (logique, faits, exemples). On cherche l'adhésion intellectuelle.</li>
664
+ <li><strong>Persuader</strong> : Faire appel aux sentiments (émotions, pathos). On cherche l'adhésion sensible et passionnelle.</li>
665
+ </ul>
666
+
667
+ <h2>2. Les types d'arguments</h2>
668
+ <div class="box example">
669
+ <span class="box-title">Exemple</span>
670
+ L'argument d'autorité (citer un expert), l'argument par l'exemple (cas concret), l'argument ad hominem (attaquer la personne), l'argument par la causalité (cause à effet).
671
+ </div>
672
+ `,
673
+ exercises: [
674
+ {
675
+ question: "Dans un discours politique qui joue sur la peur de l'auditoire, quel mode d'argumentation est utilisé ?",
676
+ solution: "C'est la persuasion. En jouant sur la peur (une émotion), l'orateur cherche à toucher la sensibilité de l'auditoire plutôt que sa raison pure."
677
+ }
678
+ ]
679
+ }
680
+ ]
681
+ }
682
+ ];
683
+
684
+ // --- LOGIQUE JAVASCRIPT ---
685
+
686
+ const subjectListEl = document.getElementById('subjectList');
687
+ const contentAreaEl = document.getElementById('contentArea');
688
+ const sidebar = document.getElementById('sidebar');
689
+
690
+ // Fonction d'initialisation
691
+ function init() {
692
+ renderSidebar();
693
+ }
694
+
695
+ // Rendu de la barre latérale
696
+ function renderSidebar() {
697
+ subjectListEl.innerHTML = '';
698
+
699
+ curriculum.forEach((subject, index) => {
700
+ const li = document.createElement('li');
701
+ li.className = 'subject-item';
702
+ if (index === 0) li.classList.add('active'); // Ouvrir le premier par défaut
703
+
704
+ // Header de la matière
705
+ const header = document.createElement('div');
706
+ header.className = 'subject-header';
707
+ header.onclick = () => toggleSubject(index);
708
+ header.innerHTML = `
709
+ <span><i class="fas ${subject.icon} icon"></i> ${subject.name}</span>
710
+ <i class="fas fa-chevron-right arrow"></i>
711
+ `;
712
+
713
+ // Liste des chapitres
714
+ const ul = document.createElement('ul');
715
+ ul.className = 'chapter-list';
716
+
717
+ subject.chapters.forEach((chapter, chIndex) => {
718
+ const chLi = document.createElement('li');
719
+ chLi.className = 'chapter-item';
720
+ if (index === 0 && chIndex === 0) chLi.classList.add('active-chapter');
721
+ chLi.innerText = chapter.title;
722
+ chLi.onclick = (e) => {
723
+ e.stopPropagation(); // Évite de fermer le menu
724
+ loadChapter(index, chIndex);
725
+ };
726
+ ul.appendChild(chLi);
727
+ });
728
+
729
+ li.appendChild(header);
730
+ li.appendChild(ul);
731
+ subjectListEl.appendChild(li);
732
+ });
733
+
734
+ // Charger le premier cours par défaut
735
+ loadChapter(0, 0);
736
+ }
737
+
738
+ // Gérer l'ouverture/fermeture des matières
739
+ function toggleSubject(index) {
740
+ const subjects = document.querySelectorAll('.subject-item');
741
+ subjects.forEach((subj, i) => {
742
+ if (i === index) {
743
+ subj.classList.toggle('active');
744
+ } else {
745
+ subj.classList.remove('active');
746
+ }
747
+ });
748
+ }
749
+
750
+ // Charger un chapitre spécifique
751
+ function loadChapter(subjectIndex, chapterIndex) {
752
+ // Mise à jour visuelle des menus
753
+ document.querySelectorAll('.chapter-item').forEach(item => item.classList.remove('active-chapter'));
754
+ const activeSubject = document.querySelectorAll('.subject-item')[subjectIndex];
755
+ const activeChapter = activeSubject.querySelectorAll('.chapter-item')[chapterIndex];
756
+ activeChapter.classList.add('active-chapter');
757
+
758
+ // Récupération des données
759
+ const subject = curriculum[subjectIndex];
760
+ const chapter = subject.chapters[chapterIndex];
761
+
762
+ // Construction du HTML
763
+ let exercisesHTML = '';
764
+ if (chapter.exercises && chapter.exercises.length > 0) {
765
+ exercisesHTML = `<div class="exercise-section">
766
+ <h2><i class="fas fa-pen"></i> Exercices Corrigés</h2>`;
767
+
768
+ chapter.exercises.forEach((ex, exIndex) => {
769
+ exercisesHTML += `
770
+ <div class="exercise-card">
771
+ <div class="exercise-question">Exercice ${exIndex + 1} : ${ex.question}</div>
772
+ <button class="btn btn-outline" onclick="toggleSolution(${exIndex})">
773
+ <i class="fas fa-eye"></i> Voir la correction
774
+ </button>
775
+ <div id="sol-${exIndex}" class="solution-container">
776
+ <strong>Correction :</strong><br>${ex.solution}
777
+ </div>
778
+ </div>
779
+ `;
780
+ });
781
+
782
+ exercisesHTML += `</div>`;
783
+ }
784
+
785
+ const htmlContent = `
786
+ ${chapter.content}
787
+ ${exercisesHTML}
788
+ `;
789
+
790
+ // Animation de transition simple
791
+ contentAreaEl.style.opacity = 0;
792
+ setTimeout(() => {
793
+ contentAreaEl.innerHTML = htmlContent;
794
+ contentAreaEl.scrollTop = 0;
795
+ contentAreaEl.style.opacity = 1;
796
+ contentAreaEl.style.transition = 'opacity 0.3s ease';
797
+
798
+ // Fermer la sidebar sur mobile après sélection
799
+ if(window.innerWidth <= 768) {
800
+ sidebar.classList.remove('open');
801
+ }
802
+ }, 200);
803
+ }
804
+
805
+ // Afficher/Masquer la correction
806
+ function toggleSolution(index) {
807
+ const sol = document.getElementById(`sol-${index}`);
808
+ sol.classList.toggle('visible');
809
+ }
810
+
811
+ // Gestion Mobile
812
+ function toggleSidebar() {
813
+ sidebar.classList.toggle('open');
814
+ }
815
+
816
+ function closeSidebarOnMobile(e) {
817
+ if (window.innerWidth <= 768 && sidebar.classList.contains('open')) {
818
+ // Si on clique sur la zone de contenu et non sur un bouton interne
819
+ if (!e.target.closest('.sidebar') && !e.target.closest('.mobile-toggle')) {
820
+ sidebar.classList.remove('open');
821
+ }
822
+ }
823
+ }
824
+
825
+ // Lancer l'app
826
+ init();
827
+
828
+ </script>
829
+ </body>
830
+ </html>