# Project Guidelines ## Code Style - This repo is framework-free: plain HTML + CSS + vanilla JavaScript — no frameworks, modules, or build tooling. - Keep existing naming style: `camelCase` for JS functions/variables and descriptive DOM ids/classes (for example `fetchCrowdfunding`, `setupMobileMenu`, `#players-grid`). - Preserve current formatting patterns: 4-space indentation in HTML/CSS, simple function-based JS. - Shared JS utilities use the global-object pattern (e.g. `DataUtils` in `js/data_utils.js`) — do not convert to ES modules. - Reuse shared tokens in `css/style.css` (`:root` variables such as `--bg-color`, `--accent-color`) instead of introducing new ad-hoc styles. - Keep page-local style overrides scoped to their page blocks; avoid broad visual refactors unless explicitly requested. - Keep user-facing copy in Chinese unless the surrounding section is already English. ## Architecture - Public pages are static entry points: - `index.html` + `js/script.js`: landing page, sponsors, fundraising progress, live server status. - `sponsor.html` + `js/sponsor_script.js`: donation total, sponsor list, search/filter, donation modal. - `stats.html` + `js/stats_script.js`: player leaderboard + searchable player cards + modal details. - `join.html` + `js/join_script.js`: 4-step wizard (convention → agree → device → tutorial). Uses `js/marked.min.js` to render `data/convention.md` as HTML. - `facilities.html` + `js/facilities_script.js`: searchable/filterable catalog of server facilities from `data/facilities.json`. Supports Bilibili video embeds (BV IDs) in notes. - `doc.html`, `map.html`, `photo.html`: iframe wrappers (navbar + fullscreen iframe to external hosts). No page-specific JS beyond `js/components.js`. - Shared utilities: - `js/components.js`: injected into `#navbar-component` / `#footer-component`, handles mobile menu & current-link highlighting. - `js/data_utils.js`: `DataUtils.parseSponsorsText()` and `DataUtils.buildSponsorTotals()` — used by both `index.html` and `sponsor.html`. - Shared visual system lives in `css/style.css`; page-specific styles live in `css/pages/` (`join.css`, `facilities.css`, `sponsor.css`, `stats.css`). - Every page includes `