833 lines
53 KiB
HTML
833 lines
53 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
|
<title>Кристальная Батарея</title>
|
|
<script>
|
|
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
|
</script>
|
|
<style>
|
|
@page { size: A4; margin: 0; }
|
|
|
|
/* 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>
|