welcome

src/App.tsx

@@ -4,21 +4,21 @@ import { IonReactRouter } from "@ionic/react-router"
 import AppRoutes from "./AppRoutes"
 import "./index.css"
 import "@ionic/react/css/core.css"
-import Header from "./components/Header"
+// import Header from "./components/Header"
-import Footer from "./components/Footer"
+// import Footer from "./components/Footer"
 
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <div className="flex flex-col h-screen bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
-        <Header />
+
         {/* Контент с отступом равным высоте Header */}
         <div className="flex-1 overflow-auto pt-16 pb-16">
           <IonRouterOutlet>
             <AppRoutes />
           </IonRouterOutlet>
         </div>
-        <Footer />
+
       </div>
     </IonReactRouter>
   </IonApp>

src/AppRoutes.tsx

@@ -2,13 +2,15 @@ import { Route } from "react-router-dom"
 import Home from "./pages/Home"
 import Login from "./pages/Login"
 import Register from "./pages/Register"
+import Welcome from "./pages/Welcome"
 
 const AppRoutes = () => (
-  <>
+  <> <Route exact path="/" component={Welcome} />
     <Route path="/home" component={Home} exact />
     <Route path="/register" component={Register} />
     <Route path="/login" component={Login} />
-    <Route exact path="/" render={() => <Home />} />
+     <Route path="/welcome" component={Welcome} />
+\
   </>
 )
 

src/components/ExerciseItem.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { IonCard, IonCardContent, IonButton, IonIcon, IonBadge } from "@ionic/react"
+import { playOutline, videocamOutline, closeCircleOutline } from "ionicons/icons" // Добавлен videocamOutline и closeCircleOutline
+
+interface Exercise {
+  id: number
+  name: string
+  duration: number // в секундах
+  description: string
+  difficulty: "easy" | "medium" | "hard"
+  completed: boolean
+  videoUrl?: string // Добавлено поле для URL видео
+}
+
+interface ExerciseItemProps {
+  exercise: Exercise
+  onStart: (exercise: Exercise) => void
+  isCurrent: boolean
+  isDisabled: boolean
+  onVideoPlayToggle: (isPlaying: boolean) => void // Добавлено для уведомления родителя
+}
+
+const ExerciseItem: React.FC<ExerciseItemProps> = ({ exercise, onStart, isCurrent, isDisabled, onVideoPlayToggle }) => {
+  const [showVideo, setShowVideo] = useState(false)
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
+  }
+
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty) {
+      case "easy":
+        return "text-emerald-400"
+      case "medium":
+        return "text-yellow-400"
+      case "hard":
+        return "text-red-400"
+      default:
+        return "text-slate-400"
+    }
+  }
+
+  const getDifficultyBg = (difficulty: string) => {
+    switch (difficulty) {
+      case "easy":
+        return "bg-emerald-500/20 border-emerald-500/30"
+      case "medium":
+        return "bg-yellow-500/20 border-yellow-500/30"
+      case "hard":
+        return "bg-red-500/20 border-red-500/30"
+      default:
+        return "bg-slate-500/20 border-slate-500/30"
+    }
+  }
+
+  const handleVideoToggle = () => {
+    setShowVideo((prev) => {
+      onVideoPlayToggle(!prev) // Уведомляем родителя об изменении состояния видео
+      return !prev
+    })
+  }
+
+  return (
+    <IonCard
+      className={`${exercise.completed ? "bg-emerald-50/80" : "bg-white/80"} backdrop-blur-sm border border-teal-200/50 shadow-md`}
+    >
+      <IonCardContent>
+        <div className="flex justify-between items-start mb-3">
+          <div className="flex-1">
+            <h3 className={`font-semibold ${exercise.completed ? "text-emerald-700" : "text-slate-800"}`}>
+              {exercise.name}
+            </h3>
+            <p className="text-sm text-slate-600 mt-1">{exercise.description}</p>
+          </div>
+          {exercise.completed && (
+            <IonBadge color="success" className="ml-2">
+              Выполнено
+            </IonBadge>
+          )}
+        </div>
+
+        {showVideo && exercise.videoUrl && (
+          <div className="mb-4 relative">
+            <video
+              src={exercise.videoUrl}
+              controls
+              poster={`/placeholder.svg?height=200&width=300&query=${encodeURIComponent(exercise.name)}`}
+              className="w-full rounded-lg"
+            >
+              Ваш браузер не поддерживает видео тег.
+            </video>
+            <IonButton
+              fill="clear"
+              size="small"
+              onClick={handleVideoToggle}
+              className="absolute top-2 right-2 text-white bg-black/50 rounded-full"
+            >
+              <IonIcon icon={closeCircleOutline} />
+            </IonButton>
+          </div>
+        )}
+
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-slate-500">{formatTime(exercise.duration)}</span>
+            <IonBadge
+              className={`${getDifficultyBg(exercise.difficulty)} ${getDifficultyColor(exercise.difficulty)} border`}
+            >
+              {exercise.difficulty === "easy" ? "Легко" : exercise.difficulty === "medium" ? "Средне" : "Сложно"}
+            </IonBadge>
+          </div>
+
+          <div className="flex gap-2">
+            {exercise.videoUrl && (
+              <IonButton
+                size="small"
+                onClick={handleVideoToggle}
+                className="bg-gradient-to-r from-blue-500 to-indigo-500"
+                disabled={isCurrent} // Отключаем кнопку видео, если упражнение активно
+              >
+                <IonIcon icon={videocamOutline} slot="start" />
+                {showVideo ? "Скрыть" : "Видео"}
+              </IonButton>
+            )}
+
+            {!exercise.completed && !isCurrent && (
+              <IonButton
+                size="small"
+                onClick={() => onStart(exercise)}
+                className="bg-gradient-to-r from-teal-500 to-cyan-500"
+                disabled={isDisabled || showVideo} // Отключаем кнопку, если другое упражнение активно или видео проигрывается
+              >
+                <IonIcon icon={playOutline} slot="start" />
+                Начать
+              </IonButton>
+            )}
+            {isCurrent && (
+              <IonBadge color="primary" className="ml-2 animate-pulse">
+                Активно
+              </IonBadge>
+            )}
+          </div>
+        </div>
+      </IonCardContent>
+    </IonCard>
+  )
+}
+
+export default ExerciseItem

