одно упражнение
This commit is contained in:
parent
9fde2d331c
commit
c60ebc7b60
BIN
src/assets/exersise.png
Normal file
BIN
src/assets/exersise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
@ -16,7 +16,7 @@ const HeaderNav: React.FC<HeaderProps> = ({
|
||||
return (
|
||||
<div className="opacity-90 fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] pt-6 pb-2 z-50 shadow-lg rounded-b-3xl">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
|
||||
<div className="relative px-4 sm:px-6 py-4 max-w-4xl mx-auto ">
|
||||
<div className="relative px-6 py-4 max-w-4xl mx-auto ">
|
||||
<p className="text-cyan-100 text-sm font-medium">{text}</p>
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-white">{item}</h1>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
import type React from "react"
|
||||
import { useState } from "react"
|
||||
import { useHistory } from "react-router-dom"
|
||||
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
|
||||
const CourseExercises: React.FC = () => {
|
||||
@ -10,6 +12,8 @@ const CourseExercises: React.FC = () => {
|
||||
// const { id } = useParams<{ id: string }>()
|
||||
const [currentSlide, setCurrentSlide] = useState(0)
|
||||
|
||||
|
||||
|
||||
const exercises = [
|
||||
{
|
||||
id: 1,
|
||||
@ -57,14 +61,14 @@ const CourseExercises: React.FC = () => {
|
||||
},
|
||||
]
|
||||
|
||||
const nextSlide = () => {
|
||||
// Функции для переключения на следующее/предыдущее упражнение
|
||||
const nextExercise = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % exercises.length)
|
||||
}
|
||||
|
||||
const prevSlide = () => {
|
||||
const prevExercise = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + exercises.length) % exercises.length)
|
||||
}
|
||||
|
||||
const currentExercise = exercises[currentSlide]
|
||||
|
||||
const getDifficultyColor = (difficulty: string) => {
|
||||
@ -85,29 +89,23 @@ const CourseExercises: React.FC = () => {
|
||||
|
||||
|
||||
|
||||
<div className="max-w-4xl mx-auto overflow-y-auto scrollable-content">
|
||||
{/* Header */}
|
||||
<div className="fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] p-4 z-50 shadow-lg rounded-b-3xl">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
|
||||
<div className="relative px-4 sm:px-6 py-4 max-w-4xl mx-auto ">
|
||||
<p className="text-cyan-100 text-sm font-medium">Курс упражнений</p>
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-white">Восстановление колена</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||
<div className="my-32 min-h-screen max-w-4xl mx-auto">
|
||||
<HeaderNav item={currentExercise.name} text='упражнение' />
|
||||
|
||||
|
||||
|
||||
{/* Exercise Slider */}
|
||||
<div className="px-4 sm:px-6 mt-34 mb-10">
|
||||
<div className="glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl">
|
||||
<div className="px-4 sm:px-6 mt-34 mb-10 ">
|
||||
<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 || "/placeholder.svg"}
|
||||
src={" /src/assets/exersise.png" || currentExercise.image }
|
||||
alt={currentExercise.name}
|
||||
className="w-full h-56 sm:h-64 object-cover"
|
||||
className="w-auto h-56 sm:h-64 object-cover mx-auto"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-black/10"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/10"></div>
|
||||
|
||||
{/* Difficulty Badge */}
|
||||
<div className="absolute top-4 right-4">
|
||||
@ -119,22 +117,24 @@ const CourseExercises: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Navigation arrows */}
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={prevExercise}
|
||||
className="z-50 absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={nextExercise}
|
||||
className="z-50 absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/20 backdrop-blur-xl rounded-full flex items-center justify-center text-white hover:bg-black/30 transition-all duration-300 shadow-lg border border-white/20"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
{/* Play Button Overlay */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
@ -167,11 +167,10 @@ const CourseExercises: React.FC = () => {
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`h-2 rounded-full transition-all duration-300 ${
|
||||
index === currentSlide
|
||||
className={`h-4 rounded-full transition-all duration-300 ${index === currentSlide
|
||||
? "bg-gradient-to-r from-[#2BACBE] to-cyan-600 w-8 shadow-lg"
|
||||
: "bg-gray-300 w-2 hover:bg-gray-400"
|
||||
}`}
|
||||
: "bg-gray-300 w-4 hover:bg-gray-400"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@ -185,9 +184,8 @@ const CourseExercises: React.FC = () => {
|
||||
<div
|
||||
key={exercise.id}
|
||||
onClick={() => history.push(`/exercise/${exercise.id}`)}
|
||||
className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${
|
||||
index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : ""
|
||||
}`}
|
||||
className={`glass-morphism rounded-2xl p-4 sm:p-6 border border-white/50 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-2xl transform hover:scale-[1.02] backdrop-blur-xl ${index === currentSlide ? "ring-2 ring-[#2BACBE] bg-cyan-50/20" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
@ -213,6 +211,7 @@ const CourseExercises: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<BottomNavigation />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,6 +4,8 @@ import type React from "react"
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
import { useHistory } from "react-router-dom"
|
||||
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const history = useHistory()
|
||||
|
||||
@ -11,12 +13,18 @@ const Home: React.FC = () => {
|
||||
{ id: 1, name: "Восстановление колена", progress: 75, color: "from-[#2BACBE] to-[#2BACBE]/80" },
|
||||
{ id: 2, name: "Укрепление спины", progress: 45, color: "from-[#5F5C5C] to-[#5F5C5C]/80" },
|
||||
{ id: 3, name: "Реабилитация плеча", progress: 90, color: "from-[#2BACBE]/80 to-[#5F5C5C]" },
|
||||
]
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-20 overflow-y-auto max-w-4xl mx-auto pb-50">
|
||||
|
||||
|
||||
|
||||
<div className="my-32 min-h-screen max-w-4xl mx-auto">
|
||||
<HeaderNav item='Курсы' text='все назначенные'/>
|
||||
|
||||
{/* Analytics Cards */}
|
||||
<div className="px-6 mb-8">
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ import { useState, useEffect } from "react"
|
||||
import { useHistory } from "react-router-dom"
|
||||
|
||||
import BottomNavigation from "../components/BottomNavigation"
|
||||
import HeaderNav from "../components/HeaderNav"
|
||||
|
||||
|
||||
const Exercise: React.FC = () => {
|
||||
@ -116,76 +117,12 @@ const Exercise: React.FC = () => {
|
||||
|
||||
return (
|
||||
|
||||
<div className="bg-gray-100 max-w-4xl mx-auto mb-50 overflow_auto">
|
||||
<div className="bg-gray-50 w-full h-full overflow-auto">
|
||||
<div className="mt-32 mb-60 min-h-screen max-w-4xl mx-auto">
|
||||
|
||||
<HeaderNav item='Надо разобраться?' text='упражнение'/>
|
||||
|
||||
|
||||
{/* Header */}
|
||||
<div className="fixed top-0 left-0 right-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] p-4 z-50 shadow-lg rounded-b-3xl">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
|
||||
|
||||
<div className="relative px-4 sm:px-6 py-4 max-w-4xl mx-auto flex flex-row justify-between">
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => history.goBack()}
|
||||
className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7L15 5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="text-center">
|
||||
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-white">Подъемы ног лежа</h1>
|
||||
<p className="text-cyan-100 text-sm font-medium">Упражнение 1 из 12</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => history.goBack()}
|
||||
className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg ml-auto"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7L15 5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 z-40 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] backdrop-blur-xl pt-40 pb-4 px-4 sm:px-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
onClick={() => history.goBack()}
|
||||
className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg"
|
||||
>
|
||||
<BackIcon />
|
||||
</button>
|
||||
<div className="text-center">
|
||||
<h1 className="text-lg sm:text-xl font-black text-white">Подъемы ног лежа</h1>
|
||||
<p className="text-white/80 text-sm font-medium">Упражнение 1 из 12</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 shadow-lg">
|
||||
<HeartIcon />
|
||||
</div>
|
||||
</div>
|
||||
{/* Set Counter */}
|
||||
<div className="flex justify-center space-x-2 mt-4">
|
||||
{Array.from({ length: totalSets }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${index + 1 <= currentSet
|
||||
? "bg-white text-[#2BACBE] shadow-lg scale-110 ring-2 ring-white"
|
||||
: "bg-gray-100 text-gray-600 border border-gray-200"
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Video/Image Section */}
|
||||
@ -201,7 +138,7 @@ const Exercise: React.FC = () => {
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<button
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
className="w-20 h-20 bg-white/90 backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl hover:bg-white transition-all duration-300 transform hover:scale-110 border border-white/50"
|
||||
className="w-20 h-20 bg-orange-400 backdrop-blur-xl rounded-full flex items-center justify-center shadow-2xl hover:bg-gray-400 transition-all duration-300 transform hover:scale-110 border border-cyan-50"
|
||||
>
|
||||
{isPlaying ? <PauseIcon /> : <PlayIcon />}
|
||||
</button>
|
||||
@ -211,12 +148,12 @@ const Exercise: React.FC = () => {
|
||||
<div className="absolute top-4 left-4 flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-white text-sm font-bold bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm">
|
||||
LIVE
|
||||
Выполнение
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* Timer Display */}
|
||||
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-xl">
|
||||
<div className="absolute top-4 right-4 bg-cyan-50 backdrop-blur-sm px-3 py-1 rounded-xl">
|
||||
<span className="text-gray-800 text-sm font-bold">{formatTime(currentTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -243,25 +180,7 @@ const Exercise: React.FC = () => {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Important Notes */}
|
||||
<div className="px-4 sm:px-6 mb-32">
|
||||
<div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-8 h-8 bg-amber-400/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-amber-400 font-bold text-sm">!</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-gray-800 mb-2">Важные замечания</h3>
|
||||
<ul className="space-y-1 text-gray-600 text-sm">
|
||||
<li>• Не отрывайте поясницу от пола</li>
|
||||
<li>• Дышите равномерно, не задерживайте дыхание</li>
|
||||
<li>• При болевых ощущениях немедленно прекратите</li>
|
||||
<li>• Движения должны быть плавными и контролируемыми</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fixed Timer at Bottom */}
|
||||
<div className="fixed bottom-36 left-0 right-0 glass-morphism border-t border-white/20 px-4 sm:px-6 py-4 shadow-2xl z-30">
|
||||
<div className="max-w-md mx-auto">
|
||||
@ -320,6 +239,7 @@ const Exercise: React.FC = () => {
|
||||
</div>
|
||||
<BottomNavigation />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -71,7 +71,7 @@ export default function Home() {
|
||||
<div className="bg-white rounded-3xl p-6 shadow-lg mb-6 mx-4 sm:mx-6">
|
||||
<div className="flex items-center justify-between mb-6 border-b-2 pb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-600 mb-2">Добрый день!</h1>
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">Добрый день!</h1>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-gray-600 font-medium text-sm sm:text-base">{currentDate}</p>
|
||||
|
||||
@ -30,17 +30,11 @@ const Settings: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Profile Information */}
|
||||
<div className="px-4 -mt-12 mb-6">
|
||||
<div className="px-4 -mt-6 mb-6">
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Имя</label>
|
||||
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||||
<span className="text-gray-800">Александр Петров</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Email</label>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user