|
|
<!DOCTYPE html> |
|
|
<html lang="it"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MindGym - Piattaforma di Giochi Cognitivi</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.game-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.modal { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.modal-backdrop { |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
.filter-chip { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.filter-chip.active { |
|
|
background-color: #4f46e5; |
|
|
color: white; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<div id="vr-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-backdrop"> |
|
|
<div class="bg-white rounded-xl shadow-xl max-w-md w-full modal"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Gioco VR</h3> |
|
|
<button onclick="closeVRModal()" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-vr-cardboard text-purple-600"></i> |
|
|
</div> |
|
|
<h4 id="vr-game-title" class="font-bold text-lg">Nome Gioco VR</h4> |
|
|
</div> |
|
|
<p id="vr-game-description" class="text-gray-600">Descrizione del gioco VR...</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 rounded-lg p-4 mb-4"> |
|
|
<h4 class="font-medium text-blue-800 mb-2">Requisiti VR</h4> |
|
|
<ul class="list-disc list-inside text-sm text-gray-700 space-y-1"> |
|
|
<li>Visore VR compatibile</li> |
|
|
<li>Spazio libero di almeno 2x2 metri</li> |
|
|
<li>Controller manuali</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button onclick="closeVRModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> |
|
|
Chiudi |
|
|
</button> |
|
|
<button onclick="requestVRInfo()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Richiedi info |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col"> |
|
|
<div class="p-4 flex items-center space-x-3 border-b border-indigo-700"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-bold">MindGym</div> |
|
|
<div class="text-xs text-indigo-300">Piattaforma Cognitiva</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b border-indigo-700"> |
|
|
<div class="text-xs uppercase text-indigo-400 mb-2">Operatore</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Dr. Mario Rossi</div> |
|
|
<div class="text-xs text-indigo-300">Neurologo</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="flex-1 overflow-y-auto p-4 space-y-2"> |
|
|
<div class="text-xs uppercase text-indigo-400 mb-2">Menu</div> |
|
|
<a href="games.html" class="block py-2 px-3 rounded bg-indigo-700 text-white"> |
|
|
<i class="fas fa-gamepad mr-2"></i> Giochi |
|
|
</a> |
|
|
<a href="patients.html" class="block py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100"> |
|
|
<i class="fas fa-users mr-2"></i> Pazienti |
|
|
</a> |
|
|
<a href="progress.html" class="block py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100"> |
|
|
<i class="fas fa-chart-line mr-2"></i> Progressi |
|
|
</a> |
|
|
<a href="settings.html" class="block py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100"> |
|
|
<i class="fas fa-cog mr-2"></i> Impostazioni |
|
|
</a> |
|
|
|
|
|
<div class="text-xs uppercase text-indigo-400 mt-6 mb-2">Statistiche</div> |
|
|
<div class="bg-indigo-900 bg-opacity-50 rounded-lg p-3"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Sess. oggi</span> |
|
|
<span>12</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Pazienti attivi</span> |
|
|
<span>8</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Progresso medio</span> |
|
|
<span>68%</span> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-indigo-700"> |
|
|
<button class="w-full py-2 px-3 rounded hover:bg-indigo-700 text-indigo-100 text-left"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i> Esci |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold text-gray-800"> |
|
|
<span id="page-title">Seleziona un Gioco</span> |
|
|
</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-gray-500 text-xl"></i> |
|
|
<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> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div id="game-selection" class="fade-in"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-2">Benvenuto, Dr. Rossi</h2> |
|
|
<p class="text-gray-600">Seleziona un gioco cognitivo da assegnare al tuo paziente.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-4 mb-6"> |
|
|
<div class="flex flex-wrap items-center gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="filterByCategory('all')" class="filter-chip active px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-layer-group mr-1"></i> Tutti |
|
|
</button> |
|
|
<button onclick="filterByCategory('memory')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-brain mr-1"></i> Memoria |
|
|
</button> |
|
|
<button onclick="filterByCategory('logic')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-calculator mr-1"></i> Logica |
|
|
</button> |
|
|
<button onclick="filterByCategory('language')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-language mr-1"></i> Linguaggio |
|
|
</button> |
|
|
<button onclick="filterByCategory('spatial')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-eye mr-1"></i> Spaziale |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Tempo</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="filterByTime('all')" class="filter-chip active px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-clock mr-1"></i> Tutti |
|
|
</button> |
|
|
<button onclick="filterByTime('short')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-hourglass-start mr-1"></i> Breve |
|
|
</button> |
|
|
<button onclick="filterByTime('medium')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-hourglass-half mr-1"></i> Medio |
|
|
</button> |
|
|
<button onclick="filterByTime('long')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-hourglass-end mr-1"></i> Lungo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Tecnologia</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="filterByTech('all')" class="filter-chip active px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-globe mr-1"></i> Tutti |
|
|
</button> |
|
|
<button onclick="filterByTech('web')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-laptop mr-1"></i> Web |
|
|
</button> |
|
|
<button onclick="filterByTech('vr')" class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-300 flex items-center"> |
|
|
<i class="fas fa-vr-cardboard mr-1"></i> VR |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="games-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" data-category="memory" data-time="medium" data-tech="web" onclick="selectGame('Memoria Visiva', 'memory', false)"> |
|
|
<div class="h-40 bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center"> |
|
|
<i class="fas fa-eye text-6xl text-white opacity-80"></i> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Memoria Visiva</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Web</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Allena la memoria a breve termine ricordando sequenze di immagini.</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span>5-10 min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-brain mr-1"></i> |
|
|
<span>Memoria</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" data-category="logic" data-time="short" data-tech="web" onclick="selectGame('Calcolo Veloce', 'math', false)"> |
|
|
<div class="h-40 bg-gradient-to-r from-blue-500 to-teal-500 flex items-center justify-center"> |
|
|
<i class="fas fa-calculator text-6xl text-white opacity-80"></i> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Calcolo Veloce</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Web</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Migliora le tue abilità matematiche risolvendo problemi aritmetici.</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span>3-7 min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-calculator mr-1"></i> |
|
|
<span>Logica</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" data-category="language" data-time="medium" data-tech="web" onclick="selectGame('Associazione Parole', 'words', false)"> |
|
|
<div class="h-40 bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center"> |
|
|
<i class="fas fa-comment-dots text-6xl text-white opacity-80"></i> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Associazione Parole</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Web</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Collega parole correlate per migliorare il pensiero associativo.</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span>7-12 min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-language mr-1"></i> |
|
|
<span>Linguaggio</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" data-category="spatial" data-time="long" data-tech="vr" onclick="selectGame('Puzzle Spaziale VR', 'puzzle', true)"> |
|
|
<div class="h-40 bg-gradient-to-r from-emerald-500 to-green-500 flex items-center justify-center"> |
|
|
<i class="fas fa-puzzle-piece text-6xl text-white opacity-80"></i> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Puzzle Spaziale VR</h3> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">VR</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Sviluppa le capacità visuo-spaziali ricomponendo immagini complesse in realtà virtuale.</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span>10-15 min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-eye mr-1"></i> |
|
|
<span>Spaziale</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" data-category="logic" data-time="short" data-tech="web" onclick="selectGame('Sequenza Logica', 'sequence', false)"> |
|
|
<div class="h-40 bg-gradient-to-r from-rose-500 to-pink-500 flex items-center justify-center"> |
|
|
<i class="fas fa-project-diagram text-6xl text-white opacity-80"></i> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Sequenza Logica</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Web</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Identifica il modello logico per completare correttamente le sequenze.</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span>5-8 min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-sitemap mr-1"></i> |
|
|
<span>Ragionamento</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300" data-category="memory" data-time="short" data-tech="vr" onclick="selectGame('Memoria Uditiva VR', 'sound', true)"> |
|
|
<div class="h-40 bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-6xl text-white opacity-80"></i> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-xl mb-2 text-gray-800">Memoria Uditiva VR</h3> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">VR</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Ricorda e ripeti sequenze di suoni in un ambiente immersivo 3D.</p> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-clock mr-1"></i> |
|
|
<span>4-9 min</span> |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-ear-listen mr-1"></i> |
|
|
<span>Udito</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="difficulty-selection" class="hidden fade-in"> |
|
|
<div class="mb-6 flex items-center"> |
|
|
<button onclick="backToGames()" class="mr-4 w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"> |
|
|
<i class="fas fa-arrow-left text-gray-600"></i> |
|
|
</button> |
|
|
<div> |
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-1" id="selected-game-title">Memoria Visiva</h2> |
|
|
<p class="text-gray-600">Seleziona la difficoltà e il paziente</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h3 class="font-bold text-lg mb-4 text-gray-800">Livello di difficoltà</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<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')"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-smile text-blue-600"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-blue-800">Facile</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Adatto per pazienti con difficoltà cognitive significative o all'inizio del percorso riabilitativo.</p> |
|
|
<div class="mt-3 text-xs text-blue-600"> |
|
|
<i class="fas fa-info-circle mr-1"></i> 3-5 elementi, tempo illimitato |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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')"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-meh text-amber-600"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-amber-800">Medio</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Per pazienti con moderate difficoltà cognitive o in fase intermedia di riabilitazione.</p> |
|
|
<div class="mt-3 text-xs text-amber-600"> |
|
|
<i class="fas fa-info-circle mr-1"></i> 5-7 elementi, tempo limitato |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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')"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-frown text-red-600"></i> |
|
|
</div> |
|
|
<h4 class="font-bold text-red-800">Difficile</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600">Per pazienti con lieve difficoltà o in fase avanzata di riabilitazione cognitiva.</p> |
|
|
<div class="mt-3 text-xs text-red-600"> |
|
|
<i class="fas fa-info-circle mr-1"></i> 7-10 elementi, tempo ridotto |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 h-full"> |
|
|
<h3 class="font-bold text-lg mb-4 text-gray-800">Seleziona paziente</h3> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<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')"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Luigi Bianchi</h4> |
|
|
<div class="flex items-center text-xs text-gray-500"> |
|
|
<span class="mr-2">65 anni</span> |
|
|
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span> |
|
|
<span>Ultima sessione: 2 giorni fa</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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')"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Anna Verdi</h4> |
|
|
<div class="flex items-center text-xs text-gray-500"> |
|
|
<span class="mr-2">58 anni</span> |
|
|
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span> |
|
|
<span>Ultima sessione: 1 settimana fa</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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')"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Marco Neri</h4> |
|
|
<div class="flex items-center text-xs text-gray-500"> |
|
|
<span class="mr-2">72 anni</span> |
|
|
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span> |
|
|
<span>Ultima sessione: 3 giorni fa</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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')"> |
|
|
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Sofia Rossi</h4> |
|
|
<div class="flex items-center text-xs text-gray-500"> |
|
|
<span class="mr-2">61 anni</span> |
|
|
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span> |
|
|
<span>Ultima sessione: 5 giorni fa</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 pt-4 border-t border-gray-200"> |
|
|
<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"> |
|
|
<i class="fas fa-plus mr-2"></i> Nuovo paziente |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800">Riepilogo selezione</h3> |
|
|
<p class="text-gray-600">Verifica le tue scelte prima di iniziare</p> |
|
|
</div> |
|
|
<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> |
|
|
<i class="fas fa-play mr-2"></i> Avvia sessione |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-gray-500 mb-1">Gioco selezionato</div> |
|
|
<div id="summary-game" class="font-medium text-gray-800">Nessun gioco selezionato</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-gray-500 mb-1">Difficoltà</div> |
|
|
<div id="summary-difficulty" class="font-medium text-gray-800">Non specificata</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-gray-500 mb-1">Paziente</div> |
|
|
<div id="summary-patient" class="font-medium text-gray-800">Non selezionato</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentGame = null; |
|
|
let currentGameId = null; |
|
|
let currentDifficulty = null; |
|
|
let currentPatient = null; |
|
|
let currentPatientId = null; |
|
|
let currentIsVR = false; |
|
|
|
|
|
|
|
|
const gameSelection = document.getElementById('game-selection'); |
|
|
const difficultySelection = document.getElementById('difficulty-selection'); |
|
|
const pageTitle = document.getElementById('page-title'); |
|
|
const selectedGameTitle = document.getElementById('selected-game-title'); |
|
|
const startGameBtn = document.getElementById('start-game-btn'); |
|
|
const summaryGame = document.getElementById('summary-game'); |
|
|
const summaryDifficulty = document.getElementById('summary-difficulty'); |
|
|
const summaryPatient = document.getElementById('summary-patient'); |
|
|
const vrModal = document.getElementById('vr-modal'); |
|
|
const vrGameTitle = document.getElementById('vr-game-title'); |
|
|
const vrGameDescription = document.getElementById('vr-game-description'); |
|
|
const gamesContainer = document.getElementById('games-container'); |
|
|
|
|
|
|
|
|
let currentCategoryFilter = 'all'; |
|
|
let currentTimeFilter = 'all'; |
|
|
let currentTechFilter = 'all'; |
|
|
|
|
|
|
|
|
function selectGame(gameName, gameId, isVR) { |
|
|
currentGame = gameName; |
|
|
currentGameId = gameId; |
|
|
currentIsVR = isVR; |
|
|
|
|
|
if (isVR) { |
|
|
|
|
|
vrGameTitle.textContent = gameName; |
|
|
vrGameDescription.textContent = document.querySelector(`[onclick="selectGame('${gameName}', '${gameId}', true)"] p`).textContent; |
|
|
openVRModal(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
gameSelection.classList.add('hidden'); |
|
|
difficultySelection.classList.remove('hidden'); |
|
|
pageTitle.textContent = `Configura ${gameName}`; |
|
|
selectedGameTitle.textContent = gameName; |
|
|
summaryGame.textContent = gameName; |
|
|
|
|
|
|
|
|
currentDifficulty = null; |
|
|
currentPatient = null; |
|
|
updateSummary(); |
|
|
} |
|
|
|
|
|
|
|
|
function openVRModal() { |
|
|
vrModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function closeVRModal() { |
|
|
vrModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function requestVRInfo() { |
|
|
alert(`Richiesta informazioni inviata per il gioco VR: ${currentGame}\nTi contatteremo al più presto con i dettagli!`); |
|
|
closeVRModal(); |
|
|
} |
|
|
|
|
|
|
|
|
function backToGames() { |
|
|
gameSelection.classList.remove('hidden'); |
|
|
difficultySelection.classList.add('hidden'); |
|
|
pageTitle.textContent = 'Seleziona un Gioco'; |
|
|
|
|
|
|
|
|
currentGame = null; |
|
|
currentGameId = null; |
|
|
currentDifficulty = null; |
|
|
currentPatient = null; |
|
|
currentIsVR = false; |
|
|
updateSummary(); |
|
|
} |
|
|
|
|
|
|
|
|
function selectDifficulty(difficulty) { |
|
|
currentDifficulty = difficulty; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.difficulty-option').forEach(option => { |
|
|
option.classList.remove('border-blue-300', 'border-amber-300', 'border-red-300'); |
|
|
}); |
|
|
|
|
|
|
|
|
const selectedOption = event.currentTarget; |
|
|
if (difficulty === 'Facile') { |
|
|
selectedOption.classList.add('border-blue-300'); |
|
|
} else if (difficulty === 'Medio') { |
|
|
selectedOption.classList.add('border-amber-300'); |
|
|
} else { |
|
|
selectedOption.classList.add('border-red-300'); |
|
|
} |
|
|
|
|
|
updateSummary(); |
|
|
} |
|
|
|
|
|
|
|
|
function selectPatient(patient, patientId) { |
|
|
currentPatient = patient; |
|
|
currentPatientId = patientId; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.patient-option').forEach(option => { |
|
|
option.classList.remove('bg-blue-50', 'border-blue-200'); |
|
|
}); |
|
|
|
|
|
|
|
|
event.currentTarget.classList.add('bg-blue-50', 'border-blue-200'); |
|
|
|
|
|
updateSummary(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateSummary() { |
|
|
summaryGame.textContent = currentGame || 'Nessun gioco selezionato'; |
|
|
summaryDifficulty.textContent = currentDifficulty || 'Non specificata'; |
|
|
summaryPatient.textContent = currentPatient || 'Non selezionato'; |
|
|
|
|
|
|
|
|
if (currentGame && currentDifficulty && currentPatient) { |
|
|
startGameBtn.disabled = false; |
|
|
startGameBtn.classList.remove('opacity-50', 'cursor-not-allowed'); |
|
|
startGameBtn.classList.add('hover:bg-green-700'); |
|
|
} else { |
|
|
startGameBtn.disabled = true; |
|
|
startGameBtn.classList.add('opacity-50', 'cursor-not-allowed'); |
|
|
startGameBtn.classList.remove('hover:bg-green-700'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
startGameBtn.addEventListener('click', function() { |
|
|
if (currentGame && currentDifficulty && currentPatient) { |
|
|
alert(`Avvio sessione:\nGioco: ${currentGame}\nDifficoltà: ${currentDifficulty}\nPaziente: ${currentPatient}`); |
|
|
|
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function filterByCategory(category) { |
|
|
currentCategoryFilter = category; |
|
|
updateFilters(); |
|
|
filterGames(); |
|
|
} |
|
|
|
|
|
function filterByTime(time) { |
|
|
currentTimeFilter = time; |
|
|
updateFilters(); |
|
|
filterGames(); |
|
|
} |
|
|
|
|
|
function filterByTech(tech) { |
|
|
currentTechFilter = tech; |
|
|
updateFilters(); |
|
|
filterGames(); |
|
|
} |
|
|
|
|
|
function updateFilters() { |
|
|
|
|
|
document.querySelectorAll('[onclick^="filterByCategory"]').forEach(btn => { |
|
|
const category = btn.getAttribute('onclick').match(/'([^']+)'/)[1]; |
|
|
btn.classList.toggle('active', category === currentCategoryFilter); |
|
|
btn.classList.toggle('bg-indigo-100', category === currentCategoryFilter); |
|
|
btn.classList.toggle('border-indigo-300', category === currentCategoryFilter); |
|
|
btn.classList.toggle('text-indigo-800', category === currentCategoryFilter); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[onclick^="filterByTime"]').forEach(btn => { |
|
|
const time = btn.getAttribute('onclick').match(/'([^']+)'/)[1]; |
|
|
btn.classList.toggle('active', time === currentTimeFilter); |
|
|
btn.classList.toggle('bg-indigo-100', time === currentTimeFilter); |
|
|
btn.classList.toggle('border-indigo-300', time === currentTimeFilter); |
|
|
btn.classList.toggle('text-indigo-800', time === currentTimeFilter); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[onclick^="filterByTech"]').forEach(btn => { |
|
|
const tech = btn.getAttribute('onclick').match(/'([^']+)'/)[1]; |
|
|
btn.classList.toggle('active', tech === currentTechFilter); |
|
|
btn.classList.toggle('bg-indigo-100', tech === currentTechFilter); |
|
|
btn.classList.toggle('border-indigo-300', tech === currentTechFilter); |
|
|
btn.classList.toggle('text-indigo-800', tech === currentTechFilter); |
|
|
}); |
|
|
} |
|
|
|
|
|
function filterGames() { |
|
|
const gameCards = document.querySelectorAll('.game-card'); |
|
|
|
|
|
gameCards.forEach(card => { |
|
|
const categoryMatch = currentCategoryFilter === 'all' || card.dataset.category === currentCategoryFilter; |
|
|
const timeMatch = currentTimeFilter === 'all' || card.dataset.time === currentTimeFilter; |
|
|
const techMatch = currentTechFilter === 'all' || card.dataset.tech === currentTechFilter; |
|
|
|
|
|
if (categoryMatch && timeMatch && techMatch) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
updateFilters(); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
