201 lines
14 KiB
HTML
201 lines
14 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; }
|
||
:root {
|
||
--hero-direction: row-reverse;
|
||
}
|
||
.page-header { flex-direction: var(--hero-direction); }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-200 font-nunito">
|
||
|
||
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
|
||
|
||
<div class="absolute bottom-0 left-0 right-0 h-[80mm] overflow-hidden z-0">
|
||
<div class="absolute top-0 left-0 right-0 h-[40%] bg-gradient-to-b from-white to-transparent z-10"></div>
|
||
<img src="/assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
|
||
</div>
|
||
|
||
<div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
|
||
<div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
|
||
<span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative z-10 w-full h-full px-[12mm] pt-[8mm] pb-[65mm] flex flex-col">
|
||
|
||
<div class="page-header flex items-center gap-4 mb-4">
|
||
<img src="/assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
|
||
<div class="flex-1 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-1">Собери ресурсы, решая примеры!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-x-3 gap-y-[8px] flex-1 content-start">
|
||
|
||
<div class="flex justify-end py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 4 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-end py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants2-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals2-0-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 5 − 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals5-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">6 × 3 + 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-end py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 × 2 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals4-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 8 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals6-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-end py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals1-2-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 7 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants1-3-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 × 3 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 6 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 3 − 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-end py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">6 × 4 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-end py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 2 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 9 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals5-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/plants1-2-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 8 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-start py-[3px]">
|
||
<div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
|
||
<img src="/assets/icons/pack1/minerals4-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
|
||
<span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 7 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300"> </span></span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|