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 10:50:18 +03:00
parent b919068dab
commit d1827da97a
5 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/video.mov Normal file
View File

Binary file not shown.

12
src/pages/CourseExercises.tsx
View File

@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom"
import HeaderNav from "../components/HeaderNav"
import BottomNavigation from "../components/BottomNavigation"
import video from "../assets/video.mov"
const CourseExercises: React.FC = () => {
const history = useHistory()
@ -104,10 +105,13 @@ const course = {
<div className="glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
{/* Exercise Image */}
<div className="relative">
<img
src={ currentExercise.image || "/src/assets/exersise.png" }
alt={currentExercise.name}
className="w-auto h-56 sm:h-64 object-cover mx-auto"
<video
src={video}
className="w-full h-120 object-cover"
autoPlay
loop
muted
playsInline
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/10"></div>

3
src/pages/Courses.tsx
View File

@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom"
import HeaderNav from "../components/HeaderNav"
const Home: React.FC = () => {
const history = useHistory()
@ -30,7 +31,7 @@ const Home: React.FC = () => {
<div className="text-center relative ">
<div className="w-full h-14 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
<div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
{/* Прогрессная часть */}
<div
className="h-full bg-orange-400 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"

18
src/pages/Exercise.tsx
View File

@ -5,6 +5,7 @@ import { useHistory } from "react-router-dom"
import BottomNavigation from "../components/BottomNavigation"
import HeaderNav from "../components/HeaderNav"
import video from "../assets/video.mov"
const Exercise: React.FC = () => {
@ -108,10 +109,13 @@ const Exercise: React.FC = () => {
<div className="px-4 sm:px-6 mt-10 mb-6">
<div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl">
<div className="relative">
<img
src="/placeholder.svg?height=250&width=400"
alt="Exercise demonstration"
className="w-full h-56 sm:h-64 object-cover"
<video
src={video}
className="w-full h-120 object-cover"
autoPlay
loop
muted
playsInline
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-black/10"></div>
<div className="absolute inset-0 flex items-center justify-center">
@ -119,8 +123,8 @@ const Exercise: React.FC = () => {
onClick={() => setIsPlaying(!isPlaying)}
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"
? "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 opacity-40"
: "rounded-full w-20 h-20 flex items-center justify-center backdrop-blur-xl opacity-70"
}
>
{isPlaying ? <PauseIcon /> : <PlayIcon />}
@ -194,7 +198,7 @@ const Exercise: React.FC = () => {
</>
) : (
<>
<PlayIcon /> <span>Начать</span>
<PlayIcon /> <span className="backdrop-blur-xl">Начать</span>
</>
)}
</button>

25
src/pages/Welcome.tsx
View File

@ -1,7 +1,7 @@
"use client"
import { useEffect, useState } from "react"
import { useIonRouter } from '@ionic/react';
// import { useIonRouter } from '@ionic/react';
export default function Welcome() {
const [animationPhase, setAnimationPhase] = useState(0)
@ -48,27 +48,22 @@ export default function Welcome() {
const router = useIonRouter()
// const router = useIonRouter()
useEffect(() => {
const timer = setTimeout(() => {
router.push("/home", "forward")
}, 5000) // Задержка 3 секунды
// useEffect(() => {
// const timer = setTimeout(() => {
// router.push("/home", "forward")
// }, 5000) // Задержка 3 секунды
return () => clearTimeout(timer)
}, [router])
// return () => clearTimeout(timer)
// }, [router])
return (
<div className="min-h-screen relative overflow-hidden">
{/* Background and particles */}
<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 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>
{/* SVG with animated figure */}
<svg
xmlns="http://www.w3.org/2000/svg"
@ -225,7 +220,7 @@ export default function Welcome() {
{/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
<div
className={`h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out`}
style={{ width: `${loaderWidth}%`, maxWidth: '200px', opacity: animationPhase >= 4 ? 1 : 0 }}
style={{ width: `${loaderWidth}%`, maxWidth: '340px', opacity: animationPhase >= 4 ? 1 : 0 }}
></div>
{/* Subtitle - appears with opacity transition in phase 4 */}
<p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 4 ? 'opacity-100' : 'opacity-0'}`}>