поправлен скролл

src/App.tsx

@@ -12,7 +12,11 @@ const App: React.FC = () => (
     <IonReactRouter>
 
           <IonRouterOutlet>
+            <div className="max-h-screen h-full overflow-auto">
+
             <AppRoutes />
+            </div>
+
           </IonRouterOutlet>
 
     </IonReactRouter>

src/calendar-2(1).svg

@@ -0,0 +1,4 @@
+<svg width="178" height="180" viewBox="0 0 178 180" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M118.667 9.91528C121.38 9.91542 123.643 12.1872 123.643 14.927V27.1047L124.175 27.1536C134.077 28.0763 141.367 31.5011 146.366 36.842C151.369 42.1874 154.135 49.513 154.869 58.3401L154.871 58.3528C155.054 60.0693 153.575 61.6604 151.745 61.6604H26.2546C24.5046 61.6603 23.0064 60.1434 23.1306 58.3303C23.8658 49.5074 26.6319 42.1855 31.6335 36.842C36.6329 31.5011 43.9227 28.0763 53.825 27.1536L54.3562 27.1047V14.927C54.3563 12.1872 56.6193 9.91551 59.3328 9.91528C62.0464 9.91528 64.3093 12.1871 64.3093 14.927V26.7083H113.69V14.927C113.69 12.1871 115.953 9.91528 118.667 9.91528Z" fill="white" stroke="white" stroke-width="1.17201"/>
+<path d="M29.6675 74.0277H148.333C152.086 74.0277 155.165 77.1208 155.165 80.9056V126.881C155.165 137.988 152.405 147.154 146.512 153.54C140.627 159.918 131.533 163.614 118.667 163.614H59.3335C46.4675 163.614 37.3735 159.918 31.4888 153.54C25.5961 147.154 22.8364 137.988 22.8364 126.881V80.9056C22.8364 77.1208 25.9154 74.0277 29.6675 74.0277ZM66.0874 123.206C64.1626 122.399 61.9224 122.399 59.9976 123.206C59.0441 123.606 58.1723 124.166 57.3833 124.88L57.3657 124.896L57.3501 124.912C55.9194 126.432 55.0396 128.514 55.0396 130.614C55.0396 132.713 55.9194 134.795 57.3501 136.315L57.3657 136.331L57.3833 136.347C58.1723 137.062 59.0442 137.621 59.9976 138.021C60.9476 138.419 61.989 138.663 63.0425 138.663C64.096 138.663 65.1373 138.419 66.0874 138.021C67.0408 137.621 67.9127 137.062 68.7017 136.347L68.7183 136.331L68.7349 136.315C70.1656 134.795 71.0444 132.713 71.0444 130.614C71.0444 128.514 70.1656 126.432 68.7349 124.912L68.7183 124.896L68.7017 124.88L68.4019 124.62C67.6934 124.028 66.9217 123.556 66.0874 123.206ZM66.0874 97.0834C64.1626 96.2763 61.9224 96.2764 59.9976 97.0834C59.0442 97.4831 58.1723 98.0427 57.3833 98.7572L57.3599 98.7777L57.3394 98.8011C56.6295 99.595 56.0741 100.472 55.6772 101.43C55.2817 102.385 55.0396 103.432 55.0396 104.491C55.0396 105.549 55.2817 106.596 55.6772 107.551C56.0741 108.51 56.6295 109.386 57.3394 110.18L57.3599 110.203L57.3833 110.224C58.1723 110.939 59.0442 111.498 59.9976 111.898C60.9476 112.296 61.989 112.54 63.0425 112.54C64.096 112.54 65.1373 112.296 66.0874 111.898C67.0408 111.498 67.9127 110.939 68.7017 110.224L68.7241 110.203L68.7446 110.18C69.4545 109.386 70.0099 108.51 70.4067 107.551C70.8023 106.596 71.0444 105.549 71.0444 104.491C71.0444 103.432 70.8023 102.385 70.4067 101.43C70.0098 100.472 69.4546 99.595 68.7446 98.8011L68.7241 98.7777L68.7017 98.7572L68.4019 98.4965C67.6934 97.9052 66.9217 97.4332 66.0874 97.0834ZM92.0444 97.0834C90.2342 96.255 88.1465 96.2052 86.3032 96.9349L85.9556 97.0834C85.0021 97.4832 84.1303 98.0426 83.3413 98.7572L83.3237 98.7728L83.3081 98.7894C81.8774 100.309 80.9976 102.391 80.9976 104.491C80.9976 106.59 81.8774 108.672 83.3081 110.192L83.3237 110.208L83.3413 110.224C84.1303 110.939 85.0021 111.498 85.9556 111.898C86.9057 112.296 87.9469 112.54 89.0005 112.54C90.0541 112.54 91.0953 112.296 92.0454 111.898C92.9989 111.498 93.8707 110.939 94.6597 110.224L94.6772 110.208L94.6929 110.192C96.1236 108.672 97.0034 106.59 97.0034 104.491C97.0034 102.391 96.1236 100.309 94.6929 98.7894L94.6772 98.7728L94.6597 98.7572L94.3599 98.4965C93.6514 97.9053 92.8797 97.4332 92.0454 97.0834H92.0444Z" fill="white" stroke="white" stroke-width="1.17201"/>
+</svg>

src/components/BottomNavigation.tsx

@@ -15,7 +15,7 @@ const BottomNavigation: React.FC = () => {
       width={40}
       height={40}
       viewBox="0 0 29 29"
-           fill={ active ? "#2B8794" : "#ffffff"}
+      fill={active ? "#2B8794" : "#ffffff"}
       stroke={"none"}
       strokeWidth="2"
       strokeLinecap="round"
@@ -32,7 +32,7 @@ const BottomNavigation: React.FC = () => {
       width={40}
       height={40}
       viewBox="0 0 26 26"
-     fill={ active ? "#2B8794" : "#ffffff"}
+      fill={active ? "#2B8794" : "#ffffff"}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -47,7 +47,7 @@ const BottomNavigation: React.FC = () => {
       width={40}
       height={40}
       viewBox="0 0 29 29"
-     fill={ active ? "#2B8794" : "#ffffff"}
+      fill={active ? "#2B8794" : "#ffffff"}
     >
       <g fill="#fff" clipPath="url(#a)">
         <path stroke="#fff" strokeWidth="1.172" d="M20.136 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.894-.182-2.595-.715-.672-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.543-2.584 1.215-3.094.701-.533 1.65-.716 2.595-.716ZM7.994 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.893-.182-2.595-.715-.671-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.544-2.584 1.215-3.094.702-.533 1.65-.716 2.595-.716ZM15.154 13.771v.586h-2.18v-.586h2.18Z" />
@@ -67,7 +67,7 @@ const BottomNavigation: React.FC = () => {
       width={40}
       height={40}
       viewBox="0 0 28 28"
-      fill={ active ? "#2B8794" : "#ffffff"}
+      fill={active ? "#2B8794" : "#ffffff"}
       // stroke={active ? "none" : "#ffffff"}
       strokeWidth="2"
       strokeLinecap="round"

src/index.css

@@ -133,6 +133,9 @@
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Shadow */
 }
 
-.body {
+body {
-  overflow-y: auto !important; /* включаем вертикальную прокрутку */
+  overflow: auto !important; /* включаем вертикальную прокрутку */
+}
+.overflow_auto {
+  overflow: auto !important;
 }

src/pages/Courses.tsx

@@ -6,12 +6,6 @@ import { useHistory } from "react-router-dom"
 
 const Home: React.FC = () => {
   const history = useHistory()
-  const currentDate = new Date().toLocaleDateString("ru-RU", {
-    weekday: "long",
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  })
 
   const courses = [
     { id: 1, name: "Восстановление колена", progress: 75, color: "from-[#2BACBE] to-[#2BACBE]/80" },
@@ -20,62 +14,37 @@ const Home: React.FC = () => {
   ]
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-20 overflow-y-auto max-w-4xl mx-auto">
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-20 overflow-y-auto max-w-4xl mx-auto pb-50">
 
 
       {/* Analytics Cards */}
-      <div className="px-6 mb-8">
+<div className="px-6 mb-8">
-        <div className="grid grid-cols-2 gap-4">
+  
-          <div className="bg-white/30 backdrop-blur-2xl rounded-2xl p-5 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
+    <div className="text-center relative ">
-            <div className="text-center">
+
-              <div className="text-3xl font-black text-[#2BACBE] mb-1">12</div>
+      <div className="w-full h-14 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
-              <div className="text-sm text-[#5F5C5C] font-semibold">Дней подряд</div>
+        {/* Прогрессная часть */}
-            </div>
+        <div
-          </div>
+          className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
-          <div className="bg-white/30 backdrop-blur-2xl rounded-2xl p-5 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
+          style={{ width: '85%' }}
-            <div className="text-center">
+        ></div>
-              <div className="text-3xl font-black text-[#2BACBE] mb-1">85%</div>
+        {/* Текст поверх линии */}
-              <div className="text-sm text-[#5F5C5C] font-semibold">Прогресс</div>
+        <div className="absolute text-white font-semibold text-xl">Вы прошли реабилитацию на {85}%</div>
-            </div>
-          </div>
-        </div>
       </div>
   
-      {/* Current Exercise */}
+    </div>
-      <div className="px-6 mb-8">
+
-        <h2 className="text-xl font-black text-[#5F5C5C] mb-4">Текущее упражнение</h2>
+</div>
-        <div className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300">
+
-          <div className="flex items-center space-x-5">
+
-            <div className="w-20 h-20 bg-gradient-to-br from-[#2BACBE] to-[#2BACBE]/80 rounded-2xl flex items-center justify-center shadow-lg">
-              <span className="text-3xl filter drop-shadow-sm">🦵</span>
-            </div>
-            <div className="flex-1">
-              <h3 className="font-black text-[#5F5C5C] text-lg mb-1">Подъемы ног</h3>
-              <p className="text-sm text-[#5F5C5C]/70 font-medium mb-3">Восстановление колена • 3 подхода</p>
-              <div className="bg-white/50 rounded-full h-3 overflow-hidden">
-                <div
-                  className="bg-gradient-to-r from-[#2BACBE] to-[#2BACBE]/80 h-3 rounded-full shadow-sm transition-all duration-500"
-                  style={{ width: "60%" }}
-                ></div>
-              </div>
-            </div>
-            <button
-              onClick={() => history.push("/exercise/1")}
-              className="bg-gradient-to-r from-[#2BACBE] to-[#2BACBE]/80 text-white px-6 py-3 rounded-2xl font-bold hover:shadow-xl transition-all duration-300 transform hover:scale-105 backdrop-blur-sm"
-            >
-              Продолжить
-            </button>
-          </div>
-        </div>
-      </div>
 
       {/* Courses */}
       <div className="px-6 mb-8">
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-xl font-black text-[#5F5C5C]">Мои курсы</h2>
-          <button onClick={() => history.push("/courses")} className="text-[#2BACBE] text-sm font-bold hover:underline">
+          {/* <button onClick={() => history.push("/courses")} className="text-[#2BACBE] text-sm font-bold hover:underline">
             Все курсы
-          </button>
+          </button> */}
         </div>
         <div className="space-y-4">
           {courses.map((course) => (
@@ -85,13 +54,13 @@ const Home: React.FC = () => {
               className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
             >
               <div className="flex items-center space-x-5">
-                <div
+                {/* <div
                   className={`w-16 h-16 bg-gradient-to-br ${course.color} rounded-2xl flex items-center justify-center shadow-lg`}
                 >
                   <span className="text-2xl text-white filter drop-shadow-sm">💪</span>
-                </div>
+                </div> */}
                 <div className="flex-1">
-                  <h3 className="font-black text-[#5F5C5C] text-lg mb-2">{course.name}</h3>
+                  <h3 className="font-semibold text-[#5F5C5C] text-lg mb-2">{course.name}</h3>
                   <div className="bg-white/50 rounded-full h-3 mb-2 overflow-hidden">
                     <div
                       className={`bg-gradient-to-r ${course.color} h-3 rounded-full transition-all duration-700 shadow-sm`}

src/pages/Exercise.tsx

@@ -120,7 +120,7 @@ const Exercise: React.FC = () => {
   ]
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] overflow-y-auto pb-28 max-w-4xl mx-auto">
+    <div className="bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] py-20  max-w-4xl mx-auto mb-50 overflow_auto">
       {/* Header */}
       <div className="sticky top-0 z-40 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] backdrop-blur-xl pt-12 pb-4 px-4 sm:px-6">
         <div className="flex items-center justify-between mb-4">

src/pages/Home.tsx

@@ -146,8 +146,8 @@ export default function Home() {
   const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)
 
   return (
-    <div className="bg-gray-50 w-full h-full">
+    <div className="bg-gray-50 w-full h-full overflow-auto pb-50">
-      <div className=" py-20 min-h-screen max-w-4xl mx-auto">
+      <div className="py-20 min-h-screen max-w-4xl mx-auto">
         {/* Header */}
         <div className="bg-white rounded-3xl p-6 shadow-lg mb-6 mx-4 sm:mx-6">
           <div className="flex items-center justify-between mb-6 border-b-2 pb-4">
@@ -277,7 +277,7 @@ export default function Home() {
                   xmlns="http://www.w3.org/2000/svg"
                   width={40}
                   height={40}
-                  viewBox="0 0 26 26"
+                  viewBox="0 0 27 27"
                   fill={"#FF8D28"}
                   strokeWidth="2"
                   strokeLinecap="round"

src/pages/Settings.tsx

@@ -13,23 +13,25 @@ const Settings: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 pb-20 max-w-4xl mx-auto">
+    <div className=" bg-gray-50 min-h-screen max-w-4xl mx-auto pb-50" style={{ overflow: 'auto' }}>
       {/* Header */}
-      <div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-12 pb-6">
+      <div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-20 pb-16">
         <div className="flex items-center justify-between mb-4">
           <div>
             <h1 className="text-2xl font-bold text-white">Настройки</h1>
             <p className="text-gray-300">Профиль пациента</p>
           </div>
           <div className="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-full flex items-center justify-center border border-white/30">
-            <span className="text-2xl">👤</span>
+            <span className="text-2xl font-bold text-white">+
+
+            </span>
           </div>
         </div>
       </div>
 
       {/* Profile Information */}
-      <div className="px-4 -mt-4 mb-6">
+      <div className="px-4 -mt-12 mb-6">
-        <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg">
+        <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism">
           <h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2>
 
           <div className="space-y-4">
@@ -70,15 +72,7 @@ const Settings: React.FC = () => {
           <h2 className="text-lg font-semibold text-gray-800 mb-4">Медицинская информация</h2>
 
           <div className="space-y-4">
-            <div>
+
-              <label className="block text-sm font-medium text-gray-600 mb-1">Тип травмы</label>
-              <div className="bg-red-50 rounded-lg p-3 border border-red-200">
-                <div className="flex items-center space-x-2">
-                  <span className="text-red-600">🦵</span>
-                  <span className="text-red-800 font-medium">Травма колена</span>
-                </div>
-              </div>
-            </div>
 
             <div>
               <label className="block text-sm font-medium text-gray-600 mb-1">Описание травмы</label>
@@ -99,13 +93,13 @@ const Settings: React.FC = () => {
 
             <div>
               <label className="block text-sm font-medium text-gray-600 mb-1">Стадия восстановления</label>
-              <div className="bg-green-50 rounded-lg p-3 border border-green-200">
+              <div className="bg-cyan-50 rounded-lg p-3 border border-cyan-200">
                 <div className="flex items-center justify-between">
-                  <span className="text-green-800 font-medium">Активная реабилитация</span>
+                  <span className="text-cyan-800 font-medium">Активная реабилитация</span>
-                  <span className="text-green-600 text-sm">75% завершено</span>
+                  <span className="text-cyan-600 text-sm">75% завершено</span>
                 </div>
-                <div className="mt-2 bg-green-200 rounded-full h-2">
+                <div className="mt-2 bg-cyan-200 rounded-full h-2">
-                  <div className="bg-green-500 h-2 rounded-full" style={{ width: "75%" }}></div>
+                  <div className="bg-cyan-500 h-2 rounded-full" style={{ width: "75%" }}></div>
                 </div>
               </div>
             </div>