109 lines
4.0 KiB
HTML
109 lines
4.0 KiB
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">
|
|
</head>
|
|
<body>
|
|
<nav class="dashboard-nav">
|
|
<div class="logo">🎾 MonPetitPari.fr</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" onclick="showSection('matches')">🎾 Matches</li>
|
|
<li onclick="showSection('players')">👥 Joueurs</li>
|
|
<li onclick="showSection('leaderboard')">🏆 Classement</li>
|
|
<li 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</h2>
|
|
<div id="matchesList" class="matches-grid"></div>
|
|
</section>
|
|
|
|
<!-- Section Players -->
|
|
<section id="players" class="section">
|
|
<h2>Joueurs du Tournoi</h2>
|
|
<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" 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"></div>
|
|
</div>
|
|
</div>
|
|
<button class="predict-btn" onclick="makePrediction(2)">Joueur 2</button>
|
|
</div>
|
|
<div id="matchupAnalysis" class="matchup-analysis"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/predictions.js"></script>
|
|
</body>
|
|
</html> |