Hugging Face's logo

Spaces:
Danny2014
/
https-huggingface-co-spaces-victor-deepsite-gallery
Running

App Files Community
Danny2014 commited on
Commit
c8fefd6
·
verified ·
1 Parent(s): b704229

puoi aggiungermi le statistiche - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +224 -7
index.html CHANGED
@@ -5,6 +5,7 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Gestione Allenamento - Squadra di Calcio</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
  .player-card:hover {
@@ -283,7 +284,7 @@
283
  </div>
284
  </div>
285
  <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between">
286
- <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
287
  <i class="fas fa-chart-line mr-1"></i> Stats
288
  </button>
289
  <button class="text-green-600 hover:text-green-800 text-sm font-medium">
@@ -363,14 +364,83 @@
363
  </button>
364
  </div>
365
  </div>
366
- </div>
367
 
368
- <div class="mt-4 flex justify-between items-center">
369
- <span class="text-sm text-gray-600">Mostrati 3 di 18 giocatori</span>
370
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
371
- Mostra tutti
372
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  </div>
 
374
  </div>
375
 
376
  <!-- Drills Library -->
@@ -471,6 +541,105 @@
471
  </div>
472
  </main>
473
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
474
  <!-- Footer -->
475
  <footer class="bg-gray-800 text-white py-6">
476
  <div class="container mx-auto px-4">
@@ -563,6 +732,54 @@
563
  // fetch('/api/session-data').then(...)
564
  });
565
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
566
  // Animazione per le card dei giocatori
567
  const playerCards = document.querySelectorAll('.player-card');
