From c756041321136d44630ec7f51cc18db7ea62321c Mon Sep 17 00:00:00 2001
From: Tatyana <krasnovavgma@yandex.ru>
Date: Wed, 27 Aug 2025 12:44:57 +0300
Subject: [PATCH] =?UTF-8?q?ui=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
 =?UTF-8?q?=20=D1=83=D0=BF=D1=80=D0=B0=D0=B6=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/AppRoutes.tsx                    |  2 +-
 src/components/icons/CheckIcon.tsx   | 27 +++++++++
 src/components/icons/RefreshIcon.tsx | 27 +++++++++
 src/index.css                        |  5 ++
 src/pages/CourseExercises.tsx        |  2 +-
 src/pages/Exercise.tsx               | 87 +++++++++++++++++-----------
 src/shared/consts/router.ts          |  2 +-
 7 files changed, 116 insertions(+), 36 deletions(-)
 create mode 100644 src/components/icons/CheckIcon.tsx
 create mode 100644 src/components/icons/RefreshIcon.tsx

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
index 0f87f10..07d6af0 100644
--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@@ -31,7 +31,7 @@ const AppRoutes = () => (
     <Route path={getRouteForgotPassword()} component={ForgotPasword} />
     <Route exact path={getRouteCourses()} component={Courses} />
     <Route exact path="/course/:id" component={CourseExercises} />
-    <Route exact path="/course/:courseId/exercise/:exerciseId" component={Exercise} />
+    <Route exact path="/course/:courseId/:exerciseId" component={Exercise} />
     <Route path={getRouteSettings()} component={Settings} />
     <Route path={getRouteCourseComplete()} component={CourseComplete} />
   </Switch>
diff --git a/src/components/icons/CheckIcon.tsx b/src/components/icons/CheckIcon.tsx
new file mode 100644
index 0000000..546f4fc
--- /dev/null
+++ b/src/components/icons/CheckIcon.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IconProps {
+  className?: string;
+}
+
+
+
+export const CheckIcon: React.FC<IconProps> = ({ className }) => {
+  return (
+  <svg 
+
+  fill="none" 
+  stroke="currentColor" 
+  viewBox="0 0 24 24"
+  className={className} 
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+  </svg>
+  )
+}
+
+
+
+
+
+
diff --git a/src/components/icons/RefreshIcon.tsx b/src/components/icons/RefreshIcon.tsx
new file mode 100644
index 0000000..66e7401
--- /dev/null
+++ b/src/components/icons/RefreshIcon.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IconProps {
+  className?: string;
+}
+
+export const RefreshIcon: React.FC<IconProps> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#6F6F6F"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className} // Передача пропса сюда
+    >
+      <path d="M2.5 2v6h6" />
+      <path d="M21.5 22v-6h-6" />
+      <path d="M22 11.5A10 10 0 0 0 3.2 7.2" />
+      <path d="M2 12.5a10 10 0 0 0 18.8 4.2" />
+    </svg>
+  );
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ba992c9..52c4563 100644
--- a/src/index.css
+++ b/src/index.css
@@ -63,3 +63,8 @@
 		transform: translateX(100%);
 	}
 }
