flip animation
This commit is contained in:
parent
ac87a2fc80
commit
c02cf6dfc9
@ -315,7 +315,10 @@ const LessonDetail = () => {
|
||||
}}
|
||||
style={{
|
||||
transformStyle: "preserve-3d",
|
||||
perspective: "1000px"
|
||||
perspective: "1000px",
|
||||
aspectRatio: "1",
|
||||
width: "100%",
|
||||
display: "block"
|
||||
}}
|
||||
>
|
||||
{/* Front side - visible when present */}
|
||||
@ -356,21 +359,98 @@ const LessonDetail = () => {
|
||||
width="100%"
|
||||
height="100%"
|
||||
bg={colorMode === "light" ? "gray.100" : "gray.600"}
|
||||
borderRadius="md"
|
||||
borderRadius="12px"
|
||||
align="center"
|
||||
justify="center"
|
||||
p={4}
|
||||
overflow="hidden"
|
||||
style={{
|
||||
backfaceVisibility: "hidden",
|
||||
transform: "rotateY(180deg)",
|
||||
zIndex: student.present ? 0 : 1
|
||||
zIndex: student.present ? 0 : 1,
|
||||
aspectRatio: "1"
|
||||
}}
|
||||
>
|
||||
<Box textAlign="center">
|
||||
<Box fontSize="sm" fontWeight="medium">
|
||||
{student.name || student.lastName}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
right="0"
|
||||
bottom="0"
|
||||
opacity="0.2"
|
||||
className="animated-bg"
|
||||
sx={{
|
||||
background: `linear-gradient(135deg,
|
||||
${colorMode === "light" ? "#e3f2fd, #bbdefb, #90caf9" : "#1a365d, #2a4365, #2c5282"})`,
|
||||
backgroundSize: "400% 400%",
|
||||
animation: "gradientAnimation 8s ease infinite",
|
||||
"@keyframes gradientAnimation": {
|
||||
"0%": { backgroundPosition: "0% 50%" },
|
||||
"50%": { backgroundPosition: "100% 50%" },
|
||||
"100%": { backgroundPosition: "0% 50%" }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
position="relative"
|
||||
textAlign="center"
|
||||
zIndex="1"
|
||||
>
|
||||
<Box
|
||||
width="60px"
|
||||
height="60px"
|
||||
mx="auto"
|
||||
mb={2}
|
||||
sx={{
|
||||
animation: "float 3s ease-in-out infinite",
|
||||
"@keyframes float": {
|
||||
"0%": { transform: "translateY(0px)" },
|
||||
"50%": { transform: "translateY(-10px)" },
|
||||
"100%": { transform: "translateY(0px)" }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Академическая шапочка */}
|
||||
<path
|
||||
d="M12 2L2 6.5L12 11L22 6.5L12 2Z"
|
||||
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
|
||||
/>
|
||||
<path
|
||||
d="M19 9V14.5C19 15.163 18.6839 15.7989 18.1213 16.2678C17.0615 17.1301 13.7749 19 12 19C10.2251 19 6.93852 17.1301 5.87868 16.2678C5.31607 15.7989 5 15.163 5 14.5V9L12 12.5L19 9Z"
|
||||
fill={colorMode === "light" ? "#2C5282" : "#4299E1"}
|
||||
/>
|
||||
<path
|
||||
d="M21 7V14M21 14L19 16M21 14L23 16"
|
||||
stroke={colorMode === "light" ? "#2C5282" : "#4299E1"}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
||||
{/* Лицо студента */}
|
||||
<circle
|
||||
cx="12"
|
||||
cy="15"
|
||||
r="2.5"
|
||||
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
|
||||
/>
|
||||
|
||||
{/* Тело студента */}
|
||||
<path
|
||||
d="M8 18.5C8 17.1193 9.11929 16 10.5 16H13.5C14.8807 16 16 17.1193 16 18.5V21H8V18.5Z"
|
||||
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
<Box fontSize="xs" opacity={0.8}>
|
||||
<Box fontSize="sm" fontWeight="medium">
|
||||
{student.name || student.preferred_username}
|
||||
</Box>
|
||||
<Box
|
||||
fontSize="xs"
|
||||
opacity={0.8}
|
||||
color={colorMode === "light" ? "gray.600" : "gray.300"}
|
||||
>
|
||||
{t('journal.pl.lesson.notMarked')}
|
||||
</Box>
|
||||
</Box>
|
||||
|
@ -22,8 +22,6 @@ export const StudentList = styled.ul`
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
gap: 12px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user