From 9937c64224b930792960c970ab8bb446f4cc946b Mon Sep 17 00:00:00 2001 From: Tatyana Date: Tue, 12 Aug 2025 15:33:43 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D1=8F=20=D1=87=D0=B5=D0=BB=D0=BE=D0=B2=D0=B5=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/man.svg | 4 +- src/pages/CourseComplete.tsx | 9 ++ src/pages/Welcome.tsx | 55 ++++---- src/pages/WelcomeOld.tsx | 235 ----------------------------------- 4 files changed, 43 insertions(+), 260 deletions(-) delete mode 100644 src/pages/WelcomeOld.tsx diff --git a/src/assets/man.svg b/src/assets/man.svg index 2a50475..e9956c9 100644 --- a/src/assets/man.svg +++ b/src/assets/man.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/pages/CourseComplete.tsx b/src/pages/CourseComplete.tsx index 61f28e6..aa50c25 100644 --- a/src/pages/CourseComplete.tsx +++ b/src/pages/CourseComplete.tsx @@ -95,3 +95,12 @@ animationPhase >= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-transl } export default CourseComplete + + + + + + + // + // + // \ No newline at end of file diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 624e180..7f7f582 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -2,7 +2,7 @@ import type React from "react" import { useEffect, useState } from "react" -import { useIonRouter } from '@ionic/react'; +// import { useIonRouter } from '@ionic/react'; const CourseComplete: React.FC = () => { @@ -25,16 +25,15 @@ const CourseComplete: React.FC = () => { + // const router = useIonRouter() - const router = useIonRouter() + // useEffect(() => { + // const timer = setTimeout(() => { + // router.push("/home", "forward") + // }, 3500) // Задержка 3 секунды - useEffect(() => { - const timer = setTimeout(() => { - router.push("/home", "forward") - }, 5000) // Задержка 3 секунды - - return () => clearTimeout(timer) - }, [router]) + // return () => clearTimeout(timer) + // }, [router]) return ( @@ -48,14 +47,14 @@ const CourseComplete: React.FC = () => {
{/* тело */} -
= 1 ? "opacity-100 scale-100 top-[24%]" : "opacity-0 scale-0 top-[10%]"} ` }> - +
= 1 ? "opacity-100 scale-100 top-[24%]" : "opacity-0 scale-0 top-[10%]"} `}> +
{/* руки */} -
= 1 ? "opacity-100 scale-100 top-[16%]" : "opacity-0 scale-0 top-[7%]"} ` } +
= 1 ? "opacity-100 scale-100 top-[14%]" : "opacity-0 scale-0 top-[7%]"} ${animationPhase >= 3 ? "opacity-100 rotate-20" : "opacity-100 rotate-0"}`} > @@ -63,32 +62,42 @@ const CourseComplete: React.FC = () => {
{/* нога 1 */} -
= 1 ? "opacity-100 scale-100 top-[34%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ` }> +
= 1 ? "opacity-100 scale-100 top-[34%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ${animationPhase >= 3 ? "top-[0%] right-[47%] " : "top-[15%] right-[47%] "}`}> +
+ + + + + +
{/* нога 2 */} -
= 1 ? "opacity-100 scale-100 top-[34%] right-[37%] " : "opacity-0 scale-0 top-[15%] right-[47%] "} ` }> +
= 1 ? "opacity-100 scale-100 top-[34%] right-[37%] " : "opacity-0 scale-0 top-[15%] right-[47%] "} `}>
{/* голова */} -
= 1 ? "opacity-100 scale-100 top-[16%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} ` }> +
= 1 ? "opacity-100 scale-100 top-[14%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} `}>
- + {/* мяч */} -
= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ` }> +
= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ${animationPhase >= 3 ? "scale-[90%]" : "scale-100"} {/* ${animationPhase >= 4 ? "scale-[3000%]" : "scale-100"} */} + + ` } + > - +
@@ -100,21 +109,21 @@ const CourseComplete: React.FC = () => { {/* Main Content */}
- {/* App Name */} +
= 1 ? "opacity-100" : "opacity-0"}`} + className={`transition-opacity duration-1000 delay-600 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`} >

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

- {/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */} +
= 2 ? '320px' : '0px', // или начальное значение + width: animationPhase >= 2 ? '320px' : '0px', maxWidth: '320px', opacity: animationPhase >= 2 ? 1 : 0, }} >
- {/* Subtitle - appears with opacity transition in phase 4 */} +

= 2 ? 'opacity-100' : 'opacity-0'}`}> Восстановление через движение

