118 lines
4.7 KiB
TypeScript
118 lines
4.7 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react";
|
||
import { useEffect, useState } from "react";
|
||
import { useHistory } from "react-router-dom";
|
||
|
||
import confetti from "../assets/img/Confetti.gif";
|
||
|
||
import { getRouteCourses } from "../shared/consts/router";
|
||
import { getRouteHome } from "../shared/consts/router";
|
||
|
||
const CourseComplete: React.FC = () => {
|
||
const history = useHistory()
|
||
const [animationPhase, setAnimationPhase] = useState(0)
|
||
|
||
useEffect(() => {
|
||
const timer1 = setTimeout(() => setAnimationPhase(1), 500)
|
||
const timer2 = setTimeout(() => setAnimationPhase(2), 1000)
|
||
const timer3 = setTimeout(() => setAnimationPhase(3), 1500)
|
||
|
||
return () => {
|
||
clearTimeout(timer1)
|
||
clearTimeout(timer2)
|
||
clearTimeout(timer3)
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
|
||
|
||
|
||
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] flex items-center justify-center">
|
||
{/* Basket Animation */}
|
||
|
||
<div className="absolute top-0">
|
||
|
||
<img
|
||
src={confetti}
|
||
className="w-full h-120 object-cover"
|
||
alt="Описание GIF"
|
||
/>
|
||
</div>
|
||
|
||
|
||
<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={`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">
|
||
{/* Ball */}
|
||
<div
|
||
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"} ` }
|
||
>
|
||
|
||
<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>
|
||
|
||
</div>
|
||
|
||
{/* Congratulations */}
|
||
<div
|
||
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-2">Поздравляем! </h1>
|
||
<p className="text-white/90 text-lg mb-6">Вы успешно завершили курс</p>
|
||
|
||
</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"
|
||
}`}
|
||
>
|
||
<button
|
||
onClick={() => history.push(getRouteCourses())}
|
||
className="w-full bg-white/20 backdrop-blur-lg hover:bg-white/30 text-white font-semibold py-3 px-6 rounded-xl border border-white/30 transition-all duration-200 transform hover:scale-105"
|
||
>
|
||
Выбрать новый курс
|
||
</button>
|
||
<button
|
||
onClick={() => history.push(getRouteHome())}
|
||
className="w-full bg-transparent border-2 border-white/50 hover:bg-white/10 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200"
|
||
>
|
||
На главную
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div >
|
||
)
|
||
}
|
||
|
||
export default CourseComplete
|
||
|
||
|
||
|
||
|
||
|
||
|