навигация готова / дизайн
This commit is contained in:
parent
a69916b87a
commit
c88792648b
@ -14,15 +14,15 @@ const BottomNavigation: React.FC = () => {
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 29 29"
|
||||||
fill={active ? "currentColor" : "none"}
|
fill={ active ? "#2B8794" : "#ffffff"}
|
||||||
stroke={active ? "none" : "currentColor"}
|
stroke={"none"}
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
>
|
>
|
||||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
<path d="m23.487 7.993-6.75-4.723c-1.84-1.29-4.665-1.219-6.435.152L4.43 8.005c-1.172.914-2.098 2.79-2.098 4.266v8.087c0 2.989 2.426 5.426 5.415 5.426h12.634a5.417 5.417 0 0 0 5.415-5.414v-7.947c0-1.582-1.02-3.527-2.309-4.43Zm-8.544 13.103c0 .48-.398.88-.879.88a.885.885 0 0 1-.879-.88V17.58c0-.48.399-.879.88-.879.48 0 .878.399.878.88v3.515Z" />
|
||||||
<polyline points="9 22 9 12 15 12 15 22" />
|
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -31,15 +31,13 @@ const BottomNavigation: React.FC = () => {
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 26 26"
|
||||||
fill={active ? "currentColor" : "none"}
|
fill={ active ? "#2B8794" : "#ffffff"}
|
||||||
stroke={active ? "none" : "currentColor"}
|
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
>
|
>
|
||||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
<path d="M4.147 9.186c.112-1.3.52-2.328 1.21-3.062.69-.733 1.721-1.232 3.194-1.368l.532-.05V2.344a.3.3 0 0 1 .293-.293.3.3 0 0 1 .293.293v2.344h8.79V2.344a.3.3 0 0 1 .293-.293.3.3 0 0 1 .293.293v2.362l.532.05c1.473.136 2.503.635 3.193 1.368.692.734 1.098 1.763 1.21 3.064H4.15a.017.017 0 0 1-.004-.002ZM4.688 12.118H23.44a.59.59 0 0 1 .586.586v7.22c0 1.668-.417 2.969-1.235 3.85-.81.873-2.1 1.425-4.039 1.425H9.376c-1.939 0-3.228-.552-4.039-1.425-.818-.881-1.235-2.182-1.235-3.85v-7.22a.59.59 0 0 1 .586-.586Zm5.945 6.773a1.759 1.759 0 0 0-1.341 0 1.94 1.94 0 0 0-.554.352l-.018.015-.015.017c-.307.324-.5.77-.5 1.235 0 .465.193.911.5 1.235l.015.017.018.016c.164.148.35.266.553.351.201.084.43.139.671.139.242 0 .47-.055.671-.139.204-.085.389-.203.553-.351l.018-.016.015-.017c.307-.324.501-.77.501-1.235 0-.464-.194-.911-.5-1.235l-.016-.017-.018-.015-.127-.106a1.92 1.92 0 0 0-.426-.246Zm0-4.102a1.759 1.759 0 0 0-1.341 0c-.204.085-.39.203-.554.351l-.023.021-.02.023a1.94 1.94 0 0 0-.352.554c-.083.2-.138.43-.138.67 0 .242.055.47.138.67.085.204.204.39.352.554l.02.024.023.02c.164.148.35.267.553.352.201.083.43.138.671.138.242 0 .47-.055.671-.138.204-.085.389-.204.553-.352l.024-.02.02-.024c.148-.164.267-.35.351-.554.084-.2.14-.428.14-.67 0-.24-.056-.47-.14-.67a1.938 1.938 0 0 0-.351-.554l-.02-.022-.024-.022a1.94 1.94 0 0 0-.553-.35Zm4.1 0a1.66 1.66 0 0 0-1.192-.057l-.148.057a1.942 1.942 0 0 0-.553.351l-.017.016-.016.017c-.307.324-.5.771-.5 1.236 0 .464.193.91.5 1.234l.016.017.017.016c.165.148.35.267.553.352.2.083.43.138.671.138.241 0 .47-.055.67-.138.205-.085.39-.204.555-.352l.017-.015.016-.018c.307-.324.5-.77.5-1.234 0-.465-.193-.912-.5-1.236l-.016-.017-.017-.016-.128-.106a1.922 1.922 0 0 0-.409-.237h.001l-.011-.005c-.003 0-.005-.002-.007-.003h-.001Z" />
|
||||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h6z" />
|
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -48,16 +46,18 @@ const BottomNavigation: React.FC = () => {
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 29 29"
|
||||||
fill={active ? "currentColor" : "none"}
|
fill={ active ? "#2B8794" : "#ffffff"}
|
||||||
stroke={active ? "none" : "currentColor"}
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
>
|
>
|
||||||
<rect x="3" y="9" width="4" height="6" rx="1" ry="1" />
|
<g fill="#fff" clipPath="url(#a)">
|
||||||
<rect x="17" y="9" width="4" height="6" rx="1" ry="1" />
|
<path stroke="#fff" strokeWidth="1.172" d="M20.136 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.894-.182-2.595-.715-.672-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.543-2.584 1.215-3.094.701-.533 1.65-.716 2.595-.716ZM7.994 6.739c.944 0 1.892.183 2.593.716.672.51 1.215 1.417 1.215 3.094v7.03c0 1.677-.543 2.584-1.215 3.095-.701.533-1.65.715-2.593.715-.945 0-1.893-.182-2.595-.715-.671-.51-1.215-1.418-1.215-3.094v-7.031c0-1.677.544-2.584 1.215-3.094.702-.533 1.65-.716 2.595-.716ZM15.154 13.771v.586h-2.18v-.586h2.18Z" />
|
||||||
<line x1="7" y1="12" x2="17" y2="12" />
|
<path d="M26.37 17.873a.885.885 0 0 1-.879-.879v-5.86c0-.48.399-.879.88-.879.48 0 .878.399.878.88v5.86c0 .48-.398.878-.879.878ZM1.758 17.873a.885.885 0 0 1-.88-.879v-5.86c0-.48.4-.879.88-.879s.879.399.879.88v5.86c0 .48-.399.878-.88.878Z" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="a">
|
||||||
|
<path fill="#fff" d="M0,0h28v28h-28z" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -66,15 +66,15 @@ const BottomNavigation: React.FC = () => {
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width={size}
|
width={size}
|
||||||
height={size}
|
height={size}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 28 28"
|
||||||
fill={active ? "currentColor" : "none"}
|
fill={ active ? "#2B8794" : "#ffffff"}
|
||||||
stroke={active ? "none" : "currentColor"}
|
// stroke={active ? "none" : "#ffffff"}
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
>
|
>
|
||||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.78 1.28a2 2 0 0 0 .73 2.73l.04.02a2 2 0 0 1 .97 1.94V12a2 2 0 0 1-.97 1.94l-.04.02a2 2 0 0 0-.73 2.73l.78 1.28a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.78-1.28a2 2 0 0 0-.73-2.73l-.04-.02a2 2 0 0 1-.97-1.94V12a2 2 0 0 1 .97-1.94l.04-.02a2 2 0 0 0 .73-2.73l-.78-1.28a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
<path d="M24.612 19.045H17.58a.885.885 0 0 1-.879-.879c0-.48.399-.879.88-.879h7.031c.48 0 .88.399.88.88 0 .48-.4.878-.88.878ZM24.612 23.733H17.58a.885.885 0 0 1-.879-.879c0-.48.399-.879.88-.879h7.031c.48 0 .88.399.88.88 0 .48-.4.878-.88.878ZM25.784 9.986V4.665c0-1.653-.75-2.321-2.613-2.321h-4.735c-1.864 0-2.614.668-2.614 2.32v5.31c0 1.664.75 2.32 2.614 2.32h4.735c1.863.012 2.613-.656 2.613-2.308ZM12.306 9.986V4.665c0-1.653-.75-2.321-2.613-2.321H4.958c-1.864 0-2.614.668-2.614 2.32v5.31c0 1.664.75 2.32 2.614 2.32h4.735c1.863.012 2.613-.656 2.613-2.308ZM12.306 23.17v-4.734c0-1.864-.75-2.614-2.613-2.614H4.958c-1.864 0-2.614.75-2.614 2.614v4.735c0 1.863.75 2.613 2.614 2.613h4.735c1.863 0 2.613-.75 2.613-2.613Z" />
|
||||||
<circle cx="12" cy="12" r="3" />
|
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -104,14 +104,12 @@ const BottomNavigation: React.FC = () => {
|
|||||||
>
|
>
|
||||||
{/* Active state background (glassmorphism rectangle) */}
|
{/* Active state background (glassmorphism rectangle) */}
|
||||||
<div
|
<div
|
||||||
className={`absolute rounded-2xl shadow-md transition-all duration-300 ease-out bg-white/10 backdrop-blur-md border border-white/20 ${
|
className={`absolute rounded-2xl shadow-md transition-all duration-300 ease-out bg-white/60 backdrop-blur-md border border-white/20 ${active ? "opacity-100 scale-100 w-20 h-20 top-2" : "opacity-0 scale-0 w-0 h-0 top-0"
|
||||||
active ? "opacity-100 scale-100 w-20 h-20 top-0" : "opacity-0 scale-0 w-0 h-0 top-0"
|
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
{/* Icon and Label container */}
|
{/* Icon and Label container */}
|
||||||
<div
|
<div
|
||||||
className={`relative z-10 flex flex-col items-center justify-center transition-all duration-300 ease-out ${
|
className={`relative z-10 flex flex-col items-center justify-center transition-all duration-300 ease-out ${active ? "text-[#145058]" : "text-white/70 translate-y-0 group-hover:text-white"
|
||||||
active ? "text-[#2BACBE] translate-y-[-10px]" : "text-white/70 translate-y-0 group-hover:text-white"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="mb-1">
|
<div className="mb-1">
|
||||||
@ -122,10 +120,13 @@ const BottomNavigation: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
{/* Bottom circle with glow */}
|
{/* Bottom circle with glow */}
|
||||||
<div
|
<div
|
||||||
className={`absolute w-2 h-2 rounded-full border-2 border-white shadow-lg shadow-[#2BACBE]/50 animate-pulse transition-all duration-300 ease-out ${
|
className={`absolute w-4 h-4 rounded-full border-1 border-cyan-900 shadow-lg shadow-[#2BACBE]/50 animate-pulse transition-all duration-300 ease-out ${active ? "opacity-100 scale-100 translate-y-[40px]" : "opacity-0 scale-0"
|
||||||
active ? "opacity-100 scale-100 translate-y-[32px]" : "opacity-0 scale-0 translate-y-[0px]"
|
|
||||||
}`}
|
}`}
|
||||||
/>
|
>
|
||||||
|
{/* Внутренний маленький круг */}
|
||||||
|
<div className="w-3 h-3 bg-cyan-900 rounded-full mx-auto my-auto mt-[1px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|||||||
@ -53,7 +53,7 @@ const CircularProgressDisplay: React.FC<CircularProgressDisplayProps> = ({
|
|||||||
|
|
||||||
|
|
||||||
<circle
|
<circle
|
||||||
className="text-cyan-400"
|
className="text-cyan-500"
|
||||||
strokeWidth="8"
|
strokeWidth="8"
|
||||||
strokeDasharray={circumference}
|
strokeDasharray={circumference}
|
||||||
strokeDashoffset={exercisesStrokeDashoffset}
|
strokeDashoffset={exercisesStrokeDashoffset}
|
||||||
|
|||||||
56
src/components/CourseCard.tsx
Normal file
56
src/components/CourseCard.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import type React from "react"
|
||||||
|
import { useHistory } from "react-router-dom"
|
||||||
|
|
||||||
|
interface CourseCardProps {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
progress: number
|
||||||
|
color: string
|
||||||
|
icon: string
|
||||||
|
exercises: number
|
||||||
|
nextExercise: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CourseCard: React.FC<CourseCardProps> = ({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
progress,
|
||||||
|
color,
|
||||||
|
icon,
|
||||||
|
exercises,
|
||||||
|
nextExercise,
|
||||||
|
}) => {
|
||||||
|
const history = useHistory()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={() => history.push(`/course/${id}/exercises`)}
|
||||||
|
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 items-center space-x-5">
|
||||||
|
<div
|
||||||
|
className={`w-16 h-16 bg-gradient-to-br ${color} rounded-2xl flex items-center justify-center shadow-lg`}
|
||||||
|
>
|
||||||
|
<span className="text-2xl text-white filter drop-shadow-sm">{icon}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="font-black text-[#5F5C5C] text-lg mb-2">{name}</h3>
|
||||||
|
<div className="bg-white/50 rounded-full h-3 mb-2 ">
|
||||||
|
<div
|
||||||
|
className={`bg-gradient-to-r ${color} h-3 rounded-full transition-all duration-700 shadow-sm`}
|
||||||
|
style={{ width: `${progress}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
|
||||||
|
<span className="text-2xl font-bold">→</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CourseCard
|
||||||
@ -119,8 +119,8 @@
|
|||||||
* {
|
* {
|
||||||
@apply border-border outline-ring/50;
|
@apply border-border outline-ring/50;
|
||||||
}
|
}
|
||||||
body {
|
html, body {
|
||||||
@apply bg-background text-foreground;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -132,3 +132,7 @@
|
|||||||
border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
|
border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
|
||||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Shadow */
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Shadow */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
overflow-y: auto !important; /* включаем вертикальную прокрутку */
|
||||||
|
}
|
||||||
|
|||||||
@ -21,7 +21,7 @@ const CourseComplete: React.FC = () => {
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center p-4 relative overflow-hidden">
|
<div className="min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center p-4 relative overflow-hidden max-w-4xl mx-auto">
|
||||||
{/* Background Animation */}
|
{/* Background Animation */}
|
||||||
<div className="absolute inset-0">
|
<div className="absolute inset-0">
|
||||||
<div className="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div>
|
<div className="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div>
|
||||||
|
|||||||
@ -81,7 +81,7 @@ const CourseExercises: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 overflow-y-auto scrollable-content">
|
<div className="max-w-4xl mx-auto min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 overflow-y-auto scrollable-content">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="sticky top-0 z-40 bg-gradient-to-br from-[#2BACBE] via-blue-500 to-indigo-600 backdrop-blur-xl">
|
<div className="sticky top-0 z-40 bg-gradient-to-br from-[#2BACBE] via-blue-500 to-indigo-600 backdrop-blur-xl">
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
|
<div className="absolute inset-0 bg-gradient-to-r from-black/10 to-transparent"></div>
|
||||||
|
|||||||
@ -20,21 +20,8 @@ const Home: React.FC = () => {
|
|||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 pb-24 overflow-y-auto">
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-20 overflow-y-auto max-w-4xl mx-auto">
|
||||||
{/* Welcome Section */}
|
|
||||||
<div className="pt-12 px-6 mb-8">
|
|
||||||
<div className="bg-white/40 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-2xl">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-black text-[#5F5C5C] mb-1">Привет, Александр!</h1>
|
|
||||||
<p className="text-[#5F5C5C]/70 font-medium">{currentDate}</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-16 h-16 bg-gradient-to-br from-[#2BACBE] to-[#2BACBE]/80 backdrop-blur-xl rounded-2xl flex items-center justify-center border border-white/30 shadow-lg">
|
|
||||||
<span className="text-2xl filter drop-shadow-sm">👤</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Analytics Cards */}
|
{/* Analytics Cards */}
|
||||||
<div className="px-6 mb-8">
|
<div className="px-6 mb-8">
|
||||||
|
|||||||
@ -120,7 +120,7 @@ const Exercise: React.FC = () => {
|
|||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] overflow-y-auto pb-28">
|
<div className="min-h-screen bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] overflow-y-auto pb-28 max-w-4xl mx-auto">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="sticky top-0 z-40 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] backdrop-blur-xl pt-12 pb-4 px-4 sm:px-6">
|
<div className="sticky top-0 z-40 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C] backdrop-blur-xl pt-12 pb-4 px-4 sm:px-6">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
|||||||
@ -19,6 +19,11 @@ export default function Home() {
|
|||||||
)
|
)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const stats = [
|
const stats = [
|
||||||
{
|
{
|
||||||
value: "12",
|
value: "12",
|
||||||
@ -141,19 +146,34 @@ export default function Home() {
|
|||||||
const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)
|
const overallProgress = Math.round(courses.reduce((sum, course) => sum + course.progress, 0) / totalCourses)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 overflow-y-auto pb-28">
|
<div className=" bg-gray-50 py-20 min-h-screen max-w-4xl mx-auto">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="bg-white rounded-b-3xl p-6 shadow-lg mb-6 mx-4 sm:mx-6">
|
<div className="bg-white rounded-3xl p-6 shadow-lg mb-6 mx-4 sm:mx-6">
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="flex items-center justify-between mb-6 border-b-2 pb-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl sm:text-3xl font-black text-gray-800 mb-2">Привет, Александр!</h1>
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-600 mb-2">Привет, Александр!</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<p className="text-gray-600 font-medium text-sm sm:text-base">{currentDate}</p>
|
<p className="text-gray-600 font-medium text-sm sm:text-base">{currentDate}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Circular Progress Display */}
|
<div className="flex justify-between items-center">
|
||||||
|
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="text-base text-gray-800">Все курсы</div>
|
||||||
|
<div className="text-2xl font-bold text-cyan-500">{totalCourses}/1</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="text-base text-gray-800">Все упражнения</div>
|
||||||
|
<div className="text-2xl font-bold text-orange-400">{totalExercises}/4</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-center items-center gap-8 mt-8">
|
<div className="flex justify-center items-center gap-8 mt-8">
|
||||||
<CircularProgressDisplay
|
<CircularProgressDisplay
|
||||||
overallProgress={overallProgress}
|
overallProgress={overallProgress}
|
||||||
@ -161,31 +181,26 @@ export default function Home() {
|
|||||||
totalExercises={totalExercises}
|
totalExercises={totalExercises}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-around mt-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-lg font-bold text-gray-800">{totalCourses}</div>
|
|
||||||
<div className="text-xs text-gray-600">Курсов</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-lg font-bold text-gray-800">{totalExercises}</div>
|
|
||||||
<div className="text-xs text-gray-600">Упражнений</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="px-4 sm:px-6 space-y-6">
|
<div className="px-4 sm:px-6 space-y-6">
|
||||||
{/* Current Exercise */}
|
{/* Current Exercise */}
|
||||||
<div className="bg-[#2BACBE] rounded-3xl p-6 shadow-2xl text-white">
|
<div className="bg-gradient-to-r from-[#2BACBE] to-[#1E7F8C] rounded-3xl p-6 shadow-2xl text-white max-w-4xl mx-auto my-8 transition-transform transform hover:scale-105 duration-300">
|
||||||
<div className="flex items-center justify-between mb-4">
|
{/* Заголовок и статус */}
|
||||||
<h2 className="text-xl sm:text-2xl font-black">Тренировка</h2> {/* Changed from "Текущее упражнение" */}
|
<div className="flex items-center justify-between mb-6 flex-wrap">
|
||||||
<div className="px-3 py-1 bg-white/20 rounded-full shadow-lg">
|
<h2 className="text-xl sm:text-2xl font-extrabold">Тренировка</h2>
|
||||||
<span className="text-white text-sm font-bold">Активно</span>
|
<div className="px-3 py-1 bg-white/20 rounded-full shadow-lg backdrop-blur-sm">
|
||||||
|
<span className="text-white text-sm font-semibold">Активно</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
<div className="relative">
|
{/* Основной блок с иконками и прогрессом */}
|
||||||
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl">
|
<div className="flex items-center flex-wrap space-x-4 mb-6">
|
||||||
{/* Clock icon SVG */}
|
{/* Иконка часов */}
|
||||||
|
<div className="relative flex-shrink-0">
|
||||||
|
<div className="w-24 h-24 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl transition-transform hover:scale-105 duration-300">
|
||||||
|
{/* Clock SVG */}
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="40"
|
width="40"
|
||||||
@ -202,28 +217,36 @@ export default function Home() {
|
|||||||
<polyline points="12 6 12 12 16 14" />
|
<polyline points="12 6 12 12 16 14" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Пульсирующая точка */}
|
||||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-white rounded-full flex items-center justify-center shadow-lg animate-pulse">
|
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-white rounded-full flex items-center justify-center shadow-lg animate-pulse">
|
||||||
<svg className="w-3 h-3 text-[#2BACBE]" fill="currentColor" viewBox="0 0 24 24">
|
<svg className="w-3 h-3 text-[#2BACBE]" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M8 5v14l11-7z" />
|
<path d="M8 5v14l11-7z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="font-black text-lg mb-1">Подъемы ног лежа</h3>
|
{/* Информация о упражнении */}
|
||||||
<p className="text-white/80 font-medium mb-3 text-sm">Восстановление колена • 3 подхода по 12</p>
|
<div className="flex-1 min-w-[200px]">
|
||||||
<div className="relative">
|
<h3 className="font-extrabold text-lg mb-2">Подъемы ног лежа</h3>
|
||||||
<div className="bg-white/30 rounded-full h-3 overflow-hidden">
|
<p className="text-white/70 font-medium mb-4 text-sm">Восстановление колена • 3 подхода по 12</p>
|
||||||
|
|
||||||
|
{/* Прогрессбар */}
|
||||||
|
<div className="relative w-full h-4 bg-white/30 rounded-full overflow-hidden mb-1">
|
||||||
<div
|
<div
|
||||||
className="bg-white h-3 rounded-full shadow-sm transition-all duration-700"
|
className="bg-white h-full rounded-full shadow-sm transition-all duration-700"
|
||||||
style={{ width: "60%" }}
|
style={{ width: "60%" }}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
{/* Процент */}
|
||||||
<div className="absolute right-0 -top-6 text-sm font-bold text-white/80">60%</div>
|
<div className="absolute right-2 top-[-1.5rem] text-sm font-semibold text-white/80">{'60%'}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Кнопка продолжения */}
|
||||||
|
<div className="flex justify-center mt-4">
|
||||||
<button
|
<button
|
||||||
onClick={() => history.push("/exercise/1")}
|
onClick={() => history.push("/exercise/1")}
|
||||||
className="bg-white text-[#2BACBE] px-4 sm:px-6 py-3 rounded-2xl font-bold hover:shadow-xl transition-all duration-300 transform hover:scale-105 backdrop-blur-sm text-sm sm:text-base"
|
className="bg-white text-[#2BACBE] px-6 py-3 rounded-[30px] font-bold shadow-lg hover:shadow-xl transition-transform transform hover:scale-[1.05] backdrop-blur-sm text-sm sm:text-base max-w-xs w-full"
|
||||||
>
|
>
|
||||||
Продолжить
|
Продолжить
|
||||||
</button>
|
</button>
|
||||||
@ -231,68 +254,54 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Quick Stats (Total Exercises & Total Courses) */}
|
{/* Quick Stats (Total Exercises & Total Courses) */}
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4 ">
|
||||||
<div className="glass-morphism rounded-2xl p-4 text-center border border-white/50 shadow-lg backdrop-blur-xl">
|
<div onClick={() => history.push("/courses")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300">
|
||||||
<div className="text-2xl font-black text-gray-800 mb-1">{totalExercises}</div>
|
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4">
|
||||||
<div className="text-xs text-gray-600 font-semibold">Всего упражнений</div>
|
{/* Clock icon SVG */}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="#2BACBE"
|
||||||
|
stroke="cyan-500"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||||
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h6z" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="glass-morphism rounded-2xl p-4 text-center border border-white/50 shadow-lg backdrop-blur-xl">
|
<div className="text-2xl font-bold text-gray-800 mb-1 ">Курсы</div>
|
||||||
<div className="text-2xl font-black text-gray-800 mb-1">{totalCourses}</div>
|
<div className="text-base text-gray-600">все назначенные</div>
|
||||||
<div className="text-xs text-gray-600 font-semibold">Всего курсов</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div onClick={() => history.push("/course/${courseId}/exercises")} className="glass-morphism rounded-3xl text-left border border-white/50 shadow-lg backdrop-blur-xl p-6 text-white transition-transform transform hover:scale-105 duration-300">
|
||||||
|
<div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center shadow-xl mb-4">
|
||||||
|
{/* Clock icon SVG */}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="#2BACBE"
|
||||||
|
stroke="cyan-500"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||||
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h6z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-gray-800 mb-1">Упражнения</div>
|
||||||
|
<div className="text-base text-gray-600">внутри текущего курса </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Courses */}
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-6">
|
|
||||||
<h2 className="text-xl sm:text-2xl font-black text-gray-800">Мои курсы</h2>
|
|
||||||
<button
|
|
||||||
onClick={() => history.push("/courses")}
|
|
||||||
className="text-[#2BACBE] text-sm font-bold hover:underline flex items-center space-x-1"
|
|
||||||
>
|
|
||||||
<span>Все курсы</span>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{courses.map((course) => (
|
|
||||||
<div
|
|
||||||
key={course.id}
|
|
||||||
onClick={() => history.push(`/course/${course.id}/exercises`)}
|
|
||||||
className="glass-morphism rounded-3xl p-6 border border-white/50 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02] backdrop-blur-2xl"
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-5">
|
|
||||||
<div
|
|
||||||
className={`w-16 h-16 bg-gradient-to-br ${course.color} rounded-2xl flex items-center justify-center shadow-xl relative`}
|
|
||||||
>
|
|
||||||
<span className="text-2xl text-white filter drop-shadow-sm">{course.icon}</span>
|
|
||||||
<div className="absolute -top-1 -right-1 w-5 h-5 bg-white rounded-full flex items-center justify-center shadow-lg">
|
|
||||||
<span className="text-xs font-bold text-gray-600">{course.exercises}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="font-black text-gray-800 text-lg mb-1">{course.name}</h3>
|
|
||||||
<p className="text-gray-600 text-sm mb-2">Следующее: {course.nextExercise}</p>
|
|
||||||
<div className="bg-gray-200 rounded-full h-3 mb-2 overflow-hidden">
|
|
||||||
<div
|
|
||||||
className={`bg-gradient-to-r ${course.color} h-3 rounded-full transition-all duration-700 shadow-sm`}
|
|
||||||
style={{ width: `${course.progress}%` }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600 font-semibold">{course.progress}% завершено</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<BottomNavigation />
|
<BottomNavigation />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,7 +13,7 @@ const Settings: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 pb-20">
|
<div className="min-h-screen bg-gray-50 pb-20 max-w-4xl mx-auto">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-12 pb-6">
|
<div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-12 pb-6">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
@ -66,7 +66,7 @@ const Settings: React.FC = () => {
|
|||||||
|
|
||||||
{/* Medical Information */}
|
{/* Medical Information */}
|
||||||
<div className="px-4 mb-6">
|
<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">
|
<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>
|
<h2 className="text-lg font-semibold text-gray-800 mb-4">Медицинская информация</h2>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user