Hugging Face's logo

Spaces:
SaidAmchghal
/
trifocus
Running

App Files Community
SaidAmchghal commited on
Commit
dfe7ba4
·
verified ·
1 Parent(s): 056c352

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +878 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trifocus
3
- emoji: 🔥
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: trifocus
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,878 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TriFocus - Cognitive Training App</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { transform: scale(1); opacity: 1; }
12
+ 50% { transform: scale(1.05); opacity: 0.9; }
13
+ }
14
+ .pulse-animation {
15
+ animation: pulse 2s infinite;
16
+ }
17
+ .countdown {
18
+ font-size: 5rem;
19
+ font-weight: bold;
20
+ color: #3b82f6;
21
+ }
22
+ .reaction-dot {
23
+ width: 60px;
24
+ height: 60px;
25
+ border-radius: 50%;
26
+ position: absolute;
27
+ cursor: pointer;
28
+ transition: transform 0.1s;
29
+ }
30
+ .reaction-dot:active {
31
+ transform: scale(0.9);
32
+ }
33
+ .stroop-card {
34
+ width: 200px;
35
+ height: 120px;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ font-size: 24px;
40
+ font-weight: bold;
41
+ border-radius: 12px;
42
+ margin: 10px;
43
+ cursor: pointer;
44
+ transition: all 0.2s;
45
+ }
46
+ .stroop-card:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
49
+ }
50
+ .sequence-item {
51
+ width: 70px;
52
+ height: 70px;
53
+ border-radius: 12px;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ font-size: 24px;
58
+ font-weight: bold;
59
+ margin: 10px;
60
+ transition: all 0.2s;
61
+ }
62
+ .sequence-item:hover {
63
+ transform: scale(1.05);
64
+ }
65
+ .progress-bar {
66
+ height: 8px;
67
+ border-radius: 4px;
68
+ transition: width 0.3s ease;
69
+ }
70
+ .radial-progress {
71
+ --value: 0;
72
+ --size: 120px;
73
+ --thickness: 12px;
74
+ }
75
+ .fade-in {
76
+ animation: fadeIn 0.5s ease-in;
77
+ }
78
+ @keyframes fadeIn {
79
+ from { opacity: 0; transform: translateY(20px); }
80
+ to { opacity: 1; transform: translateY(0); }
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="bg-gray-50 min-h-screen font-sans">
85
+ <!-- App Container -->
86
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
87
+ <!-- Header -->
88
+ <header class="flex justify-between items-center mb-8">
89
+ <div class="flex items-center">
90
+ <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mr-3">TF</div>
91
+ <h1 class="text-3xl font-bold text-gray-800">TriFocus</h1>
92
+ </div>
93
+ <div class="flex space-x-4">
94
+ <button id="historyBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
95
+ <i class="fas fa-history"></i>
96
+ </button>
97
+ <button id="settingsBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
98
+ <i class="fas fa-cog"></i>
99
+ </button>
100
+ </div>
101
+ </header>
102
+
103
+ <!-- Main Content Area -->
104
+ <main id="mainContent">
105
+ <!-- Home Screen -->
106
+ <section id="homeScreen" class="fade-in">
107
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
108
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Welcome to TriFocus</h2>
109
+ <p class="text-gray-600 mb-6">Train your cognitive skills with our three specialized modules. Choose your training mode below.</p>
110
+
111
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
112
+ <div class="bg-blue-50 rounded-lg p-6 border border-blue-100 hover:border-blue-300 transition-all cursor-pointer" onclick="startExpressSession()">
113
+ <div class="flex items-center mb-3">
114
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">
115
+ <i class="fas fa-bolt"></i>
116
+ </div>
117
+ <h3 class="text-lg font-semibold text-gray-800">Express Session</h3>
118
+ </div>
119
+ <p class="text-gray-600 text-sm">Complete all 3 modules in sequence for a comprehensive cognitive assessment.</p>
120
+ </div>
121
+
122
+ <div class="bg-purple-50 rounded-lg p-6 border border-purple-100 hover:border-purple-300 transition-all cursor-pointer" onclick="showModuleSelection()">
123
+ <div class="flex items-center mb-3">
124
+ <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">
125
+ <i class="fas fa-sliders-h"></i>
126
+ </div>
127
+ <h3 class="text-lg font-semibold text-gray-800">Individual Module</h3>
128
+ </div>
129
+ <p class="text-gray-600 text-sm">Focus on one specific cognitive skill with a single module.</p>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="bg-gray-50 rounded-lg p-4">
134
+ <h4 class="font-medium text-gray-700 mb-2">Your last session score:</h4>
135
+ <div class="flex items-center">
136
+ <div class="radial-progress text-blue-500" style="--value: 72; --size: 3rem; --thickness: 4px;">72</div>
137
+ <div class="ml-4">
138
+ <p class="text-sm text-gray-600">Your focus score was <span class="font-semibold">72/100</span></p>
139
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
140
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="bg-white rounded-xl shadow-md p-6">
148
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Your Progress</h2>
149
+ <div class="grid grid-cols-3 gap-4 mb-4">
150
+ <div class="text-center">
151
+ <div class="radial-progress text-blue-500 mx-auto mb-2" style="--value: 85;">85</div>
152
+ <p class="text-xs font-medium text-gray-600">Reaction</p>
153
+ </div>
154
+ <div class="text-center">
155
+ <div class="radial-progress text-purple-500 mx-auto mb-2" style="--value: 68;">68</div>
156
+ <p class="text-xs font-medium text-gray-600">Attention</p>
157
+ </div>
158
+ <div class="text-center">
159
+ <div class="radial-progress text-green-500 mx-auto mb-2" style="--value: 76;">76</div>
160
+ <p class="text-xs font-medium text-gray-600">Memory</p>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="flex justify-between items-center">
165
+ <div>
166
+ <p class="text-sm font-medium text-gray-700">Current Level: <span class="font-bold">Novice</span></p>
167
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
168
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
169
+ </div>
170
+ </div>
171
+ <div class="text-right">
172
+ <p class="text-xs text-gray-500">Next badge at 100 points</p>
173
+ <div class="inline-block bg-yellow-100 rounded-full p-1">
174
+ <i class="fas fa-medal text-yellow-500"></i>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Module Selection Screen -->
182
+ <section id="moduleSelectionScreen" class="hidden fade-in">
183
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
184
+ <div class="flex items-center mb-6">
185
+ <button onclick="backToHome()" class="mr-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
186
+ <i class="fas fa-arrow-left"></i>
187
+ </button>
188
+ <h2 class="text-2xl font-bold text-gray-800">Select a Module</h2>
189
+ </div>
190
+
191
+ <div class="grid grid-cols-1 gap-4">
192
+ <div class="bg-blue-50 rounded-lg p-6 border border-blue-100 hover:border-blue-300 transition-all cursor-pointer" onclick="startModule('reaction')">
193
+ <div class="flex items-center mb-3">
194
+ <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white mr-4">
195
+ <i class="fas fa-hand-pointer"></i>
196
+ </div>
197
+ <div>
198
+ <h3 class="text-lg font-semibold text-gray-800">Reaction Tap</h3>
199
+ <p class="text-sm text-gray-600">Test your reaction speed</p>
200
+ </div>
201
+ </div>
202
+ <div class="flex justify-between items-center mt-4">
203
+ <div class="text-sm">
204
+ <span class="font-medium text-gray-700">Best: </span>
205
+ <span class="font-bold text-blue-600">215ms</span>
206
+ </div>
207
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">30% weight</span>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="bg-purple-50 rounded-lg p-6 border border-purple-100 hover:border-purple-300 transition-all cursor-pointer" onclick="startModule('stroop')">
212
+ <div class="flex items-center mb-3">
213
+ <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white mr-4">
214
+ <i class="fas fa-palette"></i>
215
+ </div>
216
+ <div>
217
+ <h3 class="text-lg font-semibold text-gray-800">Color Match</h3>
218
+ <p class="text-sm text-gray-600">Stroop test for selective attention</p>
219
+ </div>
220
+ </div>
221
+ <div class="flex justify-between items-center mt-4">
222
+ <div class="text-sm">
223
+ <span class="font-medium text-gray-700">Best: </span>
224
+ <span class="font-bold text-purple-600">92% accuracy</span>
225
+ </div>
226
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">40% weight</span>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-green-50 rounded-lg p-6 border border-green-100 hover:border-green-300 transition-all cursor-pointer" onclick="startModule('sequence')">
231
+ <div class="flex items-center mb-3">
232
+ <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white mr-4">
233
+ <i class="fas fa-brain"></i>
234
+ </div>
235
+ <div>
236
+ <h3 class="text-lg font-semibold text-gray-800">Sequence Recall</h3>
237
+ <p class="text-sm text-gray-600">Challenge your working memory</p>
238
+ </div>
239
+ </div>
240
+ <div class="flex justify-between items-center mt-4">
241
+ <div class="text-sm">
242
+ <span class="font-medium text-gray-700">Best: </span>
243
+ <span class="font-bold text-green-600">8 items</span>
244
+ </div>
245
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">30% weight</span>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- Countdown Screen -->
253
+ <section id="countdownScreen" class="hidden">
254
+ <div class="flex flex-col items-center justify-center h-64">
255
+ <h2 id="moduleTitle" class="text-2xl font-bold text-gray-800 mb-8"></h2>
256
+ <div class="countdown" id="countdown">3</div>
257
+ <p class="text-gray-600 mt-4">Get ready...</p>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Reaction Tap Game -->
262
+ <section id="reactionGame" class="hidden">
263
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
264
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Reaction Tap</h2>
265
+ <p class="text-gray-600 mb-4">Tap the dot as soon as it appears</p>
266
+
267
+ <div class="flex justify-between items-center mb-6">
268
+ <div>
269
+ <span class="text-sm font-medium text-gray-700">Trials: </span>
270
+ <span id="reactionTrials" class="font-bold">0/10</span>
271
+ </div>
272
+ <div>
273
+ <span class="text-sm font-medium text-gray-700">Avg. reaction: </span>
274
+ <span id="avgReaction" class="font-bold">-</span>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="relative bg-gray-100 rounded-lg h-64 w-full" id="reactionArea">
279
+ <div id="reactionDot" class="reaction-dot bg-blue-500 hidden"></div>
280
+ </div>
281
+
282
+ <div class="mt-6">
283
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
284
+ <span>Progress</span>
285
+ <span id="reactionProgressText">0%</span>
286
+ </div>
287
+ <div class="w-full bg-gray-200 rounded-full h-2">
288
+ <div id="reactionProgress" class="progress-bar bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Stroop Test Game -->
295
+ <section id="stroopGame" class="hidden">
296
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
297
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Color Match</h2>
298
+ <p class="text-gray-600 mb-4">Select the color of the text, not the word itself</p>
299
+
300
+ <div class="flex justify-between items-center mb-6">
301
+ <div>
302
+ <span class="text-sm font-medium text-gray-700">Questions: </span>
303
+ <span id="stroopTrials" class="font-bold">0/12</span>
304
+ </div>
305
+ <div>
306
+ <span class="text-sm font-medium text-gray-700">Accuracy: </span>
307
+ <span id="stroopAccuracy" class="font-bold">-</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="flex flex-col items-center mb-8">
312
+ <div id="stroopQuestion" class="stroop-card bg-white shadow-md text-3xl mb-8">WORD</div>
313
+
314
+ <div class="grid grid-cols-2 gap-4">
315
+ <div class="stroop-card bg-red-500 text-white" onclick="checkStroopAnswer('red')">Red</div>
316
+ <div class="stroop-card bg-blue-500 text-white" onclick="checkStroopAnswer('blue')">Blue</div>
317
+ <div class="stroop-card bg-green-500 text-white" onclick="checkStroopAnswer('green')">Green</div>
318
+ <div class="stroop-card bg-yellow-500 text-white" onclick="checkStroopAnswer('yellow')">Yellow</div>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="mt-6">
323
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
324
+ <span>Progress</span>
325
+ <span id="stroopProgressText">0%</span>
326
+ </div>
327
+ <div class="w-full bg-gray-200 rounded-full h-2">
328
+ <div id="stroopProgress" class="progress-bar bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Sequence Recall Game -->
335
+ <section id="sequenceGame" class="hidden">
336
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
337
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Sequence Recall</h2>
338
+ <p class="text-gray-600 mb-4">Memorize and repeat the sequence</p>
339
+
340
+ <div class="flex justify-between items-center mb-6">
341
+ <div>
342
+ <span class="text-sm font-medium text-gray-700">Level: </span>
343
+ <span id="sequenceLevel" class="font-bold">1</span>
344
+ </div>
345
+ <div>
346
+ <span class="text-sm font-medium text-gray-700">Best: </span>
347
+ <span id="sequenceBest" class="font-bold">5 items</span>
348
+ </div>
349
+ </div>
350
+
351
+ <div id="sequenceDisplayArea" class="flex justify-center mb-8">
352
+ <!-- Sequence items will appear here -->
353
+ </div>
354
+
355
+ <div id="sequenceInputArea" class="grid grid-cols-3 gap-4 mb-8">
356
+ <!-- Input buttons will appear here -->
357
+ </div>
358
+
359
+ <div class="mt-6">
360
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
361
+ <span>Progress</span>
362
+ <span id="sequenceProgressText">0%</span>
363
+ </div>
364
+ <div class="w-full bg-gray-200 rounded-full h-2">
365
+ <div id="sequenceProgress" class="progress-bar bg-green-500 h-2 rounded-full" style="width: 0%"></div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Results Screen -->
372
+ <section id="resultsScreen" class="hidden fade-in">
373
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
374
+ <div class="flex items-center mb-6">
375
+ <button onclick="backToHome()" class="mr-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
376
+ <i class="fas fa-arrow-left"></i>
377
+ </button>
378
+ <h2 class="text-2xl font-bold text-gray-800">Session Results</h2>
379
+ </div>
380
+
381
+ <div class="flex flex-col items-center mb-8">
382
+ <div class="radial-progress text-blue-500 mb-4" style="--value: 78;">78</div>
383
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Your Focus Score</h3>
384
+ <p class="text-gray-600 mb-6">Better than 65% of your previous sessions</p>
385
+
386
+ <div class="w-full bg-gray-100 rounded-full h-4 mb-6">
387
+ <div class="bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 h-4 rounded-full" style="width: 78%"></div>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="grid grid-cols-1 gap-6 mb-8">
392
+ <div class="bg-blue-50 rounded-lg p-4">
393
+ <div class="flex justify-between items-center mb-2">
394
+ <h4 class="font-medium text-gray-700">Reaction Tap</h4>
395
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">30%</span>
396
+ </div>
397
+ <div class="flex justify-between items-center">
398
+ <div>
399
+ <p class="text-sm text-gray-600">Avg. reaction: <span class="font-semibold">248ms</span></p>
400
+ <p class="text-sm text-gray-600">Accuracy: <span class="font-semibold">90%</span></p>
401
+ </div>
402
+ <div class="text-right">
403
+ <div class="text-lg font-bold text-blue-600">24/30</div>
404
+ <p class="text-xs text-gray-500">Score</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="bg-purple-50 rounded-lg p-4">
410
+ <div class="flex justify-between items-center mb-2">
411
+ <h4 class="font-medium text-gray-700">Color Match</h4>
412
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">40%</span>
413
+ </div>
414
+ <div class="flex justify-between items-center">
415
+ <div>
416
+ <p class="text-sm text-gray-600">Avg. time: <span class="font-semibold">1.8s</span></p>
417
+ <p class="text-sm text-gray-600">Accuracy: <span class="font-semibold">83%</span></p>
418
+ </div>
419
+ <div class="text-right">
420
+ <div class="text-lg font-bold text-purple-600">32/40</div>
421
+ <p class="text-xs text-gray-500">Score</p>
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="bg-green-50 rounded-lg p-4">
427
+ <div class="flex justify-between items-center mb-2">
428
+ <h4 class="font-medium text-gray-700">Sequence Recall</h4>
429
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">30%</span>
430
+ </div>
431
+ <div class="flex justify-between items-center">
432
+ <div>
433
+ <p class="text-sm text-gray-600">Max sequence: <span class="font-semibold">6 items</span></p>
434
+ <p class="text-sm text-gray-600">Avg. time: <span class="font-semibold">3.2s</span></p>
435
+ </div>
436
+ <div class="text-right">
437
+ <div class="text-lg font-bold text-green-600">22/30</div>
438
+ <p class="text-xs text-gray-500">Score</p>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
445
+ <h4 class="font-medium text-gray-700 mb-2">Recommendations</h4>
446
+ <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1">
447
+ <li>Practice Color Match to improve your selective attention</li>
448
+ <li>Try morning sessions when your reaction time is typically faster</li>
449
+ <li>Take a 5-minute break between sessions for better focus</li>
450
+ </ul>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="bg-white rounded-xl shadow-md p-6">
455
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Earned Badges</h2>
456
+ <div class="flex space-x-4">
457
+ <div class="text-center">
458
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mx-auto mb-2">
459
+ <i class="fas fa-bolt text-xl"></i>
460
+ </div>
461
+ <p class="text-xs font-medium text-gray-600">Quick Reflexes</p>
462
+ </div>
463
+ <div class="text-center">
464
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mx-auto mb-2">
465
+ <i class="fas fa-brain text-xl"></i>
466
+ </div>
467
+ <p class="text-xs font-medium text-gray-600">Memory Builder</p>
468
+ </div>
469
+ <div class="text-center opacity-40">
470
+ <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mx-auto mb-2">
471
+ <i class="fas fa-trophy text-xl"></i>
472
+ </div>
473
+ <p class="text-xs font-medium text-gray-600">Master Focus</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+ </main>
479
+
480
+ <!-- Footer -->
481
+ <footer class="mt-12 text-center text-gray-500 text-sm">
482
+ <p>TriFocus © 2023 - Cognitive Training App</p>
483
+ </footer>
484
+ </div>
485
+
486
+ <script>
487
+ // Game state variables
488
+ let currentModule = '';
489
+ let sessionType = '';
490
+ let reactionTimes = [];
491
+ let stroopAnswers = [];
492
+ let sequenceLevel = 1;
493
+
494
+ // DOM elements
495
+ const homeScreen = document.getElementById('homeScreen');
496
+ const moduleSelectionScreen = document.getElementById('moduleSelectionScreen');
497
+ const countdownScreen = document.getElementById('countdownScreen');
498
+ const reactionGame = document.getElementById('reactionGame');
499
+ const stroopGame = document.getElementById('stroopGame');
500
+ const sequenceGame = document.getElementById('sequenceGame');
501
+ const resultsScreen = document.getElementById('resultsScreen');
502
+ const moduleTitle = document.getElementById('moduleTitle');
503
+ const countdown = document.getElementById('countdown');
504
+
505
+ // Navigation functions
506
+ function showModuleSelection() {
507
+ homeScreen.classList.add('hidden');
508
+ moduleSelectionScreen.classList.remove('hidden');
509
+ }
510
+
511
+ function backToHome() {
512
+ homeScreen.classList.remove('hidden');
513
+ moduleSelectionScreen.classList.add('hidden');
514
+ countdownScreen.classList.add('hidden');
515
+ reactionGame.classList.add('hidden');
516
+ stroopGame.classList.add('hidden');
517
+ sequenceGame.classList.add('hidden');
518
+ resultsScreen.classList.add('hidden');
519
+ }
520
+
521
+ function startExpressSession() {
522
+ sessionType = 'express';
523
+ startModule('reaction');
524
+ }
525
+
526
+ function startModule(module) {
527
+ currentModule = module;
528
+ homeScreen.classList.add('hidden');
529
+ moduleSelectionScreen.classList.add('hidden');
530
+ countdownScreen.classList.remove('hidden');
531
+
532
+ // Set module title
533
+ switch(module) {
534
+ case 'reaction':
535
+ moduleTitle.textContent = 'Reaction Tap';
536
+ break;
537
+ case 'stroop':
538
+ moduleTitle.textContent = 'Color Match';
539
+ break;
540
+ case 'sequence':
541
+ moduleTitle.textContent = 'Sequence Recall';
542
+ break;
543
+ }
544
+
545
+ // Start countdown
546
+ let counter = 3;
547
+ countdown.textContent = counter;
548
+
549
+ const countdownInterval = setInterval(() => {
550
+ counter--;
551
+ countdown.textContent = counter;
552
+
553
+ if (counter <= 0) {
554
+ clearInterval(countdownInterval);
555
+ startGame();
556
+ }
557
+ }, 1000);
558
+ }
559
+
560
+ function startGame() {
561
+ countdownScreen.classList.add('hidden');
562
+
563
+ switch(currentModule) {
564
+ case 'reaction':
565
+ setupReactionGame();
566
+ reactionGame.classList.remove('hidden');
567
+ break;
568
+ case 'stroop':
569
+ setupStroopGame();
570
+ stroopGame.classList.remove('hidden');
571
+ break;
572
+ case 'sequence':
573
+ setupSequenceGame();
574
+ sequenceGame.classList.remove('hidden');
575
+ break;
576
+ }
577
+ }
578
+
579
+ function finishModule() {
580
+ // Hide all game screens
581
+ reactionGame.classList.add('hidden');
582
+ stroopGame.classList.add('hidden');
583
+ sequenceGame.classList.add('hidden');
584
+
585
+ if (sessionType === 'express') {
586
+ // Move to next module in express session
587
+ if (currentModule === 'reaction') {
588
+ startModule('stroop');
589
+ } else if (currentModule === 'stroop') {
590
+ startModule('sequence');
591
+ } else {
592
+ // All modules completed, show results
593
+ showResults();
594
+ }
595
+ } else {
596
+ // Single module mode, show results
597
+ showResults();
598
+ }
599
+ }
600
+
601
+ function showResults() {
602
+ resultsScreen.classList.remove('hidden');
603
+ }
604
+
605
+ // Reaction Tap Game
606
+ function setupReactionGame() {
607
+ reactionTimes = [];
608
+ document.getElementById('reactionTrials').textContent = '0/10';
609
+ document.getElementById('avgReaction').textContent = '-';
610
+ document.getElementById('reactionProgress').style.width = '0%';
611
+ document.getElementById('reactionProgressText').textContent = '0%';
612
+
613
+ const reactionDot = document.getElementById('reactionDot');
614
+ reactionDot.classList.add('hidden');
615
+
616
+ // Start first trial after a random delay
617
+ setTimeout(startReactionTrial, Math.random() * 2000 + 1000);
618
+ }
619
+
620
+ function startReactionTrial() {
621
+ const reactionArea = document.getElementById('reactionArea');
622
+ const reactionDot = document.getElementById('reactionDot');
623
+
624
+ // Position dot randomly within area
625
+ const maxX = reactionArea.offsetWidth - reactionDot.offsetWidth;
626
+ const maxY = reactionArea.offsetHeight - reactionDot.offsetHeight;
627
+
628
+ const posX = Math.floor(Math.random() * maxX);
629
+ const posY = Math.floor(Math.random() * maxY);
630
+
631
+ reactionDot.style.left = `${posX}px`;
632
+ reactionDot.style.top = `${posY}px`;
633
+
634
+ // Show dot and start timer
635
+ reactionDot.classList.remove('hidden');
636
+ reactionDot.startTime = Date.now();
637
+
638
+ // Set timeout for missed taps (1.5 seconds)
639
+ reactionDot.timeout = setTimeout(() => {
640
+ reactionDot.classList.add('hidden');
641
+ recordReactionTime(null); // null indicates a miss
642
+
643
+ // Start next trial if not finished
644
+ if (reactionTimes.length < 10) {
645
+ setTimeout(startReactionTrial, Math.random() * 1000 + 500);
646
+ } else {
647
+ finishModule();
648
+ }
649
+ }, 1500);
650
+ }
651
+
652
+ function recordReactionTime(time) {
653
+ const reactionDot = document.getElementById('reactionDot');
654
+ clearTimeout(reactionDot.timeout);
655
+ reactionDot.classList.add('hidden');
656
+
657
+ if (time !== null) {
658
+ reactionTimes.push(time);
659
+ }
660
+
661
+ // Update UI
662
+ const completedTrials = reactionTimes.length;
663
+ document.getElementById('reactionTrials').textContent = `${completedTrials}/10`;
664
+
665
+ // Calculate average reaction time (only for successful taps)
666
+ const successfulTrials = reactionTimes.filter(t => t !== null);
667
+ if (successfulTrials.length > 0) {
668
+ const avg = Math.round(successfulTrials.reduce((a, b) => a + b, 0) / successfulTrials.length);
669
+ document.getElementById('avgReaction').textContent = `${avg}ms`;
670
+ }
671
+
672
+ // Update progress
673
+ const progress = (completedTrials / 10) * 100;
674
+ document.getElementById('reactionProgress').style.width = `${progress}%`;
675
+ document.getElementById('reactionProgressText').textContent = `${progress}%`;
676
+
677
+ // Start next trial or finish
678
+ if (completedTrials < 10) {
679
+ setTimeout(startReactionTrial, Math.random() * 1000 + 500);
680
+ } else {
681
+ setTimeout(finishModule, 1000);
682
+ }
683
+ }
684
+
685
+ // Add click event to reaction dot
686
+ document.getElementById('reactionDot').addEventListener('click', function() {
687
+ const reactionTime = Date.now() - this.startTime;
688
+ recordReactionTime(reactionTime);
689
+ });
690
+
691
+ // Stroop Test Game
692
+ function setupStroopGame() {
693
+ stroopAnswers = [];
694
+ document.getElementById('stroopTrials').textContent = '0/12';
695
+ document.getElementById('stroopAccuracy').textContent = '-';
696
+ document.getElementById('stroopProgress').style.width = '0%';
697
+ document.getElementById('stroopProgressText').textContent = '0%';
698
+
699
+ // Start first question
700
+ showStroopQuestion();
701
+ }
702
+
703
+ const colorWords = ['RED', 'BLUE', 'GREEN', 'YELLOW'];
704
+ const colors = ['red', 'blue', 'green', 'yellow'];
705
+
706
+ function showStroopQuestion() {
707
+ const questionElement = document.getElementById('stroopQuestion');
708
+
709
+ // Randomly select a word and color (different from word)
710
+ const word = colorWords[Math.floor(Math.random() * colorWords.length)];
711
+ let color = colors[Math.floor(Math.random() * colors.length)];
712
+
713
+ // Ensure color is different from word (case-insensitive)
714
+ while (color.toUpperCase() === word) {
715
+ color = colors[Math.floor(Math.random() * colors.length)];
716
+ }
717
+
718
+ // Store correct answer
719
+ questionElement.dataset.correctAnswer = color;
720
+
721
+ // Apply color to text
722
+ questionElement.textContent = word;
723
+ questionElement.style.color = color;
724
+
725
+ // Start timer for this question
726
+ questionElement.startTime = Date.now();
727
+ }
728
+
729
+ function checkStroopAnswer(selectedColor) {
730
+ const questionElement = document.getElementById('stroopQuestion');
731
+ const correctAnswer = questionElement.dataset.correctAnswer;
732
+ const responseTime = Date.now() - questionElement.startTime;
733
+
734
+ // Record answer
735
+ stroopAnswers.push({
736
+ correct: selectedColor === correctAnswer,
737
+ time: responseTime
738
+ });
739
+
740
+ // Update UI
741
+ const completedQuestions = stroopAnswers.length;
742
+ document.getElementById('stroopTrials').textContent = `${completedQuestions}/12`;
743
+
744
+ // Calculate accuracy
745
+ const correctAnswers = stroopAnswers.filter(a => a.correct).length;
746
+ const accuracy = Math.round((correctAnswers / completedQuestions) * 100);
747
+ document.getElementById('stroopAccuracy').textContent = `${accuracy}%`;
748
+
749
+ // Update progress
750
+ const progress = (completedQuestions / 12) * 100;
751
+ document.getElementById('stroopProgress').style.width = `${progress}%`;
752
+ document.getElementById('stroopProgressText').textContent = `${progress}%`;
753
+
754
+ // Show next question or finish
755
+ if (completedQuestions < 12) {
756
+ setTimeout(showStroopQuestion, 500);
757
+ } else {
758
+ setTimeout(finishModule, 1000);
759
+ }
760
+ }
761
+
762
+ // Sequence Recall Game
763
+ function setupSequenceGame() {
764
+ sequenceLevel = 1;
765
+ document.getElementById('sequenceLevel').textContent = '1';
766
+ document.getElementById('sequenceProgress').style.width = '0%';
767
+ document.getElementById('sequenceProgressText').textContent = '0%';
768
+
769
+ // Clear display and input areas
770
+ const displayArea = document.getElementById('sequenceDisplayArea');
771
+ const inputArea = document.getElementById('sequenceInputArea');
772
+ displayArea.innerHTML = '';
773
+ inputArea.innerHTML = '';
774
+
775
+ // Create input buttons (1-9)
776
+ for (let i = 1; i <= 9; i++) {
777
+ const button = document.createElement('div');
778
+ button.className = 'sequence-item bg-gray-100 text-gray-800';
779
+ button.textContent = i;
780
+ button.onclick = function() { checkSequenceInput(i); };
781
+ inputArea.appendChild(button);
782
+ }
783
+
784
+ // Start first level
785
+ startSequenceLevel();
786
+ }
787
+
788
+ function startSequenceLevel() {
789
+ const displayArea = document.getElementById('sequenceDisplayArea');
790
+ displayArea.innerHTML = '';
791
+
792
+ // Generate random sequence
793
+ const sequence = [];
794
+ for (let i = 0; i < sequenceLevel; i++) {
795
+ sequence.push(Math.floor(Math.random() * 9) + 1);
796
+ }
797
+
798
+ // Display sequence with delay between items
799
+ let index = 0;
800
+ const displayInterval = setInterval(() => {
801
+ if (index >= sequence.length) {
802
+ clearInterval(displayInterval);
803
+ // After displaying all items, wait a bit then clear for user input
804
+ setTimeout(() => {
805
+ displayArea.innerHTML = '';
806
+ // Now waiting for user input
807
+ }, 500);
808
+ return;
809
+ }
810
+
811
+ const item = document.createElement('div');
812
+ item.className = 'sequence-item bg-blue-500 text-white';
813
+ item.textContent = sequence[index];
814
+ displayArea.appendChild(item);
815
+
816
+ index++;
817
+ }, 1000);
818
+
819
+ // Store sequence and reset user input
820
+ displayArea.dataset.sequence = sequence.join(',');
821
+ displayArea.dataset.userInput = '';
822
+ }
823
+
824
+ function checkSequenceInput(number) {
825
+ const displayArea = document.getElementById('sequenceDisplayArea');
826
+ const sequence = displayArea.dataset.sequence.split(',').map(Number);
827
+ let userInput = displayArea.dataset.userInput ?
828
+ displayArea.dataset.userInput.split(',').map(Number) : [];
829
+
830
+ // Add new input
831
+ userInput.push(number);
832
+ displayArea.dataset.userInput = userInput.join(',');
833
+
834
+ // Check if input matches sequence so far
835
+ for (let i = 0; i < userInput.length; i++) {
836
+ if (userInput[i] !== sequence[i]) {
837
+ // Incorrect - level failed
838
+ levelFailed();
839
+ return;
840
+ }
841
+ }
842
+
843
+ // Check if sequence complete
844
+ if (userInput.length === sequence.length) {
845
+ levelCompleted();
846
+ }
847
+ }
848
+
849
+ function levelCompleted() {
850
+ // Update progress
851
+ const progress = (sequenceLevel / 8) * 100;
852
+ document.getElementById('sequenceProgress').style.width = `${progress}%`;
853
+ document.getElementById('sequenceProgressText').textContent = `${Math.min(progress, 100)}%`;
854
+
855
+ if (sequenceLevel < 8) {
856
+ // Next level
857
+ sequenceLevel++;
858
+ document.getElementById('sequenceLevel').textContent = sequenceLevel;
859
+ setTimeout(startSequenceLevel, 1000);
860
+ } else {
861
+ // Max level reached
862
+ setTimeout(finishModule, 1000);
863
+ }
864
+ }
865
+
866
+ function levelFailed() {
867
+ // Show failure feedback
868
+ const displayArea = document.getElementById('sequenceDisplayArea');
869
+ displayArea.innerHTML = '<div class="text-red-500 font-bold">Incorrect sequence</div>';
870
+
871
+ // After delay, show results
872
+ setTimeout(() => {
873
+ finishModule();
874
+ }, 1500);
875
+ }
876
+ </script>
877
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SaidAmchghal/trifocus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
878
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ## Nom provisoire : **TriFocus** ### 1. Modules intégrés 1. **Reaction Tap** * **But** : tester la vitesse de réaction tactile. * **Mécanique** : un point apparaît à des positions aléatoires et l’utilisateur doit tapoter dès que possible. * **Mesure** : * Temps de réaction moyen (ms) * Taux de taps manqués 2. **Color Match (Stroop)** * **But** : évaluer l’attention sélective et la capacité à inhiber une réponse automatique. * **Mécanique** : afficher un mot-coloré (ex. « VERT » écrit en rouge) ; l’utilisateur sélectionne la couleur d’encre, non le texte. * **Mesure** : * Temps de réponse par item * Nombre d’erreurs 3. **Sequence Recall** * **But** : mesurer la mémoire de travail et la concentration soutenue. * **Mécanique** : présentation d’une séquence de symboles (formes ou chiffres) de longueur croissante ; l’utilisateur la reproduit dans l’ordre. * **Mesure** : * Longueur max. de la séquence restituée correctement * Temps total de réponse --- ### 2. Calcul du **Score Concentré (sur 100)** Le score agrégé combine les trois modules : | Module | Pondération | | -------------------- | ----------: | | Reaction Tap | 30 % | | Color Match (Stroop) | 40 % | | Sequence Recall | 30 % | Pour chacun : * **Reaction Tap** : * 60 % rapidité normalisée * 40 % précision (taux de succès) * **Color Match** : * 70 % vitesse * 30 % exactitude * **Sequence Recall** : * 50 % longueur de séquence * 50 % rapidité de restitution Le score final = `0,3×(score RT) + 0,4×(score Stroop) + 0,3×(score Seq)` le tout ramené à 0–100. --- ### 3. Parcours utilisateur 1. **Écran d’accueil** : choix rapide du mode “Session Express” (3 modules enchaînés) ou “Mode Individuel” (un module au choix). 2. **Briefing** : décompte de 3 s avant chaque épreuve, consignes claires. 3. **Enchaînement** : * Module 1 → Module 2 → Module 3 * Transitions fluides, retours visuels (barres de progression). 4. **Synthèse finale** : * Score total sur 100 * Détail par module (scores partiels, temps, erreurs) * Graphiques d’évolution (jour / semaine / mois). 5. **Recommandations** : * Conseils pour améliorer les points faibles * Exercices ciblés facultatifs --- ### 4. Fonctionnalités annexes * **Historique et tendances** : comparaisons temporelles et avec la communauté. * **Badges et niveaux** : jalons de progression (ex. “Rapidité extrême”, “Maître Stroop”, “Mémoire d’éléphant”). * **Rappels** : notifications pour s’entraîner régulièrement. * **Personnalisation** : ajuster la difficulté initiale ou le nombre de répétitions.