+
+ {/* тело */}
+
+
+
-
- {/* 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 */}
+ {/* руки */}
+
+
+ {/* нога 1 */}
+
+
+
+
+ {/* нога 2 */}
+
+
+
+
+ {/* голова */}
+
+
+
+
+ {/* мяч */}
+
+
+
+
+
+
+
+
+
+ {/* Main Content */}
+
+
+ {/* App Name */}
= 4 ? 1 : 0 }}
- >
- {/* Subtitle - appears with opacity transition in phase 4 */}
-
= 4 ? 'opacity-100' : 'opacity-0'}`}>
- {displayedSubtitle}
-
+ className={`transition-opacity duration-1000 delay-100 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`}
+ >
+
Реабилитация
+ {/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
+
= 3 ? '320px' : '0px', // или начальное значение
+ maxWidth: '320px',
+ opacity: animationPhase >= 3 ? 1 : 0,
+ }}
+>
+ {/* Subtitle - appears with opacity transition in phase 4 */}
+
= 1 ? 'opacity-100' : 'opacity-0'}`}>
+ Восстановление через движение
+
+
-
+
)
}
+
+export default CourseComplete
diff --git a/src/pages/WelcomeOld.tsx b/src/pages/WelcomeOld.tsx
new file mode 100644
index 0000000..2cb4a4e
--- /dev/null
+++ b/src/pages/WelcomeOld.tsx
@@ -0,0 +1,235 @@
+"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 */}
+
+ {/* 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}
+
+
+
+
+
+
+ )
+}