84 lines
4.7 KiB
HTML
84 lines
4.7 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_v('icon-32x32.png') }}">
|
|
<link rel="stylesheet" type="text/css" href="{{ static_v('styles.css') }}">
|
|
<script defer src="https://tracking.thewrightserver.net/script.js" data-website-id="d6bd9925-cb2d-4164-9685-bfb7642c41e4"></script>
|
|
</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 {% if bracket.current_round == 1 %}bracket-col-active{% endif %}">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 {% if bracket.current_round == 2 %}bracket-col-active{% endif %}">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 {% if bracket.current_round == 3 %}bracket-col-active{% endif %}">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 {% if bracket.current_round == 4 %}bracket-col-active{% endif %}">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 {% if bracket.current_round == 3 %}bracket-col-active{% endif %}">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 {% if bracket.current_round == 2 %}bracket-col-active{% endif %}">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 {% if bracket.current_round == 1 %}bracket-col-active{% endif %}">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 rnd.round_num == bracket.current_round or (bracket.current_round is none and 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>
|