+
+
+.rotate-360 {
+  transform: rotate(160deg);
+}
\ No newline at end of file
diff --git a/src/pages/CourseExercises.tsx b/src/pages/CourseExercises.tsx
index 2794a06..0d92c4f 100644
--- a/src/pages/CourseExercises.tsx
+++ b/src/pages/CourseExercises.tsx
@@ -110,7 +110,7 @@ const history = useHistory();
 
         {/* Кнопки выбора дня */}
         {days.length > 1 && (
-          <div className="px-4 sm:px-6 mb-6">
+          <div className="mb-6">
             <div className="flex space-x-2 overflow-x-auto pb-2">
               {days.map((day) => (
                 <button
diff --git a/src/pages/Exercise.tsx b/src/pages/Exercise.tsx
index 5c1d9b0..e6956b3 100644
--- a/src/pages/Exercise.tsx
+++ b/src/pages/Exercise.tsx
@@ -3,6 +3,8 @@
 import { useState, useEffect } from "react"
 import { useHistory, useParams } from "react-router-dom"
 
+import { CheckIcon } from "../components/icons/CheckIcon"
+import { RefreshIcon } from "../components/icons/RefreshIcon"
 import BottomNavigation from "../components/BottomNavigation"
 import { getRouteCourseComplete } from "../shared/consts/router"
 import HeaderNav from "../components/HeaderNav"
@@ -38,7 +40,9 @@ export const Exercise = () => {
   const [currentTime, setCurrentTime] = useState(0)
   const [totalTime, setTotalTime] = useState(900) // Default 15 minutes
   const [currentSet, setCurrentSet] = useState(1)
+  const [isActive, setIsActive] = useState(false)
   const [totalSets, setTotalSets] = useState(3)
+  const [isRotating, setIsRotating] = useState(false)
 
   useEffect(() => {
     console.log("Course ID:", courseId)
@@ -123,6 +127,15 @@ export const Exercise = () => {
     }
   }, [isPlaying, totalTime, history])
 
+
+  const handleClick = () => {
+    setIsRotating(true);
+  }
+  const handleTransitionEnd = () => {
+    setIsRotating(false);
+  };
+
+
   // Функция для отправки прогресса на сервер
   const submitProgress = async () => {
     if (!courseId || !exerciseId) return
@@ -160,28 +173,7 @@ export const Exercise = () => {
     </svg>
   )
 
-  const RefreshIcon = () => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="#6F6F6F"
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M2.5 2v6h6M21.5 22v-6h-6" />
-      <path d="M22 11.5A10 10 0 0 0 3.2 7.2M2 12.5a10 10 0 0 0 18.8 4.2" />
-    </svg>
-  )
 
-  const CheckIcon = () => (
-    <svg className="w-6 h-6 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-    </svg>
-  )
 
   // Генерируем инструкции на основе реальных данных упражнения
   const exerciseSteps = [
@@ -318,7 +310,7 @@ export const Exercise = () => {
         </div>
 
         {/* Fixed Timer at Bottom */}
-        <div className="fixed bottom-36 left-0 right-0 bg-white opacity-95 border-t border-white/20 px-4 sm:px-6 py-4 shadow-2xl z-30">
+        <div className="fixed bottom-36 left-0 right-0 bg-white opacity-85 border-t border-white/20 px-4 sm:px-6 py-4 shadow-2xl z-30">
           <div className="max-w-md mx-auto">
             <div className="flex items-center justify-between mb-3">
               <div className="flex items-center space-x-2">
@@ -340,11 +332,10 @@ export const Exercise = () => {
             <div className="flex space-x-3">
               <button
                 onClick={() => setIsPlaying(!isPlaying)}
-                className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 ${
-                  isPlaying
-                    ? "bg-gray-400 text-white shadow-lg"
-                    : "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg"
-                }`}
+                className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 cursor-pointer ${isPlaying
+                  ? "bg-gray-400 text-white shadow-lg"
+                  : "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg"
+                  }`}
               >
                 {isPlaying ? (
                   <>
@@ -360,20 +351,50 @@ export const Exercise = () => {
                 onClick={() => {
                   setCurrentTime(0)
                   setIsPlaying(false)
+                  handleClick()
                 }}
-                className="px-6 py-3 bg-white text-gray-800 font-bold rounded-xl transition-all duration-300 hover:shadow-lg border border-gray-200 flex items-center justify-center"
+                className="cursor-pointer px-6 py-3 bg-white text-gray-800 font-bold rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg border border-gray-200 flex items-center justify-center"
+
               >
-                <RefreshIcon />
+
+                <div
+                  onTransitionEnd={handleTransitionEnd}
+                  className="inline-block">
+                  <RefreshIcon
+                    className={`transition-transform duration-400 ease-in-out ${isRotating ? 'rotate-360' : ''}`}
+                  />
+                </div>
+
               </button>
+
+
               <button
                 onClick={() => {
-                  setCurrentSet((prev) => Math.min(prev + 1, totalSets))
-                  submitProgress()
+
+                  const newSet = Math.min(currentSet + 1, totalSets);
+                  setCurrentSet(newSet);
                 }}
-                className="px-6 py-3 bg-white text-gray-800 font-bold rounded-xl transition-all duration-300 hover:shadow-lg border border-gray-200 flex items-center justify-center"
+
+                onMouseDown={() => setIsActive(true)}
+                onMouseUp={() => setIsActive(false)}
+                onMouseLeave={() => setIsActive(false)}
+
+                onTouchStart={() => setIsActive(true)}
+                onTouchEnd={() => setIsActive(false)}
+
+                className={`cursor-pointer px-6 py-3 font-bold rounded-xl transition-all duration-500 hover:scale-105 hover:shadow-lg border border-gray-200 flex items-center justify-center ${!isActive ? "bg-white text-cyan-500" : "bg-orange-400 text-white"}`}
               >
-                <CheckIcon />
+
+
+
+                <CheckIcon
+                  className="w-6 h-6"
+
+                />
               </button>
+
+
+
             </div>
           </div>
         </div>
diff --git a/src/shared/consts/router.ts b/src/shared/consts/router.ts
index 7aeb765..dc53b5e 100644
--- a/src/shared/consts/router.ts
+++ b/src/shared/consts/router.ts
@@ -5,6 +5,6 @@ export const getRouteForgotPassword = () => `/forgot-password`
 export const getRouteCourses = () => `/courses`
 export const getRouteCourseExercises = (id: number | string) => `/course/${id}`
 export const getRouteExercise = (courseId: number | string, exerciseId: number | string) =>
-  `/course/${courseId}/exercise/${exerciseId}`
+  `/course/${courseId}/${exerciseId}`
 export const getRouteSettings = () => `/settings`
 export const getRouteCourseComplete = () => `/course-complete`