mirror of
https://github.com/LucasKalil-Programador/world-2026-hub.git
synced 2026-07-04 17:41:28 -03:00
105 lines
5.1 KiB
HTML
105 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="World Cup 2026 Hub — schedule, groups, interactive knockout bracket and stadiums.">
|
|
<title>World Cup 2026 Hub</title>
|
|
|
|
<!-- PWA -->
|
|
<link rel="manifest" href="manifest.json">
|
|
<meta name="theme-color" content="#081421">
|
|
<link rel="icon" href="favicon.ico" sizes="32x32 16x16">
|
|
<link rel="icon" type="image/svg+xml" href="assets/icons/icon.svg">
|
|
<link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="WC 2026 Hub">
|
|
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="assets/css/bracket.css">
|
|
<link rel="stylesheet" href="assets/css/stats.css">
|
|
<link rel="stylesheet" href="assets/css/animations.css">
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main" data-i18n="a11y.skip">Skip to content</a>
|
|
|
|
<header class="site-header">
|
|
<div class="header-inner container">
|
|
<a class="logo" href="#home">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="5" r="1.8" fill="currentColor" stroke="none"/>
|
|
<path d="M7 8h10v2.3a5 5 0 0 1-10 0V8z"/>
|
|
<path d="M7 8.4H4.6a2.6 2.6 0 0 0 2.4 3.4"/>
|
|
<path d="M17 8.4h2.4a2.6 2.6 0 0 1-2.4 3.4"/>
|
|
<path d="M12 15.3v2.2"/>
|
|
<rect x="9" y="18.3" width="6" height="1.6" rx="0.6" fill="currentColor" stroke="none"/>
|
|
</svg>
|
|
<span>World Cup <strong>2026</strong></span>
|
|
</a>
|
|
|
|
<nav class="tabs" role="tablist" data-i18n-aria="a11y.mainNav">
|
|
<button class="tab-btn" data-tab="home" role="tab" aria-selected="false" aria-controls="panel-home" data-i18n="nav.home">Home</button>
|
|
<button class="tab-btn" data-tab="matches" role="tab" aria-selected="false" aria-controls="panel-matches" data-i18n="nav.matches">Matches</button>
|
|
<button class="tab-btn" data-tab="groups" role="tab" aria-selected="false" aria-controls="panel-groups" data-i18n="nav.groups">Groups</button>
|
|
<button class="tab-btn" data-tab="bracket" role="tab" aria-selected="false" aria-controls="panel-bracket" data-i18n="nav.bracket">Knockout</button>
|
|
<button class="tab-btn" data-tab="stadiums" role="tab" aria-selected="false" aria-controls="panel-stadiums" data-i18n="nav.stadiums">Stadiums</button>
|
|
<button class="tab-btn" data-tab="stats" role="tab" aria-selected="false" aria-controls="panel-stats" data-i18n="nav.stats">Stats</button>
|
|
</nav>
|
|
|
|
<div class="header-controls">
|
|
<button id="time-toggle" class="control-btn" type="button" data-i18n-aria="time.toggleAria"></button>
|
|
<div class="lang-switch" role="group" data-i18n-aria="a11y.langSwitch">
|
|
<button class="lang-btn" data-lang="en">EN</button>
|
|
<button class="lang-btn" data-lang="pt">PT</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main" class="container">
|
|
<section id="panel-home" class="panel" role="tabpanel" hidden>
|
|
<section class="hero glass slide-up">
|
|
<div id="hero-content">
|
|
<p class="hero-label" data-i18n="app.loading">Loading data…</p>
|
|
</div>
|
|
</section>
|
|
<h2 class="section-title" data-i18n="dash.title">Tournament overview</h2>
|
|
<section class="dashboard" id="dashboard"></section>
|
|
</section>
|
|
|
|
<section id="panel-matches" class="panel" role="tabpanel" hidden>
|
|
<h2 class="section-title" data-i18n="nav.matches">Matches</h2>
|
|
<div id="schedule-root"><p class="placeholder glass" data-i18n="app.comingSoon"></p></div>
|
|
</section>
|
|
|
|
<section id="panel-groups" class="panel" role="tabpanel" hidden>
|
|
<h2 class="section-title" data-i18n="nav.groups">Groups</h2>
|
|
<div id="groups-root"><p class="placeholder glass" data-i18n="app.comingSoon"></p></div>
|
|
</section>
|
|
|
|
<section id="panel-bracket" class="panel" role="tabpanel" hidden>
|
|
<h2 class="section-title" data-i18n="nav.bracket">Knockout</h2>
|
|
<div id="bracket-root"><p class="placeholder glass" data-i18n="app.comingSoon"></p></div>
|
|
</section>
|
|
|
|
<section id="panel-stadiums" class="panel" role="tabpanel" hidden>
|
|
<h2 class="section-title" data-i18n="nav.stadiums">Stadiums</h2>
|
|
<div id="stadiums-root"><p class="placeholder glass" data-i18n="app.comingSoon"></p></div>
|
|
</section>
|
|
|
|
<section id="panel-stats" class="panel" role="tabpanel" hidden>
|
|
<h2 class="section-title" data-i18n="nav.stats">Stats</h2>
|
|
<div id="stats-root"><p class="placeholder glass" data-i18n="app.comingSoon"></p></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<p data-i18n="footer.note"></p>
|
|
</footer>
|
|
|
|
<div id="modal-root"></div>
|
|
<script type="module" src="assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|