diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index 1e91fbe..3f72b07 100644 --- a/src/AppRoutes.tsx +++ b/src/AppRoutes.tsx @@ -1,48 +1,41 @@ -import { Route } from "react-router-dom" - -import Welcome from "./pages/Welcome" -import Login from "./pages/Login" -import Home from "./pages/Home" -import ForgotPasword from "./pages/ForgotPassword" -import Courses from "./pages/Courses" -import CourseExercises from "./pages/CourseExercises" -import Exercise from "./pages/Exercise" -import Settings from "./pages/Settings" -import CourseComplete from "./pages/CourseComplete" - - - - - -import { getRouteWelcome } from "./shared/consts/router" -import { getRouteLogin } from "./shared/consts/router" -import { getRouteHome } from "./shared/consts/router" -import { getRouteForgotPassword } from "./shared/consts/router" -import { getRouteCourses } from "./shared/consts/router" -import { getRouteCourseExercises } from "./shared/consts/router" -import { getRouteExercise } from "./shared/consts/router" -import { getRouteSettings } from "./shared/consts/router" -import { getRouteCourseComplete } from "./shared/consts/router" - - - - +import { Switch, Route, Redirect } from "react-router-dom"; +import Welcome from "./pages/Welcome"; +import Login from "./pages/Login"; +import Home from "./pages/Home"; +import ForgotPasword from "./pages/ForgotPassword"; +import Courses from "./pages/Courses"; +import CourseExercises from "./pages/CourseExercises"; +import Exercise from "./pages/Exercise"; +import Settings from "./pages/Settings"; +import CourseComplete from "./pages/CourseComplete"; +import { getRouteWelcome } from "./shared/consts/router"; +import { getRouteLogin } from "./shared/consts/router"; +import { getRouteHome } from "./shared/consts/router"; +import { getRouteForgotPassword } from "./shared/consts/router"; +import { getRouteCourses } from "./shared/consts/router"; +import { getRouteCourseExercises } from "./shared/consts/router"; +import { getRouteExercise } from "./shared/consts/router"; +import { getRouteSettings } from "./shared/consts/router"; +import { getRouteCourseComplete } from "./shared/consts/router"; const AppRoutes = () => ( - <> + + {/* Редирект с корня на /welcome */} + + + {/* Остальные маршруты */} - + - + - -) - -export default AppRoutes + +); +export default AppRoutes; \ No newline at end of file diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/test.tsx b/src/assets/test.tsx deleted file mode 100644 index 02ccd72..0000000 --- a/src/assets/test.tsx +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx index da87a22..6160994 100644 --- a/src/components/BottomNavigation.tsx +++ b/src/components/BottomNavigation.tsx @@ -8,91 +8,26 @@ import { getRouteCourses } from "../shared/consts/router" import { getRouteCourseExercises } from "../shared/consts/router" import { getRouteSettings } from "../shared/consts/router" +import { HomeIcon } from "./icons/HomeIcon" +import { CoursesIcon } from "./icons/CoursesIcon" +import { ExerciseIcon } from "./icons/ExerciseIcon" +import { SettingsIcon } from "./icons/SettingsIcon" + + const BottomNavigation: React.FC = () => { const history = useHistory() const location = useLocation() - // Define SVG icons directly within the component, with active state styling - const HomeIcon = ({ active }: { active: boolean; size?: number }) => ( - - - - - ) - - const CoursesIcon = ({ active }: { active: boolean; size?: number }) => ( - - - - ) - - const ExerciseIcon = ({ active }: { active: boolean; size?: number }) => ( - - - - - - - - - - - - ) - - const SettingsIcon = ({ active }: { active: boolean; size?: number }) => ( - - - - - ) - const navItems = [ { path: getRouteHome(), icon: HomeIcon, label: "Домой" }, { path: getRouteCourses(), icon: CoursesIcon, label: "Курсы" }, - { path: getRouteCourseExercises(':id'), icon: ExerciseIcon, label: "Тренировка" }, + { path: getRouteCourseExercises(":id"), icon: ExerciseIcon, label: "Тренировка" }, { path: getRouteSettings(), icon: SettingsIcon, label: "Меню" }, ] const isActive = (path: string) => { - // Проверка на совпадение или включение - return location.pathname === path || location.pathname.startsWith(path); + // Проверка на совпадение или включение + return location.pathname === path || location.pathname.startsWith(path) } return ( @@ -109,29 +44,31 @@ const BottomNavigation: React.FC = () => { > {/* Active state background (glassmorphism rectangle) */}
{/* Icon and Label container */}
- +
{item.label} {item.label}
{/* Bottom circle with glow */}
{/* Внутренний маленький круг */}
- ) })} diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 0d1c686..fe32317 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -27,9 +27,6 @@ const CourseCard: React.FC = ({ return ( - - -
history.push(getRouteCourseExercises(':id'))} 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]" diff --git a/src/components/cards/StatCard.tsx b/src/components/cards/StatCard.tsx new file mode 100644 index 0000000..29b995e --- /dev/null +++ b/src/components/cards/StatCard.tsx @@ -0,0 +1,40 @@ +"use client" + +import type React from "react" + +interface StatCardProps { + title: string + subtitle: string + icon: React.ComponentType<{ size?: number; className?: string; color?: string }> + iconColor: string + backgroundIconColor: string + onClick: () => void +} + +export const StatCard: React.FC = ({ + title, + subtitle, + icon: Icon, + iconColor, + backgroundIconColor, + onClick, +}) => { + return ( +
+ {/* Фоновая иконка */} + + + {/* Основная иконка */} +
+ +
+ + {/* Текст */} +
{title}
+
{subtitle}
+
+ ) +} diff --git a/src/components/cards/WorkoutCard.tsx b/src/components/cards/WorkoutCard.tsx new file mode 100644 index 0000000..5e3be9d --- /dev/null +++ b/src/components/cards/WorkoutCard.tsx @@ -0,0 +1,67 @@ +"use client" + +import type React from "react" + +interface WorkoutCardProps { + onBackClick: () => void + onCardClick: () => void +} + +export const WorkoutCard: React.FC = ({ onBackClick, onCardClick }) => { + return ( +
+ {/* Заголовок и статус */} +
+

Тренировка

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

В процессе

+

Текущее упражнение

+
+
+
+ ) +} diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx new file mode 100644 index 0000000..78ae7d3 --- /dev/null +++ b/src/components/icons/ArrowIcon.tsx @@ -0,0 +1,37 @@ +import type React from "react" + +interface IconProps { + size?: number + className?: string + direction?: "left" | "right" | "up" | "down" +} + +export const ArrowIcon: React.FC = ({ size = 24, className = "", direction = "left" }) => { + const getRotation = () => { + switch (direction) { + case "right": + return "rotate-0" + case "down": + return "rotate-90" + case "left": + return "rotate-180" + case "up": + return "rotate-270" + default: + return "rotate-180" + } + } + + return ( + + + + ) +} diff --git a/src/components/icons/CalendarIcon.tsx b/src/components/icons/CalendarIcon.tsx new file mode 100644 index 0000000..dc44f3b --- /dev/null +++ b/src/components/icons/CalendarIcon.tsx @@ -0,0 +1,23 @@ +import type React from "react" + +interface IconProps { + size?: number + className?: string + color?: string +} + +export const CalendarIcon: React.FC = ({ size = 40, className = "", color = "#2B8794" }) => ( + + + +) diff --git a/src/components/icons/ClockIcon.tsx b/src/components/icons/ClockIcon.tsx new file mode 100644 index 0000000..ef36b50 --- /dev/null +++ b/src/components/icons/ClockIcon.tsx @@ -0,0 +1,24 @@ +import type React from "react" + +interface IconProps { + size?: number + className?: string + color?: string +} + +export const ClockIcon: React.FC = ({ size = 40, className = "", color = "#2BACBE" }) => ( + + + + +) diff --git a/src/components/icons/CoursesIcon.tsx b/src/components/icons/CoursesIcon.tsx new file mode 100644 index 0000000..959c4aa --- /dev/null +++ b/src/components/icons/CoursesIcon.tsx @@ -0,0 +1,23 @@ +import type React from "react" + +interface IconProps { + active?: boolean + size?: number + className?: string +} + +export const CoursesIcon: React.FC = ({ active = false, size = 40, className = "" }) => ( + + + +) diff --git a/src/components/icons/DumbbellIcon.tsx b/src/components/icons/DumbbellIcon.tsx new file mode 100644 index 0000000..b0e0363 --- /dev/null +++ b/src/components/icons/DumbbellIcon.tsx @@ -0,0 +1,24 @@ +import type React from "react" + +interface IconProps { + size?: number + className?: string + color?: string +} + +export const DumbbellIcon: React.FC = ({ size = 40, className = "", color = "#FF8D28" }) => ( + + + + +) diff --git a/src/components/icons/ExerciseIcon.tsx b/src/components/icons/ExerciseIcon.tsx new file mode 100644 index 0000000..5081bd3 --- /dev/null +++ b/src/components/icons/ExerciseIcon.tsx @@ -0,0 +1,28 @@ +import type React from "react" + +interface IconProps { + active?: boolean + size?: number + className?: string +} + +export const ExerciseIcon: React.FC = ({ active = false, size = 40, className = "" }) => ( + + + + + + + + + + + +) diff --git a/src/components/icons/HomeIcon.tsx b/src/components/icons/HomeIcon.tsx new file mode 100644 index 0000000..c715f4b --- /dev/null +++ b/src/components/icons/HomeIcon.tsx @@ -0,0 +1,24 @@ +import type React from "react" + +interface IconProps { + active?: boolean + size?: number + className?: string +} + +export const HomeIcon: React.FC = ({ active = false, size = 40, className = "" }) => ( + + + +) diff --git a/src/components/icons/PlayIcon.tsx b/src/components/icons/PlayIcon.tsx new file mode 100644 index 0000000..5a0e0db --- /dev/null +++ b/src/components/icons/PlayIcon.tsx @@ -0,0 +1,13 @@ +import type React from "react" + +interface IconProps { + size?: number + className?: string + color?: string +} + +export const PlayIcon: React.FC = ({ size = 12, className = "", color = "currentColor" }) => ( + + + +) diff --git a/src/components/icons/SettingsIcon.tsx b/src/components/icons/SettingsIcon.tsx new file mode 100644 index 0000000..1824290 --- /dev/null +++ b/src/components/icons/SettingsIcon.tsx @@ -0,0 +1,23 @@ +import type React from "react" + +interface IconProps { + active?: boolean + size?: number + className?: string +} + +export const SettingsIcon: React.FC = ({ active = false, size = 40, className = "" }) => ( + + + +) diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 7cda209..5714aa7 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,16 +1,22 @@ "use client" import { useEffect, useState } from "react" -import { useHistory, Link } from "react-router-dom" +import { useHistory } from "react-router-dom" + + +import { CalendarIcon } from "../components/icons/CalendarIcon" +import { DumbbellIcon } from "../components/icons/DumbbellIcon" import HeaderNav from "../components/HeaderNav" import BottomNavigation from "../components/BottomNavigation" import CircularProgressDisplay from "../components/CircularProgressDisplay" + +import { WorkoutCard } from "../components/cards/WorkoutCard" +import { StatCard } from "../components/cards/StatCard" + import { getRouteExercise } from "../shared/consts/router" import { getRouteCourses } from "../shared/consts/router" - - import { getRouteCourseExercises } from "../shared/consts/router" export default function Home() { @@ -27,16 +33,12 @@ export default function Home() { ) }, []) - - - const courses = [ { id: 1, name: "Восстановление колена", progress: 75, color: "from-[#2BACBE] to-cyan-600", - icon: "🦵", exercises: 12, nextExercise: "Подъемы ног лежа", }, @@ -45,7 +47,6 @@ export default function Home() { name: "Укрепление спины", progress: 45, color: "from-emerald-500 to-green-600", - icon: "🏃‍♂️", exercises: 8, nextExercise: "Планка", }, @@ -54,7 +55,6 @@ export default function Home() { name: "Реабилитация плеча", progress: 90, color: "from-purple-500 to-pink-600", - icon: "💪", exercises: 10, nextExercise: "Вращения плечами", }, @@ -65,14 +65,26 @@ export default function Home() { const totalExercises = courses.reduce((sum, course) => sum + course.exercises, 0) const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses) + const handleWorkoutClick = () => { + history.push(getRouteExercise(":id")) + } + + const handleBackClick = () => { + history.goBack() + } + + const handleCoursesClick = () => { + history.push(getRouteCourses()) + } + + const handleExercisesClick = () => { + history.push(getRouteCourseExercises(":id")) + } + return ( - - -
- - +
@@ -103,119 +115,34 @@ export default function Home() {
-
history.push(getRouteExercise(':id'))} className="px-4 sm:px-6 space-y-6 "> - {/* Current Exercise */} -
- {/* Заголовок и статус */} -
-

Тренировка

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

В процессе

-

Текущее упражнение

- {/* Кнопка с стрелкой */} -
-
-
+
+ {/* Current Exercise */} + + {/* Quick Stats (Total Exercises & Total Courses) */}
-
history.push(getRouteCourses())} 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 overflow-hidden"> - - - -
- {/* Clock icon SVG */} - - - -
-
Курсы
-
все назначенные
-
-
history.push(getRouteCourseExercises(':id'))} 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 overflow-hidden"> - - - - -
- - - - -
-
Упражнения
-
внутри текущего курса
-
+ +
+
) -} +} \ No newline at end of file diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 599bac6..0e26b26 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -4,7 +4,7 @@ import type React from "react" import { useEffect, useState } from "react" import { useIonRouter } from '@ionic/react'; -const CourseComplete: React.FC = () => { +const Welcome: React.FC = () => { const [animationPhase, setAnimationPhase] = useState(0) @@ -140,7 +140,7 @@ const CourseComplete: React.FC = () => { ) } -export default CourseComplete +export default Welcome //