diff --git a/index.html b/index.html index f828b81..7cac558 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + Реабилитация
diff --git a/src/App.tsx b/src/App.tsx index 50c629f..d1f7ff1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,16 +10,11 @@ import "@ionic/react/css/core.css" const App: React.FC = () => ( -
- {/* Контент с отступом равным высоте Header */} -
-
-
) diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index e21aea8..6f4534e 100644 --- a/src/AppRoutes.tsx +++ b/src/AppRoutes.tsx @@ -3,14 +3,26 @@ import Home from "./pages/Home" import Login from "./pages/Login" import Register from "./pages/Register" import Welcome from "./pages/Welcome" +import ForgotPassword from "./pages/ForgotPassword" +import Courses from "./pages/Courses" +import CourseExercises from "./pages/CourseExercises" +import Exercise from "./pages/Exercise" +import Settings from "./pages/Settings" +import CourseComplete from "./pages/CourseComplete" const AppRoutes = () => ( - <> + <> + - -\ + + + + + + + ) diff --git a/src/assets/emblem.png b/src/assets/emblem.png new file mode 100644 index 0000000..885f58a Binary files /dev/null and b/src/assets/emblem.png differ diff --git a/src/assets/man.svg b/src/assets/man.svg new file mode 100644 index 0000000..2a50475 --- /dev/null +++ b/src/assets/man.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx new file mode 100644 index 0000000..4384f03 --- /dev/null +++ b/src/components/BottomNavigation.tsx @@ -0,0 +1,114 @@ +"use client" + +import type React from "react" +import { useHistory, useLocation } from "react-router-dom" + +const BottomNavigation: React.FC = () => { + const history = useHistory() + const location = useLocation() + + const HomeIcon = ({ active }: { active: boolean }) => ( + + + + + ) + + const CoursesIcon = ({ active }: { active: boolean }) => ( + + + + + ) + + const ExerciseIcon = ({ active }: { active: boolean }) => ( + + + + + ) + + const SettingsIcon = ({ active }: { active: boolean }) => ( + + + + + ) + + const navItems = [ + { path: "/home", icon: HomeIcon, label: "Домой" }, + { path: "/courses", icon: CoursesIcon, label: "Курсы" }, + { path: "/exercise/1", icon: ExerciseIcon, label: "Заниматься" }, + { path: "/settings", icon: SettingsIcon, label: "Меню" }, + ] + + const isActive = (path: string) => { + if (path === "/exercise/1") return location.pathname.includes("/exercise") + return location.pathname === path + } + + return ( +
+
+ {navItems.map((item) => { + const active = isActive(item.path) + const IconComponent = item.icon + return ( + + ) + })} +
+
+ ) +} + +export default BottomNavigation diff --git a/src/components/ExerciseItem.tsx b/src/components/ExerciseItem.tsx deleted file mode 100644 index 36d415e..0000000 --- a/src/components/ExerciseItem.tsx +++ /dev/null @@ -1,154 +0,0 @@ -"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 = ({ 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 ( - - -
-
-

- {exercise.name} -

-

{exercise.description}

