Tatyana/Rehab_React_Vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

course_comlete

Browse Source
This commit is contained in:
Tatyana 2025-08-11 16:16:38 +03:00
parent c60ebc7b60
commit b919068dab
9 changed files with 252 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/pages/CourseComplete.tsx
View File

@ -10,8 +10,8 @@ const CourseComplete: React.FC = () => {
useEffect(() => { useEffect(() => {
const timer1 = setTimeout(() => setAnimationPhase(1), 500) const timer1 = setTimeout(() => setAnimationPhase(1), 500)
const timer2 = setTimeout(() => setAnimationPhase(2), 1500) const timer2 = setTimeout(() => setAnimationPhase(2), 1000)
const timer3 = setTimeout(() => setAnimationPhase(3), 2500) const timer3 = setTimeout(() => setAnimationPhase(3), 1500)
return () => { return () => {
clearTimeout(timer1) clearTimeout(timer1)
@ -24,108 +24,56 @@ const CourseComplete: React.FC = () => {
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center">
{/* Basket Animation */}
<div className="min-h-screen p-4 relative overflow-hidden max-w-4xl mx-auto">
<div className="absolute inset-0 flex items-start justify-center top-30">
<svg xmlns="http://www.w3.org/2000/svg" width="218" height="159" viewBox="0 0 218 159" fill="none">
<path d="M197.875 0.625H20.125C14.887 0.625 9.86348 2.7058 6.15964 6.40964C2.4558 10.1135 0.375 15.137 0.375 20.375V138.875C0.375 144.113 2.4558 149.137 6.15964 152.84C9.86348 156.544 14.887 158.625 20.125 158.625H39.875V119.125H178.125V158.625H197.875C203.113 158.625 208.137 156.544 211.84 152.84C215.544 149.137 217.625 144.113 217.625 138.875V20.375C217.625 15.137 215.544 10.1135 211.84 6.40964C208.137 2.7058 203.113 0.625 197.875 0.625ZM158.375 99.375H138.625V69.75H79.375V99.375H59.625V69.75C59.625 64.512 61.7058 59.4885 65.4096 55.7846C69.1135 52.0808 74.137 50 79.375 50H138.625C143.863 50 148.887 52.0808 152.59 55.7846C156.294 59.4885 158.375 64.512 158.375 69.75V99.375Z" fill="#1A6974" />
</svg>
</div>
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center p-4 relative overflow-hidden max-w-4xl mx-auto"> <div
{/* Background Animation */} className={`absolute inset-0 flex items-start justify-center top-50 transition-all duration-500 delay-100 ${
<div className="absolute inset-0"> animationPhase >= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-translate-y-10 scale-0" : "opacity-100 translate-y-0 scale-80"}`}
<div className="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div> >
<div className="absolute bottom-32 right-16 w-16 h-16 bg-white/10 rounded-full animate-bounce"></div> <svg xmlns="http://www.w3.org/2000/svg" width="120" height="70" viewBox="0 0 99 70" fill="none">
<div className="absolute top-1/2 left-1/4 w-12 h-12 bg-white/10 rounded-full animate-ping"></div> <path d="M94.25 4.5V33.9307L86.6484 60.5352L72.3066 46.1934L69.125 43.0107L65.9434 46.1934L49.375 62.7617L32.8066 46.1934L29.625 43.0107L26.4434 46.1934L12.1006 60.5352L4.5 33.9307V4.5H94.25Z" stroke="#1A6974" stroke-width="9" />
</svg>
</div> </div>
{/* Main Content */} {/* Main Content */}
<div className="text-center z-10 max-w-md"> <div className="text-center z-10 max-w-md">
{/* Volleyball Animation */} {/* Ball */}
<div className="relative mb-8 h-40"> <div
{/* Net */} className={`transition-all duration-500 delay-100 opacity-0 ${animationPhase >= 1 ? "opacity-100 -translate-y-1/2 scale-15 translate-x-5" : "opacity-0 translate-y-60 scale-80 -translate-x-60"
<div } ${animationPhase >= 2 ? "opacity-100 translate-y-400 scale-15" : "opacity-100 -translate-y-100 scale-15"} ` }
className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 transition-all duration-1000 ${ >
animationPhase >= 1 ? "opacity-100" : "opacity-0"
}`}
>
<div className="w-32 h-20 border-2 border-white/60 border-b-0">
<div className="grid grid-cols-8 h-full">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="border-r border-white/40 last:border-r-0"></div>
))}
</div>
<div className="grid grid-rows-4 h-full absolute inset-0">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="border-b border-white/40 last:border-b-0"></div>
))}
</div>
</div>
</div>
{/* Volleyball */} <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 50 50" fill="none">
<div <rect width="50" height="50" rx="25" fill="#FF8D28" />
className={`absolute transition-all duration-2000 ${ </svg>
animationPhase >= 2
? "bottom-8 left-1/2 transform -translate-x-1/2 scale-75"
: "bottom-32 left-8 scale-100"
}`}
>
<div
className={`w-16 h-16 rounded-full bg-white flex items-center justify-center text-2xl shadow-lg ${
animationPhase >= 2 ? "animate-bounce" : ""
}`}
>
🏐
</div>
</div>
{/* Success particles */}
{animationPhase >= 3 && (
<div className="absolute inset-0">
<div className="absolute top-4 left-8 animate-ping">⭐</div>
<div className="absolute top-8 right-12 animate-pulse">✨</div>
<div className="absolute bottom-16 left-16 animate-bounce">🎉</div>
<div className="absolute bottom-12 right-8 animate-ping">🏆</div>
</div>
)}
</div> </div>
{/* Congratulations */} {/* Congratulations */}
<div <div
className={`transition-all duration-1000 delay-500 ${ className={`transition-all duration-1000 delay-500 ${animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4"
animationPhase >= 2 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4" }`}
}`}
> >
<h1 className="text-4xl font-bold text-white mb-4">Поздравляем! 🎉</h1> <h1 className="text-4xl font-bold text-white mb-2">Поздравляем! </h1>
<p className="text-white/90 text-lg mb-2">Вы успешно завершили курс</p> <p className="text-white/90 text-lg mb-6">Вы успешно завершили курс</p>
<p className="text-white/80 text-xl font-semibold mb-6">"Восстановление колена"</p>
</div> </div>
{/* Stats */}
<div
className={`bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 mb-8 transition-all duration-1000 delay-1000 ${
animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
}`}
>
<div className="grid grid-cols-3 gap-4 text-center">
<div>
<div className="text-2xl font-bold text-white">12</div>
<div className="text-white/70 text-sm">Упражнений</div>
</div>
<div>
<div className="text-2xl font-bold text-white">4</div>
<div className="text-white/70 text-sm">Недели</div>
</div>
<div>
<div className="text-2xl font-bold text-white">100%</div>
<div className="text-white/70 text-sm">Завершено</div>
</div>
</div>
</div>
{/* Action Buttons */} {/* Action Buttons */}
<div <div
className={`space-y-4 transition-all duration-1000 delay-1500 ${ className={`space-y-4 transition-all duration-1000 delay-1500 ${animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
animationPhase >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4" }`}
}`}
> >
<button <button
onClick={() => history.push("/courses")} onClick={() => history.push("/courses")}
@ -141,7 +89,8 @@ const CourseComplete: React.FC = () => {
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div >
) )
} }

31
src/pages/CourseExercises.tsx
View File

@ -14,7 +14,11 @@ const CourseExercises: React.FC = () => {
const exercises = [ const course = {
id: 2,
description: 'Очень сильно',
name: 'Качаем ноги',
exercises: [
{ {
id: 1, id: 1,
name: "Подъемы ног лежа", name: "Подъемы ног лежа",
@ -59,17 +63,17 @@ const CourseExercises: React.FC = () => {
description: "Развитие силы и выносливости икроножных мышц", description: "Развитие силы и выносливости икроножных мышц",
calories: 40, calories: 40,
}, },
] ]}
// Функции для переключения на следующее/предыдущее упражнение // Функции для переключения на следующее/предыдущее упражнение
const nextExercise = () => { const nextExercise = () => {
setCurrentSlide((prev) => (prev + 1) % exercises.length) setCurrentSlide((prev) => (prev + 1) % course.exercises.length)
} }
const prevExercise = () => { 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) => { const getDifficultyColor = (difficulty: string) => {
switch (difficulty) { switch (difficulty) {
@ -91,7 +95,7 @@ const CourseExercises: React.FC = () => {
<div className="bg-gray-50 w-full h-full overflow-auto"> <div className="bg-gray-50 w-full h-full overflow-auto">
<div className="my-32 min-h-screen max-w-4xl mx-auto"> <div className="my-32 min-h-screen max-w-4xl mx-auto">
<HeaderNav item={currentExercise.name} text='упражнение' /> <HeaderNav item={course.name} text={course.description} />
@ -101,7 +105,7 @@ const CourseExercises: React.FC = () => {
{/* Exercise Image */} {/* Exercise Image */}
<div className="relative"> <div className="relative">
<img <img
src={" /src/assets/exersise.png" || currentExercise.image } src={ currentExercise.image || "/src/assets/exersise.png" }
alt={currentExercise.name} alt={currentExercise.name}
className="w-auto h-56 sm:h-64 object-cover mx-auto" className="w-auto h-56 sm:h-64 object-cover mx-auto"
/> />
@ -136,14 +140,7 @@ const CourseExercises: React.FC = () => {
</button> </button>
{/* Play Button Overlay */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-20 h-20 bg-white/90 backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl hover:bg-white transition-all duration-300 transform hover:scale-110 border border-white/50">
<svg className="w-8 h-8 text-gray-800 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
</div> </div>
{/* Exercise Info */} {/* Exercise Info */}
@ -163,7 +160,7 @@ const CourseExercises: React.FC = () => {
{/* Slide indicators */} {/* Slide indicators */}
<div className="flex justify-center mt-6 space-x-2"> <div className="flex justify-center mt-6 space-x-2">
{exercises.map((_, index) => ( {course.exercises.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => setCurrentSlide(index)} onClick={() => setCurrentSlide(index)}
@ -180,7 +177,7 @@ const CourseExercises: React.FC = () => {
<div className="px-4 sm:px-6 mb-50"> <div className="px-4 sm:px-6 mb-50">
<h2 className="text-xl sm:text-2xl font-semibold 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"> <div className="space-y-4">
{exercises.map((exercise, index) => ( {course.exercises.map((exercise, index) => (
<div <div
key={exercise.id} key={exercise.id}
onClick={() => history.push(`/exercise/${exercise.id}`)} onClick={() => history.push(`/exercise/${exercise.id}`)}

38
src/pages/Courses.tsx
View File

@ -14,35 +14,35 @@ const Home: React.FC = () => {
{ id: 2, name: "Укрепление спины", progress: 45, color: "from-[#5F5C5C] to-[#5F5C5C]/80" }, { id: 2, name: "Укрепление спины", progress: 45, color: "from-[#5F5C5C] to-[#5F5C5C]/80" },
{ id: 3, name: "Реабилитация плеча", progress: 90, color: "from-[#2BACBE]/80 to-[#5F5C5C]" }, { id: 3, name: "Реабилитация плеча", progress: 90, color: "from-[#2BACBE]/80 to-[#5F5C5C]" },
]; ];
return ( return (
<div className="my-32 min-h-screen max-w-4xl mx-auto"> <div className="my-32 min-h-screen max-w-4xl mx-auto">
<HeaderNav item='Курсы' text='все назначенные'/> <HeaderNav item='Курсы' text='все назначенные' />
{/* Analytics Cards */} {/* Analytics Cards */}
<div className="px-6 mb-8"> <div className="px-6 mb-8">
<div className="text-center relative "> <div className="text-center relative ">
<div className="w-full h-14 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
{/* Прогрессная часть */}
<div
className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
style={{ width: '85%' }}
></div>
{/* Текст поверх линии */}
<div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
</div>
</div>
<div className="w-full h-14 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
{/* Прогрессная часть */}
<div
className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
style={{ width: '85%' }}
></div>
{/* Текст поверх линии */}
<div className="absolute text-white font-semibold text-xl">Вы прошли реабилитацию на {85}%</div>
</div> </div>
</div>
</div>

231
src/pages/Exercise.tsx
View File

@ -44,23 +44,7 @@ const Exercise: React.FC = () => {
const progress = (currentTime / totalTime) * 100 const progress = (currentTime / totalTime) * 100
// SVG Icons
const BackIcon = () => (
<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>
)
const HeartIcon = () => (
<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>
)
const PlayIcon = () => ( const PlayIcon = () => (
<svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24"> <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
@ -89,29 +73,24 @@ const Exercise: React.FC = () => {
title: "Исходное положение", title: "Исходное положение",
description: description:
"Лягте на спирку на коврик. Руки вдоль тела, ладони прижаты к полу. Ноги выпрямлены, носки направлены вверх. Поясница плотно прижата к полу.", "Лягте на спирку на коврик. Руки вдоль тела, ладони прижаты к полу. Ноги выпрямлены, носки направлены вверх. Поясница плотно прижата к полу.",
icon: "1",
}, },
{ {
title: "Задание", title: "Задание",
description: description:
"Медленно поднимите прямые ноги до угла 90 градусов. Задержитесь на 2 секунды, затем медленно опустите ноги, не касаясь пола. Повторите движение плавно и контролируемо.", "Медленно поднимите прямые ноги до угла 90 градусов. Задержитесь на 2 секунды, затем медленно опустите ноги, не касаясь пола. Повторите движение плавно и контролируемо.",
icon: "2",
}, },
{ {
title: "Подходы", title: "Подходы",
description: "Выполните 3 подхода по 12 повторений с отдыхом 60 секунд между подходами.", description: "Выполните 3 подхода по 12 повторений с отдыхом 60 секунд между подходами.",
icon: "3",
}, },
{ {
title: "Перерыв", title: "Перерыв",
description: "Отдыхайте 60 секунд между подходами. Дышите спокойно и расслабьте мышцы.", description: "Отдыхайте 60 секунд между подходами. Дышите спокойно и расслабьте мышцы.",
icon: "4",
}, },
{ {
title: "Динамика и статика", title: "Динамика и статика",
description: description:
"Динамическая фаза: подъем и опускание ног выполняется плавно, 2 секунды вверх, 2 секунды вниз. Статическая фаза: удержание ног в верхней точке на 2 секунды.", "Динамическая фаза: подъем и опускание ног выполняется плавно, 2 секунды вверх, 2 секунды вниз. Статическая фаза: удержание ног в верхней точке на 2 секунды.",
icon: "5",
}, },
] ]
@ -120,125 +99,125 @@ const Exercise: React.FC = () => {
<div className="bg-gray-50 w-full h-full overflow-auto"> <div className="bg-gray-50 w-full h-full overflow-auto">
<div className="mt-32 mb-60 min-h-screen max-w-4xl mx-auto"> <div className="mt-32 mb-60 min-h-screen max-w-4xl mx-auto">
<HeaderNav item='Надо разобраться?' text='упражнение'/> <HeaderNav item='Надо разобраться?' text='упражнение' />
{/* Video/Image Section */} {/* Video/Image Section */}
<div className="px-4 sm:px-6 mt-10 mb-6"> <div className="px-4 sm:px-6 mt-10 mb-6">
<div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl"> <div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl">
<div className="relative"> <div className="relative">
<img <img
src="/placeholder.svg?height=250&width=400" src="/placeholder.svg?height=250&width=400"
alt="Exercise demonstration" alt="Exercise demonstration"
className="w-full h-56 sm:h-64 object-cover" className="w-full h-56 sm:h-64 object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-black/10"></div> <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-black/10"></div>
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<button <button
onClick={() => setIsPlaying(!isPlaying)} onClick={() => setIsPlaying(!isPlaying)}
className="w-20 h-20 bg-orange-400 backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl hover:bg-gray-400 transition-all duration-300 transform hover:scale-110 border border-cyan-50" className={
> isPlaying
{isPlaying ? <PauseIcon /> : <PlayIcon />} ? "w-20 h-20 bg-transparent backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 transform hover:scale-110 border border-cyan-50"
</button> : "rounded-full bg-orange-400 w-20 h-20 flex items-center justify-center"
}
>
{isPlaying ? <PauseIcon /> : <PlayIcon />}
</button>
</div>
{/* Live indicators */}
{isPlaying && (
<div className="absolute top-4 left-4 flex items-center space-x-2">
<div className="w-3 h-3 bg-orange-500 rounded-full animate-pulse "></div>
<span className="text-white text-sm font-bold bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm">
Выполнение
</span>
</div>
)}
{/* Timer Display */}
<div className="absolute top-4 right-4 bg-cyan-50 backdrop-blur-sm px-3 py-1 rounded-xl">
<span className="text-gray-800 text-sm font-bold">{formatTime(currentTime)}</span>
</div>
</div> </div>
{/* Live indicators */} </div>
{isPlaying && ( </div>
<div className="absolute top-4 left-4 flex items-center space-x-2"> {/* Exercise Steps - Vertical Scroll */}
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div> <div className="px-4 sm:px-6 space-y-4 mb-6">
<span className="text-white text-sm font-bold bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"> {exerciseSteps.map((step, index) => (
Выполнение <div
key={index}
className="bg-white rounded-2xl p-5 border border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300"
>
<div className="flex items-start space-x-4">
<div>
<h3 className="text-lg font-black text-gray-800 mb-2">{step.title}</h3>
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">{step.description}</p>
</div>
</div>
</div>
))}
</div>
{/* Fixed Timer at Bottom */}
<div className="fixed bottom-32 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="max-w-md mx-auto">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span className="text-sm font-bold text-gray-700">
Подход {currentSet} из {totalSets}
</span> </span>
</div> </div>
)} <span className="text-sm font-black text-gray-700">
{/* Timer Display */} {formatTime(currentTime)} / {formatTime(totalTime)}
<div className="absolute top-4 right-4 bg-cyan-50 backdrop-blur-sm px-3 py-1 rounded-xl">
<span className="text-gray-800 text-sm font-bold">{formatTime(currentTime)}</span>
</div>
</div>
</div>
</div>
{/* Exercise Steps - Vertical Scroll */}
<div className="px-4 sm:px-6 space-y-4 mb-6">
{exerciseSteps.map((step, index) => (
<div
key={index}
className="bg-white rounded-2xl p-5 border border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300"
>
<div className="flex items-start space-x-4">
<div
className={`w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center shadow-sm flex-shrink-0 text-[#2BACBE] font-black text-xl border border-gray-200`}
>
{step.icon}
</div>
<div>
<h3 className="text-lg font-black text-gray-800 mb-2">{step.title}</h3>
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">{step.description}</p>
</div>
</div>
</div>
))}
</div>
{/* Fixed Timer at Bottom */}
<div className="fixed bottom-36 left-0 right-0 glass-morphism 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">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span className="text-sm font-bold text-gray-700">
Подход {currentSet} из {totalSets}
</span> </span>
</div> </div>
<span className="text-sm font-black text-gray-700"> <div className="bg-white/30 rounded-full h-3 mb-4 overflow-hidden">
{formatTime(currentTime)} / {formatTime(totalTime)} <div
</span> className="bg-gradient-to-r from-[#2BACBE] via-cyan-500 to-cyan-700 h-3 rounded-full transition-all duration-1000 shadow-sm"
</div> style={{ width: `${progress}%` }}
<div className="bg-white/30 rounded-full h-3 mb-4 overflow-hidden"> ></div>
<div </div>
className="bg-gradient-to-r from-[#2BACBE] via-cyan-500 to-cyan-700 h-3 rounded-full transition-all duration-1000 shadow-sm" <div className="flex space-x-3">
style={{ width: `${progress}%` }} <button
></div> onClick={() => setIsPlaying(!isPlaying)}
</div> 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
<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-gray-400 text-white shadow-lg"
: "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg" : "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg"
}`} }`}
> >
{isPlaying ? ( {isPlaying ? (
<> <>
<PauseIcon /> <span>Пауза</span> <PauseIcon /> <span>Пауза</span>
</> </>
) : ( ) : (
<> <>
<PlayIcon /> <span>Начать</span> <PlayIcon /> <span>Начать</span>
</> </>
)} )}
</button> </button>
<button <button
onClick={() => { onClick={() => {
setCurrentTime(0) setCurrentTime(0)
setIsPlaying(false) setIsPlaying(false)
}} }}
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="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"
> >
<RefreshIcon /> <RefreshIcon />
</button> </button>
<button <button
onClick={() => setCurrentSet((prev) => Math.min(prev + 1, totalSets))} onClick={() => setCurrentSet((prev) => Math.min(prev + 1, totalSets))}
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="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"
> >
<CheckIcon /> <CheckIcon />
</button> </button>
</div>
</div> </div>
</div> </div>
<BottomNavigation />
</div> </div>
<BottomNavigation />
</div>
</div> </div>
) )
} }

