240 lines
14 KiB
HTML
240 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Document</title>
|
||
<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=Onest:wght@100..900&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {background: #FCFFFB;padding:0;margin:0;font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;}
|
||
.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;}
|
||
|
||
#top_logo {font-size: 20px;line-height: 24px;font-weight: bold;color: #0C3B2E;display: flex;align-items: center;gap:6px;height:24px;margin-top:8px;}
|
||
#top_logo img {width: 24px;}
|
||
#top_line_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;}
|
||
#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%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}
|
||
#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;}
|
||
#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}
|
||
#page_autobasket_images img {max-width: 100%;}
|
||
#page_autobasket_images p {font-size: 18px;color:#6d8982;padding:0;margin:0;}
|
||
|
||
#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;}
|
||
#page_meal_plan_broc {max-width:529px;}
|
||
#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_how_it_works {}
|
||
#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;}
|
||
#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;left:-30px;}
|
||
|
||
#page_how_it_works_info {background-color: #edfaae;width:100%;border-radius: 24px;position: relative;display: flex;flex-direction: row;box-sizing: border-box;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_footer {min-height: 136px;}
|
||
#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;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="top_line_container">
|
||
<div class="container">
|
||
<div id="top_line">
|
||
<div id="top_logo"><img src="/images/logo.png" alt="">Хватило</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 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> энергия, порядок <br>в холодильнике - <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>Вы выбираете, сколько человек в семье, указываете, на сколько дней нужны <br /> продукты — и приложение мгновенно собирает корзину с учётом порций.
|
||
<br> На выходе — чёткий список покупок, разбитый по отделам магазина</p>
|
||
</div>
|
||
<div id="page_autobasket_images">
|
||
<div>
|
||
<img src="/images/autobasket_1.png" alt="">
|
||
<div>
|
||
<h3>Никаких сомнений</h3>
|
||
<p>Забудьте про мучительные вопросы «А хватит ли?», «А что купить ещё?»</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src="/images/autobasket_2.png" alt="">
|
||
<div>
|
||
<h3>Контроль в телефоне</h3>
|
||
<p>Список всегда под рукой, можно вычёркивать по пути</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src="/images/autobasket_3.png" alt="">
|
||
<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>
|
||
<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>Общий план — муж/ребёнок/соседка по комнате знают, что готовить, без ваших объяснений</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img id="page_meal_plan_broc" src="/images/broc_meal_plan.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>
|
||
<p class="description_large">
|
||
Добавляете любимые рецепты и указываете <br>
|
||
возможные замены для продуктов. Из готовых
|
||
</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> день в плане питания</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>с новым списком покупок</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> автокорзина подстроится под наличие</span>
|
||
</li>
|
||
<li>
|
||
|
||
<span>В холодильнике только те продукты, которые вы успеете <br> съесть, в помойку отправится только упаковка</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="page_footer">
|
||
<div class="container container_row">
|
||
<div>
|
||
<div id="bottom_logo"><img src="/images/logo.png" alt="">Хватило</div>
|
||
© 2026 — <a href="mailto:info@hvatilo.ru">info@hvatilo.ru</a> <br>
|
||
</div>
|
||
<div>
|
||
<a href="https://hvatilo.ru/app/offer" target="_blank">Пользовательское соглашение</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |