pin

lib/components/QuizAnswerer.tsx

@@ -13,7 +13,7 @@ import { handleComponentError } from "@utils/handleComponentError";
 import lightTheme from "@utils/themes/light";
 import moment from "moment";
 import { SnackbarProvider } from "notistack";
-import { startTransition, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { startTransition, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
 import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
@@ -51,6 +51,16 @@ function QuizAnswererInner({
   const yandexMetrics = useYandexMetricsGoals(quizSettings?.settings.cfg.yandexMetricsNumber);
   const r = useQuizStore();
   const { settings, questions } = useQuizStore();
+  const [currentTime, setCurrentTime] = React.useState(moment());
+
+  // Реактивный таймер для отслеживания времени
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(moment());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
 
   useEffect(() => {
     addquizid(quizId);
@@ -114,6 +124,19 @@ function QuizAnswererInner({
     return <ApologyPage error={new Error("no quiz id")} />;
   }
 
+  // Проверяем, истекло ли время для overTime
+  const overTimeConfig = settings?.cfg?.overTime;
+  const isOverTimeEnabled = overTimeConfig?.enabled;
+  const isTimeExpired =
+    isOverTimeEnabled && overTimeConfig?.endsAt
+      ? currentTime.isAfter(moment(overTimeConfig.endsAt)) || currentTime.isSame(moment(overTimeConfig.endsAt))
+      : false;
+
+  // Если время истекло и нет стартовой страницы, показываем ApologyPage
+  if (isTimeExpired && settings?.cfg?.noStartPage) {
+    return <ApologyPage error={new Error("quiz time expired")} />;
+  }
+
   const quizContainer = (
     <Box
       ref={rootContainerRef}

lib/components/ViewPublicationPage/StartPageViewPublication/OverTime.tsx

@@ -0,0 +1,213 @@
+import { Box, Typography, useTheme, SxProps, Theme } from "@mui/material";
+import { useQuizStore } from "@stores/useQuizStore";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+type OverTimeProps = {
+  sx?: SxProps<Theme>;
+};
+
+export const OverTime = ({ sx }: OverTimeProps) => {
+  const theme = useTheme();
+  const { settings } = useQuizStore();
+  const { t } = useTranslation();
+  const [currentTime, setCurrentTime] = React.useState(moment());
+
+  // Реактивный таймер с useEffect
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(moment());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Проверяем, включен ли overTime
+  const overTimeConfig = settings?.cfg?.overTime;
+  const isEnabled = overTimeConfig?.enabled;
+
+  // Если не включен, не показываем карточку
+  if (!isEnabled) {
+    return null;
+  }
+
+  // Функция для расчета времени до окончания
+  const calculateTimeLeft = (now: moment.Moment) => {
+    // Для тестирования: добавляем 2 часа к текущему времени
+    const testEndsAt = moment().add(2, "hours");
+    const endsAt = overTimeConfig?.endsAt ? moment(overTimeConfig.endsAt) : testEndsAt;
+
+    if (endsAt.isBefore(now) || endsAt.isSame(now)) {
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    }
+
+    const duration = moment.duration(endsAt.diff(now));
+
+    return {
+      days: Math.floor(duration.asDays()),
+      hours: duration.hours(),
+      minutes: duration.minutes(),
+      seconds: duration.seconds(),
+    };
+  };
+
+  const { days, hours, minutes, seconds } = calculateTimeLeft(currentTime);
+
+  return (
+    <Box
+      sx={{
+        width: "225px",
+        backgroundColor: (theme.palette as any).paperBackground,
+        boxShadow: "1px 1px 4px 0px rgba(51, 54, 71, 0.29)",
+        borderRadius: "8px",
+        p: "10px",
+        ...sx,
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: "12px",
+          color: (theme.palette as any).paperText,
+          textAlign: "center",
+        }}
+      >
+        {overTimeConfig?.description || t("Quiz will become unavailable in")}
+      </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,
+            }}
+          >
+            {t("days")}
+          </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,
+            }}
+          >
+            {t("hours")}
+          </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,
+            }}
+          >
+            {t("minutes")}
+          </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,
+            }}
+          >
+            {t("seconds")}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -1,6 +1,9 @@
 import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui/material";
+import moment from "moment";
+import React from "react";
 
 import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
+import { OverTime } from "./OverTime";
 
 import { useQuizStore } from "@/stores/useQuizStore";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
@@ -24,6 +27,16 @@ export const StartPageViewPublication = () => {
   const { settings, show_badge, quizId, questions } = useQuizStore();
   const { isMobileDevice } = useUADevice();
   const setCurrentQuizStep = useQuizViewStore((state) => state.setCurrentQuizStep);
+  const [currentTime, setCurrentTime] = React.useState(moment());
+
+  // Реактивный таймер для обновления времени
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(moment());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
 
   const size = useRootContainerSize();
   const isMobile = size < 700;
@@ -39,15 +52,6 @@ export const StartPageViewPublication = () => {
     yandexMetrics.phoneNumberOpened();
   };
 
-  console.log("------------------------------------------------");
-  console.log("Background type:", settings.cfg.startpage.background.type);
-  console.log("Is image type:", settings.cfg.startpage.background.type === "image");
-  console.log("Is video type:", settings.cfg.startpage.background.type === "video");
-  console.log("Video URL:", settings.cfg.startpage.background.video);
-  console.log("Desktop background:", settings.cfg.startpage.background.desktop);
-  console.log("Startpage type:", settings.cfg.startpageType);
-  console.log("------------------------------------------------");
-
   const background =
     settings.cfg.startpage.background.type === "image" ? (
       <img
@@ -66,7 +70,6 @@ export const StartPageViewPublication = () => {
     ) : settings.cfg.startpage.background.type === "video" ? (
       settings.cfg.startpage.background.video ? (
         (() => {
-          console.log("Rendering QuizVideo with URL:", settings.cfg.startpage.background.video);
           return (
             <QuizVideo
               videoUrl={settings.cfg.startpage.background.video}
@@ -96,6 +99,12 @@ export const StartPageViewPublication = () => {
     <Box
       sx={{
         margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
+        display:
+          isMobile && settings.cfg.startpage.position === "center" && settings.cfg.startpageType === "expanded"
+            ? "flex"
+            : "block",
+        flexDirection: "column",
+        alignItems: "center",
       }}
     >
       <Box
@@ -146,6 +155,8 @@ export const StartPageViewPublication = () => {
           {settings.cfg.info.orgname}
         </Typography>
       </Box>
+      {((settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position !== "center") ||
+        (isMobile && settings.cfg.startpageType === "expanded")) && <OverTime />}
     </Box>
   );
 
@@ -159,12 +170,12 @@ export const StartPageViewPublication = () => {
         alignItems: "center",
         gap: "7px",
         textDecoration: "none",
-        marginLeft:
+        mr:
           settings.cfg.startpageType === "expanded" &&
           settings.cfg.startpage.position === "center" &&
           !isTablet &&
           !isMobile
-            ? "61px"
+            ? "27px"
             : undefined,
       }}
     >
@@ -182,6 +193,14 @@ export const StartPageViewPublication = () => {
     (question) => question.type !== null && question.type !== "result"
   ).length;
 
+  // Проверяем, истекло ли время для overTime
+  const overTimeConfig = settings?.cfg?.overTime;
+  const isOverTimeEnabled = overTimeConfig?.enabled;
+  const isTimeExpired =
+    isOverTimeEnabled && overTimeConfig?.endsAt
+      ? currentTime.isAfter(moment(overTimeConfig.endsAt)) || currentTime.isSame(moment(overTimeConfig.endsAt))
+      : false;
+
   const onQuizStart = () => {
     setCurrentQuizStep("question");
 
@@ -289,7 +308,7 @@ export const StartPageViewPublication = () => {
               <Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
                 <Button
                   variant="contained"
-                  disabled={realQuestionsCount === 0}
+                  disabled={realQuestionsCount === 0 || isTimeExpired}
                   sx={{
                     fontSize: "18px",
                     padding: "10px 20px",
@@ -347,6 +366,15 @@ export const StartPageViewPublication = () => {
                       : "0",
                 }}
               >
+                {((isMobile && settings.cfg.startpageType === "centered") ||
+                  settings.cfg.startpageType === "standard") && (
+                  <OverTime
+                    sx={{
+                      m: isMobile && settings.cfg.startpageType === "centered" ? "54px 0 20px" : "0",
+                      ml: settings.cfg.startpageType === "standard" && !isMobile ? "100%" : "0",
+                    }}
+                  />
+                )}
                 {settings.cfg.info.site && (
                   <ButtonBase
                     onClick={onSiteClick}
@@ -477,9 +505,33 @@ export const StartPageViewPublication = () => {
                   {settings.cfg.info.law}
                 </Typography>
               </Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "16px",
+                  alignItems: isMobile ? "center" : "end",
+                }}
+              >
+                {((!isMobile && settings.cfg.startpageType === "centered") ||
+                  (!isMobile &&
+                    settings.cfg.startpageType === "expanded" &&
+                    settings.cfg.startpage.position === "center")) && (
+                  <OverTime
+                    sx={{
+                      ml:
+                        !isMobile &&
+                        settings.cfg.startpageType === "expanded" &&
+                        settings.cfg.startpage.position === "center"
+                          ? "91px"
+                          : "0",
+                    }}
+                  />
+                )}
 
                 {show_badge && PenaBadge}
               </Box>
+            </Box>
           </>
         }
         backgroundBlock={background}

lib/model/settingsData.ts

@@ -123,6 +123,11 @@ export interface QuizConfig {
   yandexMetricsNumber?: number;
   vkMetricsNumber?: number;
   backBlocked?: boolean;
+  overTime?: {
+    enabled: boolean;
+    endsAt: number;
+    description: string;
+  };
 }
 
 export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";

lib/utils/themes/Publication/genericPublication.ts

@@ -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: {

lib/utils/themes/Publication/themePublication.ts

@@ -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",
   },
 });
 

lib/utils/themes/generic.ts

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

lib/utils/themes/mui.d.ts

@@ -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;

public/locales/en.json

@@ -56,5 +56,11 @@
   "Step": "Step",
   "questions are not ready yet": "There are no questions for the audience yet. Please wait",
   "Add your image": "Add your image",
-  "select emoji": "select emoji"
+  "select emoji": "select emoji",
+  "quiz time expired": "Quiz time has expired",
+  "Quiz will become unavailable in": "Quiz will become unavailable in",
+  "days": "days",
+  "hours": "hours",
+  "minutes": "min.",
+  "seconds": "sec."
 }

public/locales/ru.json

@@ -59,5 +59,11 @@
   "select emoji": "выберите смайлик",
   "Please complete the phone number": "Пожалуйста, завершите номер телефона",
   "Please enter a valid email": "Пожалуйста, введите корректную почту",
-  "Please enter a valid phone number": "Пожалуйста, введите корректный номер телефона"
+  "Please enter a valid phone number": "Пожалуйста, введите корректный номер телефона",
+  "quiz time expired": "Время квиза истекло",
+  "Quiz will become unavailable in": "Квиз станет недоступен через",
+  "days": "дней",
+  "hours": "часов",
+  "minutes": "мин.",
+  "seconds": "сек."
 }

public/locales/uz.json

@@ -56,5 +56,11 @@
   "Step": "Qadam",
   "questions are not ready yet": "Tomoshabinlar uchun hozircha savollar yo'q. Iltimos kuting",
   "Add your image": "Rasmingizni qo'shing",
-  "select emoji": "emoji tanlang"
+  "select emoji": "emoji tanlang",
+  "quiz time expired": "Test vaqti tugadi",
+  "Quiz will become unavailable in": "Test quyidagi vaqtda mavjud bo'lmaydi",
+  "days": "kun",
+  "hours": "soat",
+  "minutes": "daq.",
+  "seconds": "son."
 }

src/i18n/i18nWidget.ts

@@ -73,6 +73,12 @@ const r = {
       "Add your image": "Добавьте своё изображение",
       "select emoji": "выберите смайлик",
       "Please complete the phone number": "Пожалуйста, заполните номер телефона до конца",
+      "quiz time expired": "Время квиза истекло",
+      "Quiz will become unavailable in": "Квиз станет недоступен через",
+      days: "дней",
+      hours: "часов",
+      minutes: "мин.",
+      seconds: "сек.",
       "": "", // Пустой ключ для fallback
     },
   },
@@ -137,6 +143,12 @@ const r = {
       "Add your image": "Add your image",
       "select emoji": "select emoji",
       "Please complete the phone number": "Please complete the phone number",
+      "quiz time expired": "Quiz time has expired",
+      "Quiz will become unavailable in": "Quiz will become unavailable in",
+      days: "days",
+      hours: "hours",
+      minutes: "min.",
+      seconds: "sec.",
       "": "", // Пустой ключ для fallback
     },
   },
@@ -201,6 +213,12 @@ const r = {
       "Add your image": "Rasmingizni qo'shing",
       "select emoji": "emoji tanlang",
       "Please complete the phone number": "Iltimos, telefon raqamini to'liq kiriting",
+      "quiz time expired": "Test vaqti tugadi",
+      "Quiz will become unavailable in": "Test quyidagi vaqtda mavjud bo'lmaydi",
+      days: "kun",
+      hours: "soat",
+      minutes: "daq.",
+      seconds: "son.",
       "": "", // Пустой ключ для fallback
     },
   },

src/types/mui-palette.d.ts

@@ -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;
+  }
+}