refactor: rewrite UI with clean layout, fetch API, and proper card structure

app/static/script.js

@@ -1,246 +1,152 @@
-// Function to fetch scoreboard data using AJAX
+async function fetchScoreboardData() {
-function fetchScoreboardData() {
+    try {
-    var xhr = new XMLHttpRequest();
+        const res = await fetch('/scoreboard');
-    xhr.open("GET", "/scoreboard", true);
+        if (!res.ok) throw new Error(res.status);
-    xhr.onreadystatechange = function () {
+        updateScoreboard(await res.json());
-        if (xhr.readyState === XMLHttpRequest.DONE) {
+    } catch (e) {
-            if (xhr.status === 200) {
+        console.error('Failed to fetch scoreboard data:', e);
-                updateScoreboard(JSON.parse(xhr.responseText));
-            } else {
-                console.error("Failed to fetch scoreboard data.");
     }
-        }
-    };
-    xhr.send();
 }
 
-// Function to update scoreboard with fetched data
 function updateScoreboard(data) {
-    var liveGamesSection = document.getElementById('live-games-section');
+    const sections = [
-    var preGamesSection = document.getElementById('pre-games-section');
+        { sectionId: 'live-section',  gridId: 'live-games-section',  games: data.live_games,  render: renderLiveGame  },
-    var finalGamesSection = document.getElementById('final-games-section');
+        { sectionId: 'pre-section',   gridId: 'pre-games-section',   games: data.pre_games,   render: renderPreGame   },
+        { sectionId: 'final-section', gridId: 'final-games-section', games: data.final_games, render: renderFinalGame },
+    ];
 
-    if (liveGamesSection) {
+    for (const { sectionId, gridId, games, render } of sections) {
-        var liveGamesExist = data && data.live_games && data.live_games.length > 0;
+        const section = document.getElementById(sectionId);
-        if (liveGamesExist) {
+        const grid    = document.getElementById(gridId);
-            if (!document.getElementById('live-games')) {
+        const hasGames = games && games.length > 0;
-                var targetElement = document.getElementById('live-games-section');
+        section.classList.toggle('hidden', !hasGames);
-                var newElement = document.createElement('h1');
+        grid.innerHTML = hasGames ? games.map(render).join('') : '';
-                newElement.setAttribute('id', 'live-games');
-                newElement.innerText = 'Live Games';
-                targetElement.parentNode.insertBefore(newElement, targetElement);
-            }
-            liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
-        } else {
-            var liveGamesElement = document.getElementById('live-games');
-            if (liveGamesElement) {
-                liveGamesElement.remove();
-            }
-            liveGamesSection.innerHTML = '';
-        }
     }
 
-    if (preGamesSection) {
+    updateGauges();
-        var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
-        if (preGamesExist) {
-            if (!document.getElementById('on-later')) {
-                var targetElement = document.getElementById('pre-games-section');
-                var newElement = document.createElement('h1');
-                newElement.setAttribute('id', 'on-later');
-                newElement.innerText = 'Scheduled Games';
-                targetElement.parentNode.insertBefore(newElement, targetElement);
-            }
-            preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
-        } else {
-            var onLaterElement = document.getElementById('on-later');
-            if (onLaterElement) {
-                onLaterElement.remove();
-            }
-            preGamesSection.innerHTML = '';
-        }
-    }
-
-    if (finalGamesSection) {
-        var finalGamesExist = data && data.final_games && data.final_games.length > 0;
-    
-        // Check if final games exist
-        if (finalGamesExist) {
-            // Create or update "Game Over" heading
-            if (!document.getElementById('game-over')) {
-                var targetElement = document.getElementById('final-games-section');
-                var newElement = document.createElement('h1');
-                newElement.setAttribute('id', 'game-over');
-                newElement.innerText = 'Game Over';
-                targetElement.parentNode.insertBefore(newElement, targetElement);
-            }
-    
-            // Update final games section with generated game boxes
-            finalGamesSection.innerHTML = generateGameBoxes(data.final_games, 'FINAL');
-        } else {
-            // Remove "Game Over" heading if it exists and clear final games section
-            var gameOverElement = document.getElementById('game-over');
-            if (gameOverElement) {
-                gameOverElement.remove();
-            }
-            finalGamesSection.innerHTML = '';
-        }
-    }
-
-    updateGauge()
 }
 
-function updateGauge() {
+// ── Renderers ────────────────────────────────────────
-    document.querySelectorAll('.gauge').forEach(function(gauge) {
-        // Get the score value from the data-score attribute
-        var score = parseInt(gauge.getAttribute('data-score'));
 
-        // Clamp the score value between 0 and 700
+function renderLiveGame(game) {
-        score = Math.min(700, Math.max(0, score));
+    const intermission = game['Intermission'];
+    const period       = game['Period'];
+    const time         = game['Time Remaining'];
+    const running      = game['Time Running'];
 
-        // Calculate the gauge width as a percentage
+    const periodLabel = intermission
-        var gaugeWidth = (score / 700) * 100;
+        ? `<span class="badge">${intermissionLabel(period)}</span>`
+        : `<span class="badge badge-live">${ordinalPeriod(period)}</span>`;
 
-        // Set the width of the gauge
+    const dot = running ? `<span class="live-dot"></span>` : '';
-        gauge.style.width = gaugeWidth + '%';
 
-        if (score <=300) {
+    const hype = !intermission ? `
-            gauge.style.backgroundColor = '#4A90E2'
+        <div class="hype-meter">
-        } else if (score <= 550) {
+            <span class="hype-label">Hype Meter</span>
-            gauge.style.backgroundColor = '#FF4500'
+            <div class="gauge-track">
-        } else {
+                <div class="gauge" data-score="${game['Priority']}"></div>
-            gauge.style.backgroundColor = '#FF0033'
+            </div>
-        }
+        </div>` : '';
+
+    return `
+        <div class="game-box">
+            <div class="card-header">
+                <div class="badges">
+                    ${periodLabel}
+                    <span class="badge">${time}</span>
+                </div>
+                ${dot}
+            </div>
+            ${teamRow(game, 'Away', 'live')}
+            ${teamRow(game, 'Home', 'live')}
+            ${hype}
+        </div>`;
+}
+
+function renderPreGame(game) {
+    return `
+        <div class="game-box">
+            <div class="card-header">
+                <div class="badges">
+                    <span class="badge">${game['Start Time']}</span>
+                </div>
+            </div>
+            ${teamRow(game, 'Away', 'pre')}
+            ${teamRow(game, 'Home', 'pre')}
+        </div>`;
+}
+
+function renderFinalGame(game) {
+    const labels = { REG: 'Final', OT: 'Final/OT', SO: 'Final/SO' };
+    const label  = labels[game['Last Period Type']] ?? 'Final';
+    return `
+        <div class="game-box">
+            <div class="card-header">
+                <div class="badges">
+                    <span class="badge badge-muted">${label}</span>
+                </div>
+            </div>
+            ${teamRow(game, 'Away', 'final')}
+            ${teamRow(game, 'Home', 'final')}
+        </div>`;
+}
+
+// ── Team Row ─────────────────────────────────────────
+
+function teamRow(game, side, state) {
+    const name   = game[`${side} Team`];
+    const logo   = game[`${side} Logo`];
+    const score  = game[`${side} Score`];
+    const sog    = game[`${side} Shots`];
+    const pp     = game[`${side} Power Play`];
+    const record = game[`${side} Record`];
+
+    const sogHtml = (state !== 'pre' && sog !== undefined)
+        ? `<span class="team-sog">${sog} SOG</span>` : '';
+    const ppHtml  = pp ? `<span class="team-pp">${pp}</span>` : '';
+
+    const right = state === 'pre'
+        ? `<span class="team-record">${record}</span>`
+        : `<span class="team-score">${score}</span>`;
+
+    return `
+        <div class="team-row">
+            <img src="${logo}" alt="${name} logo" class="team-logo">
+            <div class="team-meta">
+                <span class="team-name">${name}</span>
+                ${sogHtml}${ppHtml}
+            </div>
+            ${right}
+        </div>`;
+}
+
+// ── Gauge ────────────────────────────────────────────
+
+function updateGauges() {
+    document.querySelectorAll('.gauge').forEach(el => {
+        const score = Math.min(700, Math.max(0, parseInt(el.dataset.score, 10)));
+        el.style.width           = `${(score / 700) * 100}%`;
+        el.style.backgroundColor = score <= 300 ? '#4a90e2'
+                                 : score <= 550 ? '#f97316'
+                                 :                '#ef4444';
     });
 }
 
-// Function to generate HTML for game boxes
+// ── Helpers ──────────────────────────────────────────
-function generateGameBoxes(games, state) {
-    var html = '';
-    games.forEach(function(game) {
-        if (game['Game State'] === state) {
-            html += '<div class="game-box">';
-            if (state === 'LIVE') {
-                if (game['Time Running']) {
-                    html += '<div class="live-dot"></div>'; // Display the red dot if the game is live
-                }
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Away Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
-                html += '<span class="team-power-play">' + game['Away Power Play'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Away Score'] + '</span>';
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Home Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
-                html += '<span class="team-power-play">' + game['Home Power Play'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Home Score'] + '</span>';
-                html += '</div>';
-                html += '<div class="game-info">';
-                if (game['Intermission']) {
-                    html += '<div class="live-state-intermission">'
-                    if (game['Period'] == 1 ) {
-                        html += '1st Int';
-                    }
-                    if (game['Period'] == 2 ) {
-                        html += '2nd Int';
-                    }
-                    if (game['Period'] == 3 ) {
-                        html += '3rd Int';
-                    }
-                    html += '</div>';
-                    html += '<div class="live-time-intermission">' + game['Time Remaining'] + '</div>';
-                } else {
-                    html += '<div class="live-state">';
-                    if (game['Period'] == 1 ) {
-                        html += '1st';
-                    }
-                    else if (game['Period'] == 2 ) {
-                        html += '2nd';
-                    }
-                    else if (game['Period'] == 3 ) {
-                        html += '3rd';
-                    }
-                    else if (game['Period'] == 4 ) {
-                        html += 'OT';
-                    }
-                    else {
-                        html += 'SO';
-                    }
-                    html += '</div>';
-                    html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
-                }
-                html += '</div>';
-                if (!game['Intermission']) {
-                    html += '<div class="hype-meter-label">';
-                    html += '<strong>Hype Meter</strong>';
-                    html += '</div>';
 
-                    html += '<div class="game-score-gauge">';
+function ordinalPeriod(period) {
-                    html += '<div class="gauge" data-score="' + game['Priority'] + '"></div>';
+    return ['1st', '2nd', '3rd', 'OT'][period - 1] ?? 'SO';
-                    html += '</div>';
-                    html += '</div>';
-                }
-
-
-                html += '</div>';
-            } else if (state === 'PRE') {
-                html += '<div class="pre-state">' + game['Start Time'] + '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
-                html += '<span class="team-name">' + game['Away Team'] + '</span>';
-                html += '<span class="team-record">' + game['Away Record'] + '</span>';
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
-                html += '<span class="team-name">' + game['Home Team'] + '</span>';
-                html += '<span class="team-record">' + game['Home Record'] + '</span>';
-                html += '</div>';
-            } else if (state === 'FINAL') {
-                html += '<div class="final-state">';
-                if (game['Last Period Type'] === 'REG') {
-                    html += 'FINAL';
-                } else if (game['Last Period Type'] === 'OT') {
-                    html += 'FINAL/OT';
-                } else {
-                    html += 'FINAL/SO';
-                }
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Away Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Away Score'] + '</span>';
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Home Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Home Score'] + '</span>';
-                html += '</div>';
-            }
-            html += '</div>';
-        }
-    });
-    return html;
 }
 
-// Function to reload the scoreboard every 20 seconds
+function intermissionLabel(period) {
+    return ['1st Int', '2nd Int', '3rd Int'][period - 1] ?? 'Int';
+}
+
+// ── Init ─────────────────────────────────────────────
+
 function autoRefresh() {
     fetchScoreboardData();
-    setTimeout(autoRefresh, 5000); // 20 seconds
+    setTimeout(autoRefresh, 5000);
 }
 
-// Call the autoRefresh function when the page loads
+window.addEventListener('load', autoRefresh);
-window.onload = function() {
-    autoRefresh();
-};

app/static/styles.css

@@ -1,381 +1,239 @@
-body {
+:root {
-    background-color: #121212;
+    --bg: #111;
-    font-family: Arial, sans-serif;
+    --card: #1c1c1c;
-    color: #fff;
+    --card-border: #2a2a2a;
+    --badge-bg: #2a2a2a;
+    --text: #f0f0f0;
+    --text-muted: #777;
+    --green-bg: #14532d;
+    --green-text: #86efac;
+    --red: #ef4444;
+    --gap: 0.875rem;
+    --radius: 10px;
+    --card-w: 250px;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
     margin: 0;
+    padding: 0;
 }
 
-h1 {
+body {
-    text-align: center;
+    background: var(--bg);
-    margin-top: 0.8%;
+    color: var(--text);
-    margin-bottom: 1.5%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    color: #f2f2f2;
+    min-height: 100vh;
-    font-size: 2.2em;
 }
 
-.scoreboard {
+/* ── Header ─────────────────────────────────────── */
+
+header {
+    padding: 1rem 1.25rem 0.5rem;
+}
+
+.header-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--text-muted);
+}
+
+/* ── Layout ─────────────────────────────────────── */
+
+main {
+    padding: 0.75rem 1.25rem 2rem;
+}
+
+.section {
+    margin-bottom: 2rem;
+}
+
+.section.hidden {
+    display: none;
+}
+
+.section-heading {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+}
+
+.games-grid {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
+    gap: var(--gap);
-    margin-top: 20px;
 }
 
+/* ── Game Card ──────────────────────────────────── */
+
 .game-box {
-    background-color: #333;
+    background: var(--card);
-    border-radius: 12px;
+    border: 1px solid var(--card-border);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius);
-    padding: 1%;
+    padding: 0.875rem;
-    width: 16%;
+    width: var(--card-w);
-    max-width: 350px;
+    flex-shrink: 0;
-    position: relative;
-    margin-left: 1%;
-    margin-right: 1%;
-    margin-bottom: 1.15%;
 }
 
-.team-info {
+/* ── Card Header (badges + live dot) ───────────── */
+
+.card-header {
     display: flex;
     align-items: center;
-    margin-bottom: 2%;
+    justify-content: space-between;
-    margin-top: 9%;
+    margin-bottom: 0.5rem;
+    min-height: 1.25rem;
 }
 
-.team-info-column {
+.badges {
     display: flex;
-    flex-direction: column;
+    gap: 0.3rem;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
-.team-logo {
+.badge {
-    width: 18%;
+    font-size: 0.65rem;
-    height: auto;
+    font-weight: 700;
-    margin-right: 2.25%;
+    padding: 0.2rem 0.45rem;
+    border-radius: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: var(--badge-bg);
+    color: var(--text);
+    white-space: nowrap;
 }
 
-.team-name {
+.badge-live {
-    font-size: 1rem;
+    background: var(--green-bg);
-    font-weight: bold;
+    color: var(--green-text);
 }
 
-/* Add a media query for screens between 769px and 900px */
+.badge-muted {
-@media only screen and (max-width: 950px) and (min-width: 769px) {
+    color: var(--text-muted);
-    .team-name {
-        font-size: 0.55rem; /* Adjusted font size for screens between 769px and 900px */
-    }
-}
-
-.team-score {
-    font-size: 1.35rem;
-    font-weight: bold;
-    margin-left: auto;
-}
-
-.team-record {
-    font-size: 0.8rem;
-    font-weight: bold;
-    margin-left: auto;
-}
-
-/* Add a media query for screens between 769px and 900px */
-@media only screen and (max-width: 950px) and (min-width: 769px) {
-    .team-record {
-        font-size: 0.45rem; /* Adjusted font size for screens between 769px and 900px */
-    }
-}
-
-.team-sog {
-    font-size: 0.75rem;
-    color: #ddd;
-}
-
-.team-power-play {
-    font-size: 12px;
-    color: red; 
-    margin-left: 10px;
-}
-
-.game-info {
-    margin-top: 12px;
-    color: #aaa;
-    text-align: center;
-    font-size: 80%;
-}
-
-.hype-meter-label {
-    margin-top: 3%;
-    color: #aaa;
-    text-align: center;
-    font-size: 80%;
-    margin-bottom: 3%;
 }
 
 .live-dot {
-    position: absolute;
+    width: 7px;
-    top: 5px;
+    height: 7px;
-    right: 5px;
+    background: var(--red);
-    width: 10px;
-    height: 10px;
-    background-color: red;
     border-radius: 50%;
+    flex-shrink: 0;
+    animation: pulse 1.8s ease-in-out infinite;
 }
 
-.pre-state {
+@keyframes pulse {
-    position: absolute;
+    0%, 100% { opacity: 1; }
-    top: 5%;
+    50%       { opacity: 0.4; }
-    left: 3%;
+}
-    background-color: #444;
+
-    padding: 1.5%;
+/* ── Team Rows ──────────────────────────────────── */
-    border-radius: 5px;
+
-    font-size: 0.75rem;
+.team-row {
-    color: #fff; 
-    font-weight: bolder; 
-    z-index: 1; 
-    width: auto;
-    height: 7%;
     display: flex;
-    justify-content: space-evenly; 
     align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0;
 }
 
-/* Add a media query for screens between 769px and 900px */
+.team-row + .team-row {
-@media only screen and (max-width: 950px) and (min-width: 769px) {
+    border-top: 1px solid var(--card-border);
-    .pre-state {
-        font-size: 0.55rem; /* Adjusted font size for screens between 769px and 900px */
-    }
 }
 
-.final-state {
+.team-logo {
-    position: absolute;
+    width: 30px;
-    top: 5%;
+    height: 30px;
-    left: 3%; 
+    object-fit: contain;
-    background-color: #444;
+    flex-shrink: 0;
-    padding: 1.5%;
+}
-    border-radius: 5px;
+
-    font-size: 0.7rem;
+.team-meta {
-    color: #ddd;
+    flex: 1;
-    z-index: 1;
+    min-width: 0;
-    font-weight: bold;
-    width: auto;
-    height: 7%;
     display: flex;
-    justify-content: space-evenly;
+    flex-direction: column;
-    align-items: center;
+    gap: 0.1rem;
 }
 
-.live-state {
+.team-name {
-    position: absolute;
+    font-size: 0.825rem;
-    top: 4%;
+    font-weight: 600;
-    left: 4%; 
+    white-space: nowrap;
-    background-color: #0b6e31; 
+    overflow: hidden;
-    padding: 1.5%;
+    text-overflow: ellipsis;
-    border-radius: 5px;
+}
+
+.team-sog {
+    font-size: 0.68rem;
+    color: var(--text-muted);
+}
+
+.team-pp {
+    font-size: 0.68rem;
+    color: var(--red);
+    font-weight: 600;
+}
+
+.team-score {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-left: auto;
+    flex-shrink: 0;
+    min-width: 1.5rem;
+    text-align: right;
+}
+
+.team-record {
     font-size: 0.72rem;
-    color: #fff; 
+    color: var(--text-muted);
-    font-weight: bolder; 
+    margin-left: auto;
-    z-index: 1; 
+    flex-shrink: 0;
-    width: 7%;
+    white-space: nowrap;
-    height: 7%;
-    display: flex; 
-    justify-content: space-evenly;
-    align-items: center;
 }
 
-.live-time {
+/* ── Hype Meter ─────────────────────────────────── */
-    position: absolute;
+
-    top: 4%;
+.hype-meter {
-    left: 15%; 
+    margin-top: 0.75rem;
-    background-color: #444; 
-    padding: 1.5%;
-    border-radius: 5px;
-    font-size: 0.75rem;
-    color: #ddd; 
-    z-index: 1; 
-    display: flex; 
-    justify-content: space-evenly;
-    align-items: center;
-    width: 10%;
-    height: 7%;
 }
 
-.live-state-intermission {
+.hype-label {
-    position: absolute;
+    display: block;
-    top: 4%;
+    font-size: 0.6rem;
-    left: 4%; 
+    font-weight: 700;
-    background-color: #444;
+    text-transform: uppercase;
-    padding: 1.5%;
+    letter-spacing: 0.1em;
-    border-radius: 5px;
+    color: var(--text-muted);
-    font-size: 80%;
+    margin-bottom: 0.3rem;
-    color: #fff;
-    font-weight: bolder;
-    z-index: 1;
-    width: 11%;
-    height: 8.5%;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
 }
 
-.live-time-intermission {
+.gauge-track {
-    position: absolute;
+    height: 4px;
-    top: 4%;
+    background: var(--badge-bg);
-    left: 19%;
+    border-radius: 99px;
-    background-color: #444;
-    padding: 1.5%;
-    border-radius: 5px;
-    font-size: 0.75rem;
-    color: #ddd;
-    z-index: 1;
-    width: 10%;
-    height: 8.5%;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-}
-
-#live-games-section {
-    display: flex;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-#pre-games-section {
-    display: flex;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-#final-games-section {
-    display: flex;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-/* Add styles for the game score gauge */
-.game-score-gauge {
-    height: 1%;
-    background-color: #ccc;
-    border-radius: 5px;
     overflow: hidden;
 }
 
 .gauge {
-    height: 10px; /* Adjust height as needed */
+    height: 100%;
-    /*#8A2BE2*/
+    border-radius: 99px;
-    /*#6699CC*/
+    width: 0;
+    transition: width 0.5s ease;
 }
 
-/* Add media query for smaller screens */
+/* ── Mobile ─────────────────────────────────────── */
-@media only screen and (max-width: 768px) {
+
-    .scoreboard {
+@media (max-width: 640px) {
-        flex-direction: column; /* Change direction to column for smaller screens */
+    :root {
-        align-items: center; /* Center align items */
+        --card-w: 100%;
     }
 
-    .game-box {
+    .games-grid {
-        width: 90%;
+        flex-direction: column;
-        padding: 4%;
-        margin-bottom: 4%;
-        margin-left: 2%;
-        margin-right: 2%;
-        max-width: 1000px;
     }
-
-    .team-info {
-        align-items: center;
-        margin-top: 10%; 
-        margin-bottom: 2%;
-    }
-
-    .team-logo {
-        width: 12%;
-        height: auto;
-    }
-
-    .team-name {
-        font-size: 100%;
-        font-weight: bold;
-    }
-
-    .team-score {
-        font-size: 140%;
-        font-weight: bold;
-    }
-
-    .team-sog {
-        font-size: 70%;
-    }
-
-    .game-info {
-        font-size: 90%;
-    }
-
-    .live-state {
-        top: 5%;
-        left: 3.5%;
-        padding: 1.5%;
-        border-radius: 5px;
-        font-size: 80%;
-        width: 5.5%;
-        height: 7.2%;
-    }
-    
-    .live-time {
-        top: 5%;
-        left: 13%;
-        padding: 1.5%;
-        border-radius: 5px;
-        font-size: 80%;
-        display: flex;
-        justify-content: space-evenly; 
-        align-items: center;
-        width: 7%;
-        height: 7.2%;
-    }
-    
-    .live-state-intermission {
-        top: 5%;
-        left: 3.5%;
-        padding: 1.5%;
-        border-radius: 5px;
-        font-size: 80%;
-        width: 11%;
-        height: 7.5%;
-        display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-    }
-
-    .live-time-intermission {
-        top: 5%;
-        left: 18.5%;
-        padding: 1.5%;
-        border-radius: 5px;
-        font-size: 80%;
-        width: 8%;
-        height: 7.5%;
-        display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-    }
-
-    .final-state {
-        top: 5%;
-        left: 3.5%;
-        padding: 1.5%;
-        border-radius: 5px;
-        font-size: 72%;
-        width: auto;
-        height: 7.5%;
-    }
-
-    .pre-state {
-        top: 5%;
-        left: 3.5%;
-        padding: 1.5%;
-        border-radius: 5px;
-        font-size: 80%;
-    }
-    
 }

app/templates/index.html

@@ -6,9 +6,23 @@
     <link rel="stylesheet" type="text/css" href="/static/styles.css">
 </head>
 <body>
-    <div id="live-games-section"></div>
+    <header>
-    <div id="pre-games-section"></div>
+        <span class="header-title">NHL Scoreboard</span>
-    <div id="final-games-section"></div>
+    </header>
+    <main>
+        <section id="live-section" class="section hidden">
+            <h2 class="section-heading">Live</h2>
+            <div id="live-games-section" class="games-grid"></div>
+        </section>
+        <section id="pre-section" class="section hidden">
+            <h2 class="section-heading">Scheduled</h2>
+            <div id="pre-games-section" class="games-grid"></div>
+        </section>
+        <section id="final-section" class="section hidden">
+            <h2 class="section-heading">Final</h2>
+            <div id="final-games-section" class="games-grid"></div>
+        </section>
+    </main>
     <script src="/static/script.js"></script>
 </body>
 </html>