A single-page, offline-friendly training dashboard that lays out a structured, multi-year chess improvement program (tactics, openings, patterns, endgames, schedules, calculation, tournament prep, and curated resources).
This repository is intentionally simple: it’s primarily a single static file, index.html.
index.html: The entire app (HTML + CSS + JavaScript in one file).- No build tools: No Node, no bundlers, no dependencies to install.
- Download/clone the repo.
- Open
index.htmlin your browser (Chrome/Firefox/Brave).
That’s it.
Some browsers apply tighter rules when opening file:// pages. Running a tiny local server is more consistent.
python3 -m http.server 8000Then open http://localhost:8000 and click index.html (or it may load automatically).
npx serve .php -S localhost:8000At the top there’s a sticky navigation bar with sections like:
- Reality (expectations, timelines, hours)
- Blueprint (multi-phase plan)
- Openings / Attacks / Defense / Patterns / Memory / Masters
- Middlegame / Endgame
- Schedule / Calculation / Tournament / Resources
Click any tab to switch sections.
Most sections contain collapsible panels. Click a panel header to expand/collapse it.
- Left Arrow / Right Arrow: cycle through the top navigation tabs.
Use the theme toggle in the header to switch between dark and light mode.
- The selection is saved in your browser via
localStorageunder the keygmb-theme. - If storage is blocked (strict privacy mode), the app still works; it just won’t persist the theme.
Everything is in index.html, so editing is straightforward:
- Text/content: Search for the section you want (e.g.
section-blueprint,section-endgame,section-schedule) and edit the HTML. - Add a new tab/section:
- Add a new button in the nav:
<button class="nav-btn" data-section="yourid">…</button>
- Add a matching section container:
<div class="section" id="section-yourid"> … </div>
- Keep the
data-section="yourid"andid="section-yourid"pairing consistent (that’s how the JS finds the section).
- Add a new button in the nav:
- Styling: The CSS is in a
<style>block in the<head>. Colors are defined as CSS variables under:root.
- The UI uses Google Fonts loaded from:
fonts.googleapis.com(CSS)fonts.gstatic.com(font files)
- If you want fully offline use, you can replace the Google Fonts
<link>with locally hosted fonts (or remove it and rely on system fonts).
Because this is a static site, you can host it anywhere.
- Push this repository to GitHub.
- In GitHub: Settings → Pages
- Set:
- Source: “Deploy from a branch”
- Branch:
main(or your default branch), folder/ (root)
- Save, then open the published Pages URL.
Upload the repo as a static site with:
- Build command: none
- Output/public directory: repository root (where
index.htmllives)
- The page looks unstyled: Ensure you opened the correct
index.htmland your browser didn’t block local resources. Try the local server option. - Theme doesn’t persist: Your browser may be blocking storage (private mode, strict tracking protection). The app still functions without persistence.
- Fonts look different: Your network may be blocking Google Fonts or you’re offline. This only affects typography.
No license file is included by default. If you plan to share publicly or accept contributions, add a LICENSE (e.g., MIT) and clarify attribution/usage expectations.