Spaces:
Running
Running
le bouton pour deplacer Recent Results n'est pas bien place il faudais qu'il soit en face de celui de gauche sur la page - Follow Up Deployment
5da9fba
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Call of Duty Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @font-face { | |
| font-family: 'Military'; | |
| src: url('https://fonts.cdnfonts.com/css/agency-fb') format('woff2'); | |
| } | |
| .font-military { | |
| font-family: 'Military', sans-serif; | |
| letter-spacing: 1px; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .team-logo { | |
| transition: all 0.3s ease; | |
| } | |
| .team-logo:hover { | |
| transform: scale(1.1); | |
| filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); | |
| } | |
| .player-card { | |
| transition: all 0.2s ease; | |
| } | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .match-animation { | |
| background: linear-gradient(90deg, rgba(255,0,0,0.1), rgba(255,255,255,0.5), rgba(255,0,0,0.1)); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite linear; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| @keyframes fade-in { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fade-out { | |
| from { opacity: 1; transform: translateY(0); } | |
| to { opacity: 0; transform: translateY(-20px); } | |
| } | |
| .animate-fade-in { | |
| animation: fade-in 0.3s ease-out forwards; | |
| } | |
| .animate-fade-out { | |
| animation: fade-out 0.3s ease-in forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white font-sans"> | |
| <!-- Header --> | |
| <header class="bg-black py-4 px-6 border-b border-gray-800 sticky top-0 z-50 bg-opacity-90 bg-[url('https://www.transparenttextures.com/patterns/black-paper.png')]"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-black w-10 h-10 rounded flex items-center justify-center border border-gray-600"> | |
| <i class="fas fa-skull text-yellow-500 text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-yellow-500 to-gray-300 bg-clip-text text-transparent font-military tracking-wider">CALL OF DUTY TEAM COMMANDER</h1> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="hidden md:flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span id="money" class="font-bold">$1,250,000</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-trophy text-yellow-400"></i> | |
| <span id="reputation" class="font-bold">75</span> | |
| </div> | |
| <div class="relative group"> | |
| <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"> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 z-50 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Team Overview --> | |
| ======= | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Team Overview --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">TEAM OVERVIEW</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center space-x-2" onclick="handleSignPlayer()"> | |
| <i class="fas fa-plus"></i> | |
| <span>Sign Player</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center space-x-2" onclick="handleSponsors()"> | |
| <i class="fas fa-bullhorn"></i> | |
| <span>Sponsors</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex flex-col md:flex-row items-center md:items-start md:justify-between"> | |
| <div class="flex flex-col items-center mb-6 md:mb-0"> | |
| <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"> | |
| <span class="text-4xl font-bold bg-gradient-to-r from-red-600 to-yellow-500 bg-clip-text text-transparent">CDM</span> | |
| </div> | |
| <h3 class="text-2xl font-bold">Dominance Esports</h3> | |
| <p class="text-gray-400">Rank: #12 | League: Challengers</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-full md:w-auto"> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-red-500">4</div> | |
| <div class="text-gray-400">Players</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-blue-500">2</div> | |
| <div class="text-gray-400">Staff</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-green-500">3</div> | |
| <div class="text-gray-400">Sponsors</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-yellow-500">12-4</div> | |
| <div class="text-gray-400">Record</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Players Section --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">PLAYERS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <!-- Player 1 --> | |
| <div class="player-card bg-gray-800 rounded-sm overflow-hidden border-l-4 border-yellow-500 bg-opacity-90 bg-[url('https://www.transparenttextures.com/patterns/camo.png')]"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">Alex "Domin8r" Carter</h3> | |
| <p class="text-gray-400 text-sm">Slayer | AR</p> | |
| </div> | |
| <div class="bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">CAPTAIN</div> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>K/D Ratio</span> | |
| <span class="font-bold">1.32</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full mb-1"> | |
| <div class="bg-red-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Consistency</span> | |
| <span class="font-bold">82%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-400">Contract:</span> | |
| <span class="font-bold">2 years</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">Salary:</span> | |
| <span class="font-bold">$12k/mo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-2 flex justify-between"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm" onclick="handleTrainPlayer('Alex \"Domin8r\" Carter')"> | |
| <i class="fas fa-chart-line mr-1"></i> Train | |
| </button> | |
| <button class="text-green-400 hover:text-green-300 text-sm" onclick="handleTalkToPlayer('Alex \"Domin8r\" Carter')"> | |
| <i class="fas fa-comment mr-1"></i> Talk | |
| </button> | |
| <button class="text-yellow-400 hover:text-yellow-300 text-sm" onclick="handleContractExtension('Alex \"Domin8r\" Carter')"> | |
| <i class="fas fa-file-contract mr-1"></i> Extend | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player 2 --> | |
| <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-blue-600"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">Jamie "Anch0r" Lin</h3> | |
| <p class="text-gray-400 text-sm">Anchor | SMG</p> | |
| </div> | |
| <div class="bg-blue-600 text-white px-2 py-1 rounded text-xs font-bold">ICON</div> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Player" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>K/D Ratio</span> | |
| <span class="font-bold">1.18</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full mb-1"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Consistency</span> | |
| <span class="font-bold">79%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-400">Contract:</span> | |
| <span class="font-bold">1.5 years</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">Salary:</span> | |
| <span class="font-bold">$10k/mo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-2 flex justify-between"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm"> | |
| <i class="fas fa-chart-line mr-1"></i> Train | |
| </button> | |
| <button class="text-green-400 hover:text-green-300 text-sm"> | |
| <i class="fas fa-comment mr-1"></i> Talk | |
| </button> | |
| <button class="text-yellow-400 hover:text-yellow-300 text-sm"> | |
| <i class="fas fa-file-contract mr-1"></i> Extend | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player 3 --> | |
| <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-green-600"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">Marcus "Clutch" Donovan</h3> | |
| <p class="text-gray-400 text-sm">Support | Flex</p> | |
| </div> | |
| <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">ROOKIE</div> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>K/D Ratio</span> | |
| <span class="font-bold">1.05</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full mb-1"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Consistency</span> | |
| <span class="font-bold">71%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 71%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-400">Contract:</span> | |
| <span class="font-bold">1 year</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">Salary:</span> | |
| <span class="font-bold">$8k/mo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-2 flex justify-between"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm"> | |
| <i class="fas fa-chart-line mr-1"></i> Train | |
| </button> | |
| <button class="text-green-400 hover:text-green-300 text-sm"> | |
| <i class="fas fa-comment mr-1"></i> Talk | |
| </button> | |
| <button class="text-yellow-400 hover:text-yellow-300 text-sm"> | |
| <i class="fas fa-file-contract mr-1"></i> Extend | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Player 4 --> | |
| <div class="player-card bg-gray-800 rounded-xl overflow-hidden border-l-4 border-purple-600"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">Tyler "Obj3ct" Wright</h3> | |
| <p class="text-gray-400 text-sm">Objective | SMG</p> | |
| </div> | |
| <div class="bg-purple-600 text-white px-2 py-1 rounded text-xs font-bold">VETERAN</div> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>K/D Ratio</span> | |
| <span class="font-bold">0.92</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full mb-1"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 55%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Consistency</span> | |
| <span class="font-bold">88%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-gray-400">Contract:</span> | |
| <span class="font-bold">6 months</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-400">Salary:</span> | |
| <span class="font-bold">$15k/mo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-2 flex justify-between"> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm"> | |
| <i class="fas fa-chart-line mr-1"></i> Train | |
| </button> | |
| <button class="text-green-400 hover:text-green-300 text-sm"> | |
| <i class="fas fa-comment mr-1"></i> Talk | |
| </button> | |
| <button class="text-yellow-400 hover:text-yellow-300 text-sm"> | |
| <i class="fas fa-file-contract mr-1"></i> Extend | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Match --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">UPCOMING MATCH</h2> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-6"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center mr-4"> | |
| <span class="text-xl font-bold">CDM</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Dominance Esports</h3> | |
| <p class="text-gray-400">12-4 | #12 Rank</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 px-6 py-2 rounded-full mb-4 md:mb-0"> | |
| <div class="text-center"> | |
| <div class="text-sm text-gray-400">CDL Challengers</div> | |
| <div class="font-bold">Best of 5 Series</div> | |
| <div class="text-sm">Tomorrow - 7:00 PM EST</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold text-right">Titan Gaming</h3> | |
| <p class="text-gray-400 text-right">14-2 | #8 Rank</p> | |
| </div> | |
| <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center ml-4"> | |
| <span class="text-xl font-bold">TGN</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 flex items-center"> | |
| <i class="fas fa-map-marked-alt mr-2 text-yellow-500"></i> <span class="font-military">MAP STRATEGY</span> | |
| </h4> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 mb-3"> | |
| <option>Select Map</option> | |
| <option>Hardpoint - Raid</option> | |
| <option>Search & Destroy - Standoff</option> | |
| <option>Control - Gavutu</option> | |
| </select> | |
| <textarea class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 h-24" placeholder="Enter your strategy..."></textarea> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 flex items-center"> | |
| <i class="fas fa-users mr-2 text-blue-500"></i> Lineup Decision | |
| </h4> | |
| <div class="mb-3"> | |
| <label class="block text-gray-400 text-sm mb-1">Starting Roster</label> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 mb-2"> | |
| <option>Current Best 4 (65% Win Rate)</option> | |
| <option>Experimental Lineup (42% Win Rate)</option> | |
| <option>Counter Pick (58% vs Titan)</option> | |
| </select> | |
| <div class="text-xs text-gray-400">Predicted Impact: <span class="text-yellow-500">+3% Win Chance</span></div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 text-sm mb-1">Substitution Plan</label> | |
| <select class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 mb-2"> | |
| <option>No Subs (Current: 52% Map 3 Win)</option> | |
| <option>Map 3 Sub (Boost to 58%)</option> | |
| <option>If Losing 0-2 (Moral Boost +5%)</option> | |
| </select> | |
| <div class="text-xs text-gray-400">Predicted Impact: <span class="text-blue-400">+2% Series Win</span></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 flex items-center"> | |
| <i class="fas fa-trophy mr-2 text-yellow-500"></i> Match Prediction | |
| </h4> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span>Dominance Win</span> | |
| <span class="font-bold">42%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 h-3 rounded-full mb-4"> | |
| <div class="bg-red-600 h-3 rounded-full" style="width: 42%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span>Titan Win</span> | |
| <span class="font-bold">58%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 h-3 rounded-full mb-4"> | |
| <div class="bg-blue-600 h-3 rounded-full" style="width: 58%"></div> | |
| </div> | |
| <button class="w-full bg-black hover:bg-gray-900 py-2 rounded-sm font-bold flex items-center justify-center border border-yellow-500 text-yellow-500 font-military tracking-wider"> | |
| <i class="fas fa-play mr-2"></i> Simulate Match | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recent Results --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">RECENT RESULTS</h2> | |
| <div class="relative"> | |
| <div class="flex items-center"> | |
| <button class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-gray-800 hover:bg-gray-700 w-8 h-8 rounded-full flex items-center justify-center text-xl"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-gray-800 hover:bg-gray-700 w-8 h-8 rounded-full flex items-center justify-center text-xl"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto scrollbar-hide scroll-smooth" id="resultsContainer"> | |
| <div class="flex space-x-4" style="min-width: max-content;"> | |
| <!-- Match 1 --> | |
| <div class="bg-gray-800 rounded-sm p-4 min-w-64 border border-gray-700 bg-opacity-90 bg-[url('https://www.transparenttextures.com/patterns/black-paper.png')]"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2"> | |
| <span class="text-xs font-bold">CDM</span> | |
| </div> | |
| <span class="font-bold">Dominance</span> | |
| </div> | |
| <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">W 3-1</div> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-green-500">250-210</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>S&D</span> | |
| <span class="font-bold text-red-500">4-6</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Control</span> | |
| <span class="font-bold text-green-500">3-1</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-green-500">250-195</span> | |
| </div> | |
| </div> | |
| <!-- Match 2 --> | |
| <div class="bg-gray-800 rounded-xl p-4 min-w-64"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2"> | |
| <span class="text-xs font-bold">CDM</span> | |
| </div> | |
| <span class="font-bold">Dominance</span> | |
| </div> | |
| <div class="bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">L 2-3</div> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-green-500">250-230</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>S&D</span> | |
| <span class="font-bold text-red-500">3-6</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Control</span> | |
| <span class="font-bold text-green-500">3-2</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-red-500">230-250</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span>S&D</span> | |
| <span class="font-bold text-red-500">5-6</span> | |
| </div> | |
| </div> | |
| <!-- Match 3 --> | |
| <div class="bg-gray-800 rounded-xl p-4 min-w-64"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2"> | |
| <span class="text-xs font-bold">CDM</span> | |
| </div> | |
| <span class="font-bold">Dominance</span> | |
| </div> | |
| <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">W 3-0</div> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-green-500">250-180</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>S&D</span> | |
| <span class="font-bold text-green-500">6-4</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span>Control</span> | |
| <span class="font-bold text-green-500">3-1</span> | |
| </div> | |
| </div> | |
| <!-- Match 4 --> | |
| <div class="bg-gray-800 rounded-xl p-4 min-w-64"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center mr-2"> | |
| <span class="text-xs font-bold">CDM</span> | |
| </div> | |
| <span class="font-bold">Dominance</span> | |
| </div> | |
| <div class="bg-green-600 text-white px-2 py-1 rounded text-xs font-bold">W 3-2</div> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-red-500">240-250</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>S&D</span> | |
| <span class="font-bold text-green-500">6-5</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Control</span> | |
| <span class="font-bold text-red-500">2-3</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1 text-sm"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold text-green-500">250-210</span> | |
| </div> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span>S&D</span> | |
| <span class="font-bold text-green-500">6-3</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Facilities --> | |
| <section> | |
| <h2 class="text-xl font-bold mb-4">TEAM FACILITIES</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-gamepad mr-2 text-purple-500"></i> Gaming House | |
| </h3> | |
| <div class="bg-gray-700 px-2 py-1 rounded text-xs">Level 2</div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Quality</span> | |
| <span>65/100</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Improves player morale and recovery. Higher levels attract better talent.</p> | |
| <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)"> | |
| <i class="fas fa-arrow-up mr-2"></i> Upgrade ($75,000) | |
| </button> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-desktop mr-2 text-blue-500"></i> Scrim Setup | |
| </h3> | |
| <div class="bg-gray-700 px-2 py-1 rounded text-xs">Level 1</div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Quality</span> | |
| <span>40/100</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Better equipment improves practice efficiency and strategy development.</p> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Upgrade ($50,000) | |
| </button> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-users mr-2 text-green-500"></i> Coaching Staff | |
| </h3> | |
| <div class="bg-gray-700 px-2 py-1 rounded text-xs">Level 1</div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Quality</span> | |
| <span>35/100</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Better coaches improve player development and in-game adjustments.</p> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-arrow-up mr-2"></i> Upgrade ($60,000) | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Statistics Dashboard --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">TEAM ANALYTICS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-blue-500"></i> Performance Metrics | |
| </h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">Avg. K/D Ratio</div> | |
| <div class="text-2xl font-bold">1.12</div> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">Objective Time</div> | |
| <div class="text-2xl font-bold">72%</div> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">First Blood %</div> | |
| <div class="text-2xl font-bold">58%</div> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">Clutch Rate</div> | |
| <div class="text-2xl font-bold">34%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-map-marked-alt mr-2 text-green-500"></i> Map Performance | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Hardpoint</span> | |
| <span class="font-bold">65% Win</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Search & Destroy</span> | |
| <span class="font-bold">52% Win</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 52%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Control</span> | |
| <span class="font-bold">48% Win</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 48%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation (Mobile) --> | |
| <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 z-50"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-red-500"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-400 hover:text-white"> | |
| <i class="fas fa-users text-xl"></i> | |
| <span class="text-xs mt-1">Team</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-400 hover:text-white"> | |
| <i class="fas fa-trophy text-xl"></i> | |
| <span class="text-xs mt-1">Matches</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-400 hover:text-white"> | |
| <i class="fas fa-cog text-xl"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Match Simulation Modal --> | |
| <div id="simulationModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-800 rounded-xl w-full max-w-2xl mx-4 overflow-hidden"> | |
| <div class="bg-gray-900 px-6 py-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">MATCH SIMULATION</h3> | |
| <button id="closeSimulation" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-xl font-bold">CDM</span> | |
| </div> | |
| <div class="font-bold">Dominance</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold match-animation px-6 py-2 rounded-lg">VS</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center mx-auto mb-2"> | |
| <span class="text-xl font-bold">TGN</span> | |
| </div> | |
| <div class="font-bold">Titan</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-bold">Map 1: Hardpoint - Raid</span> | |
| <span class="text-sm text-gray-400">In Progress</span> | |
| </div> | |
| <div class="w-full bg-gray-800 h-2 rounded-full mb-2"> | |
| <div class="bg-red-600 h-2 rounded-full animate-pulse" style="width: 50%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mb-3"> | |
| <span>Dominance</span> | |
| <span>Titan</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 text-xs text-center mb-2"> | |
| <div class="bg-gray-800 p-1 rounded">Kills: 12</div> | |
| <div class="bg-gray-800 p-1 rounded">Deaths: 9</div> | |
| <div class="bg-gray-800 p-1 rounded">Score: 125</div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 text-xs text-center"> | |
| <div class="bg-gray-800 p-1 rounded">Kills: 15</div> | |
| <div class="bg-gray-800 p-1 rounded">Deaths: 8</div> | |
| <div class="bg-gray-800 p-1 rounded">Score: 140</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-pause text-yellow-500 text-xl mb-1"></i> | |
| <span>Timeout</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-user-edit text-blue-500 text-xl mb-1"></i> | |
| <span>Adjust</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-exchange-alt text-green-500 text-xl mb-1"></i> | |
| <span>Substitute</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg flex flex-col items-center justify-center"> | |
| <i class="fas fa-bullhorn text-purple-500 text-xl mb-1"></i> | |
| <span>Motivate</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Fonctions pour les actions des boutons | |
| function showNotification(message, type = 'info') { | |
| const colors = { | |
| info: 'bg-blue-600', | |
| success: 'bg-green-600', | |
| warning: 'bg-yellow-600', | |
| error: 'bg-red-600' | |
| }; | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed top-4 right-4 ${colors[type]} text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade-in`; | |
| notification.textContent = message; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.classList.add('animate-fade-out'); | |
| setTimeout(() => notification.remove(), 500); | |
| }, 3000); | |
| } | |
| function handleTrainPlayer(playerName) { | |
| showNotification(`Training ${playerName}...`, 'info'); | |
| // Simulation d'amélioration aléatoire | |
| setTimeout(() => { | |
| const improvement = (Math.random() * 0.2 + 0.1).toFixed(2); | |
| showNotification(`${playerName} improved by +${improvement} K/D!`, 'success'); | |
| }, 1500); | |
| } | |
| function handleTalkToPlayer(playerName) { | |
| showNotification(`Talking to ${playerName}...`, 'info'); | |
| // Simulation d'effet sur le moral | |
| setTimeout(() => { | |
| const moraleChange = Math.random() > 0.3 ? 'increased' : 'decreased'; | |
| showNotification(`${playerName}'s morale ${moraleChange}`, moraleChange === 'increased' ? 'success' : 'warning'); | |
| }, 1500); | |
| } | |
| function handleContractExtension(playerName) { | |
| showNotification(`Negotiating with ${playerName}...`, 'info'); | |
| // Simulation de négociation | |
| setTimeout(() => { | |
| const success = Math.random() > 0.2; | |
| if (success) { | |
| showNotification(`${playerName} accepted contract extension!`, 'success'); | |
| } else { | |
| showNotification(`${playerName} wants better terms`, 'warning'); | |
| } | |
| }, 2000); | |
| } | |
| function handleSignPlayer() { | |
| showNotification('Searching for available players...', 'info'); | |
| setTimeout(() => { | |
| showNotification('Player transfer window opens next week', 'warning'); | |
| }, 1500); | |
| } | |
| function handleSponsors() { | |
| showNotification('Contacting potential sponsors...', 'info'); | |
| setTimeout(() => { | |
| showNotification('3 sponsorship offers received', 'success'); | |
| }, 1500); | |
| } | |
| function handleFacilityUpgrade(facilityName, cost) { | |
| if (confirm(`Upgrade ${facilityName} for ${cost.toLocaleString()}?`)) { | |
| showNotification(`Upgrading ${facilityName}...`, 'info'); | |
| setTimeout(() => { | |
| showNotification(`${facilityName} upgraded successfully!`, 'success'); | |
| }, 2000); | |
| } | |
| } | |
| // Toggle simulation modal | |
| document.querySelectorAll('button').forEach(button => { | |
| if (button.textContent.includes('Simulate Match')) { | |
| button.addEventListener('click', () => { | |
| document.getElementById('simulationModal').classList.remove('hidden'); | |
| }); | |
| } | |
| }); | |
| document.getElementById('closeSimulation').addEventListener('click', () => { | |
| document.getElementById('simulationModal').classList.add('hidden'); | |
| }); | |
| // Simulate changing money and reputation values | |
| setInterval(() => { | |
| const moneyElement = document.getElementById('money'); | |
| const reputationElement = document.getElementById('reputation'); | |
| // Random small fluctuations | |
| const moneyChange = Math.floor(Math.random() * 5000) - 2500; | |
| const repChange = Math.floor(Math.random() * 3) - 1; | |
| let currentMoney = parseInt(moneyElement.textContent.replace(/\D/g, '')); | |
| let currentRep = parseInt(reputationElement.textContent); | |
| // Ensure values stay within reasonable bounds | |
| currentMoney = Math.max(1000000, currentMoney + moneyChange); | |
| currentRep = Math.min(100, Math.max(50, currentRep + repChange)); | |
| moneyElement.textContent = '$' + currentMoney.toLocaleString(); | |
| reputationElement.textContent = currentRep; | |
| }, 5000); | |
| // Recent results navigation | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const scrollAmount = 300; // Adjust this value as needed | |
| document.querySelectorAll('[class*="fa-chevron"]').forEach(button => { | |
| button.addEventListener('click', () => { | |
| if (button.classList.contains('fa-chevron-left')) { | |
| resultsContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); | |
| } else { | |
| resultsContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| // Touch support for mobile | |
| let touchStartX = 0; | |
| let touchEndX = 0; | |
| resultsContainer.addEventListener('touchstart', e => { | |
| touchStartX = e.changedTouches[0].screenX; | |
| }, {passive: true}); | |
| resultsContainer.addEventListener('touchend', e => { | |
| touchEndX = e.changedTouches[0].screenX; | |
| handleSwipe(); | |
| }, {passive: true}); | |
| function handleSwipe() { | |
| if (touchEndX < touchStartX) { | |
| resultsContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' }); | |
| } | |
| if (touchEndX > touchStartX) { | |
| resultsContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); | |
| } | |
| } | |
| // Animate match simulation progress bars | |
| const progressBars = document.querySelectorAll('.w-full.bg-gray-700.h-2.rounded-full div'); | |
| progressBars.forEach(bar => { | |
| setInterval(() => { | |
| const currentWidth = parseInt(bar.style.width); | |
| const change = Math.floor(Math.random() * 10) - 3; // Random small change | |
| const newWidth = Math.min(100, Math.max(0, currentWidth + change)); | |
| bar.style.width = newWidth + '%'; | |
| // Change color based on performance | |
| if (newWidth > 70) { | |
| bar.classList.remove('bg-red-600', 'bg-yellow-500'); | |
| bar.classList.add('bg-green-500'); | |
| } else if (newWidth > 40) { | |
| bar.classList.remove('bg-red-600', 'bg-green-500'); | |
| bar.classList.add('bg-yellow-500'); | |
| } else { | |
| bar.classList.remove('bg-green-500', 'bg-yellow-500'); | |
| bar.classList.add('bg-red-600'); | |
| } | |
| }, 1000); | |
| }); | |
| </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=Joykoeur75/cod-manager-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |