Tatyana/Rehab_React_Vite_my_old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

правки по дизайну

Browse Source
This commit is contained in:
Tatyana 2025-09-01 16:20:49 +03:00
parent c1f907e0a1
commit b2f1db84c6
5 changed files with 35 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/cards/StatCardHome.tsx
View File

@ -56,8 +56,8 @@ export const StatCardHome: React.FC<StatCardProps> = ({
</div> </div>
{/* Текст */} {/* Текст */}
<div className="text-xl font-bold text-gray-800 mb-1 z-20 relative">{title}</div> <div className="text-base sm:text-xl font-bold text-gray-800 sm:mb-1 z-20 relative">{title}</div>
<div className="text-base text-gray-600 z-20 relative">{subtitle}</div> <div className="text-sm sm:text-base text-gray-600 z-20 relative">{subtitle}</div>
</div> </div>
) )
} }

8
src/pages/CourseExercises.tsx
View File

@ -114,7 +114,7 @@ export const CourseExercises = () => {
const dayMap: { [key: number]: number } = {}; const dayMap: { [key: number]: number } = {};
uniqueDays.forEach((day, index) => { uniqueDays.forEach((day, index) => {
dayMap[day] = index + 1; // номера начинаются с 1 dayMap[day] = index + 1;
}); });
const daysNav = uniqueDays.map(day => dayMap[day]); const daysNav = uniqueDays.map(day => dayMap[day]);
@ -152,7 +152,7 @@ export const CourseExercises = () => {
onClick={() => { onClick={() => {
setSelectedDay(day); setSelectedDay(day);
}} }}
className={`flex-shrink-0 p-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 inline-block ${selectedDay === day className={`flex-shrink-0 px-4 py-2 rounded-full text-xs sm:text-sm font-semibold transition-all duration-300 inline-block ${selectedDay === day
? "bg-[#2BACBE] text-white shadow-lg" ? "bg-[#2BACBE] text-white shadow-lg"
: "bg-white text-gray-600 hover:bg-gray-100" : "bg-white text-gray-600 hover:bg-gray-100"
}`} }`}
@ -175,8 +175,8 @@ export const CourseExercises = () => {
className="p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative"> className="p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h3 className="text-sm font-semibold">Упражнение {++index}</h3> <h3 className="text-xs sm:text-base">Упражнение {++index}</h3>
<h3 className="text-xl font-semibold text-gray-600">{item.exercise.title}</h3> <h3 className="text-base sm:text-xl font-semibold text-gray-600">{item.exercise.title}</h3>
</div> </div>
<ArrowIcon className="text-cyan-600" /> <ArrowIcon className="text-cyan-600" />

8
src/pages/Courses.tsx
View File

@ -34,7 +34,7 @@ interface User {
const ProgressLine = () => { const ProgressLine = () => {
return ( return (
<div <div
className="h-full bg-gradient-to-r from-orange-300 to-orange-500 transition-all duration-500 absolute left-0 top-0 rounded-l-xl" className="h-full bg-gradient-to-r from-orange-300 to-orange-500 transition-all duration-500 absolute left-0 top-0 rounded-l-2xl"
style={{ width: '85%' }} style={{ width: '85%' }}
/> />
); );
@ -44,7 +44,7 @@ const AnalitcsCards = () => {
return ( return (
<div className="px-6 mb-8" > <div className="px-6 mb-8" >
<div className="text-center relative "> <div className="text-center relative ">
<div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl"> <div className="w-full h-10 bg-gray-500 rounded-2xl relative flex items-center justify-center mb-4 shadow-xl">
{/* Прогрессная часть */} {/* Прогрессная часть */}
<ProgressLine /> <ProgressLine />
@ -169,10 +169,10 @@ export const Courses = () => {
onClick={() => history.push(getRouteCourseExercises(course.ID.toString()), { course })} onClick={() => history.push(getRouteCourseExercises(course.ID.toString()), { course })}
className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]" className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
> >
<div className="flex flex-col sm:flex-row sm:content-center space-x-5"> <div className="flex flex-col sm:flex-row sm:content-center space-x-5 space-y-2 sm:space-y-0">
{/* Изображение курса */} {/* Изображение курса */}
{course.url_file_img && ( {course.url_file_img && (
<div className="h-10 w-10 md:h-20 md:w-20 rounded-2xl overflow-hidden flex-shrink-0"> <div className="h-10 w-10 md:h-20 md:w-20 rounded-xl sm:rounded-2xl overflow-hidden flex-shrink-0">
<img <img
src={course.url_file_img || "/placeholder.svg"} src={course.url_file_img || "/placeholder.svg"}
alt={course.title} alt={course.title}

33
src/pages/Exercise.tsx
View File

@ -4,7 +4,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import { CheckIcon } from "../components/icons/CheckIcon"; // import { CheckIcon } from "../components/icons/CheckIcon";
import { RefreshIcon } from "../components/icons/RefreshIcon"; import { RefreshIcon } from "../components/icons/RefreshIcon";
import HeaderNav from "../components/HeaderNav"; import HeaderNav from "../components/HeaderNav";
@ -64,7 +64,18 @@ export const Exercise = () => {
}; };
localStorage.setItem('exerciseProgress', JSON.stringify(currentProgress)); localStorage.setItem('exerciseProgress', JSON.stringify(currentProgress));
console.log('прогресс:', currentProgress) console.log('прогресс:', currentProgress)
// или отправить на сервер // Отправляем на сервер
connect.post(`pacient/${courseId}/${exerciseId}`, currentProgress)
console.log('Отправляемые данные:', currentProgress);
connect.post('http://localhost:8093/pacient/1/2', currentProgress)
.then((response) => {
console.log('Ответ сервера при отправке прогресса:', response.status);
// Можно добавить обработку успешного ответа
})
.catch((error) => {
console.error('Ошибка при отправке прогресса:', error);
// Обработка ошибок
});
}; };
// В начале упражнения // В начале упражнения
@ -171,22 +182,6 @@ export const Exercise = () => {
}; };
// Функция для отправки прогресса на сервер
// const submitProgress = async () => {
// if (!courseId || !exerciseId) return
// try {
// const timeUsers = formatTime(currentTime) // Отправляем время в формате MM:SS
// await connect.post(`pacient/${courseId}/${exerciseId}`, {
// time_users: timeUsers,
// })
// console.log("Прогресс отправлен на сервер:", timeUsers)
// } catch (error) {
// console.error("Ошибка при отправке прогресса:", error)
// }
// }
const formatTime = (seconds: number) => { const formatTime = (seconds: number) => {
const mins = Math.floor(seconds / 60) const mins = Math.floor(seconds / 60)
@ -376,7 +371,7 @@ export const Exercise = () => {
className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 cursor-pointer ${isPlaying className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 cursor-pointer ${isPlaying
? "bg-gray-400 text-white shadow-lg" ? "bg-gray-400 text-white shadow-lg"
: "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg" : "bg-orange-400 hover:bg-orange-500 text-white shadow-lg"
}`} }`}
> >
{isPlaying ? ( {isPlaying ? (

57
src/pages/Settings.tsx
View File

@ -5,35 +5,35 @@ import { useHistory } from "react-router-dom";
import BottomNavigation from "../components/BottomNavigation"; import BottomNavigation from "../components/BottomNavigation";
import { getRouteLogin } from "../shared/consts/router"; import { getRouteLogin } from "../shared/consts/router";
import manImage from "../assets/img/man.svg"; import manImage from "../assets/img/man.svg";
const Settings: React.FC = () => { const Settings: React.FC = () => {
const history = useHistory() const history = useHistory()
const handleLogout = () => { const handleLogout = () => {
localStorage.removeItem('token') localStorage.removeItem('token');
history.push(getRouteLogin()) history.push(getRouteLogin());
} }
const userEmail = localStorage.getItem('userEmail'); const userEmail = localStorage.getItem('userEmail');
return ( return (
<div className=" bg-gray-50 min-h-screen mx-auto pb-50" style={{ overflow: 'auto' }}> <div className=" bg-gray-50 min-h-screen mx-auto pb-50" style={{ overflow: 'auto' }}>
{/* Header */} {/* Header */}
<div className="bg-gradient-to-r from-gray-600 to-gray-800 pt-20 pb-16 w-full "> <div className="bg-gradient-to-r from-gray-600 to-gray-800 pt-10 sm:pt-20 pb-5 sm:pb-16 w-full ">
<div className="flex items-center justify-between mb-4 max-w-4xl mx-auto px-4"> <div className="flex items-center justify-between mb-4 max-w-4xl mx-auto px-4">
<div> <div>
<h1 className="text-2xl font-bold text-white">Настройки</h1> <p className="text-gray-300 text-sm"> профиль пациента</p>
<p className="text-gray-300">Профиль пациента</p> <h1 className="text-xl sm:text-2xl font-bold text-white">Настройки</h1>
</div> </div>
<img className="h-20 w-auto flex-shrink-0" src={manImage || "/placeholder.svg"} alt="man" /> <img className="h-20 w-auto flex-shrink-0" src={manImage || "/placeholder.svg"} alt="man" />
</div> </div>
</div> </div>
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{/* Profile Information */}
<div className="px-4 -mt-6 mb-6 "> <div className="px-4 -mt-6 mb-6 ">
<div className="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism"> <div className="bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism">
<h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2> <h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2>
@ -53,42 +53,7 @@ const userEmail = localStorage.getItem('userEmail');
</div> </div>
</div> </div>
</div> </div>
{/* Medical Information */}
{/* <div className="px-4 mb-6">
<div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg ">
<h2 className="text-lg font-semibold text-gray-800 mb-4">Медицинская информация</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Описание травмы</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<p className="text-gray-800 text-sm leading-relaxed">
Повреждение передней крестообразной связки левого колена. Получена во время игры в футбол 12 февраля
2024 года. Проведена артроскопическая операция 20 февраля 2024 года.
</p>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Лечащий врач</label>
<div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
<span className="text-gray-800">Доктор Иванов И.И.</span>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">Стадия восстановления</label>
<div className="bg-cyan-50 rounded-lg p-3 border border-cyan-200">
<div className="flex items-center justify-between">
<span className="text-cyan-800 font-medium">Активная реабилитация</span>
<span className="text-cyan-600 text-sm">75% завершено</span>
</div>
<div className="mt-2 bg-cyan-200 rounded-full h-2">
<div className="bg-cyan-500 h-2 rounded-full" style={{ width: "75%" }}></div>
</div>
</div>
</div>
</div>
</div>
</div> */}
{/* Logout Button */}
<div className="px-4 mb-8"> <div className="px-4 mb-8">
<button <button
onClick={handleLogout} onClick={handleLogout}