diff --git a/CLAUDE.md b/CLAUDE.md index 692fb12..f698767 100644 --- a/CLAUDE.md +++ b/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 (` + + + + Исследуй Планету + + + + + +
+ +
+
+ +
+ +
+
+ Итого собрано на планете:   +
+
+ +
+ +
+ +
+

Исследуй Планету

+

Собери ресурсы, решая примеры!

+
+
+ +
+ +
+
+ + 5 × 3 + 8 =   +
+
+ +
+
+ + 7 × 4 − 6 =   +
+
+ +
+
+ + 3 × 6 + 5 =   +
+
+ +
+
+ + 8 × 2 + 3 =   +
+
+ +
+
+ + 4 × 5 − 7 =   +
+
+ +
+
+ + 6 × 3 + 9 =   +
+
+ +
+
+ + 9 × 2 − 4 =   +
+
+ +
+
+ + 7 × 3 + 2 =   +
+
+ +
+
+ + 2 × 8 + 6 =   +
+
+ +
+
+ + 5 × 4 − 3 =   +
+
+ +
+
+ + 3 × 7 + 4 =   +
+
+ +
+
+ + 9 × 3 − 5 =   +
+
+ +
+
+ + 4 × 6 + 7 =   +
+
+ +
+
+ + 8 × 3 − 9 =   +
+
+ +
+
+ + 6 × 4 + 2 =   +
+
+ +
+
+ + 7 × 2 + 8 =   +
+
+ +
+
+ + 2 × 9 − 3 =   +
+
+ +
+
+ + 5 × 5 + 4 =   +
+
+ +
+
+ + 3 × 8 − 6 =   +
+
+ +
+
+ + 4 × 7 + 5 =   +
+
+ +
+
+
+ + +