Versel

src/App.tsx

@@ -1,34 +1,27 @@
-import React from 'react';
-import { IonApp, IonRouterOutlet } from '@ionic/react';
-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 Footer from './components/Footer';
+import type React from "react"
+import { IonApp, IonRouterOutlet } from "@ionic/react"
+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 Footer from "./components/Footer"
 
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
-
-<div className='flex flex-col h-screen bg-green-300'>
-  <Header />
-
-  {/* Контент с отступом равным высоте Header */}
-  <div className='flex-1 overflow-auto'>
-    <IonRouterOutlet>
-      <AppRoutes />
-    </IonRouterOutlet>
-  </div>
-
-  <Footer />
-</div>
-
+      <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>
-);
+)
 
-export default App;
+export default App

src/AppRoutes.tsx

@@ -1,15 +1,15 @@
-import { Route } from 'react-router-dom';
-
-import Home from './pages/Home';
-import Login from './pages/Login';
-import Register from './pages/Register';
+import { Route } from "react-router-dom"
+import Home from "./pages/Home"
+import Login from "./pages/Login"
+import Register from "./pages/Register"
 
 const AppRoutes = () => (
   <>
     <Route path="/home" component={Home} exact />
     <Route path="/register" component={Register} />
     <Route path="/login" component={Login} />
+    <Route exact path="/" render={() => <Home />} />
   </>
-);
+)
 
-export default AppRoutes;
+export default AppRoutes

src/components/Footer.tsx

@@ -1,12 +1,176 @@
-import { IonRouterLink } from '@ionic/react';
+"use client"
 
