127 lines
5.8 KiB
HTML
127 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - MonPetitPari.fr</title>
|
|
<link rel="stylesheet" href="css/dashboard.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="dashboard-nav">
|
|
<div class="logo">🎾 MonPetitPari.fr <span style="font-size: 0.9rem; font-weight: normal;">- Roland Garros 2026</span></div>
|
|
<div class="user-info">
|
|
<span id="userName">Utilisateur</span>
|
|
<span id="userPoints" class="points">0 pts</span>
|
|
<button onclick="logout()" class="btn-logout">Déconnexion</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="dashboard-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<ul>
|
|
<li class="active" id="tab-matches" onclick="showSection('matches')">📅 Matches</li>
|
|
<li id="tab-players" onclick="showSection('players')">🏃♂️ Joueurs</li>
|
|
<li id="tab-leaderboard" onclick="showSection('leaderboard')">🏆 Classement</li>
|
|
<li id="tab-stats" onclick="showSection('stats')">📊 Mes Stats</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Section Matches -->
|
|
<section id="matches" class="section active">
|
|
<h2>Matches du Tournoi 2026</h2>
|
|
<div class="filter-bar" style="margin-bottom: 1.5rem; display: flex; gap: 1rem;">
|
|
<button class="filter-btn active" id="btn-all-matches" onclick="filterMatchesCategory('all')">Tous</button>
|
|
<button class="filter-btn" id="btn-mens-matches" onclick="filterMatchesCategory('Messieurs')">Simple Messieurs</button>
|
|
<button class="filter-btn" id="btn-womens-matches" onclick="filterMatchesCategory('Dames')">Simple Dames</button>
|
|
</div>
|
|
<div id="matchesList" class="matches-grid"></div>
|
|
</section>
|
|
|
|
<!-- Section Players -->
|
|
<section id="players" class="section">
|
|
<h2>Joueurs & Joueuses Engagés</h2>
|
|
<div class="search-filter-container" style="margin-bottom: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
|
|
<input type="text" id="playerSearch" placeholder="🔍 Rechercher un joueur ou une nationalité..." oninput="handlePlayerSearch()" style="flex: 1; padding: 0.8rem; border-radius: 8px; border: 1px solid #ddd; font-family: inherit;">
|
|
<select id="genderFilter" onchange="handlePlayerSearch()" style="padding: 0.8rem; border-radius: 8px; border: 1px solid #ddd; font-family: inherit;">
|
|
<option value="all">Toutes les catégories</option>
|
|
<option value="Messieurs">Simple Messieurs</option>
|
|
<option value="Dames">Simple Dames</option>
|
|
</select>
|
|
</div>
|
|
<div id="playersGrid" class="players-grid"></div>
|
|
</section>
|
|
|
|
<!-- Section Leaderboard -->
|
|
<section id="leaderboard" class="section">
|
|
<h2>Classement des Pronostiqueurs</h2>
|
|
<table class="leaderboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Rang</th>
|
|
<th>Joueur</th>
|
|
<th>Points</th>
|
|
<th>Pronostics justes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="leaderboardBody"></tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- Section Stats -->
|
|
<section id="stats" class="section">
|
|
<h2>Mes Statistiques</h2>
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h3>Pronostics totaux</h3>
|
|
<p id="totalPredictions">0</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Taux de réussite</h3>
|
|
<p id="successRate">0%</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Meilleure série</h3>
|
|
<p id="bestStreak">0</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal de pronostic -->
|
|
<div id="predictionModal" class="modal">
|
|
<div class="modal-content prediction-modal">
|
|
<span class="close" onclick="closePredictionModal()">×</span>
|
|
<h2>Faire un pronostic</h2>
|
|
<div id="matchDetails"></div>
|
|
|
|
<div class="prediction-options">
|
|
<button class="predict-btn" id="predictBtn1" onclick="makePrediction(1)">Joueur 1</button>
|
|
<div class="probabilities">
|
|
<div class="prob-bar">
|
|
<div id="prob1" class="prob-fill"></div>
|
|
</div>
|
|
<span id="probText1">50%</span>
|
|
</div>
|
|
<div class="probabilities">
|
|
<span id="probText2">50%</span>
|
|
<div class="prob-bar">
|
|
<div id="prob2" class="prob-fill" style="background: #e85d04;"></div>
|
|
</div>
|
|
</div>
|
|
<button class="predict-btn" id="predictBtn2" onclick="makePrediction(2)">Joueur 2</button>
|
|
</div>
|
|
|
|
<div id="matchupAnalysis" class="matchup-analysis"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chargement ordonné des scripts pour éviter les erreurs de dépendances -->
|
|
<script src="js/data.js"></script>
|
|
<script src="js/prediction.js"></script>
|
|
</body>
|
|
</html> |