Download index.html from Danny2014/https-huggingface-co-spaces-victor-deepsite-gallery: direct link, hf CLI and curl.
- Browser
- Download file 53.2 kB
-
https://huggingface.co/spaces/Danny2014/https-huggingface-co-spaces-victor-deepsite-gallery/resolve/main/index.html
- Command line
-
hf download hf://spaces/Danny2014/https-huggingface-co-spaces-victor-deepsite-gallery/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Danny2014/https-huggingface-co-spaces-victor-deepsite-gallery/resolve/main/index.html
53.2 kB
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gestione Allenamento - Squadra di Calcio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .drill-card { | |
| transition: all 0.3s ease; | |
| } | |
| .drill-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-green-700 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-futbol text-2xl"></i> | |
| <h1 class="text-2xl font-bold">TeamManager FC</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="hidden md:inline">Coach: Marco Rossi</span> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Coach" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border border-white"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto px-4 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Sidebar --> | |
| <aside class="lg:col-span-1 space-y-6"> | |
| <!-- Session Info --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Info Allenamento</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Data</label> | |
| <input type="date" value="2023-06-15" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Ora</label> | |
| <div class="flex space-x-2 mt-1"> | |
| <input type="time" value="18:00" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <span class="flex items-center">a</span> | |
| <input type="time" value="20:00" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Tipo</label> | |
| <select class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Tattica difensiva</option> | |
| <option>Tattica offensiva</option> | |
| <option>Preparazione atletica</option> | |
| <option>Partita di allenamento</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-600">Stato</label> | |
| <span class="mt-1 inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| In programma | |
| </span> | |
| </div> | |
| <button class="mt-4 flex items-center text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-plus-circle mr-2"></i> Aggiungi fase | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Azioni Rapide</h2> | |
| <div class="space-y-3"> | |
| <button onclick="startSession()" class="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-play mr-2"></i> Inizia Allenamento | |
| </button> | |
| <button class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> Aggiungi Esercizio | |
| </button> | |
| <button class="w-full flex items-center justify-center px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition"> | |
| <i class="fas fa-edit mr-2"></i> Modifica Sessione | |
| </button> | |
| <button class="w-full flex items-center justify-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"> | |
| <i class="fas fa-times mr-2"></i> Cancella Sessione | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Attendance Summary --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Presenze</h2> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm text-gray-600">Confermati</span> | |
| <span class="font-bold">18/22</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 82%"></div> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Assenti</span> | |
| <span class="font-bold">4</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Panel --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Session Overview --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Sessione: Difesa a zona</h2> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-print text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-share-alt text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Session Progress --> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-600">Progresso sessione</span> | |
| <span class="text-sm font-medium text-gray-600">30%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <!-- Session Timeline --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Timeline Allenamento</h3> | |
| <div class="space-y-4"> | |
| <!-- Timeline Item --> | |
| <div class="flex items-start group relative"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full"></div> | |
| </div> | |
| <div class="ml-4 w-full"> | |
| <div class="flex justify-between items-center"> | |
| <input type="text" value="Riscaldamento" class="font-medium text-gray-900 bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none w-1/2"> | |
| <div class="flex space-x-2"> | |
| <input type="time" value="18:00" class="text-sm text-gray-500 bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none w-20"> | |
| <span>-</span> | |
| <input type="time" value="18:20" class="text-sm text-gray-500 bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none w-20"> | |
| </div> | |
| </div> | |
| <textarea class="text-sm text-gray-600 mt-1 w-full bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none">Corsa leggera, stretching dinamico e mobilità articolare</textarea> | |
| </div> | |
| <button class="absolute right-0 top-0 opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium text-gray-900">Esercizio posizionale</span> | |
| <span class="text-sm text-gray-500">18:20 - 18:50</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Movimenti senza palla e coperture nello spazio</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 bg-gray-300 rounded-full"></div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium text-gray-900">Partita a tema</span> | |
| <span class="text-sm text-gray-500">18:50 - 19:30</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Gioco 8v8 con focus sulla difesa a zona</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 bg-gray-300 rounded-full"></div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium text-gray-900">Defaticamento</span> | |
| <span class="text-sm text-gray-500">19:30 - 19:45</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Stretching statico e feedback</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Current Drill --> | |
| <div class="bg-blue-50 rounded-lg p-4 border border-blue-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-blue-800">Esercizio in corso</h3> | |
| <p class="text-blue-600">Esercizio posizionale - 18:20 - 18:50</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 text-blue-700"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 text-blue-700"> | |
| <i class="fas fa-stop"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-blue-700">Tempo rimanente</span> | |
| <span class="text-sm font-medium text-blue-700">15:32</span> | |
| </div> | |
| <div class="w-full bg-blue-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 48%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Players List --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Giocatori</h2> | |
| <div class="relative"> | |
| <input type="text" placeholder="Cerca giocatore..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Player Card --> | |
| <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-green-500"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Luca Bianchi</h3> | |
| <p class="text-sm text-gray-600">Difensore centrale</p> | |
| </div> | |
| <select class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border-none focus:ring-2 focus:ring-green-500"> | |
| <option class="bg-green-100 text-green-800">Presente</option> | |
| <option class="bg-yellow-100 text-yellow-800">In ritardo</option> | |
| <option class="bg-red-100 text-red-800">Assente</option> | |
| <option class="bg-blue-100 text-blue-800">Infortunato</option> | |
| </select> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-500">Carico:</span> | |
| <span class="font-medium ml-1">75%</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Focus:</span> | |
| <span class="font-medium ml-1">8/10</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button onclick="showPlayerStats(this)" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Stats | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-comment-alt mr-1"></i> Feedback | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player Card --> | |
| <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-green-500"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Marco Verdi</h3> | |
| <p class="text-sm text-gray-600">Centrocampista</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Presente | |
| </span> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-500">Carico:</span> | |
| <span class="font-medium ml-1">82%</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Focus:</span> | |
| <span class="font-medium ml-1">7/10</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Stats | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-comment-alt mr-1"></i> Feedback | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player Card --> | |
| <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-red-500"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Andrea Rossi</h3> | |
| <p class="text-sm text-gray-600">Attaccante</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> | |
| Assente | |
| </span> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-500">Carico:</span> | |
| <span class="font-medium ml-1">-</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Focus:</span> | |
| <span class="font-medium ml-1">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Stats | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-comment-alt mr-1"></i> Feedback | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player Card 4 --> | |
| <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-green-500"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Giovanni Neri</h3> | |
| <p class="text-sm text-gray-600">Portiere</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Presente | |
| </span> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-500">Carico:</span> | |
| <span class="font-medium ml-1">68%</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Focus:</span> | |
| <span class="font-medium ml-1">9/10</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Stats | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-comment-alt mr-1"></i> Feedback | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player Card 5 --> | |
| <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex items-start"> | |
| <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-green-500"> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Paolo Conti</h3> | |
| <p class="text-sm text-gray-600">Difensore</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Presente | |
| </span> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-500">Carico:</span> | |
| <span class="font-medium ml-1">72%</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">Focus:</span> | |
| <span class="font-medium ml-1">7/10</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-chart-line mr-1"></i> Stats | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-comment-alt mr-1"></i> Feedback | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Aggiungere qui le altre 13 player-card con struttura simile --> | |
| <!-- ... --> | |
| </div> | |
| </div> | |
| <!-- Drills Library --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Esercizi consigliati</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"> | |
| Difesa | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"> | |
| Attacco | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"> | |
| Transizioni | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Drill Card --> | |
| <div class="drill-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> | |
| <div class="relative h-40 bg-blue-100 flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div> | |
| <i class="fas fa-people-arrows text-4xl text-blue-600 relative z-10"></i> | |
| <span class="absolute bottom-2 right-2 bg-white/90 px-2 py-1 rounded text-xs font-medium">Difesa</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-900 mb-2">Coperture e scivolamenti</h3> | |
| <p class="text-sm text-gray-600 mb-3">Esercizio per migliorare i movimenti difensivi in zona</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-clock mr-1"></i> 20 min</span> | |
| <span><i class="fas fa-users mr-1"></i> 6+ giocatori</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> Anteprima | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> Aggiungi | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Drill Card --> | |
| <div class="drill-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> | |
| <div class="relative h-40 bg-green-100 flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div> | |
| <i class="fas fa-shield-alt text-4xl text-green-600 relative z-10"></i> | |
| <span class="absolute bottom-2 right-2 bg-white/90 px-2 py-1 rounded text-xs font-medium">Difesa</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-900 mb-2">Pressione collettiva</h3> | |
| <p class="text-sm text-gray-600 mb-3">Allenamento per la pressione coordinata in zona centrale</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-clock mr-1"></i> 25 min</span> | |
| <span><i class="fas fa-users mr-1"></i> 8+ giocatori</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> Anteprima | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> Aggiungi | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Drill Card --> | |
| <div class="drill-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm"> | |
| <div class="relative h-40 bg-purple-100 flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div> | |
| <i class="fas fa-arrows-alt text-4xl text-purple-600 relative z-10"></i> | |
| <span class="absolute bottom-2 right-2 bg-white/90 px-2 py-1 rounded text-xs font-medium">Difesa</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-900 mb-2">Transizioni difensive</h3> | |
| <p class="text-sm text-gray-600 mb-3">Esercizio per il riposizionamento dopo la perdita del possesso</p> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-clock mr-1"></i> 15 min</span> | |
| <span><i class="fas fa-users mr-1"></i> 10+ giocatori</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> Anteprima | |
| </button> | |
| <button class="text-green-600 hover:text-green-800 text-sm font-medium"> | |
| <i class="fas fa-plus mr-1"></i> Aggiungi | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Stats Modal --> | |
| <div id="statsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-800" id="playerName">Statistiche Giocatore</h3> | |
| <button onclick="closeStatsModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Performance Metrics --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-lg font-semibold mb-4 text-gray-700">Metriche Performance</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-600">Velocità</span> | |
| <span class="text-sm font-medium text-gray-600">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-600">Resistenza</span> | |
| <span class="text-sm font-medium text-gray-600">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-600">Tecnica</span> | |
| <span class="text-sm font-medium text-gray-600">92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Radar Chart --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-lg font-semibold mb-4 text-gray-700">Abilità Principali</h4> | |
| <div class="flex justify-center"> | |
| <canvas id="radarChart" width="300" height="300"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Matches --> | |
| <div class="md:col-span-2 bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-lg font-semibold mb-4 text-gray-700">Ultime Partite</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avversario</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Voto</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Km</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Goal</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/23</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FC Torino</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9.8</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/23</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AS Roma</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.8</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10.2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/06/23</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Juventus</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.0</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold">TeamManager FC</h2> | |
| <p class="text-gray-400">Software per la gestione degli allenamenti</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm"> | |
| <p>© 2023 TeamManager FC. Tutti i diritti riservati.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| function startSession() { | |
| alert('Allenamento iniziato! Buon lavoro!'); | |
| // Qui potresti aggiungere la logica per iniziare effettivamente la sessione | |
| } | |
| // Add new timeline item | |
| function addTimelineItem() { | |
| const timelineContainer = document.querySelector('.space-y-4'); | |
| const newItem = document.createElement('div'); | |
| newItem.className = 'flex items-start group relative'; | |
| newItem.innerHTML = ` | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 bg-gray-300 rounded-full"></div> | |
| </div> | |
| <div class="ml-4 w-full"> | |
| <div class="flex justify-between items-center"> | |
| <input type="text" placeholder="Nome fase" class="font-medium text-gray-900 bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none w-1/2"> | |
| <div class="flex space-x-2"> | |
| <input type="time" value="19:00" class="text-sm text-gray-500 bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none w-20"> | |
| <span>-</span> | |
| <input type="time" value="19:30" class="text-sm text-gray-500 bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none w-20"> | |
| </div> | |
| </div> | |
| <textarea placeholder="Descrizione" class="text-sm text-gray-600 mt-1 w-full bg-transparent border-b border-transparent focus:border-blue-500 focus:outline-none"></textarea> | |
| </div> | |
| <button class="absolute right-0 top-0 opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700" onclick="this.parentElement.remove()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| timelineContainer.appendChild(newItem); | |
| } | |
| // Initialize event listeners | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add click handler for "Aggiungi fase" button | |
| document.querySelector('.space-y-4 + button').addEventListener('click', addTimelineItem); | |
| // Make all attendance selects update their styling based on value | |
| document.querySelectorAll('select').forEach(select => { | |
| select.addEventListener('change', function() { | |
| const colorMap = { | |
| 'Presente': 'green', | |
| 'In ritardo': 'yellow', | |
| 'Assente': 'red', | |
| 'Infortunato': 'blue' | |
| }; | |
| const color = colorMap[this.value] || 'gray'; | |
| this.className = this.className.replace(/bg-\w+-\d+ text-\w+-\d+/g, ''); | |
| this.classList.add(`bg-${color}-100`, `text-${color}-800`); | |
| }); | |
| }); | |
| }); | |
| // Simulazione di caricamento dati | |
| document.addEventListener('DOMContentLoaded', function() { | |
| console.log('Pagina caricata - sistema pronto per la gestione dell\'allenamento'); | |
| // Potresti aggiungere qui la logica per caricare i dati reali | |
| // fetch('/api/session-data').then(...) | |
| }); | |
| // Player Stats Functions | |
| function showPlayerStats(button) { | |
| const playerCard = button.closest('.player-card'); | |
| const playerName = playerCard.querySelector('h3').textContent; | |
| const playerPosition = playerCard.querySelector('p').textContent; | |
| document.getElementById('playerName').textContent = `${playerName} - ${playerPosition}`; | |
| document.getElementById('statsModal').classList.remove('hidden'); | |
| // Initialize chart if not already done | |
| if (!window.playerRadarChart) { | |
| initRadarChart(); | |
| } | |
| } | |
| function closeStatsModal() { | |
| document.getElementById('statsModal').classList.add('hidden'); | |
| } | |
| function initRadarChart() { | |
| const ctx = document.getElementById('radarChart').getContext('2d'); | |
| window.playerRadarChart = new Chart(ctx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Velocità', 'Tiro', 'Passaggio', 'Difesa', 'Fisico', 'Tecnica'], | |
| datasets: [{ | |
| label: 'Abilità', | |
| data: [85, 78, 92, 65, 88, 90], | |
| backgroundColor: 'rgba(54, 162, 235, 0.2)', | |
| borderColor: 'rgba(54, 162, 235, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(54, 162, 235, 1)' | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Animazione per le card dei giocatori | |
| const playerCards = document.querySelectorAll('.player-card'); | |
| playerCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transition = 'all 0.3s ease'; | |
| }); | |
| }); | |
| // Gestione click sugli esercizi | |
| const drillCards = document.querySelectorAll('.drill-card'); | |
| drillCards.forEach(card => { | |
| card.addEventListener('click', function(e) { | |
| if (!e.target.closest('button')) { | |
| const title = this.querySelector('h3').textContent; | |
| console.log(`Esercizio selezionato: ${title}`); | |
| // Potresti aprire un modal con i dettagli dell'esercizio | |
| } | |
| }); | |
| }); | |
| </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=Danny2014/https-huggingface-co-spaces-victor-deepsite-gallery" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |