Hugging Face's logo

Spaces:
FaberVi
/
mindgym
Running

App Files Community
FaberVi commited on
Commit
d2d74f1
·
verified ·
1 Parent(s): 44fce1a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +512 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mindgym
3
- emoji: 🐠
4
- colorFrom: pink
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: mindgym
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,512 @@
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="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MindGym - Piattaforma di Giochi Cognitivi</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
+ .sidebar {
11
+ transition: all 0.3s;
12
+ }
13
+ .game-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .progress-ring__circle {
18
+ transition: stroke-dashoffset 0.35s;
19
+ transform: rotate(-90deg);
20
+ transform-origin: 50% 50%;
21
+ }
22
+ .fade-in {
23
+ animation: fadeIn 0.5s;
24
+ }
25
+ @keyframes fadeIn {
26
+ from { opacity: 0; }
27
+ to { opacity: 1; }
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 font-sans">
32
+ <div class="flex h-screen overflow-hidden">
33
+ <!-- Sidebar -->
34
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col">
35
+ <div class="p-4 flex items-center space-x-3 border-b border-indigo-700">
36
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
37
+ <i class="fas fa-brain text-xl"></i>
38
+ </div>
39
+ <div>
40
+ <div class="font-bold">MindGym</div>
41
+ <div class="text-xs text-indigo-300">Piattaforma Cognitiva</div>
42
+ </div>
43
+ </div>
44
+
45
+ <div class="p-4 border-b border-indigo-700">
46
+ <div class="text-xs uppercase text-indigo-400 mb-2">Operatore</div>
47
+ <div class="flex items-center space-x-3">
48
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
49
+ <i class="fas fa-user-md"></i>
50
+ </div>
51
+ <div>
52
+ <div class="font-medium">Dr. Mario Rossi</div>
53
+ <div class="text-xs text-indigo-300">Neurologo</div>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <nav class="flex-1 overflow-y-auto p-4 space-y-2">
59
+ <div class="text-xs uppercase text-indigo-400 mb-2">Menu</div>
60
+ <a href="#" class="block py-2 px-3 rounded bg-indigo-700 text-white">
61
+ <i class="fas fa-gamepad mr-2"></i> Giochi
62
+ </a>
63
+ <a href="#" class="block py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100">
64
+ <i class="fas fa-users mr-2"></i> Pazienti
65
+ </a>
66
+ <a href="#" class="block py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100">
67
+ <i class="fas fa-chart-line mr-2"></i> Progressi
68
+ </a>
69
+ <a href="#" class="block py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100">
70
+ <i class="fas fa-cog mr-2"></i> Impostazioni
71
+ </a>
72
+
73
+ <div class="text-xs uppercase text-indigo-400 mt-6 mb-2">Statistiche</div>
74
+ <div class="bg-indigo-900 bg-opacity-50 rounded-lg p-3">
75
+ <div class="flex justify-between text-sm mb-1">
76
+ <span>Sess. oggi</span>
77
+ <span>12</span>
78
+ </div>
79
+ <div class="flex justify-between text-sm mb-1">
80
+ <span>Pazienti attivi</span>
81
+ <span>8</span>
82
+ </div>
83
+ <div class="flex justify-between text-sm">
84
+ <span>Progresso medio</span>
85
+ <span>68%</span>
86
+ </div>
87
+ </div>
88
+ </nav>
89
+
90
+ <div class="p-4 border-t border-indigo-700">
91
+ <button class="w-full py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100 text-left">
92
+ <i class="fas fa-sign-out-alt mr-2"></i> Esci
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Main Content -->
98
+ <div class="flex-1 overflow-y-auto">
99
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
100
+ <h1 class="text-2xl font-bold text-gray-800">
101
+ <span id="page-title">Seleziona un Gioco</span>
102
+ </h1>
103
+ <div class="flex items-center space-x-4">
104
+ <div class="relative">
105
+ <i class="fas fa-bell text-gray-500 text-xl"></i>
106
+ <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
107
+ </div>
108
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
109
+ <i class="fas fa-user text-indigo-600"></i>
110
+ </div>
111
+ </div>
112
+ </header>
113
+
114
+ <main class="p-6">
115
+ <!-- Game Selection Screen -->
116
+ <div id="game-selection" class="fade-in">
117
+ <div class="mb-6">
118
+ <h2 class="text-xl font-semibold text-gray-800 mb-2">Benvenuto, Dr. Rossi</h2>
119
+ <p class="text-gray-600">Seleziona un gioco cognitivo da assegnare al tuo paziente.</p>
120
+ </div>
121
+
122
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
123
+ <!-- Game Card 1 -->
124
+ <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" onclick="selectGame('Memoria Visiva', 'memory')">
125
+ <div class="h-40 bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center">
126
+ <i class="fas fa-eye text-6xl text-white opacity-80"></i>
127
+ </div>
128
+ <div class="p-5">
129
+ <h3 class="font-bold text-xl mb-2 text-gray-800">Memoria Visiva</h3>
130
+ <p class="text-gray-600">Allena la memoria a breve termine ricordando sequenze di immagini.</p>
131
+ <div class="mt-4 flex items-center text-sm text-gray-500">
132
+ <i class="fas fa-clock mr-1"></i>
133
+ <span>5-10 min</span>
134
+ <span class="mx-2">•</span>
135
+ <i class="fas fa-brain mr-1"></i>
136
+ <span>Memoria</span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Game Card 2 -->
142
+ <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" onclick="selectGame('Calcolo Veloce', 'math')">
143
+ <div class="h-40 bg-gradient-to-r from-blue-500 to-teal-500 flex items-center justify-center">
144
+ <i class="fas fa-calculator text-6xl text-white opacity-80"></i>
145
+ </div>
146
+ <div class="p-5">
147
+ <h3 class="font-bold text-xl mb-2 text-gray-800">Calcolo Veloce</h3>
148
+ <p class="text-gray-600">Migliora le tue abilità matematiche risolvendo problemi aritmetici.</p>
149
+ <div class="mt-4 flex items-center text-sm text-gray-500">
150
+ <i class="fas fa-clock mr-1"></i>
151
+ <span>3-7 min</span>
152
+ <span class="mx-2">•</span>
153
+ <i class="fas fa-calculator mr-1"></i>
154
+ <span>Logica</span>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Game Card 3 -->
160
+ <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" onclick="selectGame('Associazione Parole', 'words')">
161
+ <div class="h-40 bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center">
162
+ <i class="fas fa-comment-dots text-6xl text-white opacity-80"></i>
163
+ </div>
164
+ <div class="p-5">
165
+ <h3 class="font-bold text-xl mb-2 text-gray-800">Associazione Parole</h3>
166
+ <p class="text-gray-600">Collega parole correlate per migliorare il pensiero associativo.</p>
167
+ <div class="mt-4 flex items-center text-sm text-gray-500">
168
+ <i class="fas fa-clock mr-1"></i>
169
+ <span>7-12 min</span>
170
+ <span class="mx-2">•</span>
171
+ <i class="fas fa-language mr-1"></i>
172
+ <span>Linguaggio</span>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Game Card 4 -->
178
+ <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" onclick="selectGame('Puzzle Spaziale', 'puzzle')">
179
+ <div class="h-40 bg-gradient-to-r from-emerald-500 to-green-500 flex items-center justify-center">
180
+ <i class="fas fa-puzzle-piece text-6xl text-white opacity-80"></i>
181
+ </div>
182
+ <div class="p-5">
183
+ <h3 class="font-bold text-xl mb-2 text-gray-800">Puzzle Spaziale</h3>
184
+ <p class="text-gray-600">Sviluppa le capacità visuo-spaziali ricomponendo immagini complesse.</p>
185
+ <div class="mt-4 flex items-center text-sm text-gray-500">
186
+ <i class="fas fa-clock mr-1"></i>
187
+ <span>10-15 min</span>
188
+ <span class="mx-2">•</span>
189
+ <i class="fas fa-eye mr-1"></i>
190
+ <span>Spaziale</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Game Card 5 -->
196
+ <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" onclick="selectGame('Sequenza Logica', 'sequence')">
197
+ <div class="h-40 bg-gradient-to-r from-rose-500 to-pink-500 flex items-center justify-center">
198
+ <i class="fas fa-project-diagram text-6xl text-white opacity-80"></i>
199
+ </div>
200
+ <div class="p-5">
201
+ <h3 class="font-bold text-xl mb-2 text-gray-800">Sequenza Logica</h3>
202
+ <p class="text-gray-600">Identifica il modello logico per completare correttamente le sequenze.</p>
203
+ <div class="mt-4 flex items-center text-sm text-gray-500">
204
+ <i class="fas fa-clock mr-1"></i>
205
+ <span>5-8 min</span>
206
+ <span class="mx-2">•</span>
207
+ <i class="fas fa-sitemap mr-1"></i>
208
+ <span>Ragionamento</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Game Card 6 -->
214
+ <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" onclick="selectGame('Memoria Uditiva', 'sound')">
215
+ <div class="h-40 bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center">
216
+ <i class="fas fa-music text-6xl text-white opacity-80"></i>
217
+ </div>
218
+ <div class="p-5">
219
+ <h3 class="font-bold text-xl mb-2 text-gray-800">Memoria Uditiva</h3>
220
+ <p class="text-gray-600">Ricorda e ripeti sequenze di suoni per allenare la memoria uditiva.</p>
221
+ <div class="mt-4 flex items-center text-sm text-gray-500">
222
+ <i class="fas fa-clock mr-1"></i>
223
+ <span>4-9 min</span>
224
+ <span class="mx-2">•</span>
225
+ <i class="fas fa-ear-listen mr-1"></i>
226
+ <span>Udito</span>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Difficulty Selection Screen (hidden by default) -->
234
+ <div id="difficulty-selection" class="hidden fade-in">
235
+ <div class="mb-6 flex items-center">
236
+ <button onclick="backToGames()" class="mr-4 w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200">
237
+ <i class="fas fa-arrow-left text-gray-600"></i>
238
+ </button>
239
+ <div>
240
+ <h2 class="text-xl font-semibold text-gray-800 mb-1" id="selected-game-title">Memoria Visiva</h2>
241
+ <p class="text-gray-600">Seleziona la difficoltà e il paziente</p>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
246
+ <div class="lg:col-span-2">
247
+ <div class="bg-white rounded-xl shadow-md p-6">
248
+ <h3 class="font-bold text-lg mb-4 text-gray-800">Livello di difficoltà</h3>
249
+
250
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
251
+ <div class="difficulty-option bg-blue-50 border-2 border-blue-100 rounded-lg p-4 cursor-pointer hover:border-blue-300 transition-all" onclick="selectDifficulty('Facile')">
252
+ <div class="flex items-center mb-2">
253
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
254
+ <i class="fas fa-smile text-blue-600"></i>
255
+ </div>
256
+ <h4 class="font-bold text-blue-800">Facile</h4>
257
+ </div>
258
+ <p class="text-sm text-gray-600">Adatto per pazienti con difficoltà cognitive significative o all'inizio del percorso riabilitativo.</p>
259
+ <div class="mt-3 text-xs text-blue-600">
260
+ <i class="fas fa-info-circle mr-1"></i> 3-5 elementi, tempo illimitato
261
+ </div>
262
+ </div>
263
+
264
+ <div class="difficulty-option bg-amber-50 border-2 border-amber-100 rounded-lg p-4 cursor-pointer hover:border-amber-300 transition-all" onclick="selectDifficulty('Medio')">
265
+ <div class="flex items-center mb-2">
266
+ <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-3">
267
+ <i class="fas fa-meh text-amber-600"></i>
268
+ </div>
269
+ <h4 class="font-bold text-amber-800">Medio</h4>
270
+ </div>
271
+ <p class="text-sm text-gray-600">Per pazienti con moderate difficoltà cognitive o in fase intermedia di riabilitazione.</p>
272
+ <div class="mt-3 text-xs text-amber-600">
273
+ <i class="fas fa-info-circle mr-1"></i> 5-7 elementi, tempo limitato
274
+ </div>
275
+ </div>
276
+
277
+ <div class="difficulty-option bg-red-50 border-2 border-red-100 rounded-lg p-4 cursor-pointer hover:border-red-300 transition-all" onclick="selectDifficulty('Difficile')">
278
+ <div class="flex items-center mb-2">
279
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
280
+ <i class="fas fa-frown text-red-600"></i>
281
+ </div>
282
+ <h4 class="font-bold text-red-800">Difficile</h4>
283
+ </div>
284
+ <p class="text-sm text-gray-600">Per pazienti con lievi difficoltà o in fase avanzata di riabilitazione cognitiva.</p>
285
+ <div class="mt-3 text-xs text-red-600">
286
+ <i class="fas fa-info-circle mr-1"></i> 7-10 elementi, tempo ridotto
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div>
294
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
295
+ <h3 class="font-bold text-lg mb-4 text-gray-800">Seleziona paziente</h3>
296
+
297
+ <div class="space-y-3">
298
+ <div class="patient-option flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-all" onclick="selectPatient('Luigi Bianchi', 'p1')">
299
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
300
+ <i class="fas fa-user text-purple-600"></i>
301
+ </div>
302
+ <div>
303
+ <h4 class="font-medium">Luigi Bianchi</h4>
304
+ <div class="flex items-center text-xs text-gray-500">
305
+ <span class="mr-2">65 anni</span>
306
+ <span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
307
+ <span>Ultima sessione: 2 giorni fa</span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="patient-option flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-all" onclick="selectPatient('Anna Verdi', 'p2')">
313
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
314
+ <i class="fas fa-user text-blue-600"></i>
315
+ </div>
316
+ <div>
317
+ <h4 class="font-medium">Anna Verdi</h4>
318
+ <div class="flex items-center text-xs text-gray-500">
319
+ <span class="mr-2">58 anni</span>
320
+ <span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
321
+ <span>Ultima sessione: 1 settimana fa</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="patient-option flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-all" onclick="selectPatient('Marco Neri', 'p3')">
327
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
328
+ <i class="fas fa-user text-green-600"></i>
329
+ </div>
330
+ <div>
331
+ <h4 class="font-medium">Marco Neri</h4>
332
+ <div class="flex items-center text-xs text-gray-500">
333
+ <span class="mr-2">72 anni</span>
334
+ <span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
335
+ <span>Ultima sessione: 3 giorni fa</span>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="patient-option flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-all" onclick="selectPatient('Sofia Rossi', 'p4')">
341
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
342
+ <i class="fas fa-user text-yellow-600"></i>
343
+ </div>
344
+ <div>
345
+ <h4 class="font-medium">Sofia Rossi</h4>
346
+ <div class="flex items-center text-xs text-gray-500">
347
+ <span class="mr-2">61 anni</span>
348
+ <span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
349
+ <span>Ultima sessione: 5 giorni fa</span>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="mt-4 pt-4 border-t border-gray-200">
356
+ <button class="w-full py-2 px-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all flex items-center justify-center">
357
+ <i class="fas fa-plus mr-2"></i> Nuovo paziente
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="mt-6 bg-white rounded-xl shadow-md p-6">
365
+ <div class="flex justify-between items-center">
366
+ <div>
367
+ <h3 class="font-bold text-lg text-gray-800">Riepilogo selezione</h3>
368
+ <p class="text-gray-600">Verifica le tue scelte prima di iniziare</p>
369
+ </div>
370
+ <button id="start-game-btn" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all flex items-center opacity-50 cursor-not-allowed" disabled>
371
+ <i class="fas fa-play mr-2"></i> Avvia sessione
372
+ </button>
373
+ </div>
374
+
375
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
376
+ <div class="bg-gray-50 p-4 rounded-lg">
377
+ <div class="text-sm text-gray-500 mb-1">Gioco selezionato</div>
378
+ <div id="summary-game" class="font-medium text-gray-800">Nessun gioco selezionato</div>
379
+ </div>
380
+
381
+ <div class="bg-gray-50 p-4 rounded-lg">
382
+ <div class="text-sm text-gray-500 mb-1">Difficoltà</div>
383
+ <div id="summary-difficulty" class="font-medium text-gray-800">Non specificata</div>
384
+ </div>
385
+
386
+ <div class="bg-gray-50 p-4 rounded-lg">
387
+ <div class="text-sm text-gray-500 mb-1">Paziente</div>
388
+ <div id="summary-patient" class="font-medium text-gray-800">Non selezionato</div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </main>
394
+ </div>
395
+ </div>
396
+
397
+ <script>
398
+ // Current selections
399
+ let currentGame = null;
400
+ let currentGameId = null;
401
+ let currentDifficulty = null;
402
+ let currentPatient = null;
403
+ let currentPatientId = null;
404
+
405
+ // DOM elements
406
+ const gameSelection = document.getElementById('game-selection');
407
+ const difficultySelection = document.getElementById('difficulty-selection');
408
+ const pageTitle = document.getElementById('page-title');
409
+ const selectedGameTitle = document.getElementById('selected-game-title');
410
+ const startGameBtn = document.getElementById('start-game-btn');
411
+ const summaryGame = document.getElementById('summary-game');
412
+ const summaryDifficulty = document.getElementById('summary-difficulty');
413
+ const summaryPatient = document.getElementById('summary-patient');
414
+
415
+ // Select a game
416
+ function selectGame(gameName, gameId) {
417
+ currentGame = gameName;
418
+ currentGameId = gameId;
419
+
420
+ // Update UI
421
+ gameSelection.classList.add('hidden');
422
+ difficultySelection.classList.remove('hidden');
423
+ pageTitle.textContent = `Configura ${gameName}`;
424
+ selectedGameTitle.textContent = gameName;
425
+ summaryGame.textContent = gameName;
426
+
427
+ // Reset other selections
428
+ currentDifficulty = null;
429
+ currentPatient = null;
430
+ updateSummary();
431
+ }
432
+
433
+ // Go back to game selection
434
+ function backToGames() {
435
+ gameSelection.classList.remove('hidden');
436
+ difficultySelection.classList.add('hidden');
437
+ pageTitle.textContent = 'Seleziona un Gioco';
438
+
439
+ // Reset selections
440
+ currentGame = null;
441
+ currentGameId = null;
442
+ currentDifficulty = null;
443
+ currentPatient = null;
444
+ updateSummary();
445
+ }
446
+
447
+ // Select difficulty level
448
+ function selectDifficulty(difficulty) {
449
+ currentDifficulty = difficulty;
450
+
451
+ // Remove active class from all options
452
+ document.querySelectorAll('.difficulty-option').forEach(option => {
453
+ option.classList.remove('border-blue-300', 'border-amber-300', 'border-red-300');
454
+ });
455
+
456
+ // Add active class to selected option
457
+ const selectedOption = event.currentTarget;
458
+ if (difficulty === 'Facile') {
459
+ selectedOption.classList.add('border-blue-300');
460
+ } else if (difficulty === 'Medio') {
461
+ selectedOption.classList.add('border-amber-300');
462
+ } else {
463
+ selectedOption.classList.add('border-red-300');
464
+ }
465
+
466
+ updateSummary();
467
+ }
468
+
469
+ // Select patient
470
+ function selectPatient(patient, patientId) {
471
+ currentPatient = patient;
472
+ currentPatientId = patientId;
473
+
474
+ // Remove active class from all options
475
+ document.querySelectorAll('.patient-option').forEach(option => {
476
+ option.classList.remove('bg-blue-50', 'border-blue-200');
477
+ });
478
+
479
+ // Add active class to selected option
480
+ event.currentTarget.classList.add('bg-blue-50', 'border-blue-200');
481
+
482
+ updateSummary();
483
+ }
484
+
485
+ // Update summary and enable/disable start button
486
+ function updateSummary() {
487
+ summaryGame.textContent = currentGame || 'Nessun gioco selezionato';
488
+ summaryDifficulty.textContent = currentDifficulty || 'Non specificata';
489
+ summaryPatient.textContent = currentPatient || 'Non selezionato';
490
+
491
+ // Enable start button only if all selections are made
492
+ if (currentGame && currentDifficulty && currentPatient) {
493
+ startGameBtn.disabled = false;
494
+ startGameBtn.classList.remove('opacity-50', 'cursor-not-allowed');
495
+ startGameBtn.classList.add('hover:bg-green-700');
496
+ } else {
497
+ startGameBtn.disabled = true;
498
+ startGameBtn.classList.add('opacity-50', 'cursor-not-allowed');
499
+ startGameBtn.classList.remove('hover:bg-green-700');
500
+ }
501
+ }
502
+
503
+ // Start game session (would redirect to actual game in real implementation)
504
+ startGameBtn.addEventListener('click', function() {
505
+ if (currentGame && currentDifficulty && currentPatient) {
506
+ alert(`Avvio sessione:\nGioco: ${currentGame}\nDifficoltà: ${currentDifficulty}\nPaziente: ${currentPatient}`);
507
+ // In a real app, you would redirect to the game page with these parameters
508
+ }
509
+ });
510
+ </script>
511
+ <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=FaberVi/mindgym" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
512
+ </html>
prompts.txt ADDED
File without changes