Hugging Face's logo

Spaces:
Joykoeur75
/
cod-manager-test
Running

App Files Community
Joykoeur75 commited on
Commit
4a311a2
·
verified ·
1 Parent(s): 4d0245e

il faut que chaque bouton repond a se qui es proposer comme action - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +968 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cod Manager Test
3
- emoji: 🌍
4
- colorFrom: gray
5
- colorTo: pink
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: cod-manager-test
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,968 @@
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>Call of Duty Manager</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
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .animate-pulse {
15
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
16
+ }
17
+ .team-logo {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .team-logo:hover {
21
+ transform: scale(1.1);
22
+ filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
23
+ }
24
+ .player-card {
25
+ transition: all 0.2s ease;
26
+ }
27
+ .player-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
30
+ }
31
+ .match-animation {
32
+ background: linear-gradient(90deg, rgba(255,0,0,0.1), rgba(255,255,255,0.5), rgba(255,0,0,0.1));
33
+ background-size: 200% 100%;
34
+ animation: shimmer 2s infinite linear;
35
+ }
36
+ @keyframes shimmer {
37
+ 0% { background-position: 200% 0; }
38
+ 100% { background-position: -200% 0; }
39
+ }
40
+ .scrollbar-hide::-webkit-scrollbar {
41
+ display: none;
42
+ }
43
+ .scrollbar-hide {
44
+ -ms-overflow-style: none;
45
+ scrollbar-width: none;
46
+ }
47
+ @keyframes fade-in {
48
+ from { opacity: 0; transform: translateY(20px); }
49
+ to { opacity: 1; transform: translateY(0); }
50
+ }
51
+ @keyframes fade-out {
52
+ from { opacity: 1; transform: translateY(0); }
53
+ to { opacity: 0; transform: translateY(-20px); }
54
+ }
55
+ .animate-fade-in {
56
+ animation: fade-in 0.3s ease-out forwards;
57
+ }
58
+ .animate-fade-out {
59
+ animation: fade-out 0.3s ease-in forwards;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-900 text-white font-sans">
64
+ <!-- Header -->
65
+ <header class="bg-black py-4 px-6 border-b border-gray-800 sticky top-0 z-50">
66
+ <div class="container mx-auto flex justify-between items-center">
67
+ <div class="flex items-center space-x-4">
68
+ <div class="bg-red-600 w-10 h-10 rounded-full flex items-center justify-center">
69
+ <i class="fas fa-crosshairs text-white text-xl"></i>
70
+ </div>
71
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-red-600 to-yellow-500 bg-clip-text text-transparent">CALL OF DUTY MANAGER</h1>
72
+ </div>
73
+ <div class="flex items-center space-x-6">
74
+ <div class="hidden md:flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg">
75
+ <i class="fas fa-coins text-yellow-400"></i>
76
+ <span id="money" class="font-bold">$1,250,000</span>
77
+ </div>
78
+ <div class="hidden md:flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg">
79
+ <i class="fas fa-trophy text-yellow-400"></i>
80
+ <span id="reputation" class="font-bold">75</span>
81
+ </div>
82
+ <div class="relative group">
83
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-red-600">
84
+ <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
85
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Profile</a>
86
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Settings</a>
87
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Logout</a>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Main Content -->
95
+ <main class="container mx-auto px-4 py-6">
96
+ <!-- Team Overview -->
97
+ <section class="mb-8">
98
+ <div class="flex justify-between items-center mb-4">
99
+ <h2 class="text-xl font-bold">TEAM OVERVIEW</h2>
100
+ <div class="flex space-x-2">
101
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center space-x-2" onclick="handleSignPlayer()">
102
+ <i class="fas fa-plus"></i>
103
+ <span>Sign Player</span>
104
+ </button>
105
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center space-x-2" onclick="handleSponsors()">
106
+ <i class="fas fa-bullhorn"></i>
107
+ <span>Sponsors</span>
108
+ </button>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-gray-800 rounded-xl p-6">
113
+ <div class="flex flex-col md:flex-row items-center md:items-start md:justify-between">
114
+ <div class="flex flex-col items-center mb-6 md:mb-0">
115
+ <div class="team-logo bg-gradient-to-br from-red-600 to-black w-32 h-32 rounded-full flex items-center justify-center border-4 border-gray-700 mb-4">
116
+ <span class="text-4xl font-bold bg-gradient-to-r from-red-600 to-yellow-500 bg-clip-text text-transparent">CDM</span>
117
+ </div>
118
+ <h3 class="text-2xl font-bold">Dominance Esports</h3>
119
+ <p class="text-gray-400">Rank: #12 | League: Challengers</p>
120
+ </div>
121
+
122
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full md:w-auto">
123
+ <div class="bg-gray-700 p-4 rounded-lg text-center">
124
+ <div class="text-3xl font-bold text-red-500">4</div>
125
+ <div class="text-gray-400">Players</div>
126
+ </div>
127
+ <div class="bg-gray-700 p-4 rounded-lg text-center">
128
+ <div class="text-3xl font-bold text-blue-500">2</div>
129
+ <div class="text-gray-400">Staff</div>
130
+ </div>
131
+ <div class="bg-gray-700 p-4 rounded-lg text-center">
132
+ <div class="text-3xl font-bold text-green-500">3</div>
133
+ <div class="text-gray-400">Sponsors</div>
134
+ </div>
135
+ <div class="bg-gray-700 p-4 rounded-lg text-center">
136
+ <div class="text-3xl font-bold text-yellow-500">12-4</div>
137
+ <div class="text-gray-400">Record</div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Players Section -->
145
+ <section class="mb-8">
146
+ <h2 class="text-xl font-bold mb-4">PLAYERS</h2>
147
+
148
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
149
+ <!-- Player 1 -->
150
+ <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-red-600">
151
+ <div class="p-4">
152
+ <div class="flex justify-between items-start mb-3">
153
+ <div>
154
+ <h3 class="font-bold text-lg">Alex "Domin8r" Carter</h3>
155
+ <p class="text-gray-400 text-sm">Slayer | AR</p>
156
+ </div>
157
+ <div class="bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">CAPTAIN</div>
158
+ </div>
159
+ <div class="flex items-center mb-3">
160
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-3">
161
+ <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player" class="w-full h-full object-cover">
162
+ </div>
163
+ <div class="flex-1">
164
+ <div class="flex justify-between text-sm mb-1">
165
+ <span>K/D Ratio</span>
166
+ <span class="font-bold">1.32</span>
167
+ </div>
168
+ <div class="w-full bg-gray-700 h-2 rounded-full mb-1">
169
+ <div class="bg-red-600 h-2 rounded-full" style="width: 75%"></div>
170
+ </div>
171
+ <div class="flex justify-between text-sm mb-1">
172
+ <span>Consistency</span>
173
+ <span class="font-bold">82%</span>
174
+ </div>
175
+ <div class="w-full bg-gray-700 h-2 rounded-full">
176
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 82%"></div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ <div class="flex justify-between text-sm">
181
+ <div>
182
+ <span class="text-gray-400">Contract:</span>
183
+ <span class="font-bold">2 years</span>
184
+ </div>
185
+ <div>
186
+ <span class="text-gray-400">Salary:</span>
187
+ <span class="font-bold">$12k/mo</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="bg-gray-700 px-4 py-2 flex justify-between">
192
+ <button class="text-blue-400 hover:text-blue-300 text-sm" onclick="handleTrainPlayer('Alex \"Domin8r\" Carter')">
193
+ <i class="fas fa-chart-line mr-1"></i> Train
194
+ </button>
195
+ <button class="text-green-400 hover:text-green-300 text-sm" onclick="handleTalkToPlayer('Alex \"Domin8r\" Carter')">
196
+ <i class="fas fa-comment mr-1"></i> Talk
197
+ </button>
198
+ <button class="text-yellow-400 hover:text-yellow-300 text-sm" onclick="handleContractExtension('Alex \"Domin8r\" Carter')">
199
+ <i class="fas fa-file-contract mr-1"></i> Extend
200
+ </button>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Player 2 -->
205
+ <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-blue-600">
206
+ <div class="p-4">
207
+ <div class="flex justify-between items-start mb-3">
208
+ <div>
209
+ <h3 class="font-bold text-lg">Jamie "Anch0r" Lin</h3>
210
+ <p class="text-gray-400 text-sm">Anchor | SMG</p>
211
+ </div>
212
+ <div class="bg-blue-600 text-white px-2 py-1 rounded text-xs font-bold">ICON</div>
213
+ </div>
214
+ <div class="flex items-center mb-3">
215
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-3">
216
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Player" class="w-full h-full object-cover">
217
+ </div>
218
+ <div class="flex-1">
219
+ <div class="flex justify-between text-sm mb-1">
220
+ <span>K/D Ratio</span>
221
+ <span class="font-bold">1.18</span>
222
+ </div>
223
+ <div class="w-full bg-gray-700 h-2 rounded-full mb-1">
224
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 68%"></div>
225
+ </div>
226
+ <div class="flex justify-between text-sm mb-1">
227
+ <span>Consistency</span>
228
+ <span class="font-bold">79%</span>
229
+ </div>
230
+ <div class="w-full bg-gray-700 h-2 rounded-full">
231
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 79%"></div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="flex justify-between text-sm">
236
+ <div>
237
+ <span class="text-gray-400">Contract:</span>
238
+ <span class="font-bold">1.5 years</span>
239
+ </div>
240
+ <div>
241
+ <span class="text-gray-400">Salary:</span>
242
+ <span class="font-bold">$10k/mo</span>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <div class="bg-gray-700 px-4 py-2 flex justify-between">
247
+ <button class="text-blue-400 hover:text-blue-300 text-sm">
248
+ <i class="fas fa-chart-line mr-1"></i> Train
249
+ </button>
250
+ <button class="text-green-400 hover:text-green-300 text-sm">
251
+ <i class="fas fa-comment mr-1"></i> Talk
252
+ </button>
253
+ <button class="text-yellow-400 hover:text-yellow-300 text-sm">
254
+ <i class="fas fa-file-contract mr-1"></i> Extend
255
+ </button>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Player 3 -->
260
+ <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-green-600">
261
+ <div class="p-4">
262
+ <div class="flex justify-between items-start mb-3">
263
+ <div>
264
+ <h3 class="font-bold text-lg">Marcus "Clutch" Donovan</h3>
265
+ <p class="text-gray-400 text-sm">Support | Flex</p>
266
+ </div>
267
+ <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">ROOKIE</div>
268
+ </div>
269
+ <div class="flex items-center mb-3">
270
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-3">
271
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player" class="w-full h-full object-cover">
272
+ </div>
273
+ <div class="flex-1">
274
+ <div class="flex justify-between text-sm mb-1">
275
+ <span>K/D Ratio</span>
276
+ <span class="font-bold">1.05</span>
277
+ </div>
278
+ <div class="w-full bg-gray-700 h-2 rounded-full mb-1">
279
+ <div class="bg-green-600 h-2 rounded-full" style="width: 60%"></div>
280
+ </div>
281
+ <div class="flex justify-between text-sm mb-1">
282
+ <span>Consistency</span>
283
+ <span class="font-bold">71%</span>
284
+ </div>
285
+ <div class="w-full bg-gray-700 h-2 rounded-full">
286
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 71%"></div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ <div class="flex justify-between text-sm">
291
+ <div>
292
+ <span class="text-gray-400">Contract:</span>
293
+ <span class="font-bold">1 year</span>
294
+ </div>
295
+ <div>
296
+ <span class="text-gray-400">Salary:</span>
297
+ <span class="font-bold">$8k/mo</span>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="bg-gray-700 px-4 py-2 flex justify-between">
302
+ <button class="text-blue-400 hover:text-blue-300 text-sm">
303
+ <i class="fas fa-chart-line mr-1"></i> Train
304
+ </button>
305
+ <button class="text-green-400 hover:text-green-300 text-sm">
306
+ <i class="fas fa-comment mr-1"></i> Talk
307
+ </button>
308
+ <button class="text-yellow-400 hover:text-yellow-300 text-sm">
309
+ <i class="fas fa-file-contract mr-1"></i> Extend
310
+ </button>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Player 4 -->
315
+ <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-purple-600">
316
+ <div class="p-4">
317
+ <div class="flex justify-between items-start mb-3">
318
+ <div>
319
+ <h3 class="font-bold text-lg">Tyler "Obj3ct" Wright</h3>
320
+ <p class="text-gray-400 text-sm">Objective | SMG</p>
321
+ </div>
322
+ <div class="bg-purple-600 text-white px-2 py-1 rounded text-xs font-bold">VETERAN</div>
323
+ </div>
324
+ <div class="flex items-center mb-3">
325
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-3">
326
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player" class="w-full h-full object-cover">
327
+ </div>
328
+ <div class="flex-1">
329
+ <div class="flex justify-between text-sm mb-1">
330
+ <span>K/D Ratio</span>
331
+ <span class="font-bold">0.92</span>
332
+ </div>
333
+ <div class="w-full bg-gray-700 h-2 rounded-full mb-1">
334
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 55%"></div>
335
+ </div>
336
+ <div class="flex justify-between text-sm mb-1">
337
+ <span>Consistency</span>
338
+ <span class="font-bold">88%</span>
339
+ </div>
340
+ <div class="w-full bg-gray-700 h-2 rounded-full">
341
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 88%"></div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="flex justify-between text-sm">
346
+ <div>
347
+ <span class="text-gray-400">Contract:</span>
348
+ <span class="font-bold">6 months</span>
349
+ </div>
350
+ <div>
351
+ <span class="text-gray-400">Salary:</span>
352
+ <span class="font-bold">$15k/mo</span>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ <div class="bg-gray-700 px-4 py-2 flex justify-between">
357
+ <button class="text-blue-400 hover:text-blue-300 text-sm">
358
+ <i class="fas fa-chart-line mr-1"></i> Train
359
+ </button>
360
+ <button class="text-green-400 hover:text-green-300 text-sm">
361
+ <i class="fas fa-comment mr-1"></i> Talk
362
+ </button>
363
+ <button class="text-yellow-400 hover:text-yellow-300 text-sm">
364
+ <i class="fas fa-file-contract mr-1"></i> Extend
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Upcoming Match -->
372
+ <section class="mb-8">
373
+ <h2 class="text-xl font-bold mb-4">UPCOMING MATCH</h2>
374
+
375
+ <div class="bg-gray-800 rounded-xl p-6">
376
+ <div class="flex flex-col md:flex-row justify-between items-center mb-6">
377
+ <div class="flex items-center mb-4 md:mb-0">
378
+ <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center mr-4">
379
+ <span class="text-xl font-bold">CDM</span>
380
+ </div>
381
+ <div>
382
+ <h3 class="text-xl font-bold">Dominance Esports</h3>
383
+ <p class="text-gray-400">12-4 | #12 Rank</p>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="bg-gray-700 px-6 py-2 rounded-full mb-4 md:mb-0">
388
+ <div class="text-center">
389
+ <div class="text-sm text-gray-400">CDL Challengers</div>
390
+ <div class="font-bold">Best of 5 Series</div>
391
+ <div class="text-sm">Tomorrow - 7:00 PM EST</div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="flex items-center">
396
+ <div>
397
+ <h3 class="text-xl font-bold text-right">Titan Gaming</h3>
398
+ <p class="text-gray-400 text-right">14-2 | #8 Rank</p>
399
+ </div>
400
+ <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center ml-4">
401
+ <span class="text-xl font-bold">TGN</span>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
407
+ <div class="bg-gray-700 p-4 rounded-lg">
408
+ <h4 class="font-bold mb-2 flex items-center">
409
+ <i class="fas fa-map-marked-alt mr-2 text-red-500"></i> Map Strategy
410
+ </h4>
411
+ <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 mb-3">
412
+ <option>Select Map</option>
413
+ <option>Hardpoint - Raid</option>
414
+ <option>Search & Destroy - Standoff</option>
415
+ <option>Control - Gavutu</option>
416
+ </select>
417
+ <textarea class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 h-24" placeholder="Enter your strategy..."></textarea>
418
+ </div>
419
+
420
+ <div class="bg-gray-700 p-4 rounded-lg">
421
+ <h4 class="font-bold mb-2 flex items-center">
422
+ <i class="fas fa-users mr-2 text-blue-500"></i> Lineup Decision
423
+ </h4>
424
+ <div class="mb-3">
425
+ <label class="block text-gray-400 text-sm mb-1">Starting Roster</label>
426
+ <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 mb-2">
427
+ <option>Current Best 4 (65% Win Rate)</option>
428
+ <option>Experimental Lineup (42% Win Rate)</option>
429
+ <option>Counter Pick (58% vs Titan)</option>
430
+ </select>
431
+ <div class="text-xs text-gray-400">Predicted Impact: <span class="text-yellow-500">+3% Win Chance</span></div>
432
+ </div>
433
+ <div>
434
+ <label class="block text-gray-400 text-sm mb-1">Substitution Plan</label>
435
+ <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 mb-2">
436
+ <option>No Subs (Current: 52% Map 3 Win)</option>
437
+ <option>Map 3 Sub (Boost to 58%)</option>
438
+ <option>If Losing 0-2 (Moral Boost +5%)</option>
439
+ </select>
440
+ <div class="text-xs text-gray-400">Predicted Impact: <span class="text-blue-400">+2% Series Win</span></div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="bg-gray-700 p-4 rounded-lg">
445
+ <h4 class="font-bold mb-2 flex items-center">
446
+ <i class="fas fa-trophy mr-2 text-yellow-500"></i> Match Prediction
447
+ </h4>
448
+ <div class="flex justify-between items-center mb-3">
449
+ <span>Dominance Win</span>
450
+ <span class="font-bold">42%</span>
451
+ </div>
452
+ <div class="w-full bg-gray-800 h-3 rounded-full mb-4">
453
+ <div class="bg-red-600 h-3 rounded-full" style="width: 42%"></div>
454
+ </div>
455
+ <div class="flex justify-between items-center mb-3">
456
+ <span>Titan Win</span>
457
+ <span class="font-bold">58%</span>
458
+ </div>
459
+ <div class="w-full bg-gray-800 h-3 rounded-full mb-4">
460
+ <div class="bg-blue-600 h-3 rounded-full" style="width: 58%"></div>
461
+ </div>
462
+ <button class="w-full bg-red-600 hover:bg-red-700 py-2 rounded-lg font-bold flex items-center justify-center">
463
+ <i class="fas fa-play mr-2"></i> Simulate Match
464
+ </button>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <!-- Recent Results -->
471
+ <section class="mb-8">
472
+ <h2 class="text-xl font-bold mb-4">RECENT RESULTS</h2>
473
+
474
+ <div class="overflow-x-auto scrollbar-hide">
475
+ <div class="flex space-x-4" style="min-width: max-content;">
476
+ <!-- Match 1 -->
477
+ <div class="bg-gray-800 rounded-xl p-4 min-w-64">
478
+ <div class="flex justify-between items-center mb-3">
479
+ <div class="flex items-center">
480
+ <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2">
481
+ <span class="text-xs font-bold">CDM</span>
482
+ </div>
483
+ <span class="font-bold">Dominance</span>
484
+ </div>
485
+ <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">W 3-1</div>
486
+ </div>
487
+ <div class="flex justify-between items-center mb-1 text-sm">
488
+ <span>Hardpoint</span>
489
+ <span class="font-bold text-green-500">250-210</span>
490
+ </div>
491
+ <div class="flex justify-between items-center mb-1 text-sm">
492
+ <span>S&D</span>
493
+ <span class="font-bold text-red-500">4-6</span>
494
+ </div>
495
+ <div class="flex justify-between items-center mb-1 text-sm">
496
+ <span>Control</span>
497
+ <span class="font-bold text-green-500">3-1</span>
498
+ </div>
499
+ <div class="flex justify-between items-center text-sm">
500
+ <span>Hardpoint</span>
501
+ <span class="font-bold text-green-500">250-195</span>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Match 2 -->
506
+ <div class="bg-gray-800 rounded-xl p-4 min-w-64">
507
+ <div class="flex justify-between items-center mb-3">
508
+ <div class="flex items-center">
509
+ <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2">
510
+ <span class="text-xs font-bold">CDM</span>
511
+ </div>
512
+ <span class="font-bold">Dominance</span>
513
+ </div>
514
+ <div class="bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">L 2-3</div>
515
+ </div>
516
+ <div class="flex justify-between items-center mb-1 text-sm">
517
+ <span>Hardpoint</span>
518
+ <span class="font-bold text-green-500">250-230</span>
519
+ </div>
520
+ <div class="flex justify-between items-center mb-1 text-sm">
521
+ <span>S&D</span>
522
+ <span class="font-bold text-red-500">3-6</span>
523
+ </div>
524
+ <div class="flex justify-between items-center mb-1 text-sm">
525
+ <span>Control</span>
526
+ <span class="font-bold text-green-500">3-2</span>
527
+ </div>
528
+ <div class="flex justify-between items-center mb-1 text-sm">
529
+ <span>Hardpoint</span>
530
+ <span class="font-bold text-red-500">230-250</span>
531
+ </div>
532
+ <div class="flex justify-between items-center text-sm">
533
+ <span>S&D</span>
534
+ <span class="font-bold text-red-500">5-6</span>
535
+ </div>
536
+ </div>
537
+
538
+ <!-- Match 3 -->
539
+ <div class="bg-gray-800 rounded-xl p-4 min-w-64">
540
+ <div class="flex justify-between items-center mb-3">
541
+ <div class="flex items-center">
542
+ <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2">
543
+ <span class="text-xs font-bold">CDM</span>
544
+ </div>
545
+ <span class="font-bold">Dominance</span>
546
+ </div>
547
+ <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">W 3-0</div>
548
+ </div>
549
+ <div class="flex justify-between items-center mb-1 text-sm">
550
+ <span>Hardpoint</span>
551
+ <span class="font-bold text-green-500">250-180</span>
552
+ </div>
553
+ <div class="flex justify-between items-center mb-1 text-sm">
554
+ <span>S&D</span>
555
+ <span class="font-bold text-green-500">6-4</span>
556
+ </div>
557
+ <div class="flex justify-between items-center text-sm">
558
+ <span>Control</span>
559
+ <span class="font-bold text-green-500">3-1</span>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Match 4 -->
564
+ <div class="bg-gray-800 rounded-xl p-4 min-w-64">
565
+ <div class="flex justify-between items-center mb-3">
566
+ <div class="flex items-center">
567
+ <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2">
568
+ <span class="text-xs font-bold">CDM</span>
569
+ </div>
570
+ <span class="font-bold">Dominance</span>
571
+ </div>
572
+ <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">W 3-2</div>
573
+ </div>
574
+ <div class="flex justify-between items-center mb-1 text-sm">
575
+ <span>Hardpoint</span>
576
+ <span class="font-bold text-red-500">240-250</span>
577
+ </div>
578
+ <div class="flex justify-between items-center mb-1 text-sm">
579
+ <span>S&D</span>
580
+ <span class="font-bold text-green-500">6-5</span>
581
+ </div>
582
+ <div class="flex justify-between items-center mb-1 text-sm">
583
+ <span>Control</span>
584
+ <span class="font-bold text-red-500">2-3</span>
585
+ </div>
586
+ <div class="flex justify-between items-center mb-1 text-sm">
587
+ <span>Hardpoint</span>
588
+ <span class="font-bold text-green-500">250-210</span>
589
+ </div>
590
+ <div class="flex justify-between items-center text-sm">
591
+ <span>S&D</span>
592
+ <span class="font-bold text-green-500">6-3</span>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- Team Facilities -->
600
+ <section>
601
+ <h2 class="text-xl font-bold mb-4">TEAM FACILITIES</h2>
602
+
603
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
604
+ <div class="bg-gray-800 rounded-xl p-6">
605
+ <div class="flex justify-between items-start mb-4">
606
+ <h3 class="font-bold text-lg flex items-center">
607
+ <i class="fas fa-gamepad mr-2 text-purple-500"></i> Gaming House
608
+ </h3>
609
+ <div class="bg-gray-700 px-2 py-1 rounded text-xs">Level 2</div>
610
+ </div>
611
+ <div class="mb-4">
612
+ <div class="flex justify-between text-sm mb-1">
613
+ <span>Quality</span>
614
+ <span>65/100</span>
615
+ </div>
616
+ <div class="w-full bg-gray-700 h-2 rounded-full">
617
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div>
618
+ </div>
619
+ </div>
620
+ <p class="text-gray-400 text-sm mb-4">Improves player morale and recovery. Higher levels attract better talent.</p>
621
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm flex items-center justify-center" onclick="handleFacilityUpgrade('Gaming House', 75000)">
622
+ <i class="fas fa-arrow-up mr-2"></i> Upgrade ($75,000)
623
+ </button>
624
+ </div>
625
+
626
+ <div class="bg-gray-800 rounded-xl p-6">
627
+ <div class="flex justify-between items-start mb-4">
628
+ <h3 class="font-bold text-lg flex items-center">
629
+ <i class="fas fa-desktop mr-2 text-blue-500"></i> Scrim Setup
630
+ </h3>
631
+ <div class="bg-gray-700 px-2 py-1 rounded text-xs">Level 1</div>
632
+ </div>
633
+ <div class="mb-4">
634
+ <div class="flex justify-between text-sm mb-1">
635
+ <span>Quality</span>
636
+ <span>40/100</span>
637
+ </div>
638
+ <div class="w-full bg-gray-700 h-2 rounded-full">
639
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 40%"></div>
640
+ </div>
641
+ </div>
642
+ <p class="text-gray-400 text-sm mb-4">Better equipment improves practice efficiency and strategy development.</p>
643
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm flex items-center justify-center">
644
+ <i class="fas fa-arrow-up mr-2"></i> Upgrade ($50,000)
645
+ </button>
646
+ </div>
647
+
648
+ <div class="bg-gray-800 rounded-xl p-6">
649
+ <div class="flex justify-between items-start mb-4">
650
+ <h3 class="font-bold text-lg flex items-center">
651
+ <i class="fas fa-users mr-2 text-green-500"></i> Coaching Staff
652
+ </h3>
653
+ <div class="bg-gray-700 px-2 py-1 rounded text-xs">Level 1</div>
654
+ </div>
655
+ <div class="mb-4">
656
+ <div class="flex justify-between text-sm mb-1">
657
+ <span>Quality</span>
658
+ <span>35/100</span>
659
+ </div>
660
+ <div class="w-full bg-gray-700 h-2 rounded-full">
661
+ <div class="bg-green-600 h-2 rounded-full" style="width: 35%"></div>
662
+ </div>
663
+ </div>
664
+ <p class="text-gray-400 text-sm mb-4">Better coaches improve player development and in-game adjustments.</p>
665
+ <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm flex items-center justify-center">
666
+ <i class="fas fa-arrow-up mr-2"></i> Upgrade ($60,000)
667
+ </button>
668
+ </div>
669
+ </div>
670
+ </section>
671
+
672
+ <!-- Statistics Dashboard -->
673
+ <section class="mb-8">
674
+ <h2 class="text-xl font-bold mb-4">TEAM ANALYTICS</h2>
675
+
676
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
677
+ <div class="bg-gray-800 rounded-xl p-6">
678
+ <h3 class="font-bold text-lg mb-4 flex items-center">
679
+ <i class="fas fa-chart-line mr-2 text-blue-500"></i> Performance Metrics
680
+ </h3>
681
+ <div class="grid grid-cols-2 gap-4">
682
+ <div class="bg-gray-700 p-3 rounded-lg">
683
+ <div class="text-sm text-gray-400 mb-1">Avg. K/D Ratio</div>
684
+ <div class="text-2xl font-bold">1.12</div>
685
+ </div>
686
+ <div class="bg-gray-700 p-3 rounded-lg">
687
+ <div class="text-sm text-gray-400 mb-1">Objective Time</div>
688
+ <div class="text-2xl font-bold">72%</div>
689
+ </div>
690
+ <div class="bg-gray-700 p-3 rounded-lg">
691
+ <div class="text-sm text-gray-400 mb-1">First Blood %</div>
692
+ <div class="text-2xl font-bold">58%</div>
693
+ </div>
694
+ <div class="bg-gray-700 p-3 rounded-lg">
695
+ <div class="text-sm text-gray-400 mb-1">Clutch Rate</div>
696
+ <div class="text-2xl font-bold">34%</div>
697
+ </div>
698
+ </div>
699
+ </div>
700
+
701
+ <div class="bg-gray-800 rounded-xl p-6">
702
+ <h3 class="font-bold text-lg mb-4 flex items-center">
703
+ <i class="fas fa-map-marked-alt mr-2 text-green-500"></i> Map Performance
704
+ </h3>
705
+ <div class="space-y-3">
706
+ <div>
707
+ <div class="flex justify-between text-sm mb-1">
708
+ <span>Hardpoint</span>
709
+ <span class="font-bold">65% Win</span>
710
+ </div>
711
+ <div class="w-full bg-gray-700 h-2 rounded-full">
712
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
713
+ </div>
714
+ </div>
715
+ <div>
716
+ <div class="flex justify-between text-sm mb-1">
717
+ <span>Search & Destroy</span>
718
+ <span class="font-bold">52% Win</span>
719
+ </div>
720
+ <div class="w-full bg-gray-700 h-2 rounded-full">
721
+ <div class="bg-green-600 h-2 rounded-full" style="width: 52%"></div>
722
+ </div>
723
+ </div>
724
+ <div>
725
+ <div class="flex justify-between text-sm mb-1">
726
+ <span>Control</span>
727
+ <span class="font-bold">48% Win</span>
728
+ </div>
729
+ <div class="w-full bg-gray-700 h-2 rounded-full">
730
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 48%"></div>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </section>
737
+ </main>
738
+
739
+ <!-- Bottom Navigation (Mobile) -->
740
+ <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 z-50">
741
+ <div class="flex justify-around">
742
+ <a href="#" class="flex flex-col items-center py-3 px-4 text-red-500">
743
+ <i class="fas fa-home text-xl"></i>
744
+ <span class="text-xs mt-1">Home</span>
745
+ </a>
746
+ <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-400 hover:text-white">
747
+ <i class="fas fa-users text-xl"></i>
748
+ <span class="text-xs mt-1">Team</span>
749
+ </a>
750
+ <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-400 hover:text-white">
751
+ <i class="fas fa-trophy text-xl"></i>
752
+ <span class="text-xs mt-1">Matches</span>
753
+ </a>
754
+ <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-400 hover:text-white">
755
+ <i class="fas fa-cog text-xl"></i>
756
+ <span class="text-xs mt-1">Settings</span>
757
+ </a>
758
+ </div>
759
+ </nav>
760
+
761
+ <!-- Match Simulation Modal -->
762
+ <div id="simulationModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
763
+ <div class="bg-gray-800 rounded-xl w-full max-w-2xl mx-4 overflow-hidden">
764
+ <div class="bg-gray-900 px-6 py-4 border-b border-gray-700 flex justify-between items-center">
765
+ <h3 class="text-xl font-bold">MATCH SIMULATION</h3>
766
+ <button id="closeSimulation" class="text-gray-400 hover:text-white">
767
+ <i class="fas fa-times"></i>
768
+ </button>
769
+ </div>
770
+
771
+ <div class="p-6">
772
+ <div class="flex justify-between items-center mb-6">
773
+ <div class="text-center">
774
+ <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center mx-auto mb-2">
775
+ <span class="text-xl font-bold">CDM</span>
776
+ </div>
777
+ <div class="font-bold">Dominance</div>
778
+ </div>
779
+
780
+ <div class="text-center">
781
+ <div class="text-4xl font-bold match-animation px-6 py-2 rounded-lg">VS</div>
782
+ </div>
783
+
784
+ <div class="text-center">
785
+ <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center mx-auto mb-2">
786
+ <span class="text-xl font-bold">TGN</span>
787
+ </div>
788
+ <div class="font-bold">Titan</div>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="bg-gray-700 rounded-lg p-4 mb-6">
793
+ <div class="flex justify-between items-center mb-2">
794
+ <span class="font-bold">Map 1: Hardpoint - Raid</span>
795
+ <span class="text-sm text-gray-400">In Progress</span>
796
+ </div>
797
+ <div class="w-full bg-gray-800 h-2 rounded-full mb-2">
798
+ <div class="bg-red-600 h-2 rounded-full animate-pulse" style="width: 50%"></div>
799
+ </div>
800
+ <div class="flex justify-between text-sm mb-3">
801
+ <span>Dominance</span>
802
+ <span>Titan</span>
803
+ </div>
804
+ <div class="grid grid-cols-3 gap-2 text-xs text-center mb-2">
805
+ <div class="bg-gray-800 p-1 rounded">Kills: 12</div>
806
+ <div class="bg-gray-800 p-1 rounded">Deaths: 9</div>
807
+ <div class="bg-gray-800 p-1 rounded">Score: 125</div>
808
+ </div>
809
+ <div class="grid grid-cols-3 gap-2 text-xs text-center">
810
+ <div class="bg-gray-800 p-1 rounded">Kills: 15</div>
811
+ <div class="bg-gray-800 p-1 rounded">Deaths: 8</div>
812
+ <div class="bg-gray-800 p-1 rounded">Score: 140</div>
813
+ </div>
814
+ </div>
815
+
816
+ <div class="grid grid-cols-2 gap-4">
817
+ <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center">
818
+ <i class="fas fa-pause text-yellow-500 text-xl mb-1"></i>
819
+ <span>Timeout</span>
820
+ </button>
821
+ <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center">
822
+ <i class="fas fa-user-edit text-blue-500 text-xl mb-1"></i>
823
+ <span>Adjust</span>
824
+ </button>
825
+ <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center">
826
+ <i class="fas fa-exchange-alt text-green-500 text-xl mb-1"></i>
827
+ <span>Substitute</span>
828
+ </button>
829
+ <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center">
830
+ <i class="fas fa-bullhorn text-purple-500 text-xl mb-1"></i>
831
+ <span>Motivate</span>
832
+ </button>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+
838
+ <script>
839
+ // Fonctions pour les actions des boutons
840
+ function showNotification(message, type = 'info') {
841
+ const colors = {
842
+ info: 'bg-blue-600',
843
+ success: 'bg-green-600',
844
+ warning: 'bg-yellow-600',
845
+ error: 'bg-red-600'
846
+ };
847
+ const notification = document.createElement('div');
848
+ notification.className = `fixed top-4 right-4 ${colors[type]} text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in`;
849
+ notification.textContent = message;
850
+ document.body.appendChild(notification);
851
+ setTimeout(() => {
852
+ notification.classList.add('animate-fade-out');
853
+ setTimeout(() => notification.remove(), 500);
854
+ }, 3000);
855
+ }
856
+
857
+ function handleTrainPlayer(playerName) {
858
+ showNotification(`Training ${playerName}...`, 'info');
859
+ // Simulation d'amélioration aléatoire
860
+ setTimeout(() => {
861
+ const improvement = (Math.random() * 0.2 + 0.1).toFixed(2);
862
+ showNotification(`${playerName} improved by +${improvement} K/D!`, 'success');
863
+ }, 1500);
864
+ }
865
+
866
+ function handleTalkToPlayer(playerName) {
867
+ showNotification(`Talking to ${playerName}...`, 'info');
868
+ // Simulation d'effet sur le moral
869
+ setTimeout(() => {
870
+ const moraleChange = Math.random() > 0.3 ? 'increased' : 'decreased';
871
+ showNotification(`${playerName}'s morale ${moraleChange}`, moraleChange === 'increased' ? 'success' : 'warning');
872
+ }, 1500);
873
+ }
874
+
875
+ function handleContractExtension(playerName) {
876
+ showNotification(`Negotiating with ${playerName}...`, 'info');
877
+ // Simulation de négociation
878
+ setTimeout(() => {
879
+ const success = Math.random() > 0.2;
880
+ if (success) {
881
+ showNotification(`${playerName} accepted contract extension!`, 'success');
882
+ } else {
883
+ showNotification(`${playerName} wants better terms`, 'warning');
884
+ }
885
+ }, 2000);
886
+ }
887
+
888
+ function handleSignPlayer() {
889
+ showNotification('Searching for available players...', 'info');
890
+ setTimeout(() => {
891
+ showNotification('Player transfer window opens next week', 'warning');
892
+ }, 1500);
893
+ }
894
+
895
+ function handleSponsors() {
896
+ showNotification('Contacting potential sponsors...', 'info');
897
+ setTimeout(() => {
898
+ showNotification('3 sponsorship offers received', 'success');
899
+ }, 1500);
900
+ }
901
+
902
+ function handleFacilityUpgrade(facilityName, cost) {
903
+ if (confirm(`Upgrade ${facilityName} for ${cost.toLocaleString()}?`)) {
904
+ showNotification(`Upgrading ${facilityName}...`, 'info');
905
+ setTimeout(() => {
906
+ showNotification(`${facilityName} upgraded successfully!`, 'success');
907
+ }, 2000);
908
+ }
909
+ }
910
+
911
+ // Toggle simulation modal
912
+ document.querySelectorAll('button').forEach(button => {
913
+ if (button.textContent.includes('Simulate Match')) {
914
+ button.addEventListener('click', () => {
915
+ document.getElementById('simulationModal').classList.remove('hidden');
916
+ });
917
+ }
918
+ });
919
+
920
+ document.getElementById('closeSimulation').addEventListener('click', () => {
921
+ document.getElementById('simulationModal').classList.add('hidden');
922
+ });
923
+
924
+ // Simulate changing money and reputation values
925
+ setInterval(() => {
926
+ const moneyElement = document.getElementById('money');
927
+ const reputationElement = document.getElementById('reputation');
928
+
929
+ // Random small fluctuations
930
+ const moneyChange = Math.floor(Math.random() * 5000) - 2500;
931
+ const repChange = Math.floor(Math.random() * 3) - 1;
932
+
933
+ let currentMoney = parseInt(moneyElement.textContent.replace(/\D/g, ''));
934
+ let currentRep = parseInt(reputationElement.textContent);
935
+
936
+ // Ensure values stay within reasonable bounds
937
+ currentMoney = Math.max(1000000, currentMoney + moneyChange);
938
+ currentRep = Math.min(100, Math.max(50, currentRep + repChange));
939
+
940
+ moneyElement.textContent = '$' + currentMoney.toLocaleString();
941
+ reputationElement.textContent = currentRep;
942
+ }, 5000);
943
+
944
+ // Animate match simulation progress bars
945
+ const progressBars = document.querySelectorAll('.w-full.bg-gray-700.h-2.rounded-full div');
946
+ progressBars.forEach(bar => {
947
+ setInterval(() => {
948
+ const currentWidth = parseInt(bar.style.width);
949
+ const change = Math.floor(Math.random() * 10) - 3; // Random small change
950
+ const newWidth = Math.min(100, Math.max(0, currentWidth + change));
951
+ bar.style.width = newWidth + '%';
952
+
953
+ // Change color based on performance
954
+ if (newWidth > 70) {
955
+ bar.classList.remove('bg-red-600', 'bg-yellow-500');
956
+ bar.classList.add('bg-green-500');
957
+ } else if (newWidth > 40) {
958
+ bar.classList.remove('bg-red-600', 'bg-green-500');
959
+ bar.classList.add('bg-yellow-500');
960
+ } else {
961
+ bar.classList.remove('bg-green-500', 'bg-yellow-500');
962
+ bar.classList.add('bg-red-600');
963
+ }
964
+ }, 1000);
965
+ });
966
+ </script>
967
+ <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=Joykoeur75/cod-manager-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
968
+ </html>