SQuiz/frontAnswerer
3
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

визуал карточки овертайм

Browse Source
This commit is contained in:
Nastya 2025-10-21 19:33:08 +03:00
parent dac5356d1d
commit 05b8d9a0ec
7 changed files with 286 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
lib/components/ViewPublicationPage/StartPageViewPublication/OverTime.tsx Normal file
View File

@ -0,0 +1,166 @@
import { Box, Typography, useTheme } from "@mui/material";
export const OverTime = () => {
const theme = useTheme();
const days = 5;
const hours = 11;
const minutes = 13;
const seconds = 15;
return (
<Box
id="here"
sx={{
width: "225px",
backgroundColor: (theme.palette as any).paperBackground,
boxShadow: "1px 1px 4px 0px rgba(51, 54, 71, 0.29)",
borderRadius: "8px",
p: "10px",
}}
>
<Typography
sx={{
fontSize: "12px",
color: (theme.palette as any).paperText,
textAlign: "center",
}}
>
Квиз станет недоступен через
</Typography>
<Box
sx={{
display: "inline-flex",
justifyContent: "space-around",
alignItems: "center",
width: "100%",
mt: "8px",
color: (theme.palette as any).paperSecondaryText,
}}
>
<Box
sx={{
bgcolor: (theme.palette as any).paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: (theme.palette as any).paperText,
lineHeight: 1.2,
}}
>
{days}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
дней
</Typography>
</Box>
:
<Box
sx={{
bgcolor: (theme.palette as any).paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: (theme.palette as any).paperText,
lineHeight: 1.2,
}}
>
{hours}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
часов
</Typography>
</Box>
:
<Box
sx={{
bgcolor: (theme.palette as any).paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: (theme.palette as any).paperText,
lineHeight: 1.2,
}}
>
{minutes}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
мин.
</Typography>
</Box>
:
<Box
sx={{
bgcolor: (theme.palette as any).paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: (theme.palette as any).paperText,
lineHeight: 1.2,
}}
>
{seconds}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
сек.
</Typography>
</Box>
</Box>
</Box>
);
};

4
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -1,6 +1,7 @@
import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui/material";
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
import { OverTime } from "./OverTime";
import { useQuizStore } from "@/stores/useQuizStore";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
@ -145,6 +146,7 @@ export const StartPageViewPublication = () => {
>
{settings.cfg.info.orgname}
</Typography>
<OverTime />
</Box>
</Box>
);
@ -477,8 +479,8 @@ export const StartPageViewPublication = () => {
{settings.cfg.info.law}
</Typography>
</Box>
{show_badge && PenaBadge}
здравствуй
</Box>
</>
}

8
lib/utils/themes/Publication/genericPublication.ts
View File