4
src/pages/Home.tsx
View File

@ -115,7 +115,7 @@ export default function Home() {
{/* Основной блок с иконками и прогрессом */} {/* Основной блок с иконками и прогрессом */}
<div className="flex items-start flex-wrap space-x-4 mb-6"> <div className="flex items-start flex-wrap space-x-4 mb-6">
{/* Иконка часов */} {/* Иконка часов */}
<div className="relative flex-shrink-0"> <div className="relative flex-shrink-0 mr-6">
<div className="w-20 h-20 bg-white/70 rounded-2xl flex items-center justify-center shadow-xl transition-transform hover:scale-105 duration-300"> <div className="w-20 h-20 bg-white/70 rounded-2xl flex items-center justify-center shadow-xl transition-transform hover:scale-105 duration-300">
{/* Clock SVG */} {/* Clock SVG */}
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20" fill="none">
@ -131,7 +131,7 @@ export default function Home() {
</div> </div>
</div> </div>
{/* Информация о упражнении */} {/* Информация о упражнении */}
<div className="flex flex-col justify-center ml-4 flex-grow"> <div className="flex flex-col justify-center flex-grow">
<h3 className="font-extrabold text-lg mb-2">В процессе</h3> <h3 className="font-extrabold text-lg mb-2">В процессе</h3>
<p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p> <p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p>
{/* Кнопка с стрелкой */} {/* Кнопка с стрелкой */}

8
src/pages/Login.tsx
View File

@ -49,7 +49,7 @@ export default function LoginPage() {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center p-4"> <div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center p-4">
<div className="bg-white h-[55%] w-full z-0 absolute bottom-0"></div> <div className="bg-white h-[58%] w-full z-0 absolute bottom-0"></div>
<div className="relative z-10 w-full max-w-md"> <div className="relative z-10 w-full max-w-md">
{/* Header Section */} {/* Header Section */}
<div className="flex items-center justify-center gap-4 mb-8"> <div className="flex items-center justify-center gap-4 mb-8">
@ -64,11 +64,11 @@ export default function LoginPage() {
{/* Login/Register Form Container */} {/* Login/Register Form Container */}
<div className="glass-morphism rounded-3xl p-8 border border-white/20 shadow-2xl"> <div className="glass-morphism rounded-3xl p-8 border border-white/20 shadow-2xl">
{/* Tab Buttons Container */} {/* Tab Buttons Container */}
<div className="flex justify-center gap-4 mb-8 bg-white/10 backdrop-blur-lg rounded-xl px-4 py-2 shadow-inner"> <div className="flex justify-center gap-2 mb-8 bg-white/10 backdrop-blur-lg rounded-xl px-2 py-2 shadow-inner">
<button <button
type="button" type="button"
onClick={() => setActiveTab("login")} onClick={() => setActiveTab("login")}
className={`flex-1 px-8 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${ className={`flex-1 px-3 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
activeTab === "login" activeTab === "login"
? "bg-white text-gray-800 shadow-lg" ? "bg-white text-gray-800 shadow-lg"
: "text-white/80 hover:text-white hover:bg-white/10" : "text-white/80 hover:text-white hover:bg-white/10"
@ -79,7 +79,7 @@ export default function LoginPage() {
<button <button
type="button" type="button"
onClick={() => setActiveTab("register")} onClick={() => setActiveTab("register")}
className={`flex-1 px-8 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${ className={`flex-1 px-3 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
activeTab === "register" activeTab === "register"
? "bg-white text-gray-800 shadow-lg" ? "bg-white text-gray-800 shadow-lg"
: "text-white/80 hover:text-white hover:bg-white/10" : "text-white/80 hover:text-white hover:bg-white/10"

145
src/pages/Settings.tsx
View File

@ -13,10 +13,10 @@ const Settings: React.FC = () => {
} }
return ( return (
<div className=" bg-gray-50 min-h-screen max-w-4xl mx-auto pb-50" style={{ overflow: 'auto' }}> <div className=" bg-gray-50 min-h-screen mx-auto pb-50" style={{ overflow: 'auto' }}>
{/* Header */} {/* Header */}
<div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-20 pb-16"> <div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-20 pb-16 w-full ">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4 max-w-4xl mx-auto">
<div> <div>
<h1 className="text-2xl font-bold text-white">Настройки</h1> <h1 className="text-2xl font-bold text-white">Настройки</h1>
<p className="text-gray-300">Профиль пациента</p> <p className="text-gray-300">Профиль пациента</p>
@ -29,92 +29,73 @@ const Settings: React.FC = () => {
</div> </div>
</div> </div>
{/* Profile Information */} <div className=" max-w-4xl mx-auto">
<div className="px-4 -mt-6 mb-6"> {/* Profile Information */}
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism"> <div className="px-4 -mt-6 mb-6 ">
<h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2> <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"> <div className="space-y-4">
<div>
<div> <label className="block text-sm font-medium text-gray-600 mb-1">Логин</label>
<label className="block text-sm font-medium text-gray-600 mb-1">Email</label> <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200"> <span className="text-gray-800">alex_petrov</span>
<span className="text-gray-800">alexander.petrov@email.com</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Логин</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<span className="text-gray-800">alex_petrov</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Дата регистрации</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<span className="text-gray-800">15 марта 2024</span>
</div>
</div>
</div>
</div>
</div>
{/* Medical Information */}
<div className="px-4 mb-6">
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg ">
<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-gray-50 rounded-lg p-3 border border-gray-200">
<p className="text-gray-800 text-sm leading-relaxed">
Повреждение передней крестообразной связки левого колена. Получена во время игры в футбол 12 февраля
2024 года. Проведена артроскопическая операция 20 февраля 2024 года.
</p>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Лечащий врач</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<span className="text-gray-800">Доктор Иванов И.И.</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Стадия восстановления</label>
<div className="bg-cyan-50 rounded-lg p-3 border border-cyan-200">
<div className="flex items-center justify-between">
<span className="text-cyan-800 font-medium">Активная реабилитация</span>
<span className="text-cyan-600 text-sm">75% завершено</span>
</div> </div>
<div className="mt-2 bg-cyan-200 rounded-full h-2"> </div>
<div className="bg-cyan-500 h-2 rounded-full" style={{ width: "75%" }}></div> <div>
<label className="block text-sm font-medium text-gray-600 mb-1">Дата регистрации</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<span className="text-gray-800">15 марта 2024</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Medical Information */}
<div className="px-4 mb-6">
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg ">
<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-gray-50 rounded-lg p-3 border border-gray-200">
<p className="text-gray-800 text-sm leading-relaxed">
Повреждение передней крестообразной связки левого колена. Получена во время игры в футбол 12 февраля
2024 года. Проведена артроскопическая операция 20 февраля 2024 года.
</p>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Лечащий врач</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<span className="text-gray-800">Доктор Иванов И.И.</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Стадия восстановления</label>
<div className="bg-cyan-50 rounded-lg p-3 border border-cyan-200">
<div className="flex items-center justify-between">
<span className="text-cyan-800 font-medium">Активная реабилитация</span>
<span className="text-cyan-600 text-sm">75% завершено</span>
</div>
<div className="mt-2 bg-cyan-200 rounded-full h-2">
<div className="bg-cyan-500 h-2 rounded-full" style={{ width: "75%" }}></div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Logout Button */}
<div className="px-4 mb-8">
<button
onClick={handleLogout}
className="w-full bg-gray-400 hover:bg-gray-500 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-200 transform hover:scale-105 shadow-lg"
>
Выйти из аккаунта
</button>
</div>
<BottomNavigation />
</div> </div>
{/* Logout Button */}
<div className="px-4 mb-8">
<button
onClick={handleLogout}
className="w-full bg-gray-400 hover:bg-gray-500 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-200 transform hover:scale-105 shadow-lg"
>
Выйти из аккаунта
</button>
</div>
<BottomNavigation />
</div> </div>
) )
} }

17
src/pages/Welcome.tsx
View File

@ -48,15 +48,15 @@ export default function Welcome() {
const router = useIonRouter() const router = useIonRouter()
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
router.push("/home", "forward") router.push("/home", "forward")
}, 5000) // Задержка 3 секунды }, 5000) // Задержка 3 секунды
return () => clearTimeout(timer) return () => clearTimeout(timer)
}, [router]) }, [router])
return ( return (
@ -154,6 +154,7 @@ const router = useIonRouter()
<rect x={24} y={20} width={16} height={24} fill="#1A3A4A" rx={2} /> <rect x={24} y={20} width={16} height={24} fill="#1A3A4A" rx={2} />
{/* Левая рука (смотрит вниз) - THIS IS THE TOSSING ARM AFTER MIRRORING */} {/* Левая рука (смотрит вниз) - THIS IS THE TOSSING ARM AFTER MIRRORING */}
{/* Wrapped in a new group for counter-rotation */} {/* Wrapped in a new group for counter-rotation */}
<g className={`${animationPhase >= 3 ? 'tossing-arm-counter-rotate' : ''}`}> <g className={`${animationPhase >= 3 ? 'tossing-arm-counter-rotate' : ''}`}>
<path <path
d="M34,26 Q51,16 40,3" d="M34,26 Q51,16 40,3"
@ -165,6 +166,7 @@ const router = useIonRouter()
/> />
</g> </g>
{/* Правая рука (волнообразная вверх) - This arm will remain static after growth */} {/* Правая рука (волнообразная вверх) - This arm will remain static after growth */}
<path <path
d="M26,23 Q16,34 18,32" d="M26,23 Q16,34 18,32"
@ -196,6 +198,7 @@ const router = useIonRouter()
className={`leg-limb ${animationPhase >= 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */ className={`leg-limb ${animationPhase >= 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */
/> />
</g> </g>
</svg> </svg>
{/* Ball - now a separate div for absolute positioning */} {/* Ball - now a separate div for absolute positioning */}
<div <div

79
src/pages/WelcomeOld.tsx
View File

@ -1,79 +0,0 @@
"use client"
import { useEffect, useState } from "react"
import { useHistory } from "react-router-dom"
import manImage from "../assets/man.svg" // Reverted to original import
export default function Welcome() {
const history = useHistory()
const [animationPhase, setAnimationPhase] = useState(0)
useEffect(() => {
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 (
<div className="min-h-screen relative overflow-hidden">
<img
className="h-[30rem] lg:h-[50rem] w-auto z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-15"
src={manImage || "/placeholder.svg"} // Reverted to original img tag and src
alt="Man illustration"
/>
{/* Uncomment and update path for emblemImage if needed */}
{/* <img
className="h-[30rem] lg:h-[0rem] w-auto z-50 absolute right-0 bottom-0 transform opacity-10"
src={emblemImage || "/placeholder.svg"} // Reverted to original img tag and src
alt="Emblem"
/> */}
<div className="absolute inset-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C]">
{/* Floating particles */}
<div className="absolute inset-0">
<div className="absolute top-20 left-10 w-32 h-32 bg-white/5 rounded-full animate-pulse blur-xl"></div>
<div className="absolute bottom-32 right-16 w-24 h-24 bg-white/10 rounded-full animate-bounce blur-lg"></div>
<div className="absolute top-1/2 left-1/4 w-16 h-16 bg-white/5 rounded-full animate-ping blur-md"></div>
<div className="absolute top-1/3 right-1/3 w-20 h-20 bg-white/5 rounded-full animate-pulse blur-lg"></div>
</div>
{/* Main Content */}
<div className="flex items-center justify-center min-h-screen">
<div className="text-center z-10 px-8">
{/* App Name */}
<div
className={`transition-all duration-1000 delay-300 ${
animationPhase >= 1 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
}`}
>
<h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1>
<p className="text-white/90 text-xl font-medium tracking-wide">Восстановление через движение</p>
</div>
{/* Loading indicator */}
<div
className={`mt-16 transition-all duration-500 delay-700 ${
animationPhase >= 1 ? "opacity-100" : "opacity-0"
}`}
>
<div className="w-64 h-3 bg-white/10 rounded-full mx-auto overflow-hidden backdrop-blur-sm border border-white/20">
<div
className="h-full bg-gradient-to-r from-white via-white/80 to-white rounded-full shadow-lg"
style={{
width: `${Math.min((animationPhase + 1) * 25, 100)}%`,
transition: "width 0.8s cubic-bezier(0.4, 0, 0.2, 1)",
}}
></div>
</div>
<p className="text-white/70 text-lg mt-6 font-medium">Загрузка...</p>
</div>
</div>
</div>
</div>
</div>
)
}