Files
NHL-Scoreboard/app/templates/bracket.html
T
josh ebe770fecd
CI / Lint (push) Failing after 8s
CI / Test (push) Has been skipped
CI / Build & Push (push) Has been skipped
feat: make scoreboard playoff-aware with banner, bracket, and series drill-down
Turn a regular-season-looking Tuesday into a full playoff experience:

- Playoff banner with round + day + series + elimination counts, gold/silver
  Cup theme toggled by body.playoff-mode
- Series context on each playoff card: round chip, series score, stake badges
  (GAME 7, CLINCHER, PIVOTAL), and one-line blurb
- Game 7s pin to a new Spotlight section above Live
- Playoff OT renders with SUDDEN DEATH badge and pulsing gold border
- Client-side OT notifications via bell button in the banner
- New /series/<id> drill-down with headline, next-game, and game-by-game history
- New /bracket page: 7-column desktop grid, accordion on mobile
- Day N banner count auto-anchors on first playoff scoreboard hit
- SQLite cache for bracket + per-series schedules, stale-on-failure up to 24h

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-19 12:47:31 -04:00

83 lines
4.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ bracket.year }} Stanley Cup Bracket</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0f172a">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/static/icon-32x32.png">
<link rel="stylesheet" type="text/css" href="/static/styles.css">
</head>
<body class="playoff-mode bracket-mode">
<header>
<a class="header-title header-link" href="/">&larr; NHL Scoreboard</a>
</header>
<main class="bracket-main">
<section class="bracket-hero">
<h1 class="bracket-title">{{ bracket.year }} Stanley Cup Playoffs</h1>
<div class="bracket-subtitle">The road to 16 wins</div>
</section>
{# Desktop: 7-column grid (East R1 | R2 | CF | Cup | CF | R2 | R1 West) #}
<section class="bracket-grid" aria-label="Full playoff bracket">
<div class="bracket-col bracket-col-r1 bracket-col-east">
<h2 class="bracket-col-heading">First Round</h2>
{% for m in bracket.east_r1 %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
<div class="bracket-col bracket-col-r2 bracket-col-east">
<h2 class="bracket-col-heading">Second Round</h2>
{% for m in bracket.east_r2 %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
<div class="bracket-col bracket-col-cf bracket-col-east">
<h2 class="bracket-col-heading">East Final</h2>
{% for m in bracket.east_cf %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
<div class="bracket-col bracket-col-cup">
<h2 class="bracket-col-heading bracket-cup-heading">Cup Final</h2>
{% for m in bracket.cup %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
<div class="bracket-col bracket-col-cf bracket-col-west">
<h2 class="bracket-col-heading">West Final</h2>
{% for m in bracket.west_cf %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
<div class="bracket-col bracket-col-r2 bracket-col-west">
<h2 class="bracket-col-heading">Second Round</h2>
{% for m in bracket.west_r2 %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
<div class="bracket-col bracket-col-r1 bracket-col-west">
<h2 class="bracket-col-heading">First Round</h2>
{% for m in bracket.west_r1 %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
</section>
{# Mobile: round-by-round accordion, round 1 open by default #}
<section class="bracket-accordion" aria-label="Playoff bracket by round">
{% for rnd in bracket.rounds %}
<details class="bracket-round" {% if loop.first %}open{% endif %}>
<summary class="bracket-round-summary">{{ rnd.label }}</summary>
<div class="bracket-round-body">
{% if rnd.get('east') %}
<div class="bracket-round-half">
<h3 class="bracket-round-half-heading">Eastern</h3>
{% for m in rnd.east %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
{% endif %}
{% if rnd.get('west') %}
<div class="bracket-round-half">
<h3 class="bracket-round-half-heading">Western</h3>
{% for m in rnd.west %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
{% endif %}
{% if rnd.get('cup') %}
<div class="bracket-round-half">
{% for m in rnd.cup %}{% include "_bracket_matchup.html" %}{% endfor %}
</div>
{% endif %}
</div>
</details>
{% endfor %}
</section>
</main>
</body>
</html>