упражнения курса

src/assets/test.tsx

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="231" height="414" fill="none"><path fill="#fff" d="m52.63 288.512-18.294 31.7c-2.44 4.288-6.171 7.124-11.196 8.508-5.025 1.385-9.678.846-13.959-1.617-4.28-2.462-7.098-6.211-8.452-11.246-1.353-5.035-.823-9.709 1.592-14.022L87.39 154.363c-11.587-11.944-20.277-25.574-26.07-40.888-5.793-15.313-8.69-31.087-8.69-47.32 0-7.962.69-16 2.068-24.11 1.378-8.11 3.738-16 7.08-23.668 1.829-4.595 5.183-7.584 10.061-8.968 4.879-1.385 9.453-.846 13.721 1.617 4.269 2.462 7.092 6.138 8.47 11.026 1.379 4.888 1.3 9.788-.237 14.701a88.68 88.68 0 0 0-3.421 14.022 93.397 93.397 0 0 0-1.153 14.462c0 16.233 3.964 31.473 11.891 45.721 7.928 14.248 19.209 25.654 33.845 34.217l41.162 23.89c18.904 11.026 32.777 26.878 41.62 47.558C226.579 237.303 231 256.672 231 274.73c0 8.269-.762 16.465-2.287 24.588a126.836 126.836 0 0 1-6.86 23.651c-1.83 4.9-5.184 8.042-10.062 9.427-4.879 1.384-9.605.845-14.178-1.617-4.269-2.451-7.165-6.126-8.69-11.026-1.524-4.901-1.524-9.954 0-15.161 1.525-4.9 2.671-9.727 3.439-14.481a89.033 89.033 0 0 0 1.135-14.462c0-9.801-1.372-19.296-4.117-28.484-2.744-9.188-7.165-17.764-13.263-25.727L70.01 404.744c-2.44 4.288-6.171 7.124-11.196 8.509-5.025 1.384-9.678.845-13.959-1.617-4.28-2.463-7.098-6.212-8.452-11.247-1.353-5.035-.823-9.709 1.592-14.021l45.736-79.479-31.1-18.377Zm132.634-141.499c-10.062 0-18.672-3.596-25.831-10.787-7.16-7.192-10.745-15.847-10.757-25.966-.013-10.12 3.573-18.77 10.757-25.948 7.183-7.18 15.794-10.781 25.831-10.806 10.038-.024 18.654 3.578 25.85 10.806 7.196 7.228 10.775 15.877 10.739 25.948-.037 10.07-3.616 18.725-10.739 25.966-7.123 7.24-15.739 10.836-25.85 10.787ZM139.528 55.13c-7.927 0-14.483-2.757-19.666-8.27s-7.775-11.944-7.775-19.295c0-7.963 2.744-14.548 8.232-19.755C125.808 2.603 132.211 0 139.528 0c7.928 0 14.483 2.756 19.667 8.27 5.183 5.512 7.775 11.944 7.775 19.295 0 7.963-2.744 14.548-8.233 19.755-5.488 5.206-11.891 7.81-19.209 7.81Z"/></svg>

src/components/BottomNavigation.tsx

