bro-js/journal.pl
bro-js/journal.pl
7
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

flip animation

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-25 18:05:03 +03:00
parent ac87a2fc80
commit c02cf6dfc9
2 changed files with 87 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/lesson-details.tsx
View File

@ -315,7 +315,10 @@ const LessonDetail = () => {
}} }}
style={{ style={{
transformStyle: "preserve-3d", transformStyle: "preserve-3d",
perspective: "1000px" perspective: "1000px",
aspectRatio: "1",
width: "100%",
display: "block"
}} }}
> >
{/* Front side - visible when present */} {/* Front side - visible when present */}
@ -356,21 +359,98 @@ const LessonDetail = () => {
width="100%" width="100%"
height="100%" height="100%"
bg={colorMode === "light" ? "gray.100" : "gray.600"} bg={colorMode === "light" ? "gray.100" : "gray.600"}
borderRadius="md" borderRadius="12px"
align="center" align="center"
justify="center" justify="center"
p={4} p={4}
overflow="hidden"
style={{ style={{
backfaceVisibility: "hidden", backfaceVisibility: "hidden",
transform: "rotateY(180deg)", transform: "rotateY(180deg)",
zIndex: student.present ? 0 : 1 zIndex: student.present ? 0 : 1,
aspectRatio: "1"
}} }}
> >
<Box textAlign="center"> <Box
<Box fontSize="sm" fontWeight="medium"> position="absolute"
{student.name || student.lastName} 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>
<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')} {t('journal.pl.lesson.notMarked')}
</Box> </Box>
</Box> </Box>

2
src/pages/style.ts
View File

@ -22,8 +22,6 @@ export const StudentList = styled.ul`
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px; gap: 16px;
width: 100%; width: 100%;
max-height: 600px;
overflow-y: auto;
@media (max-width: 768px) { @media (max-width: 768px) {
gap: 12px; gap: 12px;