course_comlete
This commit is contained in:
parent
c60ebc7b60
commit
b919068dab
@ -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,107 +24,55 @@ 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 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">
|
||||
{/* 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>
|
||||
<div className="absolute bottom-32 right-16 w-16 h-16 bg-white/10 rounded-full animate-bounce"></div>
|
||||
<div className="absolute top-1/2 left-1/4 w-12 h-12 bg-white/10 rounded-full animate-ping"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute inset-0 flex items-start justify-center top-50 transition-all duration-500 delay-100 ${
|
||||
animationPhase >= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-translate-y-10 scale-0" : "opacity-100 translate-y-0 scale-80"}`}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="70" viewBox="0 0 99 70" fill="none">
|
||||
<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>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="text-center z-10 max-w-md">
|
||||
{/* Volleyball Animation */}
|
||||
<div className="relative mb-8 h-40">
|
||||
{/* Net */}
|
||||
{/* Ball */}
|
||||
<div
|
||||
className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 transition-all duration-1000 ${
|
||||
animationPhase >= 1 ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
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"
|
||||
} ${animationPhase >= 2 ? "opacity-100 translate-y-400 scale-15" : "opacity-100 -translate-y-100 scale-15"} ` }
|
||||
>
|
||||
<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 */}
|
||||
<div
|
||||
className={`absolute transition-all duration-2000 ${
|
||||
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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 50 50" fill="none">
|
||||
<rect width="50" height="50" rx="25" fill="#FF8D28" />
|
||||
</svg>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Congratulations */}
|
||||
<div
|
||||
className={`transition-all duration-1000 delay-500 ${
|
||||
animationPhase >= 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"
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Поздравляем! 🎉</h1>
|
||||
<p className="text-white/90 text-lg mb-2">Вы успешно завершили курс</p>
|
||||
<p className="text-white/80 text-xl font-semibold mb-6">"Восстановление колена"</p>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Поздравляем! </h1>
|
||||
<p className="text-white/90 text-lg mb-6">Вы успешно завершили курс</p>
|
||||
|
||||
</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 */}
|
||||
<div
|
||||
className={`space-y-4 transition-all duration-1000 delay-1500 ${
|
||||
animationPhase >= 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"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
@ -142,6 +90,7 @@ const CourseComplete: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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 = () => {
|
||||
|
||||
<div className="bg-gray-50 w-full h-full overflow-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 */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src={" /src/assets/exersise.png" || currentExercise.image }
|
||||
src={ currentExercise.image || "/src/assets/exersise.png" }
|
||||
alt={currentExercise.name}
|
||||
className="w-auto h-56 sm:h-64 object-cover mx-auto"
|
||||
/>
|
||||
@ -136,14 +140,7 @@ const CourseExercises: React.FC = () => {
|
||||
</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>
|
||||
|
||||
{/* Exercise Info */}
|
||||
@ -163,7 +160,7 @@ const CourseExercises: React.FC = () => {
|
||||
|
||||
{/* Slide indicators */}
|
||||
<div className="flex justify-center mt-6 space-x-2">
|
||||
{exercises.map((_, index) => (
|
||||
{course.exercises.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
@ -180,7 +177,7 @@ const CourseExercises: React.FC = () => {
|
||||
<div className="px-4 sm:px-6 mb-50">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-6">Все упражнения курса</h2>
|
||||
<div className="space-y-4">
|
||||
{exercises.map((exercise, index) => (
|
||||
{course.exercises.map((exercise, index) => (
|
||||
<div
|
||||
key={exercise.id}
|
||||
onClick={() => history.push(`/exercise/${exercise.id}`)}
|
||||
|
||||
@ -37,7 +37,7 @@ const Home: React.FC = () => {
|
||||
style={{ width: '85%' }}
|
||||
></div>
|
||||
{/* Текст поверх линии */}
|
||||
<div className="absolute text-white font-semibold text-xl">Вы прошли реабилитацию на {85}%</div>
|
||||
<div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -44,23 +44,7 @@ const Exercise: React.FC = () => {
|
||||
|
||||
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 = () => (
|
||||
<svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
@ -89,29 +73,24 @@ const Exercise: React.FC = () => {
|
||||
title: "Исходное положение",
|
||||
description:
|
||||
"Лягте на спирку на коврик. Руки вдоль тела, ладони прижаты к полу. Ноги выпрямлены, носки направлены вверх. Поясница плотно прижата к полу.",
|
||||
icon: "1",
|
||||
},
|
||||
{
|
||||
title: "Задание",
|
||||
description:
|
||||
"Медленно поднимите прямые ноги до угла 90 градусов. Задержитесь на 2 секунды, затем медленно опустите ноги, не касаясь пола. Повторите движение плавно и контролируемо.",
|
||||
icon: "2",
|
||||
},
|
||||
{
|
||||
title: "Подходы",
|
||||
description: "Выполните 3 подхода по 12 повторений с отдыхом 60 секунд между подходами.",
|
||||
icon: "3",
|
||||
},
|
||||
{
|
||||
title: "Перерыв",
|
||||
description: "Отдыхайте 60 секунд между подходами. Дышите спокойно и расслабьте мышцы.",
|
||||
icon: "4",
|
||||
},
|
||||
{
|
||||
title: "Динамика и статика",
|
||||
description:
|
||||
"Динамическая фаза: подъем и опускание ног выполняется плавно, 2 секунды вверх, 2 секунды вниз. Статическая фаза: удержание ног в верхней точке на 2 секунды.",
|
||||
icon: "5",
|
||||
},
|
||||
]
|
||||
|
||||
@ -138,7 +117,11 @@ const Exercise: React.FC = () => {
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<button
|
||||
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
|
||||
? "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"
|
||||
: "rounded-full bg-orange-400 w-20 h-20 flex items-center justify-center"
|
||||
}
|
||||
>
|
||||
{isPlaying ? <PauseIcon /> : <PlayIcon />}
|
||||
</button>
|
||||
@ -146,7 +129,7 @@ const Exercise: React.FC = () => {
|
||||
{/* Live indicators */}
|
||||
{isPlaying && (
|
||||
<div className="absolute top-4 left-4 flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
|
||||
<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>
|
||||
@ -167,11 +150,7 @@ const Exercise: React.FC = () => {
|
||||
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>
|
||||
@ -182,7 +161,7 @@ const Exercise: React.FC = () => {
|
||||
</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="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">
|
||||
|
||||
@ -115,7 +115,7 @@ export default function Home() {
|
||||
{/* Основной блок с иконками и прогрессом */}
|
||||
<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">
|
||||
{/* Clock SVG */}
|
||||
<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 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>
|
||||
<p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p>
|
||||
{/* Кнопка с стрелкой */}
|
||||
|
||||
@ -49,7 +49,7 @@ export default function LoginPage() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
{/* Header Section */}
|
||||
<div className="flex items-center justify-center gap-4 mb-8">
|
||||
@ -64,11 +64,11 @@ export default function LoginPage() {
|
||||
{/* Login/Register Form Container */}
|
||||
<div className="glass-morphism rounded-3xl p-8 border border-white/20 shadow-2xl">
|
||||
{/* 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
|
||||
type="button"
|
||||
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"
|
||||
? "bg-white text-gray-800 shadow-lg"
|
||||
: "text-white/80 hover:text-white hover:bg-white/10"
|
||||
@ -79,7 +79,7 @@ export default function LoginPage() {
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
? "bg-white text-gray-800 shadow-lg"
|
||||
: "text-white/80 hover:text-white hover:bg-white/10"
|
||||
|
||||
@ -13,10 +13,10 @@ const Settings: React.FC = () => {
|
||||
}
|
||||
|
||||
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 */}
|
||||
<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 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 max-w-4xl mx-auto">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Настройки</h1>
|
||||
<p className="text-gray-300">Профиль пациента</p>
|
||||
@ -29,27 +29,18 @@ const Settings: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" max-w-4xl mx-auto">
|
||||
{/* Profile Information */}
|
||||
<div className="px-4 -mt-6 mb-6 ">
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
@ -59,15 +50,11 @@ const Settings: React.FC = () => {
|
||||
</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">
|
||||
@ -77,14 +64,12 @@ const Settings: React.FC = () => {
|
||||
</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">
|
||||
@ -100,10 +85,6 @@ const Settings: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Logout Button */}
|
||||
<div className="px-4 mb-8">
|
||||
<button
|
||||
@ -113,9 +94,9 @@ const Settings: React.FC = () => {
|
||||
Выйти из аккаунта
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<BottomNavigation />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -154,6 +154,7 @@ const router = useIonRouter()
|
||||
<rect x={24} y={20} width={16} height={24} fill="#1A3A4A" rx={2} />
|
||||
{/* Левая рука (смотрит вниз) - THIS IS THE TOSSING ARM AFTER MIRRORING */}
|
||||
{/* Wrapped in a new group for counter-rotation */}
|
||||
|
||||
<g className={`${animationPhase >= 3 ? 'tossing-arm-counter-rotate' : ''}`}>
|
||||
<path
|
||||
d="M34,26 Q51,16 40,3"
|
||||
@ -165,6 +166,7 @@ const router = useIonRouter()
|
||||
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Правая рука (волнообразная вверх) - This arm will remain static after growth */}
|
||||
<path
|
||||
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 */
|
||||
/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
{/* Ball - now a separate div for absolute positioning */}
|
||||
<div
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user