# HTML Contract

## Required Structure

Use a single offline-capable HTML file by default.

Recommended structure:

```html
<header class="top-header">...</header>
<nav class="chapter-nav">...</nav>
<main class="deck-shell">
  <section class="chapter active" id="chapter-0">
    <div class="slide-viewport">
      <article class="slide-card active" id="c0-s0">...</article>
    </div>
  </section>
</main>
<div class="deck-controls">...</div>
```

## Required Interaction

Implement:

- Chapter tabs switch chapters.
- Previous/next buttons move within chapter and across chapter boundaries.
- Arrow keys navigate.
- Fullscreen button or presentation mode button.
- Mobile-friendly controls.
- Print mode that shows all slides and hides controls.

Optional but recommended:

- Resource modal for prompts, templates, cases, or references.
- Copy button for prompt/resource blocks.
- Simple progress indicator: chapter and slide count.
- Self-check panel hidden behind a small "质量自检" button when the user explicitly wants it visible.

## CSS Rules

- Inline CSS in the HTML unless integrating into an existing project.
- Use CSS variables from `visual_system.md`.
- Use stable dimensions for slide cards and controls.
- Use responsive breakpoints below 900px and 640px.
- Keep text from overflowing: wrap long labels, avoid tiny font shrinking.
- No external fonts or icon CDNs for core rendering.

## JavaScript Rules

- Inline vanilla JavaScript is enough.
- Maintain state as `{ chapterIndex, slideIndex }`.
- Avoid heavy frameworks for a static deck.
- Keep quiz/resource modal code small and inspectable.

## Publishing Rules

Publish-ready means:

- `index.html` can open locally.
- All core styles and scripts are included.
- No absolute local paths in production HTML.
- No dependency on screenshots that are missing from the package.
- If deploying, include a plain static project structure:

```text
deck-name/
  index.html
  README.md
  assets/
```

## Visual QA Before Delivery

Check at desktop and mobile widths:

- First screen is the deck, not a landing page.
- Slides are nonblank.
- Navigation works.
- Fullscreen works or has a stated browser limitation.
- Text does not overlap or overflow.
- Print view shows all slides.
- Resource modals, copy buttons, and quizzes work if present.