@@ -82,7 +82,7 @@ const BottomNavigation: React.FC = () => {
   const navItems = [
     { path: "/home", icon: HomeIcon, label: "Домой" },
     { path: "/courses", icon: CoursesIcon, label: "Курсы" },
-    { path: "/exercise/1", icon: ExerciseIcon, label: "Тренировка" },
+    { path: "/course/${courseId}/exercises", icon: ExerciseIcon, label: "Тренировка" },
     { path: "/settings", icon: SettingsIcon, label: "Меню" },
   ]
 

src/components/CircularProgressDisplay.tsx

@@ -14,7 +14,7 @@ const CircularProgressDisplay: React.FC<CircularProgressDisplayProps> = ({
   const radius = 40
   const circumference = 2 * Math.PI * radius
 
-  // For the "Courses" ring (blue)
+  // For the "Courses" ring (cyan)
   const coursesProgress = (totalCourses / 5) * 100 // Assuming max 5 courses for visual representation
   const coursesStrokeDashoffset = circumference - (coursesProgress / 100) * circumference
 

src/index.css

@@ -132,10 +132,3 @@
   border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Shadow */
 }
-
-body {
-  overflow: auto !important; /* включаем вертикальную прокрутку */
-}
-.overflow_auto {
-  overflow: auto !important;
-}

src/pages/CourseComplete.tsx

@@ -21,7 +21,7 @@ const CourseComplete: React.FC = () => {
   }, [])
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center p-4 relative overflow-hidden max-w-4xl mx-auto">
+    <div className="min-h-screen bg-gradient-to-br from-green-400 via-cyan-500 to-purple-600 flex items-center justify-center p-4 relative overflow-hidden max-w-4xl mx-auto">
       {/* Background Animation */}
       <div className="absolute inset-0">
         <div className="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div>

src/pages/CourseExercises.tsx

@@ -81,40 +81,24 @@ const CourseExercises: React.FC = () => {
   }
 
   return (
-    <div className="max-w-4xl mx-auto min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 overflow-y-auto scrollable-content">
+
+
+
+
+    <div className="max-w-4xl mx-auto overflow-y-auto scrollable-content">
       {/* Header */}
-      <div className="sticky top-0 z-40 bg-gradient-to-br from-[#2BACBE] via-blue-500 to-indigo-600 backdrop-blur-xl">
+      <div className="fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] p-4 z-50 shadow-lg rounded-b-3xl">
         <div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
-        <div className="relative px-4 sm:px-6 pt-12 pb-6">
+        <div className="relative px-4 sm:px-6 py-4 max-w-4xl mx-auto ">
-          <div className="flex items-center justify-between mb-4">
+                <p className="text-cyan-100 text-sm font-medium">Курс упражнений</p>
-            <button
+                <h1 className="text-xl sm:text-2xl font-semibold text-white">Восстановление колена</h1>
-              onClick={() => history.goBack()}
-              className="w-12 h-12 bg-white/20 backdrop-blur-xl rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg"
-            >
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-              </svg>
-            </button>
-            <div className="text-center">
-              <h1 className="text-xl sm:text-2xl font-black text-white">Восстановление колена</h1>
-              <p className="text-blue-100 text-sm font-medium">Курс упражнений</p>
-            </div>
-            <div className="w-12 h-12 bg-white/20 backdrop-blur-xl rounded-2xl flex items-center justify-center border border-white/30 shadow-lg">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-                />
-              </svg>
-            </div>
-          </div>
         </div>
       </div>
 
+
+
       {/* Exercise Slider */}
-      <div className="px-4 sm:px-6 -mt-4 mb-8">
+      <div className="px-4 sm:px-6 mt-34 mb-10">
         <div className="glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl">
           {/* Exercise Image */}
           <div className="relative">
@@ -163,75 +147,16 @@ const CourseExercises: React.FC = () => {
           </div>
 
           {/* Exercise Info */}
-          <div className="p-6 sm:p-8">
+          <div className="p-6">
-            <h3 className="text-2xl sm:text-3xl font-black text-gray-800 mb-3">{currentExercise.name}</h3>
+            <h3 className="text-xl font-semibold text-gray-600 mb-3">{currentExercise.name}</h3>
-            <p className="text-gray-600 mb-6 leading-relaxed text-sm sm:text-base">{currentExercise.description}</p>
 
-            {/* Stats Grid */}
+           
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
-              <div className="text-center">
-                <div className="w-12 h-12 bg-gradient-to-r from-blue-400 to-cyan-500 rounded-2xl flex items-center justify-center mx-auto mb-2 shadow-lg">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                </div>
-                <div className="text-lg font-black text-gray-800">{currentExercise.duration}</div>
-                <div className="text-xs text-gray-600 font-medium">Время</div>
-              </div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-gradient-to-r from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-2 shadow-lg">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                    />
-                  </svg>
-                </div>
-                <div className="text-lg font-black text-gray-800">{currentExercise.sets}</div>
-                <div className="text-xs text-gray-600 font-medium">Подходы</div>
-              </div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-gradient-to-r from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-2 shadow-lg">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                    />
-                  </svg>
-                </div>
-                <div className="text-lg font-black text-gray-800">{currentExercise.reps}</div>
-                <div className="text-xs text-gray-600 font-medium">Повторы</div>
-              </div>
-              <div className="text-center">
-                <div className="w-12 h-12 bg-gradient-to-r from-orange-400 to-red-500 rounded-2xl flex items-center justify-center mx-auto mb-2 shadow-lg">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
-                    />
-                  </svg>
-                </div>
-                <div className="text-lg font-black text-gray-800">{currentExercise.calories}</div>
-                <div className="text-xs text-gray-600 font-medium">Калории</div>
-              </div>
-            </div>
 
             <button
               onClick={() => history.push(`/exercise/${currentExercise.id}`)}
-              className="w-full bg-gradient-to-r from-[#2BACBE] via-blue-500 to-indigo-600 text-white font-black py-4 px-6 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg backdrop-blur-sm"
+              className="w-full bg-gradient-to-r bg-orange-400 text-white font-semibold py-4 px-6 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg backdrop-blur-sm"
             >
-              🚀 Начать упражнение
+              Начать упражнение
             </button>
           </div>
         </div>
@@ -244,7 +169,7 @@ const CourseExercises: React.FC = () => {
               onClick={() => setCurrentSlide(index)}
               className={`h-2 rounded-full transition-all duration-300 ${
                 index === currentSlide
-                  ? "bg-gradient-to-r from-[#2BACBE] to-blue-600 w-8 shadow-lg"
+                  ? "bg-gradient-to-r from-[#2BACBE] to-cyan-600 w-8 shadow-lg"
                   : "bg-gray-300 w-2 hover:bg-gray-400"
               }`}
             />
@@ -253,45 +178,28 @@ const CourseExercises: React.FC = () => {
       </div>
 
       {/* Exercise List */}
-      <div className="px-4 sm:px-6 pb-28">
+      <div className="px-4 sm:px-6 mb-50">
-        <h2 className="text-xl sm:text-2xl font-black text-gray-800 mb-6">Все упражнения курса</h2>
+        <h2 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-6">Все упражнения курса</h2>
         <div className="space-y-4">
           {exercises.map((exercise, index) => (
             <div
               key={exercise.id}
               onClick={() => history.push(`/exercise/${exercise.id}`)}
               className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${
-                index === currentSlide ? "ring-2 ring-[#2BACBE] bg-blue-50/20" : ""
+                index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : ""
               }`}
             >
               <div className="flex items-center space-x-4">
                 <div className="relative">
-                  <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-[#2BACBE] via-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center text-white font-black text-lg sm:text-xl shadow-xl">
+                  <div className="w-14 h-14 sm:w-16 sm:h-16 border-2 border-cyan-500 rounded-2xl flex items-center justify-center text-cyan-500 font-semibold text-lg sm:text-xl shadow-xl">
                     {index + 1}
                   </div>
-                  <div className="absolute -top-1 -right-1 w-6 h-6 bg-white rounded-full flex items-center justify-center shadow-lg border border-gray-200">
+
-                    <span className="text-xs">{index < currentSlide ? "✅" : index === currentSlide ? "▶️" : "⏳"}</span>
-                  </div>
                 </div>
                 <div className="flex-1 min-w-0">
-                  <h3 className="font-black text-gray-800 text-lg sm:text-xl truncate">{exercise.name}</h3>
+                  <h3 className="font-semibold text-gray-800 text-lg sm:text-xl truncate">{exercise.name}</h3>
                   <p className="text-gray-600 text-sm mb-2 line-clamp-2">{exercise.description}</p>
-                  <div className="flex items-center space-x-4 text-xs text-gray-500">
+
-                    <span className="flex items-center space-x-1">
-                      <span>💪</span>
-                      <span>
-                        {exercise.sets} × {exercise.reps}
-                      </span>
-                    </span>
-                    <span className="flex items-center space-x-1">
-                      <span>⏱️</span>
-                      <span>{exercise.duration}</span>
-                    </span>
-                    <span className="flex items-center space-x-1">
-                      <span>🔥</span>
-                      <span>{exercise.calories} кал</span>
-                    </span>
-                  </div>
                 </div>
                 <div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
                   <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

src/pages/Home.tsx

@@ -70,7 +70,7 @@ export default function Home() {
     {
       value: "3",
       label: "Курса",
-      color: "from-blue-400 to-cyan-500",
+      color: "from-cyan-400 to-cyan-500",
       svg: (
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -115,7 +115,7 @@ export default function Home() {
       id: 1,
       name: "Восстановление колена",
       progress: 75,
-      color: "from-[#2BACBE] to-blue-600",
+      color: "from-[#2BACBE] to-cyan-600",
       icon: "🦵",
       exercises: 12,
       nextExercise: "Подъемы ног лежа",