refactor: new structure

This commit is contained in:
2026-04-21 19:49:08 +07:00
parent 99bc387244
commit ba676c2924
45 changed files with 12097 additions and 807 deletions
+45
View File
@@ -0,0 +1,45 @@
# Space Exploration Task Type
Math problem worksheets with space theme: hero images, footer panoramas, icon-decorated problem cards.
## Base References
- Base template: `src/templates/space-base.html` (layout/styling reference)
- Example outputs in `docs/` (existing worksheets serve as reference for new ones)
## What to Vary Per Worksheet
1. **Hero image** — from `assets/hero-images/spaceship{1-9}.jpeg`
2. **Footer image** — from `assets/footers/planet{1-9}.jpeg`
3. **Hero position** — `flex-row-reverse` (hero right) or default (hero left)
4. **Problem icons** — from `assets/icons/pack1/` or `pack2/`. **Every icon must be unique across the entire document** (no repeats across pages). Shuffle minerals and plants randomly — do not sort by type
5. **Problem alignment** — randomly assign `justify-start`, `justify-center`, or `justify-end` per card. No patterns — should look chaotic/scattered
6. **Problems** — generate from the task description in the `.md` file
## Layout Structure (do not change)
- Page: `w-[210mm] h-[297mm]` white container
- Footer: absolute bottom, `h-[80mm]`, with white-to-transparent fade on top. **No `overflow-hidden`** on footer (causes 1px hairline artifact in PDF)
- Footer bubble: absolute `bottom-[12mm]`, pill-shaped with semi-transparent white bg
- Content area: `px-[12mm] pt-[4mm] pb-[65mm]` flex column
- Header: hero image `w-[48%]` + title block centered, `flex-row-reverse` for hero-right
- Footer gradient: `linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%)` with `h-full`
- Problems: `grid grid-cols-2 gap-x-3 gap-y-[3px]` — 20 problems total
- Each problem: 58px icon outside pill + `text-[1.2rem]` expression + `w-16` answer underline inside pill
- Font: Nunito via Google Fonts
- Uses Tailwind CDN
## 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` |
## Scripts
- `scripts/generate-worksheet3.mjs` — generator for 9-page combined worksheets
@@ -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>
@@ -0,0 +1,537 @@
<!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; }
</style>
</head>
<body class="bg-gray-200 font-nunito">
<!-- PAGE 1: A + B ± C (A:8-16, B:4-8, C:±1-3) — hero right, spaceship2, planet3 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet3.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4 flex-row-reverse">
<img src="../../assets/hero-images/spaceship2.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-center py-[3px]">
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants1-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 7 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 5 − 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants5-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 6 + 3 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals3-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 4 − 2 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals2-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 8 + 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 5 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants6-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 7 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 4 − 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants1-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 6 + 3 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants6-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 8 − 2 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals5-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 5 + 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants5-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 7 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants3-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 6 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants3-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 4 − 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants1-2-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 8 + 3 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants3-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 5 − 2 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 7 + 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 4 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants1-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 6 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 8 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- PAGE 2: 5 × N ± C (N:1-5, C:-3..+6) — hero left, spaceship4, planet5 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet5.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="../../assets/hero-images/spaceship4.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-start py-[3px]">
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 4 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals5-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants2-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals6-1-2.png" class="w-[39px] h-[39px] 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-center py-[3px]">
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals5-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants2-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals1-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 4 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 6 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals3-1-1.png" class="w-[39px] h-[39px] 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-start py-[3px]">
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals2-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- PAGE 3: A × B ± C (A,B:1-4, C:-4..+8) — hero right, spaceship6, planet1 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4 flex-row-reverse">
<img src="../../assets/hero-images/spaceship6.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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants6-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals6-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 + 7 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals2-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals1-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 − 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 4 + 8 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants2-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals4-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals5-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 2 + 7 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 − 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals6-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 6 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants5-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 − 2 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants1-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants4-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/minerals5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 + 1 = <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-[1px] 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 overflow-hidden">
<img src="../../assets/icons/pack1/plants3-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
# Space Exploration 1
**Title:** Исследуй Планету
**Subtitle:** Собери ресурсы, решая примеры!
**Footer bubble:** Итого собрано на планете:
## Layout
- 2 columns, 20 problems per page
- Icons: assets/icons/pack1/
## Pages
### Page 1
- **Task:** A + B +/- C, where A from 8 to 16, B from 4 to 8, C from 1 to 3. Sign +/- chosen randomly
- **Problem count:** 20
- **Hero:** spaceship2.jpeg, direction: row-reverse
### Page 2
- **Task:** 5 * N +/- C, where N from 1 to 5, C from 1 to 6. Sign +/- chosen randomly
- **Problem count:** 20
- **Hero:** spaceship4.jpeg, direction: row
### Page 3
- **Task:** A * B +/- C, where A and B from 1 to 4, C from 1 to 8. Sign +/- chosen randomly
- **Problem count:** 20
- **Hero:** spaceship6.jpeg, direction: row-reverse
@@ -0,0 +1,657 @@
<!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; }
</style>
</head>
<body class="bg-gray-200 font-nunito">
<!-- PAGE 1: A + B ± C (A:8-16, B:4-8, C:±1-3) — hero right, spaceship2, planet3 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet3.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4 flex-row-reverse">
<img src="../../assets/hero-images/spaceship2.png" 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-[3px] flex-1 content-start">
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants5-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 8 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 5 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants6-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants6-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals5-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 5 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants5-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 8 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 5 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 7 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 8 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PAGE 2: 5 × N ± C (N:1-5, C:-3..+6) — hero left, spaceship4, planet5 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet5.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="../../assets/hero-images/spaceship4.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-[3px] flex-1 content-start">
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals5-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals6-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<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>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals5-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<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>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PAGE 3: A × B ± C (A,B:1-4, C:-4..+8) — hero right, spaceship6, planet1 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4 flex-row-reverse">
<img src="../../assets/hero-images/spaceship6.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-[3px] flex-1 content-start">
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants6-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals6-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants6-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants5-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals5-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 2 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals6-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants5-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/minerals5-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack1/plants3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,659 @@
<!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; }
</style>
</head>
<body class="bg-gray-200 font-nunito">
<!-- PAGE 1: A + B + C (A:12-24, B:±6-10, C:±2-5, result 0-40) — hero right, spaceship1, planet2 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet2.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4 flex-row-reverse">
<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-[3px] flex-1 content-start">
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">18 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 − 9 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">22 + 6 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 − 8 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">20 + 10 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 − 7 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">24 + 8 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 − 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">19 + 9 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 − 10 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">21 + 7 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">17 − 8 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">23 + 6 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 10 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 9 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">20 − 7 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">24 − 6 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">18 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 10 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 − 9 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PAGE 2: 5+5+5 / 5×N / 5×N±5 — hero left, spaceship3, planet4 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet4.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="../../assets/hero-images/spaceship3.png" 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="font-semibold text-indigo-950 mb-3 text-center" style="font-size: 0.8rem; margin-top: -10px;">Посчитай пятёрками: <span style="font-size: 1rem; word-spacing: 0.25em;">5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60</span> для зарядки расщепителя</div>
<div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 11 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 8 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 10 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 12 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 7 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 8 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PAGE 3: A×B + C×D (A:2-4, B:1-3, C:2-3, D:1-2) — hero right, spaceship5, planet6 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../assets/footers/planet6.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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4 flex-row-reverse">
<img src="../../assets/hero-images/spaceship5.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-[3px] flex-1 content-start">
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 1 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem3-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 1 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem2-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
<div class="flex justify-start">
<div class="flex items-center gap-1">
<img src="../../assets/icons/pack2/elem1-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,27 @@
# Space Worksheet 2
**Title:** Исследуй Планету
**Subtitle:** Собери ресурсы, ре��ая примеры!
**Footer bubble:** Итого собрано на планете:
## Layout
- 2 columns, 20 problems per page
- Icons: assets/icons/pack2/
## Pages
### Page 1
- **Task:** A + B + C, where A from 12 to 24, B +/-(from 6 to 10), C +/-(from 2 to 5). Result from 0 to 40 inclusive
- **Problem count:** 20
- **Hero:** spaceship1.jpeg, direction: row-reverse
### Page 2
- **Task:** 5 + 5 + 5 (adding fives: 2, 3 or 4 of them) OR 5 * N (N from 1 to 12) OR 5 * N +/- 5
- **Problem count:** 20
- **Hero:** spaceship3.png, direction: row
### Page 3
- **Task:** A * B + C * D, where A from 2 to 4, B from 1 to 3, C from 2 to 3, D from 1 to 2
- **Problem count:** 20
- **Hero:** spaceship5.jpeg, direction: row-reverse
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,53 @@
# Space Worksheet 3
**Title:** Исследуй Планету
**Subtitle:** Собери ресу��сы, решая примеры!
**Footer bubble:** Итого собрано на планете:
## Layout
- 2 columns, 20 problems per page
- Icons: mixed from pack1 and pack2
## Notes
9-page worksheet combining patterns from worksheet1 and worksheet2.
Pages 1-3 use pack1 icons, pages 4-6 use pack2 icons, pages 7-9 use pack1 icons.
## Pages
### Page 1 (pack1)
- **Task:** A + B +/- C, where A from 8 to 16, B from 4 to 8, C from 1 to 3. Sign +/- chosen randomly
- **Hero:** spaceship1.jpeg, direction: row-reverse
### Page 2 (pack1)
- **Task:** 5 * N +/- C, where N from 1 to 5, C from 1 to 6. Sign +/- chosen randomly
- **Hero:** spaceship2.jpeg, direction: row
### Page 3 (pack1)
- **Task:** A * B +/- C, where A and B from 1 to 4, C from 1 to 8. Sign +/- chosen randomly
- **Hero:** spaceship3.png, direction: row-reverse
### Page 4 (pack2)
- **Task:** A + B + C, where A from 12 to 24, B +/-(from 6 to 10), C +/-(from 2 to 5). Result from 0 to 40 inclusive
- **Hero:** spaceship4.jpeg, direction: row
### Page 5 (pack2)
- **Task:** 5 + 5 + 5 (adding fives: 2, 3 or 4) OR 5 * N (N from 1 to 12) OR 5 * N +/- 5
- **Hero:** spaceship5.jpeg, direction: row-reverse
### Page 6 (pack2)
- **Task:** A * B + C * D, where A from 2 to 4, B from 1 to 3, C from 2 to 3, D from 1 to 2
- **Hero:** spaceship6.jpeg, direction: row
### Page 7 (pack1)
- **Task:** A + B +/- C, where A from 8 to 16, B from 4 to 8, C from 1 to 3. Sign +/- chosen randomly
- **Hero:** spaceship7.jpeg, direction: row-reverse
### Page 8 (pack1)
- **Task:** 5 * N +/- C, where N from 1 to 5, C from 1 to 6. Sign +/- chosen randomly
- **Hero:** spaceship8.jpeg, direction: row
### Page 9 (pack1)
- **Task:** A * B +/- C, where A and B from 1 to 4, C from 1 to 8. Sign +/- chosen randomly
- **Hero:** spaceship9.jpeg, direction: row-reverse
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,311 @@
/**
* Generate space-worksheet3.html — 9-page static HTML worksheet
* combining task patterns from worksheet1 and worksheet2.
*
* Usage: node src/scripts/generate-worksheet3.mjs
* Output: output/html/space-worksheet3.html
*/
import fs from 'fs';
import path from 'path';
const ROOT = process.cwd();
// ── Icon pools ──────────────────────────────────────────────────────────────
const pack1Icons = fs.readdirSync(path.join(ROOT, 'assets/icons/pack1'))
.filter(f => f.endsWith('.png'))
.map(f => `assets/icons/pack1/${f}`);
const pack2Icons = fs.readdirSync(path.join(ROOT, 'assets/icons/pack2'))
.filter(f => f.endsWith('.png'))
.map(f => `assets/icons/pack2/${f}`);
function shuffle(arr) {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randSign() {
return Math.random() < 0.5 ? 1 : -1;
}
function pickAlignment() {
const opts = ['justify-start', 'justify-center', 'justify-end'];
return opts[Math.floor(Math.random() * opts.length)];
}
// ── Problem generators ──────────────────────────────────────────────────────
// Pattern 1: A + B ± C (A:8-16, B:4-8, C:1-3)
function genPattern1() {
const problems = [];
const seen = new Set();
while (problems.length < 20) {
const A = randInt(8, 16);
const B = randInt(4, 8);
const C = randInt(1, 3);
const sign = randSign();
const expr = sign > 0 ? `${A} + ${B} + ${C}` : `${A} + ${B} − ${C}`;
const result = A + B + sign * C;
if (result >= 0 && !seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
return problems;
}
// Pattern 2: 5 × N ± C (N:1-5, C:1-6)
function genPattern2() {
const problems = [];
const seen = new Set();
while (problems.length < 20) {
const N = randInt(1, 5);
const C = randInt(1, 6);
const sign = randSign();
const expr = sign > 0 ? `5 × ${N} + ${C}` : `5 × ${N} − ${C}`;
const result = 5 * N + sign * C;
if (result >= 0 && !seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
return problems;
}
// Pattern 3: A × B ± C (A,B:1-4, C:1-8)
function genPattern3() {
const problems = [];
const seen = new Set();
while (problems.length < 20) {
const A = randInt(1, 4);
const B = randInt(1, 4);
const C = randInt(1, 8);
const sign = randSign();
const expr = sign > 0 ? `${A} × ${B} + ${C}` : `${A} × ${B} − ${C}`;
const result = A * B + sign * C;
if (result >= 0 && !seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
return problems;
}
// Pattern 4: A + B + C (A:12-24, B:±6-10, C:±2-5, result 0-40)
function genPattern4() {
const problems = [];
const seen = new Set();
while (problems.length < 20) {
const A = randInt(12, 24);
const signB = randSign();
const B = randInt(6, 10);
const signC = randSign();
const C = randInt(2, 5);
const result = A + signB * B + signC * C;
if (result >= 0 && result <= 40) {
const bPart = signB > 0 ? `+ ${B}` : `− ${B}`;
const cPart = signC > 0 ? `+ ${C}` : `− ${C}`;
const expr = `${A} ${bPart} ${cPart}`;
if (!seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
}
return problems;
}
// Pattern 5: mixed fives (5+5+5, 5×N, 5×N±5)
function genPattern5() {
const problems = [];
const seen = new Set();
// Type A: 5+5+5 (2,3,4 fives)
for (const count of [2, 3, 4]) {
const expr = Array(count).fill('5').join(' + ');
problems.push(expr);
seen.add(expr);
}
// Type B: 5×N (N:1-12)
const ns = shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
for (const n of ns) {
if (problems.length >= 20) break;
const expr = `5 × ${n}`;
if (!seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
// Type C: 5×N±5 (fill remaining)
while (problems.length < 20) {
const N = randInt(2, 12);
const sign = randSign();
const expr = sign > 0 ? `5 × ${N} + 5` : `5 × ${N} − 5`;
if (!seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
return shuffle(problems);
}
// Pattern 6: A×B + C×D (A:2-4, B:1-3, C:2-3, D:1-2)
function genPattern6() {
const problems = [];
const seen = new Set();
while (problems.length < 20) {
const A = randInt(2, 4);
const B = randInt(1, 3);
const C = randInt(2, 3);
const D = randInt(1, 2);
const expr = `${A} × ${B} + ${C} × ${D}`;
if (!seen.has(expr)) {
seen.add(expr);
problems.push(expr);
}
}
return problems;
}
const generators = [genPattern1, genPattern2, genPattern3, genPattern4, genPattern5, genPattern6, genPattern1, genPattern2, genPattern3];
// ── Page config ─────────────────────────────────────────────────────────────
const pages = [
{ hero: 'assets/hero-images/spaceship1.jpeg', footer: 'assets/footers/planet1.jpeg', dir: 'flex-row-reverse', pack: 'pack1', gen: 0 },
{ hero: 'assets/hero-images/spaceship2.jpeg', footer: 'assets/footers/planet2.jpeg', dir: '', pack: 'pack1', gen: 1 },
{ hero: 'assets/hero-images/spaceship3.png', footer: 'assets/footers/planet3.jpeg', dir: 'flex-row-reverse', pack: 'pack1', gen: 2 },
{ hero: 'assets/hero-images/spaceship4.jpeg', footer: 'assets/footers/planet4.jpeg', dir: '', pack: 'pack2', gen: 3 },
{ hero: 'assets/hero-images/spaceship5.jpeg', footer: 'assets/footers/planet5.jpeg', dir: 'flex-row-reverse', pack: 'pack2', gen: 4, fivesHint: true },
{ hero: 'assets/hero-images/spaceship6.jpeg', footer: 'assets/footers/planet6.jpeg', dir: '', pack: 'pack2', gen: 5 },
{ hero: 'assets/hero-images/spaceship7.jpeg', footer: 'assets/footers/planet7.jpeg', dir: 'flex-row-reverse', pack: 'pack1', gen: 6 },
{ hero: 'assets/hero-images/spaceship8.jpeg', footer: 'assets/footers/planet8.jpeg', dir: '', pack: 'pack1', gen: 7 },
{ hero: 'assets/hero-images/spaceship9.jpeg', footer: 'assets/footers/planet9.jpeg', dir: 'flex-row-reverse', pack: 'pack1', gen: 8 },
];
// ── Assign icons per section (3 pages share a pool) ─────────────────────────
// Section 1 (pages 0-2): pack1 shuffled
// Section 2 (pages 3-5): pack2 shuffled
// Section 3 (pages 6-8): pack1 re-shuffled
const iconSections = [
shuffle(pack1Icons), // pages 0-2: 60 icons
shuffle(pack2Icons), // pages 3-5: 60 icons
shuffle(pack1Icons), // pages 6-8: 60 icons (reuse pack1, different shuffle)
];
// ── Build HTML ──────────────────────────────────────────────────────────────
function buildProblemCard(icon, expression, alignment, iconSize) {
return ` <div class="flex ${alignment}">
<div class="flex items-center gap-1">
<img src="../../${icon}" class="w-[${iconSize}px] h-[${iconSize}px] shrink-0 object-contain" alt="">
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">${expression} = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
</div>
</div>
</div>`;
}
function buildPage(pageIdx, isLast) {
const pg = pages[pageIdx];
const sectionIdx = Math.floor(pageIdx / 3);
const posInSection = pageIdx % 3;
const sectionIcons = iconSections[sectionIdx];
const pageIcons = sectionIcons.slice(posInSection * 20, posInSection * 20 + 20);
const iconSize = pg.pack === 'pack2' ? 58 : 58;
const problems = generators[pg.gen]();
const dirClass = pg.dir ? ` ${pg.dir}` : '';
const breakStyle = isLast ? '' : ' style="break-after: page;"';
const fivesHint = pg.fivesHint
? `\n <div class="font-semibold text-indigo-950 mb-3 text-center" style="font-size: 0.8rem; margin-top: -10px;">Посчитай пятёрками: <span style="font-size: 1rem; word-spacing: 0.25em;">5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60</span> для зарядки расщепителя</div>\n`
: '';
const cards = problems.map((expr, i) => {
return buildProblemCard(pageIcons[i], expr, pickAlignment(), iconSize);
}).join('\n\n');
return ` <!-- PAGE ${pageIdx + 1} -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white"${breakStyle}>
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="../../${pg.footer}" 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-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4${dirClass}">
<img src="../../${pg.hero}" 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>
${fivesHint}
<div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">
${cards}
</div>
</div>
</div>`;
}
const htmlPages = pages.map((_, i) => buildPage(i, i === pages.length - 1)).join('\n\n');
const html = `<!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; }
</style>
</head>
<body class="bg-gray-200 font-nunito">
${htmlPages}
</body>
</html>
`;
// ── Write output ────────────────────────────────────────────────────────────
const outDir = path.join(ROOT, 'output/html');
if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
const outPath = path.join(outDir, 'space-worksheet3.html');
fs.writeFileSync(outPath, html, 'utf-8');
console.log(`Generated: ${outPath} (${pages.length} pages, ${pages.length * 20} problems)`);
@@ -0,0 +1,45 @@
#!/usr/bin/env node
/**
* Generate output HTML from template + data for space-exploration documents.
*
* Usage: node generate.mjs <docId>
* Example: node generate.mjs space-exploration-1
*
* Reads: docs/<docId>.template.html
* Reads: docs/<docId>.data.json (optional — if missing, copies template as-is)
* Writes: docs/<docId>.output.html
*/
import { readFileSync, writeFileSync, existsSync } from 'fs';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
const docsDir = join(__dirname, '..', 'docs');
const docId = process.argv[2];
if (!docId) {
console.error('Usage: node generate.mjs <docId>');
process.exit(1);
}
const templatePath = join(docsDir, `${docId}.template.html`);
const dataPath = join(docsDir, `${docId}.data.json`);
const outputPath = join(docsDir, `${docId}.output.html`);
if (!existsSync(templatePath)) {
console.error(`Template not found: ${templatePath}`);
process.exit(1);
}
let html = readFileSync(templatePath, 'utf-8');
// If data.json exists, apply it (space-exploration currently has no editor data)
if (existsSync(dataPath)) {
const data = JSON.parse(readFileSync(dataPath, 'utf-8'));
console.log(`Data file found with ${data.pages?.length || 0} pages — no transforms defined yet for space-exploration`);
}
writeFileSync(outputPath, html);
console.log(`Generated: ${outputPath}`);