refactor: new structure
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# Collecting Asteroids Task Type
|
||||
|
||||
Match asteroids to cargo ships by weight sum. Each page has 3 ships with cargo bays and ~12 asteroids scattered across the page. Child draws lines connecting asteroids to ships so that asteroid values sum to ship capacity.
|
||||
|
||||
## Layout
|
||||
|
||||
- 3 ships per page with cargo bay images
|
||||
- 2 asteroid types per page (70:30 ratio distribution)
|
||||
- 12 asteroids per page scattered with absolute positioning
|
||||
- Hero images: splitter ships from `assets/hero-images/splitters/`
|
||||
- Footer images: cabin interiors from `assets/footers/cabin{1-9}.jpeg`
|
||||
- Cargo bay images: `assets/icons/pack4-cargobay/cargo-bay{1-9}.png`
|
||||
- Asteroid images: `assets/icons/pack3-asteroids/asteroid{1-16}.png`
|
||||
|
||||
## Asteroid Placement Rules
|
||||
|
||||
- Distribute asteroids evenly across the page area using grid-based approach
|
||||
- Asteroids must not overlap with ships or cargo bays
|
||||
- Each asteroid has a numeric value (1-20) displayed on it
|
||||
- Scale formula: `scale = baseScale + 0.15 * value` (default baseScale: 0.30)
|
||||
- No editor-first approach — generate everything via AI first, editor comes later for fine-tuning
|
||||
|
||||
## Validation
|
||||
|
||||
Use verify script to check that asteroid values can be partitioned to ship capacities:
|
||||
```bash
|
||||
node scripts/verify.mjs --ships 10,10,14 --asteroids 3,2,1,4,5,2,3,6,5,4,1,6
|
||||
```
|
||||
|
||||
Always verify solvability after generating or editing asteroid values.
|
||||
|
||||
## Scripts
|
||||
|
||||
- `scripts/verify.mjs` — solver to verify asteroid-to-ship partition (stdout → Claude reads)
|
||||
- `scripts/transform-collecting3.mjs` — bulk asset replacement utility
|
||||
|
||||
## Editor
|
||||
|
||||
`editor.html?file={docId}` — drag asteroids and ship circles, adjust values and scales.
|
||||
|
||||
Key controls:
|
||||
- Drag: move asteroid/ship position
|
||||
- `+/-`: change asteroid value (1-20 range)
|
||||
- `[/]`: rotate ±5° (Shift = ±1°)
|
||||
- `</.>`: adjust base scale per asteroid type
|
||||
- Save: writes to `docs/{docId}.data.json`
|
||||
@@ -0,0 +1,66 @@
|
||||
# Collecting Asteroids 1
|
||||
|
||||
**Title:** Собери Астероиды
|
||||
**Subtitle:** Загрузи трюмы кораблей!
|
||||
**Footer bubble:** Итого загружено:
|
||||
|
||||
## Layout
|
||||
|
||||
- 3 ships per page, 2 asteroid types per page (70:30 ratio)
|
||||
- Asteroids: assets/icons/pack3-asteroids/
|
||||
|
||||
## Pages
|
||||
|
||||
### Page 1
|
||||
- **Ships:** capacity 5 (fill 2), capacity 5 (fill 2), capacity 7 (fill 3)
|
||||
- **Hero:** splitter1.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay1, cargo-bay2, cargo-bay3
|
||||
- **Asteroid types:** asteroid1, asteroid6
|
||||
|
||||
### Page 2
|
||||
- **Ships:** capacity 7 (fill 3), capacity 7 (fill 3), capacity 10 (fill 4)
|
||||
- **Hero:** splitter2.png, direction: row
|
||||
- **Cargo bays:** cargo-bay4, cargo-bay5, cargo-bay6
|
||||
- **Asteroid types:** asteroid3, asteroid9
|
||||
|
||||
### Page 3
|
||||
- **Ships:** capacity 5 (fill 2), capacity 5 (fill 3), capacity 6 (fill 3)
|
||||
- **Hero:** splitter3.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay7, cargo-bay8, cargo-bay9
|
||||
- **Asteroid types:** asteroid5, asteroid11
|
||||
|
||||
### Page 4
|
||||
- **Ships:** capacity 8 (fill 2), capacity 8 (fill 3), capacity 6 (fill 2)
|
||||
- **Hero:** splitter4.png, direction: row
|
||||
- **Cargo bays:** cargo-bay1, cargo-bay2, cargo-bay3
|
||||
- **Asteroid types:** asteroid2, asteroid8
|
||||
|
||||
### Page 5
|
||||
- **Ships:** capacity 4 (fill 1), capacity 4 (fill 2), capacity 4 (fill 3)
|
||||
- **Hero:** splitter5.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay4, cargo-bay5, cargo-bay6
|
||||
- **Asteroid types:** asteroid4, asteroid10
|
||||
|
||||
### Page 6
|
||||
- **Ships:** capacity 10 (fill 4), capacity 10 (fill 3), capacity 8 (fill 3)
|
||||
- **Hero:** splitter6.png, direction: row
|
||||
- **Cargo bays:** cargo-bay7, cargo-bay8, cargo-bay9
|
||||
- **Asteroid types:** asteroid7, asteroid13
|
||||
|
||||
### Page 7
|
||||
- **Ships:** capacity 6 (fill 2), capacity 9 (fill 3), capacity 12 (fill 4)
|
||||
- **Hero:** splitter7.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay1, cargo-bay2, cargo-bay3
|
||||
- **Asteroid types:** asteroid12, asteroid16
|
||||
|
||||
### Page 8
|
||||
- **Ships:** capacity 14 (fill 3), capacity 10 (fill 2), capacity 16 (fill 4)
|
||||
- **Hero:** splitter8.png, direction: row
|
||||
- **Cargo bays:** cargo-bay4, cargo-bay5, cargo-bay6
|
||||
- **Asteroid types:** asteroid14, asteroid15
|
||||
|
||||
### Page 9
|
||||
- **Ships:** capacity 5 (fill 2), capacity 10 (fill 4), capacity 15 (fill 5)
|
||||
- **Hero:** splitter9.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay7, cargo-bay8, cargo-bay9
|
||||
- **Asteroid types:** asteroid1, asteroid9
|
||||
@@ -0,0 +1,348 @@
|
||||
<!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: ships 5(2), 5(2), 7(3) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin1.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 67mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 111mm; top: 15mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 146mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 22mm; top: 55mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 57mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 93mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 80mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 33mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 115mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 45mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 79mm; top: 141mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 132mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 2: ships 7(3), 7(3), 10(4) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin2.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 15mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 42mm; top: 37mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 96mm; top: 2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 86mm; top: 46mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 44mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 140mm; top: 77mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 96mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 56mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 8mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 6mm; top: 39mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 70mm; top: 106mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 31mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 83mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 3: ships 5(2), 5(3), 6(3) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin3.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 80mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 118mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 158mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 11mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 72mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 103mm; top: 37mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 47mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 82mm; top: 99mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 117mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 52mm; top: 134mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 69mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 162mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 4: ships 8(2), 8(3), 6(2) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin4.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: -2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 36mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 77mm; top: 25mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 75mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 112mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 110mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 40mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 55mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 82mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 14mm; top: 122mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 139mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 74mm; top: 145mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 5: ships 4(1), 4(2), 4(3) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin5.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 50mm; top: 0mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 119mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 162mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: -3mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 54mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 90mm; top: 29mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 46mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 85mm; top: 90mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 149mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 68mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 101mm; top: 148mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 6: ships 10(4), 10(3), 8(3) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin6.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: -3mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 48mm; top: 8mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 97mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 31mm; top: 40mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 77mm; top: 34mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 102mm; top: 66mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 154mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 68mm; top: 84mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 57mm; top: 114mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 122mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 1mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 34mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 89mm; top: 122mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 82mm; top: 145mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 7: ships 6(2), 9(3), 12(4) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin7.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">9</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 59mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 116mm; top: 12mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 151mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 8mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 55mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 90mm; top: 44mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 64mm; top: 79mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 94mm; top: 99mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 147mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 35mm; top: 96mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 71mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 112mm; top: 148mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 8: ships 14(3), 10(2), 16(4) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin8.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: -6mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 8mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 49mm; top: 11mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 63mm; top: 44mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 101mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 168mm; top: 68mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 119mm; top: 79mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 59mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 90mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 70mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: -2mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 32mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 88mm; top: 158mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 9: ships 5(2), 10(4), 15(5) — L-R-L -->
|
||||
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
|
||||
<div class="absolute bottom-0 left-0 right-0 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin9.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 31mm; top: -2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 132mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 162mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 89mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 39mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 68mm; top: 39mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 115mm; top: 35mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 1mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 77mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 85mm; top: 114mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 131mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 52mm; top: 110mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 63mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 103mm; top: 143mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
# Collecting Asteroids 2
|
||||
|
||||
**Title:** Собери Астероиды
|
||||
**Subtitle:** Загрузи трюмы кораблей!
|
||||
**Footer bubble:** Итого загружено:
|
||||
|
||||
## Notes
|
||||
|
||||
v2: reshuffled assets, doubled difficulty compared to v1.
|
||||
|
||||
## Layout
|
||||
|
||||
- 3 ships per page, 2 asteroid types per page (70:30 ratio)
|
||||
- Asteroids: assets/icons/pack3-asteroids/
|
||||
- Uses different splitters, cabins, cargo bays and asteroid types than v1
|
||||
|
||||
## Pages
|
||||
|
||||
### Page 1
|
||||
- **Ships:** capacity 10 (fill 2), capacity 10 (fill 2), capacity 14 (fill 3)
|
||||
- **Hero:** splitter5.png, direction: row
|
||||
- **Cargo bays:** cargo-bay4, cargo-bay5, cargo-bay6
|
||||
- **Asteroid types:** asteroid7, asteroid14
|
||||
|
||||
### Page 2
|
||||
- **Ships:** capacity 14 (fill 3), capacity 14 (fill 3), capacity 20 (fill 4)
|
||||
- **Hero:** splitter2.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay7, cargo-bay8, cargo-bay9
|
||||
- **Asteroid types:** asteroid4, asteroid11
|
||||
|
||||
### Page 3
|
||||
- **Ships:** capacity 10 (fill 2), capacity 10 (fill 3), capacity 12 (fill 3)
|
||||
- **Hero:** splitter8.png, direction: row
|
||||
- **Cargo bays:** cargo-bay1, cargo-bay2, cargo-bay3
|
||||
- **Asteroid types:** asteroid2, asteroid9
|
||||
@@ -0,0 +1,347 @@
|
||||
<!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: ships 10(2), 10(2), 14(3) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin7.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 4mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(33deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 91mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 65mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(23deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 14mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 58mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 160mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 53mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.57);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 101mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 62mm; top: 134mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 24mm; top: 117mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 40mm; top: 156mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-80deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 3mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(7deg) scale(2.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 2: ships 14(3), 14(3), 20(4) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin4.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 60mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 105mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 150mm; top: 19mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.73);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 22mm; top: 0mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-63deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 85mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 80mm; top: 50mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 161mm; top: 124mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(95deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 44mm; top: 75mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: -5mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 101mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 73mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.42);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 140mm; top: 150mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 3: ships 10(2), 10(3), 12(3) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin1.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 37mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.83);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 78mm; top: 12mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 109mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 0mm; top: 31mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.97);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 60mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 102mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 132mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 2mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 67mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 81mm; top: 147mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 36mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 109mm; top: 85mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.77);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 4: ships 16(2), 16(3), 12(2) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin9.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 71mm; top: 3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 66mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 160mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -10mm; top: 72mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 63mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.82);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 76mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 149mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 22mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 125mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 103mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.57);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 67mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 103mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 5: ships 8(1), 8(2), 8(3) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin2.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 45mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 83mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.53);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 27mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(37deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: -1mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 66mm; top: 51mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.58);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 108mm; top: 65mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 7mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(75deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 73mm; top: 102mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 140mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 0mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 83mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 6: ships 20(4), 20(3), 16(3) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin6.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 79mm; top: 24mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(65deg) scale(0.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 66mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 148mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(73deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 99mm; top: 135mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-42deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 47mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 84mm; top: 48mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(40deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 114mm; top: 21mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(53deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 16mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 65mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 84mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.17);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.82);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 60mm; top: 108mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 81mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 80mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.78);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 7: ships 12(2), 18(3), 24(4) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin3.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">24</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 37mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 78mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 112mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(50deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 68mm; top: 58mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 99mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 66mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-55deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 88mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.87);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 123mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: -10mm; top: 136mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 50mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 84mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-118deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 8: ships 28(3), 20(2), 32(4) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin8.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">28</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">32</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 72mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 166mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.83);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 47mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-43deg) scale(1.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 101mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 42mm; top: 52mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.48);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 79mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.87);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 91mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 6mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 68mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 93mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(2.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 137mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 74mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 95mm; top: 146mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-7deg) scale(1.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 9: ships 10(2), 20(4), 30(5) — R-L-R -->
|
||||
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
|
||||
<div class="absolute bottom-0 left-0 right-0 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin5.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">30</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 53mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 97mm; top: 9mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 129mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 3mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 74mm; top: 36mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 41mm; top: 40mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 130mm; top: 56mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 61mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 93mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 164mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: -5mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 71mm; top: 138mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.42);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 114mm; top: 96mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 19mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 112mm; top: 158mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,36 @@
|
||||
# Collecting Asteroids 3
|
||||
|
||||
**Title:** Собери Астероиды
|
||||
**Subtitle:** Загрузи трюмы кораблей!
|
||||
**Footer bubble:** Итого загружено:
|
||||
|
||||
## Notes
|
||||
|
||||
v3: reshuffled assets, halved asteroid values. Includes explicit asteroidValues per page.
|
||||
|
||||
## Layout
|
||||
|
||||
- 3 ships per page, 2 asteroid types per page (70:30 ratio)
|
||||
- Asteroids: assets/icons/pack3-asteroids/
|
||||
|
||||
## Pages
|
||||
|
||||
### Page 1
|
||||
- **Ships:** capacity 11 (fill 2), capacity 9 (fill 2), capacity 13 (fill 6)
|
||||
- **Hero:** splitter4.png, direction: row
|
||||
- **Cargo bays:** cargo-bay7, cargo-bay8, cargo-bay9
|
||||
- **Asteroid types:** asteroid3, asteroid10
|
||||
- **Asteroid values:** 3, 2, 1, 4, 5, 2, 3, 6, 5, 4, 1, 6
|
||||
|
||||
### Page 2
|
||||
- **Ships:** capacity 12 (fill 3), capacity 12 (fill 3), capacity 18 (fill 4)
|
||||
- **Hero:** splitter7.png, direction: row-reverse
|
||||
- **Cargo bays:** cargo-bay1, cargo-bay2, cargo-bay3
|
||||
- **Asteroid types:** asteroid6, asteroid13
|
||||
- **Asteroid values:** 4, 5, 3, 6, 2, 7, 4, 3, 5, 2, 6, 4
|
||||
|
||||
### Page 3
|
||||
- **Ships:** capacity 9 (fill 5), capacity 9 (fill 5), capacity 11 (fill 2)
|
||||
- **Hero:** splitter1.png, direction: row
|
||||
- **Cargo bays:** cargo-bay4, cargo-bay5, cargo-bay6
|
||||
- **Asteroid types:** asteroid1, asteroid8
|
||||
@@ -0,0 +1,347 @@
|
||||
<!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: ships 11(2), 9(2), 13(6) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin3.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 54%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 72%; top: 44%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">11</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 26%; top: 46%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 149mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(33deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 81mm; top: 26mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 64mm; top: 52mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(23deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 14mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 50mm; top: 9mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 87mm; top: -2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 82mm; top: 105mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 93mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 66mm; top: 142mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 129mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 45mm; top: 117mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-80deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 6mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(7deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 2: ships 12(3), 12(3), 18(4) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin6.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 62%; top: 40%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 73%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 72mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 105mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 150mm; top: 19mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 52mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-63deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 85mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 86mm; top: 51mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 164mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(95deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 44mm; top: 75mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: -5mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 108mm; top: 152mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 73mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 136mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 3: ships 9(5), 11(3), 11(2) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin9.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 34%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 75%; top: 47%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 22%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 38mm; top: 8mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 76mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 109mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: -4mm; top: 25mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">9</span></div></div></div>
|
||||
<div class="absolute" style="left: 64mm; top: 56mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 97mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 175mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(2.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: -10mm; top: 124mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 48mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 65mm; top: 151mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 18mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 106mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(13deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 4: ships 15(4), 17(5), 11(2) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin2.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 55%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 43%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 76%; top: 49%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">25</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 64mm; top: 2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-68deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 58mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 160mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: -10mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 63mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 82mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 149mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 22mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 121mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 103mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 62mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 103mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 5: ships 7(2), 9(4), 7(2) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin5.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 37%; top: 38%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">13</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 41%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">11</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 23%; top: 47%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 45mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 64mm; top: 62mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 27mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(37deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: -1mm; top: 32mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 82mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 108mm; top: 65mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 7mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(75deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 71mm; top: 104mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 145mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 3mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 80mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 6: ships 18(4), 18(5), 14(3) — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin7.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 79mm; top: 24mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(65deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 65mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 148mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(73deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 99mm; top: 135mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-42deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 47mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 84mm; top: 48mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(40deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 114mm; top: 21mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(53deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 7mm; top: 80mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 65mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 84mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 60mm; top: 108mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 81mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 80mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 7: ships 10(2), 16(3), 22(6) — R-L-R -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin4.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 29%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">25</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 45%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">21</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 23%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">32</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 37mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 78mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(2.30);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 112mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(50deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 65mm; top: 34mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(2.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">11</span></div></div></div>
|
||||
<div class="absolute" style="left: 99mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 72mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-55deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 78mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(2.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 132mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: -10mm; top: 140mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 38mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(3.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">13</span></div></div></div>
|
||||
<div class="absolute" style="left: 88mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-118deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 8: ships 26(0), 18(0), 30(0) — UNSOLVABLE — L-R-L -->
|
||||
<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 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin1.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 35%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">26</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 29%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">28</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 74%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">30</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 70mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 172mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-38deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 36mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-43deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 108mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 41mm; top: 50mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: 78mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 97mm; top: 41mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-30deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: -5mm; top: 83mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 56mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-35deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 102mm; top: 100mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 147mm; top: 142mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
|
||||
<div class="absolute" style="left: 59mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 95mm; top: 146mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-7deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGE 9: ships 8(2), 18(3), 28(8) — R-L-R -->
|
||||
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
|
||||
<div class="absolute bottom-0 left-0 right-0 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../assets/footers/cabin8.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<img src="../../assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" alt="">
|
||||
<div class="w-[34%] shrink-0 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-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 27%; top: 33%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">26</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">34</span></div></div></div>
|
||||
|
||||
<div class="absolute" style="left: 45mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 95mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 125mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: -10mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 72mm; top: 35mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
|
||||
<div class="absolute" style="left: 27mm; top: 38mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 67mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 57mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">9</span></div></div></div>
|
||||
<div class="absolute" style="left: 91mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 175mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
|
||||
<div class="absolute" style="left: -5mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 67mm; top: 139mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 108mm; top: 95mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 15mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(2.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
|
||||
<div class="absolute" style="left: 99mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,489 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Asteroid Position Editor</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #1e1e2e; color: #cdd6f4; font-family: 'Segoe UI', system-ui, sans-serif; }
|
||||
|
||||
#toolbar {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
||||
background: #181825; border-bottom: 1px solid #313244;
|
||||
display: flex; align-items: center; gap: 12px; padding: 8px 16px; height: 48px;
|
||||
}
|
||||
#toolbar button {
|
||||
background: #313244; color: #cdd6f4; border: 1px solid #45475a;
|
||||
padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
#toolbar button:hover { background: #45475a; }
|
||||
#toolbar button.primary { background: #6366f1; border-color: #818cf8; color: white; }
|
||||
#toolbar button.primary:hover { background: #818cf8; }
|
||||
#toolbar .page-nav { display: flex; align-items: center; gap: 6px; }
|
||||
#toolbar .page-nav span { font-size: 14px; min-width: 90px; text-align: center; }
|
||||
#toolbar .spacer { flex: 1; }
|
||||
#toolbar .title { font-weight: 600; font-size: 14px; color: #a6adc8; }
|
||||
|
||||
#statusbar {
|
||||
position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
|
||||
background: #181825; border-top: 1px solid #313244;
|
||||
padding: 6px 16px; font-size: 13px; height: 32px;
|
||||
display: flex; align-items: center; gap: 20px;
|
||||
}
|
||||
#statusbar .pos { color: #89b4fa; }
|
||||
#statusbar .info { color: #a6adc8; }
|
||||
|
||||
#worksheet-container {
|
||||
padding: 48px 0 32px;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.editor-draggable { cursor: grab; user-select: none; }
|
||||
.editor-draggable:hover { outline: 2px solid rgba(99, 102, 241, 0.5); outline-offset: 2px; border-radius: 50%; }
|
||||
.editor-selected { outline: 3px solid #6366f1 !important; outline-offset: 2px; border-radius: 50%; }
|
||||
.editor-changed::after {
|
||||
content: ''; position: absolute; top: 2px; right: 2px;
|
||||
width: 8px; height: 8px; background: #f59e0b; border-radius: 50%;
|
||||
border: 1px solid #1e1e2e;
|
||||
}
|
||||
body.dragging { cursor: grabbing !important; }
|
||||
body.dragging * { cursor: grabbing !important; }
|
||||
|
||||
.ship-draggable { z-index: 50; }
|
||||
.ship-draggable:hover { outline-color: rgba(251, 146, 60, 0.6); }
|
||||
.ship-selected { outline-color: #fb923c !important; }
|
||||
|
||||
#coord-tooltip {
|
||||
position: fixed; z-index: 2000; pointer-events: none;
|
||||
background: #181825; color: #89b4fa; border: 1px solid #6366f1;
|
||||
padding: 3px 8px; border-radius: 4px; font-size: 12px; font-family: monospace;
|
||||
display: none;
|
||||
}
|
||||
#toast {
|
||||
position: fixed; top: 60px; right: 16px; z-index: 2000;
|
||||
background: #6366f1; color: white; padding: 8px 16px; border-radius: 6px;
|
||||
font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none;
|
||||
}
|
||||
#toast.show { opacity: 1; }
|
||||
.page-label {
|
||||
position: absolute; top: 4px; right: 4px; z-index: 100;
|
||||
background: rgba(0,0,0,0.6); color: white; padding: 2px 8px;
|
||||
border-radius: 4px; font-size: 12px; pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="toolbar">
|
||||
<span class="title">Asteroid Editor</span>
|
||||
<div class="page-nav">
|
||||
<button id="btn-prev" title="Previous page">←</button>
|
||||
<span id="page-indicator">Page 1 / ?</span>
|
||||
<button id="btn-next" title="Next page">→</button>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<button id="btn-reset">Reset Page</button>
|
||||
<button id="btn-copy-changes">Copy Changes</button>
|
||||
<button id="btn-copy" class="primary">Copy All JSON</button>
|
||||
<button id="btn-save" class="primary" style="background:#22c55e;border-color:#4ade80;">Save</button>
|
||||
</div>
|
||||
|
||||
<div id="worksheet-container"></div>
|
||||
|
||||
<div id="statusbar">
|
||||
<span id="status-info" class="info">Click an asteroid or ship circle to select it</span>
|
||||
<span id="status-pos" class="pos"></span>
|
||||
</div>
|
||||
|
||||
<div id="coord-tooltip"></div>
|
||||
<div id="toast"></div>
|
||||
|
||||
<script src="/src/editor/editor-core.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// === Asteroid-specific state ===
|
||||
const baseScales = {};
|
||||
let asteroids = [];
|
||||
let ships = [];
|
||||
let originalPositions = new Map();
|
||||
let selectedElement = null;
|
||||
let dragging = null;
|
||||
let dragStart = null;
|
||||
|
||||
// Scale formula
|
||||
function getBaseKey(p, t) { return 'p' + p + '-' + t; }
|
||||
function getBaseScale(p, t) { return baseScales[getBaseKey(p, t)] || 0.30; }
|
||||
function setBaseScale(p, t, v) { baseScales[getBaseKey(p, t)] = Math.round(v * 100) / 100; }
|
||||
function valueToScale(val, p, t) { return ((p && t) ? getBaseScale(p, t) : 0.30) + 0.15 * val; }
|
||||
|
||||
// === Init via EditorCore ===
|
||||
const core = EditorCore.init({
|
||||
taskType: 'collecting-asteroids',
|
||||
serialize: buildConfig,
|
||||
onReset: resetCurrentPage,
|
||||
onReady: function(pages, mmToPx) {
|
||||
setupAsteroids(pages);
|
||||
setupShips(pages);
|
||||
setupGlobalEvents(mmToPx);
|
||||
window.getConfig = () => buildConfig(false);
|
||||
window.getChanges = () => buildConfig(true);
|
||||
}
|
||||
});
|
||||
|
||||
if (!core) return;
|
||||
|
||||
// === Setup asteroids ===
|
||||
function setupAsteroids(pages) {
|
||||
document.querySelectorAll('.absolute:has(img[src*="pack3-asteroids"])').forEach((el, globalIndex) => {
|
||||
const page = el.closest('[data-page]');
|
||||
const pageNum = page ? parseInt(page.dataset.page) : 0;
|
||||
const left = parseFloat(el.style.left) || 0;
|
||||
const top = parseFloat(el.style.top) || 0;
|
||||
const img = el.querySelector('img[src*="pack3-asteroids"]');
|
||||
const span = el.querySelector('span');
|
||||
const astMatch = img ? img.src.match(/asteroid\d+/) : null;
|
||||
|
||||
let rotate = 0, scale = 1;
|
||||
if (img && img.style.transform) {
|
||||
const rotMatch = img.style.transform.match(/rotate\(([-\d.]+)deg\)/);
|
||||
const scMatch = img.style.transform.match(/scale\(([\d.]+)\)/);
|
||||
if (rotMatch) rotate = parseFloat(rotMatch[1]);
|
||||
if (scMatch) scale = parseFloat(scMatch[1]);
|
||||
}
|
||||
|
||||
const value = span ? parseInt(span.textContent.trim()) || 0 : 0;
|
||||
const id = `p${pageNum}-a${globalIndex}`;
|
||||
el.dataset.editorId = id;
|
||||
el.dataset.editorType = 'asteroid';
|
||||
el.dataset.pageNum = pageNum;
|
||||
|
||||
originalPositions.set(id, { left, top, rotate, scale, value });
|
||||
el.classList.add('editor-draggable');
|
||||
el.querySelectorAll('img').forEach(i => { i.style.pointerEvents = 'none'; i.draggable = false; });
|
||||
|
||||
asteroids.push({ el, id, pageNum, globalIndex, span, value, asteroid: astMatch ? astMatch[0] : 'unknown' });
|
||||
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
selectElement(el, id, 'asteroid');
|
||||
startDragAsteroid(el, e);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// === Setup ships ===
|
||||
function setupShips(pages) {
|
||||
document.querySelectorAll('.rounded-full.bg-indigo-600').forEach((circleEl, globalIndex) => {
|
||||
const page = circleEl.closest('[data-page]');
|
||||
const pageNum = page ? parseInt(page.dataset.page) : 0;
|
||||
const span = circleEl.querySelector('span');
|
||||
const value = span ? parseInt(span.textContent.trim()) || 0 : 0;
|
||||
const origLeft = circleEl.style.left || '50%';
|
||||
const origTop = circleEl.style.top || '50%';
|
||||
|
||||
const id = `p${pageNum}-s${globalIndex}`;
|
||||
circleEl.dataset.editorId = id;
|
||||
circleEl.dataset.editorType = 'ship';
|
||||
circleEl.dataset.pageNum = pageNum;
|
||||
|
||||
originalPositions.set(id, { left: origLeft, top: origTop, value });
|
||||
circleEl.classList.add('editor-draggable', 'ship-draggable');
|
||||
circleEl.style.cursor = 'grab';
|
||||
|
||||
ships.push({ el: circleEl, id, pageNum, globalIndex, span, value });
|
||||
|
||||
circleEl.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
selectElement(circleEl, id, 'ship');
|
||||
startDragShip(circleEl, e);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// === Global events ===
|
||||
function setupGlobalEvents(mmToPx) {
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
|
||||
document.getElementById('worksheet-container').addEventListener('mousedown', (e) => {
|
||||
if (!e.target.closest('.editor-draggable')) deselectAll();
|
||||
});
|
||||
}
|
||||
|
||||
// === Selection ===
|
||||
function selectElement(el, id, type) {
|
||||
deselectAll();
|
||||
el.classList.add(type === 'ship' ? 'ship-selected' : 'editor-selected');
|
||||
selectedElement = { el, id, type };
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
function deselectAll() {
|
||||
document.querySelectorAll('.editor-selected, .ship-selected').forEach(el => {
|
||||
el.classList.remove('editor-selected', 'ship-selected');
|
||||
});
|
||||
selectedElement = null;
|
||||
document.getElementById('status-info').textContent = 'Click an asteroid or ship circle to select it';
|
||||
document.getElementById('status-pos').textContent = '';
|
||||
}
|
||||
|
||||
// === Asteroid helpers ===
|
||||
function getAsteroidTransform(el) {
|
||||
const img = el.querySelector('img[src*="pack3-asteroids"]');
|
||||
let rotate = 0, scale = 1;
|
||||
if (img && img.style.transform) {
|
||||
const rotMatch = img.style.transform.match(/rotate\(([-\d.]+)deg\)/);
|
||||
const scMatch = img.style.transform.match(/scale\(([\d.]+)\)/);
|
||||
if (rotMatch) rotate = parseFloat(rotMatch[1]);
|
||||
if (scMatch) scale = parseFloat(scMatch[1]);
|
||||
}
|
||||
return { rotate, scale, img };
|
||||
}
|
||||
|
||||
function setAsteroidTransform(el, rotate, scale) {
|
||||
const img = el.querySelector('img[src*="pack3-asteroids"]');
|
||||
if (img) img.style.transform = `rotate(${rotate}deg) scale(${scale.toFixed(2)})`;
|
||||
}
|
||||
|
||||
// === Status ===
|
||||
function updateStatus() {
|
||||
if (!selectedElement) return;
|
||||
const { el, id, type } = selectedElement;
|
||||
|
||||
if (type === 'asteroid') {
|
||||
const left = Math.round(parseFloat(el.style.left));
|
||||
const top = Math.round(parseFloat(el.style.top));
|
||||
const { rotate, scale } = getAsteroidTransform(el);
|
||||
const ast = asteroids.find(a => a.id === id);
|
||||
const base = ast ? getBaseScale(parseInt(el.dataset.pageNum), ast.asteroid) : 0.30;
|
||||
document.getElementById('status-info').textContent =
|
||||
`Page ${el.dataset.pageNum} | val=${ast ? ast.value : '?'} | ${ast ? ast.asteroid : ''} | base=${base.toFixed(2)} | [/] rot, +/- val, </.> base`;
|
||||
document.getElementById('status-pos').textContent =
|
||||
`left: ${left}mm, top: ${top}mm | rot: ${Math.round(rotate)}° | scale: ${scale.toFixed(2)}`;
|
||||
} else {
|
||||
const ship = ships.find(s => s.id === id);
|
||||
document.getElementById('status-info').textContent =
|
||||
`Page ${el.dataset.pageNum} | Ship capacity=${ship ? ship.value : '?'} | +/- change value`;
|
||||
document.getElementById('status-pos').textContent =
|
||||
`left: ${el.style.left}, top: ${el.style.top}`;
|
||||
}
|
||||
}
|
||||
|
||||
// === Dragging ===
|
||||
function startDragAsteroid(el, e) {
|
||||
dragging = { el, type: 'asteroid' };
|
||||
dragStart = { mouseX: e.clientX, mouseY: e.clientY, left: parseFloat(el.style.left) || 0, top: parseFloat(el.style.top) || 0 };
|
||||
document.body.classList.add('dragging');
|
||||
}
|
||||
|
||||
function startDragShip(el, e) {
|
||||
const parent = el.offsetParent || el.parentElement;
|
||||
dragging = { el, type: 'ship', parentRect: parent.getBoundingClientRect() };
|
||||
dragStart = { mouseX: e.clientX, mouseY: e.clientY, leftPct: parseFloat(el.style.left) || 50, topPct: parseFloat(el.style.top) || 50 };
|
||||
document.body.classList.add('dragging');
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (!dragging) return;
|
||||
e.preventDefault();
|
||||
|
||||
if (dragging.type === 'asteroid') {
|
||||
const dx = (e.clientX - dragStart.mouseX) / core.mmToPx;
|
||||
const dy = (e.clientY - dragStart.mouseY) / core.mmToPx;
|
||||
let newLeft = Math.max(-10, Math.min(175, Math.round(dragStart.left + dx)));
|
||||
let newTop = Math.max(-5, Math.min(160, Math.round(dragStart.top + dy)));
|
||||
dragging.el.style.left = newLeft + 'mm';
|
||||
dragging.el.style.top = newTop + 'mm';
|
||||
core.showTooltip(e, `${newLeft}mm, ${newTop}mm`);
|
||||
} else if (dragging.type === 'ship') {
|
||||
const pW = dragging.parentRect.width;
|
||||
const pH = dragging.parentRect.height;
|
||||
if (pW === 0 || pH === 0) return;
|
||||
let newLeftPct = Math.round(dragStart.leftPct + ((e.clientX - dragStart.mouseX) / pW) * 100);
|
||||
let newTopPct = Math.round(dragStart.topPct + ((e.clientY - dragStart.mouseY) / pH) * 100);
|
||||
dragging.el.style.left = newLeftPct + '%';
|
||||
dragging.el.style.top = newTopPct + '%';
|
||||
core.showTooltip(e, `${newLeftPct}%, ${newTopPct}%`);
|
||||
}
|
||||
|
||||
updateStatus();
|
||||
markChanged(dragging.el);
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
if (!dragging) return;
|
||||
document.body.classList.remove('dragging');
|
||||
core.hideTooltip();
|
||||
dragging = null; dragStart = null;
|
||||
}
|
||||
|
||||
// === Keyboard ===
|
||||
function onKeyDown(e) {
|
||||
if (!selectedElement) return;
|
||||
const { el, id, type } = selectedElement;
|
||||
if (type === 'asteroid') onKeyDownAsteroid(e, el, id);
|
||||
else onKeyDownShip(e, el, id);
|
||||
}
|
||||
|
||||
function onKeyDownAsteroid(e, el, id) {
|
||||
const step = e.shiftKey ? 5 : 1;
|
||||
let left = parseFloat(el.style.left) || 0;
|
||||
let top = parseFloat(el.style.top) || 0;
|
||||
const { rotate, scale } = getAsteroidTransform(el);
|
||||
const rotStep = e.shiftKey ? 1 : 5;
|
||||
const ast = asteroids.find(a => a.id === id);
|
||||
const pageNum = parseInt(el.dataset.pageNum);
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowLeft': left -= step; break;
|
||||
case 'ArrowRight': left += step; break;
|
||||
case 'ArrowUp': top -= step; break;
|
||||
case 'ArrowDown': top += step; break;
|
||||
case '[': setAsteroidTransform(el, rotate - rotStep, scale); break;
|
||||
case ']': setAsteroidTransform(el, rotate + rotStep, scale); break;
|
||||
case '-': case '_':
|
||||
if (ast && ast.value > 1) { ast.value--; ast.span.textContent = ast.value; setAsteroidTransform(el, rotate, valueToScale(ast.value, pageNum, ast.asteroid)); }
|
||||
break;
|
||||
case '=': case '+':
|
||||
if (ast && ast.value < 20) { ast.value++; ast.span.textContent = ast.value; setAsteroidTransform(el, rotate, valueToScale(ast.value, pageNum, ast.asteroid)); }
|
||||
break;
|
||||
case ',': case '<':
|
||||
if (ast) { const bs = e.shiftKey ? 0.01 : 0.05; setBaseScale(pageNum, ast.asteroid, Math.max(0.05, getBaseScale(pageNum, ast.asteroid) - bs)); applyBaseToType(pageNum, ast.asteroid); core.showToast(`Base ${ast.asteroid}: ${getBaseScale(pageNum, ast.asteroid).toFixed(2)}`); }
|
||||
break;
|
||||
case '.': case '>':
|
||||
if (ast) { const bs = e.shiftKey ? 0.01 : 0.05; setBaseScale(pageNum, ast.asteroid, getBaseScale(pageNum, ast.asteroid) + bs); applyBaseToType(pageNum, ast.asteroid); core.showToast(`Base ${ast.asteroid}: ${getBaseScale(pageNum, ast.asteroid).toFixed(2)}`); }
|
||||
break;
|
||||
case 'Escape': deselectAll(); return;
|
||||
default: return;
|
||||
}
|
||||
e.preventDefault();
|
||||
el.style.left = Math.max(-10, Math.min(175, Math.round(left))) + 'mm';
|
||||
el.style.top = Math.max(-5, Math.min(160, Math.round(top))) + 'mm';
|
||||
updateStatus(); markChanged(el);
|
||||
}
|
||||
|
||||
function onKeyDownShip(e, el, id) {
|
||||
const ship = ships.find(s => s.id === id);
|
||||
if (!ship) return;
|
||||
const step = e.shiftKey ? 5 : 1;
|
||||
|
||||
switch (e.key) {
|
||||
case '-': case '_': ship.value = Math.max(1, ship.value - step); ship.span.textContent = ship.value; break;
|
||||
case '=': case '+': ship.value += step; ship.span.textContent = ship.value; break;
|
||||
case 'ArrowLeft': el.style.left = ((parseFloat(el.style.left) || 50) - step) + '%'; break;
|
||||
case 'ArrowRight': el.style.left = ((parseFloat(el.style.left) || 50) + step) + '%'; break;
|
||||
case 'ArrowUp': el.style.top = ((parseFloat(el.style.top) || 50) - step) + '%'; break;
|
||||
case 'ArrowDown': el.style.top = ((parseFloat(el.style.top) || 50) + step) + '%'; break;
|
||||
case 'Escape': deselectAll(); return;
|
||||
default: return;
|
||||
}
|
||||
e.preventDefault(); updateStatus(); markChanged(el);
|
||||
}
|
||||
|
||||
// === Change tracking ===
|
||||
function markChanged(el) {
|
||||
const id = el.dataset.editorId;
|
||||
const type = el.dataset.editorType;
|
||||
const orig = originalPositions.get(id);
|
||||
if (!orig) return;
|
||||
|
||||
let changed = false;
|
||||
if (type === 'asteroid') {
|
||||
const { rotate, scale } = getAsteroidTransform(el);
|
||||
const ast = asteroids.find(a => a.id === id);
|
||||
changed = Math.round(orig.left) !== Math.round(parseFloat(el.style.left)) ||
|
||||
Math.round(orig.top) !== Math.round(parseFloat(el.style.top)) ||
|
||||
Math.round(orig.rotate) !== Math.round(rotate) ||
|
||||
Math.abs(orig.scale - scale) > 0.005 ||
|
||||
(ast && orig.value !== ast.value);
|
||||
} else {
|
||||
const ship = ships.find(s => s.id === id);
|
||||
changed = el.style.left !== orig.left || el.style.top !== orig.top || (ship && orig.value !== ship.value);
|
||||
}
|
||||
el.classList.toggle('editor-changed', changed);
|
||||
}
|
||||
|
||||
function applyBaseToType(pageNum, asteroidType) {
|
||||
asteroids.filter(a => a.pageNum === pageNum && a.asteroid === asteroidType).forEach(ast => {
|
||||
const { rotate } = getAsteroidTransform(ast.el);
|
||||
setAsteroidTransform(ast.el, rotate, valueToScale(ast.value, pageNum, asteroidType));
|
||||
markChanged(ast.el);
|
||||
});
|
||||
}
|
||||
|
||||
// === Serialization ===
|
||||
function buildConfig(changesOnly) {
|
||||
const result = { file: core.docId, pages: [] };
|
||||
|
||||
core.pages.forEach((pageEl, pageIndex) => {
|
||||
const pageNum = pageIndex + 1;
|
||||
const pageData = { page: pageNum };
|
||||
|
||||
const pageAsteroids = asteroids.filter(a => a.pageNum === pageNum);
|
||||
const asteroidItems = [];
|
||||
pageAsteroids.forEach((ast, localIndex) => {
|
||||
const curLeft = Math.round(parseFloat(ast.el.style.left));
|
||||
const curTop = Math.round(parseFloat(ast.el.style.top));
|
||||
const { rotate, scale } = getAsteroidTransform(ast.el);
|
||||
const orig = originalPositions.get(ast.id);
|
||||
if (changesOnly && orig &&
|
||||
Math.round(orig.left) === curLeft && Math.round(orig.top) === curTop &&
|
||||
Math.round(orig.rotate) === Math.round(rotate) && Math.abs(orig.scale - scale) < 0.005 &&
|
||||
orig.value === ast.value) return;
|
||||
asteroidItems.push({ index: localIndex, left: curLeft + 'mm', top: curTop + 'mm', rotate: Math.round(rotate) + 'deg', scale: parseFloat(scale.toFixed(2)), value: ast.value, asteroid: ast.asteroid });
|
||||
});
|
||||
|
||||
const pageShips = ships.filter(s => s.pageNum === pageNum);
|
||||
const shipItems = [];
|
||||
pageShips.forEach((ship, localIndex) => {
|
||||
const orig = originalPositions.get(ship.id);
|
||||
if (changesOnly && orig && ship.el.style.left === orig.left && ship.el.style.top === orig.top && orig.value === ship.value) return;
|
||||
shipItems.push({ index: localIndex, left: ship.el.style.left, top: ship.el.style.top, value: ship.value });
|
||||
});
|
||||
|
||||
const pageBaseScales = {};
|
||||
for (const [key, val] of Object.entries(baseScales)) {
|
||||
if (key.startsWith('p' + pageNum + '-') && val !== 0.30) {
|
||||
pageBaseScales[key.replace('p' + pageNum + '-', '')] = val;
|
||||
}
|
||||
}
|
||||
|
||||
if (asteroidItems.length > 0 || shipItems.length > 0 || Object.keys(pageBaseScales).length > 0) {
|
||||
if (asteroidItems.length > 0) pageData.asteroids = asteroidItems;
|
||||
if (shipItems.length > 0) pageData.ships = shipItems;
|
||||
if (Object.keys(pageBaseScales).length > 0) pageData.baseScales = pageBaseScales;
|
||||
result.pages.push(pageData);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// === Reset ===
|
||||
function resetCurrentPage(pageNum) {
|
||||
asteroids.filter(a => a.pageNum === pageNum).forEach(ast => {
|
||||
const orig = originalPositions.get(ast.id);
|
||||
if (!orig) return;
|
||||
ast.el.style.left = orig.left + 'mm'; ast.el.style.top = orig.top + 'mm';
|
||||
setAsteroidTransform(ast.el, orig.rotate, orig.scale);
|
||||
ast.value = orig.value; ast.span.textContent = orig.value;
|
||||
ast.el.classList.remove('editor-changed');
|
||||
});
|
||||
ships.filter(s => s.pageNum === pageNum).forEach(ship => {
|
||||
const orig = originalPositions.get(ship.id);
|
||||
if (!orig) return;
|
||||
ship.el.style.left = orig.left; ship.el.style.top = orig.top;
|
||||
ship.value = orig.value; ship.span.textContent = orig.value;
|
||||
ship.el.classList.remove('editor-changed');
|
||||
});
|
||||
core.showToast(`Page ${pageNum} reset`);
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Generate output HTML from template + data for collecting-asteroids documents.
|
||||
*
|
||||
* Usage: node generate.mjs <docId>
|
||||
* Example: node generate.mjs collecting-asteroids-3
|
||||
*
|
||||
* Reads: docs/<docId>.template.html
|
||||
* Reads: docs/<docId>.data.json (optional)
|
||||
* Writes: docs/<docId>.output.html
|
||||
*
|
||||
* data.json format:
|
||||
* {
|
||||
* pages: [{
|
||||
* page: 1,
|
||||
* asteroids: [{ index, left, top, rotate, scale, value, asteroid }],
|
||||
* ships: [{ index, left, top, value }],
|
||||
* baseScales: { "asteroid5": 0.35 }
|
||||
* }]
|
||||
* }
|
||||
*/
|
||||
|
||||
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 (existsSync(dataPath)) {
|
||||
const data = JSON.parse(readFileSync(dataPath, 'utf-8'));
|
||||
html = applyData(html, data);
|
||||
console.log(`Applied data from ${data.pages?.length || 0} pages`);
|
||||
}
|
||||
|
||||
writeFileSync(outputPath, html);
|
||||
console.log(`Generated: ${outputPath}`);
|
||||
|
||||
function applyData(html, data) {
|
||||
if (!data.pages) return html;
|
||||
|
||||
// Split HTML into pages by PAGE comment markers or by w-[210mm] divs
|
||||
const pageMarker = /<!-- PAGE (\d+)/g;
|
||||
const hasPageComments = pageMarker.test(html);
|
||||
|
||||
if (hasPageComments) {
|
||||
// Split by page comments
|
||||
return applyByPageComments(html, data.pages);
|
||||
} else {
|
||||
// Split by page divs
|
||||
return applyByPageDivs(html, data.pages);
|
||||
}
|
||||
}
|
||||
|
||||
function applyByPageDivs(html, pages) {
|
||||
// Find page boundaries: <div class="w-[210mm] h-[297mm]"
|
||||
const pageRegex = /<div class="w-\[210mm\] h-\[297mm\]"/g;
|
||||
const starts = [];
|
||||
let match;
|
||||
while ((match = pageRegex.exec(html)) !== null) {
|
||||
starts.push(match.index);
|
||||
}
|
||||
|
||||
if (starts.length === 0) return html;
|
||||
|
||||
// Process pages in reverse order to preserve indices
|
||||
for (let i = pages.length - 1; i >= 0; i--) {
|
||||
const pageData = pages[i];
|
||||
const pageNum = pageData.page || (i + 1);
|
||||
const pageIdx = pageNum - 1;
|
||||
|
||||
if (pageIdx >= starts.length) continue;
|
||||
|
||||
const pageStart = starts[pageIdx];
|
||||
const pageEnd = pageIdx + 1 < starts.length ? starts[pageIdx + 1] : html.length;
|
||||
let pageHtml = html.slice(pageStart, pageEnd);
|
||||
|
||||
// Apply asteroid positions
|
||||
if (pageData.asteroids) {
|
||||
pageHtml = applyAsteroids(pageHtml, pageData.asteroids);
|
||||
}
|
||||
|
||||
// Apply ship positions
|
||||
if (pageData.ships) {
|
||||
pageHtml = applyShips(pageHtml, pageData.ships);
|
||||
}
|
||||
|
||||
html = html.slice(0, pageStart) + pageHtml + html.slice(pageEnd);
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function applyByPageComments(html, pages) {
|
||||
// Same logic but split by <!-- PAGE N -->
|
||||
const parts = html.split(/(<!-- PAGE \d+)/);
|
||||
const pageChunks = [];
|
||||
let prelude = parts[0];
|
||||
|
||||
for (let i = 1; i < parts.length; i += 2) {
|
||||
pageChunks.push(parts[i] + (parts[i + 1] || ''));
|
||||
}
|
||||
|
||||
for (const pageData of pages) {
|
||||
const pageIdx = (pageData.page || 1) - 1;
|
||||
if (pageIdx >= pageChunks.length) continue;
|
||||
|
||||
if (pageData.asteroids) {
|
||||
pageChunks[pageIdx] = applyAsteroids(pageChunks[pageIdx], pageData.asteroids);
|
||||
}
|
||||
if (pageData.ships) {
|
||||
pageChunks[pageIdx] = applyShips(pageChunks[pageIdx], pageData.ships);
|
||||
}
|
||||
}
|
||||
|
||||
return prelude + pageChunks.join('');
|
||||
}
|
||||
|
||||
function applyAsteroids(pageHtml, asteroids) {
|
||||
// Match asteroid containers: <div class="absolute" style="left: Xmm; top: Ymm;">
|
||||
// followed by pack3-asteroids image
|
||||
const asteroidRegex = /(<div class="absolute" style="left: )-?\d+mm; top: -?\d+mm(;"><div class="relative w-\[88px\] h-\[88px\]"><img src="[^"]*pack3-asteroids\/[^"]*" class="w-full h-full object-contain" style="transform: rotate\()-?\d+deg(\) scale\()[\d.]+(\);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow[^"]*">)\d+(<\/span>)/g;
|
||||
|
||||
let idx = 0;
|
||||
return pageHtml.replace(asteroidRegex, (match, prefix, rotPrefix, scalePrefix, scaleSuffix, valueSuffix) => {
|
||||
const ast = asteroids[idx++];
|
||||
if (!ast) return match;
|
||||
|
||||
const left = ast.left.replace('mm', '');
|
||||
const top = ast.top.replace('mm', '');
|
||||
const rotate = ast.rotate.replace('deg', '');
|
||||
const scale = ast.scale.toFixed(2);
|
||||
const value = ast.value;
|
||||
|
||||
return `${prefix}${left}mm; top: ${top}mm${rotPrefix}${rotate}deg${scalePrefix}${scale}${scaleSuffix}${value}${valueSuffix}`;
|
||||
});
|
||||
}
|
||||
|
||||
function applyShips(pageHtml, ships) {
|
||||
// Match ship capacity circles
|
||||
const shipRegex = /(<div class="absolute w-12 h-12 rounded-full bg-indigo-600[^"]*" style="left: )[\d.]+%(; top: )[\d.]+(%[^>]*><span class="text-white font-extrabold text-xl">)\d+(<\/span>)/g;
|
||||
|
||||
let idx = 0;
|
||||
return pageHtml.replace(shipRegex, (match, prefix, topPrefix, valueSuffix, spanClose) => {
|
||||
const ship = ships[idx++];
|
||||
if (!ship) return match;
|
||||
|
||||
const left = ship.left.replace('%', '');
|
||||
const top = ship.top.replace('%', '');
|
||||
|
||||
return `${prefix}${left}%${topPrefix}${top}${valueSuffix}${ship.value}${spanClose}`;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Transform collecting-asteroids-2.html into collecting-asteroids-3.html
|
||||
* Output goes to stdout for review before saving.
|
||||
*/
|
||||
|
||||
import { readFileSync } from 'fs';
|
||||
import { resolve } from 'path';
|
||||
|
||||
const root = resolve(import.meta.dirname, '../..');
|
||||
const v2Html = readFileSync(resolve(root, 'output/html/collecting-asteroids-2.html'), 'utf-8');
|
||||
|
||||
// Page configs for v3
|
||||
const pages = [
|
||||
{
|
||||
comment: 'PAGE 1: ships 11(2), 9(2), 13(6) — R-L-R',
|
||||
hero: 'splitter4', footer: 'cabin3',
|
||||
cargoBays: [7, 8, 9],
|
||||
ships: [11, 9, 13],
|
||||
oldAsteroidTypes: ['asteroid7', 'asteroid14'],
|
||||
newAsteroidTypes: ['asteroid3', 'asteroid10'],
|
||||
asteroidValues: [3, 2, 1, 4, 5, 2, 3, 6, 5, 4, 1, 6],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 2: ships 12(3), 12(3), 18(4) — L-R-L',
|
||||
hero: 'splitter7', footer: 'cabin6',
|
||||
cargoBays: [1, 2, 3],
|
||||
ships: [12, 12, 18],
|
||||
oldAsteroidTypes: ['asteroid4', 'asteroid11'],
|
||||
newAsteroidTypes: ['asteroid6', 'asteroid13'],
|
||||
asteroidValues: [4, 5, 3, 6, 2, 7, 4, 3, 5, 2, 6, 4],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 3: ships 9(5), 11(3), 11(2) — R-L-R',
|
||||
hero: 'splitter1', footer: 'cabin9',
|
||||
cargoBays: [4, 5, 6],
|
||||
ships: [9, 11, 11],
|
||||
oldAsteroidTypes: ['asteroid10', 'asteroid3'],
|
||||
newAsteroidTypes: ['asteroid2', 'asteroid8'],
|
||||
asteroidValues: [2, 4, 1, 3, 5, 2, 1, 3, 4, 6, 5, 2],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 4: ships 15(4), 17(5), 11(2) — L-R-L',
|
||||
hero: 'splitter6', footer: 'cabin2',
|
||||
cargoBays: [7, 8, 9],
|
||||
ships: [15, 17, 11],
|
||||
oldAsteroidTypes: ['asteroid16', 'asteroid5'],
|
||||
newAsteroidTypes: ['asteroid12', 'asteroid15'],
|
||||
asteroidValues: [4, 3, 5, 2, 6, 1, 3, 4, 6, 2, 5, 4],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 5: ships 7(2), 9(4), 7(2) — R-L-R',
|
||||
hero: 'splitter2', footer: 'cabin5',
|
||||
cargoBays: [1, 2, 3],
|
||||
ships: [7, 9, 7],
|
||||
oldAsteroidTypes: ['asteroid2', 'asteroid13'],
|
||||
newAsteroidTypes: ['asteroid1', 'asteroid9'],
|
||||
asteroidValues: [3, 1, 4, 2, 5, 1, 6, 2, 3, 4, 5],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 6: ships 18(4), 18(5), 14(3) — L-R-L',
|
||||
hero: 'splitter8', footer: 'cabin7',
|
||||
cargoBays: [4, 5, 6],
|
||||
ships: [18, 18, 14],
|
||||
oldAsteroidTypes: ['asteroid8', 'asteroid12'],
|
||||
newAsteroidTypes: ['asteroid5', 'asteroid16'],
|
||||
asteroidValues: [3, 4, 5, 6, 2, 4, 7, 3, 2, 5, 6, 4, 3, 7],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 7: ships 10(2), 16(3), 22(6) — R-L-R',
|
||||
hero: 'splitter9', footer: 'cabin4',
|
||||
cargoBays: [7, 8, 9],
|
||||
ships: [10, 16, 22],
|
||||
oldAsteroidTypes: ['asteroid15', 'asteroid6'],
|
||||
newAsteroidTypes: ['asteroid11', 'asteroid7'],
|
||||
asteroidValues: [4, 3, 2, 6, 5, 3, 7, 4, 5, 2, 6, 4],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 8: ships 26(0), 18(0), 30(0) — UNSOLVABLE — L-R-L',
|
||||
hero: 'splitter5', footer: 'cabin1',
|
||||
cargoBays: [1, 2, 3],
|
||||
ships: [26, 18, 30],
|
||||
oldAsteroidTypes: ['asteroid9', 'asteroid1'],
|
||||
newAsteroidTypes: ['asteroid14', 'asteroid4'],
|
||||
asteroidValues: [6, 4, 5, 3, 7, 2, 4, 6, 5, 7, 3, 4, 6],
|
||||
},
|
||||
{
|
||||
comment: 'PAGE 9: ships 8(2), 18(3), 28(8) — R-L-R',
|
||||
hero: 'splitter3', footer: 'cabin8',
|
||||
cargoBays: [4, 5, 6],
|
||||
ships: [8, 18, 28],
|
||||
oldAsteroidTypes: ['asteroid11', 'asteroid4'],
|
||||
newAsteroidTypes: ['asteroid10', 'asteroid6'],
|
||||
asteroidValues: [4, 3, 2, 5, 6, 3, 4, 7, 2, 5, 4, 6, 3, 7, 5],
|
||||
},
|
||||
];
|
||||
|
||||
// Split HTML into pages
|
||||
// Pages are delimited by <!-- PAGE N comments
|
||||
const pageRegex = /<!-- PAGE \d+/g;
|
||||
const matches = [...v2Html.matchAll(pageRegex)];
|
||||
|
||||
// Extract page blocks
|
||||
const pageBlocks = [];
|
||||
for (let i = 0; i < matches.length; i++) {
|
||||
const start = matches[i].index;
|
||||
const end = i + 1 < matches.length ? matches[i + 1].index : v2Html.lastIndexOf('</body>');
|
||||
pageBlocks.push(v2Html.substring(start, end));
|
||||
}
|
||||
|
||||
// Extract header (before first page) and footer (after last page)
|
||||
const header = v2Html.substring(0, matches[0].index);
|
||||
const footer = v2Html.substring(v2Html.lastIndexOf('</body>'));
|
||||
|
||||
function transformPage(block, config, pageIdx) {
|
||||
let html = block;
|
||||
|
||||
// 1. Replace page comment
|
||||
html = html.replace(/<!-- PAGE \d+:.*?-->/, `<!-- ${config.comment} -->`);
|
||||
|
||||
// 2. Replace hero image
|
||||
html = html.replace(
|
||||
/splitters\/splitter\d+\.png/,
|
||||
`splitters/${config.hero}.png`
|
||||
);
|
||||
|
||||
// 3. Replace footer image
|
||||
html = html.replace(
|
||||
/footers\/cabin\d+\.jpeg/,
|
||||
`footers/${config.footer}.jpeg`
|
||||
);
|
||||
|
||||
// 4. Replace cargo bay images (3 per page, in order)
|
||||
let cbIdx = 0;
|
||||
html = html.replace(
|
||||
/pack4-cargobay\/cargo-bay\d+\.png/g,
|
||||
(match) => `pack4-cargobay/cargo-bay${config.cargoBays[cbIdx++]}.png`
|
||||
);
|
||||
|
||||
// 5. Replace ship capacity numbers (text-xl spans inside blue circles)
|
||||
let shipIdx = 0;
|
||||
html = html.replace(
|
||||
/(<span class="text-white font-extrabold text-xl">)(\d+)(<\/span>)/g,
|
||||
(match, pre, val, post) => `${pre}${config.ships[shipIdx++]}${post}`
|
||||
);
|
||||
|
||||
// 6. Replace asteroid type images
|
||||
for (let i = 0; i < config.oldAsteroidTypes.length; i++) {
|
||||
const oldType = config.oldAsteroidTypes[i];
|
||||
const newType = config.newAsteroidTypes[i];
|
||||
html = html.replaceAll(
|
||||
`pack3-asteroids/${oldType}.png`,
|
||||
`pack3-asteroids/${newType}.png`
|
||||
);
|
||||
}
|
||||
|
||||
// 7. Replace asteroid values (text-2xl spans, sequential)
|
||||
let avIdx = 0;
|
||||
html = html.replace(
|
||||
/(<span class="text-white font-extrabold text-2xl"[^>]*>)(\d+)(<\/span>)/g,
|
||||
(match, pre, val, post) => {
|
||||
if (avIdx < config.asteroidValues.length) {
|
||||
return `${pre}${config.asteroidValues[avIdx++]}${post}`;
|
||||
}
|
||||
return match;
|
||||
}
|
||||
);
|
||||
|
||||
// Sanity check
|
||||
if (shipIdx !== 3) {
|
||||
console.error(`WARNING: Page ${pageIdx + 1} — replaced ${shipIdx} ship values (expected 3)`);
|
||||
}
|
||||
if (avIdx !== config.asteroidValues.length) {
|
||||
console.error(`WARNING: Page ${pageIdx + 1} — replaced ${avIdx} asteroid values (expected ${config.asteroidValues.length})`);
|
||||
}
|
||||
if (cbIdx !== 3) {
|
||||
console.error(`WARNING: Page ${pageIdx + 1} — replaced ${cbIdx} cargo bay refs (expected 3)`);
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// Transform all pages
|
||||
const newPages = pageBlocks.map((block, i) => transformPage(block, pages[i], i));
|
||||
|
||||
// Assemble
|
||||
const result = header + newPages.join('') + footer;
|
||||
|
||||
// Write to temp file
|
||||
import { writeFileSync } from 'fs';
|
||||
const tmpPath = resolve(root, 'output/html/.collecting-asteroids-3-tmp.html');
|
||||
writeFileSync(tmpPath, result);
|
||||
console.log(`Output written to: ${tmpPath}`);
|
||||
console.log(`Total lines: ${result.split('\n').length}`);
|
||||
|
||||
// Print summary of changes per page
|
||||
for (let i = 0; i < pages.length; i++) {
|
||||
const p = pages[i];
|
||||
console.log(`\nPage ${i + 1}: hero=${p.hero} footer=${p.footer} cargoBays=[${p.cargoBays}]`);
|
||||
console.log(` Ships: [${p.ships}] Asteroids: [${p.asteroidValues}]`);
|
||||
console.log(` Types: ${p.oldAsteroidTypes} → ${p.newAsteroidTypes}`);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Asteroid partition solver.
|
||||
* Verifies that disjoint subsets of asteroid values can sum to each ship capacity.
|
||||
*
|
||||
* Usage:
|
||||
* node verify-asteroids.mjs --ships 10,10,14 --asteroids 3,2,1,4,5,2,3,6,5,4,1,6
|
||||
*
|
||||
* Output: prints whether a valid partition exists and one example solution.
|
||||
*/
|
||||
|
||||
const args = process.argv.slice(2);
|
||||
|
||||
function parseArg(flag) {
|
||||
const idx = args.indexOf(flag);
|
||||
if (idx === -1 || idx + 1 >= args.length) return null;
|
||||
return args[idx + 1].split(',').map(Number);
|
||||
}
|
||||
|
||||
const ships = parseArg('--ships');
|
||||
const asteroids = parseArg('--asteroids');
|
||||
|
||||
if (!ships || !asteroids) {
|
||||
console.log('Usage: node verify-asteroids.mjs --ships 10,10,14 --asteroids 3,2,1,4,5,2,3,6,5,4,1,6');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(`Ships: [${ships.join(', ')}] (sum=${ships.reduce((a, b) => a + b, 0)})`);
|
||||
console.log(`Asteroids: [${asteroids.join(', ')}] (count=${asteroids.length}, sum=${asteroids.reduce((a, b) => a + b, 0)})`);
|
||||
|
||||
/**
|
||||
* Find disjoint subsets of `available` (by index) that sum to each capacity in `capacities`.
|
||||
* Returns array of index arrays, or null if no solution.
|
||||
*/
|
||||
function findPartition(available, capacities, usedSet = new Set()) {
|
||||
if (capacities.length === 0) return [];
|
||||
|
||||
const target = capacities[0];
|
||||
const remaining = capacities.slice(1);
|
||||
const remainingSum = remaining.reduce((a, b) => a + b, 0);
|
||||
|
||||
// Available sum check
|
||||
let availSum = 0;
|
||||
for (let i = 0; i < available.length; i++) {
|
||||
if (!usedSet.has(i)) availSum += available[i];
|
||||
}
|
||||
if (availSum < target + remainingSum) return null;
|
||||
|
||||
// Find all subsets summing to target using DFS
|
||||
const subset = [];
|
||||
|
||||
function dfs(startIdx, currentSum) {
|
||||
if (currentSum === target) {
|
||||
// Try solving remaining capacities
|
||||
const newUsed = new Set(usedSet);
|
||||
for (const idx of subset) newUsed.add(idx);
|
||||
const result = findPartition(available, remaining, newUsed);
|
||||
if (result !== null) {
|
||||
return [subset.slice(), ...result];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
if (currentSum > target) return null;
|
||||
|
||||
for (let i = startIdx; i < available.length; i++) {
|
||||
if (usedSet.has(i)) continue;
|
||||
if (currentSum + available[i] > target) continue;
|
||||
|
||||
// Pruning: check if remaining available sum can reach target
|
||||
let futureSum = 0;
|
||||
for (let j = i; j < available.length; j++) {
|
||||
if (!usedSet.has(j) && !subset.includes(j)) futureSum += available[j];
|
||||
}
|
||||
if (currentSum + futureSum < target) return null;
|
||||
|
||||
subset.push(i);
|
||||
const result = dfs(i + 1, currentSum + available[i]);
|
||||
if (result) return result;
|
||||
subset.pop();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return dfs(0, 0);
|
||||
}
|
||||
|
||||
// Sort ships descending for better pruning (hardest to fill first)
|
||||
const sortedShips = [...ships].sort((a, b) => b - a);
|
||||
|
||||
console.log(`\nSolving for ships (sorted desc): [${sortedShips.join(', ')}]`);
|
||||
|
||||
const solution = findPartition(asteroids, sortedShips);
|
||||
|
||||
if (solution) {
|
||||
console.log('\n✓ SOLVABLE! Solution found:');
|
||||
// Map back to original ship order
|
||||
const shipOrder = ships.map((cap, idx) => ({ cap, idx }))
|
||||
.sort((a, b) => b.cap - a.cap);
|
||||
|
||||
for (let i = 0; i < sortedShips.length; i++) {
|
||||
const indices = solution[i];
|
||||
const values = indices.map(j => asteroids[j]);
|
||||
const origShipIdx = shipOrder[i].idx;
|
||||
console.log(` Ship ${origShipIdx + 1} (capacity ${sortedShips[i]}): asteroids [${values.join(' + ')}] = ${values.reduce((a, b) => a + b, 0)} (indices: ${indices.join(',')})`);
|
||||
}
|
||||
|
||||
const usedIndices = new Set(solution.flat());
|
||||
const unused = asteroids.map((v, i) => ({ v, i })).filter(x => !usedIndices.has(x.i));
|
||||
if (unused.length > 0) {
|
||||
console.log(` Unused asteroids: [${unused.map(x => `${x.v}(idx ${x.i})`).join(', ')}]`);
|
||||
}
|
||||
} else {
|
||||
console.log('\n✗ NO SOLUTION found.');
|
||||
console.log(` Ship sum: ${ships.reduce((a, b) => a + b, 0)}, Asteroid sum: ${asteroids.reduce((a, b) => a + b, 0)}`);
|
||||
if (asteroids.reduce((a, b) => a + b, 0) < ships.reduce((a, b) => a + b, 0)) {
|
||||
console.log(' Reason: asteroid sum < ship sum (mathematically impossible)');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user