568
  playerCards.forEach(card => {
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Gestione Allenamento - Squadra di Calcio</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  .player-card:hover {
 
284
  </div>
285
  </div>
286
  <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between">
287
+ <button onclick="showPlayerStats(this)" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
288
  <i class="fas fa-chart-line mr-1"></i> Stats
289
  </button>
290
  <button class="text-green-600 hover:text-green-800 text-sm font-medium">
 
364
  </button>
365
  </div>
366
  </div>
 
367
 
368
+ <!-- Player Card 4 -->
369
+ <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300">
370
+ <div class="p-4 flex items-start">
371
+ <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-green-500">
372
+ <div class="ml-4 flex-1">
373
+ <div class="flex justify-between items-start">
374
+ <div>
375
+ <h3 class="font-bold text-gray-900">Giovanni Neri</h3>
376
+ <p class="text-sm text-gray-600">Portiere</p>
377
+ </div>
378
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
379
+ Presente
380
+ </span>
381
+ </div>
382
+ <div class="mt-2 flex justify-between text-sm">
383
+ <div>
384
+ <span class="text-gray-500">Carico:</span>
385
+ <span class="font-medium ml-1">68%</span>
386
+ </div>
387
+ <div>
388
+ <span class="text-gray-500">Focus:</span>
389
+ <span class="font-medium ml-1">9/10</span>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between">
395
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
396
+ <i class="fas fa-chart-line mr-1"></i> Stats
397
+ </button>
398
+ <button class="text-green-600 hover:text-green-800 text-sm font-medium">
399
+ <i class="fas fa-comment-alt mr-1"></i> Feedback
400
+ </button>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Player Card 5 -->
405
+ <div class="player-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300">
406
+ <div class="p-4 flex items-start">
407
+ <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Player" class="w-16 h-16 rounded-full border-2 border-green-500">
408
+ <div class="ml-4 flex-1">
409
+ <div class="flex justify-between items-start">
410
+ <div>
411
+ <h3 class="font-bold text-gray-900">Paolo Conti</h3>
412
+ <p class="text-sm text-gray-600">Difensore</p>
413
+ </div>
414
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
415
+ Presente
416
+ </span>
417
+ </div>
418
+ <div class="mt-2 flex justify-between text-sm">
419
+ <div>
420
+ <span class="text-gray-500">Carico:</span>
421
+ <span class="font-medium ml-1">72%</span>
422
+ </div>
423
+ <div>
424
+ <span class="text-gray-500">Focus:</span>
425
+ <span class="font-medium ml-1">7/10</span>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <div class="border-t border-gray-100 px-4 py-2 bg-gray-50 flex justify-between">
431
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
432
+ <i class="fas fa-chart-line mr-1"></i> Stats
433
+ </button>
434
+ <button class="text-green-600 hover:text-green-800 text-sm font-medium">
435
+ <i class="fas fa-comment-alt mr-1"></i> Feedback
436
+ </button>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Aggiungere qui le altre 13 player-card con struttura simile -->
441
+ <!-- ... -->
442
  </div>
443
+
444
  </div>
445
 
446
  <!-- Drills Library -->
 
541
  </div>
542
  </main>
543
 
544
+ <!-- Stats Modal -->
545
+ <div id="statsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
546
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
547
+ <div class="p-6">
548
+ <div class="flex justify-between items-center mb-6">
549
+ <h3 class="text-2xl font-bold text-gray-800" id="playerName">Statistiche Giocatore</h3>
550
+ <button onclick="closeStatsModal()" class="text-gray-500 hover:text-gray-700">
551
+ <i class="fas fa-times text-2xl"></i>
552
+ </button>
553
+ </div>
554
+
555
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
556
+ <!-- Performance Metrics -->
557
+ <div class="bg-gray-50 p-4 rounded-lg">
558
+ <h4 class="text-lg font-semibold mb-4 text-gray-700">Metriche Performance</h4>
559
+ <div class="space-y-4">
560
+ <div>
561
+ <div class="flex justify-between mb-1">
562
+ <span class="text-sm font-medium text-gray-600">Velocità</span>
563
+ <span class="text-sm font-medium text-gray-600">85%</span>
564
+ </div>
565
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
566
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>
567
+ </div>
568
+ </div>
569
+ <div>
570
+ <div class="flex justify-between mb-1">
571
+ <span class="text-sm font-medium text-gray-600">Resistenza</span>
572
+ <span class="text-sm font-medium text-gray-600">78%</span>
573
+ </div>
574
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
575
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 78%"></div>
576
+ </div>
577
+ </div>
578
+ <div>
579
+ <div class="flex justify-between mb-1">
580
+ <span class="text-sm font-medium text-gray-600">Tecnica</span>
581
+ <span class="text-sm font-medium text-gray-600">92%</span>
582
+ </div>
583
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
584
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 92%"></div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Radar Chart -->
591
+ <div class="bg-gray-50 p-4 rounded-lg">
592
+ <h4 class="text-lg font-semibold mb-4 text-gray-700">Abilità Principali</h4>
593
+ <div class="flex justify-center">
594
+ <canvas id="radarChart" width="300" height="300"></canvas>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- Recent Matches -->
599
+ <div class="md:col-span-2 bg-gray-50 p-4 rounded-lg">
600
+ <h4 class="text-lg font-semibold mb-4 text-gray-700">Ultime Partite</h4>
601
+ <div class="overflow-x-auto">
602
+ <table class="min-w-full divide-y divide-gray-200">
603
+ <thead class="bg-gray-100">
604
+ <tr>
605
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
606
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avversario</th>
607
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Voto</th>
608
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Km</th>
609
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Goal</th>
610
+ </tr>
611
+ </thead>
612
+ <tbody class="bg-white divide-y divide-gray-200">
613
+ <tr>
614
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/23</td>
615
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FC Torino</td>
616
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.5</td>
617
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9.8</td>
618
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
619
+ </tr>
620
+ <tr>
621
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/23</td>
622
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AS Roma</td>
623
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6.8</td>
624
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10.2</td>
625
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
626
+ </tr>
627
+ <tr>
628
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/06/23</td>
629
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Juventus</td>
630
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.0</td>
631
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.5</td>
632
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
633
+ </tr>
634
+ </tbody>
635
+ </table>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+
643
  <!-- Footer -->
644
  <footer class="bg-gray-800 text-white py-6">
645
  <div class="container mx-auto px-4">
 
732
  // fetch('/api/session-data').then(...)
733
  });
734
 
735
+ // Player Stats Functions
736
+ function showPlayerStats(button) {
737
+ const playerCard = button.closest('.player-card');
738
+ const playerName = playerCard.querySelector('h3').textContent;
739
+ const playerPosition = playerCard.querySelector('p').textContent;
740
+
741
+ document.getElementById('playerName').textContent = `${playerName} - ${playerPosition}`;
742
+ document.getElementById('statsModal').classList.remove('hidden');
743
+
744
+ // Initialize chart if not already done
745
+ if (!window.playerRadarChart) {
746
+ initRadarChart();
747
+ }
748
+ }
749
+
750
+ function closeStatsModal() {
751
+ document.getElementById('statsModal').classList.add('hidden');
752
+ }
753
+
754
+ function initRadarChart() {
755
+ const ctx = document.getElementById('radarChart').getContext('2d');
756
+ window.playerRadarChart = new Chart(ctx, {
757
+ type: 'radar',
758
+ data: {
759
+ labels: ['Velocità', 'Tiro', 'Passaggio', 'Difesa', 'Fisico', 'Tecnica'],
760
+ datasets: [{
761
+ label: 'Abilità',
762
+ data: [85, 78, 92, 65, 88, 90],
763
+ backgroundColor: 'rgba(54, 162, 235, 0.2)',
764
+ borderColor: 'rgba(54, 162, 235, 1)',
765
+ borderWidth: 2,
766
+ pointBackgroundColor: 'rgba(54, 162, 235, 1)'
767
+ }]
768
+ },
769
+ options: {
770
+ scales: {
771
+ r: {
772
+ angleLines: {
773
+ display: true
774
+ },
775
+ suggestedMin: 0,
776
+ suggestedMax: 100
777
+ }
778
+ }
779
+ }
780
+ });
781
+ }
782
+
783
  // Animazione per le card dei giocatori
784
  const playerCards = document.querySelectorAll('.player-card');
785
  playerCards.forEach(card => {