assets: sonic assets
This commit is contained in:
parent
e4f2a0edfa
commit
aedb85720c
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
|
|
@ -0,0 +1,106 @@
|
||||||
|
# Crystal Battery Task Type
|
||||||
|
|
||||||
|
**Theme:** sonic (`assets/themes/sonic/`) + nms placeholders (`assets/themes/nms/`)
|
||||||
|
|
||||||
|
Sonic and Shadow take turns charging a 10-cell crystal battery. One hero fills N cells, the child figures out how many the other hero needs to complete all 10. Practices **complements of 10** (making 10).
|
||||||
|
|
||||||
|
## Math Concept
|
||||||
|
|
||||||
|
Given:
|
||||||
|
- Battery capacity: always **10** cells
|
||||||
|
- Hero A fills **N** cells (1 < N < 10), shown with crystal icons
|
||||||
|
- Child writes **N** in small input near Hero A
|
||||||
|
- Child writes **10 - N** in large input near Hero B
|
||||||
|
- Answer: always 10 - N
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
|
||||||
|
- **Page:** A4 (210mm x 297mm), white background
|
||||||
|
- **Header:** 20mm — title centered, small Sonic (left) + Shadow (right) icons
|
||||||
|
- **Footer:** 25mm — NMS planet placeholder with gradient fade
|
||||||
|
- **Content:** 7 battery sections per page, distributed evenly (flex column, justify-between)
|
||||||
|
- **Section height:** ~30mm
|
||||||
|
|
||||||
|
## Section Layout
|
||||||
|
|
||||||
|
Full-width horizontal strip (~194mm wide inside 8mm page padding):
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────┬────────────────────────────────┬──────────┐
|
||||||
|
│ Hero A │ BATTERY (10 cells) │ Hero B │
|
||||||
|
│ push │ [▣][▣][▣]...[ ][ ][ ] │ push │
|
||||||
|
│ [__] │ ← N filled (10-N) empty → │ [____] │
|
||||||
|
└──────────┴────────────────────────────────┴──────────┘
|
||||||
|
28mm ~138mm 28mm
|
||||||
|
```
|
||||||
|
|
||||||
|
**Odd sections** (1,3,5,7): Sonic fills from left, Shadow answers
|
||||||
|
**Even sections** (2,4,6): Shadow fills from right, Sonic answers
|
||||||
|
|
||||||
|
## Battery Design
|
||||||
|
|
||||||
|
- 10 rectangular cells in horizontal row (flex)
|
||||||
|
- Width: 80mm, Height: 14mm
|
||||||
|
- Border: 2px solid #334155, border-radius: 3mm
|
||||||
|
- Terminal nub on right side (decorative, 3mm wide)
|
||||||
|
- **Filled cells:** green gradient (#22c55e → #16a34a) for Sonic, red gradient (#ef4444 → #dc2626) for Shadow + SVG diamond crystal icon
|
||||||
|
- **Empty cells:** #e2e8f0 background, dashed border, no icon
|
||||||
|
|
||||||
|
## Crystal Placeholders
|
||||||
|
|
||||||
|
Inline SVG diamond shapes (temporary until proper crystal PNGs are generated):
|
||||||
|
- Sonic: green (#22c55e) with darker stroke (#15803d)
|
||||||
|
- Shadow: red (#ef4444) with darker stroke (#b91c1c)
|
||||||
|
|
||||||
|
## Input Fields
|
||||||
|
|
||||||
|
- **Small input** (near filling hero): 10mm x 7mm, border: 1.5px solid #a5b4fc, rounded 1.5mm
|
||||||
|
- **Large input** (near answering hero): 14mm x 9mm, border: 2px solid #6366f1, rounded 2mm
|
||||||
|
|
||||||
|
## Hero Variants
|
||||||
|
|
||||||
|
Cycle through push variants sequentially across sections:
|
||||||
|
- Section 1: sonic-push-01 + shadow-push-01
|
||||||
|
- Section 2: sonic-push-02 + shadow-push-02
|
||||||
|
- Continue across pages (21 sections total, wraps around 10 variants)
|
||||||
|
|
||||||
|
Assets: `assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-{01-10}.png` and `shadow-push-{01-10}.png`
|
||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
| Element | Color |
|
||||||
|
|---------|-------|
|
||||||
|
| Title | `text-indigo-950` |
|
||||||
|
| Subtitle | `text-indigo-400` |
|
||||||
|
| Sonic crystals | `#22c55e` (green-500) |
|
||||||
|
| Shadow crystals | `#ef4444` (red-500) |
|
||||||
|
| Battery border | `#334155` (slate-700) |
|
||||||
|
| Empty cells | `#e2e8f0` (slate-200) |
|
||||||
|
| Small input border | `#a5b4fc` (indigo-300) |
|
||||||
|
| Large input border | `#6366f1` (indigo-500) |
|
||||||
|
|
||||||
|
## Problem Range
|
||||||
|
|
||||||
|
N: 1-9 (number of crystals the filling hero throws)
|
||||||
|
Answer: 10 - N (always 1-9)
|
||||||
|
|
||||||
|
## Difficulty Progression
|
||||||
|
|
||||||
|
**Page 1 (Easy):** N = 9, 8, 9, 7, 8, 9, 7 → complements 1-3
|
||||||
|
**Page 2 (Medium):** N = 6, 5, 4, 6, 5, 4, 6 → complements 4-6
|
||||||
|
**Page 3 (Hard):** N = 3, 2, 1, 3, 2, 1, 4 → complements 6-9
|
||||||
|
|
||||||
|
## Asset Conventions
|
||||||
|
|
||||||
|
- **Heroes:** `assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-{01-10}.png`, `shadow-push-{01-10}.png`
|
||||||
|
- **Footer images (placeholder):** `assets/themes/nms/footers/planet{1-9}.jpeg`
|
||||||
|
- **Crystals:** SVG placeholders (future: `assets/themes/sonic/items/crystals/`)
|
||||||
|
|
||||||
|
## Title & Subtitle
|
||||||
|
|
||||||
|
- **Title:** "Кристальная Батарея"
|
||||||
|
- **Subtitle:** "Соник и Шэдоу заряжают батарею! Сколько кристаллов нужно добавить?"
|
||||||
|
|
||||||
|
## Scripts
|
||||||
|
|
||||||
|
- `scripts/generate.mjs` — template + data → output pipeline (minimal, no transforms initially)
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
# Crystal Battery 1
|
||||||
|
|
||||||
|
Sonic and Shadow take turns charging a crystal battery. Each section shows one hero filling N cells out of 10. The child writes how many crystals the hero threw (N) and how many the other hero needs to add (10 - N).
|
||||||
|
|
||||||
|
## Pages
|
||||||
|
|
||||||
|
### Page 1 — Easy (complements 1-3)
|
||||||
|
|
||||||
|
| Section | Filler | N | Answer (10-N) | Sonic variant | Shadow variant |
|
||||||
|
|---------|--------|---|---------------|---------------|----------------|
|
||||||
|
| 1 | Sonic | 9 | 1 | sonic-push-01 | shadow-push-01 |
|
||||||
|
| 2 | Shadow | 8 | 2 | sonic-push-02 | shadow-push-02 |
|
||||||
|
| 3 | Sonic | 9 | 1 | sonic-push-03 | shadow-push-03 |
|
||||||
|
| 4 | Shadow | 7 | 3 | sonic-push-04 | shadow-push-04 |
|
||||||
|
| 5 | Sonic | 8 | 2 | sonic-push-05 | shadow-push-05 |
|
||||||
|
| 6 | Shadow | 9 | 1 | sonic-push-06 | shadow-push-06 |
|
||||||
|
| 7 | Sonic | 7 | 3 | sonic-push-07 | shadow-push-07 |
|
||||||
|
|
||||||
|
Footer: planet1.jpeg
|
||||||
|
|
||||||
|
### Page 2 — Medium (complements 4-6)
|
||||||
|
|
||||||
|
| Section | Filler | N | Answer (10-N) | Sonic variant | Shadow variant |
|
||||||
|
|---------|--------|---|---------------|---------------|----------------|
|
||||||
|
| 1 | Sonic | 6 | 4 | sonic-push-08 | shadow-push-08 |
|
||||||
|
| 2 | Shadow | 5 | 5 | sonic-push-09 | shadow-push-09 |
|
||||||
|
| 3 | Sonic | 4 | 6 | sonic-push-10 | shadow-push-10 |
|
||||||
|
| 4 | Shadow | 6 | 4 | sonic-push-01 | shadow-push-01 |
|
||||||
|
| 5 | Sonic | 5 | 5 | sonic-push-02 | shadow-push-02 |
|
||||||
|
| 6 | Shadow | 4 | 6 | sonic-push-03 | shadow-push-03 |
|
||||||
|
| 7 | Sonic | 6 | 4 | sonic-push-04 | shadow-push-04 |
|
||||||
|
|
||||||
|
Footer: planet2.jpeg
|
||||||
|
|
||||||
|
### Page 3 — Hard (complements 6-9)
|
||||||
|
|
||||||
|
| Section | Filler | N | Answer (10-N) | Sonic variant | Shadow variant |
|
||||||
|
|---------|--------|---|---------------|---------------|----------------|
|
||||||
|
| 1 | Sonic | 3 | 7 | sonic-push-05 | shadow-push-05 |
|
||||||
|
| 2 | Shadow | 2 | 8 | sonic-push-06 | shadow-push-06 |
|
||||||
|
| 3 | Sonic | 1 | 9 | sonic-push-07 | shadow-push-07 |
|
||||||
|
| 4 | Shadow | 3 | 7 | sonic-push-08 | shadow-push-08 |
|
||||||
|
| 5 | Sonic | 2 | 8 | sonic-push-09 | shadow-push-09 |
|
||||||
|
| 6 | Shadow | 1 | 9 | sonic-push-10 | shadow-push-10 |
|
||||||
|
| 7 | Sonic | 4 | 6 | sonic-push-01 | shadow-push-01 |
|
||||||
|
|
||||||
|
Footer: planet3.jpeg
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Sonic crystals are green, Shadow crystals are red
|
||||||
|
- Crystal assets are SVG placeholders — will be replaced with generated PNGs later
|
||||||
|
- Footer images are NMS theme placeholders
|
||||||
|
- Hero images are from `assets/themes/sonic/heroes/sonic-shadow-push/`
|
||||||
|
|
@ -0,0 +1,832 @@
|
||||||
|
<!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; }
|
||||||
|
|
||||||
|
/* Battery container */
|
||||||
|
.battery {
|
||||||
|
display: flex;
|
||||||
|
width: 80mm;
|
||||||
|
height: 13mm;
|
||||||
|
border: 2px solid #334155;
|
||||||
|
border-radius: 3mm;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #f1f5f9;
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.battery::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -3.5mm;
|
||||||
|
top: 25%;
|
||||||
|
width: 3mm;
|
||||||
|
height: 50%;
|
||||||
|
background: #64748b;
|
||||||
|
border-radius: 0 1.5mm 1.5mm 0;
|
||||||
|
border: 1.5px solid #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Battery cells */
|
||||||
|
.cell {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 1px solid #cbd5e1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.cell:last-child { border-right: none; }
|
||||||
|
|
||||||
|
.cell.filled-sonic {
|
||||||
|
background: linear-gradient(135deg, #bbf7d0, #86efac);
|
||||||
|
}
|
||||||
|
.cell.filled-shadow {
|
||||||
|
background: linear-gradient(135deg, #fecaca, #fca5a5);
|
||||||
|
}
|
||||||
|
.cell.empty {
|
||||||
|
background: rgba(241, 245, 249, 0.5);
|
||||||
|
}
|
||||||
|
.cell.empty::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 2px;
|
||||||
|
border: 1.5px dashed #cbd5e1;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Crystal SVG icon */
|
||||||
|
.crystal-icon {
|
||||||
|
width: 5mm;
|
||||||
|
height: 7mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section row */
|
||||||
|
.battery-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2mm;
|
||||||
|
height: 30mm;
|
||||||
|
padding: 0 1mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero column */
|
||||||
|
.hero-col {
|
||||||
|
width: 28mm;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1mm;
|
||||||
|
}
|
||||||
|
.hero-col img {
|
||||||
|
height: 20mm;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input fields */
|
||||||
|
.input-sm {
|
||||||
|
width: 10mm;
|
||||||
|
height: 7mm;
|
||||||
|
border: 1.5px solid #a5b4fc;
|
||||||
|
border-radius: 1.5mm;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.input-sm span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 7mm;
|
||||||
|
border-bottom: 1.5px solid #a5b4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-lg {
|
||||||
|
width: 14mm;
|
||||||
|
height: 9mm;
|
||||||
|
border: 2px solid #6366f1;
|
||||||
|
border-radius: 2mm;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 1px 3px rgba(99, 102, 241, 0.15);
|
||||||
|
}
|
||||||
|
.input-lg span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10mm;
|
||||||
|
border-bottom: 2px solid #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Battery center column */
|
||||||
|
.battery-col {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section divider */
|
||||||
|
.section-divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 3mm;
|
||||||
|
height: 18mm;
|
||||||
|
margin-bottom: 2mm;
|
||||||
|
}
|
||||||
|
.page-header img {
|
||||||
|
height: 16mm;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.page-header .title-block {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-200 font-nunito">
|
||||||
|
|
||||||
|
<!-- ==================== PAGE 1 — Easy ==================== -->
|
||||||
|
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
|
||||||
|
<div class="absolute top-0 left-0 right-0 z-10" style="height: 40%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||||
|
<img src="/assets/themes/nms/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[30mm] flex flex-col">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="page-header">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="title-block">
|
||||||
|
<h1 class="text-[1.2rem] font-extrabold text-indigo-950 leading-tight">Кристальная Батарея</h1>
|
||||||
|
<p class="text-[0.55rem] font-semibold text-indigo-400 mt-[0.5mm]">Соник и Шэдоу заряжают батарею! Сколько кристаллов нужно добавить?</p>
|
||||||
|
</div>
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-01.png" alt="Shadow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sections -->
|
||||||
|
<div class="flex flex-col flex-1 justify-between">
|
||||||
|
|
||||||
|
<!-- Section 1: Sonic fills 9 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-01.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 2: Shadow fills 8 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-02.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-02.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 3: Sonic fills 9 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-03.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-03.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 4: Shadow fills 7 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-04.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-04.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 5: Sonic fills 8 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-05.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-05.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 6: Shadow fills 9 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-06.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-06.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 7: Sonic fills 7 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-07.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-07.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== PAGE 2 — Medium ==================== -->
|
||||||
|
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
|
||||||
|
<div class="absolute top-0 left-0 right-0 z-10" style="height: 40%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||||
|
<img src="/assets/themes/nms/footers/planet2.jpeg" class="w-full h-full object-cover object-top" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[30mm] flex flex-col">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="page-header">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-08.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="title-block">
|
||||||
|
<h1 class="text-[1.2rem] font-extrabold text-indigo-950 leading-tight">Кристальная Батарея</h1>
|
||||||
|
<p class="text-[0.55rem] font-semibold text-indigo-400 mt-[0.5mm]">Соник и Шэдоу заряжают батарею! Сколько кристаллов нужно добавить?</p>
|
||||||
|
</div>
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-08.png" alt="Shadow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sections -->
|
||||||
|
<div class="flex flex-col flex-1 justify-between">
|
||||||
|
|
||||||
|
<!-- Section 1: Sonic fills 6 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-08.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-08.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 2: Shadow fills 5 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-09.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-09.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 3: Sonic fills 4 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-10.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-10.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 4: Shadow fills 6 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-01.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 5: Sonic fills 5 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-02.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-02.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 6: Shadow fills 4 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-03.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-03.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 7: Sonic fills 6 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-04.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-04.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== PAGE 3 — Hard ==================== -->
|
||||||
|
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
|
||||||
|
<div class="absolute top-0 left-0 right-0 z-10" style="height: 40%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||||
|
<img src="/assets/themes/nms/footers/planet3.jpeg" class="w-full h-full object-cover object-top" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[30mm] flex flex-col">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="page-header">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-05.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="title-block">
|
||||||
|
<h1 class="text-[1.2rem] font-extrabold text-indigo-950 leading-tight">Кристальная Батарея</h1>
|
||||||
|
<p class="text-[0.55rem] font-semibold text-indigo-400 mt-[0.5mm]">Соник и Шэдоу заряжают батарею! Сколько кристаллов нужно добавить?</p>
|
||||||
|
</div>
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-05.png" alt="Shadow">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sections -->
|
||||||
|
<div class="flex flex-col flex-1 justify-between">
|
||||||
|
|
||||||
|
<!-- Section 1: Sonic fills 3 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-05.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-05.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 2: Shadow fills 2 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-06.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-06.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 3: Sonic fills 1 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-07.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-07.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 4: Shadow fills 3 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-08.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-08.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 5: Sonic fills 2 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-09.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-09.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 6: Shadow fills 1 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-10.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell filled-shadow"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#ef4444" stroke="#b91c1c" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#dc2626" opacity="0.4"/></svg></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-10.png" alt="Shadow">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="section-divider">
|
||||||
|
|
||||||
|
<!-- Section 7: Sonic fills 4 -->
|
||||||
|
<div class="battery-section">
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Sonic" style="transform: scaleX(-1);">
|
||||||
|
<div class="input-sm"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
<div class="battery-col">
|
||||||
|
<div class="battery">
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell filled-sonic"><svg class="crystal-icon" viewBox="0 0 20 28"><polygon points="10,0 20,11 10,28 0,11" fill="#22c55e" stroke="#15803d" stroke-width="1"/><polygon points="10,0 16,11 10,24" fill="#16a34a" opacity="0.4"/></svg></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
<div class="cell empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-col">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-01.png" alt="Shadow">
|
||||||
|
<div class="input-lg"><span> </span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Crystal Battery — Space Math Adventures</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-start: #eef0ff; --bg-mid: #fef3e2; --bg-end: #e8faf3;
|
||||||
|
--text-deep: #2d1b69; --text-body: #3d2d6b;
|
||||||
|
--accent-violet: #7c3aed; --accent-orange: #f97316; --accent-teal: #0d9488; --accent-pink: #ec4899;
|
||||||
|
}
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: 'Nunito', sans-serif;
|
||||||
|
background: linear-gradient(170deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
|
||||||
|
color: var(--text-body); min-height: 100vh; overflow-x: hidden;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.page-content { flex: 1; }
|
||||||
|
.container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 24px; }
|
||||||
|
.back-link {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
color: var(--accent-violet); text-decoration: none; font-size: 0.9rem; font-weight: 700;
|
||||||
|
padding-top: 40px; transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.back-link:hover { color: var(--accent-pink); }
|
||||||
|
.page-header { display: flex; align-items: center; gap: 24px; padding: 20px 0 12px; }
|
||||||
|
.page-header img {
|
||||||
|
width: 110px; filter: drop-shadow(0 4px 12px rgba(124,58,237,0.2));
|
||||||
|
animation: headerBob 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes headerBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
|
||||||
|
.page-header h1 {
|
||||||
|
font-family: 'Fredoka', sans-serif; font-size: 2rem; font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, var(--accent-violet), var(--accent-teal));
|
||||||
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||||
|
}
|
||||||
|
.header-desc {
|
||||||
|
color: var(--text-body); font-size: 0.95rem; line-height: 1.6; font-weight: 600;
|
||||||
|
padding-bottom: 28px; border-bottom: 2px solid rgba(124,58,237,0.12); margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.docs { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
|
||||||
|
.doc-card {
|
||||||
|
display: flex;
|
||||||
|
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,248,240,0.8));
|
||||||
|
border: 2px solid transparent; border-radius: 20px;
|
||||||
|
overflow: hidden; position: relative;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
.doc-card::before {
|
||||||
|
content: ''; position: absolute; inset: -2px; border-radius: 22px;
|
||||||
|
background: linear-gradient(135deg, var(--accent-violet), var(--accent-teal));
|
||||||
|
z-index: -1; opacity: 0.25; transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(124,58,237,0.14); }
|
||||||
|
.doc-card:hover::before { opacity: 0.5; }
|
||||||
|
.doc-preview {
|
||||||
|
width: 170px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center;
|
||||||
|
padding: 12px; background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(13,148,136,0.04));
|
||||||
|
}
|
||||||
|
.doc-preview img { width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
|
||||||
|
.doc-info { padding: 20px 24px; flex: 1; }
|
||||||
|
.doc-info h3 {
|
||||||
|
font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600;
|
||||||
|
color: var(--text-deep); margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.doc-details { font-size: 0.83rem; color: var(--text-body); line-height: 1.6; margin-bottom: 14px; }
|
||||||
|
.tag {
|
||||||
|
display: inline-block; padding: 2px 10px; border-radius: 12px;
|
||||||
|
font-size: 0.75rem; font-weight: 700; margin-right: 4px; margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.tag-pages { background: rgba(124,58,237,0.1); color: var(--accent-violet); border: 1px solid rgba(124,58,237,0.2); }
|
||||||
|
.tag-diff { background: rgba(13,148,136,0.1); color: var(--accent-teal); border: 1px solid rgba(13,148,136,0.2); }
|
||||||
|
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||||
|
.doc-actions a {
|
||||||
|
font-size: 0.72rem; font-weight: 700; text-decoration: none;
|
||||||
|
padding: 4px 12px; border-radius: 8px; transition: all 0.15s;
|
||||||
|
display: inline-flex; align-items: center; gap: 4px;
|
||||||
|
}
|
||||||
|
.btn-preview {
|
||||||
|
color: var(--accent-violet); border: 2px solid rgba(124,58,237,0.25);
|
||||||
|
background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02));
|
||||||
|
}
|
||||||
|
.btn-preview:hover { background: rgba(124,58,237,0.12); border-color: var(--accent-violet); }
|
||||||
|
.btn-pdf {
|
||||||
|
color: var(--accent-teal); border: 1.5px solid rgba(13,148,136,0.3);
|
||||||
|
background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(13,148,136,0.02));
|
||||||
|
}
|
||||||
|
.btn-pdf:hover { background: rgba(13,148,136,0.15); border-color: var(--accent-teal); }
|
||||||
|
.btn-pdf svg { width: 12px; height: 12px; }
|
||||||
|
.btn-edit {
|
||||||
|
color: var(--accent-orange); border: 1.5px solid rgba(249,115,22,0.3);
|
||||||
|
background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.btn-edit:hover { background: rgba(249,115,22,0.15); border-color: var(--accent-orange); }
|
||||||
|
body.editor-mode .btn-edit { display: inline-flex; }
|
||||||
|
|
||||||
|
.site-footer { position: relative; }
|
||||||
|
.planet-footer { height: 140px; overflow: hidden; }
|
||||||
|
.planet-footer img {
|
||||||
|
width: 100%; height: 100%; object-fit: cover;
|
||||||
|
mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
|
||||||
|
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
|
||||||
|
}
|
||||||
|
.footer-bar {
|
||||||
|
position: absolute; bottom: 8px; left: 0; right: 0;
|
||||||
|
text-align: center; z-index: 2;
|
||||||
|
}
|
||||||
|
.editor-toggle {
|
||||||
|
cursor: pointer; user-select: none;
|
||||||
|
color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 600;
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.editor-toggle:hover { color: rgba(255,255,255,0.7); }
|
||||||
|
.editor-toggle input { accent-color: var(--accent-violet); }
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.doc-card { flex-direction: column; }
|
||||||
|
.doc-preview { width: 100%; max-height: 160px; }
|
||||||
|
.page-header img { width: 70px; }
|
||||||
|
.page-header h1 { font-size: 1.5rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="container">
|
||||||
|
<a class="back-link" href="/tasks/index.html">← All Categories</a>
|
||||||
|
|
||||||
|
<div class="page-header">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="">
|
||||||
|
<h1>Crystal Battery</h1>
|
||||||
|
</div>
|
||||||
|
<p class="header-desc">Sonic and Shadow take turns charging a crystal battery! Each row shows one hero filling cells with crystals. The child figures out how many crystals the other hero needs to complete all 10 cells. Practices making 10 (complements of 10).</p>
|
||||||
|
|
||||||
|
<div class="docs">
|
||||||
|
|
||||||
|
<div class="doc-card">
|
||||||
|
<div class="doc-preview"><img src="/tasks/crystal-battery/temp/crystal-battery-1-page-1.png" alt="Preview"></div>
|
||||||
|
<div class="doc-info">
|
||||||
|
<h3>Crystal Battery 1</h3>
|
||||||
|
<div class="doc-details">
|
||||||
|
<span class="tag tag-pages">3 pages</span>
|
||||||
|
<span class="tag tag-diff">Easy → Hard</span><br>
|
||||||
|
7 sections per page • Complements of 10 • Sonic & Shadow theme
|
||||||
|
</div>
|
||||||
|
<div class="doc-actions">
|
||||||
|
<a class="btn-preview" href="/tasks/crystal-battery/docs/crystal-battery-1.output.html">Preview</a>
|
||||||
|
<a class="btn-pdf" href="/output/pdf/crystal-battery-1.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
|
||||||
|
<a class="btn-edit" href="/tasks/crystal-battery/editor.html?file=crystal-battery-1">Editor</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="site-footer">
|
||||||
|
<div class="planet-footer">
|
||||||
|
<img src="/assets/themes/nms/footers/planet3.jpeg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="footer-bar">
|
||||||
|
<label class="editor-toggle">
|
||||||
|
<input type="checkbox" onchange="document.body.classList.toggle('editor-mode', this.checked)">
|
||||||
|
Unlock editor (local dev only)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate output HTML from template + data for crystal-battery documents.
|
||||||
|
*
|
||||||
|
* Usage: node generate.mjs <docId>
|
||||||
|
* Example: node generate.mjs crystal-battery-1
|
||||||
|
*
|
||||||
|
* Reads: docs/<docId>.template.html
|
||||||
|
* Reads: docs/<docId>.data.json (optional)
|
||||||
|
* Writes: docs/<docId>.output.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { readFileSync, writeFileSync, existsSync } from 'fs';
|
||||||
|
import { join, dirname } from 'path';
|
||||||
|
import { fileURLToPath } from 'url';
|
||||||
|
import { postGenerate } from '../../../src/scripts/post-generate.mjs';
|
||||||
|
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
|
const docsDir = join(__dirname, '..', 'docs');
|
||||||
|
|
||||||
|
const docId = process.argv[2];
|
||||||
|
if (!docId) {
|
||||||
|
console.error('Usage: node generate.mjs <docId>');
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const templatePath = join(docsDir, `${docId}.template.html`);
|
||||||
|
const dataPath = join(docsDir, `${docId}.data.json`);
|
||||||
|
const outputPath = join(docsDir, `${docId}.output.html`);
|
||||||
|
|
||||||
|
if (!existsSync(templatePath)) {
|
||||||
|
console.error(`Template not found: ${templatePath}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = readFileSync(templatePath, 'utf-8');
|
||||||
|
|
||||||
|
if (existsSync(dataPath)) {
|
||||||
|
const data = JSON.parse(readFileSync(dataPath, 'utf-8'));
|
||||||
|
// No transforms defined yet — data.json support reserved for future editor
|
||||||
|
console.log(`Data file found (${data.pages?.length || 0} pages), no transforms applied yet`);
|
||||||
|
}
|
||||||
|
|
||||||
|
writeFileSync(outputPath, html);
|
||||||
|
console.log(`Generated: ${outputPath}`);
|
||||||
|
await postGenerate(outputPath);
|
||||||
|
|
@ -231,6 +231,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a class="cat-card" href="/tasks/crystal-battery/">
|
||||||
|
<div class="cat-image">
|
||||||
|
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Crystal Battery">
|
||||||
|
</div>
|
||||||
|
<div class="cat-info">
|
||||||
|
<h2>Crystal Battery</h2>
|
||||||
|
<p class="cat-desc">Sonic and Shadow take turns charging a crystal battery! One hero fills cells with crystals, the child figures out how many the other hero needs. Practices complements of 10.</p>
|
||||||
|
<div class="cat-meta">
|
||||||
|
<span class="tag-violet">1 worksheet</span>
|
||||||
|
<span class="tag-teal">Making 10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue