Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Football Coach Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .player-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| #sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| #sidebar { | |
| transform: translateX(-100%); | |
| position: absolute; | |
| z-index: 100; | |
| height: 100vh; | |
| } | |
| #sidebar.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="bg-blue-800 text-white w-64 space-y-6 py-7 px-2 fixed inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0"> | |
| <div class="flex items-center space-x-2 px-4"> | |
| <i class="fas fa-futbol text-2xl text-yellow-400"></i> | |
| <span class="text-2xl font-extrabold">CoachPro</span> | |
| </div> | |
| <nav> | |
| <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white active-nav" onclick="showSection('dashboard')"> | |
| <i class="fas fa-tachometer-alt mr-3"></i>Tableau de bord | |
| </a> | |
| <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white" onclick="showSection('team')"> | |
| <i class="fas fa-users mr-3"></i>Mon équipe | |
| </a> | |
| <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white" onclick="showSection('calendar')"> | |
| <i class="fas fa-calendar-alt mr-3"></i>Calendrier | |
| </a> | |
| <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white" onclick="showSection('stats')"> | |
| <i class="fas fa-chart-bar mr-3"></i>Statistiques | |
| </a> | |
| <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white" onclick="showSection('training')"> | |
| <i class="fas fa-running mr-3"></i>Entraînements | |
| </a> | |
| <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white" onclick="showSection('tactics')"> | |
| <i class="fas fa-chess-board mr-3"></i>Tactiques | |
| </a> | |
| </nav> | |
| <div class="absolute bottom-0 w-full px-4 py-6"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Coach" class="w-10 h-10 rounded-full border-2 border-yellow-400"> | |
| <div> | |
| <p class="font-semibold">Coach Dupont</p> | |
| <p class="text-xs text-blue-200">U15 - AS Football</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="flex items-center justify-between px-4 py-4"> | |
| <div class="flex items-center"> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-500 hover:text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 id="section-title" class="ml-4 text-xl font-bold text-gray-800">Tableau de bord</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-500 hover:text-gray-600"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4 bg-gray-100"> | |
| <!-- Dashboard Section --> | |
| <div id="dashboard" class="section-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Joueurs</p> | |
| <h3 class="text-2xl font-bold" id="player-count">16</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-calendar-check text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Prochain match</p> | |
| <h3 class="text-2xl font-bold">15/06</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-trophy text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Victoires</p> | |
| <h3 class="text-2xl font-bold">8</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Performance</p> | |
| <h3 class="text-2xl font-bold">78%</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <h2 class="text-lg font-semibold mb-4">Prochains matchs</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adversaire</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lieu</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Compétition</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">FC Lyon</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Extérieur</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Championnat</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">22/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Paris United</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Domicile</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Coupe</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">29/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Marseille FC</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Extérieur</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Championnat</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Top Performeurs</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Jean Martin</span> | |
| <span class="text-sm font-medium">8.7</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full stat-bar" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Pierre Dubois</span> | |
| <span class="text-sm font-medium">8.2</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full stat-bar" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Thomas Leroy</span> | |
| <span class="text-sm font-medium">7.9</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full stat-bar" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-lg font-semibold mb-4">Derniers résultats</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">AS Football</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">3-1</span> | |
| <span class="font-medium">FC Toulouse</span> | |
| </div> | |
| <p class="text-sm text-gray-500">10/06/2023 - Championnat</p> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">AS Football</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-sm">0-2</span> | |
| <span class="font-medium">Olympique Lyon</span> | |
| </div> | |
| <p class="text-sm text-gray-500">03/06/2023 - Coupe</p> | |
| </div> | |
| <div class="border rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Stade Rennes</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">1-3</span> | |
| <span class="font-medium">AS Football</span> | |
| </div> | |
| <p class="text-sm text-gray-500">27/05/2023 - Championnat</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Section --> | |
| <div id="team" class="section-content hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Mon équipe</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center" onclick="openAddPlayerModal()"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un joueur | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Player cards will be generated here --> | |
| </div> | |
| </div> | |
| <!-- Calendar Section --> | |
| <div id="calendar" class="section-content hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Calendrier</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center" onclick="openAddEventModal()"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un événement | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between mb-4"> | |
| <button class="px-4 py-2 bg-gray-200 rounded-lg"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <h3 class="text-xl font-semibold">Juin 2023</h3> | |
| <button class="px-4 py-2 bg-gray-200 rounded-lg"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-7 gap-2 mb-2"> | |
| <div class="text-center font-semibold py-2">Lun</div> | |
| <div class="text-center font-semibold py-2">Mar</div> | |
| <div class="text-center font-semibold py-2">Mer</div> | |
| <div class="text-center font-semibold py-2">Jeu</div> | |
| <div class="text-center font-semibold py-2">Ven</div> | |
| <div class="text-center font-semibold py-2">Sam</div> | |
| <div class="text-center font-semibold py-2">Dim</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-2" id="calendar-days"> | |
| <!-- Calendar days will be generated here --> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold mb-4">Événements à venir</h3> | |
| <div class="space-y-4" id="upcoming-events"> | |
| <!-- Events will be generated here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div id="stats" class="section-content hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Statistiques</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold mb-4">Statistiques générales</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Victoires</span> | |
| <span class="text-sm font-medium">8 (53%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full stat-bar" style="width: 53%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Nuls</span> | |
| <span class="text-sm font-medium">4 (27%)</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <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=Diiogo/11connectte" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |