From b919068dab1e9e2fa5aaf22aad159f7e314a9227 Mon Sep 17 00:00:00 2001 From: Tatyana Date: Mon, 11 Aug 2025 16:16:38 +0300 Subject: [PATCH] course_comlete --- src/pages/CourseComplete.tsx | 121 ++++++------------ src/pages/CourseExercises.tsx | 31 +++-- src/pages/Courses.tsx | 38 +++--- src/pages/Exercise.tsx | 231 ++++++++++++++++------------------ src/pages/Home.tsx | 4 +- src/pages/Login.tsx | 8 +- src/pages/Settings.tsx | 145 ++++++++++----------- src/pages/Welcome.tsx | 17 +-- src/pages/WelcomeOld.tsx | 79 ------------ 9 files changed, 252 insertions(+), 422 deletions(-) delete mode 100644 src/pages/WelcomeOld.tsx diff --git a/src/pages/CourseComplete.tsx b/src/pages/CourseComplete.tsx index cb32f4c..61f28e6 100644 --- a/src/pages/CourseComplete.tsx +++ b/src/pages/CourseComplete.tsx @@ -10,8 +10,8 @@ const CourseComplete: React.FC = () => { useEffect(() => { const timer1 = setTimeout(() => setAnimationPhase(1), 500) - const timer2 = setTimeout(() => setAnimationPhase(2), 1500) - const timer3 = setTimeout(() => setAnimationPhase(3), 2500) + const timer2 = setTimeout(() => setAnimationPhase(2), 1000) + const timer3 = setTimeout(() => setAnimationPhase(3), 1500) return () => { clearTimeout(timer1) @@ -24,108 +24,56 @@ const CourseComplete: React.FC = () => { +
+ {/* Basket Animation */} +
+
+ + + - -
- {/* Background Animation */} -
-
-
-
+
+
= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-translate-y-10 scale-0" : "opacity-100 translate-y-0 scale-80"}`} +> + + +
{/* Main Content */}
- {/* Volleyball Animation */} -
- {/* Net */} -
= 1 ? "opacity-100" : "opacity-0" - }`} - > -
-
- {Array.from({ length: 8 }).map((_, i) => ( -
- ))} -
-
- {Array.from({ length: 4 }).map((_, i) => ( -
- ))} -
-
-
+ {/* Ball */} +
= 1 ? "opacity-100 -translate-y-1/2 scale-15 translate-x-5" : "opacity-0 translate-y-60 scale-80 -translate-x-60" + } ${animationPhase >= 2 ? "opacity-100 translate-y-400 scale-15" : "opacity-100 -translate-y-100 scale-15"} ` } + > - {/* Volleyball */} -
= 2 - ? "bottom-8 left-1/2 transform -translate-x-1/2 scale-75" - : "bottom-32 left-8 scale-100" - }`} - > -
= 2 ? "animate-bounce" : "" - }`} - > - 🏐 -
-
+ + + - {/* Success particles */} - {animationPhase >= 3 && ( -
-
⭐
-
✨
-
🎉
-
🏆
-
- )}
{/* Congratulations */}
= 2 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4" - }`} + className={`transition-all duration-1000 delay-500 ${animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4" + }`} > -

Поздравляем! 🎉

-

Вы успешно завершили курс

-

"Восстановление колена"

+

Поздравляем!

+

Вы успешно завершили курс

+
- {/* Stats */} -
= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4" - }`} - > -
-
-
12
-
Упражнений
-
-
-
4
-
Недели
-
-
-
100%
-
Завершено
-
-
-
+ {/* Action Buttons */}
= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4" - }`} + className={`space-y-4 transition-all duration-1000 delay-1500 ${animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4" + }`} >
-
+
+
) } diff --git a/src/pages/CourseExercises.tsx b/src/pages/CourseExercises.tsx index 075ba24..de1c9b3 100644 --- a/src/pages/CourseExercises.tsx +++ b/src/pages/CourseExercises.tsx @@ -14,7 +14,11 @@ const CourseExercises: React.FC = () => { - const exercises = [ +const course = { + id: 2, + description: 'Очень сильно', + name: 'Качаем ноги', + exercises: [ { id: 1, name: "Подъемы ног лежа", @@ -59,17 +63,17 @@ const CourseExercises: React.FC = () => { description: "Развитие силы и выносливости икроножных мышц", calories: 40, }, - ] + ]} // Функции для переключения на следующее/предыдущее упражнение const nextExercise = () => { - setCurrentSlide((prev) => (prev + 1) % exercises.length) + setCurrentSlide((prev) => (prev + 1) % course.exercises.length) } const prevExercise = () => { - setCurrentSlide((prev) => (prev - 1 + exercises.length) % exercises.length) + setCurrentSlide((prev) => (prev - 1 + course.exercises.length) % course.exercises.length) } - const currentExercise = exercises[currentSlide] + const currentExercise = course.exercises[currentSlide] const getDifficultyColor = (difficulty: string) => { switch (difficulty) { @@ -91,7 +95,7 @@ const CourseExercises: React.FC = () => {
- + @@ -101,7 +105,7 @@ const CourseExercises: React.FC = () => { {/* Exercise Image */}
{currentExercise.name} @@ -136,14 +140,7 @@ const CourseExercises: React.FC = () => { - {/* Play Button Overlay */} -
-
- - - -
-
+
{/* Exercise Info */} @@ -163,7 +160,7 @@ const CourseExercises: React.FC = () => { {/* Slide indicators */}
- {exercises.map((_, index) => ( + {course.exercises.map((_, index) => ( + {/* Video/Image Section */} +
+
+
+ Exercise demonstration +
+
+ +
+ {/* Live indicators */} + {isPlaying && ( +
+
+ + Выполнение + +
+ )} + {/* Timer Display */} +
+ {formatTime(currentTime)} +
- {/* Live indicators */} - {isPlaying && ( -
-
- - Выполнение +
+
+ {/* Exercise Steps - Vertical Scroll */} +
+ {exerciseSteps.map((step, index) => ( +
+
+ +
+

{step.title}

+

{step.description}

+
+
+
+ ))} +
+ + {/* Fixed Timer at Bottom */} +
+
+
+
+
+ + Подход {currentSet} из {totalSets}
- )} - {/* Timer Display */} -
- {formatTime(currentTime)} -
-
-
-
- {/* Exercise Steps - Vertical Scroll */} -
- {exerciseSteps.map((step, index) => ( -
-
-
- {step.icon} -
-
-

{step.title}

-

{step.description}

-
-
-
- ))} -
- - {/* Fixed Timer at Bottom */} -
-
-
-
-
- - Подход {currentSet} из {totalSets} + + {formatTime(currentTime)} / {formatTime(totalTime)}
- - {formatTime(currentTime)} / {formatTime(totalTime)} - -
-
-
-
-
- - - + }`} + > + {isPlaying ? ( + <> + Пауза + + ) : ( + <> + Начать + + )} + + + +
+
- -
) } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2371ae2..b8dcf68 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -115,7 +115,7 @@ export default function Home() { {/* Основной блок с иконками и прогрессом */}
{/* Иконка часов */} -
+
{/* Clock SVG */} @@ -131,7 +131,7 @@ export default function Home() {
{/* Информация о упражнении */} -
+

В процессе

Текущее упражнение

{/* Кнопка с стрелкой */} diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 65c74fc..f169d39 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -49,7 +49,7 @@ export default function LoginPage() { return (
-
+
{/* Header Section */}
@@ -64,11 +64,11 @@ export default function LoginPage() { {/* Login/Register Form Container */}
{/* Tab Buttons Container */} -
+
+
+
- - - - - {/* Logout Button */} -
- -
- -
) } diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index ffc9518..6962a16 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -48,15 +48,15 @@ export default function Welcome() { -const router = useIonRouter() + const router = useIonRouter() - useEffect(() => { - const timer = setTimeout(() => { - router.push("/home", "forward") - }, 5000) // Задержка 3 секунды + useEffect(() => { + const timer = setTimeout(() => { + router.push("/home", "forward") + }, 5000) // Задержка 3 секунды - return () => clearTimeout(timer) - }, [router]) + return () => clearTimeout(timer) + }, [router]) return ( @@ -154,6 +154,7 @@ const router = useIonRouter() {/* Левая рука (смотрит вниз) - THIS IS THE TOSSING ARM AFTER MIRRORING */} {/* Wrapped in a new group for counter-rotation */} + = 3 ? 'tossing-arm-counter-rotate' : ''}`}> + {/* Правая рука (волнообразная вверх) - This arm will remain static after growth */} = 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */ /> + {/* Ball - now a separate div for absolute positioning */}
{ - const timer1 = setTimeout(() => setAnimationPhase(1), 500) - const timer2 = setTimeout(() => setAnimationPhase(2), 1500) - const timer3 = setTimeout(() => setAnimationPhase(3), 2500) - // const timer4 = setTimeout(() => history.push("/login"), 4000) // Uncomment if you want auto-redirect - - return () => { - clearTimeout(timer1) - clearTimeout(timer2) - clearTimeout(timer3) - // clearTimeout(timer4) - } - }, [history]) - - return ( -
- Man illustration - {/* Uncomment and update path for emblemImage if needed */} - {/* Emblem */} -
- {/* Floating particles */} -
-
-
-
-
-
- {/* Main Content */} -
-
- {/* App Name */} -
= 1 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8" - }`} - > -

Реабилитация

-

Восстановление через движение

-
- {/* Loading indicator */} -
= 1 ? "opacity-100" : "opacity-0" - }`} - > -
-
-
-

Загрузка...

-
-
-
-
-
- ) -}