File: /home/bigfreeodds/public_html/wp-content/public/scores/match-detail.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Match Detail — Live Scores</title>
<meta name="description" content="Live match tracker, stats, lineups, events and head-to-head." />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body data-page="match">
<div class="app">
<div class="topbar-back">
<a class="back" href="index.html" aria-label="Back">‹</a>
<div class="title" id="match-title">MATCH</div>
<button class="share" aria-label="Share">↑</button>
</div>
<!-- Score hero (populated from ?id=) -->
<div class="score-hero" id="match-hero"></div>
<div class="detail-grid">
<div>
<!-- Tracker -->
<div class="card">
<div class="card-title">MATCH TRACKER <span class="expand">⤢</span></div>
<div class="pitch">
<div class="center-circle"></div>
<div class="ball"></div>
</div>
<div class="timeline">
<span class="tick"></span><span class="tick evt"></span><span class="tick"></span>
<span class="tick"></span><span class="tick"></span><span class="tick evt"></span>
<span class="tick"></span><span class="tick"></span><span class="tick evt"></span>
<span class="tick evt"></span><span class="tick"></span><span class="tick"></span>
</div>
<div class="timeline-axis"><span>0</span><span>20</span><span>45</span><span>90</span><span>120</span></div>
</div>
<!-- Tabs — horizontally scrollable on mobile / small screens.
Order matches user spec: Stats, Lineups, H2H, Events, Predictions,
Insight, Standings, Fixtures, Results. -->
<div class="tabs" role="tablist">
<button class="tab active" data-tab="stats">STATS</button>
<button class="tab" data-tab="lineups">LINEUPS</button>
<button class="tab" data-tab="h2h">H2H</button>
<button class="tab" data-tab="events">EVENTS</button>
<button class="tab" data-tab="predictions">PREDICTIONS</button>
<button class="tab" data-tab="odds">INSIGHT</button>
<button class="tab" data-tab="standings">STANDINGS</button>
<button class="tab" data-tab="fixtures">FIXTURES</button>
<button class="tab" data-tab="results">RESULTS</button>
</div>
<div class="tab-panel active" id="panel-stats">
<div class="card"><div class="card-title">STATS</div><div id="stats-list"></div></div>
</div>
<div class="tab-panel" id="panel-lineups"></div>
<div class="tab-panel" id="panel-h2h">
<div class="card"><div class="card-title">PREVIOUS MEETINGS</div>
<div id="h2h-list" style="display:flex;flex-direction:column;gap:6px;"></div>
</div>
</div>
<div class="tab-panel" id="panel-events">
<div class="card"><div class="card-title">MATCH EVENTS</div>
<div class="events" id="events-list"></div>
</div>
</div>
<div class="tab-panel" id="panel-predictions"></div>
<div class="tab-panel" id="panel-odds"></div>
<div class="tab-panel" id="panel-standings"></div>
<div class="tab-panel" id="panel-fixtures"></div>
<div class="tab-panel" id="panel-results"></div>
</div>
<div>
<div class="card">
<div class="card-title">MATCH INFO</div>
<div class="odds-info" id="match-info"></div>
<p style="font-size:11px;color:var(--muted);margin-top:10px;">Informational stats only. No betting.</p>
</div>
</div>
</div>
</div>
<nav class="bottom-nav">
<a href="index.html"><span class="ic">⌂</span><span>Home</span></a>
<a href="live.html"><span class="ic">▶</span><span>Live</span></a>
<a href="favourites.html"><span class="ic">★</span><span>Favourites</span></a>
<a href="leagues.html"><span class="ic">🏆</span><span>Leagues</span></a>
<a href="profile.html"><span class="ic">◉</span><span>Profile</span></a>
</nav>
<script src="assets/js/app.js"></script>
</body>
</html>