Hugging Face's logo

Spaces:
OUAREDAEK
/
Injaz
Runtime error

App Files Community
OUAREDAEK commited on
Commit
4056056
·
verified ·
1 Parent(s): 00b9df5

Upload templates/index-old8.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. templates/index-old8.html +1207 -0
templates/index-old8.html ADDED
@@ -0,0 +1,1207 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>PerseverAI - Compagnon Pédagogique</title>
7
+
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <style>
12
+ :root {
13
+ --primary: #2563eb;
14
+ --primary-dark: #1d4ed8;
15
+ --secondary: #475569;
16
+ --success: #16a34a;
17
+ --warning: #d97706;
18
+ --danger: #dc2626;
19
+ --info: #0891b2;
20
+ --purple: #7c3aed;
21
+ --gray-50: #f8fafc;
22
+ --gray-100: #f1f5f9;
23
+ --gray-200: #e2e8f0;
24
+ --gray-600: #475569;
25
+ --gray-800: #1e293b;
26
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
27
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ * { margin: 0; padding: 0; box-sizing: border-box; }
31
+
32
+ body {
33
+ font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
34
+ background: var(--gray-50);
35
+ color: var(--gray-800);
36
+ line-height: 1.5;
37
+ }
38
+
39
+ .container { max-width: 1400px; margin: 0 auto; padding: 24px; }
40
+
41
+ .header {
42
+ background: white;
43
+ border-radius: 12px;
44
+ padding: 24px 32px;
45
+ margin-bottom: 24px;
46
+ box-shadow: var(--shadow-sm);
47
+ border: 1px solid var(--gray-200);
48
+ }
49
+
50
+ .header h1 { font-size: 1.75rem; font-weight: 600; color: var(--gray-800); margin-bottom: 8px; }
51
+ .header p { color: var(--gray-600); font-size: 0.9rem; }
52
+ .badge { display: inline-block; background: var(--gray-100); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; color: var(--gray-600); margin-top: 12px; }
53
+
54
+ .nav-tabs {
55
+ display: flex;
56
+ background: white;
57
+ border-radius: 12px;
58
+ border: 1px solid var(--gray-200);
59
+ overflow-x: auto;
60
+ margin-bottom: 24px;
61
+ }
62
+
63
+ .nav-tab {
64
+ padding: 14px 20px;
65
+ background: transparent;
66
+ border: none;
67
+ font-size: 0.9rem;
68
+ font-weight: 500;
69
+ color: var(--gray-600);
70
+ cursor: pointer;
71
+ transition: all 0.2s;
72
+ white-space: nowrap;
73
+ border-bottom: 2px solid transparent;
74
+ }
75
+
76
+ .nav-tab:hover { color: var(--primary); background: var(--gray-50); }
77
+ .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
78
+
79
+ .card {
80
+ background: white;
81
+ border-radius: 12px;
82
+ border: 1px solid var(--gray-200);
83
+ padding: 24px;
84
+ margin-bottom: 24px;
85
+ }
86
+
87
+ .card-header {
88
+ display: flex;
89
+ justify-content: space-between;
90
+ align-items: center;
91
+ margin-bottom: 20px;
92
+ padding-bottom: 16px;
93
+ border-bottom: 1px solid var(--gray-200);
94
+ flex-wrap: wrap;
95
+ gap: 12px;
96
+ }
97
+
98
+ .card-header h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-800); }
99
+
100
+ .form-group { margin-bottom: 20px; }
101
+ .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--gray-600); margin-bottom: 8px; }
102
+ .form-control {
103
+ width: 100%;
104
+ padding: 10px 14px;
105
+ border: 1px solid var(--gray-200);
106
+ border-radius: 8px;
107
+ font-size: 0.9rem;
108
+ transition: all 0.2s;
109
+ }
110
+ .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
111
+ .form-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
112
+ .form-col { flex: 1; min-width: 200px; }
113
+
114
+ .btn {
115
+ padding: 10px 18px;
116
+ border-radius: 8px;
117
+ font-size: 0.85rem;
118
+ font-weight: 500;
119
+ cursor: pointer;
120
+ transition: all 0.2s;
121
+ border: none;
122
+ }
123
+ .btn-primary { background: var(--primary); color: white; }
124
+ .btn-primary:hover { background: var(--primary-dark); }
125
+ .btn-secondary { background: white; border: 1px solid var(--gray-200); color: var(--gray-600); }
126
+ .btn-secondary:hover { background: var(--gray-50); }
127
+ .btn-large { padding: 12px 24px; font-size: 0.9rem; }
128
+
129
+ /* Planning Stats Cards */
130
+ .planning-stats {
131
+ display: grid;
132
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
133
+ gap: 16px;
134
+ margin-bottom: 28px;
135
+ background: var(--gray-50);
136
+ border-radius: 16px;
137
+ padding: 20px;
138
+ }
139
+ .planning-stat-item {
140
+ text-align: center;
141
+ background: white;
142
+ padding: 16px;
143
+ border-radius: 12px;
144
+ border: 1px solid var(--gray-200);
145
+ }
146
+ .planning-stat-number {
147
+ font-size: 2rem;
148
+ font-weight: 700;
149
+ color: var(--primary);
150
+ }
151
+ .planning-stat-label {
152
+ font-size: 0.75rem;
153
+ color: var(--gray-600);
154
+ margin-top: 4px;
155
+ }
156
+
157
+ /* Planning Table */
158
+ .planning-sessions-table {
159
+ width: 100%;
160
+ border-collapse: collapse;
161
+ margin-top: 20px;
162
+ }
163
+ .planning-sessions-table th {
164
+ text-align: left;
165
+ padding: 14px 12px;
166
+ background: var(--gray-50);
167
+ border-bottom: 2px solid var(--gray-200);
168
+ font-weight: 600;
169
+ font-size: 0.8rem;
170
+ color: var(--gray-600);
171
+ }
172
+ .planning-sessions-table td {
173
+ padding: 16px 12px;
174
+ border-bottom: 1px solid var(--gray-200);
175
+ vertical-align: top;
176
+ }
177
+ .session-type-badge {
178
+ display: inline-block;
179
+ padding: 4px 10px;
180
+ border-radius: 20px;
181
+ font-size: 0.7rem;
182
+ font-weight: 500;
183
+ }
184
+ .type-apprentissage { background: #dbeafe; color: #1e40af; }
185
+ .type-consolidation { background: #dcfce7; color: #166534; }
186
+ .type-maintien { background: #fef3c7; color: #92400e; }
187
+
188
+ .retention-slider {
189
+ width: 100%;
190
+ margin: 15px 0;
191
+ }
192
+ .retention-slider input {
193
+ width: 100%;
194
+ cursor: pointer;
195
+ accent-color: var(--primary);
196
+ }
197
+ .retention-labels {
198
+ display: flex;
199
+ justify-content: space-between;
200
+ font-size: 0.7rem;
201
+ color: var(--gray-600);
202
+ margin-top: 5px;
203
+ }
204
+
205
+ .time-slots-group {
206
+ display: flex;
207
+ flex-wrap: wrap;
208
+ gap: 12px;
209
+ margin-top: 8px;
210
+ }
211
+ .time-slot-checkbox {
212
+ display: flex;
213
+ align-items: center;
214
+ gap: 6px;
215
+ background: var(--gray-50);
216
+ padding: 6px 12px;
217
+ border-radius: 20px;
218
+ border: 1px solid var(--gray-200);
219
+ cursor: pointer;
220
+ }
221
+ .radio-group {
222
+ display: flex;
223
+ gap: 20px;
224
+ margin-top: 8px;
225
+ }
226
+ .radio-option {
227
+ display: flex;
228
+ align-items: center;
229
+ gap: 8px;
230
+ cursor: pointer;
231
+ }
232
+
233
+ .notifications-table {
234
+ width: 100%;
235
+ border-collapse: collapse;
236
+ font-size: 0.85rem;
237
+ }
238
+ .notifications-table th {
239
+ text-align: left;
240
+ padding: 12px 8px;
241
+ background: var(--gray-50);
242
+ border-bottom: 2px solid var(--gray-200);
243
+ font-weight: 600;
244
+ }
245
+ .notifications-table td {
246
+ padding: 12px 8px;
247
+ border-bottom: 1px solid var(--gray-200);
248
+ }
249
+
250
+ .priority-high { color: var(--danger); font-weight: 600; }
251
+ .priority-medium { color: var(--warning); font-weight: 600; }
252
+ .priority-low { color: var(--success); font-weight: 600; }
253
+
254
+ .status-badge {
255
+ display: inline-block;
256
+ padding: 4px 10px;
257
+ border-radius: 20px;
258
+ font-size: 0.7rem;
259
+ font-weight: 500;
260
+ }
261
+ .status-pending { background: #fef3c7; color: #92400e; }
262
+ .status-accepted { background: #dcfce7; color: #166534; }
263
+
264
+ .action-cell {
265
+ display: flex;
266
+ flex-wrap: wrap;
267
+ gap: 6px;
268
+ }
269
+ .action-icon-btn {
270
+ background: transparent;
271
+ border: none;
272
+ cursor: pointer;
273
+ padding: 6px 10px;
274
+ border-radius: 20px;
275
+ font-size: 0.7rem;
276
+ font-weight: 500;
277
+ transition: all 0.2s;
278
+ }
279
+ .action-accept { background: #dcfce7; color: #166534; }
280
+ .action-reject { background: #fee2e2; color: #991b1b; }
281
+ .action-hold { background: #e0f2fe; color: #075985; }
282
+ .action-help { background: #fed7aa; color: #9a3412; }
283
+
284
+ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
285
+ .stat-card { background: white; border: 1px solid var(--gray-200); border-radius: 8px; padding: 16px; text-align: center; }
286
+ .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--primary); }
287
+
288
+ .tab-content { display: none; }
289
+ .tab-content.active { display: block; }
290
+
291
+ /* Spaced Repetition Curve */
292
+ .spaced-repetition-container {
293
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
294
+ border-radius: 16px;
295
+ padding: 20px;
296
+ margin-top: 20px;
297
+ }
298
+ .curve-legend {
299
+ display: flex;
300
+ justify-content: center;
301
+ gap: 24px;
302
+ margin-bottom: 16px;
303
+ font-size: 0.75rem;
304
+ }
305
+ .legend-item {
306
+ display: flex;
307
+ align-items: center;
308
+ gap: 8px;
309
+ }
310
+ .legend-color {
311
+ width: 20px;
312
+ height: 3px;
313
+ border-radius: 2px;
314
+ }
315
+ .legend-color.square {
316
+ width: 12px;
317
+ height: 12px;
318
+ border-radius: 50%;
319
+ }
320
+
321
+ @media (max-width: 768px) {
322
+ .container { padding: 16px; }
323
+ .planning-sessions-table { font-size: 0.7rem; }
324
+ .planning-sessions-table td, .planning-sessions-table th { padding: 8px 6px; }
325
+ }
326
+
327
+ .session-detail-line { font-size: 0.75rem; color: var(--gray-600); margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
328
+ .export-btn { background: white; border: 1px solid var(--gray-200); padding: 8px 16px; border-radius: 8px; cursor: pointer; }
329
+ .export-btn:hover { background: var(--gray-50); }
330
+
331
+ /* Profile specific styles */
332
+ .profile-progress {
333
+ background: var(--gray-100);
334
+ border-radius: 12px;
335
+ padding: 16px;
336
+ margin-bottom: 24px;
337
+ }
338
+ .progress-bar-container {
339
+ background: var(--gray-200);
340
+ border-radius: 20px;
341
+ height: 10px;
342
+ margin: 12px 0;
343
+ overflow: hidden;
344
+ }
345
+ .progress-bar-fill {
346
+ background: var(--primary);
347
+ width: 0%;
348
+ height: 100%;
349
+ border-radius: 20px;
350
+ transition: width 0.3s ease;
351
+ }
352
+ .big5-rating {
353
+ display: flex;
354
+ gap: 8px;
355
+ margin-top: 8px;
356
+ flex-wrap: wrap;
357
+ }
358
+ .rating-btn {
359
+ width: 40px;
360
+ height: 40px;
361
+ border-radius: 40px;
362
+ border: 1px solid var(--gray-200);
363
+ background: white;
364
+ cursor: pointer;
365
+ font-weight: 600;
366
+ transition: all 0.2s;
367
+ }
368
+ .rating-btn:hover { background: var(--gray-100); }
369
+ .rating-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
370
+ .motivation-rating {
371
+ display: flex;
372
+ gap: 8px;
373
+ margin-top: 8px;
374
+ flex-wrap: wrap;
375
+ }
376
+ .profile-recommendations {
377
+ background: #fefce8;
378
+ border-left: 4px solid var(--warning);
379
+ padding: 16px;
380
+ border-radius: 12px;
381
+ margin-top: 20px;
382
+ }
383
+ .profile-summary-cards {
384
+ display: grid;
385
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
386
+ gap: 16px;
387
+ margin-bottom: 24px;
388
+ }
389
+ .profile-mini-card {
390
+ background: var(--gray-50);
391
+ border-radius: 12px;
392
+ padding: 16px;
393
+ text-align: center;
394
+ }
395
+ .profile-mini-card h4 { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 8px; }
396
+ .profile-mini-card .value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
397
+ .flex-between { display: flex; justify-content: space-between; align-items: center; }
398
+
399
+ /* DASHBOARD PROFESSIONNEL : HEATMAP REDUITE & COURBE SYMÉTRIQUE */
400
+ .heatmap-container {
401
+ background: white;
402
+ border-radius: 16px;
403
+ padding: 18px 20px;
404
+ margin-bottom: 28px;
405
+ border: 1px solid var(--gray-200);
406
+ }
407
+ .heatmap-grid {
408
+ display: grid;
409
+ grid-template-columns: repeat(7, 1fr);
410
+ gap: 5px;
411
+ margin: 16px 0 12px 0;
412
+ }
413
+ .heatmap-day {
414
+ text-align: center;
415
+ font-size: 0.65rem;
416
+ font-weight: 600;
417
+ color: var(--gray-600);
418
+ margin-bottom: 6px;
419
+ }
420
+ .heatmap-cell {
421
+ aspect-ratio: 1 / 1;
422
+ border-radius: 5px;
423
+ transition: all 0.15s ease;
424
+ background-color: #eef2f6;
425
+ cursor: default;
426
+ }
427
+ .heatmap-cell.level-0 { background-color: #f1f5f9; }
428
+ .heatmap-cell.level-1 { background-color: #e2e8f0; }
429
+ .heatmap-cell.level-2 { background-color: #cbd5e1; }
430
+ .heatmap-cell.level-3 { background-color: #94a3b8; }
431
+ .heatmap-cell.level-4 { background-color: #475569; }
432
+
433
+ .legend-heatmap {
434
+ display: flex;
435
+ justify-content: center;
436
+ gap: 20px;
437
+ margin-top: 12px;
438
+ flex-wrap: wrap;
439
+ }
440
+ .legend-heatmap-item {
441
+ display: flex;
442
+ align-items: center;
443
+ gap: 6px;
444
+ font-size: 0.7rem;
445
+ color: var(--gray-600);
446
+ }
447
+ .legend-color-box {
448
+ width: 20px;
449
+ height: 20px;
450
+ border-radius: 4px;
451
+ }
452
+
453
+ /* Courbe symétrique inspirée du heatmap : design élégant */
454
+ .symmetry-curve-card {
455
+ background: white;
456
+ border-radius: 16px;
457
+ padding: 18px 20px;
458
+ margin-bottom: 28px;
459
+ border: 1px solid var(--gray-200);
460
+ }
461
+ .curve-header {
462
+ display: flex;
463
+ justify-content: space-between;
464
+ align-items: baseline;
465
+ flex-wrap: wrap;
466
+ margin-bottom: 16px;
467
+ }
468
+ .curve-header h4 {
469
+ font-weight: 600;
470
+ font-size: 0.9rem;
471
+ color: var(--gray-800);
472
+ }
473
+ .curve-legend-mini {
474
+ display: flex;
475
+ gap: 16px;
476
+ font-size: 0.7rem;
477
+ }
478
+ .symmetry-canvas {
479
+ max-height: 210px;
480
+ width: 100%;
481
+ background: #ffffff;
482
+ border-radius: 12px;
483
+ }
484
+
485
+ /* Indicateurs modernes */
486
+ .indicator-grid {
487
+ display: grid;
488
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
489
+ gap: 20px;
490
+ margin-bottom: 0;
491
+ }
492
+ .indicator-card {
493
+ background: white;
494
+ border-radius: 16px;
495
+ padding: 20px 18px;
496
+ border: 1px solid var(--gray-200);
497
+ transition: box-shadow 0.2s;
498
+ box-shadow: var(--shadow-sm);
499
+ text-align: center;
500
+ }
501
+ .indicator-card:hover {
502
+ box-shadow: var(--shadow-md);
503
+ }
504
+ .indicator-header {
505
+ display: flex;
506
+ align-items: center;
507
+ gap: 12px;
508
+ margin-bottom: 16px;
509
+ justify-content: center;
510
+ }
511
+ .indicator-icon {
512
+ font-size: 1.6rem;
513
+ color: var(--primary);
514
+ background: #eff6ff;
515
+ width: 44px;
516
+ height: 44px;
517
+ display: flex;
518
+ align-items: center;
519
+ justify-content: center;
520
+ border-radius: 44px;
521
+ }
522
+ .indicator-title {
523
+ font-weight: 600;
524
+ font-size: 0.9rem;
525
+ color: var(--gray-800);
526
+ letter-spacing: -0.2px;
527
+ }
528
+
529
+ /* Styles pour les jauges circulaires */
530
+ .circular-progress {
531
+ position: relative;
532
+ width: 140px;
533
+ height: 140px;
534
+ margin: 0 auto 15px;
535
+ }
536
+ .circular-progress svg {
537
+ width: 140px;
538
+ height: 140px;
539
+ transform: rotate(-90deg);
540
+ }
541
+ .circular-progress circle {
542
+ fill: none;
543
+ stroke-width: 10;
544
+ stroke-linecap: round;
545
+ }
546
+ .circular-progress .bg-circle {
547
+ stroke: var(--gray-200);
548
+ }
549
+ .circular-progress .progress-circle {
550
+ stroke: var(--primary);
551
+ stroke-dasharray: 377;
552
+ stroke-dashoffset: 377;
553
+ transition: stroke-dashoffset 0.8s ease;
554
+ }
555
+ .circular-progress .progress-percent {
556
+ position: absolute;
557
+ top: 50%;
558
+ left: 50%;
559
+ transform: translate(-50%, -50%);
560
+ font-size: 1.8rem;
561
+ font-weight: 700;
562
+ color: var(--gray-800);
563
+ }
564
+ .circular-progress .progress-label {
565
+ position: absolute;
566
+ bottom: -5px;
567
+ left: 50%;
568
+ transform: translateX(-50%);
569
+ font-size: 0.7rem;
570
+ color: var(--gray-600);
571
+ white-space: nowrap;
572
+ }
573
+
574
+ .indicator-value {
575
+ font-size: 0.9rem;
576
+ font-weight: 600;
577
+ color: var(--gray-700);
578
+ margin-top: 8px;
579
+ }
580
+ .indicator-sub {
581
+ font-size: 0.75rem;
582
+ color: var(--gray-600);
583
+ border-top: 1px solid var(--gray-100);
584
+ margin-top: 12px;
585
+ padding-top: 12px;
586
+ }
587
+ .effort-badge-modern {
588
+ display: inline-block;
589
+ background: #f1f5f9;
590
+ padding: 6px 14px;
591
+ border-radius: 40px;
592
+ font-size: 0.8rem;
593
+ font-weight: 500;
594
+ color: #1e293b;
595
+ }
596
+ .persistence-tag {
597
+ background: #dcfce7;
598
+ color: #166534;
599
+ padding: 4px 12px;
600
+ border-radius: 40px;
601
+ font-size: 0.75rem;
602
+ font-weight: 600;
603
+ display: inline-block;
604
+ }
605
+ .dashboard-view-toggle {
606
+ display: flex;
607
+ gap: 12px;
608
+ margin-bottom: 24px;
609
+ }
610
+ .view-btn {
611
+ padding: 8px 18px;
612
+ border-radius: 40px;
613
+ background: white;
614
+ border: 1px solid var(--gray-200);
615
+ cursor: pointer;
616
+ font-weight: 500;
617
+ }
618
+ .view-btn.active {
619
+ background: var(--primary);
620
+ color: white;
621
+ border-color: var(--primary);
622
+ }
623
+
624
+ /* Journal - styles pour les sections Planifié, En Cours, Accompli */
625
+ .journal-section {
626
+ background: var(--gray-50);
627
+ border-radius: 12px;
628
+ padding: 18px;
629
+ margin-bottom: 24px;
630
+ border: 1px solid var(--gray-200);
631
+ }
632
+ .journal-section h4 {
633
+ font-size: 1rem;
634
+ font-weight: 600;
635
+ margin-bottom: 12px;
636
+ display: flex;
637
+ align-items: center;
638
+ gap: 8px;
639
+ color: var(--gray-800);
640
+ }
641
+ .journal-section textarea {
642
+ width: 100%;
643
+ border: 1px solid var(--gray-200);
644
+ border-radius: 10px;
645
+ padding: 12px;
646
+ font-family: inherit;
647
+ font-size: 0.85rem;
648
+ resize: vertical;
649
+ }
650
+ .self-rating-group {
651
+ display: flex;
652
+ gap: 12px;
653
+ align-items: center;
654
+ margin-top: 12px;
655
+ flex-wrap: wrap;
656
+ }
657
+ .self-rating-group span {
658
+ font-size: 0.85rem;
659
+ font-weight: 500;
660
+ color: var(--gray-700);
661
+ }
662
+ .rating-stars {
663
+ display: flex;
664
+ gap: 8px;
665
+ }
666
+ .star-btn {
667
+ background: white;
668
+ border: 1px solid var(--gray-200);
669
+ width: 42px;
670
+ padding: 8px 0;
671
+ border-radius: 40px;
672
+ cursor: pointer;
673
+ font-weight: 600;
674
+ transition: all 0.2s;
675
+ text-align: center;
676
+ }
677
+ .star-btn.active {
678
+ background: var(--primary);
679
+ color: white;
680
+ border-color: var(--primary);
681
+ }
682
+ .journal-entries-list {
683
+ margin-top: 24px;
684
+ border-top: 1px solid var(--gray-200);
685
+ padding-top: 20px;
686
+ }
687
+ .journal-entry-item {
688
+ background: white;
689
+ border-radius: 12px;
690
+ padding: 14px;
691
+ margin-bottom: 12px;
692
+ border: 1px solid var(--gray-200);
693
+ }
694
+ .journal-entry-date {
695
+ font-size: 0.7rem;
696
+ color: var(--gray-500);
697
+ margin-bottom: 8px;
698
+ }
699
+ .journal-entry-content {
700
+ display: flex;
701
+ flex-wrap: wrap;
702
+ gap: 12px;
703
+ margin-top: 6px;
704
+ }
705
+ .journal-badge {
706
+ background: var(--gray-100);
707
+ padding: 2px 10px;
708
+ border-radius: 20px;
709
+ font-size: 0.7rem;
710
+ }
711
+ </style>
712
+ </head>
713
+ <body>
714
+ <div class="container">
715
+ <header class="header">
716
+ <h1>PerseverAI </h1>
717
+ <p>Compagnon SRL – Apprendre à manager l'effort et maintenir la persistance</p>
718
+ <div class="badge">PerseverAI: AI · Aid · Perseverance </div>
719
+ </header>
720
+
721
+ <nav class="nav-tabs">
722
+ <button class="nav-tab" onclick="showTab('profile')">Profil</button>
723
+ <button class="nav-tab" onclick="showTab('objectif')">Objectif</button>
724
+ <button class="nav-tab" onclick="showTab('planner')">Planning</button>
725
+ <button class="nav-tab" onclick="showTab('dashboard')">Mon Dashboard</button>
726
+ <button class="nav-tab" onclick="showTab('journal')">Mon Journal</button>
727
+ <button class="nav-tab" onclick="showTab('notifications')">Notifications IA</button>
728
+ </nav>
729
+
730
+ <!-- PROFIL -->
731
+ <section id="profile" class="tab-content">
732
+ <div class="card">
733
+ <div class="card-header"><h3>Profil d'Apprentissage Personnalisé</h3><div><button class="btn btn-secondary" onclick="autoFillProfile()">Remplir automatiquement</button><button class="btn btn-secondary" onclick="saveProfileData()">Sauvegarder</button></div></div>
734
+ <div class="profile-progress"><div class="flex-between"><span><strong>Complétion du Profil</strong></span><span id="profileCompletionPercent">40%</span></div><div class="progress-bar-container"><div class="progress-bar-fill" id="profileProgressFill" style="width: 40%;"></div></div><div class="flex-between"><span>Questionnaires complétés: <span id="completedCount">2</span>/5</span><span>Profil personnalisé: <span id="profileLevel">Intermédiaire</span></span></div></div>
735
+ <div class="card" style="margin-bottom:20px;padding:20px;"><h4 style="margin-bottom:16px;">Profil de Personnalité (Big Five Traits)</h4><p style="font-size:0.8rem;color:var(--gray-600);margin-bottom:20px;">Évaluez vos traits de personnalité sur une échelle de 1 à 5</p>
736
+ <div class="form-group"><label class="form-label">Je suis quelqu'un de sociable, extraverti, énergique</label><div class="big5-rating" data-trait="extraversion"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
737
+ <div class="form-group"><label class="form-label">Je fais preuve de curiosité intellectuelle, j'aime les nouvelles expériences</label><div class="big5-rating" data-trait="openness"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
738
+ <div class="form-group"><label class="form-label">Je suis organisé, fiable, je respecte mes engagements</label><div class="big5-rating" data-trait="conscientiousness"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
739
+ <div class="form-group"><label class="form-label">Je suis coopératif, serviable, empathique</label><div class="big5-rating" data-trait="agreeableness"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
740
+ <div class="form-group"><label class="form-label">Je ressens facilement de l'anxiété, du stress, de la nervosité</label><div class="big5-rating" data-trait="neuroticism"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
741
+ <div style="margin-top:16px;font-size:0.8rem;background:var(--gray-50);padding:12px;border-radius:8px;">Section complétée - Score neuroticisme: <span id="neuroticismScore">4.0</span> (qualité du sommeil importante)</div>
742
+ </div>
743
+ <div class="card" style="margin-bottom:20px;padding:20px;"><h4 style="margin-bottom:16px;">Profil Motivationnel</h4><p style="font-size:0.8rem;margin-bottom:20px;">Pourquoi étudiez-vous ? Sélectionnez vos principales motivations</p>
744
+ <div class="form-group"><label class="form-label">J'étudie parce que j'aime apprendre, je trouve cela intéressant et plaisant</label><div class="motivation-rating" data-motivation="intrinsic"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
745
+ <div class="form-group"><label class="form-label">J'étudie pour obtenir de bonnes notes et faire plaisir à mes parents/professeurs</label><div class="motivation-rating" data-motivation="introjected"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
746
+ <div style="margin-top:16px;font-size:0.8rem;background:var(--gray-50);padding:12px;border-radius:8px;">Section complétée - Motivation introjectée: <span id="introjectedScore">4.0</span> (pression interne modérée)</div>
747
+ </div>
748
+ <div class="profile-summary-cards"><div class="profile-mini-card"><h4>Big Five Traits</h4><div class="value" id="summaryExtraversion">3.0</div><div>Extraversion</div></div><div class="profile-mini-card"><div class="value" id="summaryOpenness">3.0</div><div>Ouverture</div></div><div class="profile-mini-card"><div class="value" id="summaryConscientiousness">4.0</div><div>Conscience</div></div><div class="profile-mini-card"><h4>Motivation</h4><div class="value" id="summaryIntrinsic">3.0</div><div>Intrinsèque</div></div><div class="profile-mini-card"><div class="value" id="summaryIntrojected">4.0</div><div>Introjectée</div></div></div>
749
+ <div class="profile-recommendations" style="background: transparent; border-left: none;"><h4>Recommandations Personnalisées</h4><div id="recommendationsContainer"><p>Qualité du sommeil: Maintenez 7-8 heures de sommeil de qualité.</p><p>Planification: Renforcez votre organisation avec des rappels.</p></div></div>
750
+ <button class="btn btn-primary btn-large" onclick="finalizeProfile()" style="width:100%;"><i class="fas fa-check-circle"></i> Finaliser et Générer le Profil Personnalisé</button>
751
+ </div>
752
+ </section>
753
+
754
+ <!-- OBJECTIF -->
755
+ <section id="objectif" class="tab-content"><div class="card"><div class="card-header"><h3>Définir mon Objectif d'Apprentissage</h3></div><div class="form-row"><div class="form-col"><label class="form-label">Compétence Cible</label><select id="competence" class="form-control"></select></div><div class="form-col"><label class="form-label">Niveau Actuel</label><select id="level" class="form-control"><option value="0">Débutant</option><option value="1" selected>Intermédiaire</option><option value="2">Avancé</option></select></div></div><div class="form-row"><div class="form-col"><label class="form-label">Date de Début</label><input type="date" id="start" class="form-control" value="2024-01-15"></div><div class="form-col"><label class="form-label">Date de Fin</label><input type="date" id="end" class="form-control" value="2024-12-31"></div></div><div class="form-row"><div class="form-col"><label class="form-label">Durée par Session (minutes)</label><select id="sessionDuration" class="form-control"><option value="20" selected>20 minutes (Optimal)</option><option value="30">30 minutes</option><option value="45">45 minutes</option></select></div><div class="form-col"><label class="form-label">Méthode Productivité</label><div class="radio-group"><label class="radio-option"><input type="radio" name="productivityMethod" value="pomodoro" checked> Pomodoro</label><label class="radio-option"><input type="radio" name="productivityMethod" value="deepwork"> Deep Work</label></div></div></div><div class="form-row"><div class="form-col"><label class="form-label">Type d'Énergie</label><div class="radio-group"><label class="radio-option"><input type="radio" name="energyType" value="morning" checked> Matinale</label><label class="radio-option"><input type="radio" name="energyType" value="evening"> Vespérale</label></div></div><div class="form-col"><label class="form-label">Créneaux Disponibles</label><div class="time-slots-group" id="timeSlotsGroup"><label class="time-slot-checkbox"><input type="checkbox" value="08:00-10:00"> 08:00-10:00</label><label class="time-slot-checkbox"><input type="checkbox" value="10:00-12:00"> 10:00-12:00</label><label class="time-slot-checkbox"><input type="checkbox" value="14:00-16:00"> 14:00-16:00</label></div></div></div><div class="form-group"><label class="form-label">Qualité Estimée de Rétention</label><div class="retention-slider"><input type="range" id="retentionQuality" min="0" max="3" step="1" value="2"><div class="retention-labels"><span>0 - Faible</span><span>1 - Moyenne</span><span>2 - Bonne</span><span>3 - Excellente</span></div></div><div id="retentionValueDisplay">Bon - Consolidation progressive</div></div><button class="btn btn-primary btn-large" onclick="generatePlanner()" style="width:100%;"><i class="fas fa-magic"></i> Générer le Planner Personnalisé</button></div></section>
756
+
757
+ <!-- PLANNING -->
758
+ <section id="planner" class="tab-content"><div class="card"><div class="card-header"><h3><i class="fas fa-calendar-alt"></i> Planner Personnalisé</h3><button class="export-btn" onclick="exportPlanning()"><i class="fas fa-download"></i> Exporter</button></div><div class="planning-stats" id="planningStats"><div class="planning-stat-item"><div class="planning-stat-number" id="statSessions">6</div><div class="planning-stat-label">Sessions Planifiées</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statTotalDays">270</div><div class="planning-stat-label">Jours Totaux</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statQuality">3/4</div><div class="planning-stat-label">Niveau de Qualité</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statDuration">20min</div><div class="planning-stat-label">Durée/Session</div></div></div><div style="overflow-x:auto;"><table class="planning-sessions-table" id="sessionsTable"><thead><tr><th>Date</th><th>Session</th><th>Compétence</th><th>Durée</th><th>Intervalle</th><th>Type</th><th>Stratégie</th><th>Productivité</th><th>Heure Optimale</th></tr></thead><tbody id="sessionsTableBody"></tbody></table></div><div class="spaced-repetition-container"><h4><i class="fas fa-chart-line"></i> Courbe de Répétition Espacée</h4><div class="curve-legend"><div class="legend-item"><div class="legend-color" style="background:#2563eb;"></div><span>Seuil de rétention</span></div><div class="legend-item"><div class="legend-color square" style="background:#ef4444;"></div><span>Sessions</span></div></div><canvas id="spacedRepetitionCurve" width="100%" height="200" style="max-height:200px; width:100%;"></canvas><div id="intervalDatesCurve" style="font-size:0.7rem; text-align:center; margin-top:8px;"></div></div></div></section>
759
+
760
+ <!-- DASHBOARD -->
761
+ <section id="dashboard" class="tab-content">
762
+ <div class="card">
763
+ <div class="card-header"><h3><i class="fas fa-chart-simple"></i> Tableau de bord performance & persévérance</h3><div class="dashboard-view-toggle"><button class="view-btn active" data-view="combined" onclick="setDashboardView('combined')">📊 Vue d'ensemble</button></div></div>
764
+ <div class="heatmap-container"><h4 style="margin-bottom:12px; font-weight:500; font-size:0.85rem;"><i class="fas fa-calendar-week"></i> Niveaux d'activité (4 semaines) - Heatmap réduite</h4><div class="heatmap-grid" id="heatmapGrid"></div><div class="legend-heatmap"><div class="legend-heatmap-item"><div class="legend-color-box level-0"></div><span>Aucune</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-1"></div><span>Faible</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-2"></div><span>Moyenne</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-3"></div><span>Élevée</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-4"></div><span>Intense</span></div></div></div>
765
+ <div class="symmetry-curve-card"><div class="curve-header"><h4><i class="fas fa-chart-line"></i> La moyenne d'intensité par jour</h4><div class="curve-legend-mini"><span style="color:#2563eb;">● Intensité moyenne</span><span style="color:#7c3aed;">● Miroir symétrique</span></div></div><canvas id="symmetryHeatmapCurve" width="100%" height="180" style="max-height:180px; width:100%;" class="symmetry-canvas"></canvas><p style="font-size:0.7rem; color:var(--gray-500); margin-top:12px; text-align:center;"><i class="fas fa-chart-simple"></i> Courbe de la moyenne d'intensité par jour (symétrie gauche/droite). Visualisation des pics d'activité.</p></div>
766
+
767
+ <!-- Indicateurs avec jauges circulaires -->
768
+ <div class="indicator-grid">
769
+ <!-- Régularité du travail - Jauge circulaire -->
770
+ <div class="indicator-card">
771
+ <div class="indicator-header">
772
+ <div class="indicator-icon"><i class="fas fa-clock"></i></div>
773
+ <div class="indicator-title">Régularité du travail</div>
774
+ </div>
775
+ <div class="circular-progress" id="regularityCircle">
776
+ <svg viewBox="0 0 120 120">
777
+ <circle class="bg-circle" cx="60" cy="60" r="54"></circle>
778
+ <circle class="progress-circle" cx="60" cy="60" r="54" id="regularityCircleProgress"></circle>
779
+ </svg>
780
+ <div class="progress-percent" id="regularityPercent">90%</div>
781
+ <div class="progress-label"></div>
782
+ </div>
783
+ <div class="indicator-sub">La constance de l'activité de l'apprenant dans le temps.</div>
784
+ </div>
785
+
786
+ <!-- Gestion des échéances - Jauge circulaire -->
787
+ <div class="indicator-card">
788
+ <div class="indicator-header">
789
+ <div class="indicator-icon"><i class="fas fa-calendar-check"></i></div>
790
+ <div class="indicator-title">Gestion des échéances</div>
791
+ </div>
792
+ <div class="circular-progress" id="deadlineCircle">
793
+ <svg viewBox="0 0 120 120">
794
+ <circle class="bg-circle" cx="60" cy="60" r="54"></circle>
795
+ <circle class="progress-circle" cx="60" cy="60" r="54" id="deadlineCircleProgress"></circle>
796
+ </svg>
797
+ <div class="progress-percent" id="deadlinePercent">88%</div>
798
+ <div class="progress-label"></div>
799
+ </div>
800
+ <div class="indicator-sub">La capacité de l'apprenant à respecter les délais.</div>
801
+ </div>
802
+
803
+ <!-- Schéma d'effort -->
804
+ <div class="indicator-card">
805
+ <div class="indicator-header">
806
+ <div class="indicator-icon"><i class="fas fa-bolt"></i></div>
807
+ <div class="indicator-title">Schéma d'effort</div>
808
+ </div>
809
+ <div><span class="effort-badge-modern" id="effortPattern">Effort concentré (Pic d'activité jeudi/vendredi)</span></div>
810
+ <div class="indicator-sub">La dynamique temporelle de l'effort.</div>
811
+ </div>
812
+
813
+ <!-- Persistance -->
814
+ <div class="indicator-card">
815
+ <div class="indicator-header">
816
+ <div class="indicator-icon"><i class="fas fa-chart-line"></i></div>
817
+ <div class="indicator-title">Persistance & gestion des efforts</div>
818
+ </div>
819
+ <div><span class="persistence-tag" id="persistenceScore">Très élevée</span></div>
820
+ <div class="indicator-sub">Indice de persévérance globale</div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ </section>
825
+
826
+ <!-- JOURNAL : Planifié / En Cours / Accompli + Auto-évaluation -->
827
+ <section id="journal" class="tab-content">
828
+ <div class="card">
829
+ <div class="card-header"><h3>Mon Journal d'apprentissage</h3><button class="btn btn-primary" onclick="saveJournalEntry()">Sauvegarder</button></div>
830
+
831
+ <div class="journal-section">
832
+ <h4><i class="far fa-calendar-check"></i> Planifié (To-Do)</h4>
833
+ <textarea id="plannedText" rows="2" placeholder="Ce que vous prévoyez d'apprendre..."></textarea>
834
+ </div>
835
+
836
+ <div class="journal-section">
837
+ <h4><i class="fas fa-spinner"></i> En Cours (Doing)</h4>
838
+ <textarea id="doingText" rows="2" placeholder="Ce que vous faites actuellement..."></textarea>
839
+ </div>
840
+
841
+ <div class="journal-section">
842
+ <h4><i class="fas fa-check-circle"></i> Accompli (Done)</h4>
843
+ <textarea id="doneText" rows="2" placeholder="Ce que vous avez accompli..."></textarea>
844
+ <div class="self-rating-group">
845
+ <span>Auto-évaluation (1-5) :</span>
846
+ <div class="rating-stars" id="selfRatingGroup">
847
+ <button type="button" class="star-btn" data-rating="1">1</button>
848
+ <button type="button" class="star-btn" data-rating="2">2</button>
849
+ <button type="button" class="star-btn" data-rating="3">3</button>
850
+ <button type="button" class="star-btn" data-rating="4">4</button>
851
+ <button type="button" class="star-btn" data-rating="5">5</button>
852
+ </div>
853
+ </div>
854
+ </div>
855
+
856
+ <div class="journal-entries-list" id="journalEntriesList"></div>
857
+ </div>
858
+ </section>
859
+
860
+ <!-- NOTIFICATIONS -->
861
+ <section id="notifications" class="tab-content"><div class="card"><div class="card-header"><h3><i class="fas fa-bell"></i> Notifications IA - Tableau des événements</h3><button class="btn btn-primary" onclick="generateRandomEvent()"><i class="fas fa-plus"></i> Générer un événement</button></div><div class="stats-grid"><div class="stat-card"><div class="stat-value" id="totalEvents">0</div><div class="stat-label">Total</div></div><div class="stat-card"><div class="stat-value" id="pendingEvents">0</div><div class="stat-label">En attente</div></div><div class="stat-card"><div class="stat-value" id="acceptedEvents">0</div><div class="stat-label">Acceptés</div></div></div><div style="overflow-x:auto;"><table class="notifications-table"><thead><tr><th>Date</th><th>Type</th><th>Titre</th><th>Message</th><th>Priorité</th><th>Statut</th><th>Actions</th></tr></thead><tbody id="notificationsTableBody"></tbody></table></div><div class="chart-container"><canvas id="notificationEfficiencyChart"></canvas></div></div></section>
862
+ </div>
863
+
864
+ <script>
865
+ // ---------- FONCTIONS EXISTANTES CONSERVÉES ----------
866
+ const competencesData = [
867
+ { "id": "D-MCONJ", "label": "Marques de la conjugaison", "category": "Discours" },
868
+ { "id": "D-PDV", "label": "Points de vue adoptés", "category": "Discours" },
869
+ { "id": "D-SSENT", "label": "Compréhension des mots", "category": "Discours" },
870
+ { "id": "M-CHOI", "label": "Choix des mots et des expressions", "category": "Maîtrise" },
871
+ { "id": "M-COMP", "label": "Construction des phrases", "category": "Maîtrise" },
872
+ { "id": "M-DEV", "label": "Développement du vocabulaire", "category": "Maîtrise" }
873
+ ];
874
+
875
+ let eventsList = [];
876
+ let currentSessions = [];
877
+ let spacedChart = null;
878
+ let symmetryChart = null;
879
+
880
+ let profileData = {
881
+ extraversion: 3, openness: 3, conscientiousness: 4, agreeableness: 3, neuroticism: 3,
882
+ intrinsic: 3, introjected: 4
883
+ };
884
+
885
+ const eventTemplates = [
886
+ { type: "Rappel d'étude", title: "Session de révision", message: "Votre session est prévue aujourd'hui.", priority: "high" },
887
+ { type: "Conseil IA", title: "Optimisation", message: "Révisez les conjugaisons.", priority: "medium" },
888
+ { type: "Encouragement", title: "Progression", message: "80% des objectifs atteints.", priority: "low" }
889
+ ];
890
+
891
+ // Journal Data (nouvelle structure)
892
+ let journalEntries = []; // { id, date, planned, doing, done, selfRating }
893
+
894
+ function loadJournalEntries() {
895
+ const saved = localStorage.getItem('perseverAI_journal');
896
+ if(saved) journalEntries = JSON.parse(saved);
897
+ renderJournalEntries();
898
+ }
899
+
900
+ function saveJournalEntry() {
901
+ const planned = document.getElementById('plannedText')?.value.trim() || "";
902
+ const doing = document.getElementById('doingText')?.value.trim() || "";
903
+ const done = document.getElementById('doneText')?.value.trim() || "";
904
+ const activeRating = document.querySelector('#selfRatingGroup .star-btn.active');
905
+ let selfRating = activeRating ? parseInt(activeRating.dataset.rating) : null;
906
+ if(!planned && !doing && !done) { showToast("Veuillez renseigner au moins un champ"); return; }
907
+ const newEntry = {
908
+ id: Date.now(),
909
+ date: new Date().toLocaleString('fr-FR'),
910
+ planned: planned,
911
+ doing: doing,
912
+ done: done,
913
+ selfRating: selfRating
914
+ };
915
+ journalEntries.unshift(newEntry);
916
+ localStorage.setItem('perseverAI_journal', JSON.stringify(journalEntries));
917
+ document.getElementById('plannedText').value = "";
918
+ document.getElementById('doingText').value = "";
919
+ document.getElementById('doneText').value = "";
920
+ document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => btn.classList.remove('active'));
921
+ renderJournalEntries();
922
+ showToast("Journal sauvegardé");
923
+ }
924
+
925
+ function renderJournalEntries() {
926
+ const container = document.getElementById('journalEntriesList');
927
+ if(!container) return;
928
+ if(journalEntries.length === 0) {
929
+ container.innerHTML = '<div style="text-align:center; color:var(--gray-500); padding:20px;">Aucune entrée pour le moment</div>';
930
+ return;
931
+ }
932
+ container.innerHTML = journalEntries.map(entry => `
933
+ <div class="journal-entry-item">
934
+ <div class="journal-entry-date">📅 ${entry.date}</div>
935
+ ${entry.planned ? `<div><span class="journal-badge">📋 Planifié</span> ${escapeHtml(entry.planned)}</div>` : ''}
936
+ ${entry.doing ? `<div><span class="journal-badge">⚡ En cours</span> ${escapeHtml(entry.doing)}</div>` : ''}
937
+ ${entry.done ? `<div><span class="journal-badge">✅ Accompli</span> ${escapeHtml(entry.done)}</div>` : ''}
938
+ ${entry.selfRating ? `<div><span class="journal-badge">⭐ Auto-évaluation</span> ${entry.selfRating}/5</div>` : ''}
939
+ </div>
940
+ `).join('');
941
+ }
942
+
943
+ function escapeHtml(str) { return str.replace(/[&<>]/g, function(m){if(m==='&') return '&amp;'; if(m==='<') return '&lt;'; if(m==='>') return '&gt;'; return m;}); }
944
+
945
+ function setupRatingStars() {
946
+ const stars = document.querySelectorAll('#selfRatingGroup .star-btn');
947
+ stars.forEach(btn => {
948
+ btn.addEventListener('click', function() {
949
+ stars.forEach(b => b.classList.remove('active'));
950
+ this.classList.add('active');
951
+ });
952
+ });
953
+ }
954
+
955
+ function generateHeatmapData() {
956
+ const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
957
+ const weeks = 4;
958
+ let matrix = [];
959
+ for(let w = 0; w < weeks; w++) {
960
+ let week = [];
961
+ for(let d = 0; d < 7; d++) {
962
+ let base = (w * 7 + d) % 10;
963
+ let level = 0;
964
+ if(base < 3) level = 1;
965
+ else if(base < 6) level = 2;
966
+ else if(base < 8) level = 3;
967
+ else level = 4;
968
+ if(d === 3 || d === 4) level = Math.min(4, level+1);
969
+ week.push(level);
970
+ }
971
+ matrix.push(week);
972
+ }
973
+ return { days, weeks: matrix };
974
+ }
975
+
976
+ function renderHeatmap() {
977
+ const container = document.getElementById('heatmapGrid');
978
+ if(!container) return;
979
+ const { days, weeks } = generateHeatmapData();
980
+ container.innerHTML = '';
981
+ for(let i = 0; i < days.length; i++) {
982
+ let dayDiv = document.createElement('div');
983
+ dayDiv.className = 'heatmap-day';
984
+ dayDiv.innerText = days[i];
985
+ container.appendChild(dayDiv);
986
+ }
987
+ for(let w = 0; w < weeks.length; w++) {
988
+ for(let d = 0; d < weeks[w].length; d++) {
989
+ let cell = document.createElement('div');
990
+ cell.className = `heatmap-cell level-${weeks[w][d]}`;
991
+ cell.title = `${days[d]} Semaine ${w+1} : Niveau ${weeks[w][d]}`;
992
+ container.appendChild(cell);
993
+ }
994
+ }
995
+ }
996
+
997
+ function drawSymmetryCurve() {
998
+ const canvas = document.getElementById('symmetryHeatmapCurve');
999
+ if(!canvas) return;
1000
+ const ctx = canvas.getContext('2d');
1001
+ const container = canvas.parentElement;
1002
+ const width = container.clientWidth - 40;
1003
+ const height = 160;
1004
+ canvas.width = width;
1005
+ canvas.height = height;
1006
+ ctx.clearRect(0, 0, width, height);
1007
+ const { days, weeks } = generateHeatmapData();
1008
+ let avgIntensity = new Array(7).fill(0);
1009
+ for(let w = 0; w < weeks.length; w++) {
1010
+ for(let d = 0; d < 7; d++) avgIntensity[d] += weeks[w][d];
1011
+ }
1012
+ avgIntensity = avgIntensity.map(v => v / weeks.length);
1013
+ let reversed = [...avgIntensity].reverse();
1014
+ let combined = [];
1015
+ for(let i=0; i<7; i++) combined.push((avgIntensity[i] + reversed[i])/2);
1016
+ const points = combined.map((val, idx) => ({ x: (idx / 6) * width, y: height - (val / 4) * height }));
1017
+ ctx.beginPath();
1018
+ ctx.strokeStyle = '#2563eb';
1019
+ ctx.lineWidth = 2.5;
1020
+ ctx.setLineDash([]);
1021
+ for(let i=0;i<points.length;i++) {
1022
+ if(i===0) ctx.moveTo(points[i].x, points[i].y);
1023
+ else ctx.lineTo(points[i].x, points[i].y);
1024
+ }
1025
+ ctx.stroke();
1026
+ ctx.beginPath();
1027
+ ctx.strokeStyle = '#7c3aed';
1028
+ ctx.lineWidth = 2;
1029
+ ctx.setLineDash([6, 8]);
1030
+ let mirrorPoints = points.map(p => ({ x: width - p.x, y: p.y }));
1031
+ for(let i=0;i<mirrorPoints.length;i++) {
1032
+ if(i===0) ctx.moveTo(mirrorPoints[i].x, mirrorPoints[i].y);
1033
+ else ctx.lineTo(mirrorPoints[i].x, mirrorPoints[i].y);
1034
+ }
1035
+ ctx.stroke();
1036
+ ctx.setLineDash([]);
1037
+ for(let i=0;i<points.length;i++) {
1038
+ ctx.beginPath();
1039
+ ctx.fillStyle = '#2563eb';
1040
+ ctx.arc(points[i].x, points[i].y, 4, 0, 2*Math.PI);
1041
+ ctx.fill();
1042
+ ctx.fillStyle = 'white';
1043
+ ctx.beginPath();
1044
+ ctx.arc(points[i].x, points[i].y, 2, 0, 2*Math.PI);
1045
+ ctx.fill();
1046
+ }
1047
+ ctx.fillStyle = '#475569';
1048
+ ctx.font = '9px Inter';
1049
+ for(let i=0;i<days.length;i++) { let x = (i/6)*width; ctx.fillText(days[i], x-8, height-6); }
1050
+ }
1051
+
1052
+ // Fonction pour mettre à jour les jauges circulaires
1053
+ function updateCircularProgress(elementId, percent) {
1054
+ const circle = document.getElementById(elementId);
1055
+ if(!circle) return;
1056
+ const radius = 54;
1057
+ const circumference = 2 * Math.PI * radius; // 339.29
1058
+ const offset = circumference - (percent / 100) * circumference;
1059
+ circle.style.strokeDasharray = `${circumference}`;
1060
+ circle.style.strokeDashoffset = offset;
1061
+ }
1062
+
1063
+ function updateIndicators() {
1064
+ const regularityValue = 90;
1065
+ const deadlineValue = 88;
1066
+ document.getElementById('regularityPercent').innerText = regularityValue + '%';
1067
+ document.getElementById('deadlinePercent').innerText = deadlineValue + '%';
1068
+ updateCircularProgress('regularityCircleProgress', regularityValue);
1069
+ updateCircularProgress('deadlineCircleProgress', deadlineValue);
1070
+ document.getElementById('effortPattern').innerHTML = "Effort concentré (Pic d'activité jeudi/vendredi)";
1071
+ document.getElementById('persistenceScore').innerHTML = "Très élevée";
1072
+ }
1073
+
1074
+ function setDashboardView(view) {
1075
+ document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
1076
+ document.querySelector(`.view-btn[data-view="${view}"]`).classList.add('active');
1077
+ if(view === 'combined') {
1078
+ renderHeatmap();
1079
+ drawSymmetryCurve();
1080
+ updateIndicators();
1081
+ }
1082
+ }
1083
+
1084
+ function initCompetencesSelect() { const select = document.getElementById('competence'); if(select) select.innerHTML = '<option value="comprendre_mots">Comprendre les mots</option>' + competencesData.map(c => `<option value="${c.id}">${c.label}</option>`).join(''); }
1085
+ function setupRatingListeners() {
1086
+ document.querySelectorAll('.big5-rating .rating-btn').forEach(btn => btn.addEventListener('click', function() { const container = this.closest('.big5-rating'); const trait = container.dataset.trait; const value = parseInt(this.dataset.value); profileData[trait] = value; updateRatingUI(container, value); updateProfileUI(); saveProfileToStorage(); }));
1087
+ document.querySelectorAll('.motivation-rating .rating-btn').forEach(btn => btn.addEventListener('click', function() { const container = this.closest('.motivation-rating'); const motivation = container.dataset.motivation; const value = parseInt(this.dataset.value); profileData[motivation] = value; updateRatingUI(container, value); updateProfileUI(); saveProfileToStorage(); }));
1088
+ }
1089
+ function updateRatingUI(container, value) { container.querySelectorAll('.rating-btn').forEach(btn => { btn.classList.remove('active'); if(parseInt(btn.dataset.value) === value) btn.classList.add('active'); }); }
1090
+ function updateProfileUI() { document.getElementById('summaryExtraversion').innerText = profileData.extraversion; document.getElementById('summaryOpenness').innerText = profileData.openness; document.getElementById('summaryConscientiousness').innerText = profileData.conscientiousness; document.getElementById('summaryIntrinsic').innerText = profileData.intrinsic; document.getElementById('summaryIntrojected').innerText = profileData.introjected; document.getElementById('neuroticismScore').innerText = profileData.neuroticism; document.getElementById('introjectedScore').innerText = profileData.introjected; let completed = Object.values(profileData).filter(v => v).length; const percent = Math.round((completed / 7) * 100); document.getElementById('profileCompletionPercent').innerText = percent + '%'; document.getElementById('profileProgressFill').style.width = percent + '%'; document.getElementById('completedCount').innerText = Math.min(completed, 5); let level = "Débutant"; if(profileData.conscientiousness >= 4 && profileData.intrinsic >= 4) level = "Avancé"; else if(profileData.conscientiousness >= 3) level = "Intermédiaire"; document.getElementById('profileLevel').innerText = level; const recos = ["◼ Qualité du sommeil: Maintenez 7-8 heures de sommeil de qualité.", "◼ Planification: Renforcez votre organisation avec des rappels."]; document.getElementById('recommendationsContainer').innerHTML = recos.map(r => `<p>${r}</p>`).join(''); }
1091
+ function autoFillProfile() { profileData = { extraversion: 4, openness: 4, conscientiousness: 5, agreeableness: 4, neuroticism: 2, intrinsic: 5, introjected: 3 }; document.querySelectorAll('.big5-rating').forEach(container => { if(profileData[container.dataset.trait]) updateRatingUI(container, profileData[container.dataset.trait]); }); document.querySelectorAll('.motivation-rating').forEach(container => { if(profileData[container.dataset.motivation]) updateRatingUI(container, profileData[container.dataset.motivation]); }); updateProfileUI(); saveProfileToStorage(); showToast("Profil automatiquement rempli !"); }
1092
+ function saveProfileData() { saveProfileToStorage(); showToast("Profil sauvegardé !"); }
1093
+ function finalizeProfile() { saveProfileToStorage(); showToast("Profil finalisé !"); }
1094
+ function saveProfileToStorage() { localStorage.setItem('perseverAI_profile', JSON.stringify(profileData)); }
1095
+ function loadProfileFromStorage() { const saved = localStorage.getItem('perseverAI_profile'); if(saved) Object.assign(profileData, JSON.parse(saved)); updateProfileUI(); }
1096
+ function retentionRate(days, strength = 0.5) { return Math.exp(-days / (strength * 30)) * 100; }
1097
+ function drawSpacedRepetitionCurve(sessions) {
1098
+ const canvas = document.getElementById('spacedRepetitionCurve');
1099
+ if(!canvas || sessions.length === 0) return;
1100
+ const ctx = canvas.getContext('2d');
1101
+ const container = canvas.parentElement;
1102
+ const width = container.clientWidth - 40;
1103
+ const height = 180;
1104
+ canvas.width = width; canvas.height = height;
1105
+ ctx.clearRect(0, 0, width, height);
1106
+ const startDate = sessions[0].date.getTime();
1107
+ const endDate = sessions[sessions.length-1].date.getTime();
1108
+ const totalDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
1109
+ ctx.beginPath(); ctx.strokeStyle = '#2563eb'; ctx.lineWidth = 2.5; ctx.setLineDash([]);
1110
+ let firstPoint = true;
1111
+ for(let x = 0; x <= width; x++) {
1112
+ const dayProgression = (x / width) * totalDays;
1113
+ const retention = retentionRate(dayProgression, 0.4);
1114
+ const y = height - (retention / 100) * height;
1115
+ if(firstPoint) { ctx.moveTo(x, y); firstPoint = false; } else ctx.lineTo(x, y);
1116
+ }
1117
+ ctx.stroke();
1118
+ for(let i = 0; i < sessions.length; i++) {
1119
+ const x = ((sessions[i].date.getTime() - startDate) / (endDate - startDate)) * width;
1120
+ const dayProgression = ((sessions[i].date.getTime() - startDate) / (1000 * 60 * 60 * 24));
1121
+ const retentionAtSession = retentionRate(dayProgression, 0.4);
1122
+ const y = height - (retentionAtSession / 100) * height;
1123
+ ctx.beginPath(); ctx.fillStyle = '#ef4444'; ctx.arc(x, y, 5, 0, 2*Math.PI); ctx.fill();
1124
+ ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(x, y, 2, 0, 2*Math.PI); ctx.fill();
1125
+ }
1126
+ const datesDiv = document.getElementById('intervalDatesCurve');
1127
+ if(datesDiv) datesDiv.innerHTML = sessions.map(s => `<span style="margin:0 8px">${s.dateStr}</span>`).join('');
1128
+ }
1129
+ function generatePlanner() {
1130
+ const competence = document.getElementById('competence')?.value || "comprendre_mots";
1131
+ const competenceLabel = competencesData.find(c=>c.id===competence)?.label || "Comprendre les mots";
1132
+ const startDate = new Date(document.getElementById('start')?.value || "2024-01-15");
1133
+ const sessionDur = document.getElementById('sessionDuration')?.value || "20";
1134
+ const method = document.querySelector('input[name="productivityMethod"]:checked')?.value || "pomodoro";
1135
+ const timeSlot = document.querySelector('#timeSlotsGroup input:checked')?.value || "08:00-10:00";
1136
+ const retention = document.getElementById('retentionQuality')?.value || "2";
1137
+ const intervals = [1, 7, 16, 35, 70, 140];
1138
+ const sessions = [];
1139
+ for(let i = 0; i < intervals.length; i++) {
1140
+ let currentDate = new Date(startDate);
1141
+ if(i > 0) currentDate.setDate(startDate.getDate() + intervals[i-1]);
1142
+ else currentDate = new Date(startDate);
1143
+ const sessionTypes = ["Apprentissage", "Consolidation", "Consolidation", "Maintien", "Maintien", "Maintien"];
1144
+ const strategies = ["Focus intense", "Révision active", "Révision active", "Révision active", "Révision active", "Révision active"];
1145
+ sessions.push({ id: i+1, date: new Date(currentDate), dateStr: currentDate.toLocaleDateString('fr-FR'), dayName: currentDate.toLocaleDateString('fr-FR', { weekday: 'long' }), competence: competenceLabel, duration: sessionDur + " minutes", interval: intervals[i] + " jours", type: sessionTypes[i], strategy: strategies[i], productivity: method === 'pomodoro' ? 'Pomodoro' : 'Deep Work', optimalTime: timeSlot });
1146
+ }
1147
+ currentSessions = sessions;
1148
+ renderPlanningTable(sessions);
1149
+ updatePlanningStats(sessions, retention, sessionDur);
1150
+ drawSpacedRepetitionCurve(sessions);
1151
+ showToast("Planning personnalisé généré !"); showTab('planner');
1152
+ }
1153
+ function generateDefaultPlanning() {
1154
+ const startDate = new Date("2024-01-17");
1155
+ const intervals = [1, 7, 16, 35, 70, 140];
1156
+ const sessions = [];
1157
+ for(let i = 0; i < intervals.length; i++) {
1158
+ let currentDate = new Date(startDate);
1159
+ if(i > 0) currentDate.setDate(startDate.getDate() + (i===1?1: intervals[i-1]));
1160
+ else currentDate = new Date(startDate);
1161
+ const sessionTypes = ["Apprentissage", "Consolidation", "Consolidation", "Maintien", "Maintien", "Maintien"];
1162
+ sessions.push({ id: i+1, date: new Date(currentDate), dateStr: currentDate.toLocaleDateString('fr-FR'), dayName: currentDate.toLocaleDateString('fr-FR', { weekday: 'long' }), competence: "comprendre_mots", duration: "20 minutes", interval: intervals[i] + " jours", type: sessionTypes[i], strategy: "Révision active", productivity: "Pomodoro", optimalTime: "08:00-10:00" });
1163
+ }
1164
+ currentSessions = sessions;
1165
+ renderPlanningTable(sessions);
1166
+ updatePlanningStats(sessions, "2", "20");
1167
+ drawSpacedRepetitionCurve(sessions);
1168
+ }
1169
+ function renderPlanningTable(sessions) { const tbody = document.getElementById('sessionsTableBody'); if(!tbody) return; tbody.innerHTML = sessions.map(s => `<tr><td><strong>${s.dateStr}</strong><br><span style="font-size:0.7rem;">${s.dayName}</span></td><td><strong>R${s.id}</strong></td><td>${s.competence}</td><td>${s.duration}</td><td>${s.interval}</td><td><span class="session-type-badge ${s.type === 'Apprentissage' ? 'type-apprentissage' : (s.type === 'Consolidation' ? 'type-consolidation' : 'type-maintien')}">${s.type}</span></td><td>${s.strategy}</td><td>${s.productivity}</td><td>${s.optimalTime}</td></tr>`).join(''); }
1170
+ function updatePlanningStats(sessions, quality, duration) { document.getElementById('statSessions').innerText = sessions.length; if(sessions.length > 0) { const lastDate = sessions[sessions.length-1].date; const firstDate = sessions[0].date; const totalDays = Math.ceil((lastDate - firstDate) / (1000 * 60 * 60 * 24)); document.getElementById('statTotalDays').innerText = totalDays; } const qualityMap = {'0':'1/4','1':'2/4','2':'3/4','3':'4/4'}; document.getElementById('statQuality').innerText = qualityMap[quality] || "3/4"; document.getElementById('statDuration').innerText = duration + "min"; }
1171
+ function exportPlanning() { let csv = "Date,Session,Compétence,Durée,Intervalle,Type,Stratégie,Productivité,Heure Optimale\n"; currentSessions.forEach(s => { csv += `"${s.dateStr}","R${s.id}","${s.competence}","${s.duration}","${s.interval}","${s.type}","${s.strategy}","${s.productivity}","${s.optimalTime}"\n`; }); const blob = new Blob([csv], {type: 'text/csv'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'planning_perseverai.csv'; link.click(); showToast("Planning exporté en CSV"); }
1172
+ function generateRandomEvent() { const template = eventTemplates[Math.floor(Math.random() * eventTemplates.length)]; const newEvent = { id: Date.now() + Math.random(), date: new Date().toLocaleString(), type: template.type, title: template.title, message: template.message, priority: template.priority, status: 'pending' }; eventsList.unshift(newEvent); saveEvents(); renderEventsTable(); updateEventStats(); showToast(`Nouvel événement: ${template.title}`); }
1173
+ function executeAction(eventId, actionType, actionLabel) { const eventIndex = eventsList.findIndex(e => e.id == eventId); if(eventIndex === -1) return; eventsList[eventIndex].status = actionType === 'ACCEPT' ? 'accepted' : (actionType === 'REJECT' ? 'rejected' : 'hold'); renderEventsTable(); updateEventStats(); saveEvents(); showToast(`${actionLabel}`); }
1174
+ function renderEventsTable() { const tbody = document.getElementById('notificationsTableBody'); if(!tbody) return; if(eventsList.length === 0) { tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;">Aucun événement</td></tr>'; return; } tbody.innerHTML = eventsList.map(event => `<tr><td>${event.date}</td><td>${event.type}</td><td><strong>${event.title}</strong></td><td>${event.message}</td><td><span class="priority-${event.priority}">${event.priority}</span></td><td><span class="status-badge ${event.status === 'accepted' ? 'status-accepted' : 'status-pending'}">${event.status === 'accepted' ? 'Accepté' : 'En attente'}</span></td><td class="action-cell"><button class="action-icon-btn action-accept" onclick="executeAction(${event.id}, 'ACCEPT', 'Accepté')">✓ Accepter</button><button class="action-icon-btn action-reject" onclick="executeAction(${event.id}, 'REJECT', 'Rejeté')">✗ Rejeter</button><button class="action-icon-btn action-hold" onclick="executeAction(${event.id}, 'HOLD', 'En attente')">⏸ Attente</button><button class="action-icon-btn action-help" onclick="executeAction(${event.id}, 'HELP', 'Aide demandée')">🆘 Aide</button></td></tr>`).join(''); }
1175
+ function updateEventStats() { document.getElementById('totalEvents').innerText = eventsList.length; document.getElementById('pendingEvents').innerText = eventsList.filter(e => e.status === 'pending').length; document.getElementById('acceptedEvents').innerText = eventsList.filter(e => e.status === 'accepted').length; if(efficiencyChart) efficiencyChart.data.datasets[0].data = [eventsList.filter(e=>e.status==='accepted').length, eventsList.filter(e=>e.status==='rejected').length, eventsList.filter(e=>e.status==='pending').length]; efficiencyChart?.update(); }
1176
+ let efficiencyChart = null;
1177
+ function createChart() { const ctx = document.getElementById('notificationEfficiencyChart')?.getContext('2d'); if(ctx) efficiencyChart = new Chart(ctx, { type: 'bar', data: { labels: ['Acceptés', 'Rejetés', 'En attente'], datasets: [{ label: 'Actions', data: [0,0,0], backgroundColor: ['#16a34a','#dc2626','#d97706'] }] }, options: { responsive: true } }); }
1178
+ function saveEvents() { localStorage.setItem('eventsList', JSON.stringify(eventsList)); }
1179
+ function loadSavedData() { const saved = localStorage.getItem('eventsList'); if(saved) eventsList = JSON.parse(saved); }
1180
+
1181
+ function showTab(tabId) {
1182
+ document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
1183
+ document.getElementById(tabId).classList.add('active');
1184
+ document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
1185
+ if(window.event?.target) window.event.target.classList.add('active');
1186
+ if(tabId === 'dashboard') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); }
1187
+ if(tabId === 'planner') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); }
1188
+ if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); }
1189
+ if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); }
1190
+ if(tabId === 'journal') { loadJournalEntries(); }
1191
+ }
1192
+ function showToast(msg) { let div = document.createElement('div'); div.style.cssText = `position:fixed; bottom:20px; right:20px; background:#1e293b; color:white; padding:12px 20px; border-radius:8px; z-index:1000;`; div.innerHTML = msg; document.body.appendChild(div); setTimeout(()=>div.remove(), 2500); }
1193
+
1194
+ document.addEventListener('DOMContentLoaded', () => {
1195
+ initCompetencesSelect(); loadSavedData(); renderEventsTable(); updateEventStats(); createChart(); initProfileModule();
1196
+ const retentionSlider = document.getElementById('retentionQuality'); if(retentionSlider) retentionSlider.addEventListener('input', function() { const val = parseInt(this.value); const messages = {0:"0 - Faible",1:"1 - Moyenne",2:"2 - Bon - Consolidation progressive",3:"3 - Excellente"}; document.getElementById('retentionValueDisplay').innerText = messages[val]; });
1197
+ generateDefaultPlanning(); loadProfileFromStorage(); setupRatingListeners(); updateProfileUI(); setDashboardView('combined');
1198
+ setupRatingStars(); loadJournalEntries();
1199
+ // Initialisation des cercles
1200
+ updateCircularProgress('regularityCircleProgress', 90);
1201
+ updateCircularProgress('deadlineCircleProgress', 88);
1202
+ });
1203
+ function initProfileModule() { loadProfileFromStorage(); setupRatingListeners(); updateProfileUI(); }
1204
+ window.addEventListener('resize', () => { if(document.getElementById('dashboard').classList.contains('active')) drawSymmetryCurve(); if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); });
1205
+ </script>
1206
+ </body>
1207
+ </html>