Menanto/statssprint-visualizer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Sports Data Visualization</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 .gradient-bg {12 background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);13 }14 .card-hover:hover {15 transform: translateY(-5px);16 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);17 }18 </style>19</head>20<body class="bg-gray-50 font-sans">21 <div class="min-h-screen">22 <!-- Header -->23 <header class="gradient-bg text-white shadow-lg">24 <div class="container mx-auto px-6 py-8">25 <div class="flex items-center justify-between">26 <div class="flex items-center">27 <i data-feather="activity" class="w-8 h-8 mr-3"></i>28 <h1 class="text-2xl font-bold">Sports Performance Dashboard</h1>29 </div>30 <nav class="hidden md:flex space-x-8">31 <a href="index.html" class="text-white font-medium border-b-2">Dashboard</a>32 <a href="visualization.html" class="text-white hover:text-gray-200 font-medium">Visualizations</a>33 <a href="filters.html" class="text-white hover:text-gray-200 font-medium">Filters</a>34</nav>35<button class="md:hidden text-white">36 <i data-feather="menu"></i>37 </button>38 </div>39 </div>40 </header>41 42 <!-- Main Content -->43 <main class="container mx-auto px-6 py-8">44 <!-- Stats Cards -->45 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">46 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">47 <div class="flex items-center">48 <div class="p-3 rounded-lg bg-indigo-100 text-indigo-600 mr-4">49 <i data-feather="trending-up"></i>50 </div>51 <div>52 <p class="text-gray-500">Total HR Volume</p>53 <h3 class="text-2xl font-bold">1,284.58</h3>54 </div>55 </div>56 </div>57 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">58 <div class="flex items-center">59 <div class="p-3 rounded-lg bg-purple-100 text-purple-600 mr-4">60 <i data-feather="bar-chart-2"></i>61 </div>62 <div>63 <p class="text-gray-500">Total Playerload</p>64 <h3 class="text-2xl font-bold">23,456.78</h3>65 </div>66 </div>67 </div>68 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">69 <div class="flex items-center">70 <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4">71 <i data-feather="calendar"></i>72 </div>73 <div>74 <p class="text-gray-500">Training Sessions</p>75 <h3 class="text-2xl font-bold">42</h3>76 </div>77 </div>78 </div>79 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">80 <div class="flex items-center">81 <div class="p-3 rounded-lg bg-green-100 text-green-600 mr-4">82 <i data-feather="clock"></i>83 </div>84 <div>85 <p class="text-gray-500">Rest Days</p>86 <h3 class="text-2xl font-bold">15</h3>87 </div>88 </div>89 </div>90</body>91</html>