Hugging Face's logo

Spaces:
OUAREDAEK
/
SRL
Sleeping

App Files Community
OUAREDAEK commited on
Commit
7285565
·
verified ·
1 Parent(s): 25b5cee

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. index-old2.html +0 -0
  2. index-old3.html +2406 -0
  3. index.html +0 -0
index-old2.html ADDED
The diff for this file is too large to render. See raw diff
 
index-old3.html ADDED
@@ -0,0 +1,2406 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Compagnon Pédagogique - Apprentissage Autorégulé Personnalisé</title>
7
+
8
+ <!-- Chart.js pour les visualisations -->
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <!-- Font Awesome pour les icônes -->
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+
13
+ <style>
14
+ :root {
15
+ --primary-color: #3b82f6;
16
+ --secondary-color: #10b981;
17
+ --accent-color: #8b5cf6;
18
+ --warning-color: #f59e0b;
19
+ --danger-color: #ef4444;
20
+ --dark-color: #1e293b;
21
+ --light-color: #f8fafc;
22
+ --gray-color: #64748b;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
33
+ background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
34
+ color: var(--dark-color);
35
+ line-height: 1.6;
36
+ min-height: 100vh;
37
+ }
38
+
39
+ .container {
40
+ max-width: 1400px;
41
+ margin: 0 auto;
42
+ padding: 20px;
43
+ }
44
+
45
+ /* Header */
46
+ .header {
47
+ background: linear-gradient(135deg, var(--dark-color) 0%, #0f172a 100%);
48
+ color: white;
49
+ padding: 2rem;
50
+ border-radius: 15px;
51
+ margin-bottom: 2rem;
52
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
53
+ position: relative;
54
+ overflow: hidden;
55
+ }
56
+
57
+ .header::before {
58
+ content: '';
59
+ position: absolute;
60
+ top: 0;
61
+ left: 0;
62
+ right: 0;
63
+ height: 4px;
64
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
65
+ }
66
+
67
+ .header h1 {
68
+ font-size: 2.5rem;
69
+ margin-bottom: 0.5rem;
70
+ display: flex;
71
+ align-items: center;
72
+ gap: 15px;
73
+ }
74
+
75
+ .header p {
76
+ font-size: 1.1rem;
77
+ opacity: 0.9;
78
+ max-width: 800px;
79
+ }
80
+
81
+ .badge {
82
+ background: var(--primary-color);
83
+ color: white;
84
+ padding: 5px 15px;
85
+ border-radius: 20px;
86
+ font-size: 0.9rem;
87
+ display: inline-block;
88
+ margin-top: 10px;
89
+ }
90
+
91
+ /* Navigation */
92
+ .nav-tabs {
93
+ display: flex;
94
+ background: white;
95
+ border-radius: 12px;
96
+ overflow: hidden;
97
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
98
+ margin-bottom: 2rem;
99
+ flex-wrap: wrap;
100
+ }
101
+
102
+ .nav-tab {
103
+ flex: 1;
104
+ min-width: 180px;
105
+ padding: 1.2rem;
106
+ border: none;
107
+ background: transparent;
108
+ color: var(--gray-color);
109
+ font-size: 1rem;
110
+ font-weight: 600;
111
+ cursor: pointer;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ gap: 10px;
116
+ transition: all 0.3s ease;
117
+ }
118
+
119
+ .nav-tab:hover {
120
+ background: #f8fafc;
121
+ color: var(--primary-color);
122
+ }
123
+
124
+ .nav-tab.active {
125
+ background: var(--primary-color);
126
+ color: white;
127
+ box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
128
+ }
129
+
130
+ /* Sections */
131
+ .tab-content {
132
+ display: none;
133
+ animation: fadeIn 0.5s ease;
134
+ }
135
+
136
+ .tab-content.active {
137
+ display: block;
138
+ }
139
+
140
+ @keyframes fadeIn {
141
+ from { opacity: 0; transform: translateY(10px); }
142
+ to { opacity: 1; transform: translateY(0); }
143
+ }
144
+
145
+ .card {
146
+ background: white;
147
+ border-radius: 15px;
148
+ padding: 2rem;
149
+ margin-bottom: 2rem;
150
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
151
+ border-left: 5px solid var(--primary-color);
152
+ }
153
+
154
+ .card-header {
155
+ display: flex;
156
+ justify-content: space-between;
157
+ align-items: center;
158
+ margin-bottom: 1.5rem;
159
+ padding-bottom: 1rem;
160
+ border-bottom: 2px solid #f1f5f9;
161
+ }
162
+
163
+ .card-header h3 {
164
+ font-size: 1.5rem;
165
+ color: var(--dark-color);
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 10px;
169
+ }
170
+
171
+ /* Questionnaire Styles */
172
+ .questionnaire-section {
173
+ margin-bottom: 2.5rem;
174
+ padding: 1.5rem;
175
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
176
+ border-radius: 12px;
177
+ }
178
+
179
+ .questionnaire-header {
180
+ display: flex;
181
+ align-items: center;
182
+ gap: 15px;
183
+ margin-bottom: 1.5rem;
184
+ padding-bottom: 1rem;
185
+ border-bottom: 2px solid #e2e8f0;
186
+ }
187
+
188
+ .questionnaire-icon {
189
+ width: 50px;
190
+ height: 50px;
191
+ border-radius: 10px;
192
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ font-size: 1.5rem;
197
+ color: white;
198
+ }
199
+
200
+ .questionnaire-title {
201
+ font-size: 1.4rem;
202
+ color: var(--dark-color);
203
+ font-weight: 600;
204
+ }
205
+
206
+ .questionnaire-description {
207
+ color: var(--gray-color);
208
+ font-size: 0.95rem;
209
+ margin-top: 5px;
210
+ }
211
+
212
+ .question-item {
213
+ background: white;
214
+ padding: 1.5rem;
215
+ border-radius: 10px;
216
+ margin-bottom: 1.5rem;
217
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
218
+ border-left: 4px solid #e2e8f0;
219
+ transition: all 0.3s;
220
+ }
221
+
222
+ .question-item:hover {
223
+ border-left-color: var(--primary-color);
224
+ transform: translateY(-2px);
225
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
226
+ }
227
+
228
+ .question-text {
229
+ font-size: 1.1rem;
230
+ font-weight: 500;
231
+ color: var(--dark-color);
232
+ margin-bottom: 1rem;
233
+ line-height: 1.5;
234
+ }
235
+
236
+ .scale-options {
237
+ display: flex;
238
+ justify-content: space-between;
239
+ gap: 10px;
240
+ margin-top: 1rem;
241
+ }
242
+
243
+ .scale-option {
244
+ flex: 1;
245
+ text-align: center;
246
+ padding: 10px;
247
+ border: 2px solid #e2e8f0;
248
+ border-radius: 8px;
249
+ cursor: pointer;
250
+ transition: all 0.3s;
251
+ background: white;
252
+ }
253
+
254
+ .scale-option:hover {
255
+ border-color: var(--primary-color);
256
+ background: rgba(59, 130, 246, 0.05);
257
+ }
258
+
259
+ .scale-option.selected {
260
+ border-color: var(--primary-color);
261
+ background: rgba(59, 130, 246, 0.1);
262
+ font-weight: 600;
263
+ color: var(--primary-color);
264
+ }
265
+
266
+ .scale-label {
267
+ display: block;
268
+ font-size: 0.9rem;
269
+ color: var(--gray-color);
270
+ margin-top: 5px;
271
+ }
272
+
273
+ .progress-section {
274
+ margin-top: 2rem;
275
+ padding: 1.5rem;
276
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
277
+ border-radius: 12px;
278
+ border-left: 5px solid var(--primary-color);
279
+ }
280
+
281
+ .progress-header {
282
+ display: flex;
283
+ justify-content: space-between;
284
+ align-items: center;
285
+ margin-bottom: 1rem;
286
+ }
287
+
288
+ .progress-title {
289
+ font-size: 1.2rem;
290
+ color: var(--dark-color);
291
+ font-weight: 600;
292
+ }
293
+
294
+ .progress-percentage {
295
+ font-size: 1.3rem;
296
+ font-weight: bold;
297
+ color: var(--primary-color);
298
+ }
299
+
300
+ .progress-bar-container {
301
+ height: 12px;
302
+ background: #e2e8f0;
303
+ border-radius: 6px;
304
+ overflow: hidden;
305
+ margin: 15px 0;
306
+ }
307
+
308
+ .progress-bar-fill {
309
+ height: 100%;
310
+ background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
311
+ border-radius: 6px;
312
+ transition: width 0.5s ease;
313
+ width: 0%;
314
+ }
315
+
316
+ .questionnaire-progress {
317
+ display: flex;
318
+ justify-content: space-between;
319
+ font-size: 0.9rem;
320
+ color: var(--gray-color);
321
+ }
322
+
323
+ .profile-summary {
324
+ display: grid;
325
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
326
+ gap: 20px;
327
+ margin-top: 2rem;
328
+ }
329
+
330
+ .profile-card {
331
+ background: white;
332
+ padding: 1.5rem;
333
+ border-radius: 12px;
334
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
335
+ }
336
+
337
+ .profile-card-header {
338
+ display: flex;
339
+ align-items: center;
340
+ gap: 10px;
341
+ margin-bottom: 1rem;
342
+ padding-bottom: 0.8rem;
343
+ border-bottom: 2px solid #f1f5f9;
344
+ }
345
+
346
+ .profile-card-icon {
347
+ width: 40px;
348
+ height: 40px;
349
+ border-radius: 8px;
350
+ display: flex;
351
+ align-items: center;
352
+ justify-content: center;
353
+ font-size: 1.2rem;
354
+ color: white;
355
+ }
356
+
357
+ .profile-card-title {
358
+ font-size: 1.2rem;
359
+ font-weight: 600;
360
+ color: var(--dark-color);
361
+ }
362
+
363
+ .trait-list {
364
+ display: flex;
365
+ flex-direction: column;
366
+ gap: 10px;
367
+ }
368
+
369
+ .trait-item {
370
+ display: flex;
371
+ justify-content: space-between;
372
+ align-items: center;
373
+ padding: 10px;
374
+ background: #f8fafc;
375
+ border-radius: 8px;
376
+ }
377
+
378
+ .trait-name {
379
+ font-weight: 500;
380
+ color: var(--dark-color);
381
+ }
382
+
383
+ .trait-value {
384
+ font-weight: 600;
385
+ color: var(--primary-color);
386
+ }
387
+
388
+ .recommendations-section {
389
+ background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
390
+ border-radius: 12px;
391
+ padding: 1.5rem;
392
+ margin-top: 2rem;
393
+ border-left: 5px solid var(--warning-color);
394
+ }
395
+
396
+ .recommendation-item {
397
+ display: flex;
398
+ align-items: flex-start;
399
+ gap: 15px;
400
+ margin-bottom: 1rem;
401
+ padding: 1rem;
402
+ background: rgba(255, 255, 255, 0.7);
403
+ border-radius: 8px;
404
+ }
405
+
406
+ .recommendation-icon {
407
+ font-size: 1.5rem;
408
+ color: var(--warning-color);
409
+ }
410
+
411
+ .motivation-chart {
412
+ height: 300px;
413
+ margin-top: 1.5rem;
414
+ }
415
+
416
+ .section-completion {
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 10px;
420
+ margin-top: 1rem;
421
+ padding: 10px;
422
+ background: rgba(16, 185, 129, 0.1);
423
+ border-radius: 8px;
424
+ }
425
+
426
+ .section-complete {
427
+ background: rgba(16, 185, 129, 0.1);
428
+ border-left: 4px solid var(--secondary-color);
429
+ }
430
+
431
+ .section-incomplete {
432
+ background: rgba(239, 68, 68, 0.1);
433
+ border-left: 4px solid var(--danger-color);
434
+ }
435
+
436
+ /* Modal pour la saisie */
437
+ .modal {
438
+ display: none;
439
+ position: fixed;
440
+ top: 0;
441
+ left: 0;
442
+ width: 100%;
443
+ height: 100%;
444
+ background: rgba(0, 0, 0, 0.5);
445
+ z-index: 1000;
446
+ align-items: center;
447
+ justify-content: center;
448
+ }
449
+
450
+ .modal-content {
451
+ background: white;
452
+ border-radius: 15px;
453
+ padding: 2rem;
454
+ width: 90%;
455
+ max-width: 600px;
456
+ max-height: 80vh;
457
+ overflow-y: auto;
458
+ animation: slideIn 0.3s ease;
459
+ }
460
+
461
+ @keyframes slideIn {
462
+ from { transform: translateY(-20px); opacity: 0; }
463
+ to { transform: translateY(0); opacity: 1; }
464
+ }
465
+
466
+ .modal-header {
467
+ display: flex;
468
+ justify-content: space-between;
469
+ align-items: center;
470
+ margin-bottom: 1.5rem;
471
+ padding-bottom: 1rem;
472
+ border-bottom: 2px solid #f1f5f9;
473
+ }
474
+
475
+ .modal-title {
476
+ font-size: 1.5rem;
477
+ color: var(--dark-color);
478
+ }
479
+
480
+ .modal-close {
481
+ background: none;
482
+ border: none;
483
+ font-size: 1.5rem;
484
+ color: var(--gray-color);
485
+ cursor: pointer;
486
+ }
487
+
488
+ /* Heatmap d'activité */
489
+ .heatmap-container {
490
+ margin-top: 2rem;
491
+ }
492
+
493
+ .heatmap-header {
494
+ display: flex;
495
+ justify-content: space-between;
496
+ align-items: center;
497
+ margin-bottom: 1.5rem;
498
+ }
499
+
500
+ .heatmap-title {
501
+ font-size: 1.3rem;
502
+ color: var(--dark-color);
503
+ display: flex;
504
+ align-items: center;
505
+ gap: 10px;
506
+ }
507
+
508
+ .heatmap-controls {
509
+ display: flex;
510
+ gap: 10px;
511
+ }
512
+
513
+ .heatmap-period {
514
+ padding: 8px 15px;
515
+ border: 2px solid #e2e8f0;
516
+ border-radius: 8px;
517
+ background: #f8fafc;
518
+ cursor: pointer;
519
+ transition: all 0.3s;
520
+ }
521
+
522
+ .heatmap-period:hover {
523
+ border-color: var(--primary-color);
524
+ }
525
+
526
+ .heatmap-period.active {
527
+ background: var(--primary-color);
528
+ color: white;
529
+ border-color: var(--primary-color);
530
+ }
531
+
532
+ .heatmap-grid {
533
+ display: grid;
534
+ grid-template-columns: auto repeat(7, 1fr);
535
+ gap: 8px;
536
+ margin-top: 1rem;
537
+ }
538
+
539
+ .heatmap-day-label {
540
+ text-align: right;
541
+ padding: 10px;
542
+ font-weight: 600;
543
+ color: var(--dark-color);
544
+ }
545
+
546
+ .heatmap-cell {
547
+ aspect-ratio: 1;
548
+ border-radius: 4px;
549
+ display: flex;
550
+ align-items: center;
551
+ justify-content: center;
552
+ font-size: 0.8rem;
553
+ font-weight: bold;
554
+ cursor: pointer;
555
+ transition: transform 0.2s;
556
+ }
557
+
558
+ .heatmap-cell:hover {
559
+ transform: scale(1.1);
560
+ z-index: 10;
561
+ }
562
+
563
+ .heatmap-intensity-0 { background: #f1f5f9; color: var(--gray-color); }
564
+ .heatmap-intensity-1 { background: #dbeafe; color: var(--dark-color); }
565
+ .heatmap-intensity-2 { background: #93c5fd; color: white; }
566
+ .heatmap-intensity-3 { background: #3b82f6; color: white; }
567
+ .heatmap-intensity-4 { background: #1d4ed8; color: white; }
568
+
569
+ .heatmap-week-label {
570
+ text-align: center;
571
+ padding: 5px;
572
+ font-size: 0.9rem;
573
+ color: var(--gray-color);
574
+ }
575
+
576
+ .heatmap-legend {
577
+ display: flex;
578
+ justify-content: center;
579
+ align-items: center;
580
+ gap: 15px;
581
+ margin-top: 1.5rem;
582
+ padding-top: 1.5rem;
583
+ border-top: 2px solid #f1f5f9;
584
+ }
585
+
586
+ .legend-item {
587
+ display: flex;
588
+ align-items: center;
589
+ gap: 5px;
590
+ }
591
+
592
+ .legend-color {
593
+ width: 20px;
594
+ height: 20px;
595
+ border-radius: 4px;
596
+ }
597
+
598
+ /* Indicateurs de gestion du temps */
599
+ .time-management-stats {
600
+ display: grid;
601
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
602
+ gap: 20px;
603
+ margin-top: 2rem;
604
+ }
605
+
606
+ .time-stat-card {
607
+ background: white;
608
+ border-radius: 12px;
609
+ padding: 1.5rem;
610
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
611
+ border-top: 4px solid var(--secondary-color);
612
+ }
613
+
614
+ .time-stat-header {
615
+ display: flex;
616
+ align-items: center;
617
+ gap: 10px;
618
+ margin-bottom: 1rem;
619
+ }
620
+
621
+ .time-stat-icon {
622
+ width: 40px;
623
+ height: 40px;
624
+ border-radius: 10px;
625
+ display: flex;
626
+ align-items: center;
627
+ justify-content: center;
628
+ font-size: 1.2rem;
629
+ color: white;
630
+ }
631
+
632
+ .time-stat-value {
633
+ font-size: 2.5rem;
634
+ font-weight: bold;
635
+ color: var(--secondary-color);
636
+ margin: 10px 0;
637
+ }
638
+
639
+ .time-stat-description {
640
+ color: var(--gray-color);
641
+ font-size: 0.9rem;
642
+ margin-top: 5px;
643
+ }
644
+
645
+ .progress-circle {
646
+ width: 100px;
647
+ height: 100px;
648
+ position: relative;
649
+ margin: 0 auto;
650
+ }
651
+
652
+ .progress-circle svg {
653
+ width: 100%;
654
+ height: 100%;
655
+ }
656
+
657
+ .progress-text {
658
+ position: absolute;
659
+ top: 50%;
660
+ left: 50%;
661
+ transform: translate(-50%, -50%);
662
+ font-size: 1.5rem;
663
+ font-weight: bold;
664
+ color: var(--secondary-color);
665
+ }
666
+
667
+ /* Effort Pattern */
668
+ .effort-pattern {
669
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
670
+ border-radius: 12px;
671
+ padding: 1.5rem;
672
+ margin-top: 2rem;
673
+ }
674
+
675
+ .pattern-badge {
676
+ display: inline-block;
677
+ padding: 8px 15px;
678
+ background: linear-gradient(135deg, #f59e0b, #d97706);
679
+ color: white;
680
+ border-radius: 20px;
681
+ font-weight: bold;
682
+ margin-bottom: 1rem;
683
+ }
684
+
685
+ .pattern-details {
686
+ display: grid;
687
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
688
+ gap: 15px;
689
+ margin-top: 1rem;
690
+ }
691
+
692
+ .pattern-item {
693
+ background: white;
694
+ padding: 1rem;
695
+ border-radius: 8px;
696
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
697
+ }
698
+
699
+ .pattern-label {
700
+ font-size: 0.9rem;
701
+ color: var(--gray-color);
702
+ margin-bottom: 5px;
703
+ }
704
+
705
+ .pattern-value {
706
+ font-size: 1.1rem;
707
+ font-weight: bold;
708
+ color: var(--dark-color);
709
+ }
710
+
711
+ /* Persistance */
712
+ .persistence-section {
713
+ background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
714
+ border-radius: 12px;
715
+ padding: 1.5rem;
716
+ margin-top: 2rem;
717
+ border-left: 5px solid #f59e0b;
718
+ }
719
+
720
+ .persistence-header {
721
+ display: flex;
722
+ align-items: center;
723
+ gap: 10px;
724
+ margin-bottom: 1rem;
725
+ }
726
+
727
+ .persistence-level {
728
+ font-size: 1.5rem;
729
+ font-weight: bold;
730
+ color: #d97706;
731
+ }
732
+
733
+ .persistence-details {
734
+ margin-top: 1rem;
735
+ }
736
+
737
+ .persistence-item {
738
+ display: flex;
739
+ align-items: center;
740
+ gap: 10px;
741
+ margin-bottom: 10px;
742
+ padding: 8px;
743
+ background: rgba(255, 255, 255, 0.5);
744
+ border-radius: 8px;
745
+ }
746
+
747
+ /* Form Elements */
748
+ .form-group {
749
+ margin-bottom: 1.5rem;
750
+ }
751
+
752
+ .form-label {
753
+ display: block;
754
+ margin-bottom: 0.5rem;
755
+ font-weight: 600;
756
+ color: var(--dark-color);
757
+ display: flex;
758
+ align-items: center;
759
+ gap: 8px;
760
+ }
761
+
762
+ .form-control {
763
+ width: 100%;
764
+ padding: 12px 15px;
765
+ border: 2px solid #e2e8f0;
766
+ border-radius: 10px;
767
+ font-size: 1rem;
768
+ transition: all 0.3s;
769
+ background: #f8fafc;
770
+ }
771
+
772
+ .form-control:focus {
773
+ outline: none;
774
+ border-color: var(--primary-color);
775
+ background: white;
776
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
777
+ }
778
+
779
+ .form-row {
780
+ display: flex;
781
+ gap: 20px;
782
+ margin-bottom: 1.5rem;
783
+ }
784
+
785
+ .form-col {
786
+ flex: 1;
787
+ }
788
+
789
+ /* Buttons */
790
+ .btn {
791
+ padding: 12px 25px;
792
+ border: none;
793
+ border-radius: 10px;
794
+ font-size: 1rem;
795
+ font-weight: 600;
796
+ cursor: pointer;
797
+ transition: all 0.3s;
798
+ display: inline-flex;
799
+ align-items: center;
800
+ justify-content: center;
801
+ gap: 10px;
802
+ }
803
+
804
+ .btn-primary {
805
+ background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
806
+ color: white;
807
+ }
808
+
809
+ .btn-primary:hover {
810
+ transform: translateY(-2px);
811
+ box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
812
+ }
813
+
814
+ .btn-secondary {
815
+ background: var(--secondary-color);
816
+ color: white;
817
+ }
818
+
819
+ .btn-large {
820
+ padding: 15px 30px;
821
+ font-size: 1.1rem;
822
+ }
823
+
824
+ /* Flashcard Application */
825
+ .flashcard-section {
826
+ margin-top: 2rem;
827
+ border-top: 2px solid #f1f5f9;
828
+ padding-top: 2rem;
829
+ }
830
+
831
+ .flashcard-container {
832
+ max-width: 800px;
833
+ margin: 0 auto;
834
+ }
835
+
836
+ .flashcard {
837
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
838
+ border-radius: 15px;
839
+ padding: 3rem 2rem;
840
+ margin: 2rem 0;
841
+ min-height: 300px;
842
+ display: flex;
843
+ flex-direction: column;
844
+ justify-content: center;
845
+ align-items: center;
846
+ position: relative;
847
+ cursor: pointer;
848
+ transition: all 0.3s;
849
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
850
+ border: 2px solid #e2e8f0;
851
+ }
852
+
853
+ .flashcard:hover {
854
+ transform: translateY(-5px);
855
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
856
+ }
857
+
858
+ .flashcard.flipped {
859
+ background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
860
+ }
861
+
862
+ .flashcard-front, .flashcard-back {
863
+ text-align: center;
864
+ width: 100%;
865
+ }
866
+
867
+ .flashcard-category {
868
+ position: absolute;
869
+ top: 15px;
870
+ left: 15px;
871
+ background: var(--primary-color);
872
+ color: white;
873
+ padding: 5px 15px;
874
+ border-radius: 20px;
875
+ font-size: 0.8rem;
876
+ }
877
+
878
+ .flashcard-content {
879
+ font-size: 1.5rem;
880
+ font-weight: 600;
881
+ color: var(--dark-color);
882
+ margin: 1.5rem 0;
883
+ line-height: 1.6;
884
+ }
885
+
886
+ .flashcard-example {
887
+ font-size: 1rem;
888
+ color: var(--gray-color);
889
+ font-style: italic;
890
+ margin-top: 1rem;
891
+ border-left: 3px solid var(--secondary-color);
892
+ padding-left: 15px;
893
+ }
894
+
895
+ .flashcard-stats {
896
+ position: absolute;
897
+ top: 15px;
898
+ right: 15px;
899
+ display: flex;
900
+ gap: 10px;
901
+ align-items: center;
902
+ }
903
+
904
+ .flashcard-score {
905
+ background: #10b981;
906
+ color: white;
907
+ padding: 5px 10px;
908
+ border-radius: 15px;
909
+ font-size: 0.8rem;
910
+ font-weight: bold;
911
+ }
912
+
913
+ .flashcard-difficulty {
914
+ background: #f59e0b;
915
+ color: white;
916
+ padding: 5px 10px;
917
+ border-radius: 15px;
918
+ font-size: 0.8rem;
919
+ }
920
+
921
+ .flashcard-controls {
922
+ display: flex;
923
+ justify-content: center;
924
+ gap: 15px;
925
+ margin-top: 2rem;
926
+ }
927
+
928
+ .flashcard-btn {
929
+ padding: 10px 25px;
930
+ border: none;
931
+ border-radius: 10px;
932
+ font-size: 1rem;
933
+ font-weight: 600;
934
+ cursor: pointer;
935
+ transition: all 0.3s;
936
+ display: flex;
937
+ align-items: center;
938
+ gap: 8px;
939
+ }
940
+
941
+ .flashcard-btn.easy {
942
+ background: #10b981;
943
+ color: white;
944
+ }
945
+
946
+ .flashcard-btn.medium {
947
+ background: #f59e0b;
948
+ color: white;
949
+ }
950
+
951
+ .flashcard-btn.hard {
952
+ background: #ef4444;
953
+ color: white;
954
+ }
955
+
956
+ .flashcard-btn:hover {
957
+ transform: translateY(-2px);
958
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
959
+ }
960
+
961
+ .flashcard-progress {
962
+ margin-top: 2rem;
963
+ text-align: center;
964
+ }
965
+
966
+ .progress-bar {
967
+ height: 8px;
968
+ background: #e2e8f0;
969
+ border-radius: 4px;
970
+ margin: 10px 0;
971
+ overflow: hidden;
972
+ }
973
+
974
+ .progress-fill {
975
+ height: 100%;
976
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
977
+ border-radius: 4px;
978
+ transition: width 0.3s ease;
979
+ }
980
+
981
+ .flashcard-stats-summary {
982
+ display: grid;
983
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
984
+ gap: 15px;
985
+ margin-top: 2rem;
986
+ }
987
+
988
+ .flashcard-stat-item {
989
+ background: white;
990
+ padding: 1.5rem;
991
+ border-radius: 10px;
992
+ text-align: center;
993
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
994
+ }
995
+
996
+ /* Productivity Options */
997
+ .productivity-options {
998
+ display: flex;
999
+ gap: 15px;
1000
+ margin-top: 10px;
1001
+ }
1002
+
1003
+ .productivity-option {
1004
+ flex: 1;
1005
+ padding: 15px;
1006
+ border: 2px solid #e2e8f0;
1007
+ border-radius: 10px;
1008
+ text-align: center;
1009
+ cursor: pointer;
1010
+ transition: all 0.3s;
1011
+ }
1012
+
1013
+ .productivity-option:hover {
1014
+ border-color: var(--primary-color);
1015
+ background: rgba(59, 130, 246, 0.05);
1016
+ }
1017
+
1018
+ .productivity-option.selected {
1019
+ border-color: var(--primary-color);
1020
+ background: rgba(59, 130, 246, 0.1);
1021
+ box-shadow: 0 5px 15px rgba(59, 130, 246, 0.1);
1022
+ }
1023
+
1024
+ .productivity-icon {
1025
+ font-size: 1.5rem;
1026
+ margin-bottom: 8px;
1027
+ display: block;
1028
+ }
1029
+
1030
+ /* Energy Pattern */
1031
+ .energy-patterns {
1032
+ display: flex;
1033
+ gap: 15px;
1034
+ margin-top: 10px;
1035
+ }
1036
+
1037
+ .energy-pattern {
1038
+ flex: 1;
1039
+ padding: 15px;
1040
+ border: 2px solid #e2e8f0;
1041
+ border-radius: 10px;
1042
+ text-align: center;
1043
+ cursor: pointer;
1044
+ transition: all 0.3s;
1045
+ }
1046
+
1047
+ .energy-pattern:hover {
1048
+ border-color: var(--secondary-color);
1049
+ background: rgba(16, 185, 129, 0.05);
1050
+ }
1051
+
1052
+ .energy-pattern.selected {
1053
+ border-color: var(--secondary-color);
1054
+ background: rgba(16, 185, 129, 0.1);
1055
+ box-shadow: 0 5px 15px rgba(16, 185, 129, 0.1);
1056
+ }
1057
+
1058
+ /* Time Slots */
1059
+ .time-slots {
1060
+ display: flex;
1061
+ flex-wrap: wrap;
1062
+ gap: 10px;
1063
+ margin-top: 10px;
1064
+ }
1065
+
1066
+ .time-slot {
1067
+ padding: 10px 20px;
1068
+ border: 2px solid #e2e8f0;
1069
+ border-radius: 8px;
1070
+ cursor: pointer;
1071
+ transition: all 0.3s;
1072
+ text-align: center;
1073
+ min-width: 80px;
1074
+ }
1075
+
1076
+ .time-slot:hover {
1077
+ border-color: var(--accent-color);
1078
+ background: rgba(139, 92, 246, 0.05);
1079
+ }
1080
+
1081
+ .time-slot.selected {
1082
+ border-color: var(--accent-color);
1083
+ background: rgba(139, 92, 246, 0.1);
1084
+ box-shadow: 0 3px 10px rgba(139, 92, 246, 0.1);
1085
+ }
1086
+
1087
+ /* Visualizations */
1088
+ .visualization-container {
1089
+ background: white;
1090
+ border-radius: 15px;
1091
+ padding: 2rem;
1092
+ margin-top: 2rem;
1093
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
1094
+ }
1095
+
1096
+ .chart-container {
1097
+ position: relative;
1098
+ height: 400px;
1099
+ width: 100%;
1100
+ }
1101
+
1102
+ /* Planner Cards */
1103
+ .planning-grid {
1104
+ display: grid;
1105
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
1106
+ gap: 20px;
1107
+ margin-top: 2rem;
1108
+ }
1109
+
1110
+ .session-card {
1111
+ background: white;
1112
+ border-radius: 12px;
1113
+ padding: 1.5rem;
1114
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
1115
+ border-top: 4px solid var(--primary-color);
1116
+ transition: transform 0.3s;
1117
+ }
1118
+
1119
+ .session-card:hover {
1120
+ transform: translateY(-5px);
1121
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
1122
+ }
1123
+
1124
+ .session-header {
1125
+ display: flex;
1126
+ justify-content: space-between;
1127
+ align-items: flex-start;
1128
+ margin-bottom: 1rem;
1129
+ }
1130
+
1131
+ .session-date {
1132
+ font-size: 1.2rem;
1133
+ font-weight: bold;
1134
+ color: var(--dark-color);
1135
+ }
1136
+
1137
+ .session-repetition {
1138
+ background: var(--primary-color);
1139
+ color: white;
1140
+ padding: 5px 15px;
1141
+ border-radius: 20px;
1142
+ font-size: 0.9rem;
1143
+ }
1144
+
1145
+ .session-details {
1146
+ margin-top: 1rem;
1147
+ display: flex;
1148
+ flex-direction: column;
1149
+ gap: 8px;
1150
+ }
1151
+
1152
+ .detail-item {
1153
+ display: flex;
1154
+ justify-content: space-between;
1155
+ padding: 5px 0;
1156
+ border-bottom: 1px dashed #e2e8f0;
1157
+ }
1158
+
1159
+ /* Notifications */
1160
+ .notification-card {
1161
+ background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
1162
+ border-left: 5px solid var(--warning-color);
1163
+ padding: 1.5rem;
1164
+ border-radius: 12px;
1165
+ margin-bottom: 1rem;
1166
+ animation: slideIn 0.5s ease;
1167
+ }
1168
+
1169
+ /* Stats Cards */
1170
+ .stats-grid {
1171
+ display: grid;
1172
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
1173
+ gap: 20px;
1174
+ margin-top: 2rem;
1175
+ }
1176
+
1177
+ .stat-card {
1178
+ background: white;
1179
+ border-radius: 12px;
1180
+ padding: 1.5rem;
1181
+ text-align: center;
1182
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
1183
+ }
1184
+
1185
+ .stat-value {
1186
+ font-size: 2.5rem;
1187
+ font-weight: bold;
1188
+ color: var(--primary-color);
1189
+ margin: 10px 0;
1190
+ }
1191
+
1192
+ .stat-label {
1193
+ color: var(--gray-color);
1194
+ font-size: 0.9rem;
1195
+ }
1196
+
1197
+ /* Quality Indicators */
1198
+ .quality-indicator {
1199
+ display: flex;
1200
+ gap: 10px;
1201
+ margin: 15px 0;
1202
+ }
1203
+
1204
+ .quality-dot {
1205
+ width: 25px;
1206
+ height: 25px;
1207
+ border-radius: 50%;
1208
+ cursor: pointer;
1209
+ transition: all 0.3s;
1210
+ display: flex;
1211
+ align-items: center;
1212
+ justify-content: center;
1213
+ color: white;
1214
+ font-weight: bold;
1215
+ font-size: 0.8rem;
1216
+ }
1217
+
1218
+ .quality-dot:hover {
1219
+ transform: scale(1.2);
1220
+ }
1221
+
1222
+ .quality-0 { background: linear-gradient(135deg, #ef4444, #dc2626); }
1223
+ .quality-1 { background: linear-gradient(135deg, #f59e0b, #d97706); }
1224
+ .quality-2 { background: linear-gradient(135deg, #10b981, #059669); }
1225
+ .quality-3 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
1226
+
1227
+ .quality-dot.active {
1228
+ box-shadow: 0 0 0 3px white, 0 0 0 6px currentColor;
1229
+ }
1230
+
1231
+ /* Flashcard Progress in Stats */
1232
+ .flashcard-stats-card {
1233
+ grid-column: span 2;
1234
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
1235
+ }
1236
+
1237
+ .flashcard-stats-header {
1238
+ display: flex;
1239
+ justify-content: space-between;
1240
+ align-items: center;
1241
+ margin-bottom: 1rem;
1242
+ }
1243
+
1244
+ .streak-counter {
1245
+ background: linear-gradient(135deg, #f59e0b, #d97706);
1246
+ color: white;
1247
+ padding: 5px 15px;
1248
+ border-radius: 20px;
1249
+ font-weight: bold;
1250
+ display: flex;
1251
+ align-items: center;
1252
+ gap: 5px;
1253
+ }
1254
+
1255
+ /* Responsive */
1256
+ @media (max-width: 768px) {
1257
+ .form-row {
1258
+ flex-direction: column;
1259
+ gap: 0;
1260
+ }
1261
+
1262
+ .nav-tabs {
1263
+ flex-direction: column;
1264
+ }
1265
+
1266
+ .planning-grid {
1267
+ grid-template-columns: 1fr;
1268
+ }
1269
+
1270
+ .header h1 {
1271
+ font-size: 2rem;
1272
+ }
1273
+
1274
+ .productivity-options,
1275
+ .energy-patterns {
1276
+ flex-direction: column;
1277
+ }
1278
+
1279
+ .time-slots {
1280
+ justify-content: center;
1281
+ }
1282
+
1283
+ .flashcard-controls {
1284
+ flex-direction: column;
1285
+ }
1286
+
1287
+ .flashcard-btn {
1288
+ width: 100%;
1289
+ justify-content: center;
1290
+ }
1291
+
1292
+ .flashcard-stats-summary {
1293
+ grid-template-columns: 1fr;
1294
+ }
1295
+
1296
+ .heatmap-grid {
1297
+ gap: 4px;
1298
+ }
1299
+
1300
+ .heatmap-cell {
1301
+ font-size: 0.7rem;
1302
+ }
1303
+
1304
+ .time-management-stats {
1305
+ grid-template-columns: 1fr;
1306
+ }
1307
+
1308
+ .scale-options {
1309
+ flex-direction: column;
1310
+ }
1311
+
1312
+ .profile-summary {
1313
+ grid-template-columns: 1fr;
1314
+ }
1315
+ }
1316
+ </style>
1317
+ </head>
1318
+ <body>
1319
+ <div class="container">
1320
+ <!-- Header -->
1321
+ <header class="header">
1322
+ <h1><i class="fas fa-graduation-cap"></i> Compagnon Pédagogique</h1>
1323
+ <p>Soutien à l'Apprentissage Autorégulé Durable par une Planification d'Étude Personnalisée et une Adaptation Générative de Contenu</p>
1324
+ <div class="badge">Version Professionnelle 2.0 | Profil Personnalisé SM-2</div>
1325
+ </header>
1326
+
1327
+ <!-- Navigation -->
1328
+ <nav class="nav-tabs">
1329
+ <button class="nav-tab active" onclick="showTab('profile')">
1330
+ <i class="fas fa-user-circle"></i> Profil Apprenant
1331
+ </button>
1332
+ <button class="nav-tab" onclick="showTab('objectif')">
1333
+ <i class="fas fa-bullseye"></i> Objectif
1334
+ </button>
1335
+ <button class="nav-tab" onclick="showTab('planner')">
1336
+ <i class="fas fa-calendar-alt"></i> Planner SM-2
1337
+ </button>
1338
+ <button class="nav-tab" onclick="showTab('flashcards')">
1339
+ <i class="fas fa-layer-group"></i> Flashcards
1340
+ </button>
1341
+ <button class="nav-tab" onclick="showTab('journal')">
1342
+ <i class="fas fa-book"></i> Journal SRL
1343
+ </button>
1344
+ <button class="nav-tab" onclick="showTab('notifications')">
1345
+ <i class="fas fa-bell"></i> Notifications IA
1346
+ </button>
1347
+ <button class="nav-tab" onclick="showTab('stats')">
1348
+ <i class="fas fa-chart-line"></i> Statistiques
1349
+ </button>
1350
+ <button class="nav-tab" onclick="showTab('learn')">
1351
+ <i class="fas fa-graduation-cap"></i> Apprendre à manager l'effort
1352
+ </button>
1353
+ </nav>
1354
+
1355
+ <!-- Profil Apprenant Section -->
1356
+ <section id="profile" class="tab-content active">
1357
+ <div class="card">
1358
+ <div class="card-header">
1359
+ <h3><i class="fas fa-user-circle"></i> Profil d'Apprentissage Personnalisé</h3>
1360
+ <button class="btn btn-secondary" onclick="saveProfile()">
1361
+ <i class="fas fa-save"></i> Sauvegarder le Profil
1362
+ </button>
1363
+ </div>
1364
+
1365
+ <!-- Barre de progression globale -->
1366
+ <div class="progress-section">
1367
+ <div class="progress-header">
1368
+ <div class="progress-title">Complétion du Profil</div>
1369
+ <div class="progress-percentage" id="profileCompletion">0%</div>
1370
+ </div>
1371
+ <div class="progress-bar-container">
1372
+ <div class="progress-bar-fill" id="profileProgressBar"></div>
1373
+ </div>
1374
+ <div class="questionnaire-progress">
1375
+ <span>Questionnaires complétés: <span id="completedSections">0/5</span></span>
1376
+ <span>Profil personnalisé: <span id="personalizationLevel">Basique</span></span>
1377
+ </div>
1378
+ </div>
1379
+
1380
+ <!-- Section 1: Big Five Traits (BFI-10) -->
1381
+ <div class="questionnaire-section" id="big5-section">
1382
+ <div class="questionnaire-header">
1383
+ <div class="questionnaire-icon">
1384
+ <i class="fas fa-brain"></i>
1385
+ </div>
1386
+ <div>
1387
+ <div class="questionnaire-title">Profil de Personnalité (Big Five Traits)</div>
1388
+ <div class="questionnaire-description">Évaluez vos traits de personnalité sur une échelle de 1 à 5</div>
1389
+ </div>
1390
+ </div>
1391
+
1392
+ <div class="question-item">
1393
+ <div class="question-text">Je suis quelqu'un de sociable, extraverti, énergique</div>
1394
+ <div class="scale-options">
1395
+ <div class="scale-option" onclick="selectScale('extraversion', 1)">
1396
+ 1<br><span class="scale-label">Pas du tout</span>
1397
+ </div>
1398
+ <div class="scale-option" onclick="selectScale('extraversion', 2)">
1399
+ 2<br><span class="scale-label">Un peu</span>
1400
+ </div>
1401
+ <div class="scale-option" onclick="selectScale('extraversion', 3)">
1402
+ 3<br><span class="scale-label">Modérément</span>
1403
+ </div>
1404
+ <div class="scale-option" onclick="selectScale('extraversion', 4)">
1405
+ 4<br><span class="scale-label">Beaucoup</span>
1406
+ </div>
1407
+ <div class="scale-option" onclick="selectScale('extraversion', 5)">
1408
+ 5<br><span class="scale-label">Extrêmement</span>
1409
+ </div>
1410
+ </div>
1411
+ </div>
1412
+
1413
+ <div class="question-item">
1414
+ <div class="question-text">Je fais preuve de curiosité intellectuelle, j'aime les nouvelles expériences</div>
1415
+ <div class="scale-options">
1416
+ <div class="scale-option" onclick="selectScale('openness', 1)">1</div>
1417
+ <div class="scale-option" onclick="selectScale('openness', 2)">2</div>
1418
+ <div class="scale-option selected" onclick="selectScale('openness', 3)">3</div>
1419
+ <div class="scale-option" onclick="selectScale('openness', 4)">4</div>
1420
+ <div class="scale-option" onclick="selectScale('openness', 5)">5</div>
1421
+ </div>
1422
+ </div>
1423
+
1424
+ <div class="question-item">
1425
+ <div class="question-text">Je suis organisé, fiable, je respecte mes engagements</div>
1426
+ <div class="scale-options">
1427
+ <div class="scale-option" onclick="selectScale('conscientiousness', 1)">1</div>
1428
+ <div class="scale-option" onclick="selectScale('conscientiousness', 2)">2</div>
1429
+ <div class="scale-option" onclick="selectScale('conscientiousness', 3)">3</div>
1430
+ <div class="scale-option selected" onclick="selectScale('conscientiousness', 4)">4</div>
1431
+ <div class="scale-option" onclick="selectScale('conscientiousness', 5)">5</div>
1432
+ </div>
1433
+ </div>
1434
+
1435
+ <div class="question-item">
1436
+ <div class="question-text">Je suis coopératif, serviable, empathique</div>
1437
+ <div class="scale-options">
1438
+ <div class="scale-option" onclick="selectScale('agreeableness', 1)">1</div>
1439
+ <div class="scale-option" onclick="selectScale('agreeableness', 2)">2</div>
1440
+ <div class="scale-option selected" onclick="selectScale('agreeableness', 3)">3</div>
1441
+ <div class="scale-option" onclick="selectScale('agreeableness', 4)">4</div>
1442
+ <div class="scale-option" onclick="selectScale('agreeableness', 5)">5</div>
1443
+ </div>
1444
+ </div>
1445
+
1446
+ <div class="question-item">
1447
+ <div class="question-text">Je ressens facilement de l'anxiété, du stress, de la nervosité</div>
1448
+ <div class="scale-options">
1449
+ <div class="scale-option" onclick="selectScale('neuroticism', 1)">1</div>
1450
+ <div class="scale-option" onclick="selectScale('neuroticism', 2)">2</div>
1451
+ <div class="scale-option" onclick="selectScale('neuroticism', 3)">3</div>
1452
+ <div class="scale-option selected" onclick="selectScale('neuroticism', 4)">4</div>
1453
+ <div class="scale-option" onclick="selectScale('neuroticism', 5)">5</div>
1454
+ </div>
1455
+ </div>
1456
+
1457
+ <div class="section-completion section-complete" id="big5-completion">
1458
+ <i class="fas fa-check-circle" style="color: #10b981;"></i>
1459
+ <span>Section complétée - <strong>Score neuroticisme: 4.6</strong> (qualité du sommeil importante)</span>
1460
+ </div>
1461
+ </div>
1462
+
1463
+ <!-- Section 2: Motivation Académique (Théorie de l'Autodétermination) -->
1464
+ <div class="questionnaire-section" id="motivation-section">
1465
+ <div class="questionnaire-header">
1466
+ <div class="questionnaire-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
1467
+ <i class="fas fa-fire"></i>
1468
+ </div>
1469
+ <div>
1470
+ <div class="questionnaire-title">Profil Motivationnel (Théorie de l'Autodétermination)</div>
1471
+ <div class="questionnaire-description">Pourquoi étudiez-vous ? Sélectionnez vos principales motivations</div>
1472
+ </div>
1473
+ </div>
1474
+
1475
+ <div class="question-item">
1476
+ <div class="question-text">J'étudie parce que j'aime apprendre, je trouve cela intéressant et plaisant</div>
1477
+ <div class="scale-options">
1478
+ <div class="scale-option" onclick="selectMotivation('intrinsic', 1)">1</div>
1479
+ <div class="scale-option" onclick="selectMotivation('intrinsic', 2)">2</div>
1480
+ <div class="scale-option" onclick="selectMotivation('intrinsic', 3)">3</div>
1481
+ <div class="scale-option" onclick="selectMotivation('intrinsic', 4)">4</div>
1482
+ <div class="scale-option selected" onclick="selectMotivation('intrinsic', 5)">5</div>
1483
+ </div>
1484
+ </div>
1485
+
1486
+ <div class="question-item">
1487
+ <div class="question-text">J'étudie pour obtenir de bonnes notes et faire plaisir à mes parents/professeurs</div>
1488
+ <div class="scale-options">
1489
+ <div class="scale-option" onclick="selectMotivation('introjected', 1)">1</div>
1490
+ <div class="scale-option" onclick="selectMotivation('introjected', 2)">2</div>
1491
+ <div class="scale-option" onclick="selectMotivation('introjected', 3)">3</div>
1492
+ <div class="scale-option selected" onclick="selectMotivation('introjected', 4)">4</div>
1493
+ <div class="scale-option" onclick="selectMotivation('introjected', 5)">5</div>
1494
+ </div>
1495
+ </div>
1496
+
1497
+ <div class="question-item">
1498
+ <div class="question-text">J'étudie parce que c'est important pour mon futur, pour atteindre mes objectifs personnels</div>
1499
+ <div class="scale-options">
1500
+ <div class="scale-option" onclick="selectMotivation('identified', 1)">1</div>
1501
+ <div class="scale-option" onclick="selectMotivation('identified', 2)">2</div>
1502
+ <div class="scale-option selected" onclick="selectMotivation('identified', 3)">3</div>
1503
+ <div class="scale-option" onclick="selectMotivation('identified', 4)">4</div>
1504
+ <div class="scale-option" onclick="selectMotivation('identified', 5)">5</div>
1505
+ </div>
1506
+ </div>
1507
+
1508
+ <div class="question-item">
1509
+ <div class="question-text">J'étudie pour éviter les punitions ou les conséquences négatives</div>
1510
+ <div class="scale-options">
1511
+ <div class="scale-option selected" onclick="selectMotivation('external', 1)">1</div>
1512
+ <div class="scale-option" onclick="selectMotivation('external', 2)">2</div>
1513
+ <div class="scale-option" onclick="selectMotivation('external', 3)">3</div>
1514
+ <div class="scale-option" onclick="selectMotivation('external', 4)">4</div>
1515
+ <div class="scale-option" onclick="selectMotivation('external', 5)">5</div>
1516
+ </div>
1517
+ </div>
1518
+
1519
+ <div class="section-completion section-complete" id="motivation-completion">
1520
+ <i class="fas fa-check-circle" style="color: #10b981;"></i>
1521
+ <span>Section complétée - <strong>Motivation introjectée: 4.9</strong> (forte pression interne)</span>
1522
+ </div>
1523
+ </div>
1524
+
1525
+ <!-- Section 3: Habitudes d'Étude -->
1526
+ <div class="questionnaire-section" id="habits-section">
1527
+ <div class="questionnaire-header">
1528
+ <div class="questionnaire-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
1529
+ <i class="fas fa-clock"></i>
1530
+ </div>
1531
+ <div>
1532
+ <div class="questionnaire-title">Habitudes et Préférences d'Étude</div>
1533
+ <div class="questionnaire-description">Décrivez vos habitudes d'apprentissage actuelles</div>
1534
+ </div>
1535
+ </div>
1536
+
1537
+ <div class="question-item">
1538
+ <div class="question-text">En moyenne, combien d'heures par jour consacrez-vous à l'étude ?</div>
1539
+ <div class="scale-options">
1540
+ <div class="scale-option" onclick="selectHabit('study_hours', 1)">&lt; 1h</div>
1541
+ <div class="scale-option selected" onclick="selectHabit('study_hours', 2)">1-2h</div>
1542
+ <div class="scale-option" onclick="selectHabit('study_hours', 3)">2-3h</div>
1543
+ <div class="scale-option" onclick="selectHabit('study_hours', 4)">3-4h</div>
1544
+ <div class="scale-option" onclick="selectHabit('study_hours', 5)">&gt; 4h</div>
1545
+ </div>
1546
+ </div>
1547
+
1548
+ <div class="question-item">
1549
+ <div class="question-text">À quelle fréquence remettez-vous vos travaux en retard ?</div>
1550
+ <div class="scale-options">
1551
+ <div class="scale-option selected" onclick="selectHabit('late_submissions', 1)">Jamais</div>
1552
+ <div class="scale-option" onclick="selectHabit('late_submissions', 2)">Rarement</div>
1553
+ <div class="scale-option" onclick="selectHabit('late_submissions', 3)">Parfois</div>
1554
+ <div class="scale-option" onclick="selectHabit('late_submissions', 4)">Souvent</div>
1555
+ <div class="scale-option" onclick="selectHabit('late_submissions', 5)">Toujours</div>
1556
+ </div>
1557
+ </div>
1558
+
1559
+ <div class="question-item">
1560
+ <div class="question-text">Quel est votre taux de complétion des vidéos/ressources ?</div>
1561
+ <div class="scale-options">
1562
+ <div class="scale-option" onclick="selectHabit('completion_rate', 1)">&lt; 25%</div>
1563
+ <div class="scale-option" onclick="selectHabit('completion_rate', 2)">25-50%</div>
1564
+ <div class="scale-option" onclick="selectHabit('completion_rate', 3)">50-75%</div>
1565
+ <div class="scale-option selected" onclick="selectHabit('completion_rate', 4)">75-95%</div>
1566
+ <div class="scale-option" onclick="selectHabit('completion_rate', 5)">100%</div>
1567
+ </div>
1568
+ </div>
1569
+
1570
+ <div class="question-item">
1571
+ <div class="question-text">Participez-vous aux forums de discussion ?</div>
1572
+ <div class="scale-options">
1573
+ <div class="scale-option selected" onclick="selectHabit('forum_participation', 1)">Jamais</div>
1574
+ <div class="scale-option" onclick="selectHabit('forum_participation', 2)">Rarement</div>
1575
+ <div class="scale-option" onclick="selectHabit('forum_participation', 3)">Parfois</div>
1576
+ <div class="scale-option" onclick="selectHabit('forum_participation', 4)">Souvent</div>
1577
+ <div class="scale-option" onclick="selectHabit('forum_participation', 5)">Toujours</div>
1578
+ </div>
1579
+ </div>
1580
+
1581
+ <div class="section-completion section-incomplete" id="habits-completion">
1582
+ <i class="fas fa-exclamation-circle" style="color: #ef4444;"></i>
1583
+ <span>Section incomplète - Remplissez toutes les questions</span>
1584
+ </div>
1585
+ </div>
1586
+
1587
+ <!-- Section 4: Bien-être et Stress -->
1588
+ <div class="questionnaire-section" id="wellbeing-section">
1589
+ <div class="questionnaire-header">
1590
+ <div class="questionnaire-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
1591
+ <i class="fas fa-heart"></i>
1592
+ </div>
1593
+ <div>
1594
+ <div class="questionnaire-title">Bien-être et Gestion du Stress</div>
1595
+ <div class="questionnaire-description">Évaluez votre état émotionnel et votre gestion du stress</div>
1596
+ </div>
1597
+ </div>
1598
+
1599
+ <div class="question-item">
1600
+ <div class="question-text">Combien d'heures dormez-vous en moyenne par nuit ?</div>
1601
+ <div class="scale-options">
1602
+ <div class="scale-option" onclick="selectWellbeing('sleep_hours', 1)">&lt; 5h</div>
1603
+ <div class="scale-option" onclick="selectWellbeing('sleep_hours', 2)">5-6h</div>
1604
+ <div class="scale-option" onclick="selectWellbeing('sleep_hours', 3)">6-7h</div>
1605
+ <div class="scale-option selected" onclick="selectWellbeing('sleep_hours', 4)">7-8h</div>
1606
+ <div class="scale-option" onclick="selectWellbeing('sleep_hours', 5)">&gt; 8h</div>
1607
+ </div>
1608
+ </div>
1609
+
1610
+ <div class="question-item">
1611
+ <div class="question-text">À quelle fréquence ressentez-vous du stress lié aux études ?</div>
1612
+ <div class="scale-options">
1613
+ <div class="scale-option" onclick="selectWellbeing('study_stress', 1)">Jamais</div>
1614
+ <div class="scale-option" onclick="selectWellbeing('study_stress', 2)">Rarement</div>
1615
+ <div class="scale-option selected" onclick="selectWellbeing('study_stress', 3)">Parfois</div>
1616
+ <div class="scale-option" onclick="selectWellbeing('study_stress', 4)">Souvent</div>
1617
+ <div class="scale-option" onclick="selectWellbeing('study_stress', 5)">Toujours</div>
1618
+ </div>
1619
+ </div>
1620
+
1621
+ <div class="question-item">
1622
+ <div class="question-text">Pratiquez-vous des activités de relaxation ou de méditation ?</div>
1623
+ <div class="scale-options">
1624
+ <div class="scale-option" onclick="selectWellbeing('relaxation', 1)">Jamais</div>
1625
+ <div class="scale-option selected" onclick="selectWellbeing('relaxation', 2)">Rarement</div>
1626
+ <div class="scale-option" onclick="selectWellbeing('relaxation', 3)">Parfois</div>
1627
+ <div class="scale-option" onclick="selectWellbeing('relaxation', 4)">Souvent</div>
1628
+ <div class="scale-option" onclick="selectWellbeing('relaxation', 5)">Toujours</div>
1629
+ </div>
1630
+ </div>
1631
+
1632
+ <div class="question-item">
1633
+ <div class="question-text">Avez-vous déjà ressenti des symptômes de burnout (épuisement, cynisme) ?</div>
1634
+ <div class="scale-options">
1635
+ <div class="scale-option selected" onclick="selectWellbeing('burnout_risk', 1)">Jamais</div>
1636
+ <div class="scale-option" onclick="selectWellbeing('burnout_risk', 2)">Rarement</div>
1637
+ <div class="scale-option" onclick="selectWellbeing('burnout_risk', 3)">Parfois</div>
1638
+ <div class="scale-option" onclick="selectWellbeing('burnout_risk', 4)">Souvent</div>
1639
+ <div class="scale-option" onclick="selectWellbeing('burnout_risk', 5)">Toujours</div>
1640
+ </div>
1641
+ </div>
1642
+
1643
+ <div class="section-completion section-incomplete" id="wellbeing-completion">
1644
+ <i class="fas fa-exclamation-circle" style="color: #ef4444;"></i>
1645
+ <span>Section incomplète - Important pour les recommandations de sommeil</span>
1646
+ </div>
1647
+ </div>
1648
+
1649
+ <!-- Section 5: Soutien et Environnement -->
1650
+ <div class="questionnaire-section" id="support-section">
1651
+ <div class="questionnaire-header">
1652
+ <div class="questionnaire-icon" style="background: linear-gradient(135deg, #ec4899, #db2777);">
1653
+ <i class="fas fa-users"></i>
1654
+ </div>
1655
+ <div>
1656
+ <div class="questionnaire-title">Soutien et Environnement d'Apprentissage</div>
1657
+ <div class="questionnaire-description">Décrivez votre environnement d'apprentissage et votre réseau de soutien</div>
1658
+ </div>
1659
+ </div>
1660
+
1661
+ <div class="question-item">
1662
+ <div class="question-text">Comment évaluez-vous le soutien de vos parents/famille ?</div>
1663
+ <div class="scale-options">
1664
+ <div class="scale-option" onclick="selectSupport('family_support', 1)">Très faible</div>
1665
+ <div class="scale-option" onclick="selectSupport('family_support', 2)">Faible</div>
1666
+ <div class="scale-option selected" onclick="selectSupport('family_support', 3)">Moyen</div>
1667
+ <div class="scale-option" onclick="selectSupport('family_support', 4)">Élevé</div>
1668
+ <div class="scale-option" onclick="selectSupport('family_support', 5)">Très élevé</div>
1669
+ </div>
1670
+ </div>
1671
+
1672
+ <div class="question-item">
1673
+ <div class="question-text">Vos parents ont-ils des attentes élevées concernant vos résultats ?</div>
1674
+ <div class="scale-options">
1675
+ <div class="scale-option" onclick="selectSupport('parental_expectations', 1)">Très basses</div>
1676
+ <div class="scale-option" onclick="selectSupport('parental_expectations', 2)">Basses</div>
1677
+ <div class="scale-option" onclick="selectSupport('parental_expectations', 3)">Moyennes</div>
1678
+ <div class="scale-option selected" onclick="selectSupport('parental_expectations', 4)">Élevées</div>
1679
+ <div class="scale-option" onclick="selectSupport('parental_expectations', 5)">Très élevées</div>
1680
+ </div>
1681
+ </div>
1682
+
1683
+ <div class="question-item">
1684
+ <div class="question-text">Avez-vous un espace calme et dédié pour étudier ?</div>
1685
+ <div class="scale-options">
1686
+ <div class="scale-option" onclick="selectSupport('study_environment', 1)">Non</div>
1687
+ <div class="scale-option" onclick="selectSupport('study_environment', 2)">Rarement</div>
1688
+ <div class="scale-option" onclick="selectSupport('study_environment', 3)">Parfois</div>
1689
+ <div class="scale-option selected" onclick="selectSupport('study_environment', 4)">Souvent</div>
1690
+ <div class="scale-option" onclick="selectSupport('study_environment', 5)">Toujours</div>
1691
+ </div>
1692
+ </div>
1693
+
1694
+ <div class="question-item">
1695
+ <div class="question-text">Collaborez-vous avec d'autres étudiants pour étudier ?</div>
1696
+ <div class="scale-options">
1697
+ <div class="scale-option selected" onclick="selectSupport('peer_collaboration', 1)">Jamais</div>
1698
+ <div class="scale-option" onclick="selectSupport('peer_collaboration', 2)">Rarement</div>
1699
+ <div class="scale-option" onclick="selectSupport('peer_collaboration', 3)">Parfois</div>
1700
+ <div class="scale-option" onclick="selectSupport('peer_collaboration', 4)">Souvent</div>
1701
+ <div class="scale-option" onclick="selectSupport('peer_collaboration', 5)">Toujours</div>
1702
+ </div>
1703
+ </div>
1704
+
1705
+ <div class="section-completion section-incomplete" id="support-completion">
1706
+ <i class="fas fa-exclamation-circle" style="color: #ef4444;"></i>
1707
+ <span>Section incomplète - Important pour les recommandations de soutien</span>
1708
+ </div>
1709
+ </div>
1710
+
1711
+ <!-- Résumé du Profil et Recommandations -->
1712
+ <div class="profile-summary">
1713
+ <div class="profile-card">
1714
+ <div class="profile-card-header">
1715
+ <div class="profile-card-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
1716
+ <i class="fas fa-brain"></i>
1717
+ </div>
1718
+ <div class="profile-card-title">Big Five Traits</div>
1719
+ </div>
1720
+ <div class="trait-list">
1721
+ <div class="trait-item">
1722
+ <span class="trait-name">Extraversion</span>
1723
+ <span class="trait-value" id="extraversion-value">3.2</span>
1724
+ </div>
1725
+ <div class="trait-item">
1726
+ <span class="trait-name">Ouverture</span>
1727
+ <span class="trait-value" id="openness-value">4.1</span>
1728
+ </div>
1729
+ <div class="trait-item">
1730
+ <span class="trait-name">Conscience</span>
1731
+ <span class="trait-value" id="conscientiousness-value">4.8</span>
1732
+ </div>
1733
+ <div class="trait-item">
1734
+ <span class="trait-name">Agréabilité</span>
1735
+ <span class="trait-value" id="agreeableness-value">3.5</span>
1736
+ </div>
1737
+ <div class="trait-item">
1738
+ <span class="trait-name">Névrosisme</span>
1739
+ <span class="trait-value" id="neuroticism-value">4.6</span>
1740
+ </div>
1741
+ </div>
1742
+ </div>
1743
+
1744
+ <div class="profile-card">
1745
+ <div class="profile-card-header">
1746
+ <div class="profile-card-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
1747
+ <i class="fas fa-fire"></i>
1748
+ </div>
1749
+ <div class="profile-card-title">Motivation</div>
1750
+ </div>
1751
+ <div class="trait-list">
1752
+ <div class="trait-item">
1753
+ <span class="trait-name">Intrinsèque</span>
1754
+ <span class="trait-value" id="intrinsic-value">3.8</span>
1755
+ </div>
1756
+ <div class="trait-item">
1757
+ <span class="trait-name">Introjectée</span>
1758
+ <span class="trait-value" id="introjected-value">4.9</span>
1759
+ </div>
1760
+ <div class="trait-item">
1761
+ <span class="trait-name">Identifiée</span>
1762
+ <span class="trait-value" id="identified-value">4.2</span>
1763
+ </div>
1764
+ <div class="trait-item">
1765
+ <span class="trait-name">Externe</span>
1766
+ <span class="trait-value" id="external-value">2.1</span>
1767
+ </div>
1768
+ </div>
1769
+ <div class="motivation-chart">
1770
+ <canvas id="motivationChart"></canvas>
1771
+ </div>
1772
+ </div>
1773
+ </div>
1774
+
1775
+ <!-- Recommandations Personnalisées -->
1776
+ <div class="recommendations-section">
1777
+ <h4><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>
1778
+
1779
+ <div class="recommendation-item">
1780
+ <div class="recommendation-icon">💤</div>
1781
+ <div>
1782
+ <strong>Qualité du sommeil: </strong> Avec un névrosisme élevé (4.6), il est essentiel de maintenir 8 heures de sommeil de qualité avec des activités de relaxation avant le coucher.
1783
+ </div>
1784
+ </div>
1785
+
1786
+ <div class="recommendation-item">
1787
+ <div class="recommendation-icon">📅</div>
1788
+ <div>
1789
+ <strong>Planification: </strong> Votre conscience élevée (4.8) est un atout. Évitez le surmenage - 4 heures supplémentaires d'étude par jour risquent de mener au burnout.
1790
+ </div>
1791
+ </div>
1792
+
1793
+ <div class="recommendation-item">
1794
+ <div class="recommendation-icon">🎯</div>
1795
+ <div>
1796
+ <strong>Gestion de la pression: </strong> Avec une motivation introjectée à 4.9, pratiquez des techniques de gestion du stress pour réduire la pression interne.
1797
+ </div>
1798
+ </div>
1799
+
1800
+ <div class="recommendation-item">
1801
+ <div class="recommendation-icon">⏰</div>
1802
+ <div>
1803
+ <strong>Rappels personnalisés: </strong> Basé sur votre profil, vous recevrez des rappels pour les pauses, le sommeil et la gestion du stress.
1804
+ </div>
1805
+ </div>
1806
+ </div>
1807
+
1808
+ <button class="btn btn-primary btn-large" onclick="completeProfile()" style="margin-top: 2rem;">
1809
+ <i class="fas fa-check-circle"></i> Finaliser et Générer le Profil Personnalisé
1810
+ </button>
1811
+ </div>
1812
+ </section>
1813
+
1814
+ <!-- Objectif Section (inchangé) -->
1815
+ <section id="objectif" class="tab-content">
1816
+ <!-- ... Le contenu existant de l'onglet Objectif ... -->
1817
+ </section>
1818
+
1819
+ <!-- Planner Section (inchangé) -->
1820
+ <section id="planner" class="tab-content">
1821
+ <!-- ... Le contenu existant de l'onglet Planner ... -->
1822
+ </section>
1823
+
1824
+ <!-- Flashcards Section (inchangé) -->
1825
+ <section id="flashcards" class="tab-content">
1826
+ <!-- ... Le contenu existant de l'onglet Flashcards ... -->
1827
+ </section>
1828
+
1829
+ <!-- Journal Section (inchangé) -->
1830
+ <section id="journal" class="tab-content">
1831
+ <!-- ... Le contenu existant de l'onglet Journal ... -->
1832
+ </section>
1833
+
1834
+ <!-- Notifications Section (inchangé) -->
1835
+ <section id="notifications" class="tab-content">
1836
+ <!-- ... Le contenu existant de l'onglet Notifications ... -->
1837
+ </section>
1838
+
1839
+ <!-- Statistics Section (inchangé) -->
1840
+ <section id="stats" class="tab-content">
1841
+ <!-- ... Le contenu existant de l'onglet Statistiques ... -->
1842
+ </section>
1843
+
1844
+ <!-- Learn SM-2 Section (inchangé) -->
1845
+ <section id="learn" class="tab-content">
1846
+ <!-- ... Le contenu existant de l'onglet Apprendre ... -->
1847
+ </section>
1848
+ </div>
1849
+
1850
+ <!-- Modal pour la saisie avancée -->
1851
+ <div class="modal" id="advancedProfileModal">
1852
+ <div class="modal-content">
1853
+ <div class="modal-header">
1854
+ <div class="modal-title"><i class="fas fa-sliders-h"></i> Paramètres Avancés du Profil</div>
1855
+ <button class="modal-close" onclick="closeModal()">&times;</button>
1856
+ </div>
1857
+ <div id="advancedProfileContent">
1858
+ <!-- Le contenu sera généré dynamiquement -->
1859
+ </div>
1860
+ </div>
1861
+ </div>
1862
+
1863
+ <script>
1864
+ // Variables pour le profil
1865
+ let learnerProfile = {
1866
+ bigFive: {
1867
+ extraversion: 3.2,
1868
+ openness: 4.1,
1869
+ conscientiousness: 4.8,
1870
+ agreeableness: 3.5,
1871
+ neuroticism: 4.6
1872
+ },
1873
+ motivation: {
1874
+ intrinsic: 3.8,
1875
+ introjected: 4.9,
1876
+ identified: 4.2,
1877
+ external: 2.1
1878
+ },
1879
+ habits: {
1880
+ study_hours: 2,
1881
+ late_submissions: 1,
1882
+ completion_rate: 4,
1883
+ forum_participation: 1
1884
+ },
1885
+ wellbeing: {
1886
+ sleep_hours: 4,
1887
+ study_stress: 3,
1888
+ relaxation: 2,
1889
+ burnout_risk: 1
1890
+ },
1891
+ support: {
1892
+ family_support: 3,
1893
+ parental_expectations: 4,
1894
+ study_environment: 4,
1895
+ peer_collaboration: 1
1896
+ },
1897
+ completionStatus: {
1898
+ big5: true,
1899
+ motivation: true,
1900
+ habits: false,
1901
+ wellbeing: false,
1902
+ support: false
1903
+ }
1904
+ };
1905
+
1906
+ // Initialisation
1907
+ document.addEventListener('DOMContentLoaded', function() {
1908
+ updateProfileProgress();
1909
+ updateProfileSummary();
1910
+ createMotivationChart();
1911
+
1912
+ // Simuler des réponses déjà données pour les sections complétées
1913
+ simulateExistingResponses();
1914
+ });
1915
+
1916
+ // Simuler des réponses existantes
1917
+ function simulateExistingResponses() {
1918
+ // Big Five déjà complété
1919
+ updateScaleUI('extraversion', learnerProfile.bigFive.extraversion);
1920
+ updateScaleUI('openness', learnerProfile.bigFive.openness);
1921
+ updateScaleUI('conscientiousness', learnerProfile.bigFive.conscientiousness);
1922
+ updateScaleUI('agreeableness', learnerProfile.bigFive.agreeableness);
1923
+ updateScaleUI('neuroticism', learnerProfile.bigFive.neuroticism);
1924
+
1925
+ // Motivation déjà complétée
1926
+ updateScaleUI('intrinsic', learnerProfile.motivation.intrinsic);
1927
+ updateScaleUI('introjected', learnerProfile.motivation.introjected);
1928
+ updateScaleUI('identified', learnerProfile.motivation.identified);
1929
+ updateScaleUI('external', learnerProfile.motivation.external);
1930
+ }
1931
+
1932
+ // Sélectionner une échelle
1933
+ function selectScale(trait, value) {
1934
+ learnerProfile.bigFive[trait] = value;
1935
+ updateScaleUI(trait, value);
1936
+ updateProfileSummary();
1937
+ checkSectionCompletion('big5');
1938
+ updateProfileProgress();
1939
+ }
1940
+
1941
+ // Sélectionner une motivation
1942
+ function selectMotivation(type, value) {
1943
+ learnerProfile.motivation[type] = value;
1944
+ updateScaleUI(type, value);
1945
+ updateProfileSummary();
1946
+ checkSectionCompletion('motivation');
1947
+ updateProfileProgress();
1948
+ }
1949
+
1950
+ // Sélectionner une habitude
1951
+ function selectHabit(habit, value) {
1952
+ learnerProfile.habits[habit] = value;
1953
+ learnerProfile.completionStatus.habits = true;
1954
+ updateProfileProgress();
1955
+ }
1956
+
1957
+ // Sélectionner un bien-être
1958
+ function selectWellbeing(wellbeing, value) {
1959
+ learnerProfile.wellbeing[wellbeing] = value;
1960
+ learnerProfile.completionStatus.wellbeing = true;
1961
+ updateProfileProgress();
1962
+ }
1963
+
1964
+ // Sélectionner un soutien
1965
+ function selectSupport(support, value) {
1966
+ learnerProfile.support[support] = value;
1967
+ learnerProfile.completionStatus.support = true;
1968
+ updateProfileProgress();
1969
+ }
1970
+
1971
+ // Mettre à jour l'UI de l'échelle
1972
+ function updateScaleUI(type, value) {
1973
+ // Trouver tous les boutons d'échelle pour ce type
1974
+ const scaleOptions = document.querySelectorAll(`[onclick*="${type}"]`);
1975
+
1976
+ scaleOptions.forEach(option => {
1977
+ option.classList.remove('selected');
1978
+
1979
+ // Extraire la valeur du bouton
1980
+ const match = option.getAttribute('onclick').match(/(\d+)/);
1981
+ if (match && parseInt(match[1]) === value) {
1982
+ option.classList.add('selected');
1983
+ }
1984
+ });
1985
+ }
1986
+
1987
+ // Vérifier la complétion d'une section
1988
+ function checkSectionCompletion(section) {
1989
+ const completionElement = document.getElementById(`${section}-completion`);
1990
+
1991
+ if (section === 'big5' || section === 'motivation') {
1992
+ learnerProfile.completionStatus[section] = true;
1993
+ completionElement.className = 'section-completion section-complete';
1994
+
1995
+ let message = "Section complétée";
1996
+ if (section === 'big5') {
1997
+ message += ` - <strong>Score neuroticisme: ${learnerProfile.bigFive.neuroticism}</strong> (qualité du sommeil importante)`;
1998
+ } else if (section === 'motivation') {
1999
+ message += ` - <strong>Motivation introjectée: ${learnerProfile.motivation.introjected}</strong> (forte pression interne)`;
2000
+ }
2001
+
2002
+ completionElement.innerHTML = `<i class="fas fa-check-circle" style="color: #10b981;"></i><span>${message}</span>`;
2003
+ }
2004
+ }
2005
+
2006
+ // Mettre à jour la progression du profil
2007
+ function updateProfileProgress() {
2008
+ const sections = Object.values(learnerProfile.completionStatus);
2009
+ const completedCount = sections.filter(status => status).length;
2010
+ const totalSections = sections.length;
2011
+
2012
+ const percentage = Math.round((completedCount / totalSections) * 100);
2013
+
2014
+ // Mettre à jour la barre de progression
2015
+ document.getElementById('profileCompletion').textContent = `${percentage}%`;
2016
+ document.getElementById('profileProgressBar').style.width = `${percentage}%`;
2017
+
2018
+ // Mettre à jour le compteur
2019
+ document.getElementById('completedSections').textContent = `${completedCount}/${totalSections}`;
2020
+
2021
+ // Mettre à jour le niveau de personnalisation
2022
+ let level = "Basique";
2023
+ if (percentage >= 20) level = "Débutant";
2024
+ if (percentage >= 40) level = "Intermédiaire";
2025
+ if (percentage >= 60) level = "Avancé";
2026
+ if (percentage >= 80) level = "Expert";
2027
+ if (percentage === 100) level = "Personnalisé";
2028
+
2029
+ document.getElementById('personalizationLevel').textContent = level;
2030
+ }
2031
+
2032
+ // Mettre à jour le résumé du profil
2033
+ function updateProfileSummary() {
2034
+ // Mettre à jour les valeurs Big Five
2035
+ document.getElementById('extraversion-value').textContent = learnerProfile.bigFive.extraversion.toFixed(1);
2036
+ document.getElementById('openness-value').textContent = learnerProfile.bigFive.openness.toFixed(1);
2037
+ document.getElementById('conscientiousness-value').textContent = learnerProfile.bigFive.conscientiousness.toFixed(1);
2038
+ document.getElementById('agreeableness-value').textContent = learnerProfile.bigFive.agreeableness.toFixed(1);
2039
+ document.getElementById('neuroticism-value').textContent = learnerProfile.bigFive.neuroticism.toFixed(1);
2040
+
2041
+ // Mettre à jour les valeurs de motivation
2042
+ document.getElementById('intrinsic-value').textContent = learnerProfile.motivation.intrinsic.toFixed(1);
2043
+ document.getElementById('introjected-value').textContent = learnerProfile.motivation.introjected.toFixed(1);
2044
+ document.getElementById('identified-value').textContent = learnerProfile.motivation.identified.toFixed(1);
2045
+ document.getElementById('external-value').textContent = learnerProfile.motivation.external.toFixed(1);
2046
+
2047
+ // Mettre à jour le graphique de motivation
2048
+ updateMotivationChart();
2049
+ }
2050
+
2051
+ // Créer le graphique de motivation
2052
+ function createMotivationChart() {
2053
+ const ctx = document.getElementById('motivationChart').getContext('2d');
2054
+
2055
+ window.motivationChart = new Chart(ctx, {
2056
+ type: 'radar',
2057
+ data: {
2058
+ labels: ['Intrinsèque', 'Introjectée', 'Identifiée', 'Externe'],
2059
+ datasets: [{
2060
+ label: 'Motivation',
2061
+ data: [
2062
+ learnerProfile.motivation.intrinsic,
2063
+ learnerProfile.motivation.introjected,
2064
+ learnerProfile.motivation.identified,
2065
+ learnerProfile.motivation.external
2066
+ ],
2067
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
2068
+ borderColor: 'rgb(59, 130, 246)',
2069
+ pointBackgroundColor: 'rgb(59, 130, 246)',
2070
+ pointBorderColor: '#fff',
2071
+ pointHoverBackgroundColor: '#fff',
2072
+ pointHoverBorderColor: 'rgb(59, 130, 246)'
2073
+ }]
2074
+ },
2075
+ options: {
2076
+ scales: {
2077
+ r: {
2078
+ beginAtZero: true,
2079
+ max: 5,
2080
+ ticks: {
2081
+ stepSize: 1
2082
+ }
2083
+ }
2084
+ },
2085
+ responsive: true,
2086
+ maintainAspectRatio: false
2087
+ }
2088
+ });
2089
+ }
2090
+
2091
+ // Mettre à jour le graphique de motivation
2092
+ function updateMotivationChart() {
2093
+ if (window.motivationChart) {
2094
+ window.motivationChart.data.datasets[0].data = [
2095
+ learnerProfile.motivation.intrinsic,
2096
+ learnerProfile.motivation.introjected,
2097
+ learnerProfile.motivation.identified,
2098
+ learnerProfile.motivation.external
2099
+ ];
2100
+ window.motivationChart.update();
2101
+ }
2102
+ }
2103
+
2104
+ // Sauvegarder le profil
2105
+ function saveProfile() {
2106
+ // Simuler la sauvegarde
2107
+ try {
2108
+ localStorage.setItem('learnerProfile', JSON.stringify(learnerProfile));
2109
+
2110
+ // Afficher une notification
2111
+ showNotification('Profil sauvegardé avec succès !', 'success');
2112
+
2113
+ // Mettre à jour les autres parties de l'application
2114
+ updatePersonalizedRecommendations();
2115
+
2116
+ } catch (error) {
2117
+ showNotification('Erreur lors de la sauvegarde du profil', 'error');
2118
+ }
2119
+ }
2120
+
2121
+ // Finaliser le profil
2122
+ function completeProfile() {
2123
+ // Vérifier si toutes les sections sont complétées
2124
+ const incompleteSections = Object.entries(learnerProfile.completionStatus)
2125
+ .filter(([section, completed]) => !completed)
2126
+ .map(([section]) => section);
2127
+
2128
+ if (incompleteSections.length > 0) {
2129
+ showNotification(`Veuillez compléter les sections suivantes: ${incompleteSections.join(', ')}`, 'warning');
2130
+ return;
2131
+ }
2132
+
2133
+ // Sauvegarder le profil
2134
+ saveProfile();
2135
+
2136
+ // Générer des recommandations personnalisées
2137
+ generatePersonalizedRecommendations();
2138
+
2139
+ // Passer à l'onglet Objectif
2140
+ showTab('objectif');
2141
+
2142
+ showNotification('Profil finalisé avec succès ! Les recommandations personnalisées ont été appliquées.', 'success');
2143
+ }
2144
+
2145
+ // Générer des recommandations personnalisées
2146
+ function generatePersonalizedRecommendations() {
2147
+ const recommendations = [];
2148
+
2149
+ // Recommandations basées sur le Big Five
2150
+ if (learnerProfile.bigFive.neuroticism >= 4) {
2151
+ recommendations.push({
2152
+ icon: '💤',
2153
+ text: `Avec un névrosisme élevé (${learnerProfile.bigFive.neuroticism}), planifiez 8 heures de sommeil de qualité avec des activités de relaxation.`
2154
+ });
2155
+ }
2156
+
2157
+ if (learnerProfile.bigFive.conscientiousness >= 4) {
2158
+ recommendations.push({
2159
+ icon: '📅',
2160
+ text: `Votre conscience élevée (${learnerProfile.bigFive.conscientiousness}) est excellente pour l'auto-discipline. Évitez le surmenage.`
2161
+ });
2162
+ }
2163
+
2164
+ // Recommandations basées sur la motivation
2165
+ if (learnerProfile.motivation.introjected >= 4) {
2166
+ recommendations.push({
2167
+ icon: '🎯',
2168
+ text: `Motivation introjectée élevée (${learnerProfile.motivation.introjected}). Pratiquez des techniques de gestion du stress.`
2169
+ });
2170
+ }
2171
+
2172
+ // Recommandations basées sur les habitudes
2173
+ if (learnerProfile.habits.study_hours >= 4) {
2174
+ recommendations.push({
2175
+ icon: '⚠️',
2176
+ text: 'Trop d\'heures d\'étude peuvent mener au burnout. Équilibrez avec des pauses régulières.'
2177
+ });
2178
+ }
2179
+
2180
+ // Mettre à jour l'affichage des recommandations
2181
+ updateRecommendationsDisplay(recommendations);
2182
+
2183
+ // Mettre à jour les paramètres de l'application
2184
+ updateApplicationSettings();
2185
+ }
2186
+
2187
+ // Mettre à jour l'affichage des recommandations
2188
+ function updateRecommendationsDisplay(recommendations) {
2189
+ const container = document.querySelector('.recommendations-section');
2190
+ let html = '<h4><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>';
2191
+
2192
+ recommendations.forEach(rec => {
2193
+ html += `
2194
+ <div class="recommendation-item">
2195
+ <div class="recommendation-icon">${rec.icon}</div>
2196
+ <div>${rec.text}</div>
2197
+ </div>
2198
+ `;
2199
+ });
2200
+
2201
+ container.innerHTML = html;
2202
+ }
2203
+
2204
+ // Mettre à jour les paramètres de l'application
2205
+ function updateApplicationSettings() {
2206
+ // Mettre à jour la méthode de productivité basée sur le profil
2207
+ if (learnerProfile.bigFive.conscientiousness >= 4) {
2208
+ // Personnes très consciencieuses bénéficient de Deep Work
2209
+ document.getElementById('productivity_method').value = 'deepwork';
2210
+ selectProductivityMethod('deepwork');
2211
+ }
2212
+
2213
+ // Mettre à jour le type d'énergie basé sur le profil
2214
+ if (learnerProfile.bigFive.extraversion >= 3.5) {
2215
+ // Extravertis souvent plus énergiques le matin
2216
+ document.getElementById('energy_pattern').value = 'morning';
2217
+ selectEnergyPattern('morning');
2218
+ }
2219
+
2220
+ // Mettre à jour la qualité estimée basée sur le profil
2221
+ if (learnerProfile.motivation.intrinsic >= 4 && learnerProfile.bigFive.conscientiousness >= 4) {
2222
+ // Haute motivation intrinsèque + conscience = meilleure rétention
2223
+ selectQuality(3); // Excellent
2224
+ }
2225
+ }
2226
+
2227
+ // Afficher une notification
2228
+ function showNotification(message, type = 'info') {
2229
+ const colors = {
2230
+ success: '#10b981',
2231
+ error: '#ef4444',
2232
+ warning: '#f59e0b',
2233
+ info: '#3b82f6'
2234
+ };
2235
+
2236
+ // Créer une notification temporaire
2237
+ const notification = document.createElement('div');
2238
+ notification.style.cssText = `
2239
+ position: fixed;
2240
+ top: 20px;
2241
+ right: 20px;
2242
+ background: white;
2243
+ color: ${colors[type]};
2244
+ padding: 1rem 1.5rem;
2245
+ border-radius: 10px;
2246
+ box-shadow: 0 5px 20px rgba(0,0,0,0.1);
2247
+ border-left: 4px solid ${colors[type]};
2248
+ z-index: 1000;
2249
+ animation: slideIn 0.3s ease;
2250
+ `;
2251
+
2252
+ notification.innerHTML = `
2253
+ <div style="display: flex; align-items: center; gap: 10px;">
2254
+ <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
2255
+ <div>${message}</div>
2256
+ </div>
2257
+ `;
2258
+
2259
+ document.body.appendChild(notification);
2260
+
2261
+ // Supprimer après 3 secondes
2262
+ setTimeout(() => {
2263
+ notification.style.animation = 'slideIn 0.3s ease reverse';
2264
+ setTimeout(() => notification.remove(), 300);
2265
+ }, 3000);
2266
+ }
2267
+
2268
+ // Ouvrir le modal pour les paramètres avancés
2269
+ function openAdvancedProfile() {
2270
+ const modal = document.getElementById('advancedProfileModal');
2271
+ const content = document.getElementById('advancedProfileContent');
2272
+
2273
+ content.innerHTML = `
2274
+ <div style="margin-bottom: 1.5rem;">
2275
+ <h4 style="color: #1e293b; margin-bottom: 1rem;"><i class="fas fa-chart-line"></i> Paramètres Avancés du Profil</h4>
2276
+ <p style="color: #64748b; margin-bottom: 1rem;">Ces paramètres influenceront les algorithmes de personnalisation.</p>
2277
+ </div>
2278
+
2279
+ <div class="form-group">
2280
+ <label class="form-label"><i class="fas fa-bell"></i> Fréquence des Rappels</label>
2281
+ <select class="form-control" id="reminderFrequency">
2282
+ <option value="low">Faible (1-2 par jour)</option>
2283
+ <option value="medium" selected>Moyenne (3-4 par jour)</option>
2284
+ <option value="high">Élevée (5+ par jour)</option>
2285
+ </select>
2286
+ </div>
2287
+
2288
+ <div class="form-group">
2289
+ <label class="form-label"><i class="fas fa-exclamation-triangle"></i> Sensibilité aux Alertes</label>
2290
+ <select class="form-control" id="alertSensitivity">
2291
+ <option value="low">Faible (seulement les urgences)</option>
2292
+ <option value="medium" selected>Moyenne (recommandations importantes)</option>
2293
+ <option value="high">Élevée (toutes les suggestions)</option>
2294
+ </select>
2295
+ </div>
2296
+
2297
+ <div class="form-group">
2298
+ <label class="form-label"><i class="fas fa-sync-alt"></i> Mise à Jour Automatique</label>
2299
+ <div style="display: flex; gap: 15px; margin-top: 10px;">
2300
+ <label style="display: flex; align-items: center; gap: 8px;">
2301
+ <input type="radio" name="autoUpdate" value="weekly" checked>
2302
+ Hebdomadaire
2303
+ </label>
2304
+ <label style="display: flex; align-items: center; gap: 8px;">
2305
+ <input type="radio" name="autoUpdate" value="monthly">
2306
+ Mensuelle
2307
+ </label>
2308
+ <label style="display: flex; align-items: center; gap: 8px;">
2309
+ <input type="radio" name="autoUpdate" value="manual">
2310
+ Manuel
2311
+ </label>
2312
+ </div>
2313
+ </div>
2314
+
2315
+ <button class="btn btn-primary" onclick="saveAdvancedSettings()" style="width: 100%; margin-top: 1.5rem;">
2316
+ <i class="fas fa-save"></i> Sauvegarder les Paramètres
2317
+ </button>
2318
+ `;
2319
+
2320
+ modal.style.display = 'flex';
2321
+ }
2322
+
2323
+ // Fermer le modal
2324
+ function closeModal() {
2325
+ document.getElementById('advancedProfileModal').style.display = 'none';
2326
+ }
2327
+
2328
+ // Sauvegarder les paramètres avancés
2329
+ function saveAdvancedSettings() {
2330
+ const reminderFrequency = document.getElementById('reminderFrequency').value;
2331
+ const alertSensitivity = document.getElementById('alertSensitivity').value;
2332
+
2333
+ // Sauvegarder dans le profil
2334
+ learnerProfile.advancedSettings = {
2335
+ reminderFrequency,
2336
+ alertSensitivity,
2337
+ autoUpdate: document.querySelector('input[name="autoUpdate"]:checked').value
2338
+ };
2339
+
2340
+ saveProfile();
2341
+ closeModal();
2342
+ showNotification('Paramètres avancés sauvegardés', 'success');
2343
+ }
2344
+
2345
+ // Mettre à jour les recommandations personnalisées
2346
+ function updatePersonalizedRecommendations() {
2347
+ // Cette fonction serait appelée par d'autres parties de l'application
2348
+ // pour mettre à jour les recommandations basées sur le profil
2349
+ }
2350
+
2351
+ // Navigation (gardée de l'ancien code)
2352
+ function showTab(tabId) {
2353
+ document.querySelectorAll('.tab-content').forEach(section => {
2354
+ section.classList.remove('active');
2355
+ });
2356
+
2357
+ document.querySelectorAll('.nav-tab').forEach(tab => {
2358
+ tab.classList.remove('active');
2359
+ });
2360
+
2361
+ document.getElementById(tabId).classList.add('active');
2362
+
2363
+ const tabNames = {
2364
+ 'profile': 'Profil Apprenant',
2365
+ 'objectif': 'Objectif',
2366
+ 'planner': 'Planner',
2367
+ 'flashcards': 'Flashcards',
2368
+ 'journal': 'Journal',
2369
+ 'notifications': 'Notifications',
2370
+ 'stats': 'Statistiques',
2371
+ 'learn': 'Apprendre'
2372
+ };
2373
+
2374
+ document.querySelectorAll('.nav-tab').forEach(tab => {
2375
+ if (tab.textContent.includes(tabNames[tabId])) {
2376
+ tab.classList.add('active');
2377
+ }
2378
+ });
2379
+ }
2380
+
2381
+ // Autres fonctions de l'ancien code (adaptées si nécessaire)
2382
+ function selectProductivityMethod(method) {
2383
+ // ... fonction existante ...
2384
+ }
2385
+
2386
+ function selectEnergyPattern(pattern) {
2387
+ // ... fonction existante ...
2388
+ }
2389
+
2390
+ function selectQuality(level) {
2391
+ // ... fonction existante ...
2392
+ }
2393
+
2394
+ // Initialiser les fonctions de navigation depuis l'ancien code
2395
+ window.showTab = showTab;
2396
+ window.selectProductivityMethod = selectProductivityMethod;
2397
+ window.selectEnergyPattern = selectEnergyPattern;
2398
+ window.selectQuality = selectQuality;
2399
+ window.saveProfile = saveProfile;
2400
+ window.completeProfile = completeProfile;
2401
+ window.openAdvancedProfile = openAdvancedProfile;
2402
+ window.closeModal = closeModal;
2403
+ window.saveAdvancedSettings = saveAdvancedSettings;
2404
+ </script>
2405
+ </body>
2406
+ </html>
index.html CHANGED
The diff for this file is too large to render. See raw diff