finish template

CLAUDE.md

@@ -30,14 +30,17 @@ node src/scripts/banatie.mjs --type icon --prompt "golden star" --output assets/
 ```
 src/
   styles/main.css              — Tailwind source with A4/print styles
+  templates/space-base.html    — Base template (reference example, see below)
   scripts/
     generate-pdf.mjs           — HTML → PDF via Puppeteer
     generate-problems.mjs      — JSON task → concrete problem list
     banatie.mjs                — Banatie API client for image generation
 tasks/                         — JSON task definition files
 assets/
+  hero-images/                 — spaceship1-6.jpeg (header hero images)
+  footers/                     — planet1-6.jpeg (footer panorama images)
+  icons/pack1/                 — minerals1-6 + plants1-6, 16 variants each ({name}-{row}-{col}.png)
   backgrounds/                 — large background images per theme (~1200x1700px)
-  icons/                       — icon sets in subfolders (128x128px transparent PNG)
 output/
   html/                        — generated HTML (gitignored)
   pdf/                         — generated PDFs (gitignored)
@@ -89,19 +92,57 @@ Each task is a JSON file in `tasks/` with this structure:
 - **theme.icons** — path to icon directory (for collectible rewards)
 - **theme.iconReward** — show an icon every N problems solved
 
+## Space Base Template
+
+Reference example: `src/templates/space-base.html`
+
+This is the base visual design for all space-themed worksheets. When generating a new worksheet, use this file as the source of truth for layout, styling, and structure. **Read it first**, then produce a new HTML with these variations:
+
+### What to vary per worksheet
+
+1. **Hero image** — pick one from `assets/hero-images/spaceship{1-6}.jpeg`
+2. **Footer image** — pick one from `assets/footers/planet{1-6}.jpeg`
+3. **Hero position** — set CSS variable `--hero-direction: row` (hero left) or `row-reverse` (hero right)
+4. **Problem icons** — randomly pick from `assets/icons/pack1/` (minerals and plants, any variant `{name}-{row}-{col}.png`)
+5. **Problem alignment** — for each problem card, randomly assign `justify-start`, `justify-center`, or `justify-end` within its grid column. No repeating patterns — should look chaotic/scattered
+6. **Title, subtitle, footer text** — set from the task description
+7. **Problems** — generate from the task config (template like `{a} × {b} + {c}`, variable ranges/sets, etc.)
+
+### Layout structure (do not change)
+
+- Page: `w-[210mm] h-[297mm]` white container
+- Footer: absolute bottom, `h-[80mm]`, with white-to-transparent fade on top
+- Footer bubble: absolute `bottom-[12mm]`, pill-shaped with semi-transparent white bg
+- Content area: `px-[12mm] pt-[8mm] pb-[65mm]` flex column
+- Header: hero image `w-[48%]` + title block centered
+- Problems: `grid grid-cols-2 gap-x-3 gap-y-[8px]` — 20 problems total
+- Each problem: pill card with 44px icon + `text-[1.2rem]` expression + `w-16` answer underline
+- Font: Nunito via Google Fonts
+- Uses Tailwind CDN (`<script src="https://cdn.tailwindcss.com">`)
+
+### Color palette (do not change)
+
+| Element | Hex |
+|---------|-----|
+| Title text | `text-indigo-950` (#1e1b4b) |
+| Subtitle | `text-indigo-400` (#6366f1) |
+| Card border | `border-indigo-100` (#e0e7ff) |
+| Answer underline | `border-indigo-300` (#a5b4fc) |
+| Card bg gradient | `from-white to-indigo-50/40` |
+| Footer bubble border | `border-indigo-200` |
+
 ## HTML Generation Guidelines
 
 When generating HTML worksheets:
 
-- **Page size:** A4 = 210mm × 297mm. Use the `.page-a4` class.
-- **CSS:** Link to `../css/styles.css` (relative from `output/html/`)
-- **Page breaks:** Use `break-after: page` between pages. Each `.page-a4` is one printed page.
-- **Background images:** Use absolute paths or paths relative to HTML location. Apply via `.page-background` as a full-page positioned image.
-- **Icons:** Inline small 128×128 images next to problems or as rewards.
-- **Fonts:** Use system fonts or Google Fonts loaded via `<link>`.
-- **Print-friendly:** Avoid shadows, gradients that don't print well. Test with `npm run pdf`.
-- **Images in PDF:** Use local file paths (not URLs). Puppeteer resolves `file://` protocol.
-- **Embed images** as base64 data URIs when possible for reliable PDF rendering.
+- **Always read** `src/templates/space-base.html` first and use it as the structural reference
+- **Page size:** A4 = 210mm × 297mm
+- **CSS:** Uses Tailwind CDN in the HTML `<script>` tag (not the compiled CSS file)
+- **Page breaks:** Use `break-after: page` between pages
+- **Icons:** 44×44px inline images from `assets/icons/pack1/` next to each problem
+- **Fonts:** Nunito from Google Fonts via `<link>`
+- **Images in PDF:** Use local file paths (not URLs). Puppeteer resolves `file://` protocol
+- **Embed images** as base64 data URIs when possible for reliable PDF rendering
 
 ## Banatie API