This commit is contained in:
Tatyana 2025-07-31 16:25:43 +03:00
parent 6e11357cfd
commit 694b053a10
9 changed files with 542 additions and 153 deletions

View File

@ -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 Footer from "./components/Footer"
// import Header from "./components/Header"
// 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>

View File

@ -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} />
\
</>
)

View File

@ -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

View File

@ -1,161 +1,40 @@
"use client"
import { useState } from "react"
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)
}
}
function Header() {
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="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="absolute inset-0 bg-slate-900/95 backdrop-blur-2xl border-b border-teal-700/30 rounded-lg" />
{/* Тонкая нижняя линия */}
{/* Нижняя граница с градиентом */}
<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 className="flex items-center justify-between relative z-10">
{/* Логотип и название */}
<div className="flex items-center space-x-4">
{/* Иконка с градиентом */}
<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">
<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 font-semibold text-white">
<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">
МедРеабилитация
</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
export default Header

View File

@ -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 {
/* Основные цвета приложения */

69
src/pages/Account.tsx Normal file
View File

@ -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

239
src/pages/Exercises.tsx Normal file
View File

@ -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

View File

@ -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>
)
}

26
src/pages/Welcome.tsx Normal file
View File

@ -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