Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FutTrack - Player Analytics</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> | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .position-badge { | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-weight: bold; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-4xl font-bold text-indigo-800"> | |
| <span class="text-indigo-600">Fut</span>Track | |
| </h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Player | |
| </button> | |
| <div class="relative"> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300"> | |
| <i class="fas fa-moon text-gray-700"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search and Filters --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="relative flex-grow"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input type="text" id="search-input" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Search players..."> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <select id="position-filter" class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">All Positions</option> | |
| <option value="GK">Goalkeeper</option> | |
| <option value="DEF">Defender</option> | |
| <option value="MID">Midfielder</option> | |
| <option value="FWD">Forward</option> | |
| </select> | |
| <select id="rating-filter" class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">All Ratings</option> | |
| <option value="90+">90+</option> | |
| <option value="85-89">85-89</option> | |
| <option value="80-84">80-84</option> | |
| <option value="75-79">75-79</option> | |
| <option value="<75"><75</option> | |
| </select> | |
| <select id="league-filter" class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">All Leagues</option> | |
| <option value="Premier League">Premier League</option> | |
| <option value="La Liga">La Liga</option> | |
| <option value="Bundesliga">Bundesliga</option> | |
| <option value="Serie A">Serie A</option> | |
| <option value="Ligue 1">Ligue 1</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-indigo-500"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500">Total Players</p> | |
| <h3 class="text-2xl font-bold" id="total-players">50</h3> | |
| </div> | |
| <div class="bg-indigo-100 p-3 rounded-full"> | |
| <i class="fas fa-users text-indigo-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-green-500"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500">Avg Rating</p> | |
| <h3 class="text-2xl font-bold" id="avg-rating">83.7</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-star text-green-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500">Top League</p> | |
| <h3 class="text-2xl font-bold" id="top-league">Premier League</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-trophy text-blue-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500">Most Common Nation</p> | |
| <h3 class="text-2xl font-bold" id="top-nation">France</h3> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-flag text-purple-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Players Grid --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Player Database</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">Sort by:</span> | |
| <select id="sort-by" class="bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 rounded-lg text-sm focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="rating-desc">Rating (High to Low)</option> | |
| <option value="rating-asc">Rating (Low to High)</option> | |
| <option value="name-asc">Name (A-Z)</option> | |
| <option value="name-desc">Name (Z-A)</option> | |
| <option value="price-desc">Price (High to Low)</option> | |
| <option value="price-asc">Price (Low to High)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="players-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Player cards will be inserted here by JavaScript --> | |
| </div> | |
| <div id="no-results" class="hidden text-center py-12"> | |
| <i class="fas fa-search fa-3x text-gray-300 mb-4"></i> | |
| <h3 class="text-xl font-medium text-gray-500">No players found</h3> | |
| <p class="text-gray-400">Try adjusting your search or filters</p> | |
| </div> | |
| </div> | |
| <!-- Price Trends Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Price Trends</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-sm">7 Days</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">30 Days</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">All Time</button> | |
| </div> | |
| </div> | |
| <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-400">Price trend chart will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Modal (hidden by default) --> | |
| <div id="player-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h2 id="modal-player-name" class="text-2xl font-bold">Player Name</h2> | |
| <div class="flex items-center space-x-2 mt-1"> | |
| <span id="modal-player-position" class="position-badge bg-gray-100 text-gray-800">POS</span> | |
| <span id="modal-player-rating" class="text-lg font-semibold">85</span> | |
| <span id="modal-player-nation" class="text-sm text-gray-500">Nation</span> | |
| <span id="modal-player-club" class="text-sm text-gray-500">Club</span> | |
| </div> | |
| </div> | |
| <button id="close-modal" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2">Attributes</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Pace</span> | |
| <span id="modal-pace" class="font-medium">85</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="modal-pace-bar" class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Shooting</span> | |
| <span id="modal-shooting" class="font-medium">80</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="modal-shooting-bar" class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Passing</span> | |
| <span id="modal-passing" class="font-medium">88</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="modal-passing-bar" class="bg-blue-500 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Dribbling</span> | |
| <span id="modal-dribbling" class="font-medium">90</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="modal-dribbling-bar" class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Defending</span> | |
| <span id="modal-defending" class="font-medium">75</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="modal-defending-bar" class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Physical</span> | |
| <span id="modal-physical" class="font-medium">82</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="modal-physical-bar" class="bg-blue-500 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2">Market Info</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Current Price</p> | |
| <p id="modal-price" class="text-xl font-bold">250,000</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Price Change (7d)</p> | |
| <p id="modal-price-change" class="text-green-500 font-medium">+5%</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Price Range</p> | |
| <p id="modal-price-range" class="font-medium">200K - 300K</p> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Last Updated</p> | |
| <p id="modal-updated" class="font-medium">Today, 12:45 PM</p> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-bell mr-2"></i> Set Price Alert | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2">Price History</h3> | |
| <div class="h-40 bg-gray-50 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-400">Price history chart will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample player data (50 players) | |
| const players = [ | |
| { id: 1, name: "Kylian Mbappé", position: "FWD", rating: 91, nation: "France", club: "Paris SG", league: "Ligue 1", price: 1200000, pace: 97, shooting: 89, passing: 80, dribbling: 92, defending: 36, physical: 76, image: "https://cdn.futbin.com/fut23/faces/231747.png" }, | |
| { id: 2, name: "Kevin De Bruyne", position: "MID", rating: 91, nation: "Belgium", club: "Man City", league: "Premier League", price: 950000, pace: 76, shooting: 86, passing: 93, dribbling: 88, defending: 64, physical: 78, image: "https://cdn.futbin.com/fut23/faces/192505.png" }, | |
| { id: 3, name: "Virgil van Dijk", position: "DEF", rating: 90, nation: "Netherlands", club: "Liverpool", league: "Premier League", price: 850000, pace: 76, shooting: 60, passing: 72, dribbling: 72, defending: 91, physical: 86, image: "https://cdn.futbin.com/fut23/faces/203376.png" }, | |
| { id: 4, name: "Robert Lewandowski", position: "FWD", rating: 91, nation: "Poland", club: "Barcelona", league: "La Liga", price: 880000, pace: 78, shooting: 92, passing: 79, dribbling: 86, defending: 44, physical: 82, image: "https://cdn.futbin.com/fut23/faces/188545.png" }, | |
| { id: 5, name: "Karim Benzema", position: "FWD", rating: 91, nation: "France", club: "Real Madrid", league: "La Liga", price: 920000, pace: 78, shooting: 88, passing: 83, dribbling: 87, defending: 39, physical: 77, image: "https://cdn.futbin.com/fut23/faces/165153.png" }, | |
| { id: 6, name: "Mohamed Salah", position: "FWD", rating: 90, nation: "Egypt", club: "Liverpool", league: "Premier League", price: 820000, pace: 90, shooting: 87, passing: 81, dribbling: 90, defending: 45, physical: 75, image: "https://cdn.futbin.com/fut23/faces/209331.png" }, | |
| { id: 7, name: "Thibaut Courtois", position: "GK", rating: 90, nation: "Belgium", club: "Real Madrid", league: "La Liga", price: 450000, pace: 52, shooting: 22, passing: 65, dribbling: 74, defending: 14, physical: 85, image: "https://cdn.futbin.com/fut23/faces/192119.png" }, | |
| { id: 8, name: "Erling Haaland", position: "FWD", rating: 88, nation: "Norway", club: "Man City", league: "Premier League", price: 980000, pace: 89, shooting: 91, passing: 65, dribbling: 80, defending: 44, physical: 88, image: "https://cdn.futbin.com/fut23/faces/239085.png" }, | |
| { id: 9, name: "Sadio Mané", position: "FWD", rating: 89, nation: "Senegal", club: "Bayern Munich", league: "Bundesliga", price: 680000, pace: 90, shooting: 84, passing: 80, dribbling: 89, defending: 44, physical: 76, image: "https://cdn.futbin.com/fut23/faces/188567.png" }, | |
| { id: 10, name: "Joshua Kimmich", position: "MID", rating: 89, nation: "Germany", club: "Bayern Munich", league: "Bundesliga", price: 550000, pace: 70, shooting: 76, passing: 89, dribbling: 85, defending: 82, physical: 77, image: "https://cdn.futbin.com/fut23/faces/212622.png" }, | |
| { id: 11, name: "Neymar Jr", position: "FWD", rating: 89, nation: "Brazil", club: "Paris SG", league: "Ligue 1", price: 750000, pace: 91, shooting: 83, passing: 86, dribbling: 94, defending: 37, physical: 63, image: "https://cdn.futbin.com/fut23/faces/190871.png" }, | |
| { id: 12, name: "Lionel Messi", position: "FWD", rating: 91, nation: "Argentina", club: "Paris SG", league: "Ligue 1", price: 850000, pace: 81, shooting: 89, passing: 90, dribbling: 94, defending: 34, physical: 65, image: "https://cdn.futbin.com/fut23/faces/158023.png" }, | |
| { id: 13, name: "Cristiano Ronaldo", position: "FWD", rating: 88, nation: "Portugal", club: "Man United", league: "Premier League", price: 780000, pace: 87, shooting: 92, passing: 80, dribbling: 85, defending: 34, physical: 75, image: "https://cdn.futbin.com/fut23/faces/20801.png" }, | |
| { id: 14, name: "Rúben Dias", position: "DEF", rating: 88, nation: "Portugal", club: "Man City", league: "Premier League", price: 420000, pace: 68, shooting: 52, passing: 72, dribbling: 70, defending: 89, physical: 82, image: "https://cdn.futbin.com/fut23/faces/240914.png" }, | |
| { id: 15, name: "Jan Oblak", position: "GK", rating: 89, nation: "Slovenia", club: "Atlético Madrid", league: "La Liga", price: 380000, pace: 54, shooting: 23, passing: 62, dribbling: 72, defending: 13, physical: 84, image: "https://cdn.futbin.com/fut23/faces/200389.png" }, | |
| { id: 16, name: "Toni Kroos", position: "MID", rating: 88, nation: "Germany", club: "Real Madrid", league: "La Liga", price: 320000, pace: 58, shooting: 79, passing: 90, dribbling: 82, defending: 72, physical: 68, image: "https://cdn.futbin.com/fut23/faces/182521.png" }, | |
| { id: 17, name: "Marc-André ter Stegen", position: "GK", rating: 88, nation: "Germany", club: "Barcelona", league: "La Liga", price: 350000, pace: 56, shooting: 24, passing: 67, dribbling: 75, defending: 12, physical: 82, image: "https://cdn.futbin.com/fut23/faces/192448.png" }, | |
| { id: 18, name: "Casemiro", position: "MID", rating: 89, nation: "Brazil", club: "Man United", league: "Premier League", price: 480000, pace: 65, shooting: 76, passing: 80, dribbling: 76, defending: 87, physical: 85, image: "https://cdn.futbin.com/fut23/faces/200145.png" }, | |
| { id: 19, name: "Harry Kane", position: "FWD", rating: 89, nation: "England", club: "Tottenham", league: "Premier League", price: 520000, pace: 70, shooting: 91, passing: 83, dribbling: 81, defending: 47, physical: 83, image: "https://cdn.futbin.com/fut23/faces/202126.png" }, | |
| { id: 20, name: "Ederson", position: "GK", rating: 89, nation: "Brazil", club: "Man City", league: "Premier League", price: 360000, pace: 58, shooting: 25, passing: 85, dribbling: 80, defending: 13, physical: 80, image: "https://cdn.futbin.com/fut23/faces/212191.png" }, | |
| { id: 21, name: "Son Heung-min", position: "FWD", rating: 89, nation: "Korea Republic", club: "Tottenham", league: "Premier League", price: 580000, pace: 89, shooting: 87, passing: 80, dribbling: 87, defending: 45, physical: 70, image: "https://cdn.futbin.com/fut23/faces/202695.png" }, | |
| { id: 22, name: "Alisson", position: "GK", rating: 89, nation: "Brazil", club: "Liverpool", league: "Premier League", price: 370000, pace: 57, shooting: 24, passing: 82, dribbling: 78, defending: 14, physical: 81, image: "https://cdn.futbin.com/fut23/faces/210257.png" }, | |
| { id: 23, name: "Bernardo Silva", position: "MID", rating: 88, nation: "Portugal", club: "Man City", league: "Premier League", price: 450000, pace: 78, shooting: 76, passing: 86, dribbling: 90, defending: 66, physical: 68, image: "https://cdn.futbin.com/fut23/faces/218667.png" }, | |
| { id: 24, name: "João Cancelo", position: "DEF", rating: 88, nation: "Portugal", club: "Man City", league: "Premier League", price: 520000, pace: 83, shooting: 75, passing: 84, dribbling: 86, defending: 82, physical: 76, image: "https://cdn.futbin.com/fut23/faces/238794.png" }, | |
| { id: 25, name: "Marquinhos", position: "DEF", rating: 88, nation: "Brazil", club: "Paris SG", league: "Ligue 1", price: 450000, pace: 78, shooting: 58, passing: 78, dribbling: 77, defending: 87, physical: 80, image: "https://cdn.futbin.com/fut23/faces/215914.png" }, | |
| { id: 26, name: "Rodri", position: "MID", rating: 88, nation: "Spain", club: "Man City", league: "Premier League", price: 380000, pace: 65, shooting: 76, passing: 85, dribbling: 80, defending: 84, physical: 83, image: "https://cdn.futbin.com/fut23/faces/234896.png" }, | |
| { id: 27, name: "Luka Modrić", position: "MID", rating: 88, nation: "Croatia", club: "Real Madrid", league: "La Liga", price: 350000, pace: 70, shooting: 76, passing: 89, dribbling: 89, defending: 72, physical: 66, image: "https://cdn.futbin.com/fut23/faces/177003.png" }, | |
| { id: 28, name: "Achraf Hakimi", position: "DEF", rating: 85, nation: "Morocco", club: "Paris SG", league: "Ligue 1", price: 320000, pace: 94, shooting: 69, passing: 76, dribbling: 84, defending: 76, physical: 75, image: "https://cdn.futbin.com/fut23/faces/235914.png" }, | |
| { id: 29, name: "Frenkie de Jong", position: "MID", rating: 87, nation: "Netherlands", club: "Barcelona", league: "La Liga", price: 380000, pace: 78, shooting: 72, passing: 85, dribbling: 88, defending: 78, physical: 78, image: "https://cdn.futbin.com/fut23/faces/228702.png" }, | |
| { id: 30, name: "Raheem Sterling", position: "FWD", rating: 86, nation: "England", club: "Chelsea", league: "Premier League", price: 280000, pace: 89, shooting: 79, passing: 75, dribbling: 86, defending: 45, physical: 68, image: "https://cdn.futbin.com/fut23/faces/202652.png" }, | |
| { id: 31, name: "Jadon Sancho", position: "FWD", rating: 85, nation: "England", club: "Man United", league: "Premier League", price: 220000, pace: 87, shooting: 75, passing: 80, dribbling: 88, defending: 45, physical: 65, image: "https://cdn.futbin.com/fut23/faces/231443.png" }, | |
| { id: 32, name: "Kai Havertz", position: "FWD", rating: 84, nation: "Germany", club: "Chelsea", league: "Premier League", price: 180000, pace: 78, shooting: 79, passing: 80, dribbling: 84, defending: 52, physical: 72, image: "https://cdn.futbin.com/fut23/faces/231443.png" }, | |
| { id: 33, name: "Phil Foden", position: "MID", rating: 85, nation: "England", club: "Man City", league: "Premier League", price: 250000, pace: 82, shooting: 78, passing: 82, dribbling: 87, defending: 52, physical: 68, image: "https://cdn.futbin.com/fut23/faces/243165.png" }, | |
| { id: 34, name: "Jules Koundé", position: "DEF", rating: 84, nation: "France", club: "Barcelona", league: "La Liga", price: 190000, pace: 85, shooting: 52, passing: 75, dribbling: 78, defending: 83, physical: 75, image: "https://cdn.futbin.com/fut23/faces/241476.png" }, | |
| { id: 35, name: "Declan Rice", position: "MID", rating: 84, nation: "England", club: "West Ham", league: "Premier League", price: 150000, pace: 70, shooting: 72, passing: 80, dribbling: 78, defending: 82, physical: 83, image: "https://cdn.futbin.com/fut23/faces/233041.png" }, | |
| { id: 36, name: "Jack Grealish", position: "FWD", rating: 84, nation: "England", club: "Man City", league: "Premier League", price: 170000, pace: 78, shooting: 75, passing: 82, dribbling: 87, defending: 45, physical: 72, image: "https://cdn.futbin.com/fut23/faces/212622.png" }, | |
| { id: 37, name: "Rafael Leão", position: "FWD", rating: 84, nation: "Portugal", club: "Milan", league: "Serie A", price: 220000, pace: 94, shooting: 78, passing: 72, dribbling: 85, defending: 42, physical: 75, image: "https://cdn.futbin.com/fut23/faces/242748.png" }, | |
| { id: 38, name: "Ronald Araújo", position: "DEF", rating: 84, nation: "Uruguay", club: "Barcelona", league: "La Liga", price: 180000, pace: 82, shooting: 52, passing: 68, dribbling: 70, defending: 84, physical: 83, image: "https://cdn.futbin.com/fut23/faces/242748.png" }, | |
| { id: 39, name: "Mikel Oyarzabal", position: "FWD", rating: 83, nation: "Spain", club: "Real Sociedad", league: "La Liga", price: 120000, pace: 75, shooting: 80, passing: 78, dribbling: 82, defending: 52, physical: 70, image: "https://cdn.futbin.com/fut23/faces/234896.png" }, | |
| { id: 40, name: "Nicolò Barella", position: "MID", rating: 86, nation: "Italy", club: "Inter", league: "Serie A", price: 280000, pace: 78, shooting: 75, passing: 84, dribbling: 84, defending: 75, physical: 75, image: "https://cdn.futbin.com/fut23/faces/231443.png" }, | |
| { id: 41, name: "Theo Hernández", position: "DEF", rating: 85, nation: "France", club: "Milan", league: "Serie A", price: 250000, pace: 92, shooting: 75, passing: 75, dribbling: 84, defending: 78, physical: 80, image: "https://cdn.futbin.com/fut23/faces/235914.png" }, | |
| { id: 42, name: "Lautaro Martínez", position: "FWD", rating: 85, nation: "Argentina", club: "Inter", league: "Serie A", price: 260000, pace: 82, shooting: 84, passing: 72, dribbling: 82, defending: 45, physical: 78, image: "https://cdn.futbin.com/fut23/faces/231443.png" }, | |
| { id: 43, name: "Serge Gnabry", position: "FWD", rating: 84, nation: "Germany", club: "Bayern Munich", league: "Bundesliga", price: 180000, pace: 85, shooting: 80, passing: 78, dribbling: 85, defending: 52, physical: 72, image: "https://cdn.futbin.com/fut23/faces/212622.png" }, | |
| { id: 44, name: "Dayot Upamecano", position: "DEF", rating: 83, nation: "France", club: "Bayern Munich", league: "Bundesliga", price: 150000, pace: 82, shooting: 52, passing: 72, dribbling: 75, defending: 82, physical: 82, image: "https://cdn.futbin.com/fut23/faces/235914.png" }, | |
| { id: 45, name: "Christopher Nkunku", position: "FWD", rating: 86, nation: "France", club: "RB Leipzig", league: "Bundesliga", price: 300000, pace: 85, shooting: 84, passing: 82, dribbling: 87, defending: 52, physical: 72, image: "https://cdn.futbin.com/fut23/faces/242748.png" }, | |
| { id: 46, name: "Jude Bellingham", position: "MID", rating: 84, nation: "England", club: "Borussia Dortmund", league: "Bundesliga", price: 220000, pace: 75, shooting: 75, passing: 80, dribbling: 84, defending: 78, physical: 80, image: "https://cdn.futbin.com/fut23/faces/243165.png" }, | |
| { id: 47, name: "Victor Osimhen", position: "FWD", rating: 83, nation: "Nigeria", club: "Napoli", league: "Serie A", price: 190000, pace: 89, shooting: 80, passing: 62, dribbling: 78, defending: 42, physical: 83, image: "https://cdn.futbin.com/fut23/faces/242748.png" }, | |
| { id: 48, name: "Khvicha Kvaratskhelia", position: "FWD", rating: 82, nation: "Georgia", club: "Napoli", league: "Serie A", price: 150000, pace: 85, shooting: 75, passing: 78, dribbling: 87, defending: 45, physical: 68, image: "https://cdn.futbin.com/fut23/faces/242748.png" }, | |
| { id: 49, name: "Mike Maignan", position: "GK", rating: 85, nation: "France", club: "Milan", league: "Serie A", price: 180000, pace: 58, shooting: 22, passing: 72, dribbling: 78, defending: 14, physical: 82, image: "https://cdn.futbin.com/fut23/faces/235914.png" }, | |
| { id: 50, name: "Alessandro Bastoni", position: "DEF", rating: 83, nation: "Italy", club: "Inter", league: "Serie A", price: 140000, pace: 78, shooting: 52, passing: 75, dribbling: 72, defending: 82, physical: 78, image: "https://cdn.futbin.com/fut23/faces/242748.png" } | |
| ]; | |
| // DOM elements | |
| const playersContainer = document.getElementById('players-container'); | |
| const searchInput = document.getElementById('search-input'); | |
| const positionFilter = document.getElementById('position-filter'); | |
| const ratingFilter = document.getElementById('rating-filter'); | |
| const leagueFilter = document.getElementById('league-filter'); | |
| const sortBy = document.getElementById('sort-by'); | |
| const noResults = document.getElementById('no-results'); | |
| const playerModal = document.getElementById('player-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| // Display all players initially | |
| displayPlayers(players); | |
| // Event listeners | |
| searchInput.addEventListener('input', filterPlayers); | |
| positionFilter.addEventListener('change', filterPlayers); | |
| ratingFilter.addEventListener('change', filterPlayers); | |
| leagueFilter.addEventListener('change', filterPlayers); | |
| sortBy.addEventListener('change', filterPlayers); | |
| closeModal.addEventListener('click', () => playerModal.classList.add('hidden')); | |
| themeToggle.addEventListener('click', toggleTheme); | |
| // Filter and display players based on search and filters | |
| function filterPlayers() { | |
| const searchTerm = searchInput.value.toLowerCase(); | |
| const positionValue = positionFilter.value; | |
| const ratingValue = ratingFilter.value; | |
| const leagueValue = leagueFilter.value; | |
| const sortValue = sortBy.value; | |
| let filteredPlayers = players.filter(player => { | |
| const matchesSearch = player.name.toLowerCase().includes(searchTerm); | |
| const matchesPosition = positionValue === '' || player.position === positionValue; | |
| let matchesRating = true; | |
| if (ratingValue === '90+') { | |
| matchesRating = player.rating >= 90; | |
| } else if (ratingValue === '85-89') { | |
| matchesRating = player.rating >= 85 && player.rating <= 89; | |
| } else if (ratingValue === '80-84') { | |
| matchesRating = player.rating >= 80 && player.rating <= 84; | |
| } else if (ratingValue === '75-79') { | |
| matchesRating = player.rating >= 75 && player.rating <= 79; | |
| } else if (ratingValue === '<75') { | |
| matchesRating = player.rating < 75; | |
| } | |
| const matchesLeague = leagueValue === '' || player.league === leagueValue; | |
| return matchesSearch && matchesPosition && matchesRating && matchesLeague; | |
| }); | |
| // Sort players | |
| if (sortValue === 'rating-desc') { | |
| filteredPlayers.sort((a, b) => b.rating - a.rating); | |
| } else if (sortValue === 'rating-asc') { | |
| filteredPlayers.sort((a, b) => a.rating - b.rating); | |
| } else if (sortValue === 'name-asc') { | |
| filteredPlayers.sort((a, b) => a.name.localeCompare(b.name)); | |
| } else if (sortValue === 'name-desc') { | |
| filteredPlayers.sort((a, b) => b.name.localeCompare(a.name)); | |
| } else if (sortValue === 'price-desc') { | |
| filteredPlayers.sort((a, b) => b.price - a.price); | |
| } else if (sortValue === 'price-asc') { | |
| filteredPlayers.sort((a, b) => a.price - b.price); | |
| } | |
| displayPlayers(filteredPlayers); | |
| } | |
| // Display players in the grid | |
| function displayPlayers(playersToDisplay) { | |
| playersContainer.innerHTML = ''; | |
| if (playersToDisplay.length === 0) { | |
| noResults.classList.remove('hidden'); | |
| return; | |
| } else { | |
| noResults.classList.add('hidden'); | |
| } | |
| playersToDisplay.forEach(player => { | |
| const playerCard = document.createElement('div'); | |
| playerCard.className = 'player-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-200 fade-in'; | |
| playerCard.innerHTML = ` | |
| <div class="relative"> | |
| <div class="h-40 bg-gray-100 flex items-center justify-center"> | |
| <img src="${player.image || 'https://cdn.futbin.com/fut23/faces/placeholder.png'}" alt="${player.name}" class="h-full object-contain"> | |
| </div> | |
| <div class="absolute top-2 left-2 flex space-x-2"> | |
| <span class="position-badge ${getPositionColor(player.position)}">${player.position}</span> | |
| <span class="position-badge bg-gray-800 text-white">${player.rating}</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1 truncate">${player.name}</h3> | |
| <div class="flex justify-between items-center text-sm text-gray-600 mb-2"> | |
| <span>${player.nation}</span> | |
| <span>${player.club}</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-500 text-sm">Price</span> | |
| <span class="font-bold">${formatPrice(player.price)}</span> | |
| </div> | |
| <button onclick="openPlayerModal(${player.id})" class="w-full mt-3 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 py-1 rounded-lg text-sm"> | |
| View Details | |
| </button> | |
| </div> | |
| `; | |
| playersContainer.appendChild(playerCard); | |
| }); | |
| } | |
| // Open player modal with details | |
| window.openPlayerModal = function(playerId) { | |
| const player = players.find(p => p.id === playerId); | |
| if (!player) return; | |
| // Set modal content | |
| document.getElementById('modal-player-name').textContent = player.name; | |
| document.getElementById('modal-player-position').textContent = player.position; | |
| document.getElementById('modal-player-position').className = `position-badge ${getPositionColor(player.position)}`; | |
| document.getElementById('modal-player-rating').textContent = player.rating; | |
| document.getElementById('modal-player-nation').textContent = player.nation; | |
| document.getElementById('modal-player-club').textContent = player.club; | |
| // Set attributes | |
| document.getElementById('modal-pace').textContent = player.pace; | |
| document.getElementById('modal-pace-bar').style.width = `${player.pace}%`; | |
| document.getElementById('modal-shooting').textContent = player.shooting; | |
| document.getElementById('modal-shooting-bar').style.width = `${player.shooting}%`; | |
| document.getElementById('modal-passing').textContent = player.passing; | |
| document.getElementById('modal-passing-bar').style.width = `${player.passing}%`; | |
| document.getElementById('modal-dribbling').textContent = player.dribbling; | |
| document.getElementById('modal-dribbling-bar').style.width = `${player.dribbling}%`; | |
| document.getElementById('modal-defending').textContent = player.defending; | |
| document.getElementById('modal-defending-bar').style.width = `${player.defending}%`; | |
| document.getElementById('modal-physical').textContent = player.physical; | |
| document.getElementById('modal-physical-bar').style.width = `${player.physical}%`; | |
| // Set market info | |
| document.getElementById('modal-price').textContent = formatPrice(player.price); | |
| document.getElementById('modal-price-change').textContent = getRandomPriceChange(); | |
| document.getElementById('modal-price-range').textContent = `${formatPrice(player.price * 0.8)} - ${formatPrice(player.price * 1.2)}`; | |
| document.getElementById('modal-updated').textContent = getRandomUpdateTime(); | |
| // Show modal | |
| playerModal.classList.remove('hidden'); | |
| } | |
| // Helper functions | |
| function getPositionColor(position) { | |
| switch(position) { | |
| case 'GK': return 'bg-blue-100 text-blue-800'; | |
| case 'DEF': return 'bg-green-100 text-green-800'; | |
| case 'MID': return 'bg-yellow-100 text-yellow-800'; | |
| case 'FWD': return 'bg-red-100 text-red-800'; | |
| default: return 'bg-gray-100 text-gray-800'; | |
| } | |
| } | |
| function formatPrice(price) { | |
| if (price >= 1000000) { | |
| return (price / 1000000).toFixed(1) + 'M'; | |
| } else if (price >= 1000) { | |
| return (price / 1000).toFixed(0) + 'K'; | |
| } | |
| return price; | |
| } | |
| function getRandomPriceChange() { | |
| const changes = ['+2%', '+5%', '-3%', '+1%', '-1%', '+7%', '-2%', '0%']; | |
| return changes[Math.floor(Math.random() * changes.length)]; | |
| } | |
| function getRandomUpdateTime() { | |
| const times = ['Today, 12:45 PM', 'Yesterday, 8:30 PM', '2 days ago', '3 hours ago', 'Just now']; | |
| return times[Math.floor(Math.random() * times.length)]; | |
| } | |
| function toggleTheme() { | |
| document.body.classList.toggle('bg-gray-900'); | |
| document.body.classList.toggle('text-white'); | |
| const icon = themeToggle.querySelector('i'); | |
| if (icon.classList.contains('fa-moon')) { | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| } | |
| } | |
| </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=Soundaryasos/futbin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |