Hugging Face's logo

Spaces:
OUAREDAEK
/
SRL
Sleeping

App Files Community
OUAREDAEK commited on
Commit
03c4261
·
verified ·
1 Parent(s): c892b93

Upload templates\index-old1.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. templates//index-old1.html +159 -0
templates//index-old1.html ADDED
@@ -0,0 +1,159 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Cognitive-Driven Language Learning</title>
6
+
7
+ <style>
8
+ body { font-family: Arial; margin: 0; background: #f4f6f8; }
9
+ header { background: #1e293b; color: white; padding: 15px; text-align: center; }
10
+ nav { display: flex; background: #334155; }
11
+ nav button {
12
+ flex: 1; padding: 12px; border: none; color: white;
13
+ background: #334155; cursor: pointer;
14
+ }
15
+ nav button:hover { background: #475569; }
16
+ section { display: none; padding: 20px; }
17
+ section.active { display: block; background: white; margin: 10px; border-radius: 8px; }
18
+
19
+ input, select, textarea {
20
+ width: 100%; padding: 8px; margin: 5px 0;
21
+ }
22
+
23
+ .card {
24
+ background: #f8fafc; padding: 10px; margin: 8px 0; border-left: 4px solid #3b82f6;
25
+ }
26
+ </style>
27
+ </head>
28
+
29
+ <body>
30
+
31
+ <header>
32
+ <h2>🧠 Cognitive-Driven AI for Language Learning</h2>
33
+ <p>Optimizing Long-Term Memory Retention through Spaced Repetition (SM-2), Self-Regulated Learning, Metacognition, and Gentle Reminders via Multi-Armed Bandits</p>
34
+ </header>
35
+
36
+ <nav>
37
+ <button onclick="showTab('objectif')">🎯 Objectif</button>
38
+ <button onclick="showTab('planner')">📅 Planner</button>
39
+ <button onclick="showTab('journal')">📔 Journal SRL</button>
40
+ <button onclick="showTab('notifications')">🔔 Notifications</button>
41
+ </nav>
42
+
43
+ <!-- OBJECTIF -->
44
+ <section id="objectif" class="active">
45
+ <h3>🎯 Définir mon objectif</h3>
46
+
47
+ <label>Compétence cible</label>
48
+ <select id="competence">
49
+ {% for c in competences %}
50
+ <option>{{ c }}</option>
51
+ {% endfor %}
52
+ </select>
53
+
54
+ <label>Date de début</label>
55
+ <input type="date" id="start">
56
+
57
+ <label>Date de fin</label>
58
+ <input type="date" id="end">
59
+
60
+ <label>Durée par session (minutes)</label>
61
+ <select id="duration">
62
+ <option>10</option><option>20</option><option>30</option>
63
+ </select>
64
+
65
+ <button onclick="generatePlanner()">Générer le planner</button>
66
+ </section>
67
+
68
+ <!-- PLANNER -->
69
+ <section id="planner">
70
+ <h3>📅 Planner personnalisé</h3>
71
+ <div id="plannerContent"></div>
72
+ </section>
73
+
74
+ <!-- JOURNAL -->
75
+ <section id="journal">
76
+ <h3>📔 Journal de bord – Self-Regulated Learning</h3>
77
+
78
+ <label>To-Do</label>
79
+ <textarea id="todo"></textarea>
80
+
81
+ <label>Doing</label>
82
+ <textarea id="doing"></textarea>
83
+
84
+ <label>Done</label>
85
+ <textarea id="done"></textarea>
86
+
87
+ <label>Qu’est-ce qui a facilité l’apprentissage ?</label>
88
+ <textarea id="q1"></textarea>
89
+
90
+ <label>Qu’est-ce qui a été difficile ?</label>
91
+ <textarea id="q2"></textarea>
92
+
93
+ <label>Stratégie à tester la prochaine fois</label>
94
+ <textarea id="q3"></textarea>
95
+
96
+ <button onclick="saveJournal()">Sauvegarder</button>
97
+ </section>
98
+
99
+ <!-- NOTIFICATIONS -->
100
+ <section id="notifications">
101
+ <h3>🔔 Gentle Reminders intelligents</h3>
102
+ <button onclick="getReminder()">Afficher un rappel</button>
103
+ <div id="notifBox" class="card"></div>
104
+ </section>
105
+
106
+ <script>
107
+ function showTab(id){
108
+ document.querySelectorAll("section").forEach(s => s.classList.remove("active"));
109
+ document.getElementById(id).classList.add("active");
110
+ }
111
+
112
+ function generatePlanner(){
113
+ fetch("/planner", {
114
+ method:"POST",
115
+ headers:{'Content-Type':'application/json'},
116
+ body:JSON.stringify({
117
+ competence: document.getElementById("competence").value,
118
+ start_date: document.getElementById("start").value,
119
+ end_date: document.getElementById("end").value,
120
+ session_duration: document.getElementById("duration").value
121
+ })
122
+ }).then(r=>r.json()).then(data=>{
123
+ let html="";
124
+ data.forEach(p=>{
125
+ html+=`<div class="card">
126
+ 📆 ${p.date}<br>
127
+ 📘 ${p.competence}<br>
128
+ ⏱ ${p.duration} min<br>
129
+ 🔁 Répétition ${p.repetition}
130
+ </div>`;
131
+ });
132
+ document.getElementById("plannerContent").innerHTML = html;
133
+ showTab("planner");
134
+ });
135
+ }
136
+
137
+ function saveJournal(){
138
+ fetch("/journal",{
139
+ method:"POST",
140
+ headers:{'Content-Type':'application/json'},
141
+ body:JSON.stringify({
142
+ todo:todo.value,
143
+ doing:doing.value,
144
+ done:done.value,
145
+ reflection:[q1.value,q2.value,q3.value]
146
+ })
147
+ });
148
+ alert("Journal sauvegardé ✔");
149
+ }
150
+
151
+ function getReminder(){
152
+ fetch("/notifications").then(r=>r.json()).then(data=>{
153
+ document.getElementById("notifBox").innerText=data.message;
154
+ });
155
+ }
156
+ </script>
157
+
158
+ </body>
159
+ </html>