@ -3,6 +3,14 @@ import theme from "../generic";
const themePublic = createTheme({
...theme,
palette: {
...theme.palette,
// Переопределяем цвета для публичных тем
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
components: {
...theme.components,
MuiButton: {

81
lib/utils/themes/Publication/themePublication.ts
View File

@ -7,6 +7,7 @@ import type { QuizTheme } from "@model/settingsData";
const StandardTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#7E2AEA",
dark: "#581CA7",
@ -28,6 +29,7 @@ const StandardTheme = createTheme({
const StandardDarkTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#7E2AEA",
dark: "#581CA7",
@ -43,12 +45,18 @@ const StandardDarkTheme = createTheme({
background: {
default: "#333647",
},
},
// Темные цвета для OverTime
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
} satisfies any,
});
const PinkTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#D34085",
dark: "#AD376E",
@ -70,6 +78,7 @@ const PinkTheme = createTheme({
const PinkDarkTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#D34085",
dark: "#AD376E",
@ -85,12 +94,17 @@ const PinkDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const BlackWhiteTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#4E4D51",
dark: "#323232",
@ -112,6 +126,7 @@ const BlackWhiteTheme = createTheme({
const OliveTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#758E4F",
dark: "#4A6324",
@ -133,6 +148,7 @@ const OliveTheme = createTheme({
const PurpleTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#7E2AEA",
dark: "#581CA7",
@ -154,6 +170,7 @@ const PurpleTheme = createTheme({
const YellowTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#F2B133",
dark: "#E6A11C",
@ -175,6 +192,7 @@ const YellowTheme = createTheme({
const GoldDarkTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#E6AA37",
dark: "#E19A13",
@ -190,12 +208,17 @@ const GoldDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const BlueTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#4964ED",
dark: "#354DC8",
@ -217,6 +240,7 @@ const BlueTheme = createTheme({
const BlueDarkTheme = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#07A0C3",
dark: "#0A819C",
@ -232,12 +256,17 @@ const BlueDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const crutch_FurnitureABC = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#F2B133",
dark: "#E6A11C",
@ -253,12 +282,17 @@ const crutch_FurnitureABC = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design1 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#F2B133",
dark: "#E6A11C",
@ -274,12 +308,17 @@ const Design1 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design2 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#3D9A63",
dark: "#247746",
@ -295,12 +334,17 @@ const Design2 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design3 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#4B6A99",
dark: "#32507D",
@ -322,6 +366,7 @@ const Design3 = createTheme({
const Design4 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#FF9431",
dark: "#EF8624",
@ -337,12 +382,17 @@ const Design4 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design5 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#2D99BA",
dark: "#1A84A6",
@ -358,12 +408,17 @@ const Design5 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design6 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#D34085",
dark: "#AD376E",
@ -379,12 +434,17 @@ const Design6 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design7 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#B47C3B",
dark: "#9C6524",
@ -400,12 +460,17 @@ const Design7 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design8 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#F0B136",
dark: "#E19F1D",
@ -421,12 +486,17 @@ const Design8 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design9 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#678F48",
dark: "#527933",
@ -442,12 +512,17 @@ const Design9 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
const Design10 = createTheme({
...themePublic,
palette: {
...themePublic.palette,
primary: {
main: "#3666AF",
dark: "#1B478A",
@ -463,6 +538,10 @@ const Design10 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});

7
lib/utils/themes/generic.ts
View File

@ -18,6 +18,13 @@ const theme = createTheme({
xl: 1536,
},
},
palette: {
// Базовые цвета для OverTime компонента
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
components: {
MuiCssBaseline: {
styleOverrides: {

10
lib/utils/themes/mui.d.ts vendored
View File

@ -1,5 +1,3 @@
import "@material-ui/styles";
declare module "@mui/material/styles" {
interface Palette {
lightPurple: Palette["primary"];
@ -13,6 +11,10 @@ declare module "@mui/material/styles" {
orange: Palette["primary"];
navbarbg: Palette["primary"];
ownPlaceholder: Palette["primary"];
paperBackground: string;
paperText: string;
paperSecondaryText: string;
paperBlockBackground: string;
}
interface PaletteOptions {
lightPurple?: PaletteOptions["primary"];
@ -26,6 +28,10 @@ declare module "@mui/material/styles" {
orange?: PaletteOptions["primary"];
navbarbg?: PaletteOptions["primary"];
ownPlaceholder?: PaletteOptions["primary"];
paperBackground?: string;
paperText?: string;
paperSecondaryText?: string;
paperBlockBackground?: string;
}
interface TypographyVariants {
infographic: React.CSSProperties;

14
src/types/mui-palette.d.ts vendored Normal file
View File

@ -0,0 +1,14 @@
declare module "@mui/material/styles" {
interface Palette {
paperBackground: string;
paperText: string;
paperSecondaryText: string;
paperBlockBackground: string;
}
interface PaletteOptions {
paperBackground?: string;
paperText?: string;
paperSecondaryText?: string;
paperBlockBackground?: string;
}
}