2026-06-21 10:23:36 +00:00
<!doctype html>
< html lang = "ru" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title > Хватило.р у < / title >
< meta name = "description" content = "Приложение Hvatilo собирает список продуктов, подстраивается под наличие в магазине и помогает готовить всей семьей без лишних трат. Планируйте рацион легко." >
< meta name = "keywords" content = "планировщик питания, приложение для покупок продуктов, автокорзина, список покупок онлайн, рацион для семьи, помощник по питанию" >
< link rel = "apple-touch-icon" href = "/app/icons/logo512.png" >
< link rel = "icon" href = "/app/icons/favicon.ico" >
< meta name = "theme-color" content = "#000000" >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Onest:wght@100..900& display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
2026-06-21 12:21:13 +00:00
nonce="**MY_PRETTY_CSP_NONCE**"
2026-06-21 10:23:36 +00:00
/>
< noscript >
< link
href="https://fonts.googleapis.com/css2?family=Onest:wght@100..900& display=swap"
rel="stylesheet"
type="text/css"
/>
< / noscript >
< style >
html, body {height: 100vh;overflow: hidden;}
body {background: #FCFFFB;padding:0;margin:0;font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;}
#scroller {scroll-snap-type: y mandatory;overflow-y: scroll;overflow-x:hidden;height: 100vh;scroll-behavior: smooth;}
.container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;}
.text_secondary {color:#6D8982;}
h1 {font-size: 254px;padding:0;margin:0;}
h2 {font-size: 48px;color:#0C3B2E;text-transform: uppercase;margin:0;padding:0;}
h3 {font-size: 18px;color:#0C3B2E;font-weight: bold;padding:0;margin:0;}
p.description {font-size: 18px;color:#6d8982;padding:0;margin:0;}
p.description_large {font-size: 24px;color:#6d8982;padding:0;margin:0;}
a:focus {outline: none;}
span.nobreak {white-space: nowrap;}
#top_logo {font-size: 20px;line-height: 24px;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
#top_logo img {width: 24px;}
#top_logo a {font-weight: bold;color: #0C3B2E;text-decoration: none;}
#top_line_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;min-width: 360px;}
#top_line {position:relative;display: flex;flex-direction: row;justify-content: space-around;padding:18px 0;height:80px;box-sizing: border-box; border-bottom: 1px solid #e7ede7;}
#top_menu {display:flex;flex-direction:row;gap: 40px;margin-top:13px;height:18px;align-items: center;}
#top_menu a {color: #6D8982;font-size:14px;font-weight: 500;line-height: 17px;text-decoration: none;}
#top_menu a:hover {color: #5EA12D;}
#top_menu a:focus {outline: none;}
#try_button {background-color: #FFBA00;padding:13px 43px;font-weight: bold;border-radius: 100px;color:#0C3B2E;text-decoration: none;
display: flex;}
.page_container {width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;min-width: 360px;padding-top: 39px;}
#page_index {}
#page_index_content {align-items: start;}
#page_index p {font-size: 18px;}
.container_row {display: flex;flex-direction: row;gap: 34px;align-items: flex-end}
.big_index_greeting {font-size:254px;font-weight: 900;line-height: 214px;color:#0c3b2e;text-transform: uppercase;letter-spacing: -0px;}
#page_index_store_btns {height:52px;display: flex;flex-direction: row;gap:30px;align-items: center;padding-top:40px;}
#page_index_store_btns a {display: flex;align-items: center;color:#6d8982;font-weight: bold;padding:14px 0;text-decoration: none;}
#page_index_store_btns img {height: 24px;margin-right: 12px;}
#page_autobasket {}
#page_autobasket_content {display: flex;flex-direction: column;gap: 64px;}
#page_autobasket_content_description {text-align: center;}
#page_autobasket_content_description p {font-size: 24px;color: #6d8982;}
#page_autobasket_images {display: flex;flex-direction: row;gap: 20px;justify-content: center;}
#page_autobasket_images div {display: flex;flex-direction: column; gap: 16px;max-width: 387px;text-align: center;align-items: center;}
#page_autobasket_images img {max-width: 100%;}
#page_autobasket_images p {font-size: 18px;color:#6d8982;padding:0;margin:0;}
.autobasket_image_wrapper {aspect-ratio: 300/317;background-color: #edfaad;border-radius: 24px;justify-content: center;}
#page_meal_plan {}
#page_meal_plan_content {display: flex;flex-direction: row;gap:20px;padding:0 120px;justify-content: space-around;}
#page_meal_plan_content_description {display: flex;flex-direction: column;gap:40px;min-width: 400px;}
#page_meal_plan_broc {max-width:529px;border-radius: 24px;}
#page_meal_plan_items {gap: 24px;display: flex;flex-direction: column;}
.page_meal_plan_item {display: flex;flex-direction: row;gap: 16px;max-width: 650px;}
.page_meal_plan_item p {font-size:18px;color:#6d8982;padding: 0;margin:0;}
.page_meal_plan_item img {width:54px;}
.page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
.page_meal_plan_item_text span {white-space: nowrap;}
#page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:110px;box-sizing: border-box;}
#page_how_it_works_content {text-align: center;}
#page_how_it_works_step {}
#page_how_it_works_steps {display: flex;flex-direction: row;justify-content: space-between;margin-top:64px;font-size:18px;}
#page_how_it_works_steps .step-image {width:80px;}
.page_how_it_works_steps_arrow {display: flex;justify-content: center;align-items: center;}
#page_how_it_works_step_1 {position: relative;}
#page_how_it_works_step_1_arrow {height:30px;align-self: center}
#page_how_it_works_step_2 {}
#page_how_it_works_step_2_arrow {height:30px;}
#page_how_it_works_step_3 {position: relative;align-items: end;display: flex;}
#page_how_it_works_step_3 img {position:absolute;width:240px;top:-170px;}
#page_how_it_works_info {background-color: #edfaae;width:100%;border-radius: 24px;position: relative;display: flex;flex-direction: row;box-sizing: border-box;min-height:320px;margin-top:60px;}
#page_how_it_works_info_image {position: relative;height:320px;margin-top:70px;}
#page_how_it_works_info_image img {position: absolute;max-width: 419px;left:-70px;top:-140px;}
#page_how_it_works_info_content {font-size: 24px;text-align: left;margin-left:340px;margin-top:25px;display: flex;flex-direction: column;justify-content: space-around;}
#page_how_it_works_info_content ul {align-self: center;justify-content: center;}
#page_how_it_works_info_content ul li::marker {padding-top:0;}
#page_how_it_works_info_content ul li {list-style-type: disc;padding-top:3px;padding-bottom:24px;}
#page_how_it_works_info_content ul li span {margin-top: -28px;display: flex;}
#page_meal_plan_broc_small {display: none;}
#page_footer {height: 136px;width: 100%;padding-top:15px;}
#page_footer > div {display: flex;align-items: center;justify-content: space-between;}
#page_footer a {color:#5EA12D;text-decoration: none;}
#bottom_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
#bottom_logo img {width: 24px;}
#bottom_contacts_small {display: none;}
br.small {display: none;}
br.medium {display: none;}
br.big {display: initial;}
@media (max-width: 1360px){
#page_how_it_works_steps {padding: 0 20px;}
#page_footer {padding-bottom: 80px;}
}
@media (max-width: 1280px){
.big_index_greeting {font-size: 204px;line-height: 185px;}
p.description_large {font-size: 22px;}
.page_container {padding-top:0;}
}
@media (max-width: 1100px){
.big_index_greeting {font-size: 174px;line-height: 155px;}
p.description_large {font-size: 18px;}
#page_autobasket_images {max-width: 100%;padding: 0 20px;}
#page_autobasket_images > div {max-width: 33%;}
#page_autobasket_images div img {max-width: 100% !important;}
#page_how_it_works_info_content {font-size: 20px;}
}
@media (max-width: 960px){
.big_index_greeting {font-size: 144px;line-height: 135px;}
#page_index p {font-size: 14px;}
#top_line {justify-content: space-between;padding: 18px;}
#top_menu {display: none;}
p.description_large br {display: none;}
#page_autobasket_content_description p {font-size: 20px;}
.page_container {min-height: auto;padding-top:100px;}
#page_meal_plan_content {padding: 0 20px;box-sizing: border-box;}
#page_how_it_works_steps {flex-direction: column; display: flex;align-items: center;gap: 24px;color:#0C3B2E;}
#page_how_it_works_steps > div {display: flex;flex-direction: row;gap: 20px;}
#page_how_it_works_steps > div img {height: auto;max-width: 80px;max-height: 80px;}
#page_how_it_works_steps > div:nth-child(3) {flex-direction: row-reverse;}
.page_how_it_works_steps_arrow {display: none !important;}
#page_how_it_works_step_3 img {top:0;position: relative;width: auto;}
#page_how_it_works_info_content br {display: none;}
}
@media (max-width: 800px){
.big_index_greeting {font-size: 144px;line-height: 135px;}
#page_index p {font-size: 24px;text-align: center}
#page_index_content h1 + div {flex-direction: column-reverse;}
#page_index_content h1 + div div {width: 100%;}
#page_index_store_btns {justify-content: center;}
p.description_large {font-size: 20px;}
#page_autobasket_content_description p {font-size: 16px;}
#page_meal_plan_broc {display: none;}
#page_how_it_works_info_content {margin-left: 280px;color:#0C3B2E;}
#page_how_it_works_info_image img {max-width: 360px;}
#page_footer {padding-left: 40px;padding-right: 20px;}
}
@media (max-width: 600px){
br.big {display: none;}
br.medium {display: initial !important;}
#page_index {height: 100vh;padding-top: 0;}
.big_index_greeting {font-size: 85px;line-height: 81px;text-align: left;max-width: 80%;margin: 0 20px;}
.big_index_greeting:last-child {text-align: right;}
#page_index p {font-size: 24px;text-align: center}
#page_index_content {width: 100%;max-width: 480px;}
#page_index_content h1 + div {flex-direction: column-reverse;}
#page_index_content h1 + div div {width: 100%;}
#page_index_store_btns {justify-content: center;}
#page_meal_plan_content_description {gap: 30px;}
#page_meal_plan_content {gap: 0;}
#page_meal_plan_broc_small {display: block;border-radius: 24px;}
#page_autobasket_content_description p {font-size: 22px;padding: 0 15px;}
#page_autobasket_images {flex-direction: column;}
#page_autobasket_images p {font-size: 20px;}
#page_autobasket_images div {max-width: 100% !important;}
#page_autobasket_images > div {flex-direction: row;}
.autobasket_image_wrapper img {max-width: 100% !important;}
#page_autobasket_images > div > img,
.autobasket_image_wrapper {max-width: 50% !important;}
h3 {font-size: 22px;}
#page_how_it_works_info {height: 280px;}
#page_how_it_works_info_image img {max-width: 220px;}
#page_how_it_works_step_3 img { max-width: 120px !important;max-height: 120px !important;}
#page_how_it_works_step_3 {width: 100%;align-items: center;}
#page_how_it_works_step_3 p {width: 100%;}
#page_how_it_works_info_content {margin-left: 100px;color:#0C3B2E;}
#page_footer {margin-top: 60px;}
#page_footer > div {flex-direction: column;align-items: flex-start;padding-left:10px;gap: 16px;}
#page_footer > div {font-size: 14px;}
#page_footer a {color:#6d8982;}
#bottom_logo {margin-bottom: 32px;}
#bottom_contacts_header {font-weight: bold;margin-bottom: 4px;}
#bottom_contacts_header {font-size:14px;}
#bottom_contacts {margin-bottom: 8px;}
#bottom_contacts_big {display: none;}
#bottom_contacts_small {display: flex;color:#6d8982;padding-bottom: 80px;}
}
@media (max-width: 420px){
br.small {display: initial !important;}
#page_index_content {padding-top:0;width: 100%;}
.big_index_greeting {font-size: 65px;line-height: 61px;text-align: left;max-width: 80%;margin: 0 20px;}
.big_index_greeting:last-child {text-align: right;}
#page_index p {font-size: 20px;text-align: center}
#top_line {padding:10px 20px;height:52px;}
#top_logo span {display: none;}
h2 {font-size: 32px;}
#page_meal_plan_content_description {max-width: 100%;min-width: 320px;}
#page_meal_plan_content_description h2 {text-align: center;}
#page_how_it_works_content {padding: 0 20px;box-sizing: border-box;}
#try_button {font-size: 12px;padding:8.5px 35.5px;}
p.text_secondary {margin: 0;}
#page_autobasket_images p {font-size: 18px;}
#page_autobasket_images > div {flex-direction: column;}
#page_autobasket_images div {gap: 8px;}
#page_autobasket_images div div {gap: 2px;}
#page_autobasket_images div img {max-width: 100% !important;}
#page_autobasket_content_description h2 {padding-bottom: 24px;}
#page_autobasket_content_description p {font-size: 16px;margin: 0;}
p.description_large {font-size: 16px;}
#page_how_it_works_info {height: auto;}
#page_how_it_works_steps {font-size: 14px;padding:0;align-items: initial;margin-top: 20px;}
#page_how_it_works_steps p {display: flex;align-content: center;align-items: center;width: 100%;justify-content: center;}
#page_how_it_works_steps > div {width: 100%;}
#page_how_it_works_info {margin-top:20px; display: flex;flex-direction: column-reverse;}
#page_how_it_works_info_content {margin-left:0;font-size: 16px;}
#page_how_it_works_info ul {margin-top:25px;margin-right: auto;}
#page_how_it_works_info_content ul li:last-child {padding-bottom: 0;}
#page_how_it_works_info_image {height: auto;margin-top: -15px;margin-bottom: 20px; }
#page_how_it_works_info_image img {position: relative;top:initial;left:initial;}
#page_footer > div {font-size: 12px;}
#bottom_contacts_header {font-size:12px;}
}
@media (max-height: 1000px){
#page_autobasket_content {gap: 20px;}
#page_autobasket_images div img {max-width: 300px;}
}
@media (max-height: 800px),
(max-width: 1000px)
{
#scroller {scroll-snap-type: initial;scroll-behavior: initial;}
}
< / style >
< / head >
< body >
< div id = "top_line_container" >
< div class = "container" >
< div id = "top_line" >
< div id = "top_logo" > < a href = "#" > < img src = "/images/logo.png" alt = "Хватило лого" > < span > Хватило< / span > < / a > < / div >
< div id = "top_menu" >
< a href = "#page_autobasket" > Автокорзина< / a >
< a href = "#page_meal_plan" > План питания< / a >
< a href = "#page_how_it_works" > Список покупок< / a >
< a href = "#page_footer" > Контакты< / a >
< / div >
< div > < a href = "https://hvatilo.ru/app/" id = "try_button" target = "_blank" > Попробовать< / a > < / div >
< / div >
< / div >
< / div >
< div id = "scroller" >
< main >
< div class = "page_container" id = "page_index" >
< div id = "page_index_content" >
< h1 class = "big_index_greeting" > Хватит< / h1 >
< div class = "container_row" >
< div >
< p class = "text_secondary" >
Персональный помощник < br > по питанию: баланс, < br class = "big" > энергия,< br class = "small medium" > порядок < br class = "big" > в холодильнике - < br > для всей семьи
< / p >
< / div >
< div class = "big_index_greeting" > гадать< / div >
< / div >
< div id = "page_index_store_btns" >
< a href = "https://play.google.com/store/apps/details?id=eu.zaek.hvatilo.twa&hl=ru" target = "_blank" rel = "noreferrer noopener" > < img src = "/images/google_play.png" alt = "" > Google play< / a >
< a href = "https://www.rustore.ru/catalog/app/eu.zaek.hvatilo.twa" target = "_blank" rel = "noreferrer noopener" > < img src = "/images/rustore.png" alt = "" > RuStore< / a >
< / div >
< / div >
< / div >
< div class = "page_container" id = "page_autobasket" >
< div id = "page_autobasket_content" >
< div id = "page_autobasket_content_description" >
< h2 > Автокорзина< / h2 >
< p > Вы выбираете, сколько человек в семье, < wbr / > указываете, на сколько дней нужны < wbr / > < span class = "nobreak" > продукты — и приложение< / span > мгновенно < br class = "small" / > собирает корзину с
< br > Н а < span class = "nobreak" > чёткий список покупок< / span > , < br class = "small" / > разбитый по отделам магазина< / p >
< / div >
< div id = "page_autobasket_images" >
< div >
< img src = "/images/autobasket_1.png" alt = "" >
< div >
< h3 > Никаких сомнений< / h3 >
< p > Забудьте про мучительные вопросы < br > «А хватит ли?», «А что купить ещё?»< / p >
< / div >
< / div >
< div >
< img src = "/images/autobasket_2.png" alt = "" >
< div >
< h3 > Контроль в телефоне< / h3 >
< p > Список всегда под рукой, можно вычёркивать по пути< / p >
< / div >
< / div >
< div >
< div class = "autobasket_image_wrapper" >
< img src = "/images/broc_happy.png" alt = "" >
< / div >
< div >
< h3 > Всё схвачено< / h3 >
< p > Мы уже учли, что есть в магазине< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "page_container" id = "page_meal_plan" >
< div id = "page_meal_plan_content" class = "container" >
< div id = "page_meal_plan_content_description" >
< h2 > План питания< / h2 >
< p class = "description_large" >
Добавляете любимые рецепты и указываете < br >
возможные замены для продуктов. Из готовых < br >
рецептов собираете план на день/неделю, планом < br >
можно делиться с
< / p >
< img id = "page_meal_plan_broc_small" src = "/images/broc_diet.png" alt = "" >
< div id = "page_meal_plan_items" >
< div class = "page_meal_plan_item" >
< div > < img src = "/images/balance-icon.png" alt = "" > < / div >
< div class = "page_meal_plan_item_text" > < h3 > Баланс< / h3 > < p > Вы сами выбираете блюда< / p > < / div >
< / div >
< div class = "page_meal_plan_item" >
< div > < img src = "/images/economy-icon.png" alt = "" > < / div >
< div class = "page_meal_plan_item_text" > < h3 > Экономия< / h3 > < p > Замена без потери вкуса< / p > < / div >
< / div >
< div class = "page_meal_plan_item" >
< div > < img src = "/images/personalization-icon.png" alt = "" > < / div >
< div class = "page_meal_plan_item_text" > < h3 > Персонализация< / h3 > < p > Общий план — муж/ребёнок/соседка по комнате знают, < wbr > < span > что готовить,< / span > без ваших
< br class = "small" > объяснений< / p > < / div >
< / div >
< / div >
< / div >
< div >
< img id = "page_meal_plan_broc" src = "/images/broc_diet.png" alt = "" >
< / div >
< / div >
< / div >
< div class = "page_container" id = "page_how_it_works" >
< div id = "page_how_it_works_content" class = "container" >
< h2 > Как это работает< / h2 >
< br >
< br class = "big" >
< p class = "description_large" >
Вы выбираете, что хотите приготовить — < br class = "big medium small" > Hvatilo
помогает собрать остальное
< / p >
< div id = "page_how_it_works_steps" >
< div id = "page_how_it_works_step_1" >
< img src = "/images/smile-icon.png" class = "step-image" alt = "" >
< p > Открываете сегодняшний < br class = "big" > день < br class = "small" > в плане питания< / p >
< / div >
< div class = "page_how_it_works_steps_arrow" >
< img src = "/images/arrow-1.png" alt = "" id = "page_how_it_works_step_1_arrow" >
< / div >
< div id = "page_how_it_works_step_2" >
< img src = "/images/laugh-icon.png" class = "step-image" alt = "" >
< p > Заменить ужин — пара кликов, < br > и рецепт встаёт в план < br class = "big" > с < br class = "small" > списком покупок< / p >
< / div >
< div class = "page_how_it_works_steps_arrow" > < img src = "/images/arrow-2.png" alt = "" id = "page_how_it_works_step_2_arrow" > < / div >
< div id = "page_how_it_works_step_3" >
< img src = "/images/broc_meal_plan.png" alt = "" >
< p > Из списка продуктов можно < br > сформировать автокорзину < br > на недостающие< / p >
< / div >
< / div >
< div id = "page_how_it_works_info" >
< div id = "page_how_it_works_info_image" > < img src = "/images/happy-salad.png" alt = "" > < / div >
< div id = "page_how_it_works_info_content" >
< ul >
< li >
< span > Отсутствие продукта в магазине < br class = "small" > не сломает приём пищи: < br > < br class = "small" > автокорзина подстроится < br class = "small" > под наличие< / span >
< / li >
< li >
< span > В < br class = "small" / > те продукты, которые вы успеете < br class = "small big" > съесть, в помойку отправится < br
class="small">только упаковка< / span >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "page_footer" >
< div class = "container container_row" >
< div >
< div id = "bottom_logo" > < img src = "/images/logo.png" alt = "" > Хватило< / div >
< div id = "bottom_contacts_header" > Контакты< / div >
< div id = "bottom_contacts" > < a href = "mailto:info@hvatilo.ru" > info@hvatilo.ru< / a > < / div >
< div id = "bottom_contacts_big" > © 2026 — < a href = "mailto:info@hvatilo.ru" > info@hvatilo.ru< / a > < br > < / div >
< / div >
< div >
< a href = "https://hvatilo.ru/app/offer" target = "_blank" > Пользовательское соглашение< / a >
< / div >
< div id = "bottom_contacts_small" > © 2026 < br >
<!-- О О О -->
Самозанятый Телятников З а х а р
< / div >
< / div >
< / div >
< / div >
< / main >
< / div >
< / body >
< / html >
