Hugging Face's logo

Spaces:
Soundaryasos
/
futbin
Running

App Files Community
Soundaryasos commited on
Commit
8199bf4
·
verified ·
1 Parent(s): ec570c6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +551 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Futbin
3
- emoji: 🌍
4
  colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: futbin
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,551 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FutTrack - Player Analytics</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .player-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .fade-in {
15
+ animation: fadeIn 0.3s ease-in-out;
16
+ }
17
+ @keyframes fadeIn {
18
+ from { opacity: 0; transform: translateY(10px); }
19
+ to { opacity: 1; transform: translateY(0); }
20
+ }
21
+ .position-badge {
22
+ width: 28px;
23
+ height: 28px;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ border-radius: 50%;
28
+ font-weight: bold;
29
+ font-size: 12px;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 min-h-screen">
34
+ <div class="container mx-auto px-4 py-8">
35
+ <!-- Header -->
36
+ <header class="mb-10">
37
+ <div class="flex justify-between items-center mb-6">
38
+ <h1 class="text-4xl font-bold text-indigo-800">
39
+ <span class="text-indigo-600">Fut</span>Track
40
+ </h1>
41
+ <div class="flex items-center space-x-4">
42
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
43
+ <i class="fas fa-plus mr-2"></i> Add Player
44
+ </button>
45
+ <div class="relative">
46
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
47
+ <i class="fas fa-moon text-gray-700"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Search and Filters -->
54
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
55
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
56
+ <div class="relative flex-grow">
57
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
58
+ <i class="fas fa-search text-gray-400"></i>
59
+ </div>
60
+ <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...">
61
+ </div>
62
+
63
+ <div class="flex flex-wrap gap-2">
64
+ <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">
65
+ <option value="">All Positions</option>
66
+ <option value="GK">Goalkeeper</option>
67
+ <option value="DEF">Defender</option>
68
+ <option value="MID">Midfielder</option>
69
+ <option value="FWD">Forward</option>
70
+ </select>
71
+
72
+ <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">
73
+ <option value="">All Ratings</option>
74
+ <option value="90+">90+</option>
75
+ <option value="85-89">85-89</option>
76
+ <option value="80-84">80-84</option>
77
+ <option value="75-79">75-79</option>
78
+ <option value="<75"><75</option>
79
+ </select>
80
+
81
+ <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">
82
+ <option value="">All Leagues</option>
83
+ <option value="Premier League">Premier League</option>
84
+ <option value="La Liga">La Liga</option>
85
+ <option value="Bundesliga">Bundesliga</option>
86
+ <option value="Serie A">Serie A</option>
87
+ <option value="Ligue 1">Ligue 1</option>
88
+ </select>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Stats Overview -->
95
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
96
+ <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-indigo-500">
97
+ <div class="flex justify-between items-center">
98
+ <div>
99
+ <p class="text-gray-500">Total Players</p>
100
+ <h3 class="text-2xl font-bold" id="total-players">50</h3>
101
+ </div>
102
+ <div class="bg-indigo-100 p-3 rounded-full">
103
+ <i class="fas fa-users text-indigo-600"></i>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-green-500">
108
+ <div class="flex justify-between items-center">
109
+ <div>
110
+ <p class="text-gray-500">Avg Rating</p>
111
+ <h3 class="text-2xl font-bold" id="avg-rating">83.7</h3>
112
+ </div>
113
+ <div class="bg-green-100 p-3 rounded-full">
114
+ <i class="fas fa-star text-green-600"></i>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-500">
119
+ <div class="flex justify-between items-center">
120
+ <div>
121
+ <p class="text-gray-500">Top League</p>
122
+ <h3 class="text-2xl font-bold" id="top-league">Premier League</h3>
123
+ </div>
124
+ <div class="bg-blue-100 p-3 rounded-full">
125
+ <i class="fas fa-trophy text-blue-600"></i>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-purple-500">
130
+ <div class="flex justify-between items-center">
131
+ <div>
132
+ <p class="text-gray-500">Most Common Nation</p>
133
+ <h3 class="text-2xl font-bold" id="top-nation">France</h3>
134
+ </div>
135
+ <div class="bg-purple-100 p-3 rounded-full">
136
+ <i class="fas fa-flag text-purple-600"></i>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Players Grid -->
143
+ <div class="mb-8">
144
+ <div class="flex justify-between items-center mb-4">
145
+ <h2 class="text-xl font-semibold text-gray-800">Player Database</h2>
146
+ <div class="flex items-center space-x-2">
147
+ <span class="text-sm text-gray-500">Sort by:</span>
148
+ <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">
149
+ <option value="rating-desc">Rating (High to Low)</option>
150
+ <option value="rating-asc">Rating (Low to High)</option>
151
+ <option value="name-asc">Name (A-Z)</option>
152
+ <option value="name-desc">Name (Z-A)</option>
153
+ <option value="price-desc">Price (High to Low)</option>
154
+ <option value="price-asc">Price (Low to High)</option>
155
+ </select>
156
+ </div>
157
+ </div>
158
+
159
+ <div id="players-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
160
+ <!-- Player cards will be inserted here by JavaScript -->
161
+ </div>
162
+
163
+ <div id="no-results" class="hidden text-center py-12">
164
+ <i class="fas fa-search fa-3x text-gray-300 mb-4"></i>
165
+ <h3 class="text-xl font-medium text-gray-500">No players found</h3>
166
+ <p class="text-gray-400">Try adjusting your search or filters</p>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Price Trends Section -->
171
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
172
+ <div class="flex justify-between items-center mb-6">
173
+ <h2 class="text-xl font-semibold text-gray-800">Price Trends</h2>
174
+ <div class="flex space-x-2">
175
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-sm">7 Days</button>
176
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">30 Days</button>
177
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">All Time</button>
178
+ </div>
179
+ </div>
180
+ <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
181
+ <p class="text-gray-400">Price trend chart will appear here</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Player Modal (hidden by default) -->
187
+ <div id="player-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
188
+ <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
189
+ <div class="p-6">
190
+ <div class="flex justify-between items-start mb-6">
191
+ <div>
192
+ <h2 id="modal-player-name" class="text-2xl font-bold">Player Name</h2>
193
+ <div class="flex items-center space-x-2 mt-1">
194
+ <span id="modal-player-position" class="position-badge bg-gray-100 text-gray-800">POS</span>
195
+ <span id="modal-player-rating" class="text-lg font-semibold">85</span>
196
+ <span id="modal-player-nation" class="text-sm text-gray-500">Nation</span>
197
+ <span id="modal-player-club" class="text-sm text-gray-500">Club</span>
198
+ </div>
199
+ </div>
200
+ <button id="close-modal" class="text-gray-400 hover:text-gray-600">
201
+ <i class="fas fa-times"></i>
202
+ </button>
203
+ </div>
204
+
205
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
206
+ <div>
207
+ <h3 class="font-medium text-gray-700 mb-2">Attributes</h3>
208
+ <div class="space-y-2">
209
+ <div class="flex justify-between">
210
+ <span class="text-gray-600">Pace</span>
211
+ <span id="modal-pace" class="font-medium">85</span>
212
+ </div>
213
+ <div class="w-full bg-gray-200 rounded-full h-2">
214
+ <div id="modal-pace-bar" class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
215
+ </div>
216
+
217
+ <div class="flex justify-between">
218
+ <span class="text-gray-600">Shooting</span>
219
+ <span id="modal-shooting" class="font-medium">80</span>
220
+ </div>
221
+ <div class="w-full bg-gray-200 rounded-full h-2">
222
+ <div id="modal-shooting-bar" class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div>
223
+ </div>
224
+
225
+ <div class="flex justify-between">
226
+ <span class="text-gray-600">Passing</span>
227
+ <span id="modal-passing" class="font-medium">88</span>
228
+ </div>
229
+ <div class="w-full bg-gray-200 rounded-full h-2">
230
+ <div id="modal-passing-bar" class="bg-blue-500 h-2 rounded-full" style="width: 88%"></div>
231
+ </div>
232
+
233
+ <div class="flex justify-between">
234
+ <span class="text-gray-600">Dribbling</span>
235
+ <span id="modal-dribbling" class="font-medium">90</span>
236
+ </div>
237
+ <div class="w-full bg-gray-200 rounded-full h-2">
238
+ <div id="modal-dribbling-bar" class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div>
239
+ </div>
240
+
241
+ <div class="flex justify-between">
242
+ <span class="text-gray-600">Defending</span>
243
+ <span id="modal-defending" class="font-medium">75</span>
244
+ </div>
245
+ <div class="w-full bg-gray-200 rounded-full h-2">
246
+ <div id="modal-defending-bar" class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
247
+ </div>
248
+
249
+ <div class="flex justify-between">
250
+ <span class="text-gray-600">Physical</span>
251
+ <span id="modal-physical" class="font-medium">82</span>
252
+ </div>
253
+ <div class="w-full bg-gray-200 rounded-full h-2">
254
+ <div id="modal-physical-bar" class="bg-blue-500 h-2 rounded-full" style="width: 82%"></div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div>
260
+ <h3 class="font-medium text-gray-700 mb-2">Market Info</h3>
261
+ <div class="space-y-4">
262
+ <div>
263
+ <p class="text-gray-500 text-sm">Current Price</p>
264
+ <p id="modal-price" class="text-xl font-bold">250,000</p>
265
+ </div>
266
+
267
+ <div class="grid grid-cols-2 gap-4">
268
+ <div>
269
+ <p class="text-gray-500 text-sm">Price Change (7d)</p>
270
+ <p id="modal-price-change" class="text-green-500 font-medium">+5%</p>
271
+ </div>
272
+ <div>
273
+ <p class="text-gray-500 text-sm">Price Range</p>
274
+ <p id="modal-price-range" class="font-medium">200K - 300K</p>
275
+ </div>
276
+ </div>
277
+
278
+ <div>
279
+ <p class="text-gray-500 text-sm">Last Updated</p>
280
+ <p id="modal-updated" class="font-medium">Today, 12:45 PM</p>
281
+ </div>
282
+
283
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center">
284
+ <i class="fas fa-bell mr-2"></i> Set Price Alert
285
+ </button>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div>
291
+ <h3 class="font-medium text-gray-700 mb-2">Price History</h3>
292
+ <div class="h-40 bg-gray-50 rounded-lg flex items-center justify-center">
293
+ <p class="text-gray-400">Price history chart will appear here</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <script>
301
+ // Sample player data (50 players)
302
+ const players = [
303
+ { 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" },
304
+ { 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" },
305
+ { 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" },
306
+ { 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" },
307
+ { 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" },
308
+ { 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" },
309
+ { 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" },
310
+ { 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" },
311
+ { 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" },
312
+ { 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" },
313
+ { 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" },
314
+ { 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" },
315
+ { 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" },
316
+ { 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" },
317
+ { 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" },
318
+ { 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" },
319
+ { 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" },
320
+ { 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" },
321
+ { 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" },
322
+ { 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" },
323
+ { 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" },
324
+ { 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" },
325
+ { 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" },
326
+ { 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" },
327
+ { 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" },
328
+ { 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" },
329
+ { 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" },
330
+ { 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" },
331
+ { 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" },
332
+ { 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" },
333
+ { 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" },
334
+ { 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" },
335
+ { 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" },
336
+ { 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" },
337
+ { 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" },
338
+ { 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" },
339
+ { 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" },
340
+ { 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" },
341
+ { 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" },
342
+ { 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" },
343
+ { 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" },
344
+ { 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" },
345
+ { 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" },
346
+ { 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" },
347
+ { 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" },
348
+ { 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" },
349
+ { 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" },
350
+ { 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" },
351
+ { 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" },
352
+ { 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" }
353
+ ];
354
+
355
+ // DOM elements
356
+ const playersContainer = document.getElementById('players-container');
357
+ const searchInput = document.getElementById('search-input');
358
+ const positionFilter = document.getElementById('position-filter');
359
+ const ratingFilter = document.getElementById('rating-filter');
360
+ const leagueFilter = document.getElementById('league-filter');
361
+ const sortBy = document.getElementById('sort-by');
362
+ const noResults = document.getElementById('no-results');
363
+ const playerModal = document.getElementById('player-modal');
364
+ const closeModal = document.getElementById('close-modal');
365
+ const themeToggle = document.getElementById('theme-toggle');
366
+
367
+ // Display all players initially
368
+ displayPlayers(players);
369
+
370
+ // Event listeners
371
+ searchInput.addEventListener('input', filterPlayers);
372
+ positionFilter.addEventListener('change', filterPlayers);
373
+ ratingFilter.addEventListener('change', filterPlayers);
374
+ leagueFilter.addEventListener('change', filterPlayers);
375
+ sortBy.addEventListener('change', filterPlayers);
376
+ closeModal.addEventListener('click', () => playerModal.classList.add('hidden'));
377
+ themeToggle.addEventListener('click', toggleTheme);
378
+
379
+ // Filter and display players based on search and filters
380
+ function filterPlayers() {
381
+ const searchTerm = searchInput.value.toLowerCase();
382
+ const positionValue = positionFilter.value;
383
+ const ratingValue = ratingFilter.value;
384
+ const leagueValue = leagueFilter.value;
385
+ const sortValue = sortBy.value;
386
+
387
+ let filteredPlayers = players.filter(player => {
388
+ const matchesSearch = player.name.toLowerCase().includes(searchTerm);
389
+ const matchesPosition = positionValue === '' || player.position === positionValue;
390
+
391
+ let matchesRating = true;
392
+ if (ratingValue === '90+') {
393
+ matchesRating = player.rating >= 90;
394
+ } else if (ratingValue === '85-89') {
395
+ matchesRating = player.rating >= 85 && player.rating <= 89;
396
+ } else if (ratingValue === '80-84') {
397
+ matchesRating = player.rating >= 80 && player.rating <= 84;
398
+ } else if (ratingValue === '75-79') {
399
+ matchesRating = player.rating >= 75 && player.rating <= 79;
400
+ } else if (ratingValue === '<75') {
401
+ matchesRating = player.rating < 75;
402
+ }
403
+
404
+ const matchesLeague = leagueValue === '' || player.league === leagueValue;
405
+
406
+ return matchesSearch && matchesPosition && matchesRating && matchesLeague;
407
+ });
408
+
409
+ // Sort players
410
+ if (sortValue === 'rating-desc') {
411
+ filteredPlayers.sort((a, b) => b.rating - a.rating);
412
+ } else if (sortValue === 'rating-asc') {
413
+ filteredPlayers.sort((a, b) => a.rating - b.rating);
414
+ } else if (sortValue === 'name-asc') {
415
+ filteredPlayers.sort((a, b) => a.name.localeCompare(b.name));
416
+ } else if (sortValue === 'name-desc') {
417
+ filteredPlayers.sort((a, b) => b.name.localeCompare(a.name));
418
+ } else if (sortValue === 'price-desc') {
419
+ filteredPlayers.sort((a, b) => b.price - a.price);
420
+ } else if (sortValue === 'price-asc') {
421
+ filteredPlayers.sort((a, b) => a.price - b.price);
422
+ }
423
+
424
+ displayPlayers(filteredPlayers);
425
+ }
426
+
427
+ // Display players in the grid
428
+ function displayPlayers(playersToDisplay) {
429
+ playersContainer.innerHTML = '';
430
+
431
+ if (playersToDisplay.length === 0) {
432
+ noResults.classList.remove('hidden');
433
+ return;
434
+ } else {
435
+ noResults.classList.add('hidden');
436
+ }
437
+
438
+ playersToDisplay.forEach(player => {
439
+ const playerCard = document.createElement('div');
440
+ playerCard.className = 'player-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-200 fade-in';
441
+ playerCard.innerHTML = `
442
+ <div class="relative">
443
+ <div class="h-40 bg-gray-100 flex items-center justify-center">
444
+ <img src="${player.image || 'https://cdn.futbin.com/fut23/faces/placeholder.png'}" alt="${player.name}" class="h-full object-contain">
445
+ </div>
446
+ <div class="absolute top-2 left-2 flex space-x-2">
447
+ <span class="position-badge ${getPositionColor(player.position)}">${player.position}</span>
448
+ <span class="position-badge bg-gray-800 text-white">${player.rating}</span>
449
+ </div>
450
+ </div>
451
+ <div class="p-4">
452
+ <h3 class="font-bold text-lg mb-1 truncate">${player.name}</h3>
453
+ <div class="flex justify-between items-center text-sm text-gray-600 mb-2">
454
+ <span>${player.nation}</span>
455
+ <span>${player.club}</span>
456
+ </div>
457
+ <div class="flex justify-between items-center">
458
+ <span class="text-gray-500 text-sm">Price</span>
459
+ <span class="font-bold">${formatPrice(player.price)}</span>
460
+ </div>
461
+ <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">
462
+ View Details
463
+ </button>
464
+ </div>
465
+ `;
466
+ playersContainer.appendChild(playerCard);
467
+ });
468
+ }
469
+
470
+ // Open player modal with details
471
+ window.openPlayerModal = function(playerId) {
472
+ const player = players.find(p => p.id === playerId);
473
+ if (!player) return;
474
+
475
+ // Set modal content
476
+ document.getElementById('modal-player-name').textContent = player.name;
477
+ document.getElementById('modal-player-position').textContent = player.position;
478
+ document.getElementById('modal-player-position').className = `position-badge ${getPositionColor(player.position)}`;
479
+ document.getElementById('modal-player-rating').textContent = player.rating;
480
+ document.getElementById('modal-player-nation').textContent = player.nation;
481
+ document.getElementById('modal-player-club').textContent = player.club;
482
+
483
+ // Set attributes
484
+ document.getElementById('modal-pace').textContent = player.pace;
485
+ document.getElementById('modal-pace-bar').style.width = `${player.pace}%`;
486
+ document.getElementById('modal-shooting').textContent = player.shooting;
487
+ document.getElementById('modal-shooting-bar').style.width = `${player.shooting}%`;
488
+ document.getElementById('modal-passing').textContent = player.passing;
489
+ document.getElementById('modal-passing-bar').style.width = `${player.passing}%`;
490
+ document.getElementById('modal-dribbling').textContent = player.dribbling;
491
+ document.getElementById('modal-dribbling-bar').style.width = `${player.dribbling}%`;
492
+ document.getElementById('modal-defending').textContent = player.defending;
493
+ document.getElementById('modal-defending-bar').style.width = `${player.defending}%`;
494
+ document.getElementById('modal-physical').textContent = player.physical;
495
+ document.getElementById('modal-physical-bar').style.width = `${player.physical}%`;
496
+
497
+ // Set market info
498
+ document.getElementById('modal-price').textContent = formatPrice(player.price);
499
+ document.getElementById('modal-price-change').textContent = getRandomPriceChange();
500
+ document.getElementById('modal-price-range').textContent = `${formatPrice(player.price * 0.8)} - ${formatPrice(player.price * 1.2)}`;
501
+ document.getElementById('modal-updated').textContent = getRandomUpdateTime();
502
+
503
+ // Show modal
504
+ playerModal.classList.remove('hidden');
505
+ }
506
+
507
+ // Helper functions
508
+ function getPositionColor(position) {
509
+ switch(position) {
510
+ case 'GK': return 'bg-blue-100 text-blue-800';
511
+ case 'DEF': return 'bg-green-100 text-green-800';
512
+ case 'MID': return 'bg-yellow-100 text-yellow-800';
513
+ case 'FWD': return 'bg-red-100 text-red-800';
514
+ default: return 'bg-gray-100 text-gray-800';
515
+ }
516
+ }
517
+
518
+ function formatPrice(price) {
519
+ if (price >= 1000000) {
520
+ return (price / 1000000).toFixed(1) + 'M';
521
+ } else if (price >= 1000) {
522
+ return (price / 1000).toFixed(0) + 'K';
523
+ }
524
+ return price;
525
+ }
526
+
527
+ function getRandomPriceChange() {
528
+ const changes = ['+2%', '+5%', '-3%', '+1%', '-1%', '+7%', '-2%', '0%'];
529
+ return changes[Math.floor(Math.random() * changes.length)];
530
+ }
531
+
532
+ function getRandomUpdateTime() {
533
+ const times = ['Today, 12:45 PM', 'Yesterday, 8:30 PM', '2 days ago', '3 hours ago', 'Just now'];
534
+ return times[Math.floor(Math.random() * times.length)];
535
+ }
536
+
537
+ function toggleTheme() {
538
+ document.body.classList.toggle('bg-gray-900');
539
+ document.body.classList.toggle('text-white');
540
+ const icon = themeToggle.querySelector('i');
541
+ if (icon.classList.contains('fa-moon')) {
542
+ icon.classList.remove('fa-moon');
543
+ icon.classList.add('fa-sun');
544
+ } else {
545
+ icon.classList.remove('fa-sun');
546
+ icon.classList.add('fa-moon');
547
+ }
548
+ }
549
+ </script>
550
+ <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>
551
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ I need a futbin like app for around 50 players.