-function Footer() {
-    return (
-        <div className='w-full bg-fuchsia-400 shadow h-12 px-4 flex justify-center items-center fixed bottom-0 left-0 right-0 bg-opacity-80'>
-            {/* Можно добавить содержимое футера */}
-            Футер
-        </div>
-    );
+import { useState } from "react"
+
+type TabType = "home" | "courses" | "profile"
+
+interface FooterProps {
+  onTabChange?: (tab: TabType) => void
+  activeTab?: TabType
 }
 
-export default Footer;
+// Строгие и аккуратные SVG иконки
+const HomeIcon = ({ filled = false, className = "" }) => (
+  <svg
+    className={className}
+    fill={filled ? "currentColor" : "none"}
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={filled ? 0 : 1.5}
+  >
+    {filled ? (
+      <path d="M11.47 3.841a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.061l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.689z" />
+    ) : (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+    )}
+  </svg>
+)
+
+const BookIcon = ({ filled = false, className = "" }) => (
+  <svg
+    className={className}
+    fill={filled ? "currentColor" : "none"}
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={filled ? 0 : 1.5}
+  >
+    {filled ? (
+      <path d="M11.25 4.533A9.707 9.707 0 006 3a9.735 9.735 0 00-3.25.555.75.75 0 00-.5.707v14.25a.75.75 0 001 .707A8.237 8.237 0 016 18.75c1.995 0 3.823.707 5.25 1.886V4.533zM12.75 20.636A8.214 8.214 0 0118 18.75c.966 0 1.89.166 2.75.47a.75.75 0 001-.708V4.262a.75.75 0 00-.5-.707A9.735 9.735 0 0018 3a9.707 9.707 0 00-5.25 1.533v16.103z" />
+    ) : (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 6.042A9.02 9.02 0 016 3.75c-1.052 0-2.062.18-3 .512v14.25A8.998 8.998 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a9.02 9.02 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.998 8.998 0 0018 18a8.998 8.998 0 00-6 2.292m0-14.25v14.25"
+      />
+    )}
+  </svg>
+)
+
+const UserIcon = ({ filled = false, className = "" }) => (
+  <svg
+    className={className}
+    fill={filled ? "currentColor" : "none"}
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={filled ? 0 : 1.5}
+  >
+    {filled ? (
+      <path
+        fillRule="evenodd"
+        d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
+        clipRule="evenodd"
+      />
+    ) : (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    )}
+  </svg>
+)
+
+function Footer({ onTabChange, activeTab: controlledActiveTab }: FooterProps) {
+  const [internalActiveTab, setInternalActiveTab] = useState<TabType>("home")
+
+  const activeTab = controlledActiveTab || internalActiveTab
+
+  const handleTabChange = (tab: TabType) => {
+    if (!controlledActiveTab) {
+      setInternalActiveTab(tab)
+    }
+    onTabChange?.(tab)
+  }
+
+  const tabs = [
+    {
+      id: "home" as TabType,
+      label: "Главная",
+      icon: HomeIcon,
+    },
+    {
+      id: "courses" as TabType,
+      label: "Курсы",
+      icon: BookIcon,
+    },
+    {
+      id: "profile" as TabType,
+      label: "Профиль",
+      icon: UserIcon,
+    },
+  ]
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50">
+      {/* Основной контейнер */}
+      <div className="relative">
+        {/* Фон с размытием */}
+        <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-2xl border-t border-teal-700/30" />
+
+        {/* Тонкая верхняя линия */}
+        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-teal-500/60 to-transparent" />
+
+        {/* Контент */}
+        <div className="relative px-8 py-4">
+          <div className="flex justify-center items-center max-w-sm mx-auto">
+            <div className="flex space-x-12">
+              {tabs.map((tab) => {
+                const isActive = activeTab === tab.id
+                const Icon = tab.icon
+
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => handleTabChange(tab.id)}
+                    className={`
+                      group relative flex flex-col items-center justify-center
+                      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
+                      rounded-lg p-2 min-w-[56px]
+                      ${isActive ? "" : "hover:bg-teal-900/20"}
+                    `}
+                  >
+                    {/* Активный индикатор */}
+                    {isActive && (
+                      <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-8 h-0.5 bg-gradient-to-r from-teal-400 to-cyan-400 rounded-full" />
+                    )}
+
+                    {/* Иконка */}
+                    <div className="mb-1">
+                      <Icon
+                        filled={isActive}
+                        className={`
+                          w-6 h-6 transition-colors duration-200
+                          ${isActive ? "text-teal-300" : "text-slate-400 group-hover:text-teal-400"}
+                        `}
+                      />
+                    </div>
+
+                    {/* Подпись */}
+                    <span
+                      className={`
+                        text-xs font-medium transition-colors duration-200
+                        ${isActive ? "text-teal-200" : "text-slate-500 group-hover:text-teal-300"}
+                      `}
+                    >
+                      {tab.label}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Нижний отступ для мобильных устройств */}
+        <div className="h-2 bg-slate-900/95 sm:h-0" />
+      </div>
+    </div>
+  )
+}
+
+export default Footer

src/components/Header.tsx

@@ -1,17 +1,161 @@
-import { IonRouterLink } from '@ionic/react';
+"use client"
 
-function Header() {
-    return (
-        <div className='w-full z-50 bg-fuchsia-400 shadow h-12 px-4 flex justify-between items-center fixed top-0 left-0 right-0 bg-opacity-80'>
-            <IonRouterLink href='/home' className='cursor-pointer'>
-                Вмеда
-            </IonRouterLink>
+import { useState } from "react"
 
-            <IonRouterLink href="/register" className="text-sm">
-                Зарегистрироваться
-            </IonRouterLink>
-        </div>
-    );
+interface HeaderProps {
+  onMenuToggle?: () => void
+  isMenuOpen?: boolean
 }
 
-export default Header;
+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="relative">
+        {/* Фон с размытием */}
+        <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 max-w-7xl mx-auto">
+            {/* Логотип */}
+            <div className="flex items-center space-x-3">
+              {/* Иконка логотипа */}
+              <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 className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <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>
+
+              {/* Текст логотипа */}
+              <div className="flex flex-col">
+                <h1 className="text-lg font-bold bg-gradient-to-r from-teal-300 to-cyan-300 bg-clip-text text-transparent leading-tight">
+                  МедРеабилитация
+                </h1>
+                <p className="text-xs text-teal-400/80 leading-tight">Центр восстановления</p>
+              </div>
+            </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 +1,193 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+/* Ionic переменные для кастомизации */
+:root {
+  /* Основные цвета приложения */
+  --ion-color-primary: #0f766e;
+  --ion-color-primary-rgb: 15, 118, 110;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #0d6660;
+  --ion-color-primary-tint: #27847e;
+
+  /* Вторичные цвета */
+  --ion-color-secondary: #06b6d4;
+  --ion-color-secondary-rgb: 6, 182, 212;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #05a0ba;
+  --ion-color-secondary-tint: #1fc1d8;
+
+  /* Цвет успеха */
+  --ion-color-success: #10b981;
+  --ion-color-success-rgb: 16, 185, 129;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #0ea372;
+  --ion-color-success-tint: #28c78e;
+
+  /* Цвет предупреждения */
+  --ion-color-warning: #f59e0b;
+  --ion-color-warning-rgb: 245, 158, 11;
+  --ion-color-warning-contrast: #ffffff;
+  --ion-color-warning-contrast-rgb: 255, 255, 255;
+  --ion-color-warning-shade: #d8890a;
+  --ion-color-warning-tint: #f6a824;
+
+  /* Цвет опасности */
+  --ion-color-danger: #ef4444;
+  --ion-color-danger-rgb: 239, 68, 68;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #d23c3c;
+  --ion-color-danger-tint: #f15757;
+
+  /* Фон приложения */
+  --ion-background-color: #f8fafc;
+  --ion-background-color-rgb: 248, 250, 252;
+
+  /* Цвет текста */
+  --ion-text-color: #1e293b;
+  --ion-text-color-rgb: 30, 41, 59;
+
+  /* Цвета для карточек */
+  --ion-card-background: rgba(255, 255, 255, 0.9);
+  --ion-item-background: rgba(255, 255, 255, 0.8);
+}
+
+/* Кастомные стили для медицинского приложения */
+.medical-gradient {
+  background: linear-gradient(135deg, #0f766e 0%, #06b6d4 100%);
+}
+
+.medical-card {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(15, 118, 110, 0.1);
+  box-shadow: 0 8px 32px rgba(15, 118, 110, 0.1);
+}
+
+.exercise-timer {
+  background: linear-gradient(135deg, #0f766e, #06b6d4);
+  color: white;
+  border-radius: 16px;
+  padding: 1rem;
+}
+
+/* Анимации для таймера */
+@keyframes pulse-medical {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+.timer-pulse {
+  animation: pulse-medical 2s ease-in-out infinite;
+}
+
+/* Стили для прогресс-бара */
+.progress-medical {
+  background: linear-gradient(90deg, #10b981, #06b6d4);
+  border-radius: 8px;
+  height: 8px;
+}
+
+/* Кастомные стили для Ionic компонентов */
+ion-card.medical-card {
+  --background: rgba(255, 255, 255, 0.9);
+  --color: #1e293b;
+  border: 1px solid rgba(15, 118, 110, 0.1);
+  box-shadow: 0 8px 32px rgba(15, 118, 110, 0.1);
+}
+
+ion-button.medical-button {
+  --background: linear-gradient(135deg, #0f766e, #06b6d4);
+  --color: white;
+  --border-radius: 12px;
+  --box-shadow: 0 4px 16px rgba(15, 118, 110, 0.3);
+}
+
+ion-button.medical-button:hover {
+  --box-shadow: 0 6px 20px rgba(15, 118, 110, 0.4);
+  transform: translateY(-2px);
+}
+
+/* Стили для header и footer */
+ion-header.medical-header {
+  --background: rgba(15, 23, 42, 0.95);
+  --color: white;
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(15, 118, 110, 0.3);
+}
+
+ion-footer.medical-footer {
+  --background: rgba(15, 23, 42, 0.95);
+  --color: white;
+  backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(15, 118, 110, 0.3);
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .medical-card {
+    margin: 0.5rem;
+    border-radius: 12px;
+  }
+
+  .exercise-timer {
+    padding: 0.75rem;
+    border-radius: 12px;
+  }
+}
+
+/* Стили для статусов упражнений */
+.exercise-completed {
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.exercise-active {
+  background: rgba(6, 182, 212, 0.1);
+  border: 1px solid rgba(6, 182, 212, 0.2);
+  animation: pulse-medical 2s ease-in-out infinite;
+}
+
+.exercise-pending {
+  background: rgba(148, 163, 184, 0.1);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+/* Улучшенные тени для глубины */
+.shadow-medical {
+  box-shadow: 0 4px 6px -1px rgba(15, 118, 110, 0.1), 0 2px 4px -1px rgba(15, 118, 110, 0.06);
+}
+
+.shadow-medical-lg {
+  box-shadow: 0 10px 15px -3px rgba(15, 118, 110, 0.1), 0 4px 6px -2px rgba(15, 118, 110, 0.05);
+}
+
+/* Кастомные скроллбары */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(148, 163, 184, 0.1);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(15, 118, 110, 0.3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(15, 118, 110, 0.5);
+}
+

src/pages/Home.tsx

@@ -1,13 +1,263 @@
+"use client"
 
-function Home() {
-    return (
-        <>
-          <div className="pt-20 mx-auto px-4">
-            <p>Домашняя страница</p>
-          </div>
+import type React from "react"
+import { useState, useEffect } from "react"
+import {
+  IonContent,
+  IonPage,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonButton,
+  IonIcon,
+  IonProgressBar,
+  IonBadge,
+} from "@ionic/react"
+import { playOutline, pauseOutline, stopOutline, timerOutline, fitnessOutline, trophyOutline } from "ionicons/icons"
 
-        </>
-    );
+interface Exercise {
+  id: number
+  name: string
+  duration: number // в секундах
+  description: string
+  difficulty: "easy" | "medium" | "hard"
+  completed: boolean
 }
 
-export default Home;
+const Home: 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 exercises: Exercise[] = [
+    {
+      id: 1,
+      name: "Разминка плечевого сустава",
+      duration: 300, // 5 минут
+      description: "Медленные круговые движения плечами для восстановления подвижности",
+      difficulty: "easy",
+      completed: true,
+    },
+    {
+      id: 2,
+      name: "Упражнения для кисти",
+      duration: 600, // 10 минут
+      description: "Сжимание и разжимание кулака, вращения кистью",
+      difficulty: "medium",
+      completed: false,
+    },
+    {
+      id: 3,
+      name: "Растяжка мышц руки",
+      duration: 450, // 7.5 минут
+      description: "Статические упражнения на растяжку поврежденных мышц",
+      difficulty: "hard",
+      completed: false,
+    },
+  ]
+
+  const [exerciseList, setExerciseList] = useState(exercises)
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout
+
+    if (isRunning && !isPaused && timeLeft > 0) {
+      interval = setInterval(() => {
+        setTimeLeft(timeLeft - 1)
+      }, 1000)
+    } else if (timeLeft === 0 && currentExercise) {
+      // Упражнение завершено
+      setIsRunning(false)
+      setCurrentExercise(null)
+      // Отмечаем упражнение как выполненное
+      setExerciseList((prev) => prev.map((ex) => (ex.id === currentExercise.id ? { ...ex, completed: true } : ex)))
+    }
+
+    return () => clearInterval(interval)
+  }, [isRunning, isPaused, timeLeft, currentExercise])
+
+  const startExercise = (exercise: Exercise) => {
+    setCurrentExercise(exercise)
+    setTimeLeft(exercise.duration)
+    setIsRunning(true)
+    setIsPaused(false)
+  }
+
+  const pauseExercise = () => {
+    setIsPaused(!isPaused)
+  }
+
+  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 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 completedCount = exerciseList.filter((ex) => ex.completed).length
+  const totalCount = exerciseList.length
+  const progressPercentage = (completedCount / totalCount) * 100
+
+  return (
+    <IonPage>
+      <IonContent className="bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
+        <div className="p-4 space-y-6">
+          {/* Приветствие и статистика */}
+          <div className="text-center mb-6">
+            <h1 className="text-2xl font-bold text-slate-800 mb-2">Добро пожаловать, Иван!</h1>
+            <p className="text-slate-600">Продолжайте восстановление. Вы на правильном пути!</p>
+          </div>
+
+          {/* Общий прогресс */}
+          <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 mb-4"
+                    />
+                  </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) => (
+              <IonCard
+                key={exercise.id}
+                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>
+
+                  <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>
+
+                    {!exercise.completed && !currentExercise && (
+                      <IonButton
+                        size="small"
+                        onClick={() => startExercise(exercise)}
+                        className="bg-gradient-to-r from-teal-500 to-cyan-500"
+                      >
+                        <IonIcon icon={playOutline} slot="start" />
+                        Начать
+                      </IonButton>
+                    )}
+                  </div>
+                </IonCardContent>
+              </IonCard>
+            ))}
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  )
+}
+
+export default Home

src/pages/Login.tsx

@@ -1,10 +1,105 @@
-function Login() {
-    return (
-        <div className=''>
-            <h1>Войти/залогиниться</h1>         
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import {
+  IonContent,
+  IonPage,
+  IonCard,
+  IonCardContent,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonIcon,
+  IonText,
+} from "@ionic/react"
+import { mailOutline, lockClosedOutline, logInOutline } from "ionicons/icons"
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+
+  const handleLogin = () => {
+    // Логика входа
+    console.log("Login:", { email, password })
+  }
+
+  return (
+    <IonPage>
+      <IonContent className="bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
+        <div className="flex items-center justify-center min-h-full p-4">
+          <div className="w-full max-w-md">
+            {/* Логотип */}
+            <div className="text-center mb-8">
+              <div className="w-20 h-20 bg-gradient-to-br from-teal-600 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-teal-500/20">
+                <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
+                  <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>
+              <h1 className="text-3xl font-bold bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent mb-2">
+                РеабилитацияПро
+              </h1>
+              <p className="text-slate-600">Восстановление после травм</p>
+            </div>
+
+            {/* Форма входа */}
+            <IonCard className="bg-white/80 backdrop-blur-sm border border-teal-200/50 shadow-xl">
+              <IonCardContent className="p-6">
+                <div className="space-y-4">
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={mailOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Email
+                    </IonLabel>
+                    <IonInput
+                      type="email"
+                      value={email}
+                      onIonInput={(e) => setEmail(e.detail.value!)}
+                      placeholder="your@email.com"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={lockClosedOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Пароль
+                    </IonLabel>
+                    <IonInput
+                      type="password"
+                      value={password}
+                      onIonInput={(e) => setPassword(e.detail.value!)}
+                      placeholder="••••••••"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonButton
+                    expand="block"
+                    onClick={handleLogin}
+                    className="bg-gradient-to-r from-teal-600 to-cyan-600 mt-6"
+                  >
+                    <IonIcon icon={logInOutline} slot="start" />
+                    Войти
+                  </IonButton>
+
+                  <div className="text-center mt-4">
+                    <IonText className="text-slate-600">
+                      Нет аккаунта?{" "}
+                      <a href="/register" className="text-teal-600 font-medium hover:text-teal-700">
+                        Зарегистрироваться
+                      </a>
+                    </IonText>
+                  </div>
+                </div>
+              </IonCardContent>
+            </IonCard>
+          </div>
         </div>
-    );
+      </IonContent>
+    </IonPage>
+  )
 }
 
-export default Login;
-
+export default Login

src/pages/Register.tsx

@@ -1,9 +1,169 @@
-function Auth() {
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import {
+  IonContent,
+  IonPage,
+  IonCard,
+  IonCardContent,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonButton,
+  IonIcon,
+  IonText,
+  IonSelect,
+  IonSelectOption,
+} from "@ionic/react"
+import { personOutline, mailOutline, lockClosedOutline, medkitOutline, personAddOutline } from "ionicons/icons"
+
+const Register: React.FC = () => {
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+    injuryType: "",
+  })
+
+  const handleRegister = () => {
+    // Логика регистрации
+    console.log("Register:", formData)
+  }
+
+  const updateField = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
   return (
-    <div className="pt-20 mx-auto px-4">
-      <h1>Страница регистрации</h1>
-    </div>
-  );
+    <IonPage>
+      <IonContent className="bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
+        <div className="flex items-center justify-center min-h-full p-4">
+          <div className="w-full max-w-md">
+            {/* Заголовок */}
+            <div className="text-center mb-6">
+              <h1 className="text-2xl font-bold text-slate-800 mb-2">Регистрация пациента</h1>
+              <p className="text-slate-600">Создайте аккаунт для начала реабилитации</p>
+            </div>
+
+            {/* Форма регистрации */}
+            <IonCard className="bg-white/80 backdrop-blur-sm border border-teal-200/50 shadow-xl">
+              <IonCardContent className="p-6">
+                <div className="space-y-4">
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={personOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Имя
+                    </IonLabel>
+                    <IonInput
+                      value={formData.firstName}
+                      onIonInput={(e) => updateField("firstName", e.detail.value!)}
+                      placeholder="Иван"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={personOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Фамилия
+                    </IonLabel>
+                    <IonInput
+                      value={formData.lastName}
+                      onIonInput={(e) => updateField("lastName", e.detail.value!)}
+                      placeholder="Петров"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={mailOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Email
+                    </IonLabel>
+                    <IonInput
+                      type="email"
+                      value={formData.email}
+                      onIonInput={(e) => updateField("email", e.detail.value!)}
+                      placeholder="your@email.com"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={medkitOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Тип травмы
+                    </IonLabel>
+                    <IonSelect
+                      value={formData.injuryType}
+                      onIonChange={(e) => updateField("injuryType", e.detail.value)}
+                      placeholder="Выберите тип травмы"
+                      className="text-slate-800"
+                    >
+                      <IonSelectOption value="arm">Травма руки</IonSelectOption>
+                      <IonSelectOption value="leg">Травма ноги</IonSelectOption>
+                      <IonSelectOption value="back">Травма спины</IonSelectOption>
+                      <IonSelectOption value="shoulder">Травма плеча</IonSelectOption>
+                      <IonSelectOption value="other">Другое</IonSelectOption>
+                    </IonSelect>
+                  </IonItem>
+
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={lockClosedOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Пароль
+                    </IonLabel>
+                    <IonInput
+                      type="password"
+                      value={formData.password}
+                      onIonInput={(e) => updateField("password", e.detail.value!)}
+                      placeholder="••••••••"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
+                    <IonIcon icon={lockClosedOutline} slot="start" className="text-teal-600" />
+                    <IonLabel position="stacked" className="text-slate-700">
+                      Подтвердите пароль
+                    </IonLabel>
+                    <IonInput
+                      type="password"
+                      value={formData.confirmPassword}
+                      onIonInput={(e) => updateField("confirmPassword", e.detail.value!)}
+                      placeholder="••••••••"
+                      className="text-slate-800"
+                    />
+                  </IonItem>
+
+                  <IonButton
+                    expand="block"
+                    onClick={handleRegister}
+                    className="bg-gradient-to-r from-teal-600 to-cyan-600 mt-6"
+                  >
+                    <IonIcon icon={personAddOutline} slot="start" />
+                    Зарегистрироваться
+                  </IonButton>
+
+                  <div className="text-center mt-4">
+                    <IonText className="text-slate-600">
+                      Уже есть аккаунт?{" "}
+                      <a href="/login" className="text-teal-600 font-medium hover:text-teal-700">
+                        Войти
+                      </a>
+                    </IonText>
+                  </div>
+                </div>
+              </IonCardContent>
+            </IonCard>
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  )
 }
 
-export default Auth;
+export default Register

tailwind.config.js

@@ -0,0 +1,54 @@
+/** @type {import('tailwindcss').Config} */
+const defaultConfig = require("shadcn/ui/tailwind.config")
+
+module.exports = {
+  ...defaultConfig,
+  content: [
+    ...defaultConfig.content,
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    ...defaultConfig.theme,
+    extend: {
+      ...defaultConfig.theme.extend,
+      animation: {
+        "gradient-x": "gradient-x 8s ease infinite",
+        float: "float 3s ease-in-out infinite",
+        "glow-pulse": "glow-pulse 2s ease-in-out infinite",
+      },
+      keyframes: {
+        "gradient-x": {
+          "0%, 100%": {
+            "background-size": "200% 200%",
+            "background-position": "left center",
+          },
+          "50%": {
+            "background-size": "200% 200%",
+            "background-position": "right center",
+          },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0px)" },
+          "50%": { transform: "translateY(-4px)" },
+        },
+        "glow-pulse": {
+          "0%, 100%": {
+            opacity: "0.5",
+            transform: "scale(1)",
+          },
+          "50%": {
+            opacity: "1",
+            transform: "scale(1.05)",
+          },
+        },
+      },
+      backdropBlur: {
+        xl: "24px",
+      },
+    },
+  },
+  plugins: [...defaultConfig.plugins, require("tailwindcss-animate")],
+}