diff --git a/src/pages/WelcomeOld.tsx b/src/pages/WelcomeOld.tsx deleted file mode 100644 index 2cb4a4e..0000000 --- a/src/pages/WelcomeOld.tsx +++ /dev/null @@ -1,235 +0,0 @@ -"use client" - -import { useEffect, useState } from "react" -// import { useIonRouter } from '@ionic/react'; - -export default function Welcome() { - const [animationPhase, setAnimationPhase] = useState(0) - const [displayedTitle, setDisplayedTitle] = useState("") - const [displayedSubtitle, setDisplayedSubtitle] = useState("") - const [loaderWidth, setLoaderWidth] = useState(0) // Изначально 0 для анимации слева направо - - const fullTitle = "Реабилитация" - const fullSubtitle = "Восстановление через движение" - - useEffect(() => { - // Phase 1: App name appears, ball appears (after 0.2s) - const timer1 = setTimeout(() => setAnimationPhase(1), 700) - // Phase 2: Limbs start growing (after 0.7s) - // Limb growth animation is 2s, so it finishes at 0.7s + 2s = 2.7s - const timer2 = setTimeout(() => setAnimationPhase(2), 700) - // Phase 3: SVG rotates, ball tosses (after 1.7s, when limbs are fully grown) - const timer3 = setTimeout(() => setAnimationPhase(3), 1700) - // Phase 4: Subtitle and Loader appear (after ball toss finishes) - // Ball toss animation is 1.2s with 0.1s delay, so it finishes around 1.7s + 0.1s + 1.2s = 3.0s - // Starting Phase 4 at 3.1s ensures ball is completely gone - const timer4 = setTimeout(() => setAnimationPhase(4), 3100) // Запускаем фазу 4 после исчезновения мяча - // Phase 5: Ball starts bouncing (after subtitle and loader appear, e.g., 3.1s + 1s for subtitle opacity = 4.1s, so start at 4.2s) - const timer5 = setTimeout(() => setAnimationPhase(5), 3100) - - return () => { - clearTimeout(timer1) - clearTimeout(timer2) - clearTimeout(timer3) - clearTimeout(timer4) - clearTimeout(timer5) - } - }, []) - - useEffect(() => { - if (animationPhase >= 1) { - setDisplayedTitle(fullTitle) // Заголовок появляется мгновенно - } - if (animationPhase >= 4) { // Подзаголовок и лоадер появляются в фазе 4 - setDisplayedSubtitle(fullSubtitle) // Подзаголовок появляется целиком - setLoaderWidth(100) // Лоадер анимируется до полной ширины - } - }, [animationPhase]) // Зависимость от animationPhase - - - - // const router = useIonRouter() - - // useEffect(() => { - // const timer = setTimeout(() => { - // router.push("/home", "forward") - // }, 5000) // Задержка 3 секунды - - // return () => clearTimeout(timer) - // }, [router]) - - - return ( -
- {/* Background and particles */} -
- - {/* SVG with animated figure */} - = 3 ? 'svg-rotate-active' : ''}`} - > - - - - {/* Group with mirror transform for the human figure */} - - {/* Голова */} - - {/* Тело */} - - {/* Левая рука (смотрит вниз) - THIS IS THE TOSSING ARM AFTER MIRRORING */} - {/* Wrapped in a new group for counter-rotation */} - - = 3 ? 'tossing-arm-counter-rotate' : ''}`}> - = 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */ - - /> - - - {/* Правая рука (волнообразная вверх) - This arm will remain static after growth */} - = 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */ - - /> - {/* Левая нога - длиннее */} - = 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */ - /> - {/* Правая нога - длиннее */} - = 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */ - /> - - - - {/* Ball - now a separate div for absolute positioning */} -
= 1 ? 'opacity-100' : 'opacity-0'} - ${animationPhase >= 3 ? 'ball-toss-active' : ''} - ${animationPhase >= 5 ? 'ball-bounce-active' : ''} - `} - style={{ - // Adjusted initial position using vh/vw for better responsiveness - top: 'calc(50% - 20vh)', // Примерно 20% высоты вьюпорта выше центра - left: '50%', // Примерно 3.8% ширины вьюпорта левее центра - transform: 'translate(-50%, -50%)', // Центрирует сам div относительно его top/left - }} - /> - {/* Main Content */} -
-
- {/* App Name */} -
= 1 ? "opacity-100" : "opacity-0"}`} - > -

{displayedTitle}

- {/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */} -
= 4 ? 1 : 0 }} - >
- {/* Subtitle - appears with opacity transition in phase 4 */} -

= 4 ? 'opacity-100' : 'opacity-0'}`}> - {displayedSubtitle} -

-
-
-
-
-
- ) -}