From 94e0cf67ff6c0ffd969b1ac640259ad3dc9fe8fe Mon Sep 17 00:00:00 2001
From: Zakhar <tz@za-ek.ru>
Date: Tue, 2 Jun 2026 22:42:03 +0300
Subject: [PATCH] adaptive

---
 index.html   | 90 +++++++++++++++++++++++++++++++++++++++++++++++-----
 package.json |  3 ++
 2 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index a2e3cc3..3a07b37 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <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: scroll;height: 100vh;scroll-behavior: smooth;}
+        #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;}
@@ -24,7 +24,7 @@
 
         #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_container {position: fixed;top:0;width: 100%;background-color: #FCFFFB;user-select: none;z-index: 11;min-width: 420px;}
         #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;}
@@ -33,7 +33,7 @@
         #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;scroll-snap-align: start;}
+        .page_container {width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;min-width: 420px;padding-top: 39px;}
         #page_index {}
         #page_index_content {align-items: start;}
         #page_index p {font-size: 18px;}
@@ -46,15 +46,15 @@
         #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_content_description p {font-size: 24px;color: #0C3B2E;}
         #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 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;}
 
         #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_content_description {display: flex;flex-direction: column;gap:40px;min-width: 400px;}
         #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;}
@@ -62,7 +62,7 @@
         .page_meal_plan_item img {width:54px;}
         .page_meal_plan_item_text {display: flex;flex-direction: column;gap:8px;}
 
-        #page_how_it_works {display: flex;flex-direction: column;justify-content: space-between;padding-top:80px;box-sizing: border-box;}
+        #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;}
@@ -84,12 +84,86 @@
         #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 {height: 136px;width: 100%;}
+        #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;}
+
+        @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-left: 20px;}
+            #page_how_it_works_steps {flex-direction: column; display: flex;align-items: center;gap: 24px;}
+            #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: 120px;}
+            #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){
+            .big_index_greeting {font-size: 104px;line-height: 105px;}
+            #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;}
+            #page_autobasket_content_description p {font-size: 22px;padding: 0 15px;}
+            #page_autobasket_content_description p br {display: none;}
+            #page_autobasket_images {flex-direction: column;}
+            #page_autobasket_images div {max-width: 100% !important;}
+            #page_autobasket_images > div {flex-direction: row;}
+            #page_autobasket_images div img {max-width: 50% !important;}
+            #page_how_it_works_info_image img {max-width: 220px;}
+            #page_how_it_works_info_content {margin-left: 100px;color:#0C3B2E;}
+        }
+
+        @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>
diff --git a/package.json b/package.json
index 987b3b6..57d7ba0 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "start": "./node_modules/http-server/bin/http-server -p 9876 ."
+  },
   "dependencies": {
     "http-server": "^14.1.1"
   },