doc: presentation
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,264 @@
|
||||
<!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=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
||||
</script>
|
||||
<style>
|
||||
.number-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(99, 102, 241, 0.5); }
|
||||
.number-shadow-sm { text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(99, 102, 241, 0.4); }
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
.task-card {
|
||||
border-bottom: 1.5px solid #334155;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
height: 160px;
|
||||
}
|
||||
.card-inner {
|
||||
margin: 1.5mm;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.task-card:nth-child(odd) { border-right: 1.5px solid #334155; }
|
||||
.task-card:nth-child(3), .task-card:nth-child(4) { border-bottom: none; }
|
||||
.card-visual { position: relative; flex: 1; min-height: 0; }
|
||||
.space-asteroid {
|
||||
position: absolute; left: -7.5mm; top: 18.5mm;
|
||||
width: 28mm; height: 28mm;
|
||||
filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.3));
|
||||
z-index: 6;
|
||||
}
|
||||
.space-asteroid img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.space-asteroid .num {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.8rem; font-weight: 900; color: white;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(99,102,241,0.5);
|
||||
}
|
||||
.cargo-ship {
|
||||
position: absolute; right: -12.5mm; top: -5mm;
|
||||
width: 90mm; height: 42mm; z-index: 1;
|
||||
}
|
||||
.cargo-ship .ship-img { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
|
||||
.cargo-ship .badge-10 {
|
||||
position: absolute; left: 40%; top: 39%; transform: translate(-50%, -50%);
|
||||
width: 22px; height: 22px; border-radius: 50%;
|
||||
background: #4f46e5; border: 2px solid #a5b4fc;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 3;
|
||||
}
|
||||
.cargo-ship .badge-10 span { color: white; font-weight: 800; font-size: 0.6rem; }
|
||||
.cargo-ship .inner-ast {
|
||||
position: absolute; left: 58%; top: 73%; transform: translate(-50%, -50%);
|
||||
width: 14mm; height: 14mm; z-index: 2;
|
||||
}
|
||||
.cargo-ship .inner-ast img { width: 100%; height: 100%; object-fit: contain; opacity: 0.7; }
|
||||
.cargo-ship .inner-ast .num {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.1rem; font-weight: 900; color: white;
|
||||
text-shadow: 1px 1px 3px rgba(0,0,0,0.6), 0 0 6px rgba(99,102,241,0.4);
|
||||
}
|
||||
.arrows-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
|
||||
.arrow-input-box {
|
||||
position: absolute; left: calc(52% - 2mm); top: calc(45.5% - 1mm); transform: translateY(-100%);
|
||||
width: 10mm; height: 8mm; background: white;
|
||||
border: 1px solid #c7d2fe; border-radius: 1.5mm;
|
||||
display: flex; align-items: center; justify-content: center; z-index: 7;
|
||||
}
|
||||
.arrow-input-box span { display: inline-block; width: 7mm; border-bottom: 1.5px solid #a5b4fc; }
|
||||
.remnant-shape {
|
||||
position: absolute; left: 61%; bottom: 7mm; z-index: 5;
|
||||
display: flex; align-items: center; gap: 0.5mm;
|
||||
}
|
||||
.remnant-shape .shape-container { position: relative; width: 16mm; height: 16mm; flex-shrink: 0; }
|
||||
.remnant-shape .shape-container img { width: 100%; height: 100%; object-fit: contain; opacity: 0.5; }
|
||||
.remnant-shape .shape-container .shape-blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
|
||||
.remnant-shape .shape-container .shape-blank span { display: inline-block; width: 7mm; border-bottom: 1.5px solid #6366f1; }
|
||||
.remnant-shape .shape-question { font-size: 1.4rem; font-weight: 900; color: #a5b4fc; line-height: 1; }
|
||||
.card-formula { flex-shrink: 0; text-align: center; padding: 0 1mm 2mm; margin-top: -2mm; }
|
||||
.formula-label { font-size: 0.45rem; font-weight: 600; color: #818cf8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3.5mm; }
|
||||
.formula-row { display: flex; align-items: baseline; justify-content: center; gap: 1mm; font-size: 0.85rem; font-weight: 700; color: #1e1b4b; line-height: 1; }
|
||||
.formula-row .blank { display: inline-block; width: 8mm; border-bottom: 1.5px solid #a5b4fc; }
|
||||
.brace-group { display: inline-flex; flex-direction: column; align-items: center; }
|
||||
.answer { font-family: 'Caveat', cursive; font-weight: 700; color: #4338ca; }
|
||||
.brace-group .brace-content { display: flex; align-items: baseline; gap: 0.5mm; white-space: nowrap; }
|
||||
.brace-group .brace-svg { width: 90%; height: 3mm; margin-top: 2.5mm; display: block; }
|
||||
.brace-group .brace-val { font-size: 0.6rem; font-weight: 800; color: #6366f1; line-height: 1; margin-top: 0.3mm; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white font-nunito p-4">
|
||||
|
||||
<svg style="position:absolute;width:0;height:0" aria-hidden="true">
|
||||
<defs>
|
||||
<marker id="ah" markerWidth="6" markerHeight="4" refX="5" refY="2" orient="auto">
|
||||
<polygon points="0 0, 6 2, 0 4" fill="#6366f1"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="card-grid" style="max-width: 700px;">
|
||||
|
||||
<!-- Card 1 (example with answers) -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="../../../assets/icons/pack3-asteroids/asteroid1.png" alt="">
|
||||
<span class="num">5</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="../../../assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt="">
|
||||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="../../../assets/items/asteroid-shapes/asteroid1.png" alt="">
|
||||
<span class="num">6</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
<path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
<path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
</svg>
|
||||
<div class="arrow-input-box"><span class="answer" style="font-size:1.1rem">4</span></div>
|
||||
<div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span class="answer" style="font-size:1.3rem">1</span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula">
|
||||
<div class="formula-label" style="color:#4338ca">пример</div>
|
||||
<div class="formula-row">
|
||||
<span>6</span><span>+</span><span>5</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"><span class="answer" style="font-size:1.1rem">4</span></span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
<span>+</span><span class="blank"><span class="answer" style="font-size:1.1rem">1</span></span><span>=</span><span class="blank"><span class="answer" style="font-size:1.1rem">11</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="../../../assets/icons/pack3-asteroids/asteroid2.png" alt="">
|
||||
<span class="num">9</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="../../../assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt="">
|
||||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="../../../assets/items/asteroid-shapes/asteroid2.png" alt="">
|
||||
<span class="num">9</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
<path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
<path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
</svg>
|
||||
<div class="arrow-input-box"><span> </span></div>
|
||||
<div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid2.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>9</span><span>+</span><span>9</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
<span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="../../../assets/icons/pack3-asteroids/asteroid3.png" alt="">
|
||||
<span class="num">7</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="../../../assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt="">
|
||||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="../../../assets/items/asteroid-shapes/asteroid3.png" alt="">
|
||||
<span class="num">7</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
<path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
<path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
</svg>
|
||||
<div class="arrow-input-box"><span> </span></div>
|
||||
<div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid3.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>7</span><span>+</span><span>7</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
<span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="../../../assets/icons/pack3-asteroids/asteroid4.png" alt="">
|
||||
<span class="num">6</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="../../../assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt="">
|
||||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="../../../assets/items/asteroid-shapes/asteroid4.png" alt="">
|
||||
<span class="num">6</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
<path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
<path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
</svg>
|
||||
<div class="arrow-input-box"><span> </span></div>
|
||||
<div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid4.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>6</span><span>+</span><span>6</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
<span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!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">
|
||||
<script>
|
||||
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-white font-nunito">
|
||||
<!-- Full page collecting asteroids -->
|
||||
<div style="width: 210mm; height: 297mm;" class="relative overflow-hidden mx-auto bg-white">
|
||||
<div class="absolute bottom-0 left-0 right-0 z-0">
|
||||
<div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
|
||||
<img src="../../../assets/footers/cabin3.jpeg" class="w-full" alt="">
|
||||
</div>
|
||||
<div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
|
||||
<img src="../../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
|
||||
<div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
|
||||
<h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
|
||||
<p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<!-- 3 Ships -->
|
||||
<div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
|
||||
<div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
|
||||
|
||||
<!-- Asteroids -->
|
||||
<div class="absolute" style="left: 67mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 111mm; top: 15mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 146mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 22mm; top: 55mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 57mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
|
||||
<div class="absolute" style="left: 93mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
|
||||
<div class="absolute" style="left: 80mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
|
||||
<div class="absolute" style="left: 33mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
|
||||
<div class="absolute" style="left: 115mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 45mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
<div class="absolute" style="left: 79mm; top: 141mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
|
||||
<div class="absolute" style="left: 132mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!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">
|
||||
<script>
|
||||
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-white font-nunito p-6">
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-[6px]" style="max-width: 700px;">
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="../../../assets/icons/pack1/plants1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="../../../assets/icons/pack1/minerals4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="../../../assets/icons/pack1/plants5-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="../../../assets/icons/pack1/minerals3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="../../../assets/icons/pack1/minerals2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 8 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-1">
|
||||
<img src="../../../assets/icons/pack1/plants3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
|
||||
<div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
|
||||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 5 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!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">
|
||||
<script>
|
||||
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
||||
</script>
|
||||
<style>
|
||||
.asteroid-glow { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3)); }
|
||||
.number-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(99, 102, 241, 0.5); }
|
||||
.number-shadow-sm { text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(99, 102, 241, 0.4); }
|
||||
.divider-construction { height: 7px; background: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px); border-radius: 2px; opacity: 0.7; }
|
||||
.splitter-icon { width: 36mm; object-fit: contain; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white font-nunito p-6">
|
||||
<div class="flex flex-col gap-6" style="max-width: 700px;">
|
||||
|
||||
<!-- Section: N=10 -->
|
||||
<div class="flex items-center gap-[8mm]">
|
||||
<div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
|
||||
<img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt="">
|
||||
<span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col gap-[1.5mm] items-center">
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">9</span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider-construction"></div>
|
||||
|
||||
<!-- Section: N=7 -->
|
||||
<div class="flex items-center gap-[8mm]">
|
||||
<div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
|
||||
<img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt="">
|
||||
<span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col gap-[1.5mm] items-center">
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user