diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index d787d0b..c75624e 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,20 +1,27 @@ # Project Guidelines ## Code Style -- This repo is framework-free: plain HTML + CSS + vanilla JavaScript (`index.html`, `sponsor.html`, `stats.html`, `script.js`, `sponsor_script.js`, `stats_script.js`, `components.js`). +- 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 (no classes/modules/build tooling). -- Reuse shared tokens in `style.css` (`:root` variables such as `--bg-color`, `--accent-color`) instead of introducing new ad-hoc styles. +- 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` + `script.js`: landing page, sponsors, fundraising progress, live server status. - - `sponsor.html` + `sponsor_script.js`: donation total, sponsor list, search/filter, donation modal. - - `stats.html` + `stats_script.js`: player leaderboard + searchable player cards + modal details. -- Shared structure is injected by `components.js` into `#navbar-component` / `#footer-component` and handles mobile menu/current-link highlighting. -- Shared visual system lives in `css/style.css`; page-specific styles live in `css/pages/` (for example `css/pages/sponsor.css`, `css/pages/stats.css`). + - `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 `