-
- {exercise.completed && ( - - Выполнено - - )} -
- - {showVideo && exercise.videoUrl && ( -
- - - - -
- )} - -
-
- {formatTime(exercise.duration)} - - {exercise.difficulty === "easy" ? "Легко" : exercise.difficulty === "medium" ? "Средне" : "Сложно"} - -
- -
- {exercise.videoUrl && ( - - - {showVideo ? "Скрыть" : "Видео"} - - )} - - {!exercise.completed && !isCurrent && ( - onStart(exercise)} - className="bg-gradient-to-r from-teal-500 to-cyan-500" - disabled={isDisabled || showVideo} // Отключаем кнопку, если другое упражнение активно или видео проигрывается - > - - Начать - - )} - {isCurrent && ( - - Активно - - )} -
-
- - - ) -} - -export default ExerciseItem diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx deleted file mode 100644 index 5d4fa88..0000000 --- a/src/components/Footer.tsx +++ /dev/null @@ -1,176 +0,0 @@ -"use client" - -import { useState } from "react" - -type TabType = "home" | "courses" | "profile" - -interface FooterProps { - onTabChange?: (tab: TabType) => void - activeTab?: TabType -} - -// Строгие и аккуратные SVG иконки -const HomeIcon = ({ filled = false, className = "" }) => ( - - {filled ? ( - - ) : ( - - )} - -) - -const BookIcon = ({ filled = false, className = "" }) => ( - - {filled ? ( - - ) : ( - - )} - -) - -const UserIcon = ({ filled = false, className = "" }) => ( - - {filled ? ( - - ) : ( - - )} - -) - -function Footer({ onTabChange, activeTab: controlledActiveTab }: FooterProps) { - const [internalActiveTab, setInternalActiveTab] = useState("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 ( -
- {/* Основной контейнер */} -
- {/* Фон с размытием */} -
- - {/* Тонкая верхняя линия */} -
- - {/* Контент */} -
-
-
- {tabs.map((tab) => { - const isActive = activeTab === tab.id - const Icon = tab.icon - - return ( - - ) - })} -
-
-
- - {/* Нижний отступ для мобильных устройств */} -
-
-
- ) -} - -export default Footer diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 7446102..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,40 +0,0 @@ -"use client" - -function Header() { - return ( -
-
- {/* Верхняя граница с градиентом */} -
- - {/* Нижняя граница с градиентом */} -
- - {/* Контент */} -
- {/* Логотип и название */} -
- {/* Иконка с градиентом */} -
- - - -
- {/* Название и описание */} -
-

- МедРеабилитация -

-

Центр восстановления

-
-
-
-
-
- ) -} -export default Header \ No newline at end of file diff --git a/src/index.css b/src/index.css index ccc6f1e..2a68325 100644 --- a/src/index.css +++ b/src/index.css @@ -1,207 +1,361 @@ @import "tailwindcss"; -@keyframes gradient { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } -} +@custom-variant dark (&:is(.dark *)); -.animate-gradient { - background-size: 300% 300%; - animation: gradient 10s ease infinite; -} - - - -/* 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); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); } -/* Кастомные стили для медицинского приложения */ -.medical-gradient { - background: linear-gradient(135deg, #0f766e 0%, #06b6d4 100%); +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.145 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.145 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + --border: oklch(0.269 0 0); + --input: oklch(0.269 0 0); + --ring: oklch(0.439 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(0.269 0 0); + --sidebar-ring: oklch(0.439 0 0); } -.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); +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); } -.exercise-timer { - background: linear-gradient(135deg, #0f766e, #06b6d4); - color: white; - border-radius: 16px; - padding: 1rem; +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } } -/* Анимации для таймера */ -@keyframes pulse-medical { +@layer components { + .glass-morphism { + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + } + + .glass-morphism-dark { + background: rgba(0, 0, 0, 0.15); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + } + + .scrollable-content { + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; + scrollbar-color: rgba(43, 172, 190, 0.3) transparent; + } +} + +@layer utilities { + .animate-float { + animation: float 6s ease-in-out infinite; + } + + .animate-slide-up { + animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } + + .animate-fade-in { + animation: fadeIn 0.8s ease-out; + } + + .animate-scale-in { + animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); + } + + .animate-bounce-gentle { + animation: bounceGentle 2s ease-in-out infinite; + } + + .animate-glow { + animation: glow 2s ease-in-out infinite alternate; + } +} + +@keyframes float { 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 33% { + transform: translateY(-10px) rotate(1deg); + } + 66% { + transform: translateY(-5px) rotate(-1deg); + } +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { opacity: 1; transform: scale(1); } +} + +@keyframes bounceGentle { + 0%, + 100% { + transform: translateY(0); + } 50% { - opacity: 0.8; - transform: scale(1.05); + transform: translateY(-5px); } } -.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; +@keyframes glow { + from { + box-shadow: 0 0 20px rgba(43, 172, 190, 0.3); } - - .exercise-timer { - padding: 0.75rem; - border-radius: 12px; + to { + box-shadow: 0 0 30px rgba(43, 172, 190, 0.6); } + } -/* Стили для статусов упражнений */ -.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); -} - -/* Кастомные скроллбары */ +/* Enhanced scrollbar */ ::-webkit-scrollbar { - width: 6px; + width: 8px; } ::-webkit-scrollbar-track { - background: rgba(148, 163, 184, 0.1); - border-radius: 3px; + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; } ::-webkit-scrollbar-thumb { - background: rgba(15, 118, 110, 0.3); - border-radius: 3px; + background: linear-gradient(45deg, #2bacbe, #5f5c5c); + border-radius: 10px; + border: 2px solid transparent; + background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { - background: rgba(15, 118, 110, 0.5); + background: linear-gradient(45deg, #2bacbe, #2bacbe); + background-clip: content-box; } +/* Smooth transitions for all interactive elements */ +button, +input, +select, +div { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Focus styles for accessibility */ +button:focus, +input:focus, +select:focus { + outline: 2px solid #2bacbe; + outline-offset: 2px; +} + +/* Loading animation */ +.loading-spinner { + border: 3px solid rgba(43, 172, 190, 0.1); + border-top: 3px solid #2bacbe; + border-radius: 50%; + width: 24px; + height: 24px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* Backdrop blur support */ +@supports (backdrop-filter: blur(20px)) { + .backdrop-blur-2xl { + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + } +} + +@supports not (backdrop-filter: blur(20px)) { + .backdrop-blur-2xl { + background: rgba(255, 255, 255, 0.8); + } +} + +/* Modern gradient backgrounds */ +.gradient-mesh { + background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); + background-size: 400% 400%; + animation: gradientShift 15s ease infinite; +} + +@keyframes gradientShift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* Enhanced card hover effects */ +.card-hover { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.card-hover:hover { + transform: translateY(-4px) scale(1.02); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +/* Improved button styles */ +.btn-primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + color: white; + font-weight: 700; + padding: 12px 24px; + border-radius: 16px; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); +} + +.btn-primary:active { + transform: translateY(0); +} diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx deleted file mode 100644 index b2af92b..0000000 --- a/src/pages/Account.tsx +++ /dev/null @@ -1,69 +0,0 @@ -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 ( - -
- -
-
- Profile -

Himanshi Kashyap

-

himanshi.kashyap@example.com

-
- - - - - Edit Profile - - - - Change Email - - - - Change Password - - - - - - - Notifications - - - - - Dark Mode - - - - - - - Log Out - -
- -