Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <script src="embed-resize.js" defer></script> | |
| <title>WIFX Match Outcome Index</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --green: hsl(120,65%,42%); | |
| --green-light: hsl(120,55%,93%); | |
| --green-dark: hsl(120,65%,22%); | |
| --teal: #0D9488; | |
| --teal-light: #F0FDFA; | |
| --navy: #111A29; | |
| --muted: #9392A1; | |
| --border: #E3E9EB; | |
| --bg: #F4F6F9; | |
| --white: #FFFFFF; | |
| --red: #C0392B; | |
| --red-bg: #FDECEA; | |
| --amber: #B07A00; | |
| --amber-bg: #FFF8E6; | |
| --orange: #EA580C; | |
| --orange-light:#FFF3E8; | |
| --slate: #64748B; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-size: 14px; | |
| background: var(--bg); | |
| color: var(--navy); | |
| -webkit-font-smoothing: antialiased; | |
| min-height: 100%; | |
| } | |
| h1, h2, h3, h4, .font-brand { font-family: 'Instrument Sans', 'DM Sans', sans-serif; } | |
| /* ── Page header ── */ | |
| .page-header { | |
| background: var(--white); | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; top: 0; z-index: 100; | |
| box-shadow: 0 1px 4px rgba(0,0,0,0.06); | |
| } | |
| .header-inner { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0.85rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .header-title-group { flex: 1; min-width: 0; } | |
| .header-title { | |
| font-family: 'Instrument Sans', sans-serif; | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| color: var(--navy); | |
| line-height: 1.2; | |
| } | |
| .header-subtitle { | |
| font-size: 0.72rem; | |
| color: var(--muted); | |
| margin-top: 2px; | |
| } | |
| .header-stats { | |
| display: flex; | |
| gap: 0.6rem; | |
| flex-shrink: 0; | |
| } | |
| .stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| padding: 0.45rem 0.85rem; | |
| border-radius: 10px; | |
| min-width: 130px; | |
| } | |
| .stat-card-green { background: var(--green-light); } | |
| .stat-card-teal { background: var(--teal-light); } | |
| .stat-pct { | |
| font-family: 'Instrument Sans', sans-serif; | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .stat-card-green .stat-pct { color: var(--green); } | |
| .stat-card-teal .stat-pct { color: var(--teal); } | |
| .stat-trend { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .stat-card-green .stat-trend { color: var(--green); } | |
| .stat-card-teal .stat-trend { color: var(--teal); } | |
| .stat-label { | |
| font-size: 0.65rem; | |
| font-weight: 500; | |
| color: var(--muted); | |
| line-height: 1.25; | |
| max-width: 110px; | |
| } | |
| .stat-sub { | |
| font-size: 0.6rem; | |
| font-weight: 500; | |
| color: var(--muted); | |
| margin-top: 1px; | |
| max-width: 110px; | |
| } | |
| /* ── Section header w/ legend ── */ | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 0.7rem; | |
| } | |
| .section-title-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .section-title { | |
| font-family: 'Instrument Sans', sans-serif; | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: var(--navy); | |
| } | |
| .legend { | |
| display: flex; | |
| gap: 0.7rem; | |
| align-items: center; | |
| } | |
| .legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .legend-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .legend-win { background: var(--green); } | |
| .legend-draw { background: var(--amber); } | |
| .legend-loss { background: var(--muted); } | |
| /* ── Content area ── */ | |
| .content-wrap { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 1.2rem 1.5rem 3rem; | |
| } | |
| /* ── Toolbar ── */ | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .tab-bar { | |
| display: flex; | |
| background: var(--white); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 3px; | |
| gap: 2px; | |
| } | |
| .tab-btn { | |
| font-family: 'DM Sans', sans-serif; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| padding: 0.4rem 0.9rem; | |
| border: none; | |
| background: transparent; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| color: var(--muted); | |
| transition: background 0.15s, color 0.15s; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { color: var(--navy); } | |
| .tab-btn.active { background: var(--green); color: var(--white); } | |
| .search-wrap { | |
| position: relative; | |
| flex: 1; | |
| max-width: 320px; | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--muted); | |
| pointer-events: none; | |
| font-size: 0.9rem; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 0.45rem 0.75rem 0.45rem 2.1rem; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| font-family: 'DM Sans', sans-serif; | |
| font-size: 0.8rem; | |
| color: var(--navy); | |
| background: var(--white); | |
| outline: none; | |
| transition: border-color 0.15s; | |
| } | |
| .search-input:focus { border-color: var(--green); } | |
| .search-input::placeholder { color: var(--muted); } | |
| /* ── Results count ── */ | |
| .results-count { | |
| font-size: 0.75rem; | |
| color: var(--muted); | |
| margin-bottom: 0.9rem; | |
| } | |
| .results-count strong { color: var(--navy); } | |
| /* ── Match grid ── */ | |
| .match-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 0.85rem; | |
| } | |
| @media (max-width: 900px) { .match-grid { grid-template-columns: repeat(2, 1fr); } } | |
| @media (max-width: 560px) { .match-grid { grid-template-columns: 1fr; } } | |
| .match-card { | |
| background: var(--white); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| transition: box-shadow 0.15s; | |
| } | |
| .match-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| padding: 0.55rem 0.75rem 0.45rem; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--bg); | |
| } | |
| .card-league { | |
| font-size: 0.62rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .conf-badge { | |
| display: inline-flex; | |
| align-items: stretch; | |
| font-size: 0.58rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| border: 1px solid var(--border); | |
| border-radius: 5px; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| line-height: 1; | |
| } | |
| .conf-label { | |
| background: var(--bg); | |
| color: var(--muted); | |
| padding: 4px 7px; | |
| } | |
| .conf-value { | |
| background: var(--white); | |
| color: var(--navy); | |
| padding: 4px 7px; | |
| border-left: 1px solid var(--border); | |
| } | |
| .card-date { | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| color: var(--muted); | |
| flex-shrink: 0; | |
| } | |
| .card-body { | |
| padding: 0.65rem 0.8rem 0.75rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.55rem; | |
| flex: 1; | |
| } | |
| .team-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 0.5rem; | |
| } | |
| .team-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1px; | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .ha-label { | |
| font-size: 0.58rem; | |
| font-weight: 700; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .team-name { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: var(--navy); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .team-name.outcome-win { color: var(--green); } | |
| .team-name.outcome-draw { color: var(--amber); } | |
| .team-name.outcome-loss { color: var(--muted); } | |
| .outcome-pill { | |
| font-size: 0.6rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| padding: 3px 9px; | |
| border-radius: 5px; | |
| flex-shrink: 0; | |
| } | |
| .pill-win { background: var(--green-light); color: var(--green); } | |
| .pill-draw { background: var(--amber-bg); color: var(--amber); } | |
| .pill-loss { background: rgba(147,146,161,.12); color: var(--muted); } | |
| /* ── Empty state ── */ | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: 3rem 1rem; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| } | |
| /* ── Recent results table ── */ | |
| .results-table-wrap { | |
| background: var(--white); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .results-table { | |
| width: 100%; | |
| min-width: 720px; | |
| border-collapse: collapse; | |
| font-size: 0.8rem; | |
| } | |
| .results-table thead tr { | |
| border-bottom: 1px solid var(--border); | |
| background: var(--bg); | |
| } | |
| .results-table th { | |
| padding: 0.6rem 0.9rem; | |
| text-align: left; | |
| font-size: 0.62rem; | |
| font-weight: 700; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| white-space: nowrap; | |
| } | |
| .results-table td { | |
| padding: 0.6rem 0.9rem; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: middle; | |
| color: var(--navy); | |
| } | |
| .results-table tbody tr:last-child td { border-bottom: none; } | |
| .results-table tbody tr:hover td { background: var(--bg); } | |
| .col-date { color: var(--muted); font-size: 0.75rem; white-space: nowrap; } | |
| .col-league { font-size: 0.72rem; color: var(--muted); white-space: nowrap; } | |
| .col-team { font-weight: 500; } | |
| .col-team .team-cell { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } | |
| .col-favored { font-weight: 600; } | |
| .col-favored .draw-label { font-style: italic; color: var(--muted); font-weight: 400; } | |
| .col-score { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } | |
| .col-result .team-cell { max-width: 110px; } | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| padding: 3px 8px; | |
| border-radius: 20px; | |
| white-space: nowrap; | |
| } | |
| .status-pill.correct { background: var(--green-light); color: var(--green); } | |
| .status-pill.incorrect { background: var(--red-bg); color: var(--red); } | |
| .status-pill.pending { background: rgba(147,146,161,.1); color: var(--muted); } | |
| .status-icon { font-style: normal; } | |
| .status-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .status-pill.pending .status-dot { background: var(--muted); } | |
| /* ── Pagination ── */ | |
| .pagination { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.7rem 1rem; | |
| border-top: 1px solid var(--border); | |
| background: var(--bg); | |
| } | |
| .page-info { font-size: 0.73rem; color: var(--muted); } | |
| .page-btns { display: flex; gap: 4px; } | |
| .page-btn { | |
| font-family: 'DM Sans', sans-serif; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--white); | |
| color: var(--navy); | |
| cursor: pointer; | |
| transition: background 0.12s; | |
| } | |
| .page-btn:hover:not(:disabled) { background: var(--bg); } | |
| .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .page-btn.active { background: var(--green); color: var(--white); border-color: var(--green); } | |
| /* ── Loading ── */ | |
| .loading { | |
| text-align: center; | |
| padding: 3rem; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| grid-column: 1 / -1; | |
| } | |
| /* ── View toggles ── */ | |
| #view-upcoming { display: block; } | |
| #view-recent { display: none; } | |
| /* ── Mobile ── */ | |
| @media (max-width: 480px) { | |
| .header-inner { padding: 0.6rem 0.75rem; gap: 0.6rem; } | |
| .header-title { font-size: 1rem; } | |
| .header-subtitle { font-size: 0.65rem; } | |
| .header-stats { gap: 0.4rem; flex-wrap: wrap; width: 100%; } | |
| .stat-card { min-width: 0; padding: 0.4rem 0.6rem; gap: 0.4rem; flex: 1 1 140px; } | |
| .stat-pct { font-size: 1.05rem; } | |
| .stat-label, .stat-sub { max-width: none; } | |
| .content-wrap { padding: 0.85rem 0.75rem 2rem; } | |
| .toolbar { flex-direction: column; align-items: stretch; gap: 0.55rem; margin-bottom: 0.75rem; } | |
| .tab-bar { width: 100%; } | |
| .tab-btn { flex: 1; padding: 0.45rem 0.5rem; font-size: 0.78rem; } | |
| .search-wrap { max-width: none; } | |
| .section-title { font-size: 0.95rem; } | |
| .legend { gap: 0.5rem; } | |
| .pagination { padding: 0.6rem 0.75rem; flex-wrap: wrap; gap: 0.4rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ── Sticky Header ── --> | |
| <header class="page-header"> | |
| <div class="header-inner"> | |
| <div class="header-title-group"> | |
| <div class="header-title font-brand">WIFX Match Outcome Index</div> | |
| <div class="header-subtitle">Win, draw, and loss probabilities</div> | |
| </div> | |
| <div class="header-stats"> | |
| <div class="stat-card stat-card-green"> | |
| <div> | |
| <div style="display:flex;align-items:baseline;gap:4px"> | |
| <span class="stat-pct" id="stat-high-conf">—</span> | |
| <span class="stat-trend">↑</span> | |
| </div> | |
| <div class="stat-label">High confidence success rate</div> | |
| </div> | |
| </div> | |
| <div class="stat-card stat-card-teal"> | |
| <div> | |
| <div style="display:flex;align-items:baseline;gap:4px"> | |
| <span class="stat-pct" id="stat-accuracy">—</span> | |
| <span class="stat-trend">↑</span> | |
| </div> | |
| <div class="stat-label">Model Accuracy</div> | |
| <div class="stat-sub" id="stat-total">—</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ── Main content ── --> | |
| <div class="content-wrap"> | |
| <!-- Toolbar --> | |
| <div class="toolbar"> | |
| <div class="tab-bar"> | |
| <button class="tab-btn active" id="tab-upcoming" onclick="switchTab('upcoming')">Upcoming Matches</button> | |
| <button class="tab-btn" id="tab-recent" onclick="switchTab('recent')">Recent Results</button> | |
| </div> | |
| <div class="search-wrap"> | |
| <span class="search-icon">🔍</span> | |
| <input class="search-input" id="search-input" type="search" placeholder="Search teams or leagues…" oninput="onSearch()" /> | |
| </div> | |
| </div> | |
| <!-- Upcoming matches view --> | |
| <div id="view-upcoming"> | |
| <div class="section-header"> | |
| <div class="section-title-row"> | |
| <h2 class="section-title">Upcoming Matches</h2> | |
| <div class="legend"> | |
| <span class="legend-item"><span class="legend-dot legend-win"></span>Win</span> | |
| <span class="legend-item"><span class="legend-dot legend-draw"></span>Draw</span> | |
| <span class="legend-item"><span class="legend-dot legend-loss"></span>Loss</span> | |
| </div> | |
| </div> | |
| <div class="results-count" id="upcoming-count" style="margin-bottom:0"></div> | |
| </div> | |
| <div class="match-grid" id="upcoming-grid"> | |
| <div class="loading">Loading predictions…</div> | |
| </div> | |
| </div> | |
| <!-- Recent results view --> | |
| <div id="view-recent"> | |
| <div class="results-count" id="recent-count"></div> | |
| <div class="results-table-wrap"> | |
| <table class="results-table"> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>League</th> | |
| <th>Home</th> | |
| <th>Away</th> | |
| <th>Favored</th> | |
| <th>Score</th> | |
| <th>Result</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody id="recent-tbody"></tbody> | |
| </table> | |
| <div class="pagination" id="pagination" style="display:none"> | |
| <div class="page-info" id="page-info"></div> | |
| <div class="page-btns" id="page-btns"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const PAGE_SIZE = 25; | |
| // ── State ── | |
| let allUpcoming = []; | |
| let allPast = []; | |
| let filteredUp = []; | |
| let filteredPast = []; | |
| let currentTab = 'upcoming'; | |
| let currentPage = 1; | |
| // ── Helpers ── | |
| function stripW(name) { | |
| return (name || '').replace(/ \(W\)$/, ''); | |
| } | |
| function fmtDate(iso) { | |
| if (!iso) return '—'; | |
| const [y, m, d] = iso.split('-'); | |
| return new Date(+y, +m - 1, +d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); | |
| } | |
| // ── Tab switch ── | |
| function switchTab(tab) { | |
| currentTab = tab; | |
| currentPage = 1; | |
| document.getElementById('tab-upcoming').classList.toggle('active', tab === 'upcoming'); | |
| document.getElementById('tab-recent').classList.toggle('active', tab === 'recent'); | |
| document.getElementById('view-upcoming').style.display = tab === 'upcoming' ? 'block' : 'none'; | |
| document.getElementById('view-recent').style.display = tab === 'recent' ? 'block' : 'none'; | |
| applyFilter(); | |
| } | |
| // ── Search ── | |
| function onSearch() { | |
| currentPage = 1; | |
| applyFilter(); | |
| } | |
| function matchesQuery(obj, q) { | |
| if (!q) return true; | |
| const needle = q.toLowerCase(); | |
| return [ | |
| obj.home_team, obj.away_team, | |
| obj.home_wifx_name, obj.away_wifx_name, | |
| obj.league, | |
| obj.predicted_winner, obj.actual_winner, | |
| ].some(v => v && v.toLowerCase().includes(needle)); | |
| } | |
| function applyFilter() { | |
| const q = document.getElementById('search-input').value.trim(); | |
| if (currentTab === 'upcoming') { | |
| filteredUp = allUpcoming.filter(m => matchesQuery(m, q)); | |
| renderUpcoming(); | |
| } else { | |
| filteredPast = allPast.filter(r => matchesQuery(r, q)); | |
| renderRecent(); | |
| } | |
| } | |
| // ── Render upcoming ── | |
| function renderUpcoming() { | |
| const grid = document.getElementById('upcoming-grid'); | |
| const count = document.getElementById('upcoming-count'); | |
| const total = filteredUp.length; | |
| if (!total) { | |
| count.innerHTML = ''; | |
| grid.innerHTML = '<div class="empty-state">No upcoming matches found.</div>'; | |
| return; | |
| } | |
| count.innerHTML = `Showing <strong>${total}</strong> upcoming match${total !== 1 ? 'es' : ''}`; | |
| grid.innerHTML = filteredUp.map(m => { | |
| const home = stripW(m.home_team); | |
| const away = stripW(m.away_team); | |
| const pHW = m.prob_home_win != null ? Math.round(m.prob_home_win * 100) : null; | |
| const pD = m.prob_draw != null ? Math.round(m.prob_draw * 100) : null; | |
| const pAW = m.prob_away_win != null ? Math.round(m.prob_away_win * 100) : null; | |
| const hasProb = pHW != null && pD != null && pAW != null; | |
| const maxP = hasProb ? Math.max(pHW, pD, pAW) : null; | |
| const homeIsMax = hasProb && pHW === maxP; | |
| const drawIsMax = hasProb && !homeIsMax && pD === maxP; | |
| const awayIsMax = hasProb && !homeIsMax && !drawIsMax && pAW === maxP; | |
| // Per-team outcome: win / draw / loss | |
| const homeOutcome = !hasProb ? 'loss' : drawIsMax ? 'draw' : homeIsMax ? 'win' : 'loss'; | |
| const awayOutcome = !hasProb ? 'loss' : drawIsMax ? 'draw' : awayIsMax ? 'win' : 'loss'; | |
| return `<div class="match-card"> | |
| <div class="card-header"> | |
| <span class="card-league">${m.league}</span> | |
| <span class="conf-badge"><span class="conf-label">Confidence</span><span class="conf-value">${m.confidence}</span></span> | |
| <span class="card-date">${fmtDate(m.match_date)}</span> | |
| </div> | |
| <div class="card-body"> | |
| <div class="team-row"> | |
| <div class="team-info"> | |
| <span class="ha-label">Home</span> | |
| <span class="team-name outcome-${homeOutcome}">${home}</span> | |
| </div> | |
| <span class="outcome-pill pill-${homeOutcome}">${homeOutcome}</span> | |
| </div> | |
| <div class="team-row"> | |
| <div class="team-info"> | |
| <span class="ha-label">Away</span> | |
| <span class="team-name outcome-${awayOutcome}">${away}</span> | |
| </div> | |
| <span class="outcome-pill pill-${awayOutcome}">${awayOutcome}</span> | |
| </div> | |
| </div> | |
| </div>`; | |
| }).join(''); | |
| } | |
| // ── Render recent ── | |
| function renderRecent() { | |
| const tbody = document.getElementById('recent-tbody'); | |
| const count = document.getElementById('recent-count'); | |
| const pagDiv = document.getElementById('pagination'); | |
| const total = filteredPast.length; | |
| if (!total) { | |
| count.innerHTML = ''; | |
| tbody.innerHTML = `<tr><td colspan="8" style="text-align:center;padding:2rem;color:var(--muted)">No results found.</td></tr>`; | |
| pagDiv.style.display = 'none'; | |
| return; | |
| } | |
| const totalPages = Math.ceil(total / PAGE_SIZE); | |
| if (currentPage > totalPages) currentPage = totalPages; | |
| const start = (currentPage - 1) * PAGE_SIZE; | |
| const end = Math.min(start + PAGE_SIZE, total); | |
| const slice = filteredPast.slice(start, end); | |
| count.innerHTML = `Showing <strong>${start + 1}–${end}</strong> of <strong>${total}</strong> result${total !== 1 ? 's' : ''}`; | |
| tbody.innerHTML = slice.map(r => { | |
| const score = r.home_score_actual != null && r.away_score_actual != null | |
| ? `${r.home_score_actual}–${r.away_score_actual}` : '—'; | |
| const actualWinner = r.actual_winner === 'Draw' | |
| ? '<em style="color:var(--muted)">Draw</em>' | |
| : `<span class="team-cell" title="${r.actual_winner || ''}">${stripW(r.actual_winner || '—')}</span>`; | |
| const favored = r.predicted_winner === 'Draw' | |
| ? '<span class="draw-label">Draw</span>' | |
| : `<span class="team-cell" title="${r.predicted_winner || ''}">${stripW(r.predicted_winner || '—')}</span>`; | |
| let statusHtml; | |
| if (r.correct === true) { | |
| statusHtml = `<span class="status-pill correct"><i class="status-icon">✓</i>Correct</span>`; | |
| } else if (r.correct === false) { | |
| statusHtml = `<span class="status-pill incorrect"><i class="status-icon">✗</i>Incorrect</span>`; | |
| } else { | |
| statusHtml = `<span class="status-pill pending"><span class="status-dot"></span>Pending</span>`; | |
| } | |
| return `<tr> | |
| <td class="col-date">${fmtDate(r.match_date)}</td> | |
| <td class="col-league">${r.league || '—'}</td> | |
| <td class="col-team"><span class="team-cell" title="${stripW(r.home_team)}">${stripW(r.home_team)}</span></td> | |
| <td class="col-team"><span class="team-cell" title="${stripW(r.away_team)}">${stripW(r.away_team)}</span></td> | |
| <td class="col-favored">${favored}</td> | |
| <td class="col-score">${score}</td> | |
| <td class="col-result">${actualWinner}</td> | |
| <td>${statusHtml}</td> | |
| </tr>`; | |
| }).join(''); | |
| // Pagination | |
| if (totalPages > 1) { | |
| pagDiv.style.display = 'flex'; | |
| document.getElementById('page-info').textContent = `Page ${currentPage} of ${totalPages}`; | |
| const btnsDiv = document.getElementById('page-btns'); | |
| let btnsHtml = `<button class="page-btn" onclick="goPage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>← Prev</button>`; | |
| let pages = []; | |
| if (totalPages <= 7) { | |
| for (let i = 1; i <= totalPages; i++) pages.push(i); | |
| } else { | |
| pages = [1]; | |
| if (currentPage > 3) pages.push('…'); | |
| for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i); | |
| if (currentPage < totalPages - 2) pages.push('…'); | |
| pages.push(totalPages); | |
| } | |
| for (const p of pages) { | |
| if (p === '…') { | |
| btnsHtml += `<span style="padding:4px 6px;color:var(--muted);font-size:0.75rem">…</span>`; | |
| } else { | |
| btnsHtml += `<button class="page-btn ${p === currentPage ? 'active' : ''}" onclick="goPage(${p})">${p}</button>`; | |
| } | |
| } | |
| btnsHtml += `<button class="page-btn" onclick="goPage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>Next →</button>`; | |
| btnsDiv.innerHTML = btnsHtml; | |
| } else { | |
| pagDiv.style.display = 'none'; | |
| } | |
| } | |
| function goPage(n) { | |
| currentPage = n; | |
| renderRecent(); | |
| document.getElementById('view-recent').scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| // ── Stats ── | |
| function computeStats(upcoming, accuracy, training) { | |
| // High-confidence hit rate: correct High predictions / total High predictions | |
| const h = accuracy?.by_confidence?.High; | |
| const hiPct = (h && h.total > 0) ? Math.round((h.correct / h.total) * 100) : null; | |
| document.getElementById('stat-high-conf').textContent = hiPct != null ? hiPct + '%' : '—'; | |
| // Overall success rate = highest training (CV) accuracy across candidate models; | |
| // sub-line shows the size of the training set rather than the live-prediction sample. | |
| const trainPct = training?.pct; | |
| document.getElementById('stat-accuracy').textContent = | |
| trainPct != null ? trainPct + '%' : '—'; | |
| const nTrain = training?.n_train; | |
| document.getElementById('stat-total').textContent = | |
| nTrain != null ? `Based on ${nTrain.toLocaleString()} training match${nTrain === 1 ? '' : 'es'}` : '—'; | |
| } | |
| // ── Load & init ── | |
| async function init() { | |
| try { | |
| const data = await fetch('output/wifx_predictions.json?v=' + Date.now(), { cache: 'no-cache' }).then(r => { | |
| if (!r.ok) throw new Error('HTTP ' + r.status); | |
| return r.json(); | |
| }); | |
| for (const [league, dateMap] of Object.entries(data.leagues || {})) { | |
| for (const [dt, matches] of Object.entries(dateMap)) { | |
| for (const m of matches) { | |
| allUpcoming.push({ ...m, league, match_date: dt }); | |
| } | |
| } | |
| } | |
| allUpcoming.sort((a, b) => | |
| a.match_date.localeCompare(b.match_date) || a.league.localeCompare(b.league) | |
| ); | |
| allPast = (data.past_results || []).slice(); | |
| filteredUp = [...allUpcoming]; | |
| filteredPast = [...allPast]; | |
| computeStats(allUpcoming, data.accuracy, data.training); | |
| renderUpcoming(); | |
| } catch (err) { | |
| document.getElementById('upcoming-grid').innerHTML = | |
| `<div class="empty-state">Failed to load predictions.<br><small style="color:var(--muted)">${err.message}</small></div>`; | |
| console.error(err); | |
| } | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |