Hugging Face's logo

Spaces:
OUAREDAEK
/
Injaz
Runtime error

App Files Community
OUAREDAEK commited on
Commit
8ffdae3
·
verified ·
1 Parent(s): 8063512

Upload templates/index-old3.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. templates/index-old3.html +1129 -0
templates/index-old3.html ADDED
@@ -0,0 +1,1129 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .chart-container { height: 300px; margin-top: 20px; }
289
+ .tab-content { display: none; }
290
+ .tab-content.active { display: block; }
291
+
292
+ /* Spaced Repetition Curve */
293
+ .spaced-repetition-container {
294
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
295
+ border-radius: 16px;
296
+ padding: 20px;
297
+ margin-top: 20px;
298
+ }
299
+ .curve-legend {
300
+ display: flex;
301
+ justify-content: center;
302
+ gap: 24px;
303
+ margin-bottom: 16px;
304
+ font-size: 0.75rem;
305
+ }
306
+ .legend-item {
307
+ display: flex;
308
+ align-items: center;
309
+ gap: 8px;
310
+ }
311
+ .legend-color {
312
+ width: 20px;
313
+ height: 3px;
314
+ border-radius: 2px;
315
+ }
316
+ .legend-color.square {
317
+ width: 12px;
318
+ height: 12px;
319
+ border-radius: 50%;
320
+ }
321
+
322
+ @media (max-width: 768px) {
323
+ .container { padding: 16px; }
324
+ .planning-sessions-table { font-size: 0.7rem; }
325
+ .planning-sessions-table td, .planning-sessions-table th { padding: 8px 6px; }
326
+ }
327
+
328
+ .session-detail-line { font-size: 0.75rem; color: var(--gray-600); margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
329
+ .export-btn { background: white; border: 1px solid var(--gray-200); padding: 8px 16px; border-radius: 8px; cursor: pointer; }
330
+ .export-btn:hover { background: var(--gray-50); }
331
+
332
+ /* Profile specific styles */
333
+ .profile-progress {
334
+ background: var(--gray-100);
335
+ border-radius: 12px;
336
+ padding: 16px;
337
+ margin-bottom: 24px;
338
+ }
339
+ .progress-bar-container {
340
+ background: var(--gray-200);
341
+ border-radius: 20px;
342
+ height: 10px;
343
+ margin: 12px 0;
344
+ overflow: hidden;
345
+ }
346
+ .progress-bar-fill {
347
+ background: var(--primary);
348
+ width: 0%;
349
+ height: 100%;
350
+ border-radius: 20px;
351
+ transition: width 0.3s ease;
352
+ }
353
+ .big5-rating {
354
+ display: flex;
355
+ gap: 8px;
356
+ margin-top: 8px;
357
+ flex-wrap: wrap;
358
+ }
359
+ .rating-btn {
360
+ width: 40px;
361
+ height: 40px;
362
+ border-radius: 40px;
363
+ border: 1px solid var(--gray-200);
364
+ background: white;
365
+ cursor: pointer;
366
+ font-weight: 600;
367
+ transition: all 0.2s;
368
+ }
369
+ .rating-btn:hover { background: var(--gray-100); }
370
+ .rating-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
371
+ .motivation-rating {
372
+ display: flex;
373
+ gap: 8px;
374
+ margin-top: 8px;
375
+ flex-wrap: wrap;
376
+ }
377
+ .profile-recommendations {
378
+ background: #fefce8;
379
+ border-left: 4px solid var(--warning);
380
+ padding: 16px;
381
+ border-radius: 12px;
382
+ margin-top: 20px;
383
+ }
384
+ .profile-summary-cards {
385
+ display: grid;
386
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
387
+ gap: 16px;
388
+ margin-bottom: 24px;
389
+ }
390
+ .profile-mini-card {
391
+ background: var(--gray-50);
392
+ border-radius: 12px;
393
+ padding: 16px;
394
+ text-align: center;
395
+ }
396
+ .profile-mini-card h4 { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 8px; }
397
+ .profile-mini-card .value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
398
+ .flex-between { display: flex; justify-content: space-between; align-items: center; }
399
+
400
+ /* NOUVEAUX STYLES DASHBOARD - HEATMAP & INDICATEURS */
401
+ .heatmap-container {
402
+ background: white;
403
+ border-radius: 16px;
404
+ padding: 20px;
405
+ margin-bottom: 24px;
406
+ border: 1px solid var(--gray-200);
407
+ }
408
+ .heatmap-grid {
409
+ display: grid;
410
+ grid-template-columns: repeat(7, 1fr);
411
+ gap: 10px;
412
+ margin: 20px 0;
413
+ }
414
+ .heatmap-day {
415
+ text-align: center;
416
+ font-size: 0.7rem;
417
+ font-weight: 500;
418
+ color: var(--gray-600);
419
+ margin-bottom: 8px;
420
+ }
421
+ .heatmap-cell {
422
+ aspect-ratio: 1 / 1;
423
+ border-radius: 8px;
424
+ transition: transform 0.2s;
425
+ cursor: pointer;
426
+ }
427
+ .heatmap-cell:hover { transform: scale(1.05); }
428
+ .level-0 { background-color: #edf2f7; }
429
+ .level-1 { background-color: #c6f6d5; }
430
+ .level-2 { background-color: #9ae6b4; }
431
+ .level-3 { background-color: #48bb78; }
432
+ .level-4 { background-color: #276749; }
433
+ .legend-heatmap {
434
+ display: flex;
435
+ justify-content: center;
436
+ gap: 20px;
437
+ margin-top: 16px;
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
+ }
446
+ .legend-color-box {
447
+ width: 20px;
448
+ height: 20px;
449
+ border-radius: 4px;
450
+ }
451
+ .indicator-card {
452
+ background: var(--gray-50);
453
+ border-radius: 12px;
454
+ padding: 20px;
455
+ text-align: center;
456
+ border: 1px solid var(--gray-200);
457
+ }
458
+ .indicator-value {
459
+ font-size: 2.2rem;
460
+ font-weight: 800;
461
+ color: var(--primary);
462
+ }
463
+ .effort-badge {
464
+ display: inline-block;
465
+ background: #e0e7ff;
466
+ padding: 8px 16px;
467
+ border-radius: 40px;
468
+ font-size: 0.8rem;
469
+ font-weight: 600;
470
+ color: #3730a3;
471
+ }
472
+ .dashboard-view-toggle {
473
+ display: flex;
474
+ gap: 12px;
475
+ margin-bottom: 24px;
476
+ }
477
+ .view-btn {
478
+ padding: 8px 18px;
479
+ border-radius: 40px;
480
+ background: white;
481
+ border: 1px solid var(--gray-200);
482
+ cursor: pointer;
483
+ font-weight: 500;
484
+ }
485
+ .view-btn.active {
486
+ background: var(--primary);
487
+ color: white;
488
+ border-color: var(--primary);
489
+ }
490
+ </style>
491
+ </head>
492
+ <body>
493
+ <div class="container">
494
+ <header class="header">
495
+ <h1>PerseverAI</h1>
496
+ <p>Compagnon d'apprentissage autorégulé - Notifications IA & Actions</p>
497
+ <div class="badge">AI · Aid · Perseverance · Tableau des événements</div>
498
+ </header>
499
+
500
+ <nav class="nav-tabs">
501
+ <button class="nav-tab" onclick="showTab('profile')">Profil</button>
502
+ <button class="nav-tab" onclick="showTab('objectif')">Objectif</button>
503
+ <button class="nav-tab" onclick="showTab('planner')">Planning</button>
504
+ <button class="nav-tab" onclick="showTab('dashboard')">Mon Dashboard</button>
505
+ <button class="nav-tab" onclick="showTab('journal')">Mon Journal</button>
506
+ <button class="nav-tab" onclick="showTab('notifications')">Notifications IA</button>
507
+ </nav>
508
+
509
+ <!-- PROFIL -->
510
+ <section id="profile" class="tab-content">
511
+ <div class="card">
512
+ <div class="card-header">
513
+ <h3>Profil d'Apprentissage Personnalisé</h3>
514
+ <div>
515
+ <button class="btn btn-secondary" onclick="autoFillProfile()">Remplir automatiquement</button>
516
+ <button class="btn btn-secondary" onclick="saveProfileData()">Sauvegarder</button>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="profile-progress">
521
+ <div class="flex-between">
522
+ <span><strong>Complétion du Profil</strong></span>
523
+ <span id="profileCompletionPercent">40%</span>
524
+ </div>
525
+ <div class="progress-bar-container">
526
+ <div class="progress-bar-fill" id="profileProgressFill" style="width: 40%;"></div>
527
+ </div>
528
+ <div class="flex-between" style="margin-top: 8px;">
529
+ <span>Questionnaires complétés: <span id="completedCount">2</span>/5</span>
530
+ <span>Profil personnalisé: <span id="profileLevel">Intermédiaire</span></span>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="card" style="margin-bottom: 20px; padding: 20px;">
535
+ <h4 style="margin-bottom: 16px;">Profil de Personnalité (Big Five Traits)</h4>
536
+ <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>
537
+
538
+ <div class="form-group">
539
+ <label class="form-label">Je suis quelqu'un de sociable, extraverti, énergique</label>
540
+ <div class="big5-rating" data-trait="extraversion">
541
+ <button type="button" class="rating-btn" data-value="1">1</button>
542
+ <button type="button" class="rating-btn" data-value="2">2</button>
543
+ <button type="button" class="rating-btn" data-value="3">3</button>
544
+ <button type="button" class="rating-btn" data-value="4">4</button>
545
+ <button type="button" class="rating-btn" data-value="5">5</button>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="form-group">
550
+ <label class="form-label">Je fais preuve de curiosité intellectuelle, j'aime les nouvelles expériences</label>
551
+ <div class="big5-rating" data-trait="openness">
552
+ <button type="button" class="rating-btn" data-value="1">1</button>
553
+ <button type="button" class="rating-btn" data-value="2">2</button>
554
+ <button type="button" class="rating-btn" data-value="3">3</button>
555
+ <button type="button" class="rating-btn" data-value="4">4</button>
556
+ <button type="button" class="rating-btn" data-value="5">5</button>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="form-group">
561
+ <label class="form-label">Je suis organisé, fiable, je respecte mes engagements</label>
562
+ <div class="big5-rating" data-trait="conscientiousness">
563
+ <button type="button" class="rating-btn" data-value="1">1</button>
564
+ <button type="button" class="rating-btn" data-value="2">2</button>
565
+ <button type="button" class="rating-btn" data-value="3">3</button>
566
+ <button type="button" class="rating-btn" data-value="4">4</button>
567
+ <button type="button" class="rating-btn" data-value="5">5</button>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="form-group">
572
+ <label class="form-label">Je suis coopératif, serviable, empathique</label>
573
+ <div class="big5-rating" data-trait="agreeableness">
574
+ <button type="button" class="rating-btn" data-value="1">1</button>
575
+ <button type="button" class="rating-btn" data-value="2">2</button>
576
+ <button type="button" class="rating-btn" data-value="3">3</button>
577
+ <button type="button" class="rating-btn" data-value="4">4</button>
578
+ <button type="button" class="rating-btn" data-value="5">5</button>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="form-group">
583
+ <label class="form-label">Je ressens facilement de l'anxiété, du stress, de la nervosité</label>
584
+ <div class="big5-rating" data-trait="neuroticism">
585
+ <button type="button" class="rating-btn" data-value="1">1</button>
586
+ <button type="button" class="rating-btn" data-value="2">2</button>
587
+ <button type="button" class="rating-btn" data-value="3">3</button>
588
+ <button type="button" class="rating-btn" data-value="4">4</button>
589
+ <button type="button" class="rating-btn" data-value="5">5</button>
590
+ </div>
591
+ </div>
592
+
593
+ <div style="margin-top: 16px; font-size: 0.8rem; color: var(--gray-600); background: var(--gray-50); padding: 12px; border-radius: 8px;">
594
+ Section complétée - Score neuroticisme: <span id="neuroticismScore">4.0</span> (qualité du sommeil importante)
595
+ </div>
596
+ </div>
597
+
598
+ <div class="card" style="margin-bottom: 20px; padding: 20px;">
599
+ <h4 style="margin-bottom: 16px;">Profil Motivationnel</h4>
600
+ <p style="font-size: 0.8rem; color: var(--gray-600); margin-bottom: 20px;">Pourquoi étudiez-vous ? Sélectionnez vos principales motivations</p>
601
+
602
+ <div class="form-group">
603
+ <label class="form-label">J'étudie parce que j'aime apprendre, je trouve cela intéressant et plaisant</label>
604
+ <div class="motivation-rating" data-motivation="intrinsic">
605
+ <button type="button" class="rating-btn" data-value="1">1</button>
606
+ <button type="button" class="rating-btn" data-value="2">2</button>
607
+ <button type="button" class="rating-btn" data-value="3">3</button>
608
+ <button type="button" class="rating-btn" data-value="4">4</button>
609
+ <button type="button" class="rating-btn" data-value="5">5</button>
610
+ </div>
611
+ </div>
612
+
613
+ <div class="form-group">
614
+ <label class="form-label">J'étudie pour obtenir de bonnes notes et faire plaisir à mes parents/professeurs</label>
615
+ <div class="motivation-rating" data-motivation="introjected">
616
+ <button type="button" class="rating-btn" data-value="1">1</button>
617
+ <button type="button" class="rating-btn" data-value="2">2</button>
618
+ <button type="button" class="rating-btn" data-value="3">3</button>
619
+ <button type="button" class="rating-btn" data-value="4">4</button>
620
+ <button type="button" class="rating-btn" data-value="5">5</button>
621
+ </div>
622
+ </div>
623
+
624
+ <div style="margin-top: 16px; font-size: 0.8rem; color: var(--gray-600); background: var(--gray-50); padding: 12px; border-radius: 8px;">
625
+ Section complétée - Motivation introjectée: <span id="introjectedScore">4.0</span> (pression interne modérée)
626
+ </div>
627
+ </div>
628
+
629
+ <div class="profile-summary-cards">
630
+ <div class="profile-mini-card"><h4>Big Five Traits</h4><div class="value" id="summaryExtraversion">3.0</div><div>Extraversion</div></div>
631
+ <div class="profile-mini-card"><div class="value" id="summaryOpenness">3.0</div><div>Ouverture</div></div>
632
+ <div class="profile-mini-card"><div class="value" id="summaryConscientiousness">4.0</div><div>Conscience</div></div>
633
+ <div class="profile-mini-card"><h4>Motivation</h4><div class="value" id="summaryIntrinsic">3.0</div><div>Intrinsèque</div></div>
634
+ <div class="profile-mini-card"><div class="value" id="summaryIntrojected">4.0</div><div>Introjectée</div></div>
635
+ </div>
636
+
637
+ <div class="profile-recommendations">
638
+ <h4 style="margin-bottom: 12px;"><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>
639
+ <div id="recommendationsContainer">
640
+ <p>💤 <strong>Qualité du sommeil:</strong> Avec un névrosisme modéré, il est important de maintenir 7-8 heures de sommeil de qualité.</p>
641
+ <p>📅 <strong>Planification:</strong> Votre conscience est bonne. Établissez un planning régulier mais évitez le surmenage.</p>
642
+ </div>
643
+ </div>
644
+
645
+ <button class="btn btn-primary btn-large" onclick="finalizeProfile()" style="width:100%; margin-top: 20px;">
646
+ <i class="fas fa-check-circle"></i> Finaliser et Générer le Profil Personnalisé
647
+ </button>
648
+ </div>
649
+ </section>
650
+
651
+ <!-- OBJECTIF -->
652
+ <section id="objectif" class="tab-content">
653
+ <div class="card">
654
+ <div class="card-header"><h3>Définir mon Objectif d'Apprentissage</h3></div>
655
+ <div class="form-row">
656
+ <div class="form-col"><label class="form-label">Compétence Cible</label><select id="competence" class="form-control"></select></div>
657
+ <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>
658
+ </div>
659
+ <div class="form-row">
660
+ <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>
661
+ <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>
662
+ </div>
663
+ <div class="form-row">
664
+ <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>
665
+ <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>
666
+ </div>
667
+ <div class="form-row">
668
+ <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>
669
+ <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>
670
+ </div>
671
+ <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 class="retention-value" id="retentionValueDisplay">Bon - Consolidation progressive</div></div>
672
+ <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>
673
+ </div>
674
+ </section>
675
+
676
+ <!-- PLANNING -->
677
+ <section id="planner" class="tab-content">
678
+ <div class="card">
679
+ <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>
680
+ <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>
681
+ <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>
682
+ <div class="spaced-repetition-container"><h4 style="margin-bottom: 16px;"><i class="fas fa-chart-line"></i> Courbe de Répétition Espacée (SM-2 Algorithm)</h4><div class="curve-legend"><div class="legend-item"><div class="legend-color" style="background: #2563eb; width: 30px; height: 3px;"></div><span>Seuil de rétention (Forgetting Curve)</span></div><div class="legend-item"><div class="legend-color square" style="background: #ef4444;"></div><span>Sessions de révision</span></div><div class="legend-item"><div class="legend-color" style="background: #10b981; width: 30px; height: 3px;"></div><span>Intervalle optimal SM-2</span></div></div><div style="position: relative;"><canvas id="spacedRepetitionCurve" width="100%" height="220" style="max-height: 220px; width: 100%;"></canvas></div><div style="display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.7rem; color: var(--gray-600);" id="intervalDatesCurve"></div><p style="font-size: 0.7rem; color: var(--gray-500); margin-top: 16px; text-align: center; font-style: italic;"><i class="fas fa-lightbulb"></i> La courbe montre l'évolution théorique de la rétention. Chaque révision au moment optimal (juste avant l'oubli) renforce la mémoire et augmente l'intervalle suivant.</p></div>
683
+ </div>
684
+ </section>
685
+
686
+ <!-- NOUVEAU DASHBOARD AVEC HEATMAP & INDICATEURS -->
687
+ <section id="dashboard" class="tab-content">
688
+ <div class="card">
689
+ <div class="card-header">
690
+ <h3><i class="fas fa-fire"></i> Heatmap d'activité - Analyse de la persistance et du management de l'effort (persévérance)</h3>
691
+ <div class="dashboard-view-toggle">
692
+ <button class="view-btn active" data-view="combined" onclick="setDashboardView('combined')">🎯 Vue combinée</button>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- Heatmap Hebdomadaire -->
697
+ <div class="heatmap-container">
698
+ <h4 style="margin-bottom: 12px;"><i class="fas fa-calendar-week"></i> Niveaux d'activité</h4>
699
+ <div class="heatmap-grid" id="heatmapGrid"></div>
700
+ <div class="legend-heatmap">
701
+ <div class="legend-heatmap-item"><div class="legend-color-box level-0"></div><span>Aucune</span></div>
702
+ <div class="legend-heatmap-item"><div class="legend-color-box level-1"></div><span>Faible</span></div>
703
+ <div class="legend-heatmap-item"><div class="legend-color-box level-2"></div><span>Moyenne</span></div>
704
+ <div class="legend-heatmap-item"><div class="legend-color-box level-3"></div><span>Élevée</span></div>
705
+ <div class="legend-heatmap-item"><div class="legend-color-box level-4"></div><span>Intense</span></div>
706
+ </div>
707
+ </div>
708
+
709
+ <!-- Indicateurs de gestion du temps -->
710
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 24px;">
711
+ <div class="indicator-card">
712
+ <div style="font-size: 0.8rem; color: var(--gray-600);">🕖 Régularité du travail</div>
713
+ <div class="indicator-value" id="regularityScore">90%</div>
714
+ <div style="font-size: 0.7rem;">La constance de l'activité de l'apprenant dans le temps.</div>
715
+ </div>
716
+ <div class="indicator-card">
717
+ <div style="font-size: 0.8rem; color: var(--gray-600);">⏰ Gestion des échéances</div>
718
+ <div class="indicator-value" id="deadlineScore">88%</div>
719
+ <div style="font-size: 0.7rem;">La capacité de l'apprenant à respecter les délais.</div>
720
+ </div>
721
+ <div class="indicator-card">
722
+ <div style="font-size: 0.8rem; color: var(--gray-600);">⚡ Schéma d'effort</div>
723
+ <div class="effort-badge" id="effortPattern">Effort concentré (Pic d'activité jeudi/vendredi)</div>
724
+ <div style="font-size: 0.7rem; margin-top: 6px;">La dynamique temporelle de l'effort.</div>
725
+ </div>
726
+ <div class="indicator-card">
727
+ <div style="font-size: 0.8rem; color: var(--gray-600);">💪 Persistance et gestion des efforts</div>
728
+ <div class="indicator-value" id="persistenceScore">Très élevée</div>
729
+ <div style="font-size: 0.7rem;">Indice de persévérance globale</div>
730
+ </div>
731
+ </div>
732
+
733
+ <div class="chart-container">
734
+ <canvas id="progressChart"></canvas>
735
+ </div>
736
+ </div>
737
+ </section>
738
+
739
+ <!-- JOURNAL -->
740
+ <section id="journal" class="tab-content">
741
+ <div class="card"><div class="card-header"><h3>Mon journal d'apprentissage</h3><button class="btn btn-secondary" onclick="saveJournal()">Sauvegarder</button></div>
742
+ <div class="form-group"><label class="form-label">Accompli aujourd'hui</label><textarea id="done" class="form-control" rows="2"></textarea></div>
743
+ <div class="form-group"><label class="form-label">Stratégie utilisée</label><textarea id="metacognition" class="form-control" rows="2"></textarea></div>
744
+ <div id="journalEntriesList"></div></div>
745
+ </section>
746
+
747
+ <!-- NOTIFICATIONS -->
748
+ <section id="notifications" class="tab-content">
749
+ <div class="card">
750
+ <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>
751
+ <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>
752
+ <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>
753
+ <div class="chart-container"><canvas id="notificationEfficiencyChart"></canvas></div>
754
+ </div>
755
+ </section>
756
+ </div>
757
+
758
+ <script>
759
+ // Données compétences
760
+ const competencesData = [
761
+ { "id": "D-MCONJ", "label": "Marques de la conjugaison", "category": "Discours" },
762
+ { "id": "D-PDV", "label": "Points de vue adoptés", "category": "Discours" },
763
+ { "id": "D-SSENT", "label": "Compréhension des mots", "category": "Discours" },
764
+ { "id": "M-CHOI", "label": "Choix des mots et des expressions", "category": "Maîtrise" },
765
+ { "id": "M-COMP", "label": "Construction des phrases", "category": "Maîtrise" },
766
+ { "id": "M-DEV", "label": "Développement du vocabulaire", "category": "Maîtrise" }
767
+ ];
768
+
769
+ let eventsList = [];
770
+ let currentSessions = [];
771
+ let spacedChart = null;
772
+ let dashChart = null;
773
+
774
+ let profileData = {
775
+ extraversion: 3, openness: 3, conscientiousness: 4, agreeableness: 3, neuroticism: 3,
776
+ intrinsic: 3, introjected: 4
777
+ };
778
+
779
+ const eventTemplates = [
780
+ { type: "Rappel d'étude", title: "Session de révision", message: "Votre session est prévue aujourd'hui.", priority: "high" },
781
+ { type: "Conseil IA", title: "Optimisation", message: "Révisez les conjugaisons.", priority: "medium" },
782
+ { type: "Encouragement", title: "Progression", message: "80% des objectifs atteints.", priority: "low" }
783
+ ];
784
+
785
+ // SIMULATION DONNÉES HEATMAP & INDICATEURS
786
+ function generateHeatmapData() {
787
+ const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
788
+ const weeks = 4;
789
+ let matrix = [];
790
+ for(let w = 0; w < weeks; w++) {
791
+ let week = [];
792
+ for(let d = 0; d < 7; d++) {
793
+ let base = (w * 7 + d) % 10;
794
+ let level = 0;
795
+ if(base < 3) level = 1;
796
+ else if(base < 6) level = 2;
797
+ else if(base < 8) level = 3;
798
+ else level = 4;
799
+ if(d === 3 || d === 4) level = Math.min(4, level+1);
800
+ week.push(level);
801
+ }
802
+ matrix.push(week);
803
+ }
804
+ return { days, weeks: matrix };
805
+ }
806
+
807
+ function renderHeatmap() {
808
+ const container = document.getElementById('heatmapGrid');
809
+ if(!container) return;
810
+ const { days, weeks } = generateHeatmapData();
811
+ container.innerHTML = '';
812
+ for(let i = 0; i < days.length; i++) {
813
+ let dayDiv = document.createElement('div');
814
+ dayDiv.className = 'heatmap-day';
815
+ dayDiv.innerText = days[i];
816
+ container.appendChild(dayDiv);
817
+ }
818
+ for(let w = 0; w < weeks.length; w++) {
819
+ for(let d = 0; d < weeks[w].length; d++) {
820
+ let cell = document.createElement('div');
821
+ cell.className = `heatmap-cell level-${weeks[w][d]}`;
822
+ cell.title = `${days[d]} Semaine ${w+1} : Niveau ${weeks[w][d]}`;
823
+ container.appendChild(cell);
824
+ }
825
+ }
826
+ }
827
+
828
+ function updateIndicators() {
829
+ document.getElementById('regularityScore').innerText = "90%";
830
+ document.getElementById('deadlineScore').innerText = "88%";
831
+ document.getElementById('effortPattern').innerText = "Effort concentré (Pic d'activité jeudi/vendredi)";
832
+ document.getElementById('persistenceScore').innerText = "Très élevée";
833
+ }
834
+
835
+ function setDashboardView(view) {
836
+ document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
837
+ document.querySelector(`.view-btn[data-view="${view}"]`).classList.add('active');
838
+ if(view === 'combined') {
839
+ renderHeatmap();
840
+ updateIndicators();
841
+ }
842
+ }
843
+
844
+ // FONCTIONS EXISTANTES (inchangées)
845
+ function initCompetencesSelect() {
846
+ const select = document.getElementById('competence');
847
+ if(select) select.innerHTML = '<option value="comprendre_mots">Comprendre les mots</option>' + competencesData.map(c => `<option value="${c.id}">${c.label}</option>`).join('');
848
+ }
849
+
850
+ function setupRatingListeners() {
851
+ document.querySelectorAll('.big5-rating .rating-btn').forEach(btn => {
852
+ btn.addEventListener('click', function() {
853
+ const container = this.closest('.big5-rating');
854
+ const trait = container.dataset.trait;
855
+ const value = parseInt(this.dataset.value);
856
+ profileData[trait] = value;
857
+ updateRatingUI(container, value);
858
+ updateProfileUI();
859
+ saveProfileToStorage();
860
+ });
861
+ });
862
+ document.querySelectorAll('.motivation-rating .rating-btn').forEach(btn => {
863
+ btn.addEventListener('click', function() {
864
+ const container = this.closest('.motivation-rating');
865
+ const motivation = container.dataset.motivation;
866
+ const value = parseInt(this.dataset.value);
867
+ profileData[motivation] = value;
868
+ updateRatingUI(container, value);
869
+ updateProfileUI();
870
+ saveProfileToStorage();
871
+ });
872
+ });
873
+ }
874
+
875
+ function updateRatingUI(container, value) {
876
+ container.querySelectorAll('.rating-btn').forEach(btn => {
877
+ btn.classList.remove('active');
878
+ if(parseInt(btn.dataset.value) === value) btn.classList.add('active');
879
+ });
880
+ }
881
+
882
+ function updateProfileUI() {
883
+ document.getElementById('summaryExtraversion').innerText = profileData.extraversion;
884
+ document.getElementById('summaryOpenness').innerText = profileData.openness;
885
+ document.getElementById('summaryConscientiousness').innerText = profileData.conscientiousness;
886
+ document.getElementById('summaryIntrinsic').innerText = profileData.intrinsic;
887
+ document.getElementById('summaryIntrojected').innerText = profileData.introjected;
888
+ document.getElementById('neuroticismScore').innerText = profileData.neuroticism;
889
+ document.getElementById('introjectedScore').innerText = profileData.introjected;
890
+ let completed = Object.values(profileData).filter(v => v).length;
891
+ const percent = Math.round((completed / 7) * 100);
892
+ document.getElementById('profileCompletionPercent').innerText = percent + '%';
893
+ document.getElementById('profileProgressFill').style.width = percent + '%';
894
+ document.getElementById('completedCount').innerText = Math.min(completed, 5);
895
+ let level = "Débutant";
896
+ if(profileData.conscientiousness >= 4 && profileData.intrinsic >= 4) level = "Avancé";
897
+ else if(profileData.conscientiousness >= 3) level = "Intermédiaire";
898
+ document.getElementById('profileLevel').innerText = level;
899
+ const recos = [];
900
+ if(profileData.neuroticism >= 4) recos.push("💤 <strong>Qualité du sommeil:</strong> Votre niveau de névrosisme est élevé. Accordez une attention particulière à votre sommeil.");
901
+ else recos.push("💤 <strong>Qualité du sommeil:</strong> Maintenez 7-8 heures de sommeil de qualité.");
902
+ if(profileData.conscientiousness >= 4) recos.push("📅 <strong>Planification:</strong> Votre conscience est excellente.");
903
+ else recos.push("📅 <strong>Planification:</strong> Renforcez votre organisation avec des rappels.");
904
+ document.getElementById('recommendationsContainer').innerHTML = recos.map(r => `<p>${r}</p>`).join('');
905
+ }
906
+
907
+ function autoFillProfile() {
908
+ profileData = { extraversion: 4, openness: 4, conscientiousness: 5, agreeableness: 4, neuroticism: 2, intrinsic: 5, introjected: 3 };
909
+ document.querySelectorAll('.big5-rating').forEach(container => { if(profileData[container.dataset.trait]) updateRatingUI(container, profileData[container.dataset.trait]); });
910
+ document.querySelectorAll('.motivation-rating').forEach(container => { if(profileData[container.dataset.motivation]) updateRatingUI(container, profileData[container.dataset.motivation]); });
911
+ updateProfileUI();
912
+ saveProfileToStorage();
913
+ showToast("Profil automatiquement rempli !");
914
+ }
915
+
916
+ function saveProfileData() { saveProfileToStorage(); showToast("Profil sauvegardé !"); }
917
+ function finalizeProfile() { saveProfileToStorage(); showToast("Profil finalisé !"); }
918
+ function saveProfileToStorage() { localStorage.setItem('perseverAI_profile', JSON.stringify(profileData)); }
919
+ function loadProfileFromStorage() { const saved = localStorage.getItem('perseverAI_profile'); if(saved) Object.assign(profileData, JSON.parse(saved)); updateProfileUI(); }
920
+
921
+ function retentionRate(days, strength = 0.5) { return Math.exp(-days / (strength * 30)) * 100; }
922
+
923
+ function drawSpacedRepetitionCurve(sessions) {
924
+ const canvas = document.getElementById('spacedRepetitionCurve');
925
+ if(!canvas || sessions.length === 0) return;
926
+ const ctx = canvas.getContext('2d');
927
+ const container = canvas.parentElement;
928
+ const width = container.clientWidth - 40;
929
+ const height = 200;
930
+ canvas.width = width;
931
+ canvas.height = height;
932
+ ctx.clearRect(0, 0, width, height);
933
+ const startDate = sessions[0].date.getTime();
934
+ const endDate = sessions[sessions.length-1].date.getTime();
935
+ const totalDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
936
+ ctx.beginPath();
937
+ ctx.strokeStyle = '#2563eb';
938
+ ctx.lineWidth = 2.5;
939
+ ctx.setLineDash([]);
940
+ let firstPoint = true;
941
+ for(let x = 0; x <= width; x++) {
942
+ const dayProgression = (x / width) * totalDays;
943
+ const retention = retentionRate(dayProgression, 0.4);
944
+ const y = height - (retention / 100) * height;
945
+ if(firstPoint) { ctx.moveTo(x, y); firstPoint = false; }
946
+ else { ctx.lineTo(x, y); }
947
+ }
948
+ ctx.stroke();
949
+ ctx.fillStyle = 'rgba(37, 99, 235, 0.05)';
950
+ ctx.fill();
951
+ ctx.beginPath();
952
+ ctx.strokeStyle = '#10b981';
953
+ ctx.lineWidth = 1.5;
954
+ ctx.setLineDash([8, 6]);
955
+ for(let i = 0; i < sessions.length; i++) {
956
+ const x = ((sessions[i].date.getTime() - startDate) / (endDate - startDate)) * width;
957
+ if(x >= 0 && x <= width) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); }
958
+ }
959
+ ctx.setLineDash([]);
960
+ for(let i = 0; i < sessions.length; i++) {
961
+ const x = ((sessions[i].date.getTime() - startDate) / (endDate - startDate)) * width;
962
+ const dayProgression = ((sessions[i].date.getTime() - startDate) / (1000 * 60 * 60 * 24));
963
+ const retentionAtSession = retentionRate(dayProgression, 0.4);
964
+ const y = height - (retentionAtSession / 100) * height;
965
+ ctx.beginPath(); ctx.fillStyle = '#ef4444'; ctx.arc(x, y, 6, 0, 2 * Math.PI); ctx.fill();
966
+ ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(x, y, 3, 0, 2 * Math.PI); ctx.fill();
967
+ ctx.fillStyle = '#1e293b'; ctx.font = 'bold 9px Inter'; ctx.fillText(`R${i+1}`, x-5, y-8);
968
+ }
969
+ const datesDiv = document.getElementById('intervalDatesCurve');
970
+ if(datesDiv) datesDiv.innerHTML = sessions.map(s => `<span>${s.dateStr}</span>`).join('');
971
+ }
972
+
973
+ function generatePlanner() {
974
+ const competence = document.getElementById('competence')?.value || "comprendre_mots";
975
+ const competenceLabel = competencesData.find(c=>c.id===competence)?.label || "Comprendre les mots";
976
+ const startDate = new Date(document.getElementById('start')?.value || "2024-01-15");
977
+ const sessionDur = document.getElementById('sessionDuration')?.value || "20";
978
+ const method = document.querySelector('input[name="productivityMethod"]:checked')?.value || "pomodoro";
979
+ const timeSlot = document.querySelector('#timeSlotsGroup input:checked')?.value || "08:00-10:00";
980
+ const retention = document.getElementById('retentionQuality')?.value || "2";
981
+ const intervals = [1, 7, 16, 35, 70, 140];
982
+ const sessions = [];
983
+ for(let i = 0; i < intervals.length; i++) {
984
+ let currentDate = new Date(startDate);
985
+ if(i > 0) currentDate.setDate(startDate.getDate() + intervals[i-1]);
986
+ else currentDate = new Date(startDate);
987
+ const sessionTypes = ["Apprentissage", "Consolidation", "Consolidation", "Maintien", "Maintien", "Maintien"];
988
+ const strategies = ["Focus intense", "Révision active", "Révision active", "Révision active", "Révision active", "Révision active"];
989
+ 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 });
990
+ }
991
+ currentSessions = sessions;
992
+ renderPlanningTable(sessions);
993
+ updatePlanningStats(sessions, retention, sessionDur);
994
+ drawSpacedRepetitionCurve(sessions);
995
+ showToast("Planning personnalisé généré !");
996
+ showTab('planner');
997
+ }
998
+
999
+ function generateDefaultPlanning() {
1000
+ const startDate = new Date("2024-01-17");
1001
+ const intervals = [1, 7, 16, 35, 70, 140];
1002
+ const sessions = [];
1003
+ for(let i = 0; i < intervals.length; i++) {
1004
+ let currentDate = new Date(startDate);
1005
+ if(i > 0) currentDate.setDate(startDate.getDate() + (i===1?1: intervals[i-1]));
1006
+ else currentDate = new Date(startDate);
1007
+ const sessionTypes = ["Apprentissage", "Consolidation", "Consolidation", "Maintien", "Maintien", "Maintien"];
1008
+ const strategies = ["Focus intense", "Révision active", "Révision active", "Révision active", "Révision active", "Révision active"];
1009
+ 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: strategies[i], productivity: "Pomodoro", optimalTime: "08:00-10:00" });
1010
+ }
1011
+ currentSessions = sessions;
1012
+ renderPlanningTable(sessions);
1013
+ updatePlanningStats(sessions, "2", "20");
1014
+ drawSpacedRepetitionCurve(sessions);
1015
+ }
1016
+
1017
+ function renderPlanningTable(sessions) {
1018
+ const tbody = document.getElementById('sessionsTableBody');
1019
+ if(!tbody) return;
1020
+ 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('');
1021
+ }
1022
+
1023
+ function updatePlanningStats(sessions, quality, duration) {
1024
+ document.getElementById('statSessions').innerText = sessions.length;
1025
+ 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; }
1026
+ const qualityMap = {'0':'1/4','1':'2/4','2':'3/4','3':'4/4'};
1027
+ document.getElementById('statQuality').innerText = qualityMap[quality] || "3/4";
1028
+ document.getElementById('statDuration').innerText = duration + "min";
1029
+ }
1030
+
1031
+ function exportPlanning() {
1032
+ let csv = "Date,Session,Compétence,Durée,Intervalle,Type,Stratégie,Productivité,Heure Optimale\n";
1033
+ currentSessions.forEach(s => { csv += `"${s.dateStr}","R${s.id}","${s.competence}","${s.duration}","${s.interval}","${s.type}","${s.strategy}","${s.productivity}","${s.optimalTime}"\n`; });
1034
+ const blob = new Blob([csv], {type: 'text/csv'});
1035
+ const link = document.createElement('a');
1036
+ link.href = URL.createObjectURL(blob);
1037
+ link.download = 'planning_perseverai.csv';
1038
+ link.click();
1039
+ showToast("Planning exporté en CSV");
1040
+ }
1041
+
1042
+ function generateRandomEvent() {
1043
+ const template = eventTemplates[Math.floor(Math.random() * eventTemplates.length)];
1044
+ 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' };
1045
+ eventsList.unshift(newEvent);
1046
+ saveEvents();
1047
+ renderEventsTable();
1048
+ updateEventStats();
1049
+ showToast(`Nouvel événement: ${template.title}`);
1050
+ }
1051
+
1052
+ function executeAction(eventId, actionType, actionLabel) {
1053
+ const eventIndex = eventsList.findIndex(e => e.id == eventId);
1054
+ if(eventIndex === -1) return;
1055
+ eventsList[eventIndex].status = actionType === 'ACCEPT' ? 'accepted' : (actionType === 'REJECT' ? 'rejected' : 'hold');
1056
+ renderEventsTable();
1057
+ updateEventStats();
1058
+ saveEvents();
1059
+ showToast(`${actionLabel}`);
1060
+ }
1061
+
1062
+ function renderEventsTable() {
1063
+ const tbody = document.getElementById('notificationsTableBody');
1064
+ if(!tbody) return;
1065
+ if(eventsList.length === 0) { tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;">Aucun événement</td></tr>'; return; }
1066
+ 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('');
1067
+ }
1068
+
1069
+ function updateEventStats() {
1070
+ document.getElementById('totalEvents').innerText = eventsList.length;
1071
+ document.getElementById('pendingEvents').innerText = eventsList.filter(e => e.status === 'pending').length;
1072
+ document.getElementById('acceptedEvents').innerText = eventsList.filter(e => e.status === 'accepted').length;
1073
+ 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];
1074
+ efficiencyChart?.update();
1075
+ }
1076
+
1077
+ let efficiencyChart = null;
1078
+ function createChart() {
1079
+ const ctx = document.getElementById('notificationEfficiencyChart')?.getContext('2d');
1080
+ 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 } });
1081
+ }
1082
+
1083
+ function saveJournal() { if(document.getElementById('done')?.value) { let journal = JSON.parse(localStorage.getItem('journal') || '[]'); journal.unshift({ date: new Date().toLocaleString(), done: document.getElementById('done').value }); localStorage.setItem('journal', JSON.stringify(journal)); showToast("Journal sauvegardé"); document.getElementById('done').value = ''; } }
1084
+ function saveEvents() { localStorage.setItem('eventsList', JSON.stringify(eventsList)); }
1085
+ function loadSavedData() { const saved = localStorage.getItem('eventsList'); if(saved) eventsList = JSON.parse(saved); }
1086
+
1087
+ function showTab(tabId) {
1088
+ document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
1089
+ document.getElementById(tabId).classList.add('active');
1090
+ document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
1091
+ if(window.event?.target) window.event.target.classList.add('active');
1092
+ if(tabId === 'dashboard') {
1093
+ renderHeatmap();
1094
+ updateIndicators();
1095
+ const ctx = document.getElementById('progressChart')?.getContext('2d');
1096
+ if(ctx && !dashChart) dashChart = new Chart(ctx, { type:'line', data:{ labels:['Sem1','Sem2','Sem3','Sem4'], datasets:[{ label:'Progression', data:[30,45,60,75], borderColor:'#2563eb' }] } });
1097
+ else if(dashChart) dashChart.update();
1098
+ }
1099
+ if(tabId === 'planner') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); }
1100
+ if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); }
1101
+ if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); }
1102
+ }
1103
+
1104
+ 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); }
1105
+
1106
+ document.addEventListener('DOMContentLoaded', () => {
1107
+ initCompetencesSelect();
1108
+ loadSavedData();
1109
+ renderEventsTable();
1110
+ updateEventStats();
1111
+ createChart();
1112
+ initProfileModule();
1113
+ const retentionSlider = document.getElementById('retentionQuality');
1114
+ if(retentionSlider) retentionSlider.addEventListener('input', function() {
1115
+ const val = parseInt(this.value);
1116
+ const messages = {0: "0 - Faible", 1: "1 - Moyenne", 2: "2 - Bon - Consolidation progressive", 3: "3 - Excellente"};
1117
+ document.getElementById('retentionValueDisplay').innerText = messages[val];
1118
+ });
1119
+ generateDefaultPlanning();
1120
+ loadProfileFromStorage();
1121
+ setupRatingListeners();
1122
+ updateProfileUI();
1123
+ });
1124
+
1125
+ function initProfileModule() { loadProfileFromStorage(); setupRatingListeners(); updateProfileUI(); }
1126
+ window.addEventListener('resize', () => { if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); });
1127
+ </script>
1128
+ </body>
1129
+ </html>