Reorganize site into story-platform layout

[dbsectrainer]

Restructure the web app's information architecture around a
stories-based course model while keeping the existing visual styling:

• Shared chrome: new js/layout.js injects a site-wide header nav,
  language selector, and footer sitemap into #site-header/#site-footer
  on every page (loaded before i18n.js so injected labels localize);
  new css/layout.css holds the chrome and new-page components.
• index.html becomes a marketing-style landing page (hero CTAs,
  how-it-works, features, course overview, featured lessons, FAQ
  teaser) with a continue-learning strip for returning users.
• New stories.html lists all 40 days as story cards grouped into five
  stages, plus reading passages and supplementary topics, with
  completion checkmarks.
• New dashboard.html absorbs the progress widgets, language cards,
  and backup/notification modals that previously lived on index.
• day.html gains a breadcrumb, stage badge, day counter, audio
  duration, and cross-links to writing/flashcards/reading.
• New static pages: course.html (free 40-day syllabus), learn.html
  hub with three guides (method, pinyin/tones with live tone demo,
  characters with animated stroke order), teachers.html, faq.html,
  contact.html.
• Tool pages (reading/writing/supplementary/quiz/placement/srs/review)
  retrofitted to the shared layout and cross-linked via the nav.
• sw.js: cache v13 with the new assets; manifest theme_color fixed to
  match the navy palette.
• Dead duplicates removed (css/styles.css, js/script.js,
  js/script.min.js) after porting their logic into page controllers.
• Playwright specs updated for the new IA plus new smoke coverage;
  playwright.config.ts accepts CHROMIUM_EXECUTABLE_PATH override.

Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_012i1i2YSWBawckv8PpsQ7nd

[Copilot]

Pull request overview

Restructures the static web app into a stories-based “course platform” IA with shared header/footer chrome injected via js/layout.js, adding new top-level pages (Stories index, Progress dashboard, Learn guides, Course syllabus, Teachers/FAQ/Contact) while keeping existing styling and updating PWA caching and Playwright e2e coverage.

Changes:

• Introduces shared site chrome (js/layout.js, css/layout.css) and retrofits existing pages to use #site-header / #site-footer.
• Adds new core pages (e.g., stories.html, dashboard.html, Learn/Course/Teachers/FAQ/Contact) and their page controllers.
• Updates service worker cache version/assets and expands Playwright smoke/retention/localization specs for the new IA.

Reviewed changes

Copilot reviewed 35 out of 36 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
writing.html	Adds shared chrome placeholders + layout assets and updates theme color.
tests/e2e/smoke.spec.ts	Adds smoke coverage for injected nav localization, stories rendering, and new static pages.
tests/e2e/retention.spec.ts	Updates retention flow to validate the new dashboard entry point.
tests/e2e/localization.spec.ts	Updates localization assertions to target dashboard instead of index.
teachers.html	Adds new “For Teachers” page using shared chrome and localized content blocks.
sw.js	Bumps cache version and updates static asset list for new pages/controllers.
supplementary.html	Retrofits supplementary page to shared header/footer placeholders + layout assets.
stories.html	Adds new Stories index page with stage grouping and reading/supplementary sections.
srs.html	Retrofits SRS page to shared header/footer placeholders + layout assets.
review.html	Retrofits review page to shared header/footer placeholders + layout assets.
README.md	Updates project structure docs for new IA and shared layout checklist.
reading.html	Retrofits reading page to shared header/footer placeholders + layout assets.
quiz.html	Retrofits quiz page to shared header/footer placeholders + layout assets.
playwright.config.ts	Adds optional CHROMIUM_EXECUTABLE_PATH override for CI environments.
placement.html	Retrofits placement page to shared header/footer placeholders + layout assets.
manifest.json	Updates theme_color to match the new navy palette.
learn.html	Adds new Learn hub page linking to the three guides.
learn-pinyin.html	Adds new pinyin/tones guide page (with tone demo integration).
learn-method.html	Adds new “method” guide page.
learn-characters.html	Adds new “characters” guide page (with stroke-order demo integration).
js/stories-page.js	Implements stories index rendering and completion state decoration.
js/layout.js	Adds shared header/nav/footer injection + return-to-top injection.
js/i18n.js	Adjusts pinyin/visibility logic to skip shared chrome nodes injected by layout.
js/home-page.js	Implements landing-page “continue learning” strip and animation hooks.
js/day-page.js	Adds day-page story meta (breadcrumb/stage badge/day counter/audio duration) wiring.
js/dashboard-page.js	Implements progress dashboard rendering and storage-event updates.
faq.html	Adds new FAQ page using shared chrome and localized Q/A blocks.
day.html	Retrofits day page to shared chrome and adds breadcrumb/meta/secondary actions.
dashboard.html	Adds new progress dashboard page and modals integration.
css/styles.css	Removes legacy unminified stylesheet (now relying on styles.min.css + layout.css).
css/layout.css	Adds shared chrome styling and new page components (stories/cards/FAQ/articles/etc.).
course.html	Adds new course syllabus/outcomes page using shared chrome.
contact.html	Adds new contact page with GitHub links and shared chrome.
js/script.min.js	Removes legacy minified script (replaced by page controllers).
js/script.js	Removes legacy unminified script (replaced by page controllers).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.