A premium, responsive, and feature-rich client-side web application to track groups, standings, schedules, brackets, and predict scores for the 2026 FIFA World Cup (hosted across the USA, Canada, and Mexico).
Live at: https://soccerworldcup.xyz
- 📊 Real-time Standings & Groups: Live calculations of points, goals scored/conceded, goal difference, wins, and group positions.
- 📅 Interactive Matches Tab: View, search, and filter matches by round, group, status, or team name.
- 🌿 Interactive Tournament Bracket: Drag-and-pan responsive visual bracket tracking progression from the Round of 32 all the way to the Final in New York/New Jersey.
- 🔮 Score Predictor Workspace: Set custom scorelines for group and knockout matches and watch the group tables and knockout brackets recalculate and progress dynamically.
- ⚽ Match Details Modals: Click on any match card or list row to open a detailed popup with a chronological goal timeline, venue details, and prediction comparisons.
- 🌓 Theme Switching: Premium dark and light modes with custom CSS tokens.
- 💾 Local Persistence: All prediction states are automatically saved to your browser's
localStorage.
- HTML5: Semantic document structure.
- CSS3: Vanilla CSS variables, animations, glassmorphism, responsive grid/flexbox layouts.
- JavaScript: Vanilla ES6+ logic (data-driven state management, dynamic DOM rendering).
- VCS: Managed using Jujutsu (jj) backing Git.
You do not need to install complex dependencies. You can serve the static files using any simple web server:
- Clone the repository:
jj git clone git@suraj.github.com:surajp/wc-26.git
- Serve using Node.js:
Or if you prefer python:
npx http-server .python3 -m http.server 8000
- Open
http://localhost:8080(orhttp://localhost:8000) in your browser.
├── index.html # Main application shell
├── app.js # Application engine, data handlers, and DOM renderers
├── style.css # Custom CSS variables, light/dark themes, animations
├── worldcup.json # Baseline tournament match fixtures
└── CNAME # Domain routing mapping for GitHub Pages