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