Hugging Face's logo

Spaces:
Mousco
/
anycoder-9223fa79
Running

App Files Community
Mousco commited on
Commit
7e83dc5
·
verified ·
1 Parent(s): 13ecc54

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +916 -19
index.html CHANGED
@@ -1,19 +1,916 @@
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>Cours 1ère D - Côte d'Ivoire</title>
7
+ <!-- Importation d'une police moderne -->
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <!-- Importation des icônes FontAwesome -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ :root {
14
+ /* Palette de couleurs inspirée de l'éducation et de la modernité */
15
+ --primary-color: #0056D2; /* Bleu académique */
16
+ --secondary-color: #F77F00; /* Orange dynamique */
17
+ --accent-color: #FCBF49; /* Jaune doux */
18
+ --bg-light: #F8F9FA;
19
+ --bg-white: #FFFFFF;
20
+ --text-main: #2B2D42;
21
+ --text-light: #8D99AE;
22
+ --border-color: #E9ECEF;
23
+ --sidebar-width: 280px;
24
+ --header-height: 70px;
25
+ --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
26
+ --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
27
+ --transition: all 0.3s ease;
28
+ }
29
+
30
+ * {
31
+ margin: 0;
32
+ padding: 0;
33
+ box-sizing: border-box;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Inter', sans-serif;
38
+ background-color: var(--bg-light);
39
+ color: var(--text-main);
40
+ height: 100vh;
41
+ display: flex;
42
+ flex-direction: column;
43
+ overflow: hidden;
44
+ }
45
+
46
+ /* --- HEADER --- */
47
+ header {
48
+ height: var(--header-height);
49
+ background-color: var(--bg-white);
50
+ border-bottom: 1px solid var(--border-color);
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: space-between;
54
+ padding: 0 2rem;
55
+ position: fixed;
56
+ top: 0;
57
+ width: 100%;
58
+ z-index: 100;
59
+ box-shadow: var(--shadow-sm);
60
+ }
61
+
62
+ .brand {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 12px;
66
+ font-weight: 700;
67
+ font-size: 1.25rem;
68
+ color: var(--primary-color);
69
+ }
70
+
71
+ .brand i {
72
+ font-size: 1.5rem;
73
+ color: var(--secondary-color);
74
+ }
75
+
76
+ .header-actions {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 20px;
80
+ }
81
+
82
+ .anycoder-link {
83
+ font-size: 0.85rem;
84
+ color: var(--text-light);
85
+ text-decoration: none;
86
+ transition: var(--transition);
87
+ font-weight: 500;
88
+ }
89
+
90
+ .anycoder-link:hover {
91
+ color: var(--primary-color);
92
+ }
93
+
94
+ .mobile-menu-btn {
95
+ display: none;
96
+ background: none;
97
+ border: none;
98
+ font-size: 1.5rem;
99
+ color: var(--text-main);
100
+ cursor: pointer;
101
+ }
102
+
103
+ /* --- LAYOUT PRINCIPAL --- */
104
+ .app-container {
105
+ display: flex;
106
+ margin-top: var(--header-height);
107
+ height: calc(100vh - var(--header-height));
108
+ width: 100%;
109
+ }
110
+
111
+ /* --- SIDEBAR (MATIÈRES) --- */
112
+ aside {
113
+ width: var(--sidebar-width);
114
+ background-color: var(--bg-white);
115
+ border-right: 1px solid var(--border-color);
116
+ overflow-y: auto;
117
+ display: flex;
118
+ flex-direction: column;
119
+ transition: transform 0.3s ease-in-out;
120
+ }
121
+
122
+ .search-container {
123
+ padding: 1.5rem;
124
+ position: sticky;
125
+ top: 0;
126
+ background: var(--bg-white);
127
+ z-index: 10;
128
+ }
129
+
130
+ .search-box {
131
+ position: relative;
132
+ }
133
+
134
+ .search-box input {
135
+ width: 100%;
136
+ padding: 10px 15px 10px 40px;
137
+ border: 1px solid var(--border-color);
138
+ border-radius: 8px;
139
+ font-family: inherit;
140
+ font-size: 0.9rem;
141
+ background-color: var(--bg-light);
142
+ transition: var(--transition);
143
+ }
144
+
145
+ .search-box input:focus {
146
+ outline: none;
147
+ border-color: var(--primary-color);
148
+ background-color: var(--bg-white);
149
+ box-shadow: 0 0 0 3px rgba(0, 86, 210, 0.1);
150
+ }
151
+
152
+ .search-box i {
153
+ position: absolute;
154
+ left: 14px;
155
+ top: 50%;
156
+ transform: translateY(-50%);
157
+ color: var(--text-light);
158
+ }
159
+
160
+ .subject-list {
161
+ list-style: none;
162
+ padding: 0 1rem 2rem 1rem;
163
+ }
164
+
165
+ .subject-item {
166
+ margin-bottom: 0.5rem;
167
+ }
168
+
169
+ .subject-btn {
170
+ width: 100%;
171
+ display: flex;
172
+ align-items: center;
173
+ gap: 12px;
174
+ padding: 12px 16px;
175
+ border: none;
176
+ background: none;
177
+ border-radius: 8px;
178
+ cursor: pointer;
179
+ text-align: left;
180
+ font-size: 0.95rem;
181
+ font-weight: 500;
182
+ color: var(--text-main);
183
+ transition: var(--transition);
184
+ }
185
+
186
+ .subject-btn:hover {
187
+ background-color: var(--bg-light);
188
+ color: var(--primary-color);
189
+ }
190
+
191
+ .subject-btn.active {
192
+ background-color: rgba(0, 86, 210, 0.1);
193
+ color: var(--primary-color);
194
+ font-weight: 600;
195
+ }
196
+
197
+ .subject-icon {
198
+ width: 32px;
199
+ height: 32px;
200
+ display: flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ background-color: var(--bg-light);
204
+ border-radius: 6px;
205
+ font-size: 0.9rem;
206
+ transition: var(--transition);
207
+ }
208
+
209
+ .subject-btn.active .subject-icon {
210
+ background-color: var(--primary-color);
211
+ color: white;
212
+ }
213
+
214
+ /* --- MAIN CONTENT --- */
215
+ main {
216
+ flex: 1;
217
+ background-color: var(--bg-light);
218
+ overflow-y: auto;
219
+ padding: 2rem;
220
+ position: relative;
221
+ }
222
+
223
+ /* État vide */
224
+ .empty-state {
225
+ display: flex;
226
+ flex-direction: column;
227
+ align-items: center;
228
+ justify-content: center;
229
+ height: 100%;
230
+ color: var(--text-light);
231
+ text-align: center;
232
+ }
233
+
234
+ .empty-state i {
235
+ font-size: 4rem;
236
+ margin-bottom: 1.5rem;
237
+ color: #DEE2E6;
238
+ }
239
+
240
+ .empty-state h2 {
241
+ font-size: 1.5rem;
242
+ color: var(--text-main);
243
+ margin-bottom: 0.5rem;
244
+ }
245
+
246
+ /* Affichage des Chapitres */
247
+ .content-header {
248
+ margin-bottom: 2rem;
249
+ }
250
+
251
+ .breadcrumb {
252
+ font-size: 0.85rem;
253
+ color: var(--text-light);
254
+ margin-bottom: 0.5rem;
255
+ }
256
+
257
+ .content-title {
258
+ font-size: 2rem;
259
+ font-weight: 700;
260
+ color: var(--text-main);
261
+ }
262
+
263
+ .chapters-grid {
264
+ display: grid;
265
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
266
+ gap: 1.5rem;
267
+ }
268
+
269
+ .chapter-card {
270
+ background: var(--bg-white);
271
+ border: 1px solid var(--border-color);
272
+ border-radius: 12px;
273
+ padding: 1.5rem;
274
+ cursor: pointer;
275
+ transition: var(--transition);
276
+ display: flex;
277
+ flex-direction: column;
278
+ height: 100%;
279
+ }
280
+
281
+ .chapter-card:hover {
282
+ transform: translateY(-4px);
283
+ box-shadow: var(--shadow-md);
284
+ border-color: var(--primary-color);
285
+ }
286
+
287
+ .chapter-meta {
288
+ font-size: 0.8rem;
289
+ text-transform: uppercase;
290
+ letter-spacing: 0.5px;
291
+ color: var(--secondary-color);
292
+ font-weight: 600;
293
+ margin-bottom: 0.75rem;
294
+ }
295
+
296
+ .chapter-title {
297
+ font-size: 1.1rem;
298
+ font-weight: 600;
299
+ margin-bottom: 0.75rem;
300
+ line-height: 1.4;
301
+ }
302
+
303
+ .chapter-desc {
304
+ font-size: 0.9rem;
305
+ color: var(--text-light);
306
+ line-height: 1.5;
307
+ margin-bottom: 1.5rem;
308
+ flex-grow: 1;
309
+ }
310
+
311
+ .chapter-footer {
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: space-between;
315
+ font-size: 0.85rem;
316
+ color: var(--primary-color);
317
+ font-weight: 500;
318
+ }
319
+
320
+ /* Affichage du Cours (Lecture) */
321
+ .lesson-view {
322
+ background: var(--bg-white);
323
+ border-radius: 12px;
324
+ padding: 3rem;
325
+ box-shadow: var(--shadow-sm);
326
+ max-width: 900px;
327
+ margin: 0 auto;
328
+ animation: fadeIn 0.4s ease;
329
+ }
330
+
331
+ .lesson-header {
332
+ border-bottom: 1px solid var(--border-color);
333
+ padding-bottom: 2rem;
334
+ margin-bottom: 2rem;
335
+ }
336
+
337
+ .lesson-title {
338
+ font-size: 2.25rem;
339
+ font-weight: 800;
340
+ color: var(--text-main);
341
+ margin-bottom: 1rem;
342
+ }
343
+
344
+ .lesson-tags {
345
+ display: flex;
346
+ gap: 10px;
347
+ }
348
+
349
+ .tag {
350
+ padding: 4px 12px;
351
+ background-color: var(--bg-light);
352
+ border-radius: 20px;
353
+ font-size: 0.8rem;
354
+ color: var(--text-light);
355
+ font-weight: 500;
356
+ }
357
+
358
+ .lesson-content {
359
+ font-size: 1.1rem;
360
+ line-height: 1.8;
361
+ color: #374151;
362
+ }
363
+
364
+ .lesson-content h3 {
365
+ font-size: 1.5rem;
366
+ color: var(--text-main);
367
+ margin-top: 2.5rem;
368
+ margin-bottom: 1rem;
369
+ }
370
+
371
+ .lesson-content p {
372
+ margin-bottom: 1.5rem;
373
+ }
374
+
375
+ .lesson-content ul {
376
+ margin-bottom: 1.5rem;
377
+ padding-left: 1.5rem;
378
+ }
379
+
380
+ .lesson-content li {
381
+ margin-bottom: 0.5rem;
382
+ }
383
+
384
+ .lesson-content blockquote {
385
+ border-left: 4px solid var(--secondary-color);
386
+ padding-left: 1.5rem;
387
+ font-style: italic;
388
+ color: #555;
389
+ background: #FFF8F0;
390
+ padding: 1.5rem;
391
+ border-radius: 0 8px 8px 0;
392
+ margin: 2rem 0;
393
+ }
394
+
395
+ .back-btn {
396
+ display: inline-flex;
397
+ align-items: center;
398
+ gap: 8px;
399
+ padding: 10px 20px;
400
+ background-color: var(--bg-light);
401
+ border: 1px solid var(--border-color);
402
+ border-radius: 8px;
403
+ color: var(--text-main);
404
+ font-weight: 500;
405
+ cursor: pointer;
406
+ transition: var(--transition);
407
+ margin-bottom: 2rem;
408
+ }
409
+
410
+ .back-btn:hover {
411
+ background-color: #E9ECEF;
412
+ }
413
+
414
+ /* --- RESPONSIVE --- */
415
+ @media (max-width: 768px) {
416
+ header {
417
+ padding: 0 1rem;
418
+ }
419
+
420
+ .mobile-menu-btn {
421
+ display: block;
422
+ }
423
+
424
+ aside {
425
+ position: fixed;
426
+ left: 0;
427
+ top: var(--header-height);
428
+ height: calc(100vh - var(--header-height));
429
+ transform: translateX(-100%);
430
+ z-index: 90;
431
+ box-shadow: var(--shadow-md);
432
+ }
433
+
434
+ aside.open {
435
+ transform: translateX(0);
436
+ }
437
+
438
+ main {
439
+ padding: 1.5rem;
440
+ }
441
+
442
+ .lesson-view {
443
+ padding: 1.5rem;
444
+ }
445
+
446
+ .lesson-title {
447
+ font-size: 1.75rem;
448
+ }
449
+
450
+ .content-title {
451
+ font-size: 1.5rem;
452
+ }
453
+ }
454
+
455
+ @keyframes fadeIn {
456
+ from { opacity: 0; transform: translateY(10px); }
457
+ to { opacity: 1; transform: translateY(0); }
458
+ }
459
+
460
+ /* --- FOOTER --- */
461
+ .app-footer {
462
+ margin-top: auto;
463
+ padding-top: 3rem;
464
+ text-align: center;
465
+ font-size: 0.85rem;
466
+ color: var(--text-light);
467
+ border-top: 1px solid var(--border-color);
468
+ }
469
+ </style>
470
+ </head>
471
+ <body>
472
+
473
+ <!-- Header -->
474
+ <header>
475
+ <div class="brand">
476
+ <button class="mobile-menu-btn" id="menuToggle" aria-label="Menu">
477
+ <i class="fa-solid fa-bars"></i>
478
+ </button>
479
+ <i class="fa-solid fa-graduation-cap"></i>
480
+ <span>Première D CI</span>
481
+ </div>
482
+ <div class="header-actions">
483
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
484
+ Built with anycoder
485
+ </a>
486
+ <div style="width: 35px; height: 35px; background: #e0e0e0; border-radius: 50%; overflow: hidden;">
487
+ <img src="https://picsum.photos/seed/student/100/100" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover;">
488
+ </div>
489
+ </div>
490
+ </header>
491
+
492
+ <!-- App Container -->
493
+ <div class="app-container">
494
+
495
+ <!-- Sidebar Navigation -->
496
+ <aside id="sidebar">
497
+ <div class="search-container">
498
+ <div class="search-box">
499
+ <i class="fa-solid fa-search"></i>
500
+ <input type="text" id="searchInput" placeholder="Rechercher un cours...">
501
+ </div>
502
+ </div>
503
+ <ul class="subject-list" id="subjectList">
504
+ <!-- Les matières seront injectées ici par JS -->
505
+ </ul>
506
+ </aside>
507
+
508
+ <!-- Main Content Area -->
509
+ <main id="mainContent">
510
+ <!-- Le contenu sera injecté ici par JS -->
511
+ </main>
512
+
513
+ </div>
514
+
515
+ <script>
516
+ // --- DONNÉES PÉDAGOGIQUES (Simulation du programme 1ère D CI) ---
517
+ const curriculumData = {
518
+ mathematiques: {
519
+ title: "Mathématiques",
520
+ icon: "fa-calculator",
521
+ color: "#e74c3c",
522
+ chapters: [
523
+ {
524
+ id: "m1",
525
+ title: "Généralités sur les suites numériques",
526
+ desc: "Définitions, suites arithmétiques et géométriques, sens de variation.",
527
+ content: `
528
+ <h2>1. Définition d'une suite</h2>
529
+ <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>
530
+ <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>
531
+
532
+ <h2>2. Modes de génération d'une suite</h2>
533
+ <ul>
534
+ <li><strong>Par formule explicite :</strong> u<sub>n</sub> = f(n). Exemple : u<sub>n</sub> = 2n + 1.</li>
535
+ <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>
536
+ </ul>
537
+
538
+ <h2>3. Suites arithmétiques</h2>
539
+ <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>
540
+ <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>
541
+
542
+ <h2>4. Suites géométriques</h2>
543
+ <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>
544
+ `
545
+ },
546
+ {
547
+ id: "m2",
548
+ title: "Étude de fonctions",
549
+ desc: "Limites, continuité, dérivabilité et variations des fonctions usuelles.",
550
+ content: `
551
+ <h2>1. Limites de fonctions</h2>
552
+ <p>Soit f une fonction définie sur un intervalle contenant a ou admettant a comme borne.</p>
553
+ <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>
554
+
555
+ <h2>2. Continuité</h2>
556
+ <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>
557
+ <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>
558
+
559
+ <h2>3. Dérivabilité</h2>
560
+ <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>
561
+ `
562
+ },
563
+ {
564
+ id: "m3",
565
+ title: "Géométrie dans l'espace",
566
+ desc: "Positions relatives de droites et plans, vecteurs de l'espace, produit scalaire.",
567
+ content: `
568
+ <h2>1. Positions relatives</h2>
569
+ <ul>
570
+ <li>Droites : Parallèles, sécantes ou non coplanaires.</li>
571
+ <li>Plans : Parallèles ou sécants (l'intersection est une droite).</li>
572
+ </ul>
573
+ <h2>2. Vecteurs de l'espace</h2>
574
+ <p>Les opérations sur les vecteurs du plan s'étendent à l'espace. Repère (O, i, j, k).</p>
575
+ `
576
+ }
577
+ ]
578
+ },
579
+ physique_chimie: {
580
+ title: "Physique-Chimie",
581
+ icon: "fa-flask",
582
+ color: "#2ecc71",
583
+ chapters: [
584
+ {
585
+ id: "pc1",
586
+ title: "Chimie organique : Extraction",
587
+ desc: "Principes de l'extraction, hydrodistillation et chromatographie.",
588
+ content: `
589
+ <h2>1. Les techniques d'extraction</h2>
590
+ <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>
591
+ <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>
592
+
593
+ <h2>2. L'hydrodistillation</h2>
594
+ <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>
595
+ `
596
+ },
597
+ {
598
+ id: "pc2",
599
+ title: "Électricité : Dipôle RC",
600
+ desc: "Charge et décharge d'un condensateur, énergie emmagasinée.",
601
+ content: `
602
+ <h2>1. Le condensateur</h2>
603
+ <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>
604
+
605
+ <h2>2. Charge d'un condensateur</h2>
606
+ <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>
607
+ <p style="text-align:center; font-family:serif; font-size:1.2em;">u<sub>c</sub>(t) = E(1 - e<sup>-t/τ</sup>)</p>
608
+ <p>Où τ = RC est la constante de temps du dipôle.</p>
609
+ `
610
+ }
611
+ ]
612
+ },
613
+ svt: {
614
+ title: "SVT",
615
+ icon: "fa-dna",
616
+ color: "#9b59b6",
617
+ chapters: [
618
+ {
619
+ id: "svt1",
620
+ title: "La digestion chez l'homme",
621
+ desc: "Les enzymes digestives, l'absorption intestinale et l'assimilation.",
622
+ content: `
623
+ <h2>1. Transformation des aliments</h2>
624
+ <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>
625
+ <ul>
626
+ <li>Glucides → Oses (ex: Amidon → Glucose)</li>
627
+ <li>Protéines → Acides aminés</li>
628
+ <li>Lipides → Acides gras et Glycérol</li>
629
+ </ul>
630
+ <h2>2. Absorption intestinale</h2>
631
+ <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>
632
+ `
633
+ },
634
+ {
635
+ id: "svt2",
636
+ title: "La transmission de la vie chez l'homme",
637
+ desc: "Le fonctionnement des appareils reproducteurs et le contrôle hormonal.",
638
+ content: `
639
+ <h2>1. L'appareil reproducteur masculin</h2>
640
+ <p>Les testicules produisent les spermatozoïdes et la testostérone. L'éjaculation libère des millions de spermatozoïdes.</p>
641
+
642
+ <h2>2. L'appareil reproducteur féminin</h2>
643
+ <p>Les ovaires produisent les ovules et les œstrogènes/progestérone. Le cycle utérin dure environ 28 jours.</p>
644
+
645
+ <h2>3. La fécondation</h2>
646
+ <p>Rencontre de l'ovule et du spermatozoïde dans la trompe (ampoule tubaire), aboutissant à la formation d'un œuf diploïde.</p>
647
+ `
648
+ }
649
+ ]
650
+ },
651
+ francais: {
652
+ title: "Français",
653
+ icon: "fa-book-open",
654
+ color: "#f39c12",
655
+ chapters: [
656
+ {
657
+ id: "fr1",
658
+ title: "L'argumentation",
659
+ desc: "Convaincre, persuader et délibérer. Analyse d'essais et discours.",
660
+ content: `
661
+ <h2>1. Les buts de l'argumentation</h2>
662
+ <ul>
663
+ <li><strong>Convaincre :</strong> Faire appel à la raison (logos), utilisant des arguments rationnels.</li>
664
+ <li><strong>Persuader :</strong> Faire appel aux sentiments (pathos), cherchant à toucher l'émotion.</li>
665
+ <li><strong>Délibérer :</strong> Peser le pour et le contre pour prendre une décision.</li>
666
+ </ul>
667
+ <h2>2. Les types d'arguments</h2>
668
+ <p>On distingue l'argument d'autorité, l'argument par l'exemple, l'ad hominem, le causal, etc.</p>
669
+ `
670
+ },
671
+ {
672
+ id: "fr2",
673
+ title: "Le théâtre",
674
+ desc: "Le texte théâtral, la double énonciation et la représentation.",
675
+ content: `
676
+ <h2>1. Spécificités du texte de théâtre</h2>
677
+ <p>Le texte théâtral est destiné à être joué. Il comprend des didascalies (indications scéniques) et des répliques.</p>
678
+ <h2>2. La double énonciation</h2>
679
+ <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>
680
+ `
681
+ }
682
+ ]
683
+ },
684
+ histoire_geo: {
685
+ title: "Histoire-Géo",
686
+ icon: "fa-globe-africa",
687
+ color: "#34495e",
688
+ chapters: [
689
+ {
690
+ id: "hg1",
691
+ title: "La Première Guerre Mondiale",
692
+ desc: "Les causes, les grandes phases et les conséquences du conflit.",
693
+ content: `
694
+ <h2>1. Les causes de la guerre</h2>
695
+ <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>
696
+ <h2>2. Une guerre totale</h2>
697
+ <p>Mobilisation de toutes les ressources : économie de guerre, propagande, et implication des civils.</p>
698
+ `
699
+ },
700
+ {
701
+ id: "hg2",
702
+ title: "L'Afrique : défis et développement",
703
+ desc: "Démographie, urbanisation et enjeux économiques du continent africain.",
704
+ content: `
705
+ <h2>1. La transition démographique</h2>
706
+ <p>L'Afrique connaît une forte croissance démographique, entraînant une population très jeune.</p>
707
+ <h2>2. L'urbanisation rapide</h2>
708
+ <p>Les villes africaines grossissent vite, posant des défis d'infrastructures (eau, électricité) mais offrant des opportunités économiques.</p>
709
+ `
710
+ }
711
+ ]
712
+ },
713
+ philosophie: {
714
+ title: "Philosophie",
715
+ icon: "fa-lightbulb",
716
+ color: "#d35400",
717
+ chapters: [
718
+ {
719
+ id: "ph1",
720
+ title: "La conscience",
721
+ desc: "La conscience de soi, l'inconscient et l'identité personnelle.",
722
+ content: `
723
+ <h2>1. Qu'est-ce que la conscience ?</h2>
724
+ <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>
725
+ <h2>2. Conscience et Inconscient</h2>
726
+ <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>
727
+ `
728
+ }
729
+ ]
730
+ },
731
+ anglais: {
732
+ title: "Anglais",
733
+ icon: "fa-language",
734
+ color: "#16a085",
735
+ chapters: [
736
+ {
737
+ id: "en1",
738
+ title: "Communication Skills",
739
+ desc: "Expressing opinions, agreeing and disagreeing in debates.",
740
+ content: `
741
+ <h2>1. Useful phrases for opinions</h2>
742
+ <ul>
743
+ <li>"In my opinion..."</li>
744
+ <li>"I strongly believe that..."</li>
745
+ <li>"From my point of view..."</li>
746
+ </ul>
747
+ <h2>2. Agreeing and Disagreeing</h2>
748
+ <p>"I couldn't agree more" (strong agreement).<br>"I see your point, but..." (polite disagreement).</p>
749
+ `
750
+ }
751
+ ]
752
+ }
753
+ };
754
+
755
+ // --- ÉLÉMENTS DU DOM ---
756
+ const subjectListEl = document.getElementById('subjectList');
757
+ const mainContentEl = document.getElementById('mainContent');
758
+ const searchInput = document.getElementById('searchInput');
759
+ const menuToggle = document.getElementById('menuToggle');
760
+ const sidebar = document.getElementById('sidebar');
761
+
762
+ // --- ÉTAT DE L'APPLICATION ---
763
+ let currentSubject = null;
764
+
765
+ // --- FONCTIONS ---
766
+
767
+ // 1. Initialisation
768
+ function init() {
769
+ renderSubjects();
770
+ renderEmptyState();
771
+
772
+ // Event Listeners
773
+ searchInput.addEventListener('input', handleSearch);
774
+ menuToggle.addEventListener('click', () => {
775
+ sidebar.classList.toggle('open');
776
+ });
777
+
778
+ // Fermer la sidebar si on clique en dehors sur mobile
779
+ mainContentEl.addEventListener('click', () => {
780
+ if(window.innerWidth <= 768) {
781
+ sidebar.classList.remove('open');
782
+ }
783
+ });
784
+ }
785
+
786
+ // 2. Rendu de la liste des matières
787
+ function renderSubjects(filter = "") {
788
+ subjectListEl.innerHTML = "";
789
+
790
+ Object.keys(curriculumData).forEach(key => {
791
+ const subject = curriculumData[key];
792
+
793
+ // Filtrage par recherche
794
+ if (filter && !subject.title.toLowerCase().includes(filter.toLowerCase())) {
795
+ return;
796
+ }
797
+
798
+ const li = document.createElement('li');
799
+ li.className = 'subject-item';
800
+
801
+ const btn = document.createElement('button');
802
+ btn.className = `subject-btn ${currentSubject === key ? 'active' : ''}`;
803
+ btn.onclick = () => selectSubject(key);
804
+
805
+ btn.innerHTML = `
806
+ <div class="subject-icon" style="color: ${currentSubject === key ? 'white' : subject.color}">
807
+ <i class="fa-solid ${subject.icon}"></i>
808
+ </div>
809
+ <span>${subject.title}</span>
810
+ `;
811
+
812
+ li.appendChild(btn);
813
+ subjectListEl.appendChild(li);
814
+ });
815
+ }
816
+
817
+ // 3. Sélection d'une matière
818
+ function selectSubject(subjectKey) {
819
+ currentSubject = subjectKey;
820
+ renderSubjects(searchInput.value); // Re-render pour mettre à jour la classe active
821
+ renderChapterList(subjectKey);
822
+
823
+ // Sur mobile, fermer le menu après sélection
824
+ if(window.innerWidth <= 768) {
825
+ sidebar.classList.remove('open');
826
+ }
827
+ }
828
+
829
+ // 4. Rendu de la liste des chapitres (Vue principale)
830
+ function renderChapterList(subjectKey) {
831
+ const subject = curriculumData[subjectKey];
832
+ const chapters = subject.chapters;
833
+
834
+ let html = `
835
+ <div class="content-header">
836
+ <div class="breadcrumb">Accueil > ${subject.title}</div>
837
+ <h1 class="content-title">${subject.title}</h1>
838
+ </div>
839
+ <div class="chapters-grid">
840
+ `;
841
+
842
+ chapters.forEach(chapter => {
843
+ html += `
844
+ <div class="chapter-card" onclick="renderLesson('${subjectKey}', '${chapter.id}')">
845
+ <div class="chapter-meta">Chapitre ${chapter.id.replace(/\D/g, '')}</div>
846
+ <h3 class="chapter-title">${chapter.title}</h3>
847
+ <p class="chapter-desc">${chapter.desc}</p>
848
+ <div class="chapter-footer">
849
+ <span>Voir le cours</span>
850
+ <i class="fa-solid fa-arrow-right"></i>
851
+ </div>
852
+ </div>
853
+ `;
854
+ });
855
+
856
+ html += `</div>`;
857
+ mainContentEl.innerHTML = html;
858
+ }
859
+
860
+ // 5. Rendu du détail d'une leçon
861
+ window.renderLesson = function(subjectKey, chapterId) {
862
+ const subject = curriculumData[subjectKey];
863
+ const chapter = subject.chapters.find(c => c.id === chapterId);
864
+
865
+ if (!chapter) return;
866
+
867
+ const html = `
868
+ <button class="back-btn" onclick="selectSubject('${subjectKey}')">
869
+ <i class="fa-solid fa-arrow-left"></i> Retour aux chapitres
870
+ </button>
871
+ <div class="lesson-view">
872
+ <div class="lesson-header">
873
+ <div class="lesson-tags">
874
+ <span class="tag">${subject.title}</span>
875
+ <span class="tag">1ère D</span>
876
+ </div>
877
+ <h1 class="lesson-title">${chapter.title}</h1>
878
+ </div>
879
+ <div class="lesson-content">
880
+ ${chapter.content}
881
+ </div>
882
+ </div>
883
+ <div class="app-footer">
884
+ <p>&copy; 2023-2024 Cours Première D Côte d'Ivoire</p>
885
+ </div>
886
+ `;
887
+
888
+ mainContentEl.innerHTML = html;
889
+ // Scroll to top
890
+ mainContentEl.scrollTop = 0;
891
+ };
892
+
893
+ // 6. État vide
894
+ function renderEmptyState() {
895
+ mainContentEl.innerHTML = `
896
+ <div class="empty-state">
897
+ <i class="fa-solid fa-book-open-reader"></i>
898
+ <h2>Bienvenue sur votre plateforme de cours</h2>
899
+ <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>
900
+ <p style="margin-top: 10px; font-size: 0.9rem;">Programme officiel - Côte d'Ivoire</p>
901
+ </div>
902
+ `;
903
+ }
904
+
905
+ // 7. Gestion de la recherche
906
+ function handleSearch(e) {
907
+ const term = e.target.value;
908
+ renderSubjects(term);
909
+ }
910
+
911
+ // Lancer l'application
912
+ init();
913
+
914
+ </script>
915
+ </body>
916
+ </html>