src/components/Header.tsx

@@ -1,161 +1,40 @@
 "use client"
 
-import { useState } from "react"
+function Header() {
-
-interface HeaderProps {
-  onMenuToggle?: () => void
-  isMenuOpen?: boolean
-}
-
-function Header({ onMenuToggle, isMenuOpen = false }: HeaderProps) {
-  const [internalMenuOpen, setInternalMenuOpen] = useState(false)
-
-  const menuOpen = isMenuOpen || internalMenuOpen
-
-  const handleMenuToggle = () => {
-    if (onMenuToggle) {
-      onMenuToggle()
-    } else {
-      setInternalMenuOpen(!internalMenuOpen)
-    }
-  }
-
   return (
-    <div className="fixed top-0 left-0 right-0 z-50">
+    <div className="fixed top-0 left-0 right-0 z-50 shadow-lg backdrop-blur-md bg-slate-900/80 border-b border-teal-700/30 transition-all duration-300">
-      {/* Основной контейнер */}
+      <div className="relative max-w-7xl mx-auto px-6 py-4">
-      <div className="relative">
+        {/* Верхняя граница с градиентом */}
-        {/* Фон с размытием */}
+        <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-2xl border-b border-teal-700/30 rounded-lg" />
-        <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-2xl border-b border-teal-700/30" />
 
-        {/* Тонкая нижняя линия */}
+        {/* Нижняя граница с градиентом */}
         <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-teal-500/60 to-transparent" />
 
         {/* Контент */}
-        <div className="relative px-6 py-4">
+        <div className="flex items-center justify-between relative z-10">
-          <div className="flex items-center justify-between max-w-7xl mx-auto">
+          {/* Логотип и название */}
-            {/* Логотип */}
+          <div className="flex items-center space-x-4">
-            <div className="flex items-center space-x-3">
+            {/* Иконка с градиентом */}
-              {/* Иконка логотипа */}
+            <div className="w-12 h-12 bg-gradient-to-br from-teal-600 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg shadow-teal-500/20 transition-transform hover:scale-105 hover:shadow-xl">
-              <div className="w-10 h-10 bg-gradient-to-br from-teal-600 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg shadow-teal-500/20">
+              <svg
-                <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                className="w-6 h-6 text-white"
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+                fill="currentColor"
-                </svg>
+                viewBox="0 0 24 24"
-              </div>
+              >
-
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-              {/* Текст логотипа */}
+              </svg>
-              <div className="flex flex-col">
+            </div>
-                <h1 className="text-lg font-bold bg-gradient-to-r from-teal-300 to-cyan-300 bg-clip-text text-transparent leading-tight">
+            {/* Название и описание */}
-                  МедРеабилитация
+            <div className="flex flex-col font-semibold text-white">
-                </h1>
+              <h1 className="text-xl bg-gradient-to-r from-teal-300 to-cyan-300 bg-clip-text text-transparent leading-tight tracking-wide transition-all duration-300 hover:scale-105 hover:text-cyan-200">
-                <p className="text-xs text-teal-400/80 leading-tight">Центр восстановления</p>
+                МедРеабилитация
-              </div>
+              </h1>
+              <p className="text-xs text-teal-400/80 mt-px">Центр восстановления</p>
             </div>
-
-            {/* Меню-бургер */}
-            <button
-              onClick={handleMenuToggle}
-              className={`
-                relative flex flex-col items-center justify-center w-10 h-10
-                rounded-lg transition-all duration-200 ease-out
-                focus:outline-none focus:ring-2 focus:ring-teal-400/50 focus:ring-offset-2 focus:ring-offset-slate-900
-                ${menuOpen ? "bg-teal-900/30" : "hover:bg-teal-900/20"}
-              `}
-              aria-label="Меню"
-            >
-              {/* Линии бургера */}
-              <div className="flex flex-col space-y-1.5">
-                <div
-                  className={`
-                    w-5 h-0.5 bg-gradient-to-r from-teal-300 to-cyan-300 rounded-full
-                    transition-all duration-200 ease-out
-                    ${menuOpen ? "rotate-45 translate-y-2" : ""}
-                  `}
-                />
-                <div
-                  className={`
-                    w-5 h-0.5 bg-gradient-to-r from-teal-300 to-cyan-300 rounded-full
-                    transition-all duration-200 ease-out
-                    ${menuOpen ? "opacity-0" : "opacity-100"}
-                  `}
-                />
-                <div
-                  className={`
-                    w-5 h-0.5 bg-gradient-to-r from-teal-300 to-cyan-300 rounded-full
-                    transition-all duration-200 ease-out
-                    ${menuOpen ? "-rotate-45 -translate-y-2" : ""}
-                  `}
-                />
-              </div>
-
-              {/* Активный индикатор */}
-              {menuOpen && <div className="absolute inset-0 rounded-lg border border-teal-400/30 bg-teal-900/20" />}
-            </button>
           </div>
         </div>
       </div>
-
-      {/* Выпадающее меню */}
-      {menuOpen && (
-        <div className="relative">
-          {/* Фон меню */}
-          <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-2xl border-b border-teal-700/30" />
-
-          {/* Контент меню */}
-          <div className="relative px-6 py-4">
-            <div className="max-w-7xl mx-auto">
-              <nav className="space-y-2">
-                {[
-                  { label: "Главная", icon: "🏠" },
-                  { label: "Мои программы", icon: "📋" },
-                  { label: "Расписание", icon: "📅" },
-                  { label: "Прогресс", icon: "📊" },
-                  { label: "Врачи", icon: "👨‍⚕️" },
-                  { label: "Настройки", icon: "⚙️" },
-                ].map((item, index) => (
-                  <a
-                    key={index}
-                    href="#"
-                    className="flex items-center space-x-3 px-4 py-3 rounded-lg bg-teal-900/20 border border-teal-600/20 hover:bg-teal-900/30 transition-colors duration-200 group"
-                  >
-                    <span className="text-lg">{item.icon}</span>
-                    <span className="text-slate-300 group-hover:text-teal-200 transition-colors duration-200">
-                      {item.label}
-                    </span>
-                  </a>
-                ))}
-              </nav>
-
-              {/* Разделитель */}
-              <div className="my-4 h-px bg-gradient-to-r from-transparent via-teal-600/30 to-transparent" />
-
-              {/* Дополнительные опции */}
-              <div className="flex items-center justify-between px-4 py-3 rounded-lg bg-teal-900/10 border border-teal-600/10">
-                <div className="flex items-center space-x-3">
-                  <div className="w-8 h-8 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-full flex items-center justify-center">
-                    <span className="text-white text-sm font-medium">И</span>
-                  </div>
-                  <div>
-                    <p className="text-teal-200 text-sm font-medium">Иван Петров</p>
-                    <p className="text-teal-400/80 text-xs">Пациент</p>
-                  </div>
-                </div>
-                <button className="text-teal-400 hover:text-teal-300 transition-colors duration-200">
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
-
 export default Header

src/index.css

@@ -1,5 +1,19 @@
 @import "tailwindcss";
 
+
+@keyframes gradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.animate-gradient {
+  background-size: 300% 300%;
+  animation: gradient 10s ease infinite;
+}
+
+
+
 /* Ionic переменные для кастомизации */
 :root {
   /* Основные цвета приложения */

src/pages/Account.tsx

@@ -0,0 +1,69 @@
+import type React from "react"
+import { IonPage, IonContent, IonList, IonItem, IonLabel, IonIcon, IonToggle, IonButton } from "@ionic/react"
+import {
+  personCircleOutline,
+  mailOutline,
+  lockClosedOutline,
+  notificationsOutline,
+  moonOutline,
+  logOutOutline,
+} from "ionicons/icons"
+import Header from "../components/Header"
+import Footer from "../components/Footer"
+
+const Account: React.FC = () => {
+  return (
+    <IonPage>
+      <Header title="Account" />
+      <IonContent fullscreen className="ion-padding bg-dark-app">
+        <div className="px-4 py-4">
+          <div className="flex flex-col items-center mb-8">
+            <img
+              src="/placeholder.svg?height=100&width=100"
+              alt="Profile"
+              className="w-24 h-24 rounded-full object-cover mb-4 border-2 border-tertiary-app"
+            />
+            <h2 className="text-2xl font-bold text-text-light-app">Himanshi Kashyap</h2>
+            <p className="text-sm text-text-muted-app">himanshi.kashyap@example.com</p>
+          </div>
+
+          <IonList className="bg-card-bg-app rounded-lg-app border border-border-app mb-8">
+            <IonItem lines="none" className="rounded-t-lg-app">
+              <IonIcon icon={personCircleOutline} slot="start" color="tertiary" />
+              <IonLabel className="text-text-light-app">Edit Profile</IonLabel>
+            </IonItem>
+            <IonItem lines="none">
+              <IonIcon icon={mailOutline} slot="start" color="tertiary" />
+              <IonLabel className="text-text-light-app">Change Email</IonLabel>
+            </IonItem>
+            <IonItem lines="none" className="rounded-b-lg-app">
+              <IonIcon icon={lockClosedOutline} slot="start" color="tertiary" />
+              <IonLabel className="text-text-light-app">Change Password</IonLabel>
+            </IonItem>
+          </IonList>
+
+          <IonList className="bg-card-bg-app rounded-lg-app border border-border-app mb-8">
+            <IonItem lines="none" className="rounded-t-lg-app">
+              <IonIcon icon={notificationsOutline} slot="start" color="tertiary" />
+              <IonLabel className="text-text-light-app">Notifications</IonLabel>
+              <IonToggle slot="end" color="tertiary" checked={true} />
+            </IonItem>
+            <IonItem lines="none" className="rounded-b-lg-app">
+              <IonIcon icon={moonOutline} slot="start" color="tertiary" />
+              <IonLabel className="text-text-light-app">Dark Mode</IonLabel>
+              <IonToggle slot="end" color="tertiary" checked={true} />
+            </IonItem>
+          </IonList>
+
+          <IonButton expand="block" fill="outline" color="danger" className="rounded-md-app">
+            <IonIcon icon={logOutOutline} slot="start" />
+            Log Out
+          </IonButton>
+        </div>
+      </IonContent>
+      <Footer />
+    </IonPage>
+  )
+}
+
+export default Account

src/pages/Exercises.tsx

@@ -0,0 +1,239 @@
+"use client"
+
+import type React from "react"
+import { useState, useEffect } from "react"
+import {
+  IonContent,
+  IonPage,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonButton,
+  IonIcon,
+  IonProgressBar,
+} from "@ionic/react"
+import { playOutline, pauseOutline, stopOutline, timerOutline, fitnessOutline, trophyOutline } from "ionicons/icons"
+import ExerciseItem from "../components/ExerciseItem" // Импортируем новый компонент
+
+interface Exercise {
+  id: number
+  name: string
+  duration: number // в секундах
+  description: string
+  difficulty: "easy" | "medium" | "hard"
+  completed: boolean
+  videoUrl?: string // Добавлено поле для URL видео
+}
+
+const ExercisesPage: React.FC = () => {
+  const [currentExercise, setCurrentExercise] = useState<Exercise | null>(null)
+  const [timeLeft, setTimeLeft] = useState(0)
+  const [isRunning, setIsRunning] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
+  const [isAnyVideoPlaying, setIsAnyVideoPlaying] = useState(false) // Новое состояние для отслеживания видео
+
+  const initialExercises: Exercise[] = [
+    {
+      id: 1,
+      name: "Разминка плечевого сустава",
+      duration: 300, // 5 минут
+      description: "Медленные круговые движения плечами для восстановления подвижности",
+      difficulty: "easy",
+      completed: false, // Изначально все не выполнено
+      videoUrl: "/placeholder.svg?height=200&width=300", // Пример видео URL
+    },
+    {
+      id: 2,
+      name: "Упражнения для кисти",
+      duration: 600, // 10 минут
+      description: "Сжимание и разжимание кулака, вращения кистью",
+      difficulty: "medium",
+      completed: false,
+      videoUrl: "/placeholder.svg?height=200&width=300", // Пример видео URL
+    },
+    {
+      id: 3,
+      name: "Растяжка мышц руки",
+      duration: 450, // 7.5 минут
+      description: "Статические упражнения на растяжку поврежденных мышц",
+      difficulty: "hard",
+      completed: false,
+      videoUrl: "/placeholder.svg?height=200&width=300", // Пример видео URL
+    },
+    {
+      id: 4,
+      name: "Укрепление предплечья",
+      duration: 400, // 6.6 минут
+      description: "Упражнения с легкими гантелями для укрепления мышц предплечья",
+      difficulty: "medium",
+      completed: false,
+      videoUrl: "/placeholder.svg?height=200&width=300", // Пример видео URL
+    },
+    {
+      id: 5,
+      name: "Координационные упражнения",
+      duration: 500, // 8.3 минут
+      description: "Упражнения на баланс и мелкую моторику",
+      difficulty: "hard",
+      completed: false,
+      videoUrl: "/placeholder.svg?height=200&width=300", // Пример видео URL
+    },
+  ]
+
+  const [exerciseList, setExerciseList] = useState<Exercise[]>(() => {
+    // Попытка загрузить состояние из localStorage
+    if (typeof window !== "undefined") {
+      const savedExercises = localStorage.getItem("rehab_exercises")
+      if (savedExercises) {
+        return JSON.parse(savedExercises)
+      }
+    }
+    return initialExercises
+  })
+
+  // Сохранение состояния в localStorage при изменении
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("rehab_exercises", JSON.stringify(exerciseList))
+    }
+  }, [exerciseList])
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | undefined
+
+    if (isRunning && !isPaused && timeLeft > 0) {
+      interval = setInterval(() => {
+        setTimeLeft((prevTime) => prevTime - 1)
+      }, 1000)
+    } else if (timeLeft === 0 && currentExercise && isRunning) {
+      // Упражнение завершено
+      setIsRunning(false)
+      setCurrentExercise(null)
+      // Отмечаем упражнение как выполненное
+      setExerciseList((prev) => prev.map((ex) => (ex.id === currentExercise.id ? { ...ex, completed: true } : ex)))
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  }, [isRunning, isPaused, timeLeft, currentExercise])
+
+  const startExercise = (exercise: Exercise) => {
+    setCurrentExercise(exercise)
+    setTimeLeft(exercise.duration)
+    setIsRunning(true)
+    setIsPaused(false)
+  }
+
+  const pauseExercise = () => {
+    setIsPaused((prev) => !prev)
+  }
+
+  const stopExercise = () => {
+    setIsRunning(false)
+    setIsPaused(false)
+    setCurrentExercise(null)
+    setTimeLeft(0)
+  }
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
+  }
+
+  const completedCount = exerciseList.filter((ex) => ex.completed).length
+  const totalCount = exerciseList.length
+  const progressPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
+
+  // Обработчик для отслеживания состояния воспроизведения видео
+  const handleVideoPlayToggle = (isPlaying: boolean) => {
+    setIsAnyVideoPlaying(isPlaying)
+  }
+
+  return (
+    <IonPage>
+      <IonContent className="bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
+        <div className="p-4 space-y-6">
+          {/* Общий прогресс */}
+          <IonCard className="bg-white/80 backdrop-blur-sm border border-teal-200/50 shadow-lg">
+            <IonCardHeader>
+              <IonCardTitle className="text-slate-800 flex items-center gap-2">
+                <IonIcon icon={trophyOutline} className="text-teal-600" />
+                Общий прогресс
+              </IonCardTitle>
+            </IonCardHeader>
+            <IonCardContent>
+              <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <span className="text-slate-600">Выполнено упражнений</span>
+                  <span className="font-bold text-teal-600">
+                    {completedCount}/{totalCount}
+                  </span>
+                </div>
+                <IonProgressBar value={progressPercentage / 100} className="h-2 rounded-full" color="success" />
+                <div className="text-center text-sm text-slate-500">{progressPercentage.toFixed(0)}% завершено</div>
+              </div>
+            </IonCardContent>
+          </IonCard>
+
+          {/* Текущее упражнение (если активно) */}
+          {currentExercise && (
+            <IonCard className="bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-xl">
+              <IonCardHeader>
+                <IonCardTitle className="flex items-center gap-2">
+                  <IonIcon icon={timerOutline} />
+                  Текущее упражнение
+                </IonCardTitle>
+              </IonCardHeader>
+              <IonCardContent>
+                <div className="space-y-4">
+                  <h3 className="text-lg font-semibold">{currentExercise.name}</h3>
+                  <div className="text-center">
+                    <div className="text-4xl font-bold mb-2">{formatTime(timeLeft)}</div>
+                    <IonProgressBar
+                      value={(currentExercise.duration - timeLeft) / currentExercise.duration}
+                      className="h-2 rounded-full"
+                    />
+                  </div>
+                  <div className="flex gap-2 justify-center">
+                    <IonButton fill="outline" color="light" onClick={pauseExercise}>
+                      <IonIcon icon={isPaused ? playOutline : pauseOutline} slot="start" />
+                      {isPaused ? "Продолжить" : "Пауза"}
+                    </IonButton>
+                    <IonButton fill="outline" color="light" onClick={stopExercise}>
+                      <IonIcon icon={stopOutline} slot="start" />
+                      Остановить
+                    </IonButton>
+                  </div>
+                </div>
+              </IonCardContent>
+            </IonCard>
+          )}
+
+          {/* Список упражнений */}
+          <div className="space-y-4">
+            <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+              <IonIcon icon={fitnessOutline} className="text-teal-600" />
+              Список упражнений
+            </h2>
+
+            {exerciseList.map((exercise) => (
+              <ExerciseItem
+                key={exercise.id}
+                exercise={exercise}
+                onStart={startExercise}
+                isCurrent={currentExercise?.id === exercise.id}
+                isDisabled={!!currentExercise || isAnyVideoPlaying} // Отключаем, если есть активное упражнение или видео
+                onVideoPlayToggle={handleVideoPlayToggle} // Передаем обработчик
+              />
+            ))}
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  )
+}
+
+export default ExercisesPage

src/pages/Home.tsx

@@ -16,6 +16,9 @@ import {
 } from "@ionic/react"
 import { playOutline, pauseOutline, stopOutline, timerOutline, fitnessOutline, trophyOutline } from "ionicons/icons"
 
+import Header from "../components/Header"
+import Footer from "../components/Footer"
+
 interface Exercise {
   id: number
   name: string
@@ -135,6 +138,7 @@ const Home: React.FC = () => {
   return (
     <IonPage>
       <IonContent className="bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
+        <Header />
         <div className="p-4 space-y-6">
           {/* Приветствие и статистика */}
           <div className="text-center mb-6">
@@ -194,6 +198,7 @@ const Home: React.FC = () => {
                     </IonButton>
                   </div>
                 </div>
+             
               </IonCardContent>
             </IonCard>
           )}
@@ -256,6 +261,7 @@ const Home: React.FC = () => {
           </div>
         </div>
       </IonContent>
+         <Footer />
     </IonPage>
   )
 }

src/pages/Welcome.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import React, { useEffect } from "react"
+import { useIonRouter } from '@ionic/react';
+
+const Welcome: React.FC = () => {
+  const router = useIonRouter()
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      router.push("/home", "forward")
+    }, 5000) // Задержка 3 секунды
+
+    return () => clearTimeout(timer)
+  }, [router])
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-teal-500 to-cyan-500">
+      <h1 className="text-4xl md:text-5xl font-extrabold leading-tight text-center text-gray-800 max-w-2xl transition-transform duration-300 ease-in-out">
+        Восстановление<br />начинается здесь
+      </h1>
+    </div>
+  )
+}
+
+export default Welcome