Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>College Football Analytics Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .team-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .stat-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .conference-logo { | |
| width: 40px; | |
| height: 40px; | |
| object-fit: contain; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| padding: 8px; | |
| border-radius: 4px; | |
| pointer-events: none; | |
| font-size: 12px; | |
| z-index: 100; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-football-ball text-3xl"></i> | |
| <h1 class="text-3xl font-bold">CFB Analytics Hub</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search teams..." class="px-4 py-2 rounded-full bg-blue-900 bg-opacity-50 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-blue-200"></i> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg font-medium transition">Sign In</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Overview --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">2023 Season Overview</h2> | |
| <div class="flex space-x-2"> | |
| <select class="px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>2023 Season</option> | |
| <option>2022 Season</option> | |
| <option>2021 Season</option> | |
| </select> | |
| <select class="px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>All Conferences</option> | |
| <option>SEC</option> | |
| <option>Big Ten</option> | |
| <option>ACC</option> | |
| <option>Pac-12</option> | |
| <option>Big 12</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Total Games</p> | |
| <h3 class="text-3xl font-bold text-gray-800 mt-1">1,256</h3> | |
| <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up"></i> 8.2% from 2022</p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i class="fas fa-calendar-alt text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Total Yards</p> | |
| <h3 class="text-3xl font-bold text-gray-800 mt-1">1.2M</h3> | |
| <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up"></i> 5.7% from 2022</p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i class="fas fa-running text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Avg Points/Game</p> | |
| <h3 class="text-3xl font-bold text-gray-800 mt-1">28.4</h3> | |
| <p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down"></i> 1.3% from 2022</p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-lg"> | |
| <i class="fas fa-bolt text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Top Team</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-1">Georgia</h3> | |
| <p class="text-blue-500 text-sm mt-2">13-0, SEC Champions</p> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-lg"> | |
| <i class="fas fa-trophy text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-md mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Conference Performance Comparison</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">Offense</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Defense</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Special Teams</button> | |
| </div> | |
| </div> | |
| <div class="chart-container" style="height: 400px;"> | |
| <canvas id="conferenceComparisonChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Performance Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Team Performance</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">Top 25</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">All Teams</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">By Conference</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Top Teams Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Top 10 Teams by Win Percentage</h3> | |
| <div class="chart-container" style="height: 300px;"> | |
| <canvas id="topTeamsChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Offensive Leaders --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Offensive Leaders</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center"> | |
| <span class="text-red-600 font-bold">1</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">USC</p> | |
| <p class="text-sm text-gray-500">42.5 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 font-medium">+12.4%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-bold">2</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ohio State</p> | |
| <p class="text-sm text-gray-500">39.8 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 font-medium">+8.7%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <span class="text-yellow-600 font-bold">3</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Alabama</p> | |
| <p class="text-sm text-gray-500">38.2 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-red-500 font-medium">-2.1%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <span class="text-gray-600 font-bold">4</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Tennessee</p> | |
| <p class="text-sm text-gray-500">36.7 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 font-medium">+15.2%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Defensive Leaders --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Defensive Leaders</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center"> | |
| <span class="text-red-600 font-bold">1</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Georgia</p> | |
| <p class="text-sm text-gray-500">12.8 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 font-medium">+5.3%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-blue-600 font-bold">2</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Iowa</p> | |
| <p class="text-sm text-gray-500">14.2 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-red-500 font-medium">-1.8%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <span class="text-yellow-600 font-bold">3</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Michigan</p> | |
| <p class="text-sm text-gray-500">15.6 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-green-500 font-medium">+3.2%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <span class="text-gray-600 font-bold">4</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Clemson</p> | |
| <p class="text-sm text-gray-500">16.1 PPG</p> | |
| </div> | |
| </div> | |
| <span class="text-red-500 font-medium">-4.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Comparison Tool --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Team Comparison Tool</h3> | |
| <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 mb-6"> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Team 1</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Select a team</option> | |
| <option>Alabama</option> | |
| <option>Georgia</option> | |
| <option>Ohio State</option> | |
| <option>Michigan</option> | |
| <option>Clemson</option> | |
| <option>USC</option> | |
| <option>Texas</option> | |
| <option>Oklahoma</option> | |
| </select> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Team 2</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Select a team</option> | |
| <option>Alabama</option> | |
| <option>Georgia</option> | |
| <option>Ohio State</option> | |
| <option>Michigan</option> | |
| <option>Clemson</option> | |
| <option>USC</option> | |
| <option>Texas</option> | |
| <option>Oklahoma</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">Compare</button> | |
| </div> | |
| </div> | |
| <div class="chart-container" style="height: 300px;"> | |
| <canvas id="teamComparisonChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Player Spotlight --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Player Spotlight</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">Quarterbacks</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Running Backs</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Receivers</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Defense</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Player Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden team-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/600x200/1e40af/ffffff?text=Caleb+Williams" alt="Player" class="w-full h-40 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-20"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <h3 class="text-white text-xl font-bold">Caleb Williams</h3> | |
| <p class="text-blue-300 text-sm">USC • QB • #13</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Passing Yards</p> | |
| <p class="font-bold text-gray-800">4,537</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">TD/INT</p> | |
| <p class="font-bold text-gray-800">42/5</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">QBR</p> | |
| <p class="font-bold text-gray-800">91.7</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| <p class="text-gray-600 text-sm">Heisman Trophy Winner • Pac-12 OPOY</p> | |
| </div> | |
| </div> | |
| <!-- Player Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden team-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/600x200/9d174d/ffffff?text=Blake+Corum" alt="Player" class="w-full h-40 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-20"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <h3 class="text-white text-xl font-bold">Blake Corum</h3> | |
| <p class="text-purple-300 text-sm">Michigan • RB • #2</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Rushing Yards</p> | |
| <p class="font-bold text-gray-800">1,463</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Yards/Carry</p> | |
| <p class="font-bold text-gray-800">5.9</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">TDs</p> | |
| <p class="font-bold text-gray-800">18</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| <p class="text-gray-600 text-sm">Doak Walker Finalist • Big Ten OPOY</p> | |
| </div> | |
| </div> | |
| <!-- Player Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden team-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/600x200/1e40af/ffffff?text=Will+Anderson" alt="Player" class="w-full h-40 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-20"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <h3 class="text-white text-xl font-bold">Will Anderson Jr.</h3> | |
| <p class="text-blue-300 text-sm">Alabama • LB • #31</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Tackles</p> | |
| <p class="font-bold text-gray-800">51</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Sacks</p> | |
| <p class="font-bold text-gray-800">10</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">TFL</p> | |
| <p class="font-bold text-gray-800">17</p> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-2"> | |
| <div class="bg-red-600 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| <p class="text-gray-600 text-sm">Bronko Nagurski Winner • SEC DPOY</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Games --> | |
| <section> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Key Upcoming Matchups</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">This Week</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Next Week</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">Rivalry Week</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="grid grid-cols-1 divide-y divide-gray-200"> | |
| <!-- Game 1 --> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/9d174d/ffffff?text=M" class="w-12 h-12 mx-auto mb-1"> | |
| <p class="text-xs font-medium text-gray-700">#2 Michigan</p> | |
| <p class="text-xs text-gray-500">11-0</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium text-gray-700">vs</p> | |
| <p class="text-xs text-gray-500">Nov 25</p> | |
| </div> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/1e40af/ffffff?text=OSU" class="w-12 h-12 mx-auto mb-1"> | |
| <p class="text-xs font-medium text-gray-700">#3 Ohio State</p> | |
| <p class="text-xs text-gray-500">11-0</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-700">The Game</p> | |
| <p class="text-xs text-gray-500">Ohio Stadium • 12PM ET</p> | |
| <div class="mt-2"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs font-medium">FOX</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 2 --> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/1e40af/ffffff?text=UGA" class="w-12 h-12 mx-auto mb-1"> | |
| <p class="text-xs font-medium text-gray-700">#1 Georgia</p> | |
| <p class="text-xs text-gray-500">11-0</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium text-gray-700">vs</p> | |
| <p class="text-xs text-gray-500">Nov 25</p> | |
| </div> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/9d174d/ffffff?text=GT" class="w-12 h-12 mx-auto mb-1"> | |
| <p class="text-xs font-medium text-gray-700">Georgia Tech</p> | |
| <p class="text-xs text-gray-500">5-6</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-700">Clean, Old-Fashioned Hate</p> | |
| <p class="text-xs text-gray-500">Bobby Dodd Stadium • 7:30PM ET</p> | |
| <div class="mt-2"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs font-medium">ABC</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game 3 --> | |
| <div class="p-4 hover:bg-gray-50 transition"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/9d174d/ffffff?text=ORE" class="w-12 h-12 mx-auto mb-1"> | |
| <p class="text-xs font-medium text-gray-700">#6 Oregon</p> | |
| <p class="text-xs text-gray-500">9-2</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium text-gray-700">vs</p> | |
| <p class="text-xs text-gray-500">Nov 25</p> | |
| </div> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/1e40af/ffffff?text=OSU" class="w-12 h-12 mx-auto mb-1"> | |
| <p class="text-xs font-medium text-gray-700">#15 Oregon State</p> | |
| <p class="text-xs text-gray-500">8-3</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-700">Civil War</p> | |
| <p class="text-xs text-gray-500">Reser Stadium • 3:30PM ET</p> | |
| <div class="mt-2"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs font-medium">ESPN</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">CFB Analytics Hub</h3> | |
| <p class="text-gray-400 text-sm">The most comprehensive college football analytics platform, providing data-driven insights for fans, analysts, and teams.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Data Sources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">CFB Dataset</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">NCAA Statistics</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Sports Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Team Websites</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Features</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Team Analytics</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Player Comparisons</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Game Predictions</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Custom Reports</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Subscribe</h3> | |
| <p class="text-gray-400 text-sm mb-2">Get the latest CFB insights delivered to your inbox.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 transition text-sm">Join</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 CFB Analytics Hub. All rights reserved.</p> | |
| <div class="flex space-x-4"> | |
| <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-facebook"></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> | |
| </footer> | |
| <script> | |
| // Conference Comparison Chart | |
| const conferenceCtx = document.getElementById('conferenceComparisonChart').getContext('2d'); | |
| const conferenceChart = new Chart(conferenceCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['SEC', 'Big Ten', 'ACC', 'Pac-12', 'Big 12', 'American', 'Mountain West', 'MAC'], | |
| datasets: [ | |
| { | |
| label: 'Points Per Game', | |
| data: [32.1, 30.5, 28.7, 31.8, 33.4, 27.9, 26.5, 24.8], | |
| backgroundColor: '#1e40af', | |
| borderColor: '#1e3a8a', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Yards Per Game', | |
| data: [435, 412, 398, 427, 441, 387, 375, 362], | |
| backgroundColor: '#3b82f6', | |
| borderColor: '#2563eb', | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Top Teams Chart | |
| const topTeamsCtx = document.getElementById('topTeamsChart').getContext('2d'); | |
| const topTeamsChart = new Chart(topTeamsCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Georgia', 'Michigan', 'Ohio State', 'TCU', 'Alabama', 'Tennessee', 'Clemson', 'USC', 'Penn State', 'Washington'], | |
| datasets: [{ | |
| data: [13, 12, 11, 12, 10, 10, 11, 11, 10, 10], | |
| backgroundColor: [ | |
| '#9d174d', | |
| '#1e40af', | |
| '#1e40af', | |
| '#3b82f6', | |
| '#9d174d', | |
| '#9d174d', | |
| '#3b82f6', | |
| '#1e40af', | |
| '#1e40af', | |
| '#3b82f6' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `${context.label}: ${context.raw}-${13-context.raw} (${Math.round(context.raw/13*100)}%)`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Team Comparison Chart | |
| const teamComparisonCtx = document.getElementById('teamComparisonChart').getContext('2d'); | |
| const teamComparisonChart = new Chart(teamComparisonCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Offense', 'Defense', 'Special Teams', 'Turnover Margin', 'Red Zone Efficiency', '3rd Down Conversion'], | |
| datasets: [ | |
| { | |
| label: 'Georgia', | |
| data: [85, 95, 75, 90, 88, 82], | |
| backgroundColor: 'rgba(157, 23, 77, 0.2)', | |
| borderColor: 'rgba(157, 23, 77, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(157, 23, 77, 1)' | |
| }, | |
| { | |
| label: 'Ohio State', | |
| data: [95, 80, 70, 85, 92, 88], | |
| backgroundColor: 'rgba(30, 64, 175, 0.2)', | |
| borderColor: 'rgba(30, 64, 175, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(30, 64, 175, 1)' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 50, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Interactive elements | |
| document.querySelectorAll('.stat-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.classList.add('shadow-lg'); | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.classList.remove('shadow-lg'); | |
| }); | |
| }); | |
| // Tooltip functionality | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'tooltip'; | |
| document.body.appendChild(tooltip); | |
| document.querySelectorAll('[data-tooltip]').forEach(el => { | |
| el.addEventListener('mouseenter', function(e) { | |
| tooltip.innerHTML = this.getAttribute('data-tooltip'); | |
| tooltip.style.display = 'block'; | |
| tooltip.style.left = `${e.pageX + 10}px`; | |
| tooltip.style.top = `${e.pageY + 10}px`; | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| tooltip.style.display = 'none'; | |
| }); | |
| el.addEventListener('mousemove', function(e) { | |
| tooltip.style.left = `${e.pageX + 10}px`; | |
| tooltip.style.top = `${e.pageY + 10}px`; | |
| }); | |
| }); | |
| </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=JKemm01/cfb-analytics-app" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |