hz4th_coder/worldcup-predictor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

世界杯预测系统 v1.0.0 - 初始版本

Browse Source
This commit is contained in:
hz4th_coder
2026-06-28 15:57:43 +08:00
commit 7a290ef4f7
11 changed files with 2530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/index.html Normal file
View File

@@ -0,0 +1,82 @@
<!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>
<a href="/admin">管理后台</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">&times;</span>
<h2 id="modal-title">比赛详情</h2>
<div id="modal-body"></div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>