Upload templates/index.html with huggingface_hub
Browse files- templates/index.html +1354 -0
templates/index.html
ADDED
|
@@ -0,0 +1,1354 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>PerseverAI - Learning Companion</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: #1e1e1e;
|
| 14 |
+
--primary-dark: #000000;
|
| 15 |
+
--secondary: #3a3a3a;
|
| 16 |
+
--success: #2e7d32;
|
| 17 |
+
--warning: #b76e0e;
|
| 18 |
+
--danger: #c62828;
|
| 19 |
+
--info: #0d47a1;
|
| 20 |
+
--purple: #4a148c;
|
| 21 |
+
--gray-50: #fafafa;
|
| 22 |
+
--gray-100: #f5f5f5;
|
| 23 |
+
--gray-200: #e0e0e0;
|
| 24 |
+
--gray-600: #616161;
|
| 25 |
+
--gray-800: #212121;
|
| 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(0,0,0,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 {
|
| 130 |
+
display: grid;
|
| 131 |
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
| 132 |
+
gap: 16px;
|
| 133 |
+
margin-bottom: 28px;
|
| 134 |
+
background: var(--gray-50);
|
| 135 |
+
border-radius: 16px;
|
| 136 |
+
padding: 20px;
|
| 137 |
+
}
|
| 138 |
+
.planning-stat-item {
|
| 139 |
+
text-align: center;
|
| 140 |
+
background: white;
|
| 141 |
+
padding: 16px;
|
| 142 |
+
border-radius: 12px;
|
| 143 |
+
border: 1px solid var(--gray-200);
|
| 144 |
+
}
|
| 145 |
+
.planning-stat-number {
|
| 146 |
+
font-size: 2rem;
|
| 147 |
+
font-weight: 700;
|
| 148 |
+
color: var(--primary);
|
| 149 |
+
}
|
| 150 |
+
.planning-stat-label {
|
| 151 |
+
font-size: 0.75rem;
|
| 152 |
+
color: var(--gray-600);
|
| 153 |
+
margin-top: 4px;
|
| 154 |
+
}
|
| 155 |
+
|
| 156 |
+
.planning-sessions-table {
|
| 157 |
+
width: 100%;
|
| 158 |
+
border-collapse: collapse;
|
| 159 |
+
margin-top: 20px;
|
| 160 |
+
}
|
| 161 |
+
.planning-sessions-table th {
|
| 162 |
+
text-align: left;
|
| 163 |
+
padding: 14px 12px;
|
| 164 |
+
background: var(--gray-50);
|
| 165 |
+
border-bottom: 2px solid var(--gray-200);
|
| 166 |
+
font-weight: 600;
|
| 167 |
+
font-size: 0.8rem;
|
| 168 |
+
color: var(--gray-600);
|
| 169 |
+
}
|
| 170 |
+
.planning-sessions-table td {
|
| 171 |
+
padding: 16px 12px;
|
| 172 |
+
border-bottom: 1px solid var(--gray-200);
|
| 173 |
+
vertical-align: top;
|
| 174 |
+
}
|
| 175 |
+
.session-type-badge {
|
| 176 |
+
display: inline-block;
|
| 177 |
+
padding: 4px 10px;
|
| 178 |
+
border-radius: 20px;
|
| 179 |
+
font-size: 0.7rem;
|
| 180 |
+
font-weight: 500;
|
| 181 |
+
}
|
| 182 |
+
.type-apprentissage { background: #e0e0e0; color: #1e1e1e; }
|
| 183 |
+
.type-consolidation { background: #d0d0d0; color: #1e1e1e; }
|
| 184 |
+
.type-maintien { background: #c0c0c0; color: #1e1e1e; }
|
| 185 |
+
|
| 186 |
+
.retention-slider {
|
| 187 |
+
width: 100%;
|
| 188 |
+
margin: 15px 0;
|
| 189 |
+
}
|
| 190 |
+
.retention-slider input {
|
| 191 |
+
width: 100%;
|
| 192 |
+
cursor: pointer;
|
| 193 |
+
accent-color: var(--primary);
|
| 194 |
+
}
|
| 195 |
+
.retention-labels {
|
| 196 |
+
display: flex;
|
| 197 |
+
justify-content: space-between;
|
| 198 |
+
font-size: 0.7rem;
|
| 199 |
+
color: var(--gray-600);
|
| 200 |
+
margin-top: 5px;
|
| 201 |
+
}
|
| 202 |
+
|
| 203 |
+
.time-slots-group {
|
| 204 |
+
display: flex;
|
| 205 |
+
flex-wrap: wrap;
|
| 206 |
+
gap: 12px;
|
| 207 |
+
margin-top: 8px;
|
| 208 |
+
}
|
| 209 |
+
.time-slot-checkbox {
|
| 210 |
+
display: flex;
|
| 211 |
+
align-items: center;
|
| 212 |
+
gap: 6px;
|
| 213 |
+
background: var(--gray-50);
|
| 214 |
+
padding: 6px 12px;
|
| 215 |
+
border-radius: 20px;
|
| 216 |
+
border: 1px solid var(--gray-200);
|
| 217 |
+
cursor: pointer;
|
| 218 |
+
}
|
| 219 |
+
.radio-group {
|
| 220 |
+
display: flex;
|
| 221 |
+
gap: 20px;
|
| 222 |
+
margin-top: 8px;
|
| 223 |
+
}
|
| 224 |
+
.radio-option {
|
| 225 |
+
display: flex;
|
| 226 |
+
align-items: center;
|
| 227 |
+
gap: 8px;
|
| 228 |
+
cursor: pointer;
|
| 229 |
+
}
|
| 230 |
+
|
| 231 |
+
.notifications-table {
|
| 232 |
+
width: 100%;
|
| 233 |
+
border-collapse: collapse;
|
| 234 |
+
font-size: 0.85rem;
|
| 235 |
+
}
|
| 236 |
+
.notifications-table th {
|
| 237 |
+
text-align: left;
|
| 238 |
+
padding: 12px 8px;
|
| 239 |
+
background: var(--gray-50);
|
| 240 |
+
border-bottom: 2px solid var(--gray-200);
|
| 241 |
+
font-weight: 600;
|
| 242 |
+
}
|
| 243 |
+
.notifications-table td {
|
| 244 |
+
padding: 12px 8px;
|
| 245 |
+
border-bottom: 1px solid var(--gray-200);
|
| 246 |
+
}
|
| 247 |
+
|
| 248 |
+
.priority-high { color: var(--danger); font-weight: 600; }
|
| 249 |
+
.priority-medium { color: var(--warning); font-weight: 600; }
|
| 250 |
+
.priority-low { color: var(--success); font-weight: 600; }
|
| 251 |
+
|
| 252 |
+
.status-badge {
|
| 253 |
+
display: inline-block;
|
| 254 |
+
padding: 4px 10px;
|
| 255 |
+
border-radius: 20px;
|
| 256 |
+
font-size: 0.7rem;
|
| 257 |
+
font-weight: 500;
|
| 258 |
+
}
|
| 259 |
+
.status-pending { background: #e0e0e0; color: #424242; }
|
| 260 |
+
.status-accepted { background: #c8e6c9; color: #1b5e20; }
|
| 261 |
+
|
| 262 |
+
.action-cell {
|
| 263 |
+
display: flex;
|
| 264 |
+
flex-wrap: wrap;
|
| 265 |
+
gap: 6px;
|
| 266 |
+
}
|
| 267 |
+
.action-icon-btn {
|
| 268 |
+
background: transparent;
|
| 269 |
+
border: none;
|
| 270 |
+
cursor: pointer;
|
| 271 |
+
padding: 6px 10px;
|
| 272 |
+
border-radius: 20px;
|
| 273 |
+
font-size: 0.7rem;
|
| 274 |
+
font-weight: 500;
|
| 275 |
+
transition: all 0.2s;
|
| 276 |
+
}
|
| 277 |
+
.action-accept { background: #e8f0e8; color: #1e1e1e; }
|
| 278 |
+
.action-reject { background: #fce4e4; color: #c62828; }
|
| 279 |
+
.action-hold { background: #e3f2fd; color: #0d47a1; }
|
| 280 |
+
.action-help { background: #fff3e0; color: #b76e0e; }
|
| 281 |
+
|
| 282 |
+
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
| 283 |
+
.stat-card { background: white; border: 1px solid var(--gray-200); border-radius: 8px; padding: 16px; text-align: center; }
|
| 284 |
+
.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--primary); }
|
| 285 |
+
|
| 286 |
+
.tab-content { display: none; }
|
| 287 |
+
.tab-content.active { display: block; }
|
| 288 |
+
|
| 289 |
+
.spaced-repetition-container {
|
| 290 |
+
background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
|
| 291 |
+
border-radius: 16px;
|
| 292 |
+
padding: 20px;
|
| 293 |
+
margin-top: 20px;
|
| 294 |
+
}
|
| 295 |
+
.curve-legend {
|
| 296 |
+
display: flex;
|
| 297 |
+
justify-content: center;
|
| 298 |
+
gap: 24px;
|
| 299 |
+
margin-bottom: 16px;
|
| 300 |
+
font-size: 0.75rem;
|
| 301 |
+
}
|
| 302 |
+
.legend-item {
|
| 303 |
+
display: flex;
|
| 304 |
+
align-items: center;
|
| 305 |
+
gap: 8px;
|
| 306 |
+
}
|
| 307 |
+
.legend-color {
|
| 308 |
+
width: 20px;
|
| 309 |
+
height: 3px;
|
| 310 |
+
border-radius: 2px;
|
| 311 |
+
}
|
| 312 |
+
.legend-color.square {
|
| 313 |
+
width: 12px;
|
| 314 |
+
height: 12px;
|
| 315 |
+
border-radius: 50%;
|
| 316 |
+
}
|
| 317 |
+
|
| 318 |
+
@media (max-width: 768px) {
|
| 319 |
+
.container { padding: 16px; }
|
| 320 |
+
.planning-sessions-table { font-size: 0.7rem; }
|
| 321 |
+
.planning-sessions-table td, .planning-sessions-table th { padding: 8px 6px; }
|
| 322 |
+
}
|
| 323 |
+
|
| 324 |
+
.session-detail-line { font-size: 0.75rem; color: var(--gray-600); margin: 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
| 325 |
+
.export-btn { background: white; border: 1px solid var(--gray-200); padding: 8px 16px; border-radius: 8px; cursor: pointer; }
|
| 326 |
+
.export-btn:hover { background: var(--gray-50); }
|
| 327 |
+
|
| 328 |
+
.profile-progress {
|
| 329 |
+
background: var(--gray-100);
|
| 330 |
+
border-radius: 12px;
|
| 331 |
+
padding: 16px;
|
| 332 |
+
margin-bottom: 24px;
|
| 333 |
+
}
|
| 334 |
+
.progress-bar-container {
|
| 335 |
+
background: var(--gray-200);
|
| 336 |
+
border-radius: 20px;
|
| 337 |
+
height: 10px;
|
| 338 |
+
margin: 12px 0;
|
| 339 |
+
overflow: hidden;
|
| 340 |
+
}
|
| 341 |
+
.progress-bar-fill {
|
| 342 |
+
background: var(--primary);
|
| 343 |
+
width: 0%;
|
| 344 |
+
height: 100%;
|
| 345 |
+
border-radius: 20px;
|
| 346 |
+
transition: width 0.3s ease;
|
| 347 |
+
}
|
| 348 |
+
.big5-rating {
|
| 349 |
+
display: flex;
|
| 350 |
+
gap: 8px;
|
| 351 |
+
margin-top: 8px;
|
| 352 |
+
flex-wrap: wrap;
|
| 353 |
+
}
|
| 354 |
+
.rating-btn {
|
| 355 |
+
width: 40px;
|
| 356 |
+
height: 40px;
|
| 357 |
+
border-radius: 40px;
|
| 358 |
+
border: 1px solid var(--gray-200);
|
| 359 |
+
background: white;
|
| 360 |
+
cursor: pointer;
|
| 361 |
+
font-weight: 600;
|
| 362 |
+
transition: all 0.2s;
|
| 363 |
+
}
|
| 364 |
+
.rating-btn:hover { background: var(--gray-100); }
|
| 365 |
+
.rating-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
|
| 366 |
+
.motivation-rating {
|
| 367 |
+
display: flex;
|
| 368 |
+
gap: 8px;
|
| 369 |
+
margin-top: 8px;
|
| 370 |
+
flex-wrap: wrap;
|
| 371 |
+
}
|
| 372 |
+
.profile-recommendations {
|
| 373 |
+
background: #faf8e8;
|
| 374 |
+
border-left: 4px solid var(--warning);
|
| 375 |
+
padding: 16px;
|
| 376 |
+
border-radius: 12px;
|
| 377 |
+
margin-top: 20px;
|
| 378 |
+
}
|
| 379 |
+
.profile-summary-cards {
|
| 380 |
+
display: grid;
|
| 381 |
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| 382 |
+
gap: 16px;
|
| 383 |
+
margin-bottom: 24px;
|
| 384 |
+
}
|
| 385 |
+
.profile-mini-card {
|
| 386 |
+
background: var(--gray-50);
|
| 387 |
+
border-radius: 12px;
|
| 388 |
+
padding: 16px;
|
| 389 |
+
text-align: center;
|
| 390 |
+
}
|
| 391 |
+
.profile-mini-card h4 { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 8px; }
|
| 392 |
+
.profile-mini-card .value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
|
| 393 |
+
.flex-between { display: flex; justify-content: space-between; align-items: center; }
|
| 394 |
+
|
| 395 |
+
.dashboard-two-columns {
|
| 396 |
+
display: flex;
|
| 397 |
+
flex-wrap: wrap;
|
| 398 |
+
gap: 24px;
|
| 399 |
+
margin-bottom: 32px;
|
| 400 |
+
}
|
| 401 |
+
.heatmap-wrapper {
|
| 402 |
+
flex: 1.2;
|
| 403 |
+
min-width: 280px;
|
| 404 |
+
}
|
| 405 |
+
.radar-wrapper {
|
| 406 |
+
flex: 1;
|
| 407 |
+
min-width: 280px;
|
| 408 |
+
background: white;
|
| 409 |
+
border-radius: 20px;
|
| 410 |
+
padding: 20px;
|
| 411 |
+
border: 1px solid var(--gray-200);
|
| 412 |
+
box-shadow: var(--shadow-sm);
|
| 413 |
+
transition: box-shadow 0.2s ease;
|
| 414 |
+
}
|
| 415 |
+
.radar-wrapper:hover {
|
| 416 |
+
box-shadow: var(--shadow-md);
|
| 417 |
+
}
|
| 418 |
+
.radar-title {
|
| 419 |
+
font-weight: 600;
|
| 420 |
+
font-size: 0.9rem;
|
| 421 |
+
color: var(--gray-800);
|
| 422 |
+
margin-bottom: 16px;
|
| 423 |
+
padding-bottom: 8px;
|
| 424 |
+
border-bottom: 1px solid #eef2f8;
|
| 425 |
+
display: flex;
|
| 426 |
+
align-items: center;
|
| 427 |
+
gap: 8px;
|
| 428 |
+
}
|
| 429 |
+
.radar-container canvas {
|
| 430 |
+
max-height: 300px;
|
| 431 |
+
width: 100%;
|
| 432 |
+
}
|
| 433 |
+
.heatmap-container {
|
| 434 |
+
background: white;
|
| 435 |
+
border-radius: 20px;
|
| 436 |
+
padding: 24px 20px;
|
| 437 |
+
border: 1px solid var(--gray-200);
|
| 438 |
+
box-shadow: var(--shadow-sm);
|
| 439 |
+
transition: box-shadow 0.2s ease;
|
| 440 |
+
}
|
| 441 |
+
.heatmap-container:hover {
|
| 442 |
+
box-shadow: var(--shadow-md);
|
| 443 |
+
}
|
| 444 |
+
.heatmap-title {
|
| 445 |
+
display: flex;
|
| 446 |
+
justify-content: space-between;
|
| 447 |
+
align-items: baseline;
|
| 448 |
+
flex-wrap: wrap;
|
| 449 |
+
margin-bottom: 24px;
|
| 450 |
+
padding-bottom: 8px;
|
| 451 |
+
border-bottom: 1px solid #eef2f8;
|
| 452 |
+
}
|
| 453 |
+
.heatmap-title h4 {
|
| 454 |
+
font-weight: 600;
|
| 455 |
+
font-size: 0.9rem;
|
| 456 |
+
color: var(--gray-800);
|
| 457 |
+
letter-spacing: -0.2px;
|
| 458 |
+
}
|
| 459 |
+
.heatmap-sub {
|
| 460 |
+
font-size: 0.7rem;
|
| 461 |
+
color: var(--gray-500);
|
| 462 |
+
background: #f8fafc;
|
| 463 |
+
padding: 4px 10px;
|
| 464 |
+
border-radius: 30px;
|
| 465 |
+
}
|
| 466 |
+
.heatmap-grid-wrapper {
|
| 467 |
+
display: flex;
|
| 468 |
+
justify-content: center;
|
| 469 |
+
margin: 16px 0 10px 0;
|
| 470 |
+
overflow-x: auto;
|
| 471 |
+
}
|
| 472 |
+
.heatmap-grid {
|
| 473 |
+
display: grid;
|
| 474 |
+
grid-template-columns: repeat(7, 1fr);
|
| 475 |
+
gap: 8px;
|
| 476 |
+
max-width: 700px;
|
| 477 |
+
min-width: 280px;
|
| 478 |
+
background: #ffffff;
|
| 479 |
+
padding: 8px 4px;
|
| 480 |
+
border-radius: 24px;
|
| 481 |
+
}
|
| 482 |
+
.heatmap-day-label {
|
| 483 |
+
text-align: center;
|
| 484 |
+
font-size: 0.7rem;
|
| 485 |
+
font-weight: 600;
|
| 486 |
+
color: #5b6e8c;
|
| 487 |
+
margin-bottom: 8px;
|
| 488 |
+
letter-spacing: 0.3px;
|
| 489 |
+
}
|
| 490 |
+
.heatmap-cell {
|
| 491 |
+
aspect-ratio: 1 / 1;
|
| 492 |
+
border-radius: 10px;
|
| 493 |
+
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
|
| 494 |
+
cursor: default;
|
| 495 |
+
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
| 496 |
+
}
|
| 497 |
+
.heatmap-cell:hover {
|
| 498 |
+
transform: scale(1.04);
|
| 499 |
+
filter: brightness(0.96);
|
| 500 |
+
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
| 501 |
+
}
|
| 502 |
+
.heatmap-cell.level-0 { background-color: #f5f5f5; }
|
| 503 |
+
.heatmap-cell.level-1 { background-color: #d6d6d6; }
|
| 504 |
+
.heatmap-cell.level-2 { background-color: #a0a0a0; }
|
| 505 |
+
.heatmap-cell.level-3 { background-color: #6e6e6e; }
|
| 506 |
+
.heatmap-cell.level-4 { background-color: #2c2c2c; }
|
| 507 |
+
|
| 508 |
+
.legend-heatmap {
|
| 509 |
+
display: flex;
|
| 510 |
+
justify-content: center;
|
| 511 |
+
gap: 24px;
|
| 512 |
+
margin-top: 20px;
|
| 513 |
+
flex-wrap: wrap;
|
| 514 |
+
background: #fafcff;
|
| 515 |
+
padding: 12px 20px;
|
| 516 |
+
border-radius: 60px;
|
| 517 |
+
width: fit-content;
|
| 518 |
+
margin-left: auto;
|
| 519 |
+
margin-right: auto;
|
| 520 |
+
}
|
| 521 |
+
.legend-heatmap-item {
|
| 522 |
+
display: flex;
|
| 523 |
+
align-items: center;
|
| 524 |
+
gap: 8px;
|
| 525 |
+
font-size: 0.7rem;
|
| 526 |
+
font-weight: 500;
|
| 527 |
+
color: var(--gray-700);
|
| 528 |
+
}
|
| 529 |
+
.legend-color-box {
|
| 530 |
+
width: 24px;
|
| 531 |
+
height: 24px;
|
| 532 |
+
border-radius: 8px;
|
| 533 |
+
transition: transform 0.1s;
|
| 534 |
+
}
|
| 535 |
+
.legend-color-box.level-0 { background-color: #f5f5f5; border: 1px solid #e0e0e0; }
|
| 536 |
+
.legend-color-box.level-1 { background-color: #d6d6d6; }
|
| 537 |
+
.legend-color-box.level-2 { background-color: #a0a0a0; }
|
| 538 |
+
.legend-color-box.level-3 { background-color: #6e6e6e; }
|
| 539 |
+
.legend-color-box.level-4 { background-color: #2c2c2c; }
|
| 540 |
+
|
| 541 |
+
.symmetry-curve-card {
|
| 542 |
+
background: white;
|
| 543 |
+
border-radius: 20px;
|
| 544 |
+
padding: 18px 20px;
|
| 545 |
+
margin-bottom: 28px;
|
| 546 |
+
border: 1px solid var(--gray-200);
|
| 547 |
+
box-shadow: var(--shadow-sm);
|
| 548 |
+
}
|
| 549 |
+
.curve-header {
|
| 550 |
+
display: flex;
|
| 551 |
+
justify-content: space-between;
|
| 552 |
+
align-items: baseline;
|
| 553 |
+
flex-wrap: wrap;
|
| 554 |
+
margin-bottom: 20px;
|
| 555 |
+
}
|
| 556 |
+
.curve-header h4 {
|
| 557 |
+
font-weight: 600;
|
| 558 |
+
font-size: 0.9rem;
|
| 559 |
+
color: var(--gray-800);
|
| 560 |
+
}
|
| 561 |
+
.curve-legend-mini {
|
| 562 |
+
display: flex;
|
| 563 |
+
gap: 20px;
|
| 564 |
+
font-size: 0.7rem;
|
| 565 |
+
}
|
| 566 |
+
.symmetry-canvas {
|
| 567 |
+
max-height: 210px;
|
| 568 |
+
width: 100%;
|
| 569 |
+
background: #ffffff;
|
| 570 |
+
border-radius: 16px;
|
| 571 |
+
}
|
| 572 |
+
|
| 573 |
+
.indicator-grid {
|
| 574 |
+
display: grid;
|
| 575 |
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
| 576 |
+
gap: 20px;
|
| 577 |
+
margin-bottom: 0;
|
| 578 |
+
}
|
| 579 |
+
.indicator-card {
|
| 580 |
+
background: white;
|
| 581 |
+
border-radius: 20px;
|
| 582 |
+
padding: 20px 18px;
|
| 583 |
+
border: 1px solid var(--gray-200);
|
| 584 |
+
transition: box-shadow 0.2s;
|
| 585 |
+
box-shadow: var(--shadow-sm);
|
| 586 |
+
text-align: center;
|
| 587 |
+
}
|
| 588 |
+
.indicator-card:hover {
|
| 589 |
+
box-shadow: var(--shadow-md);
|
| 590 |
+
}
|
| 591 |
+
.indicator-header {
|
| 592 |
+
display: flex;
|
| 593 |
+
align-items: center;
|
| 594 |
+
gap: 12px;
|
| 595 |
+
margin-bottom: 16px;
|
| 596 |
+
justify-content: center;
|
| 597 |
+
}
|
| 598 |
+
.indicator-icon {
|
| 599 |
+
font-size: 1.6rem;
|
| 600 |
+
color: var(--primary);
|
| 601 |
+
background: #f0f0f0;
|
| 602 |
+
width: 44px;
|
| 603 |
+
height: 44px;
|
| 604 |
+
display: flex;
|
| 605 |
+
align-items: center;
|
| 606 |
+
justify-content: center;
|
| 607 |
+
border-radius: 44px;
|
| 608 |
+
}
|
| 609 |
+
.indicator-title {
|
| 610 |
+
font-weight: 600;
|
| 611 |
+
font-size: 0.9rem;
|
| 612 |
+
color: var(--gray-800);
|
| 613 |
+
letter-spacing: -0.2px;
|
| 614 |
+
}
|
| 615 |
+
|
| 616 |
+
.circular-progress {
|
| 617 |
+
position: relative;
|
| 618 |
+
width: 140px;
|
| 619 |
+
height: 140px;
|
| 620 |
+
margin: 0 auto 15px;
|
| 621 |
+
}
|
| 622 |
+
.circular-progress svg {
|
| 623 |
+
width: 140px;
|
| 624 |
+
height: 140px;
|
| 625 |
+
transform: rotate(-90deg);
|
| 626 |
+
}
|
| 627 |
+
.circular-progress circle {
|
| 628 |
+
fill: none;
|
| 629 |
+
stroke-width: 10;
|
| 630 |
+
stroke-linecap: round;
|
| 631 |
+
}
|
| 632 |
+
.circular-progress .bg-circle {
|
| 633 |
+
stroke: var(--gray-200);
|
| 634 |
+
}
|
| 635 |
+
.circular-progress .progress-circle {
|
| 636 |
+
stroke: var(--primary);
|
| 637 |
+
stroke-dasharray: 377;
|
| 638 |
+
stroke-dashoffset: 377;
|
| 639 |
+
transition: stroke-dashoffset 0.8s ease;
|
| 640 |
+
}
|
| 641 |
+
.circular-progress .progress-percent {
|
| 642 |
+
position: absolute;
|
| 643 |
+
top: 50%;
|
| 644 |
+
left: 50%;
|
| 645 |
+
transform: translate(-50%, -50%);
|
| 646 |
+
font-size: 1.8rem;
|
| 647 |
+
font-weight: 700;
|
| 648 |
+
color: var(--gray-800);
|
| 649 |
+
}
|
| 650 |
+
.circular-progress .progress-label {
|
| 651 |
+
position: absolute;
|
| 652 |
+
bottom: -5px;
|
| 653 |
+
left: 50%;
|
| 654 |
+
transform: translateX(-50%);
|
| 655 |
+
font-size: 0.7rem;
|
| 656 |
+
color: var(--gray-600);
|
| 657 |
+
white-space: nowrap;
|
| 658 |
+
}
|
| 659 |
+
|
| 660 |
+
.indicator-value {
|
| 661 |
+
font-size: 0.9rem;
|
| 662 |
+
font-weight: 600;
|
| 663 |
+
color: var(--gray-700);
|
| 664 |
+
margin-top: 8px;
|
| 665 |
+
}
|
| 666 |
+
.indicator-sub {
|
| 667 |
+
font-size: 0.75rem;
|
| 668 |
+
color: var(--gray-600);
|
| 669 |
+
border-top: 1px solid var(--gray-100);
|
| 670 |
+
margin-top: 12px;
|
| 671 |
+
padding-top: 12px;
|
| 672 |
+
}
|
| 673 |
+
.effort-badge-modern {
|
| 674 |
+
display: inline-block;
|
| 675 |
+
background: #f1f5f9;
|
| 676 |
+
padding: 6px 14px;
|
| 677 |
+
border-radius: 40px;
|
| 678 |
+
font-size: 0.8rem;
|
| 679 |
+
font-weight: 500;
|
| 680 |
+
color: #1e293b;
|
| 681 |
+
}
|
| 682 |
+
.persistence-tag {
|
| 683 |
+
background: #e0e0e0;
|
| 684 |
+
color: #1e1e1e;
|
| 685 |
+
padding: 4px 12px;
|
| 686 |
+
border-radius: 40px;
|
| 687 |
+
font-size: 0.75rem;
|
| 688 |
+
font-weight: 600;
|
| 689 |
+
display: inline-block;
|
| 690 |
+
}
|
| 691 |
+
.dashboard-view-toggle {
|
| 692 |
+
display: flex;
|
| 693 |
+
gap: 12px;
|
| 694 |
+
margin-bottom: 24px;
|
| 695 |
+
}
|
| 696 |
+
.view-btn {
|
| 697 |
+
padding: 8px 18px;
|
| 698 |
+
border-radius: 40px;
|
| 699 |
+
background: white;
|
| 700 |
+
border: 1px solid var(--gray-200);
|
| 701 |
+
cursor: pointer;
|
| 702 |
+
font-weight: 500;
|
| 703 |
+
}
|
| 704 |
+
.view-btn.active {
|
| 705 |
+
background: var(--primary);
|
| 706 |
+
color: white;
|
| 707 |
+
border-color: var(--primary);
|
| 708 |
+
}
|
| 709 |
+
|
| 710 |
+
.journal-section {
|
| 711 |
+
background: var(--gray-50);
|
| 712 |
+
border-radius: 12px;
|
| 713 |
+
padding: 18px;
|
| 714 |
+
margin-bottom: 24px;
|
| 715 |
+
border: 1px solid var(--gray-200);
|
| 716 |
+
}
|
| 717 |
+
.journal-section h4 {
|
| 718 |
+
font-size: 1rem;
|
| 719 |
+
font-weight: 600;
|
| 720 |
+
margin-bottom: 12px;
|
| 721 |
+
display: flex;
|
| 722 |
+
align-items: center;
|
| 723 |
+
gap: 8px;
|
| 724 |
+
color: var(--gray-800);
|
| 725 |
+
}
|
| 726 |
+
.journal-section textarea {
|
| 727 |
+
width: 100%;
|
| 728 |
+
border: 1px solid var(--gray-200);
|
| 729 |
+
border-radius: 10px;
|
| 730 |
+
padding: 12px;
|
| 731 |
+
font-family: inherit;
|
| 732 |
+
font-size: 0.85rem;
|
| 733 |
+
resize: vertical;
|
| 734 |
+
background: white;
|
| 735 |
+
}
|
| 736 |
+
.self-rating-group {
|
| 737 |
+
display: flex;
|
| 738 |
+
gap: 12px;
|
| 739 |
+
align-items: center;
|
| 740 |
+
margin-top: 12px;
|
| 741 |
+
flex-wrap: wrap;
|
| 742 |
+
}
|
| 743 |
+
.self-rating-group span {
|
| 744 |
+
font-size: 0.85rem;
|
| 745 |
+
font-weight: 500;
|
| 746 |
+
color: var(--gray-700);
|
| 747 |
+
}
|
| 748 |
+
.rating-stars {
|
| 749 |
+
display: flex;
|
| 750 |
+
gap: 8px;
|
| 751 |
+
}
|
| 752 |
+
.star-btn {
|
| 753 |
+
background: white;
|
| 754 |
+
border: 1px solid var(--gray-200);
|
| 755 |
+
width: 42px;
|
| 756 |
+
padding: 8px 0;
|
| 757 |
+
border-radius: 40px;
|
| 758 |
+
cursor: pointer;
|
| 759 |
+
font-weight: 600;
|
| 760 |
+
transition: all 0.2s;
|
| 761 |
+
text-align: center;
|
| 762 |
+
}
|
| 763 |
+
.star-btn.active {
|
| 764 |
+
background: var(--primary);
|
| 765 |
+
color: white;
|
| 766 |
+
border-color: var(--primary);
|
| 767 |
+
}
|
| 768 |
+
.journal-entries-list {
|
| 769 |
+
margin-top: 24px;
|
| 770 |
+
border-top: 1px solid var(--gray-200);
|
| 771 |
+
padding-top: 20px;
|
| 772 |
+
}
|
| 773 |
+
.journal-entry-item {
|
| 774 |
+
background: white;
|
| 775 |
+
border-radius: 12px;
|
| 776 |
+
padding: 14px;
|
| 777 |
+
margin-bottom: 12px;
|
| 778 |
+
border: 1px solid var(--gray-200);
|
| 779 |
+
}
|
| 780 |
+
.journal-entry-date {
|
| 781 |
+
font-size: 0.7rem;
|
| 782 |
+
color: var(--gray-500);
|
| 783 |
+
margin-bottom: 8px;
|
| 784 |
+
}
|
| 785 |
+
.journal-entry-content {
|
| 786 |
+
display: flex;
|
| 787 |
+
flex-wrap: wrap;
|
| 788 |
+
gap: 12px;
|
| 789 |
+
margin-top: 6px;
|
| 790 |
+
}
|
| 791 |
+
.journal-badge {
|
| 792 |
+
background: var(--gray-100);
|
| 793 |
+
padding: 2px 10px;
|
| 794 |
+
border-radius: 20px;
|
| 795 |
+
font-size: 0.7rem;
|
| 796 |
+
}
|
| 797 |
+
.date-selector {
|
| 798 |
+
margin-bottom: 20px;
|
| 799 |
+
display: flex;
|
| 800 |
+
align-items: center;
|
| 801 |
+
gap: 15px;
|
| 802 |
+
flex-wrap: wrap;
|
| 803 |
+
}
|
| 804 |
+
.date-selector label {
|
| 805 |
+
font-weight: 500;
|
| 806 |
+
color: var(--gray-700);
|
| 807 |
+
}
|
| 808 |
+
.journal-actions {
|
| 809 |
+
display: flex;
|
| 810 |
+
gap: 12px;
|
| 811 |
+
justify-content: flex-end;
|
| 812 |
+
margin-top: 10px;
|
| 813 |
+
}
|
| 814 |
+
|
| 815 |
+
.ia-reflective-message {
|
| 816 |
+
background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%);
|
| 817 |
+
border-left: 5px solid var(--primary);
|
| 818 |
+
border-radius: 16px;
|
| 819 |
+
padding: 22px 28px;
|
| 820 |
+
margin-bottom: 28px;
|
| 821 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
| 822 |
+
transition: all 0.3s ease;
|
| 823 |
+
position: relative;
|
| 824 |
+
overflow: hidden;
|
| 825 |
+
}
|
| 826 |
+
.ia-reflective-message:hover {
|
| 827 |
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
| 828 |
+
transform: translateY(-2px);
|
| 829 |
+
}
|
| 830 |
+
.ia-message-header {
|
| 831 |
+
display: flex;
|
| 832 |
+
align-items: center;
|
| 833 |
+
gap: 12px;
|
| 834 |
+
margin-bottom: 16px;
|
| 835 |
+
}
|
| 836 |
+
.ia-avatar {
|
| 837 |
+
background: var(--primary);
|
| 838 |
+
width: 44px;
|
| 839 |
+
height: 44px;
|
| 840 |
+
border-radius: 44px;
|
| 841 |
+
display: flex;
|
| 842 |
+
align-items: center;
|
| 843 |
+
justify-content: center;
|
| 844 |
+
color: white;
|
| 845 |
+
font-size: 1.3rem;
|
| 846 |
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
| 847 |
+
}
|
| 848 |
+
.ia-title {
|
| 849 |
+
font-weight: 700;
|
| 850 |
+
font-size: 1rem;
|
| 851 |
+
color: var(--primary-dark);
|
| 852 |
+
letter-spacing: -0.2px;
|
| 853 |
+
}
|
| 854 |
+
.ia-badge {
|
| 855 |
+
background: rgba(30,30,30,0.08);
|
| 856 |
+
padding: 4px 12px;
|
| 857 |
+
border-radius: 40px;
|
| 858 |
+
font-size: 0.7rem;
|
| 859 |
+
font-weight: 500;
|
| 860 |
+
color: var(--gray-600);
|
| 861 |
+
}
|
| 862 |
+
.ia-message-content {
|
| 863 |
+
font-size: 0.95rem;
|
| 864 |
+
line-height: 1.6;
|
| 865 |
+
color: var(--gray-800);
|
| 866 |
+
margin-bottom: 16px;
|
| 867 |
+
}
|
| 868 |
+
.ia-message-content strong {
|
| 869 |
+
color: var(--primary);
|
| 870 |
+
font-weight: 700;
|
| 871 |
+
}
|
| 872 |
+
.ia-stat-highlight {
|
| 873 |
+
display: inline-block;
|
| 874 |
+
background: white;
|
| 875 |
+
padding: 2px 8px;
|
| 876 |
+
border-radius: 20px;
|
| 877 |
+
font-weight: 700;
|
| 878 |
+
color: var(--primary);
|
| 879 |
+
margin: 0 2px;
|
| 880 |
+
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
| 881 |
+
}
|
| 882 |
+
.ia-footer {
|
| 883 |
+
display: flex;
|
| 884 |
+
justify-content: flex-end;
|
| 885 |
+
align-items: center;
|
| 886 |
+
gap: 16px;
|
| 887 |
+
margin-top: 12px;
|
| 888 |
+
padding-top: 12px;
|
| 889 |
+
border-top: 1px solid rgba(0,0,0,0.05);
|
| 890 |
+
font-size: 0.7rem;
|
| 891 |
+
color: var(--gray-500);
|
| 892 |
+
}
|
| 893 |
+
.ia-footer i {
|
| 894 |
+
font-size: 0.75rem;
|
| 895 |
+
}
|
| 896 |
+
@media (max-width: 640px) {
|
| 897 |
+
.ia-reflective-message { padding: 16px 20px; }
|
| 898 |
+
.ia-message-content { font-size: 0.85rem; }
|
| 899 |
+
}
|
| 900 |
+
|
| 901 |
+
/* Audio cards */
|
| 902 |
+
.audio-modern-card {
|
| 903 |
+
background: #ffffff;
|
| 904 |
+
border-radius: 20px;
|
| 905 |
+
padding: 12px 16px;
|
| 906 |
+
margin-top: 20px;
|
| 907 |
+
border: 1px solid #eaedf2;
|
| 908 |
+
transition: all 0.2s ease;
|
| 909 |
+
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
| 910 |
+
}
|
| 911 |
+
.audio-modern-card:hover {
|
| 912 |
+
border-color: #d0d5dd;
|
| 913 |
+
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
| 914 |
+
}
|
| 915 |
+
.audio-modern-header {
|
| 916 |
+
display: flex;
|
| 917 |
+
align-items: center;
|
| 918 |
+
gap: 10px;
|
| 919 |
+
margin-bottom: 12px;
|
| 920 |
+
}
|
| 921 |
+
.audio-modern-header i {
|
| 922 |
+
font-size: 0.9rem;
|
| 923 |
+
color: #3a3a3a;
|
| 924 |
+
background: #f5f7fa;
|
| 925 |
+
width: 30px;
|
| 926 |
+
height: 30px;
|
| 927 |
+
display: flex;
|
| 928 |
+
align-items: center;
|
| 929 |
+
justify-content: center;
|
| 930 |
+
border-radius: 30px;
|
| 931 |
+
}
|
| 932 |
+
.audio-modern-header span {
|
| 933 |
+
font-weight: 500;
|
| 934 |
+
font-size: 0.75rem;
|
| 935 |
+
color: #2c3e50;
|
| 936 |
+
letter-spacing: -0.1px;
|
| 937 |
+
}
|
| 938 |
+
.audio-modern-controls {
|
| 939 |
+
display: flex;
|
| 940 |
+
align-items: center;
|
| 941 |
+
gap: 12px;
|
| 942 |
+
flex-wrap: wrap;
|
| 943 |
+
}
|
| 944 |
+
.audio-play-btn-mini {
|
| 945 |
+
background: #1e1e1e;
|
| 946 |
+
border: none;
|
| 947 |
+
width: 36px;
|
| 948 |
+
height: 36px;
|
| 949 |
+
border-radius: 36px;
|
| 950 |
+
color: white;
|
| 951 |
+
cursor: pointer;
|
| 952 |
+
transition: all 0.2s;
|
| 953 |
+
display: flex;
|
| 954 |
+
align-items: center;
|
| 955 |
+
justify-content: center;
|
| 956 |
+
font-size: 0.8rem;
|
| 957 |
+
}
|
| 958 |
+
.audio-play-btn-mini:hover {
|
| 959 |
+
background: #000000;
|
| 960 |
+
transform: scale(0.98);
|
| 961 |
+
}
|
| 962 |
+
.audio-progress-modern {
|
| 963 |
+
flex: 1;
|
| 964 |
+
min-width: 140px;
|
| 965 |
+
}
|
| 966 |
+
.audio-progress-bar-modern {
|
| 967 |
+
width: 100%;
|
| 968 |
+
height: 4px;
|
| 969 |
+
background: #e2e8f0;
|
| 970 |
+
border-radius: 10px;
|
| 971 |
+
cursor: pointer;
|
| 972 |
+
position: relative;
|
| 973 |
+
overflow: hidden;
|
| 974 |
+
}
|
| 975 |
+
.audio-progress-fill-modern {
|
| 976 |
+
width: 0%;
|
| 977 |
+
height: 100%;
|
| 978 |
+
background: #1e1e1e;
|
| 979 |
+
border-radius: 10px;
|
| 980 |
+
transition: width 0.1s linear;
|
| 981 |
+
}
|
| 982 |
+
.audio-time-modern {
|
| 983 |
+
font-size: 0.65rem;
|
| 984 |
+
color: #5b6e8c;
|
| 985 |
+
font-family: monospace;
|
| 986 |
+
min-width: 70px;
|
| 987 |
+
}
|
| 988 |
+
.audio-volume-mini {
|
| 989 |
+
display: flex;
|
| 990 |
+
align-items: center;
|
| 991 |
+
gap: 6px;
|
| 992 |
+
}
|
| 993 |
+
.audio-volume-mini i {
|
| 994 |
+
font-size: 0.7rem;
|
| 995 |
+
color: #5b6e8c;
|
| 996 |
+
cursor: pointer;
|
| 997 |
+
}
|
| 998 |
+
.volume-slider-mini {
|
| 999 |
+
width: 60px;
|
| 1000 |
+
height: 3px;
|
| 1001 |
+
-webkit-appearance: none;
|
| 1002 |
+
background: #e2e8f0;
|
| 1003 |
+
border-radius: 3px;
|
| 1004 |
+
}
|
| 1005 |
+
.volume-slider-mini::-webkit-slider-thumb {
|
| 1006 |
+
-webkit-appearance: none;
|
| 1007 |
+
width: 8px;
|
| 1008 |
+
height: 8px;
|
| 1009 |
+
border-radius: 50%;
|
| 1010 |
+
background: #1e1e1e;
|
| 1011 |
+
cursor: pointer;
|
| 1012 |
+
}
|
| 1013 |
+
.audio-credit-micro {
|
| 1014 |
+
text-align: right;
|
| 1015 |
+
font-size: 0.55rem;
|
| 1016 |
+
color: #94a3b8;
|
| 1017 |
+
margin-top: 6px;
|
| 1018 |
+
letter-spacing: 0.2px;
|
| 1019 |
+
border-top: none;
|
| 1020 |
+
padding-top: 2px;
|
| 1021 |
+
opacity: 0.6;
|
| 1022 |
+
}
|
| 1023 |
+
.audio-credit-micro i {
|
| 1024 |
+
font-size: 0.5rem;
|
| 1025 |
+
margin-right: 2px;
|
| 1026 |
+
}
|
| 1027 |
+
@media (max-width: 640px) {
|
| 1028 |
+
.audio-modern-controls { flex-direction: column; align-items: stretch; }
|
| 1029 |
+
.audio-progress-modern { width: 100%; }
|
| 1030 |
+
}
|
| 1031 |
+
</style>
|
| 1032 |
+
</head>
|
| 1033 |
+
<body>
|
| 1034 |
+
<div class="container">
|
| 1035 |
+
<header class="header">
|
| 1036 |
+
<h1>Injaz-SRL</h1>
|
| 1037 |
+
<p>SRL Companion – Learn to manage effort and maintain persistence</p>
|
| 1038 |
+
<div class="badge">Injaz-SRL: Planning – Responsibility and Autonomy</div>
|
| 1039 |
+
</header>
|
| 1040 |
+
|
| 1041 |
+
<nav class="nav-tabs">
|
| 1042 |
+
<button class="nav-tab" onclick="showTab('profile')">Profile</button>
|
| 1043 |
+
<button class="nav-tab" onclick="showTab('objectif')">Objective</button>
|
| 1044 |
+
<button class="nav-tab" onclick="showTab('planner')">Planner</button>
|
| 1045 |
+
<button class="nav-tab" onclick="showTab('dashboard')">My Dashboard</button>
|
| 1046 |
+
<button class="nav-tab" onclick="showTab('journal')">My Journal</button>
|
| 1047 |
+
<button class="nav-tab" onclick="showTab('notifications')">AI Notifications</button>
|
| 1048 |
+
</nav>
|
| 1049 |
+
|
| 1050 |
+
<!-- PROFILE -->
|
| 1051 |
+
<section id="profile" class="tab-content">
|
| 1052 |
+
<div class="card">
|
| 1053 |
+
<div class="card-header"><h3>Personalized Learning Profile</h3><div><button class="btn btn-secondary" onclick="autoFillProfile()">Auto-fill</button><button class="btn btn-secondary" onclick="saveProfileData()">Save</button></div></div>
|
| 1054 |
+
<div class="profile-progress"><div class="flex-between"><span><strong>Profile Completion</strong></span><span id="profileCompletionPercent">40%</span></div><div class="progress-bar-container"><div class="progress-bar-fill" id="profileProgressFill" style="width: 40%;"></div></div><div class="flex-between"><span>Questionnaires completed: <span id="completedCount">2</span>/5</span><span>Personalized profile: <span id="profileLevel">Intermediate</span></span></div></div>
|
| 1055 |
+
<div class="card" style="margin-bottom:20px;padding:20px;"><h4 style="margin-bottom:16px;">Personality Profile </h4><p style="font-size:0.8rem;color:var(--gray-600);margin-bottom:20px;">Rate your personality traits on a scale of 1 to 5</p>
|
| 1056 |
+
<div class="form-group"><label class="form-label">I am sociable, outgoing, energetic</label><div class="big5-rating" data-trait="extraversion"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1057 |
+
<div class="form-group"><label class="form-label">I am intellectually curious, I like new experiences</label><div class="big5-rating" data-trait="openness"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1058 |
+
<div class="form-group"><label class="form-label">I am organized, reliable, I keep my commitments</label><div class="big5-rating" data-trait="conscientiousness"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1059 |
+
<div class="form-group"><label class="form-label">I am cooperative, helpful, empathetic</label><div class="big5-rating" data-trait="agreeableness"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1060 |
+
<div class="form-group"><label class="form-label">I easily feel anxiety, stress, nervousness</label><div class="big5-rating" data-trait="neuroticism"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1061 |
+
<div style="margin-top:16px;font-size:0.8rem;background:var(--gray-50);padding:12px;border-radius:8px;">Section completed - Neuroticism score: <span id="neuroticismScore">4.0</span> (sleep quality important)</div>
|
| 1062 |
+
</div>
|
| 1063 |
+
<div class="card" style="margin-bottom:20px;padding:20px;"><h4 style="margin-bottom:16px;">Motivational Profile</h4><p style="font-size:0.8rem;margin-bottom:20px;">Why do you study? Select your main motivations</p>
|
| 1064 |
+
<div class="form-group"><label class="form-label">I study because I love learning, I find it interesting and enjoyable</label><div class="motivation-rating" data-motivation="intrinsic"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1065 |
+
<div class="form-group"><label class="form-label">I study to get good grades and please my parents/teachers</label><div class="motivation-rating" data-motivation="introjected"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1066 |
+
<div style="margin-top:16px;font-size:0.8rem;background:var(--gray-50);padding:12px;border-radius:8px;">Section completed - Introjected motivation: <span id="introjectedScore">4.0</span> (moderate internal pressure)</div>
|
| 1067 |
+
</div>
|
| 1068 |
+
<!-- New section: Importance of reasons for studying (multi-choice) -->
|
| 1069 |
+
<div class="card" style="margin-bottom:20px;padding:20px;">
|
| 1070 |
+
<h4 style="margin-bottom:16px;">Importance of reasons in your decision to study</h4>
|
| 1071 |
+
<p style="font-size:0.8rem;color:var(--gray-600);margin-bottom:20px;">(1 = Not at all important; 5 = Very important)</p>
|
| 1072 |
+
<div class="form-group"><label class="form-label">Get an education</label><div class="big5-rating" data-trait="reason_education"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1073 |
+
<div class="form-group"><label class="form-label">Obtain more degrees</label><div class="big5-rating" data-trait="reason_degrees"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1074 |
+
<div class="form-group"><label class="form-label">Earn more money</label><div class="big5-rating" data-trait="reason_money"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1075 |
+
<div class="form-group"><label class="form-label">Prove someone wrong</label><div class="big5-rating" data-trait="reason_prove_wrong"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1076 |
+
<div class="form-group"><label class="form-label">Prove to yourself that you are wrong</label><div class="big5-rating" data-trait="reason_self_prove"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1077 |
+
<div class="form-group"><label class="form-label">Become independent</label><div class="big5-rating" data-trait="reason_independent"><button type="button" class="rating-btn" data-value="1">1</button><button type="button" class="rating-btn" data-value="2">2</button><button type="button" class="rating-btn" data-value="3">3</button><button type="button" class="rating-btn" data-value="4">4</button><button type="button" class="rating-btn" data-value="5">5</button></div></div>
|
| 1078 |
+
<div style="margin-top:16px;font-size:0.8rem;background:var(--gray-50);padding:12px;border-radius:8px;">Section completed - These reasons influence your engagement and perseverance.</div>
|
| 1079 |
+
</div>
|
| 1080 |
+
<div class="profile-summary-cards"><div class="profile-mini-card"><h4>Big Five Traits</h4><div class="value" id="summaryExtraversion">3.0</div><div>Extraversion</div></div><div class="profile-mini-card"><div class="value" id="summaryOpenness">3.0</div><div>Openness</div></div><div class="profile-mini-card"><div class="value" id="summaryConscientiousness">4.0</div><div>Conscientiousness</div></div><div class="profile-mini-card"><h4>Motivation</h4><div class="value" id="summaryIntrinsic">3.0</div><div>Intrinsic</div></div><div class="profile-mini-card"><div class="value" id="summaryIntrojected">4.0</div><div>Introjected</div></div></div>
|
| 1081 |
+
<div class="profile-recommendations" style="background: transparent; border-left: none;"><h4>Personalized Recommendations</h4><div id="recommendationsContainer"><p>Sleep quality: Maintain 7-8 hours of quality sleep.</p><p>Planning: Strengthen your organization with reminders.</p></div></div>
|
| 1082 |
+
<button class="btn btn-primary btn-large" onclick="finalizeProfile()" style="width:100%;"><i class="fas fa-check-circle"></i> Finalize and Generate Personalized Profile</button>
|
| 1083 |
+
</div>
|
| 1084 |
+
</section>
|
| 1085 |
+
|
| 1086 |
+
<!-- OBJECTIVE -->
|
| 1087 |
+
<section id="objectif" class="tab-content"><div class="card"><div class="card-header"><h3>Define My Learning Objective</h3></div><div class="form-row"><div class="form-col"><label class="form-label">Target Skill</label><select id="competence" class="form-control"></select></div><div class="form-col"><label class="form-label">Current Level</label><select id="level" class="form-control"><option value="0">Beginner</option><option value="1" selected>Intermediate</option><option value="2">Advanced</option></select></div></div><div class="form-row"><div class="form-col"><label class="form-label">Start Date</label><input type="date" id="start" class="form-control" value="2024-01-15"></div><div class="form-col"><label class="form-label">End Date</label><input type="date" id="end" class="form-control" value="2024-12-31"></div></div><div class="form-row"><div class="form-col"><label class="form-label">Session Duration (minutes)</label><select id="sessionDuration" class="form-control"><option value="20" selected>20 minutes (Optimal)</option><option value="30">30 minutes</option><option value="45">45 minutes</option></select></div><div class="form-col"><label class="form-label">Productivity Method</label><div class="radio-group"><label class="radio-option"><input type="radio" name="productivityMethod" value="pomodoro" checked> Pomodoro</label><label class="radio-option"><input type="radio" name="productivityMethod" value="deepwork"> Deep Work</label></div></div></div><div class="form-row"><div class="form-col"><label class="form-label">Energy Type</label><div class="radio-group"><label class="radio-option"><input type="radio" name="energyType" value="morning" checked> Morning</label><label class="radio-option"><input type="radio" name="energyType" value="evening"> Evening</label></div></div><div class="form-col"><label class="form-label">Available Time Slots</label><div class="time-slots-group" id="timeSlotsGroup"><label class="time-slot-checkbox"><input type="checkbox" value="08:00-10:00"> 08:00-10:00</label><label class="time-slot-checkbox"><input type="checkbox" value="10:00-12:00"> 10:00-12:00</label><label class="time-slot-checkbox"><input type="checkbox" value="14:00-16:00"> 14:00-16:00</label></div></div></div><div class="form-group"><label class="form-label">Estimated Retention Quality</label><div class="retention-slider"><input type="range" id="retentionQuality" min="0" max="3" step="1" value="2"><div class="retention-labels"><span>0 - Low</span><span>1 - Medium</span><span>2 - Good</span><span>3 - Excellent</span></div></div><div id="retentionValueDisplay">Good - Progressive consolidation</div></div><button class="btn btn-primary btn-large" onclick="generatePlanner()" style="width:100%;"><i class="fas fa-magic"></i> Generate Personalized Planner</button></div></section>
|
| 1088 |
+
|
| 1089 |
+
<!-- PLANNING -->
|
| 1090 |
+
<section id="planner" class="tab-content"><div class="card"><div class="card-header"><h3><i class="fas fa-calendar-alt"></i> Personalized Planner</h3><button class="export-btn" onclick="exportPlanning()"><i class="fas fa-download"></i> Export</button></div><div class="planning-stats" id="planningStats"><div class="planning-stat-item"><div class="planning-stat-number" id="statSessions">6</div><div class="planning-stat-label">Sessions Planned</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statTotalDays">270</div><div class="planning-stat-label">Total Days</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statQuality">3/4</div><div class="planning-stat-label">Quality Level</div></div><div class="planning-stat-item"><div class="planning-stat-number" id="statDuration">20min</div><div class="planning-stat-label">Duration/Session</div></div></div><div style="overflow-x:auto;"><table class="planning-sessions-table" id="sessionsTable"><thead><tr><th>Date</th><th>Session</th><th>Skill</th><th>Duration</th><th>Interval</th><th>Type</th><th>Strategy</th><th>Productivity</th><th>Optimal Time</th></tr></thead><tbody id="sessionsTableBody"></tbody></table></div><div class="spaced-repetition-container"><h4><i class="fas fa-chart-line"></i> Spaced Repetition Curve</h4><div class="curve-legend"><div class="legend-item"><div class="legend-color" style="background:#1e1e1e;"></div><span>Retention threshold</span></div><div class="legend-item"><div class="legend-color square" style="background:#424242;"></div><span>Sessions</span></div></div><canvas id="spacedRepetitionCurve" width="100%" height="200" style="max-height:200px; width:100%;"></canvas><div id="intervalDatesCurve" style="font-size:0.7rem; text-align:center; margin-top:8px;"></div></div></div></section>
|
| 1091 |
+
|
| 1092 |
+
<!-- DASHBOARD -->
|
| 1093 |
+
<section id="dashboard" class="tab-content">
|
| 1094 |
+
<div class="card">
|
| 1095 |
+
<div class="card-header"><h3><i class="fas fa-chart-simple"></i> Persistence & Effort Management Analysis</h3><div class="dashboard-view-toggle"><button class="view-btn active" data-view="combined" onclick="setDashboardView('combined')"> Overview</button></div></div>
|
| 1096 |
+
|
| 1097 |
+
<div class="ia-reflective-message">
|
| 1098 |
+
<div class="ia-message-header">
|
| 1099 |
+
<div class="ia-avatar"><i class="fas fa-brain"></i></div>
|
| 1100 |
+
<div><div class="ia-title">Reflective Message </div></div>
|
| 1101 |
+
</div>
|
| 1102 |
+
<div class="ia-message-content">
|
| 1103 |
+
Your engagement is very positive: you start <strong class="ia-stat-highlight">85%</strong> of activities, interact strongly with resources (<strong class="ia-stat-highlight">80%</strong>), and complete <strong class="ia-stat-highlight">74%</strong> of tasks. Your work regularity (<strong class="ia-stat-highlight">90%</strong>) and deadline management (<strong class="ia-stat-highlight">84%</strong>) show excellent perseverance.
|
| 1104 |
+
</div>
|
| 1105 |
+
</div>
|
| 1106 |
+
|
| 1107 |
+
<div class="dashboard-two-columns">
|
| 1108 |
+
<div class="heatmap-wrapper">
|
| 1109 |
+
<div class="heatmap-container">
|
| 1110 |
+
<div class="heatmap-title"><h4><i class="fas fa-fire" style="color:#f97316;"></i> Activity Heatmap – 4 weeks</h4><span class="heatmap-sub">Daily engagement intensity</span></div>
|
| 1111 |
+
<div class="heatmap-grid-wrapper"><div class="heatmap-grid" id="heatmapGrid"></div></div>
|
| 1112 |
+
<div class="legend-heatmap" id="heatmapLegend"></div>
|
| 1113 |
+
</div>
|
| 1114 |
+
<!-- Audio player -->
|
| 1115 |
+
<div class="audio-modern-card" id="heatmapAudioCard">
|
| 1116 |
+
<div class="audio-modern-header">
|
| 1117 |
+
<i class="fas fa-chart-line"></i>
|
| 1118 |
+
<span>Audio analysis · Activity heatmap</span>
|
| 1119 |
+
</div>
|
| 1120 |
+
<div class="audio-modern-controls">
|
| 1121 |
+
<button class="audio-play-btn-mini" onclick="toggleAudio('heatmapAudio')"><i class="fas fa-play" id="heatmapPlayIcon"></i></button>
|
| 1122 |
+
<div class="audio-progress-modern">
|
| 1123 |
+
<div class="audio-progress-bar-modern" id="heatmapProgressBar" onclick="seekAudio('heatmapAudio', event)">
|
| 1124 |
+
<div class="audio-progress-fill-modern" id="heatmapProgressFill"></div>
|
| 1125 |
+
</div>
|
| 1126 |
+
</div>
|
| 1127 |
+
<div class="audio-time-modern"><span id="heatmapCurrentTime">0:00</span> / <span id="heatmapDuration">0:00</span></div>
|
| 1128 |
+
<div class="audio-volume-mini">
|
| 1129 |
+
<i class="fas fa-volume-up" onclick="toggleMute('heatmapAudio')"></i>
|
| 1130 |
+
<input type="range" class="volume-slider-mini" id="heatmapVolume" min="0" max="1" step="0.01" value="0.7" onchange="setVolume('heatmapAudio', this.value)">
|
| 1131 |
+
</div>
|
| 1132 |
+
</div>
|
| 1133 |
+
<div class="audio-credit-micro"><i class="fas fa-microphone-alt"></i> AI Synthesis</div>
|
| 1134 |
+
</div>
|
| 1135 |
+
</div>
|
| 1136 |
+
|
| 1137 |
+
<div class="radar-wrapper">
|
| 1138 |
+
<div class="radar-title"><i class="fas fa-chart-pie"></i> Engagement Analysis: Learning Behavior Indicators</div>
|
| 1139 |
+
<div class="radar-container"><canvas id="engagementRadarChart" width="400" height="400" style="max-width:100%; height:auto;"></canvas></div>
|
| 1140 |
+
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; font-size: 0.7rem; color: var(--gray-600);"></div>
|
| 1141 |
+
<!-- Audio player -->
|
| 1142 |
+
<div class="audio-modern-card" id="radarAudioCard">
|
| 1143 |
+
<div class="audio-modern-header">
|
| 1144 |
+
<i class="fas fa-chart-pie"></i>
|
| 1145 |
+
<span>Audio analysis · Engagement radar</span>
|
| 1146 |
+
</div>
|
| 1147 |
+
<div class="audio-modern-controls">
|
| 1148 |
+
<button class="audio-play-btn-mini" onclick="toggleAudio('radarAudio')"><i class="fas fa-play" id="radarPlayIcon"></i></button>
|
| 1149 |
+
<div class="audio-progress-modern">
|
| 1150 |
+
<div class="audio-progress-bar-modern" id="radarProgressBar" onclick="seekAudio('radarAudio', event)">
|
| 1151 |
+
<div class="audio-progress-fill-modern" id="radarProgressFill"></div>
|
| 1152 |
+
</div>
|
| 1153 |
+
</div>
|
| 1154 |
+
<div class="audio-time-modern"><span id="radarCurrentTime">0:00</span> / <span id="radarDuration">0:00</span></div>
|
| 1155 |
+
<div class="audio-volume-mini">
|
| 1156 |
+
<i class="fas fa-volume-up" onclick="toggleMute('radarAudio')"></i>
|
| 1157 |
+
<input type="range" class="volume-slider-mini" id="radarVolume" min="0" max="1" step="0.01" value="0.7" onchange="setVolume('radarAudio', this.value)">
|
| 1158 |
+
</div>
|
| 1159 |
+
</div>
|
| 1160 |
+
<div class="audio-credit-micro"><i class="fas fa-microphone-alt"></i> AI Synthesis</div>
|
| 1161 |
+
</div>
|
| 1162 |
+
</div>
|
| 1163 |
+
</div>
|
| 1164 |
+
|
| 1165 |
+
<div class="symmetry-curve-card"><div class="curve-header"><h4><i class="fas fa-chart-line"></i> Average Intensity Per Day</h4><div class="curve-legend-mini"><span style="color:#1e1e1e;">● Average intensity</span><span style="color:#616161;">● Symmetric mirror</span></div></div><canvas id="symmetryHeatmapCurve" width="100%" height="180" style="max-height:180px; width:100%;" class="symmetry-canvas"></canvas><p style="font-size:0.7rem; color:var(--gray-500); margin-top:12px; text-align:center;"><i class="fas fa-chart-simple"></i> Average intensity per day curve (left/right symmetry). Visualization of activity peaks.</p></div>
|
| 1166 |
+
<div class="indicator-grid">
|
| 1167 |
+
<div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-clock"></i></div><div class="indicator-title">Work regularity</div></div><div class="circular-progress" id="regularityCircle"><svg viewBox="0 0 120 120"><circle class="bg-circle" cx="60" cy="60" r="54"></circle><circle class="progress-circle" cx="60" cy="60" r="54" id="regularityCircleProgress"></circle></svg><div class="progress-percent" id="regularityPercent">90%</div><div class="progress-label"></div></div><div class="indicator-sub">Consistency of the learner's activity over time.</div></div>
|
| 1168 |
+
<div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-calendar-check"></i></div><div class="indicator-title">Deadline management</div></div><div class="circular-progress" id="deadlineCircle"><svg viewBox="0 0 120 120"><circle class="bg-circle" cx="60" cy="60" r="54"></circle><circle class="progress-circle" cx="60" cy="60" r="54" id="deadlineCircleProgress"></circle></svg><div class="progress-percent" id="deadlinePercent">88%</div><div class="progress-label"></div></div><div class="indicator-sub">Learner's ability to meet deadlines.</div></div>
|
| 1169 |
+
<div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-bolt"></i></div><div class="indicator-title">Effort pattern</div></div><div><span class="effort-badge-modern" id="effortPattern">Concentrated effort (Activity peak Thu/Fri)</span></div><div class="indicator-sub">Temporal dynamics of effort.</div></div>
|
| 1170 |
+
<div class="indicator-card"><div class="indicator-header"><div class="indicator-icon"><i class="fas fa-chart-line"></i></div><div class="indicator-title">Persistence & effort management</div></div><div><span class="persistence-tag" id="persistenceScore">Very high</span></div><div class="indicator-sub">Global perseverance index</div></div>
|
| 1171 |
+
</div>
|
| 1172 |
+
</div>
|
| 1173 |
+
</section>
|
| 1174 |
+
|
| 1175 |
+
<!-- MY JOURNAL -->
|
| 1176 |
+
<section id="journal" class="tab-content">
|
| 1177 |
+
<div class="card">
|
| 1178 |
+
<div class="card-header"><h3><i class="far fa-edit"></i> My Learning Journal</h3></div>
|
| 1179 |
+
<div class="date-selector"><label><i class="far fa-calendar-alt"></i> Entry date:</label><input type="date" id="journalDate" class="form-control" style="width: auto;" value=""></div>
|
| 1180 |
+
<div class="journal-section"><h4><i class="fas fa-tasks"></i> Planned (To-Do)</h4><textarea id="plannedText" rows="2" placeholder="What you plan to learn..."></textarea></div>
|
| 1181 |
+
<div class="journal-section"><h4><i class="fas fa-sync-alt"></i> In Progress (Doing)</h4><textarea id="doingText" rows="2" placeholder="What you are currently doing..."></textarea></div>
|
| 1182 |
+
<div class="journal-section"><h4><i class="fas fa-check-circle"></i> Accomplished (Done)</h4><textarea id="doneText" rows="2" placeholder="What you have accomplished..."></textarea><div class="self-rating-group"><span><i class="fas fa-star"></i> Self-assessment (1-5):</span><div class="rating-stars" id="selfRatingGroup"><button type="button" class="star-btn" data-rating="1">1</button><button type="button" class="star-btn" data-rating="2">2</button><button type="button" class="star-btn" data-rating="3">3</button><button type="button" class="star-btn" data-rating="4">4</button><button type="button" class="star-btn" data-rating="5">5</button></div></div></div>
|
| 1183 |
+
<div class="journal-actions"><button class="btn btn-secondary" onclick="clearJournalForm()"><i class="fas fa-eraser"></i> Clear form</button><button class="btn btn-primary" onclick="saveJournalEntry()"><i class="fas fa-save"></i> Save entry</button></div>
|
| 1184 |
+
<div class="journal-entries-list" id="journalEntriesList"></div>
|
| 1185 |
+
</div>
|
| 1186 |
+
</section>
|
| 1187 |
+
|
| 1188 |
+
<!-- NOTIFICATIONS -->
|
| 1189 |
+
<section id="notifications" class="tab-content"><div class="card"><div class="card-header"><h3><i class="fas fa-bell"></i> AI Notifications - Events Table</h3><button class="btn btn-primary" onclick="generateRandomEvent()"><i class="fas fa-plus"></i> Generate event</button></div><div class="stats-grid"><div class="stat-card"><div class="stat-value" id="totalEvents">0</div><div class="stat-label">Total</div></div><div class="stat-card"><div class="stat-value" id="pendingEvents">0</div><div class="stat-label">Pending</div></div><div class="stat-card"><div class="stat-value" id="acceptedEvents">0</div><div class="stat-label">Accepted</div></div></div><div style="overflow-x:auto;"><table class="notifications-table"><thead><tr><th>Date</th><th>Type</th><th>Title</th><th>Message</th><th>Priority</th><th>Status</th><th>Actions</th></tr></thead><tbody id="notificationsTableBody"></tbody></table></div><div class="chart-container"><canvas id="notificationEfficiencyChart"></canvas></div></div></section>
|
| 1190 |
+
</div>
|
| 1191 |
+
|
| 1192 |
+
<script>
|
| 1193 |
+
// Variables globales pour les lecteurs audio
|
| 1194 |
+
let heatmapAudio = null;
|
| 1195 |
+
let radarAudio = null;
|
| 1196 |
+
|
| 1197 |
+
// Updated skills list: School subjects
|
| 1198 |
+
const competencesData = [
|
| 1199 |
+
{ "id": "biology", "label": "Natural and Life Sciences (Biology)" },
|
| 1200 |
+
{ "id": "physics", "label": "Physics" },
|
| 1201 |
+
{ "id": "mathematics", "label": "Mathematics" },
|
| 1202 |
+
{ "id": "arabic", "label": "Arabic" },
|
| 1203 |
+
{ "id": "french", "label": "French" },
|
| 1204 |
+
{ "id": "english", "label": "English" },
|
| 1205 |
+
{ "id": "history_geo", "label": "History and Geography" },
|
| 1206 |
+
{ "id": "philosophy", "label": "Philosophy" },
|
| 1207 |
+
{ "id": "islamic", "label": "Islamic Studies" }
|
| 1208 |
+
];
|
| 1209 |
+
|
| 1210 |
+
let eventsList = [], currentSessions = [], spacedChart = null, symmetryChart = null, radarChart = null;
|
| 1211 |
+
let profileData = { extraversion: 3, openness: 3, conscientiousness: 4, agreeableness: 3, neuroticism: 3, intrinsic: 3, introjected: 4, reason_education: 3, reason_degrees: 3, reason_money: 3, reason_prove_wrong: 2, reason_self_prove: 2, reason_independent: 3 };
|
| 1212 |
+
const eventTemplates = [{ type: "Study reminder", title: "Revision session", message: "Your session is scheduled for today.", priority: "high" },{ type: "AI Advice", title: "Optimization", message: "Review conjugations.", priority: "medium" },{ type: "Encouragement", title: "Progress", message: "80% of objectives reached.", priority: "low" }];
|
| 1213 |
+
let journalEntries = [];
|
| 1214 |
+
const radarIndicators = ["Activity start", "Activity completion","Error rate", "Response attempts","Validated knowledge elements", "Resource interactions","Score", "Average skill level"];
|
| 1215 |
+
const radarValues = [85, 74, 78, 78, 72, 80, 70, 80];
|
| 1216 |
+
|
| 1217 |
+
function initRadarChart() {
|
| 1218 |
+
const ctx = document.getElementById('engagementRadarChart')?.getContext('2d');
|
| 1219 |
+
if(!ctx) return;
|
| 1220 |
+
if(radarChart) radarChart.destroy();
|
| 1221 |
+
radarChart = new Chart(ctx, {
|
| 1222 |
+
type: 'radar',
|
| 1223 |
+
data: { labels: radarIndicators, datasets: [{ label: 'Rate (%)', data: radarValues, backgroundColor: 'rgba(30, 30, 30, 0.2)', borderColor: '#1e1e1e', borderWidth: 2, pointBackgroundColor: '#1e1e1e', pointBorderColor: '#ffffff', pointRadius: 5, fill: true }] },
|
| 1224 |
+
options: { responsive: true, maintainAspectRatio: true, scales: { r: { beginAtZero: true, max: 100, ticks: { stepSize: 20 }, grid: { color: '#e0e0e0' }, pointLabels: { font: { size: 10 } } } }, plugins: { tooltip: { callbacks: { label: (ctx) => `${ctx.label}: ${ctx.raw}%` } }, legend: { display: false } } }
|
| 1225 |
+
});
|
| 1226 |
+
}
|
| 1227 |
+
|
| 1228 |
+
function initAudioPlayers() {
|
| 1229 |
+
heatmapAudio = new Audio('heatmap.mp3');
|
| 1230 |
+
radarAudio = new Audio('radar.mp3');
|
| 1231 |
+
heatmapAudio.addEventListener('timeupdate', () => updateProgress('heatmap'));
|
| 1232 |
+
heatmapAudio.addEventListener('loadedmetadata', () => document.getElementById('heatmapDuration').innerText = formatTime(heatmapAudio.duration));
|
| 1233 |
+
heatmapAudio.addEventListener('ended', () => { const icon = document.getElementById('heatmapPlayIcon'); if(icon) icon.className = 'fas fa-play'; });
|
| 1234 |
+
radarAudio.addEventListener('timeupdate', () => updateProgress('radar'));
|
| 1235 |
+
radarAudio.addEventListener('loadedmetadata', () => document.getElementById('radarDuration').innerText = formatTime(radarAudio.duration));
|
| 1236 |
+
radarAudio.addEventListener('ended', () => { const icon = document.getElementById('radarPlayIcon'); if(icon) icon.className = 'fas fa-play'; });
|
| 1237 |
+
const heatVol = document.getElementById('heatmapVolume');
|
| 1238 |
+
const radVol = document.getElementById('radarVolume');
|
| 1239 |
+
if(heatVol) heatmapAudio.volume = parseFloat(heatVol.value);
|
| 1240 |
+
if(radVol) radarAudio.volume = parseFloat(radVol.value);
|
| 1241 |
+
}
|
| 1242 |
+
|
| 1243 |
+
function toggleAudio(audioId) {
|
| 1244 |
+
let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio;
|
| 1245 |
+
let playIcon = document.getElementById(audioId === 'heatmapAudio' ? 'heatmapPlayIcon' : 'radarPlayIcon');
|
| 1246 |
+
if(audio.paused) {
|
| 1247 |
+
if(audioId === 'heatmapAudio' && radarAudio && !radarAudio.paused) { radarAudio.pause(); const rIcon = document.getElementById('radarPlayIcon'); if(rIcon) rIcon.className = 'fas fa-play'; }
|
| 1248 |
+
else if(audioId === 'radarAudio' && heatmapAudio && !heatmapAudio.paused) { heatmapAudio.pause(); const hIcon = document.getElementById('heatmapPlayIcon'); if(hIcon) hIcon.className = 'fas fa-play'; }
|
| 1249 |
+
audio.play();
|
| 1250 |
+
if(playIcon) playIcon.className = 'fas fa-pause';
|
| 1251 |
+
} else { audio.pause(); if(playIcon) playIcon.className = 'fas fa-play'; }
|
| 1252 |
+
}
|
| 1253 |
+
|
| 1254 |
+
function updateProgress(audioType) {
|
| 1255 |
+
let audio = audioType === 'heatmap' ? heatmapAudio : radarAudio;
|
| 1256 |
+
let fill = document.getElementById(audioType === 'heatmap' ? 'heatmapProgressFill' : 'radarProgressFill');
|
| 1257 |
+
let timeSpan = document.getElementById(audioType === 'heatmap' ? 'heatmapCurrentTime' : 'radarCurrentTime');
|
| 1258 |
+
if(audio && !isNaN(audio.duration) && audio.duration > 0) {
|
| 1259 |
+
let percent = (audio.currentTime / audio.duration) * 100;
|
| 1260 |
+
if(fill) fill.style.width = percent + '%';
|
| 1261 |
+
if(timeSpan) timeSpan.innerText = formatTime(audio.currentTime);
|
| 1262 |
+
}
|
| 1263 |
+
}
|
| 1264 |
+
|
| 1265 |
+
function seekAudio(audioId, event) {
|
| 1266 |
+
let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio;
|
| 1267 |
+
let rect = event.currentTarget.getBoundingClientRect();
|
| 1268 |
+
let x = event.clientX - rect.left;
|
| 1269 |
+
let percent = x / rect.width;
|
| 1270 |
+
if(audio && !isNaN(audio.duration) && audio.duration > 0) audio.currentTime = percent * audio.duration;
|
| 1271 |
+
}
|
| 1272 |
+
|
| 1273 |
+
function setVolume(audioId, value) {
|
| 1274 |
+
let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio;
|
| 1275 |
+
if(audio) audio.volume = parseFloat(value);
|
| 1276 |
+
}
|
| 1277 |
+
|
| 1278 |
+
function toggleMute(audioId) {
|
| 1279 |
+
let audio = audioId === 'heatmapAudio' ? heatmapAudio : radarAudio;
|
| 1280 |
+
let slider = document.getElementById(audioId === 'heatmapAudio' ? 'heatmapVolume' : 'radarVolume');
|
| 1281 |
+
if(audio) {
|
| 1282 |
+
if(audio.volume > 0) { audio.dataset.prevVolume = audio.volume; audio.volume = 0; if(slider) slider.value = 0; }
|
| 1283 |
+
else { audio.volume = parseFloat(audio.dataset.prevVolume || 0.7); if(slider) slider.value = audio.volume; }
|
| 1284 |
+
}
|
| 1285 |
+
}
|
| 1286 |
+
|
| 1287 |
+
function formatTime(seconds) { if(isNaN(seconds)) return "0:00"; let mins = Math.floor(seconds / 60); let secs = Math.floor(seconds % 60); return mins + ":" + (secs < 10 ? "0" + secs : secs); }
|
| 1288 |
+
|
| 1289 |
+
function generateHeatmapData() { const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const weeks = 4; let matrix = []; for(let w = 0; w < weeks; w++) { let week = []; for(let d = 0; d < 7; d++) { let base = (w * 7 + d) % 10; let level = 0; if(base < 3) level = 1; else if(base < 6) level = 2; else if(base < 8) level = 3; else level = 4; if(d === 3 || d === 4) level = Math.min(4, level+1); week.push(level); } matrix.push(week); } return { days, weeks: matrix }; }
|
| 1290 |
+
function renderHeatmap() { const container = document.getElementById('heatmapGrid'); if(!container) return; const { days, weeks } = generateHeatmapData(); container.innerHTML = ''; for(let i = 0; i < days.length; i++) { let dayDiv = document.createElement('div'); dayDiv.className = 'heatmap-day-label'; dayDiv.innerText = days[i]; container.appendChild(dayDiv); } for(let w = 0; w < weeks.length; w++) { for(let d = 0; d < weeks[w].length; d++) { let cell = document.createElement('div'); cell.className = `heatmap-cell level-${weeks[w][d]}`; cell.title = `${days[d]} Week ${w+1} : Level ${weeks[w][d]}`; container.appendChild(cell); } } const legendContainer = document.getElementById('heatmapLegend'); if(legendContainer) legendContainer.innerHTML = `<div class="legend-heatmap-item"><div class="legend-color-box level-0"></div><span>No activity</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-1"></div><span>Low</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-2"></div><span>Medium</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-3"></div><span>High</span></div><div class="legend-heatmap-item"><div class="legend-color-box level-4"></div><span>Intense</span></div>`; }
|
| 1291 |
+
function drawSymmetryCurve() { const canvas = document.getElementById('symmetryHeatmapCurve'); if(!canvas) return; const ctx = canvas.getContext('2d'); const width = canvas.parentElement.clientWidth - 40; const height = 160; canvas.width = width; canvas.height = height; ctx.clearRect(0,0,width,height); const { days, weeks } = generateHeatmapData(); let avgIntensity = new Array(7).fill(0); for(let w = 0; w < weeks.length; w++) for(let d = 0; d < 7; d++) avgIntensity[d] += weeks[w][d]; avgIntensity = avgIntensity.map(v => v / weeks.length); let reversed = [...avgIntensity].reverse(); let combined = avgIntensity.map((v,i)=> (v + reversed[i])/2); const points = combined.map((val, idx) => ({ x: (idx / 6) * width, y: height - (val / 4) * height })); ctx.beginPath(); ctx.strokeStyle = '#1e1e1e'; ctx.lineWidth = 2.5; points.forEach((p,i)=> i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y)); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = '#616161'; ctx.setLineDash([6,8]); let mirrorPoints = points.map(p => ({ x: width - p.x, y: p.y })); mirrorPoints.forEach((p,i)=> i===0 ? ctx.moveTo(p.x,p.y) : ctx.lineTo(p.x,p.y)); ctx.stroke(); points.forEach(p => { ctx.beginPath(); ctx.fillStyle = '#1e1e1e'; ctx.arc(p.x, p.y, 4, 0, 2*Math.PI); ctx.fill(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, 2*Math.PI); ctx.fill(); }); }
|
| 1292 |
+
function updateCircularProgress(elementId, percent) { const circle = document.getElementById(elementId); if(!circle) return; const r = 54; const circ = 2 * Math.PI * r; const offset = circ - (percent / 100) * circ; circle.style.strokeDasharray = `${circ}`; circle.style.strokeDashoffset = offset; }
|
| 1293 |
+
function updateIndicators() { document.getElementById('regularityPercent').innerText = '90%'; document.getElementById('deadlinePercent').innerText = '88%'; updateCircularProgress('regularityCircleProgress', 90); updateCircularProgress('deadlineCircleProgress', 88); document.getElementById('effortPattern').innerHTML = "Concentrated effort (Activity peak Thu/Fri)"; document.getElementById('persistenceScore').innerHTML = "Very high"; }
|
| 1294 |
+
function setDashboardView(view) { if(view === 'combined') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); initRadarChart(); } }
|
| 1295 |
+
function initCompetencesSelect() { const select = document.getElementById('competence'); if(select) select.innerHTML = competencesData.map(c => `<option value="${c.id}">${c.label}</option>`).join(''); }
|
| 1296 |
+
function generatePlanner() { const competence = document.getElementById('competence')?.value || "mathematics"; const competenceLabel = competencesData.find(c=>c.id===competence)?.label || "Mathematics"; const startDate = new Date(document.getElementById('start')?.value || "2024-01-15"); const sessionDur = document.getElementById('sessionDuration')?.value || "20"; const method = document.querySelector('input[name="productivityMethod"]:checked')?.value || "pomodoro"; const timeSlot = document.querySelector('#timeSlotsGroup input:checked')?.value || "08:00-10:00"; const retention = document.getElementById('retentionQuality')?.value || "2"; const intervals = [1,7,16,35,70,140]; const sessions = []; for(let i=0;i<intervals.length;i++) { let currentDate = new Date(startDate); if(i>0) currentDate.setDate(startDate.getDate() + intervals[i-1]); else currentDate = new Date(startDate); const sessionTypes = ["Learning","Consolidation","Consolidation","Maintenance","Maintenance","Maintenance"]; sessions.push({ id:i+1, date:new Date(currentDate), dateStr:currentDate.toLocaleDateString('en-US'), competence:competenceLabel, duration:sessionDur+" minutes", interval:intervals[i]+" days", type:sessionTypes[i], strategy:"Active recall", productivity:method==='pomodoro'?'Pomodoro':'Deep Work', optimalTime:timeSlot }); } currentSessions = sessions; renderPlanningTable(sessions); updatePlanningStats(sessions, retention, sessionDur); drawSpacedRepetitionCurve(sessions); showToast("Planning generated"); showTab('planner'); }
|
| 1297 |
+
function generateDefaultPlanning() { const startDate = new Date("2024-01-17"); const intervals = [1,7,16,35,70,140]; const sessions = []; for(let i=0;i<intervals.length;i++) { let currentDate = new Date(startDate); if(i>0) currentDate.setDate(startDate.getDate() + (i===1?1:intervals[i-1])); else currentDate = new Date(startDate); sessions.push({ id:i+1, date:new Date(currentDate), dateStr:currentDate.toLocaleDateString('en-US'), competence:"Mathematics", duration:"20 minutes", interval:intervals[i]+" days", type:i===0?"Learning":"Consolidation", strategy:"Active recall", productivity:"Pomodoro", optimalTime:"08:00-10:00" }); } currentSessions = sessions; renderPlanningTable(sessions); updatePlanningStats(sessions,"2","20"); drawSpacedRepetitionCurve(sessions); }
|
| 1298 |
+
function renderPlanningTable(sessions) { const tbody = document.getElementById('sessionsTableBody'); if(tbody) tbody.innerHTML = sessions.map(s => `<tr><td><strong>${s.dateStr}</strong></td><td>R${s.id}</td><td>${s.competence}</td><td>${s.duration}</td><td>${s.interval}</td><td><span class="session-type-badge">${s.type}</span></td><td>${s.strategy}</td><td>${s.productivity}</td><td>${s.optimalTime}</td></tr>`).join(''); }
|
| 1299 |
+
function updatePlanningStats(sessions, quality, duration) { document.getElementById('statSessions').innerText = sessions.length; if(sessions.length) { const totalDays = Math.ceil((sessions[sessions.length-1].date - sessions[0].date) / 86400000); document.getElementById('statTotalDays').innerText = totalDays; } const qualityMap = {'0':'1/4','1':'2/4','2':'3/4','3':'4/4'}; document.getElementById('statQuality').innerText = qualityMap[quality] || "3/4"; document.getElementById('statDuration').innerText = duration + "min"; }
|
| 1300 |
+
function drawSpacedRepetitionCurve(sessions) { if(!sessions.length) return; const canvas = document.getElementById('spacedRepetitionCurve'); if(!canvas) return; const ctx = canvas.getContext('2d'); const width = canvas.parentElement.clientWidth - 40; const height = 180; canvas.width = width; canvas.height = height; ctx.clearRect(0,0,width,height); const start = sessions[0].date.getTime(); const end = sessions[sessions.length-1].date.getTime(); const totalDays = (end - start) / 86400000; ctx.beginPath(); ctx.strokeStyle = '#1e1e1e'; ctx.lineWidth = 2.5; let first = true; for(let x = 0; x <= width; x++) { const dayProg = (x/width)*totalDays; const ret = Math.exp(-dayProg / (0.4*30)) * 100; const y = height - (ret/100)*height; if(first) { ctx.moveTo(x,y); first=false; } else ctx.lineTo(x,y); } ctx.stroke(); sessions.forEach(s => { const x = ((s.date.getTime() - start) / (end - start)) * width; const dayProg = (s.date.getTime() - start)/86400000; const retAt = Math.exp(-dayProg / (0.4*30)) * 100; const y = height - (retAt/100)*height; ctx.beginPath(); ctx.fillStyle = '#424242'; ctx.arc(x, y, 5, 0, 2*Math.PI); ctx.fill(); ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(x, y, 2, 0, 2*Math.PI); ctx.fill(); }); }
|
| 1301 |
+
function exportPlanning() { let csv = "Date,Session,Skill,Duration,Interval,Type,Strategy,Productivity,Optimal Time\n"; currentSessions.forEach(s => { csv += `"${s.dateStr}","R${s.id}","${s.competence}","${s.duration}","${s.interval}","${s.type}","${s.strategy}","${s.productivity}","${s.optimalTime}"\n`; }); const blob = new Blob([csv], {type: 'text/csv'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'planning_perseverai.csv'; link.click(); showToast("Exported CSV"); }
|
| 1302 |
+
function generateRandomEvent() { const template = eventTemplates[Math.floor(Math.random() * eventTemplates.length)]; const newEvent = { id: Date.now() + Math.random(), date: new Date().toLocaleString(), type: template.type, title: template.title, message: template.message, priority: template.priority, status: 'pending' }; eventsList.unshift(newEvent); saveEvents(); renderEventsTable(); updateEventStats(); showToast(`New event: ${template.title}`); }
|
| 1303 |
+
function executeAction(eventId, actionType, actionLabel) { const idx = eventsList.findIndex(e => e.id == eventId); if(idx === -1) return; eventsList[idx].status = actionType === 'ACCEPT' ? 'accepted' : (actionType === 'REJECT' ? 'rejected' : 'hold'); renderEventsTable(); updateEventStats(); saveEvents(); showToast(`${actionLabel}`); }
|
| 1304 |
+
function renderEventsTable() { const tbody = document.getElementById('notificationsTableBody'); if(!tbody) return; if(eventsList.length === 0) { tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;">No events</td></tr>'; return; } tbody.innerHTML = eventsList.map(e => `<tr><td>${e.date}</td><td>${e.type}</td><td><strong>${e.title}</strong></td><td>${e.message}</td><td><span class="priority-${e.priority}">${e.priority}</span></td><td><span class="status-badge ${e.status === 'accepted' ? 'status-accepted' : 'status-pending'}">${e.status === 'accepted' ? 'Accepted' : 'Pending'}</span></td><td class="action-cell"><button class="action-icon-btn action-accept" onclick="executeAction(${e.id}, 'ACCEPT', 'Accepted')">✓ Accept</button><button class="action-icon-btn action-reject" onclick="executeAction(${e.id}, 'REJECT', 'Rejected')">✗ Reject</button><button class="action-icon-btn action-hold" onclick="executeAction(${e.id}, 'HOLD', 'Hold')">⏸ Hold</button></td></tr>`).join(''); }
|
| 1305 |
+
function updateEventStats() { document.getElementById('totalEvents').innerText = eventsList.length; document.getElementById('pendingEvents').innerText = eventsList.filter(e => e.status === 'pending').length; document.getElementById('acceptedEvents').innerText = eventsList.filter(e => e.status === 'accepted').length; if(efficiencyChart) efficiencyChart.data.datasets[0].data = [eventsList.filter(e=>e.status==='accepted').length, eventsList.filter(e=>e.status==='rejected').length, eventsList.filter(e=>e.status==='pending').length]; efficiencyChart?.update(); }
|
| 1306 |
+
let efficiencyChart = null;
|
| 1307 |
+
function createChart() { const ctx = document.getElementById('notificationEfficiencyChart')?.getContext('2d'); if(ctx) efficiencyChart = new Chart(ctx, { type: 'bar', data: { labels: ['Accepted', 'Rejected', 'Pending'], datasets: [{ label: 'Actions', data: [0,0,0], backgroundColor: ['#2e7d32','#c62828','#b76e0e'] }] }, options: { responsive: true } }); }
|
| 1308 |
+
function saveEvents() { localStorage.setItem('eventsList', JSON.stringify(eventsList)); }
|
| 1309 |
+
function loadSavedData() { const saved = localStorage.getItem('eventsList'); if(saved) eventsList = JSON.parse(saved); }
|
| 1310 |
+
function showTab(tabId) { document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); document.getElementById(tabId).classList.add('active'); document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); if(window.event?.target) window.event.target.classList.add('active'); if(tabId === 'dashboard') { renderHeatmap(); drawSymmetryCurve(); updateIndicators(); initRadarChart(); } if(tabId === 'planner') { if(currentSessions.length === 0) generateDefaultPlanning(); else drawSpacedRepetitionCurve(currentSessions); } if(tabId === 'notifications') { renderEventsTable(); updateEventStats(); } if(tabId === 'profile') { loadProfileFromStorage(); updateProfileUI(); } if(tabId === 'journal') { loadJournalEntries(); } }
|
| 1311 |
+
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); }
|
| 1312 |
+
function setupRatingListeners() { document.querySelectorAll('.big5-rating .rating-btn, .motivation-rating .rating-btn').forEach(btn => btn.addEventListener('click', function() { const container = this.closest('.big5-rating, .motivation-rating'); const trait = container.dataset.trait || container.dataset.motivation; const value = parseInt(this.dataset.value); profileData[trait] = value; updateRatingUI(container, value); updateProfileUI(); saveProfileToStorage(); })); }
|
| 1313 |
+
function updateRatingUI(container, value) { container.querySelectorAll('.rating-btn').forEach(btn => { btn.classList.remove('active'); if(parseInt(btn.dataset.value) === value) btn.classList.add('active'); }); }
|
| 1314 |
+
function updateProfileUI() { document.getElementById('summaryExtraversion').innerText = profileData.extraversion; document.getElementById('summaryOpenness').innerText = profileData.openness; document.getElementById('summaryConscientiousness').innerText = profileData.conscientiousness; document.getElementById('summaryIntrinsic').innerText = profileData.intrinsic; document.getElementById('summaryIntrojected').innerText = profileData.introjected; document.getElementById('neuroticismScore').innerText = profileData.neuroticism; document.getElementById('introjectedScore').innerText = profileData.introjected; let completed = Object.values(profileData).filter(v => v).length; const percent = Math.round((completed / 12) * 100); document.getElementById('profileCompletionPercent').innerText = percent + '%'; document.getElementById('profileProgressFill').style.width = percent + '%'; document.getElementById('completedCount').innerText = Math.min(completed, 5); let level = "Beginner"; if(profileData.conscientiousness >= 4 && profileData.intrinsic >= 4) level = "Advanced"; else if(profileData.conscientiousness >= 3) level = "Intermediate"; document.getElementById('profileLevel').innerText = level; document.getElementById('recommendationsContainer').innerHTML = ["◼ Sleep quality: Maintain 7-8 hours.", "◼ Planning: Strengthen your organization."].map(r => `<p>${r}</p>`).join(''); }
|
| 1315 |
+
function autoFillProfile() { profileData = { extraversion: 4, openness: 4, conscientiousness: 5, agreeableness: 4, neuroticism: 2, intrinsic: 5, introjected: 3, reason_education: 5, reason_degrees: 4, reason_money: 4, reason_prove_wrong: 2, reason_self_prove: 3, reason_independent: 5 }; document.querySelectorAll('.big5-rating, .motivation-rating').forEach(container => { const key = container.dataset.trait || container.dataset.motivation; if(profileData[key]) updateRatingUI(container, profileData[key]); }); updateProfileUI(); saveProfileToStorage(); showToast("Profile auto-filled"); }
|
| 1316 |
+
function saveProfileData() { saveProfileToStorage(); showToast("Profile saved"); }
|
| 1317 |
+
function finalizeProfile() { saveProfileToStorage(); showToast("Profile finalized"); }
|
| 1318 |
+
function saveProfileToStorage() { localStorage.setItem('perseverAI_profile', JSON.stringify(profileData)); }
|
| 1319 |
+
function loadProfileFromStorage() { const saved = localStorage.getItem('perseverAI_profile'); if(saved) Object.assign(profileData, JSON.parse(saved)); updateProfileUI(); }
|
| 1320 |
+
function loadJournalEntries() { const saved = localStorage.getItem('perseverAI_journal'); if(saved) journalEntries = JSON.parse(saved); renderJournalEntries(); }
|
| 1321 |
+
function saveJournalEntry() { const selectedDate = document.getElementById('journalDate')?.value || new Date().toISOString().split('T')[0]; const planned = document.getElementById('plannedText')?.value.trim() || ""; const doing = document.getElementById('doingText')?.value.trim() || ""; const done = document.getElementById('doneText')?.value.trim() || ""; const activeRating = document.querySelector('#selfRatingGroup .star-btn.active'); let selfRating = activeRating ? parseInt(activeRating.dataset.rating) : null; if(!planned && !doing && !done) { showToast("Fill in at least one field"); return; } const newEntry = { id: Date.now(), date: selectedDate, dateFormatted: new Date(selectedDate).toLocaleDateString('en-US'), planned, doing, done, selfRating }; journalEntries.unshift(newEntry); localStorage.setItem('perseverAI_journal', JSON.stringify(journalEntries)); document.getElementById('plannedText').value = ""; document.getElementById('doingText').value = ""; document.getElementById('doneText').value = ""; document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => btn.classList.remove('active')); renderJournalEntries(); showToast("Journal saved"); }
|
| 1322 |
+
function clearJournalForm() { document.getElementById('plannedText').value = ""; document.getElementById('doingText').value = ""; document.getElementById('doneText').value = ""; document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => btn.classList.remove('active')); document.getElementById('journalDate').value = new Date().toISOString().split('T')[0]; showToast("Form cleared"); }
|
| 1323 |
+
function renderJournalEntries() { const container = document.getElementById('journalEntriesList'); if(!container) return; if(journalEntries.length === 0) { container.innerHTML = '<div style="text-align:center; color:var(--gray-500); padding:20px;"><i class="fas fa-book-open"></i> No entries</div>'; return; } container.innerHTML = journalEntries.map(entry => `<div class="journal-entry-item"><div class="journal-entry-date"><i class="far fa-calendar-alt"></i> ${entry.dateFormatted || entry.date}</div>${entry.planned ? `<div><span class="journal-badge"><i class="fas fa-tasks"></i> Planned</span> ${escapeHtml(entry.planned)}</div>` : ''}${entry.doing ? `<div><span class="journal-badge"><i class="fas fa-sync-alt"></i> In progress</span> ${escapeHtml(entry.doing)}</div>` : ''}${entry.done ? `<div><span class="journal-badge"><i class="fas fa-check-circle"></i> Accomplished</span> ${escapeHtml(entry.done)}</div>` : ''}${entry.selfRating ? `<div><span class="journal-badge"><i class="fas fa-star"></i> Self-assessment</span> ${entry.selfRating}/5</div>` : ''}</div>`).join(''); }
|
| 1324 |
+
function escapeHtml(str) { return str.replace(/[&<>]/g, function(m){ if(m==='&') return '&'; if(m==='<') return '<'; if(m==='>') return '>'; return m;}); }
|
| 1325 |
+
function setupRatingStars() { document.querySelectorAll('#selfRatingGroup .star-btn').forEach(btn => { btn.addEventListener('click', function() { document.querySelectorAll('#selfRatingGroup .star-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); }); }); }
|
| 1326 |
+
|
| 1327 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 1328 |
+
initCompetencesSelect();
|
| 1329 |
+
loadSavedData();
|
| 1330 |
+
renderEventsTable();
|
| 1331 |
+
updateEventStats();
|
| 1332 |
+
createChart();
|
| 1333 |
+
initProfileModule();
|
| 1334 |
+
const retentionSlider = document.getElementById('retentionQuality');
|
| 1335 |
+
if(retentionSlider) retentionSlider.addEventListener('input', function() { const val = parseInt(this.value); const messages = {0:"0 - Low",1:"1 - Medium",2:"2 - Good - Progressive consolidation",3:"3 - Excellent"}; document.getElementById('retentionValueDisplay').innerText = messages[val]; });
|
| 1336 |
+
generateDefaultPlanning();
|
| 1337 |
+
loadProfileFromStorage();
|
| 1338 |
+
setupRatingListeners();
|
| 1339 |
+
updateProfileUI();
|
| 1340 |
+
setDashboardView('combined');
|
| 1341 |
+
setupRatingStars();
|
| 1342 |
+
loadJournalEntries();
|
| 1343 |
+
updateCircularProgress('regularityCircleProgress', 90);
|
| 1344 |
+
updateCircularProgress('deadlineCircleProgress', 88);
|
| 1345 |
+
const todayDate = new Date().toISOString().split('T')[0];
|
| 1346 |
+
if(document.getElementById('journalDate')) document.getElementById('journalDate').value = todayDate;
|
| 1347 |
+
initRadarChart();
|
| 1348 |
+
initAudioPlayers();
|
| 1349 |
+
});
|
| 1350 |
+
function initProfileModule() { loadProfileFromStorage(); setupRatingListeners(); updateProfileUI(); }
|
| 1351 |
+
window.addEventListener('resize', () => { if(document.getElementById('dashboard').classList.contains('active')) { drawSymmetryCurve(); if(radarChart) radarChart.resize(); } if(document.getElementById('planner').classList.contains('active') && currentSessions.length > 0) drawSpacedRepetitionCurve(currentSessions); });
|
| 1352 |
+
</script>
|
| 1353 |
+
</body>
|
| 1354 |
+
</html>
|