Simple static page HTML, CSS, JS for world cup
Find a file
2026-07-04 17:32:21 -03:00
.agents docs: rewrite README as a showcase and add DEVELOPMENT.md 2026-07-04 17:32:21 -03:00
.github/workflows fix(deploy): correct FTP server-dir path for Hostinger 2026-06-13 23:30:33 -03:00
assets feat(bracket): redesign with wallchart, radial orbit, and rounds pager 2026-07-03 22:09:49 -03:00
data data: update 04/07/2026 16:59 CANxMAR 0x3 2026-07-04 16:59:23 -03:00
docs/screenshots docs: rewrite README as a showcase and add DEVELOPMENT.md 2026-07-04 17:32:21 -03:00
.gitignore ci: add GitHub Actions FTP deploy to Hostinger 2026-06-13 23:04:03 -03:00
complement-spec-worldcup2026-en.md docs: add project specification documents 2026-06-12 16:11:49 -03:00
DEVELOPMENT.md docs: rewrite README as a showcase and add DEVELOPMENT.md 2026-07-04 17:32:21 -03:00
favicon.ico feat(pwa): add Tier 1 support — installable app with manifest and icons 2026-06-16 15:09:34 -03:00
how-refresh-data.md docs: drop DATA_VERSION from workflow and project memory 2026-06-18 18:25:50 -03:00
how-update.md docs: log daily refresh 15/06/2026 2026-06-15 22:41:26 -03:00
index.html feat(pwa): add Tier 1 support — installable app with manifest and icons 2026-06-16 15:09:34 -03:00
manifest.json feat(pwa): add Tier 1 support — installable app with manifest and icons 2026-06-16 15:09:34 -03:00
README.md docs: rewrite README as a showcase and add DEVELOPMENT.md 2026-07-04 17:32:21 -03:00
world-cup-2026-hub-spec-en.md docs: add project specification documents 2026-06-12 16:11:49 -03:00

🏆 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

Vanilla JS Zero dependencies PWA JavaScript size Languages

World Cup 2026 Hub home screen — the next match with a live countdown and a tournament overview

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), no sign-up, no ads. Just open it.

🔗 Try it now → lucaskalil.com/worldcup2026


🎬 Explore the pages

🏠 Home

The next match with a live countdown, plus the tournament at a glance.

Home — next match (Paraguay vs France, Round of 16) with a countdown and overview cards

📅 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”.

Matches — a searchable, filterable grid of all 104 fixtures with scores and venues

📊 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 whos chasing a best-third-place spot).

Groups — standings tables for all twelve groups A–L with qualification highlights

🏆 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.

Knockout — the center-out wallchart bracket with prediction and challenge features

🏟️ Stadiums

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

Stadiums — cards for the sixteen host venues with capacity and match links

📈 Stats

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

Stats — tournament-to-date totals, goals-by-stage and goals-by-round charts

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.


Made by Lucas Kalil · Vanilla HTML, CSS & JavaScript.

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.