81 lines
2.8 KiB
HTML
81 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>世界杯预测系统</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🏆 世界杯预测系统</h1>
|
|
<nav>
|
|
<a href="/" class="active">世界杯预测系统</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- 统计概览 -->
|
|
<section class="stats-overview">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="total-matches">0</div>
|
|
<div class="stat-label">总比赛数</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="upcoming-matches">0</div>
|
|
<div class="stat-label">即将进行</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="active-algorithms">0</div>
|
|
<div class="stat-label">预测算法</div>
|
|
</div>
|
|
<div class="stat-card highlight">
|
|
<div class="stat-value" id="overall-accuracy">0%</div>
|
|
<div class="stat-label">总体准确率</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 标签切换 -->
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="upcoming">即将进行的比赛</button>
|
|
<button class="tab-btn" data-tab="finished">已完成的比赛</button>
|
|
<button class="tab-btn" data-tab="algorithms">算法排行</button>
|
|
</div>
|
|
|
|
<!-- 即将进行的比赛 -->
|
|
<section id="upcoming-tab" class="tab-content active">
|
|
<h2>📅 即将进行的比赛</h2>
|
|
<div id="upcoming-matches-list" class="matches-grid">
|
|
<!-- 动态加载 -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 已完成的比赛 -->
|
|
<section id="finished-tab" class="tab-content">
|
|
<h2>✅ 已完成的比赛</h2>
|
|
<div id="finished-matches-list" class="matches-grid">
|
|
<!-- 动态加载 -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 算法排行 -->
|
|
<section id="algorithms-tab" class="tab-content">
|
|
<h2>🤖 预测算法排行榜</h2>
|
|
<div id="algorithms-list" class="algorithms-grid">
|
|
<!-- 动态加载 -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 比赛详情弹窗 -->
|
|
<div id="match-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h2 id="modal-title">比赛详情</h2>
|
|
<div id="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |