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>
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
<!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="/">← 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>
|
||||
Reference in New Issue
Block a user