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.
+- **Always read** `src/templates/space-base.html` first and use it as the structural reference
-- **CSS:** Link to `../css/styles.css` (relative from `output/html/`)
+- **Page size:** A4 = 210mm × 297mm
-- **Page breaks:** Use `break-after: page` between pages. Each `.page-a4` is one printed page.
+- **CSS:** Uses Tailwind CDN in the HTML `<script>` tag (not the compiled CSS file)
-- **Background images:** Use absolute paths or paths relative to HTML location. Apply via `.page-background` as a full-page positioned image.
+- **Page breaks:** Use `break-after: page` between pages
-- **Icons:** Inline small 128×128 images next to problems or as rewards.
+- **Icons:** 44×44px inline images from `assets/icons/pack1/` next to each problem
-- **Fonts:** Use system fonts or Google Fonts loaded via `<link>`.
+- **Fonts:** Nunito from Google Fonts 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
-- **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
-- **Embed images** as base64 data URIs when possible for reliable PDF rendering.
 
 ## Banatie API
 

src/templates/space-base.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+  <title>Исследуй Планету</title>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: { nunito: ['Nunito', 'sans-serif'] },
+        }
+      }
+    }
+  </script>
+  <style>
+    @page { size: A4; margin: 0; }
+    :root {
+      --hero-direction: row-reverse;
+    }
+    .page-header { flex-direction: var(--hero-direction); }
+  </style>
+</head>
+<body class="bg-gray-200 font-nunito">
+
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
+
+    <div class="absolute bottom-0 left-0 right-0 h-[80mm] overflow-hidden z-0">
+      <div class="absolute top-0 left-0 right-0 h-[40%] bg-gradient-to-b from-white to-transparent z-10"></div>
+      <img src="../../assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
+    </div>
+
+    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
+      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
+        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
+      </div>
+    </div>
+
+    <div class="relative z-10 w-full h-full px-[12mm] pt-[8mm] pb-[65mm] flex flex-col">
+
+      <div class="page-header flex items-center gap-4 mb-4">
+        <img src="../../assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
+          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-x-3 gap-y-[8px] flex-1 content-start">
+
+        <div class="flex justify-end py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 4 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-end py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants2-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals2-0-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 5 − 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">6 × 3 + 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-end py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 × 2 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 8 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-end py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 7 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants1-3-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 × 3 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 6 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 3 − 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-end py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">6 × 4 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-end py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 2 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 9 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals5-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-center py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/plants1-2-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 8 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+        <div class="flex justify-start py-[3px]">
+          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
+            <img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 7 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>