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

анимация/в процессе

Browse Source
This commit is contained in:
Tatyana 2025-08-12 14:22:38 +03:00
parent f6439c5647
commit 8359710c7c
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Settings.tsx
View File

@ -51,7 +51,7 @@ const Settings: React.FC = () => {
</div> </div>
</div> </div>
{/* Medical Information */} {/* Medical Information */}
<div className="px-4 mb-6"> {/* <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 "> <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> <h2 className="text-lg font-semibold text-gray-800 mb-4">Медицинская информация</h2>
<div className="space-y-4"> <div className="space-y-4">
@ -84,7 +84,7 @@ const Settings: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
</div> </div> */}
{/* Logout Button */} {/* Logout Button */}
<div className="px-4 mb-8"> <div className="px-4 mb-8">
<button <button

35
src/pages/Welcome.tsx
View File

@ -9,9 +9,9 @@ const CourseComplete: React.FC = () => {
useEffect(() => { useEffect(() => {
const timer1 = setTimeout(() => setAnimationPhase(1), 500) const timer1 = setTimeout(() => setAnimationPhase(1), 500)
const timer2 = setTimeout(() => setAnimationPhase(2), 1000) const timer2 = setTimeout(() => setAnimationPhase(2), 1500)
const timer3 = setTimeout(() => setAnimationPhase(3), 1500) const timer3 = setTimeout(() => setAnimationPhase(3), 2000)
const timer4 = setTimeout(() => setAnimationPhase(3), 2000) const timer4 = setTimeout(() => setAnimationPhase(4), 2500)
return () => { return () => {
clearTimeout(timer1) clearTimeout(timer1)
@ -29,45 +29,48 @@ const CourseComplete: React.FC = () => {
{/* Men Animation */} {/* Men Animation */}
<div className="min-h-screen p-4 relative overflow-hidden max-w-4xl mx-auto"> <div className="min-h-screen p-4 relative overflow-hidden max-w-2xl mx-auto">
<div className="absolute inset-0 flex items-start justify-center pt-30"> <div className="absolute inset-0 flex items-start justify-center pt-30">
{/* тело */} {/* тело */}
<div className="absolute top-20 left-1/2 transform -translate-x-1/2"> <div className={`absolute left-[37%] transform duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[24%]" : "opacity-0 scale-0 top-[10%]"} ` }>
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="166" viewBox="0 0 109 166" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="109" height="166" viewBox="0 0 109 166" fill="none">
<rect width="109" height="166" rx="39" fill="#F3945B" /> <rect width="109" height="166" rx="40" fill="#F3945B" />
</svg> </svg>
</div> </div>
{/* руки */} {/* руки */}
<div className="absolute top-80 left-[20%] transform -translate-y-1/2"> <div className={`absolute left-[15%] transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[16%]" : "opacity-0 scale-0 top-[7%]"} ` }
>
<svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
<path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="black" /> <path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="#F3945B" />
</svg> </svg>
</div> </div>
{/* нога 1 */} {/* нога 1 */}
<div className="absolute bottom-[ -20px ] left-[ calc(50% -60px) ] w-[37px] h-[129px]"> <div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[34%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ` }>
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="129" viewBox="0 0 37 129" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="37" height="129" viewBox="0 0 37 129" fill="none">
<rect width="37" height="129" rx="18.5" fill="#F3945B" /> <rect width="37" height="129" rx="18.5" fill="#F3945B" />
</svg> </svg>
</div> </div>
{/* нога 2 */} {/* нога 2 */}
<div className="absolute bottom-[ -20px ] right-[ calc(50% -60px) ] w-[37px] h-[178px]"> <div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[34%] right-[37%] " : "opacity-0 scale-0 top-[15%] right-[47%] "} ` }>
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="178" viewBox="0 0 37 178" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="37" height="178" viewBox="0 0 37 178" fill="none">
<rect width="37" height="178" rx="18.5" fill="#F3945B" /> <rect width="37" height="178" rx="18.5" fill="#F3945B" />
</svg> </svg>
</div> </div>
{/* голова */} {/* голова */}
<div className="absolute top-2.5 left-1/2 transform -translate-x-1/2"> <div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[16%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} ` }>
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none">
<circle cx={37.5} cy={37.5} r={37.5} fill="#F3945B" /> <circle cx={37.5} cy={37.5} r={37.5} fill="#F3945B" />
</svg> </svg>
</div> </div>
{/* мяч */} {/* мяч */}
<div className='absolute top-[-10px] left-1/2 transform -translate-x-1/2'> <div className={`absolute transition-all duration-400 delay-100 ${animationPhase >= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ` }>
<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'> <svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'>
<circle cx='27' cy='27' r='27' fill='#F3945B' /> <circle cx='27' cy='27' r='27' fill='#F3945B' />
</svg> </svg>
@ -83,20 +86,20 @@ const CourseComplete: React.FC = () => {
<div className="text-center px-8 z-10"> <div className="text-center px-8 z-10">
{/* App Name */} {/* App Name */}
<div <div
className={`transition-opacity duration-1000 delay-100 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`} className={`transition-opacity duration-1000 delay-300 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`}
> >
<h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1> <h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1>
{/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */} {/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
<div <div
className="h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out" className="h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out"
style={{ style={{
width: animationPhase >= 3 ? '320px' : '0px', // или начальное значение width: animationPhase >= 2 ? '320px' : '0px', // или начальное значение
maxWidth: '320px', maxWidth: '320px',
opacity: animationPhase >= 3 ? 1 : 0, opacity: animationPhase >= 2 ? 1 : 0,
}} }}
></div> ></div>
{/* Subtitle - appears with opacity transition in phase 4 */} {/* Subtitle - appears with opacity transition in phase 4 */}
<p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 1 ? 'opacity-100' : 'opacity-0'}`}> <p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 2 ? 'opacity-100' : 'opacity-0'}`}>
Восстановление через движение Восстановление через движение
</p> </p>
</div> </div>