diff --git a/static/app.js b/static/app.js
index bb954fd..15330c2 100644
--- a/static/app.js
+++ b/static/app.js
@@ -22,16 +22,32 @@ function currentSeasonYear() {
function fetchData() {
fetch('/api/data').then(r => r.json()).then(d => {
data = d;
- updateSeasonButton();
+ updateSeasonUI();
renderTable();
});
}
-function updateSeasonButton() {
+function updateSeasonUI() {
const thisSeason = currentSeasonYear();
const hasNextSeason = (data.dates || []).some(d => getSeasonYear(d) === thisSeason + 1);
+
const btn = document.getElementById('next-season-btn');
- if (btn) btn.style.display = hasNextSeason ? '' : 'none';
+ if (btn) {
+ btn.style.display = hasNextSeason ? '' : 'none';
+ btn.classList.toggle('active', viewingNextSeason);
+ btn.textContent = viewingNextSeason ? 'Current Season' : 'Next Season';
+ }
+
+ const banner = document.getElementById('season-banner');
+ if (banner) {
+ if (viewingNextSeason) {
+ banner.className = 'next';
+ banner.textContent = `\u26a1 Next Season \u2014 ${thisSeason + 1}/${thisSeason + 2}`;
+ } else {
+ banner.className = 'current';
+ banner.textContent = `Season ${thisSeason}/${thisSeason + 1}`;
+ }
+ }
}
function saveData() {
@@ -210,11 +226,11 @@ document.addEventListener('DOMContentLoaded', () => {
if (nextSeasonBtn) {
nextSeasonBtn.onclick = () => {
viewingNextSeason = !viewingNextSeason;
- nextSeasonBtn.textContent = viewingNextSeason ? 'Current Season' : 'Next Season';
// Reset "show all" toggle when switching seasons
showAllMatches = false;
if (toggleBtn) toggleBtn.textContent = 'Show All Matches';
initialLoad = true;
+ updateSeasonUI();
renderTable();
};
}
diff --git a/templates/index.html b/templates/index.html
index 460030c..4ef2f3d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -92,6 +92,25 @@
background: #948979;
color: #222831;
}
+ #season-banner {
+ margin-bottom: 0.7em;
+ font-size: 0.95em;
+ font-weight: bold;
+ }
+ #season-banner.current { color: #948979; }
+ #season-banner.next {
+ display: inline-block;
+ background: #1e2e1e;
+ border: 1px solid #6aab69;
+ border-radius: 10px;
+ padding: 0.4em 1em;
+ color: #6aab69;
+ }
+ #next-season-btn.active {
+ background: #6aab69;
+ color: #222831;
+ border-color: #6aab69;
+ }
@media (max-width: 900px) {
body { margin: 1em; }
.name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; }
@@ -109,9 +128,10 @@
-