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>Training Data Filters</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="filter" class="w-8 h-8 mr-3"></i>28 <h1 class="text-2xl font-bold">Data Filters</h1>29 </div>30 <nav class="hidden md:flex space-x-8">31 <a href="index.html" class="text-white hover:text-gray-200 font-medium">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 font-medium border-b-2">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 <div class="grid grid-cols-1 gap-8">45 <!-- Filter Controls -->46 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">47 <h2 class="text-xl font-bold mb-4 flex items-center">48 <i data-feather="sliders" class="mr-2"></i>49 Filter Controls50 </h2>51 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">52 <!-- Session Type Filter -->53 <div>54 <label class="block text-sm font-medium text-gray-700 mb-2">Session Type</label>55 <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">56 <option value="all">All Sessions</option>57 <option value="indoor">Indoor Sessions</option>58 <option value="outdoor">Outdoor Sessions</option>59 <option value="match">Matches</option>60 <option value="rest">Rest Days</option>61 </select>62 </div>63 64 <!-- Date Range Filter -->65 <div>66 <label class="block text-sm font-medium text-gray-700 mb-2">Date Range</label>67 <div class="flex space-x-2">68 <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">69 <span class="flex items-center">to</span>70 <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">71 </div>72 </div>73 74 <!-- HR Volume Range -->75 <div>76 <label class="block text-sm font-medium text-gray-700 mb-2">HR Volume Range</label>77 <div class="flex space-x-2 items-center">78 <input type="number" placeholder="Min" class="w-1/2 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">79 <span>-</span>80 <input type="number" placeholder="Max" class="w-1/2 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">81 </div>82 </div>83 84 <!-- Playerload Range -->85 <div>86 <label class="block text-sm font-medium text-gray-700 mb-2">Playerload Range</label>87 <div class="flex space-x-2 items-center">88 <input type="number" placeholder="Min" class="w-1/2 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">89 <span>-</span>90 <input type="number" placeholder="Max" class="w-1/2 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">91 </div>92 </div>93 94 <!-- Intensity Filter -->95 <div>96 <label class="block text-sm font-medium text-gray-700 mb-2">Intensity</label>97 <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">98 <option value="all">All Intensities</option>99 <option value="low">Low</option>100 <option value="medium">Medium</option>101 <option value="high">High</option>102 </select>103 </div>104 105 <!-- Apply Button -->106 <div class="flex items-end">107 <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">108 Apply Filters109 </button>110 </div>111 </div>112 </div>113 114 <!-- Filter Results -->115 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">116 <h2 class="text-xl font-bold mb-4 flex items-center">117 <i data-feather="list" class="mr-2"></i>118 Filtered Results119 </h2>120 <div class="overflow-x-auto">121 <table class="min-w-full divide-y divide-gray-200">122 <thead class="bg-gray-50">123 <tr>124 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Session</th>125 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>126 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HR Volume</th>127 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Playerload</th>128 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>129 </tr>130 </thead>131 <tbody class="bg-white divide-y divide-gray-200">132 <tr>133 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Indoor_30-15</td>134 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Indoor</td>135 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">49.93</td>136 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">493.99</td>137 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-01</td>138 </tr>139 <tr>140 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Intensive</td>141 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Outdoor</td>142 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">74.23</td>143 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">740.10</td>144 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-10</td>145 </tr>146 <tr>147 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Training_match</td>148 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Match</td>149 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">68.47</td>150 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">657.47</td>151 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-20</td>152 </tr>153 </tbody>154 </table>155 </div>156 </div>157 </div>158 </main>159 </div>160 161 <script>162 document.addEventListener('DOMContentLoaded', function() {163 feather.replace();164 });165 </script>166</body>167</html>