refactor: new structure
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user