Course-Nav Builder（高校选课导航生成器）

Generate a polished, dependency-free, single-file index.html course-selection
navigation web app for any higher-education institution. The output is a dark-themed
SPA with tab navigation, data-driven cards, prerequisite hints, a freshman growth
timeline, and a credit-planning view — no build step, no external libraries.

When to use

• User asks for a course/major selection guide, credit-system navigator, or
  "选课导航 / 专业导航 / 学分制引导" web page for a specific school.
• User provides (or you must research) a school's disciplines, colleges, majors,
  and course structure and wants it turned into an explorable web app.
• User wants to adapt the bundled HIFA template (assets/hifa-course-nav.html) to
  another institution.

Core principle

Data first, render second. The app is 100% data-driven. Build complete, accurate
data blocks (the institution's real academic structure), then wire them through a
fixed set of render functions. The HTML/CSS shell and render functions barely change
between schools — only the const data blocks and copy do.

Workflow

1. Gather the academic structure. Collect: discipline/学科 strategy (e.g. "212"
   peaks + supporting + development boards), college/学院 list with discipline
   attribution, overall degree-field/学科布局 (academic vs professional degrees),
   majors with core courses + electives + cross-discipline electives, prerequisite
   map (elective → recommended core prereqs), a 4-year freshman growth timeline, and
   a first-semester checklist. Mark anything that is illustrative vs official.

2. Copy the template. Start from assets/hifa-course-nav.html (the canonical
   reference). Keep the full <style> block, the nav/header, the render*
   functions, and the bootstrap calls at the bottom. Replace only the const data
   blocks (lines ~324–694) and the page title/copy. This guarantees visual polish
   and correct wiring out of the box.

3. Populate the data blocks using the schema in references/schema.md:
   DISCIPLINES, COLLEGES, FIELDS, TIMELINE, FRESHMAN_TODO, PREREQ,
   SHARED_FOUNDATION, MAJORS. Keep every field; omit optional ones only with
   reason. MAJORS[].disc must reference a DISCIPLINES.key; COLLEGES[].disc
   likewise; FIELDS[].majors may list MAJORS[].ids.

4. Wire views. Ensure the bootstrap line calls every renderer
   (renderLayout(); renderHome(); renderComparePick(); renderCompare(); renderQuiz(); renderPlanMajorSelect(); renderElectivePool(); renderChosen(); renderRoadmap();). Add a nav tab + a .view container for any new module.

5. Localize copy, not code. School name, footer disclaimer ("以学校最新培养方案
   为准"), accent colors (--accent/--accent-2 in :root), and section titles are
   the main things to change per school.

6. Validate. Run node --check index.html is not valid for HTML; instead extract
   the <script> and run node --check on it, or simply open the file and verify no
   console errors. The HIFA template passed node --check on its script. Confirm:
   every major renders a detail card, prerequisite confirm fires, roadmap has 4
   stages, freshman checklist persists via localStorage (with try/catch fallback
   to window.__todo).

7. Deliver. Present the index.html (live preview). Offer to package as a ZIP
   for distribution.

Design conventions (carry from template)

• Dark theme, CSS variables in :root, sticky blurred header, pill tabs.
• accent:"peak" | "sup" | "cont" tokens on timeline items map to accent colors.
• Cards use .card with hover lift; chips use .chip. Keep these classes.
• Cite sources / add a footer note that course credits are illustrative unless
  verified with the official training plan.
• Keep it a single file (inline CSS + JS). No CDN, no frameworks.

Reference material

• assets/hifa-course-nav.html — full working reference app (HIFA). Copy & adapt.
• references/schema.md — exact field-by-field data schema and adaptation checklist.