<div align="center">

# 🏆 World Cup 2026 Hub

### Follow the entire FIFA World Cup 2026 in one beautiful place — the schedule, live group standings, an interactive knockout bracket you can predict, the stadiums, and full tournament stats.

[![Live demo](https://img.shields.io/badge/Live_demo-lucaskalil.com%2Fworldcup2026-e6b800?style=for-the-badge)](https://lucaskalil.com/worldcup2026)

![Vanilla JS](https://img.shields.io/badge/Vanilla_JS-no_frameworks-f7df1e?style=flat-square)
![Zero dependencies](https://img.shields.io/badge/Dependencies-zero-2ea44f?style=flat-square)
![PWA](https://img.shields.io/badge/PWA-installable-5a0fc8?style=flat-square)
![JavaScript size](https://img.shields.io/badge/JavaScript-~74_KB-00b4d8?style=flat-square)
![Languages](https://img.shields.io/badge/UI-EN_%2F_PT-lightgrey?style=flat-square)

<img src="docs/screenshots/home.png" alt="World Cup 2026 Hub home screen — the next match with a live countdown and a tournament overview" width="100%">

</div>

---

## What is this?

**World Cup 2026 Hub** is a fan-made website for the FIFA World Cup 2026 — the first tournament
hosted across **Mexico, the USA and Canada**, with **48 teams** and **104 matches**.

It pulls the whole tournament onto a single, fast page: when the next match kicks off, how every
group is shaping up, who advances, where the games are played, and how *you'd* fill out the knockout
bracket. Results roll in as the tournament goes, and you can flip the entire interface between
**English and Português** at any time.

Nothing to install (although you can — see [Under the hood](#-under-the-hood-for-the-curious)), no
sign-up, no ads. Just open it.

> 🔗 **Try it now → [lucaskalil.com/worldcup2026](https://lucaskalil.com/worldcup2026)**

---

## 🎬 Explore the pages

### 🏠 Home
*The next match with a live countdown, plus the tournament at a glance.*

<img src="docs/screenshots/home.png" alt="Home — next match (Paraguay vs France, Round of 16) with a countdown and overview cards" width="100%">

### 📅 Matches
*All 104 games in one place — search by team, city or stadium, filter by date, group, phase, team or venue, and flag your favourites with “My matches”.*

<img src="docs/screenshots/matches.png" alt="Matches — a searchable, filterable grid of all 104 fixtures with scores and venues" width="100%">

### 📊 Groups
*Live standings for all 12 groups, worked out automatically from the results — points, goal difference, goals scored — with clear markers for who qualifies (and who’s chasing a best-third-place spot).*

<img src="docs/screenshots/groups.png" alt="Groups — standings tables for all twelve groups A–L with qualification highlights" width="100%">

### 🏆 Knockout bracket
*The centrepiece. A gorgeous interactive bracket that fills itself in as teams advance. Hover a team to trace its whole path to the final, zoom and pan around, switch between three layouts — **and predict it yourself**: pick winners, watch the rounds re-draw, then see how your picks score against the real results. You can even share your bracket as a link.*

<img src="docs/screenshots/bracket.png" alt="Knockout — the center-out wallchart bracket with prediction and challenge features" width="100%">

### 🏟️ Stadiums
*All 16 host venues across the three countries, each with its capacity and a jump straight to the matches played there.*

<img src="docs/screenshots/stadiums.png" alt="Stadiums — cards for the sixteen host venues with capacity and match links" width="100%">

### 📈 Stats
*A tournament stats screen: goals by stage and by round, records, a full 1–48 ranking and a head-to-head team comparator. Once the final is played, a champion “verdict” takes over the top of the page.*

<img src="docs/screenshots/stats.png" alt="Stats — tournament-to-date totals, goals-by-stage and goals-by-round charts" width="100%">

---

## ✨ Under the hood (for the curious)

You don't need to be a developer to appreciate a few things that make this special:

- **⚡ Loads in a blink.** The whole site is about **74 KB** of JavaScript — smaller than a single
  phone photo — with **no frameworks and no libraries**. It's just clean, hand-written code.
- **🔮 Predict the bracket.** Choose winners and the bracket redraws all the way to the final; your
  picks are saved in your browser and can be handed to a friend as a link to compare.
- **🔄 Always current.** New scores appear on their own — no need to refresh the page.
- **📱 Works everywhere.** Phone, tablet or desktop, the layout adapts to fit.
- **⬇️ Installable.** Add it to your home screen and it opens like a real app (it's a PWA).
- **🌍 Two languages.** Every label is available in English and Portuguese, switchable on the fly.
- **♿ Built to be usable by everyone.** Full keyboard navigation, screen-reader labels, and it
  respects the system “reduce motion” setting.

Curious how it's put together, or want to run it yourself? See **[DEVELOPMENT.md](DEVELOPMENT.md)**.

---

<div align="center">

Made by **[Lucas Kalil](https://lucaskalil.com)** · Vanilla HTML, CSS & JavaScript.

<sub>A fan-made project for the love of the game. Not affiliated with, endorsed by, or sponsored by
FIFA. All team and venue names belong to their respective owners.</sub>

</div>
