diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx index 3776468..2b365a4 100644 --- a/src/components/BottomNavigation.tsx +++ b/src/components/BottomNavigation.tsx @@ -14,15 +14,15 @@ const BottomNavigation: React.FC = () => { xmlns="http://www.w3.org/2000/svg" width={size} height={size} - viewBox="0 0 24 24" - fill={active ? "currentColor" : "none"} - stroke={active ? "none" : "currentColor"} + viewBox="0 0 29 29" + fill={ active ? "#2B8794" : "#ffffff"} + stroke={"none"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > - - + + ) @@ -31,15 +31,13 @@ const BottomNavigation: React.FC = () => { xmlns="http://www.w3.org/2000/svg" width={size} height={size} - viewBox="0 0 24 24" - fill={active ? "currentColor" : "none"} - stroke={active ? "none" : "currentColor"} + viewBox="0 0 26 26" + fill={ active ? "#2B8794" : "#ffffff"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > - - + ) @@ -48,16 +46,18 @@ const BottomNavigation: React.FC = () => { xmlns="http://www.w3.org/2000/svg" width={size} height={size} - viewBox="0 0 24 24" - fill={active ? "currentColor" : "none"} - stroke={active ? "none" : "currentColor"} - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round" + viewBox="0 0 29 29" + fill={ active ? "#2B8794" : "#ffffff"} > - - - + + + + + + + + + ) @@ -66,15 +66,15 @@ const BottomNavigation: React.FC = () => { xmlns="http://www.w3.org/2000/svg" width={size} height={size} - viewBox="0 0 24 24" - fill={active ? "currentColor" : "none"} - stroke={active ? "none" : "currentColor"} + viewBox="0 0 28 28" + fill={ active ? "#2B8794" : "#ffffff"} + // stroke={active ? "none" : "#ffffff"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > - - + + ) @@ -104,15 +104,13 @@ const BottomNavigation: React.FC = () => { > {/* Active state background (glassmorphism rectangle) */}
{/* Icon and Label container */}
@@ -122,10 +120,13 @@ const BottomNavigation: React.FC = () => {
{/* Bottom circle with glow */}
+ className={`absolute w-4 h-4 rounded-full border-1 border-cyan-900 shadow-lg shadow-[#2BACBE]/50 animate-pulse transition-all duration-300 ease-out ${active ? "opacity-100 scale-100 translate-y-[40px]" : "opacity-0 scale-0" + }`} + > + {/* Внутренний маленький круг */} +
+
+ ) })} diff --git a/src/components/CircularProgressDisplay.tsx b/src/components/CircularProgressDisplay.tsx index 2c7052b..fb0dc34 100644 --- a/src/components/CircularProgressDisplay.tsx +++ b/src/components/CircularProgressDisplay.tsx @@ -53,7 +53,7 @@ const CircularProgressDisplay: React.FC = ({ = ({ + id, + name, + progress, + color, + icon, + exercises, + nextExercise, +}) => { + const history = useHistory() + + return ( +
history.push(`/course/${id}/exercises`)} + className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]" + > +
+
+ {icon} +
+
+

{name}

+
+
+
+

{progress}% завершено

+
+
+ → +
+
+
+ ) +} + +export default CourseCard diff --git a/src/index.css b/src/index.css index e510444..6ea2d63 100644 --- a/src/index.css +++ b/src/index.css @@ -119,8 +119,8 @@ * { @apply border-border outline-ring/50; } - body { - @apply bg-background text-foreground; + html, body { + height: 100%; } } @@ -132,3 +132,7 @@ border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Shadow */ } + +.body { + overflow-y: auto !important; /* включаем вертикальную прокрутку */ +} diff --git a/src/pages/CourseComplete.tsx b/src/pages/CourseComplete.tsx index 452b5ed..265635a 100644 --- a/src/pages/CourseComplete.tsx +++ b/src/pages/CourseComplete.tsx @@ -21,7 +21,7 @@ const CourseComplete: React.FC = () => { }, []) return ( -
+
{/* Background Animation */}
diff --git a/src/pages/CourseExercises.tsx b/src/pages/CourseExercises.tsx index e20ff32..cba9ff4 100644 --- a/src/pages/CourseExercises.tsx +++ b/src/pages/CourseExercises.tsx @@ -81,7 +81,7 @@ const CourseExercises: React.FC = () => { } return ( -
+
{/* Header */}
diff --git a/src/pages/Courses.tsx b/src/pages/Courses.tsx index d2b2d01..2e89807 100644 --- a/src/pages/Courses.tsx +++ b/src/pages/Courses.tsx @@ -20,21 +20,8 @@ const Home: React.FC = () => { ] return ( -
- {/* Welcome Section */} -
-
-
-
-

Привет, Александр!

-

{currentDate}

-
-
- 👤 -
-
-
-
+
+ {/* Analytics Cards */}
diff --git a/src/pages/Exercise.tsx b/src/pages/Exercise.tsx index 89d26ba..3e104fe 100644 --- a/src/pages/Exercise.tsx +++ b/src/pages/Exercise.tsx @@ -120,7 +120,7 @@ const Exercise: React.FC = () => { ] return ( -
+
{/* Header */}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2c26d0d..bb4e20c 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -19,6 +19,11 @@ export default function Home() { ) }, []) + + + + + const stats = [ { value: "12", @@ -141,51 +146,61 @@ export default function Home() { const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses) return ( -
+
{/* Header */} -
-
+
+
-

Привет, Александр!

+

Привет, Александр!

{currentDate}

- {/* Circular Progress Display */} -
- -
-
-
-
{totalCourses}
-
Курсов
+
+ + +
+
+
Все курсы
+
{totalCourses}/1
+ +
+
+
Все упражнения
+
{totalExercises}/4
+ +
-
-
{totalExercises}
-
Упражнений
+ +
+
{/* Current Exercise */} -
-
-

Тренировка

{/* Changed from "Текущее упражнение" */} -
- Активно +
+ {/* Заголовок и статус */} +
+

Тренировка

+
+ Активно
-
-
-
- {/* Clock icon SVG */} + + {/* Основной блок с иконками и прогрессом */} +
+ {/* Иконка часов */} +
+
+ {/* Clock SVG */}
+ {/* Пульсирующая точка */}
-
-

Подъемы ног лежа

-

Восстановление колена • 3 подхода по 12

-
-
-
-
-
60%
+ + {/* Информация о упражнении */} +
+

Подъемы ног лежа

+

Восстановление колена • 3 подхода по 12

+ + {/* Прогрессбар */} +
+
+ {/* Процент */} +
{'60%'}
+
+ + {/* Кнопка продолжения */} +
@@ -231,68 +254,54 @@ export default function Home() {
{/* Quick Stats (Total Exercises & Total Courses) */} -
-
-
{totalExercises}
-
Всего упражнений
+
+
history.push("/courses")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300"> +
+ {/* Clock icon SVG */} + + + + +
+
Курсы
+
все назначенные
-
-
{totalCourses}
-
Всего курсов
+ + +
history.push("/course/${courseId}/exercises")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300"> +
+ {/* Clock icon SVG */} + + + + +
+
Упражнения
+
внутри текущего курса
- {/* Courses */} -
-
-

Мои курсы

- -
-
- {courses.map((course) => ( -
history.push(`/course/${course.id}/exercises`)} - className="glass-morphism rounded-3xl p-6 border border-white/50 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02] backdrop-blur-2xl" - > -
-
- {course.icon} -
- {course.exercises} -
-
-
-

{course.name}

-

Следующее: {course.nextExercise}

-
-
-
-

{course.progress}% завершено

-
-
- - - -
-
-
- ))} -
-
+
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 3931210..e78c196 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -13,7 +13,7 @@ const Settings: React.FC = () => { } return ( -
+
{/* Header */}
@@ -66,7 +66,7 @@ const Settings: React.FC = () => { {/* Medical Information */}
-
+

Медицинская информация