Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dugout Dashboard - Softball Team Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); | |
| } | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .message-bubble { | |
| max-width: 70%; | |
| border-radius: 1rem; | |
| } | |
| .message-bubble.sent { | |
| background-color: #2563eb; | |
| color: white; | |
| margin-left: auto; | |
| border-bottom-right-radius: 0.25rem; | |
| } | |
| .message-bubble.received { | |
| background-color: #e5e7eb; | |
| color: #1f2937; | |
| margin-right: auto; | |
| border-bottom-left-radius: 0.25rem; | |
| } | |
| .stat-bar { | |
| height: 0.5rem; | |
| border-radius: 0.25rem; | |
| background-color: #e5e7eb; | |
| } | |
| .stat-fill { | |
| height: 100%; | |
| border-radius: 0.25rem; | |
| background-color: #2563eb; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .calendar-day { | |
| transition: all 0.2s ease; | |
| } | |
| .calendar-day:hover { | |
| background-color: #dbeafe; | |
| } | |
| .calendar-day.game-day { | |
| background-color: #bfdbfe; | |
| } | |
| .calendar-day.selected { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg 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-3"> | |
| <i class="fas fa-baseball-ball text-2xl"></i> | |
| <h1 class="text-2xl font-bold">Dugout Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="h-8 w-8 rounded-full border-2 border-white"> | |
| <span class="font-medium">Coach Mike</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto px-4 py-6"> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Sidebar --> | |
| <aside class="w-full lg:w-64 flex-shrink-0"> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-6"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800">Team Roster</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Pitcher</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Alex Rodriguez</p> | |
| <p class="text-xs text-gray-500">Shortstop</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Jamie Smith</p> | |
| <p class="text-xs text-gray-500">Catcher</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Chris Taylor</p> | |
| <p class="text-xs text-gray-500">Outfield</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 bg-blue-100 text-blue-600 py-2 rounded-lg font-medium hover:bg-blue-200 transition"> | |
| <i class="fas fa-plus mr-2"></i> Add Player | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800">Quick Stats</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Team Batting Avg</span> | |
| <span>.287</span> | |
| </div> | |
| <div class="stat-bar"> | |
| <div class="stat-fill" style="width: 28.7%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Win Percentage</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="stat-bar"> | |
| <div class="stat-fill" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Attendance Rate</span> | |
| <span>82%</span> | |
| </div> | |
| <div class="stat-bar"> | |
| <div class="stat-fill" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Panel --> | |
| <div class="flex-1"> | |
| <!-- Tabs Navigation --> | |
| <div class="bg-white rounded-lg shadow-md mb-6"> | |
| <div class="flex border-b"> | |
| <button onclick="switchTab('dashboard')" class="tab-button px-6 py-3 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-500 transition active"> | |
| <i class="fas fa-home mr-2"></i> Dashboard | |
| </button> | |
| <button onclick="switchTab('leaderboard')" class="tab-button px-6 py-3 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-500 transition"> | |
| <i class="fas fa-trophy mr-2"></i> Leaderboard | |
| </button> | |
| <button onclick="switchTab('stats')" class="tab-button px-6 py-3 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-500 transition"> | |
| <i class="fas fa-chart-bar mr-2"></i> Stats | |
| </button> | |
| <button onclick="switchTab('schedule')" class="tab-button px-6 py-3 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-500 transition"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Schedule | |
| </button> | |
| <button onclick="switchTab('messages')" class="tab-button px-6 py-3 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-500 transition"> | |
| <i class="fas fa-comments mr-2"></i> Messages | |
| <span class="ml-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div id="dashboard" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Upcoming Game Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Next Game</h3> | |
| <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">Tomorrow</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50" alt="Team Logo" class="h-12 w-12 mx-auto mb-1"> | |
| <p class="font-medium">Thunder</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-gray-800">VS</p> | |
| <p class="text-xs text-gray-500">7:30 PM</p> | |
| </div> | |
| <div class="text-center"> | |
| <img src="https://via.placeholder.com/50/cccccc" alt="Team Logo" class="h-12 w-12 mx-auto mb-1"> | |
| <p class="font-medium">Lightning</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Central Park</span> | |
| <span><i class="fas fa-users mr-1"></i> 8/12 confirmed</span> | |
| </div> | |
| </div> | |
| <!-- Team Performance Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Season Performance</h3> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <p class="text-3xl font-bold text-gray-800">8-4</p> | |
| <p class="text-sm text-gray-500">Win-Loss Record</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold text-gray-800">3</p> | |
| <p class="text-sm text-gray-500">Win Streak</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold text-gray-800">2nd</p> | |
| <p class="text-sm text-gray-500">Division Rank</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-full h-2 mb-2"> | |
| <div class="bg-green-500 rounded-full h-2" style="width: 66%"></div> | |
| </div> | |
| <p class="text-right text-sm text-gray-600">66% win rate</p> | |
| </div> | |
| <!-- Quick Actions Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-blue-50 text-blue-600 py-2 px-3 rounded-lg flex items-center justify-center hover:bg-blue-100 transition"> | |
| <i class="fas fa-calendar-plus mr-2"></i> Add Game | |
| </button> | |
| <button class="bg-green-50 text-green-600 py-2 px-3 rounded-lg flex items-center justify-center hover:bg-green-100 transition"> | |
| <i class="fas fa-user-plus mr-2"></i> Add Player | |
| </button> | |
| <button class="bg-purple-50 text-purple-600 py-2 px-3 rounded-lg flex items-center justify-center hover:bg-purple-100 transition"> | |
| <i class="fas fa-file-invoice-dollar mr-2"></i> Collect Dues | |
| </button> | |
| <button class="bg-yellow-50 text-yellow-600 py-2 px-3 rounded-lg flex items-center justify-center hover:bg-yellow-100 transition"> | |
| <i class="fas fa-bullhorn mr-2"></i> Announcement | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Alex Rodriguez</p> | |
| <p class="text-sm text-gray-600">Updated batting stats: now hitting .312</p> | |
| <p class="text-xs text-gray-400">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Jamie Smith</p> | |
| <p class="text-sm text-gray-600">Confirmed attendance for next game</p> | |
| <p class="text-xs text-gray-400">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <i class="fas fa-calendar text-blue-500 text-xl mt-1"></i> | |
| <div> | |
| <p class="font-medium">Schedule Update</p> | |
| <p class="text-sm text-gray-600">Game on June 15th has been rescheduled</p> | |
| <p class="text-xs text-gray-400">Yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Leaderboard Tab --> | |
| <div id="leaderboard" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Season Leaderboard</h3> | |
| <div class="flex space-x-2"> | |
| <select class="bg-gray-100 border-0 rounded-lg px-3 py-2 text-sm"> | |
| <option>All Stats</option> | |
| <option>Batting</option> | |
| <option>Pitching</option> | |
| <option>Fielding</option> | |
| </select> | |
| <select class="bg-gray-100 border-0 rounded-lg px-3 py-2 text-sm"> | |
| <option>Season 2023</option> | |
| <option>Season 2022</option> | |
| <option>Season 2021</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Player</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AVG</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HR</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RBI</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">R</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SB</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">Pitcher</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">.312</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">4</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">18</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">15</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Alex Rodriguez</div> | |
| <div class="text-sm text-gray-500">Shortstop</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">.298</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">16</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Jamie Smith</div> | |
| <div class="text-sm text-gray-500">Catcher</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">.287</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">14</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Chris Taylor</div> | |
| <div class="text-sm text-gray-500">Outfield</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">.275</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">11</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Top Performers Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Top Performers</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded">1st</span> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">.312 AVG</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded">2nd</span> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player" class="h-8 w-8 rounded-full"> | |
| <span class="font-medium">Alex Rodriguez</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">5 SB</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <span class="bg-amber-100 text-amber-800 text-xs font-medium px-2 py-0.5 rounded">3rd</span> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Player" class="h-8 w-8 rounded-full"> | |
| <span class="font-medium">Jamie Smith</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">14 RBI</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Awards Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Team Awards</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-trophy text-yellow-500 text-xl"></i> | |
| <div> | |
| <p class="font-medium">Player of the Month</p> | |
| <p class="text-sm text-gray-600">Sarah Johnson (June)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-medal text-blue-500 text-xl"></i> | |
| <div> | |
| <p class="font-medium">Gold Glove</p> | |
| <p class="text-sm text-gray-600">Alex Rodriguez</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-fire text-red-500 text-xl"></i> | |
| <div> | |
| <p class="font-medium">Hitting Streak</p> | |
| <p class="text-sm text-gray-600">Jamie Smith (8 games)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Tab --> | |
| <div id="stats" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Player Statistics</h3> | |
| <div class="flex space-x-3"> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Export | |
| </button> | |
| <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition"> | |
| <i class="fas fa-filter mr-2"></i> Filters | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm text-blue-600 font-medium">Team Batting Avg</p> | |
| <p class="text-2xl font-bold text-gray-800">.287</p> | |
| <p class="text-xs text-gray-500">+0.012 from last week</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <p class="text-sm text-green-600 font-medium">Team ERA</p> | |
| <p class="text-2xl font-bold text-gray-800">3.42</p> | |
| <p class="text-xs text-gray-500">-0.35 from last week</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <p class="text-sm text-purple-600 font-medium">Fielding %</p> | |
| <p class="text-2xl font-bold text-gray-800">.962</p> | |
| <p class="text-xs text-gray-500">+0.008 from last week</p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <p class="text-sm text-yellow-600 font-medium">Run Differential</p> | |
| <p class="text-2xl font-bold text-gray-800">+18</p> | |
| <p class="text-xs text-gray-500">+7 from last week</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="text-md font-semibold text-gray-800 mb-3">Batting Leaders</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Batting Average</p> | |
| <p class="text-xl font-bold text-gray-800">.312</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Leader</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full mr-2"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Home Runs</p> | |
| <p class="text-xl font-bold text-gray-800">4</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Leader</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full mr-2"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Runs Batted In</p> | |
| <p class="text-xl font-bold text-gray-800">18</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Leader</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full mr-2"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-semibold text-gray-800 mb-3">Pitching Leaders</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">ERA</p> | |
| <p class="text-xl font-bold text-gray-800">2.45</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Leader</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full mr-2"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Strikeouts</p> | |
| <p class="text-xl font-bold text-gray-800">32</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Leader</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full mr-2"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <p class="text-sm text-gray-500">Wins</p> | |
| <p class="text-xl font-bold text-gray-800">5</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Leader</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-8 w-8 rounded-full mr-2"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Schedule Tab --> | |
| <div id="schedule" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Game Schedule</h3> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> Add Game | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <h4 class="text-lg font-medium text-gray-800">June 2023</h4> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm font-medium hover:bg-gray-200 transition"> | |
| Today | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 mb-2"> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Sun</div> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Mon</div> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Tue</div> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Wed</div> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Thu</div> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Fri</div> | |
| <div class="text-center text-sm font-medium text-gray-500 py-2">Sat</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <div class="calendar-day text-center py-2 text-gray-400">28</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">29</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">30</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">31</div> | |
| <div class="calendar-day text-center py-2">1</div> | |
| <div class="calendar-day text-center py-2">2</div> | |
| <div class="calendar-day text-center py-2">3</div> | |
| <div class="calendar-day text-center py-2">4</div> | |
| <div class="calendar-day text-center py-2">5</div> | |
| <div class="calendar-day text-center py-2">6</div> | |
| <div class="calendar-day game-day text-center py-2"> | |
| 7 | |
| <div class="text-xs mt-1 text-blue-600">7:30 PM</div> | |
| </div> | |
| <div class="calendar-day text-center py-2">8</div> | |
| <div class="calendar-day text-center py-2">9</div> | |
| <div class="calendar-day text-center py-2">10</div> | |
| <div class="calendar-day text-center py-2">11</div> | |
| <div class="calendar-day game-day text-center py-2"> | |
| 12 | |
| <div class="text-xs mt-1 text-blue-600">6:00 PM</div> | |
| </div> | |
| <div class="calendar-day text-center py-2">13</div> | |
| <div class="calendar-day text-center py-2">14</div> | |
| <div class="calendar-day game-day text-center py-2"> | |
| 15 | |
| <div class="text-xs mt-1 text-blue-600">8:00 PM</div> | |
| </div> | |
| <div class="calendar-day text-center py-2">16</div> | |
| <div class="calendar-day text-center py-2">17</div> | |
| <div class="calendar-day text-center py-2">18</div> | |
| <div class="calendar-day text-center py-2">19</div> | |
| <div class="calendar-day game-day text-center py-2"> | |
| 20 | |
| <div class="text-xs mt-1 text-blue-600">7:30 PM</div> | |
| </div> | |
| <div class="calendar-day text-center py-2">21</div> | |
| <div class="calendar-day text-center py-2">22</div> | |
| <div class="calendar-day text-center py-2">23</div> | |
| <div class="calendar-day text-center py-2">24</div> | |
| <div class="calendar-day text-center py-2">25</div> | |
| <div class="calendar-day game-day text-center py-2"> | |
| 26 | |
| <div class="text-xs mt-1 text-blue-600">6:30 PM</div> | |
| </div> | |
| <div class="calendar-day text-center py-2">27</div> | |
| <div class="calendar-day text-center py-2">28</div> | |
| <div class="calendar-day text-center py-2">29</div> | |
| <div class="calendar-day text-center py-2">30</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">1</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">2</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">3</div> | |
| <div class="calendar-day text-center py-2 text-gray-400">4</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-semibold text-gray-800 mb-3">Upcoming Games</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium text-gray-500">JUN 7</p> | |
| <p class="text-xs text-gray-400">7:30 PM</p> | |
| </div> | |
| <div> | |
| <p class="font-medium">Thunder vs Lightning</p> | |
| <p class="text-sm text-gray-600">Central Park - Field 2</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">8/12 confirmed</span> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium text-gray-500">JUN 12</p> | |
| <p class="text-xs text-gray-400">6:00 PM</p> | |
| </div> | |
| <div> | |
| <p class="font-medium">Thunder vs Storm</p> | |
| <p class="text-sm text-gray-600">Riverside Park - Field 1</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">5/12 confirmed</span> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium text-gray-500">JUN 15</p> | |
| <p class="text-xs text-gray-400">8:00 PM</p> | |
| </div> | |
| <div> | |
| <p class="font-medium">Thunder vs Hurricanes</p> | |
| <p class="text-sm text-gray-600">Memorial Field</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">3/12 confirmed</span> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages Tab --> | |
| <div id="messages" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="flex flex-col h-[600px]"> | |
| <!-- Messages Header --> | |
| <div class="border-b p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="h-10 w-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Team Chat</p> | |
| <p class="text-xs text-gray-500">12 participants</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Body --> | |
| <div class="flex-1 p-4 overflow-y-auto bg-gray-50"> | |
| <div class="space-y-4"> | |
| <!-- Date Divider --> | |
| <div class="flex justify-center"> | |
| <span class="bg-gray-200 text-gray-600 text-xs px-2 py-1 rounded-full">Today</span> | |
| </div> | |
| <!-- Received Message --> | |
| <div class="flex space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player" class="h-8 w-8 rounded-full flex-shrink-0"> | |
| <div> | |
| <p class="text-xs font-medium text-gray-700 mb-1">Alex Rodriguez</p> | |
| <div class="message-bubble received p-3"> | |
| <p>Hey team, just confirming - we're meeting at the field at 6:30 tomorrow, right?</p> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">10:24 AM</p> | |
| </div> | |
| </div> | |
| <!-- Sent Message --> | |
| <div class="flex justify-end"> | |
| <div class="text-right"> | |
| <div class="message-bubble sent p-3"> | |
| <p>That's correct! Everyone please arrive by 6:30 for warmups.</p> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">10:26 AM <i class="fas fa-check ml-1 text-blue-300"></i></p> | |
| </div> | |
| </div> | |
| <!-- Received Message --> | |
| <div class="flex space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Player" class="h-8 w-8 rounded-full flex-shrink-0"> | |
| <div> | |
| <p class="text-xs font-medium text-gray-700 mb-1">Jamie Smith</p> | |
| <div class="message-bubble received p-3"> | |
| <p>I'll be there! Can someone bring an extra bat? Mine cracked during practice.</p> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">10:28 AM</p> | |
| </div> | |
| </div> | |
| <!-- Sent Message --> | |
| <div class="flex justify-end"> | |
| <div class="text-right"> | |
| <div class="message-bubble sent p-3"> | |
| <p>I've got an extra Easton you can use Jamie.</p> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">10:29 AM <i class="fas fa-check ml-1 text-blue-300"></i></p> | |
| </div> | |
| </div> | |
| <!-- Received Message --> | |
| <div class="flex space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player" class="h-8 w-8 rounded-full flex-shrink-0"> | |
| <div> | |
| <p class="text-xs font-medium text-gray-700 mb-1">Chris Taylor</p> | |
| <div class="message-bubble received p-3"> | |
| <p>I might be running a little late - kid's soccer game ends at 6. I'll hustle over asap!</p> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">10:31 AM</p> | |
| </div> | |
| </div> | |
| <!-- Date Divider --> | |
| <div class="flex justify-center mt-6"> | |
| <span class="bg-gray-200 text-gray-600 text-xs px-2 py-1 rounded-full">Yesterday</span> | |
| </div> | |
| <!-- Previous messages... --> | |
| </div> | |
| </div> | |
| <!-- Message Input --> | |
| <div class="border-t p-4 bg-white"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <input type="text" placeholder="Type a message..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <button class="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-100 rounded-full"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 border-t py-4"> | |
| <div class="container mx-auto px-4 text-center text-gray-600 text-sm"> | |
| <p>© 2023 Dugout Dashboard. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| function switchTab(tabId) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Remove active class from all tab buttons | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.classList.remove('active'); | |
| }); | |
| // Show the selected tab content | |
| document.getElementById(tabId).classList.add('active'); | |
| // Add active class to clicked tab button | |
| event.currentTarget.classList.add('active'); | |
| } | |
| // Calendar day selection | |
| document.querySelectorAll('.calendar-day').forEach(day => { | |
| day.addEventListener('click', function() { | |
| document.querySelectorAll('.calendar-day').forEach(d => { | |
| d.classList.remove('selected'); | |
| }); | |
| this.classList.add('selected'); | |
| }); | |
| }); | |
| // Sample data for charts (would be replaced with real data in production) | |
| const battingStats = { | |
| labels: ['Sarah', 'Alex', 'Jamie', 'Chris', 'Mike'], | |
| data: [0.312, 0.298, 0.287, 0.275, 0.260] | |
| }; | |
| // In a real app, you would fetch data from an API and render charts | |
| // This is just a placeholder for the demo | |
| console.log('Batting stats:', battingStats); | |
| </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=eddieor/softball-team-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |