From 2ea14d81f8c2b7173f5531ca809d29bcbc81570a Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Sun, 21 Sep 2025 12:55:46 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D1=82=D0=B0=D0=B9=D0=BC=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewPublicationPage/ApologyPage.tsx       |  2 +-
 .../ViewPublicationPage/Question.tsx          | 54 ++++++----
 lib/ui_kit/timer/CircularTimer.tsx            | 98 +++++++++++++++++++
 3 files changed, 133 insertions(+), 21 deletions(-)
 create mode 100644 lib/ui_kit/timer/CircularTimer.tsx

diff --git a/lib/components/ViewPublicationPage/ApologyPage.tsx b/lib/components/ViewPublicationPage/ApologyPage.tsx
index a03f32f..b6bce50 100644
--- a/lib/components/ViewPublicationPage/ApologyPage.tsx
+++ b/lib/components/ViewPublicationPage/ApologyPage.tsx
@@ -24,7 +24,7 @@ export const ApologyPage = ({ error }: Props) => {
           color: "text.primary",
         }}
       >
-        {t(message.toLowerCase())}
+        {/* {t(message.toLowerCase())} */}
       </Typography>
     </Box>
   );
diff --git a/lib/components/ViewPublicationPage/Question.tsx b/lib/components/ViewPublicationPage/Question.tsx
index eb45fa3..a9f89cd 100644
--- a/lib/components/ViewPublicationPage/Question.tsx
+++ b/lib/components/ViewPublicationPage/Question.tsx
@@ -24,6 +24,7 @@ import { DESIGN_LIST } from "@/utils/designList";
 import { type ReactNode } from "react";
 import { isProduction } from "@/utils/defineDomain";
 import { useQuizStore } from "@/stores/useQuizStore";
+import { CustomCircularTimer } from "@/ui_kit/timer/CircularTimer";
 
 type Props = {
   currentQuestion: RealTypedQuizQuestion;
@@ -94,32 +95,45 @@ export const Question = ({
               stepNumber={currentQuestionStepNumber}
             />
             {show_badge && (
-              <Link
-                target="_blank"
-                href={`https://${isProduction ? "" : "s"}quiz.pena.digital/answer/v1.0.0/logo?q=${quizId}`}
+              <Box
                 sx={{
                   mt: "20px",
                   alignSelf: "end",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "end",
+                  gap: "13px",
                 }}
               >
-                {quizThemes[settings.cfg.theme].isLight ? (
-                  <NameplateLogoFQ
-                    style={{
-                      fontSize: "34px",
-                      width: "200px",
-                      height: "auto",
-                    }}
+                {
+                  <CustomCircularTimer
+                    duration={60}
+                    remaining={30}
                   />
-                ) : (
-                  <NameplateLogoFQDark
-                    style={{
-                      fontSize: "34px",
-                      width: "200px",
-                      height: "auto",
-                    }}
-                  />
-                )}
-              </Link>
+                }
+                <Link
+                  target="_blank"
+                  href={`https://${isProduction ? "" : "s"}quiz.pena.digital/answer/v1.0.0/logo?q=${quizId}`}
+                >
+                  {quizThemes[settings.cfg.theme].isLight ? (
+                    <NameplateLogoFQ
+                      style={{
+                        fontSize: "34px",
+                        width: "200px",
+                        height: "auto",
+                      }}
+                    />
+                  ) : (
+                    <NameplateLogoFQDark
+                      style={{
+                        fontSize: "34px",
+                        width: "200px",
+                        height: "auto",
+                      }}
+                    />
+                  )}
+                </Link>
+              </Box>
             )}
           </Box>
         </Box>
diff --git a/lib/ui_kit/timer/CircularTimer.tsx b/lib/ui_kit/timer/CircularTimer.tsx
new file mode 100644
index 0000000..4d77c18
--- /dev/null
+++ b/lib/ui_kit/timer/CircularTimer.tsx
@@ -0,0 +1,98 @@
+import { CircularProgress, Box, Typography, useTheme, styled } from "@mui/material";
+
+const StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({
+  "& .MuiCircularProgress-circle": {
+    strokeLinecap: "round",
+    transition: "stroke-dashoffset 0.3s ease",
+  },
+}));
+
+export const CustomCircularTimer: React.FC<CircularTimerProps> = ({ duration, remaining }) => {
+  const theme = useTheme();
+  const progress = (remaining / duration) * 100;
+
+  return (
+    <Box sx={{ position: "relative", display: "inline-flex", width: 76, height: 76 }}>
+      {/* Серый фон */}
+      <Box
+        sx={{
+          border: "#9A9AAF solid 1px",
+          position: "absolute",
+          height: "72px",
+          width: "72px",
+          borderRadius: "100%",
+          top: "2px",
+          left: "2px",
+        }}
+      />
+
+      {/* Основной прогресс */}
+      <StyledCircularProgress
+        variant="determinate"
+        value={progress}
+        size={76}
+        thickness={4}
+        sx={{
+          color: "linear-gradient(135deg, #FC712F 0%, #7E2AEA 100%)",
+          position: "absolute",
+
+          "& .MuiCircularProgress-circle": {
+            strokeLinecap: "round",
+            stroke: "url(#timer-gradient)", // ← правильное использование
+          },
+        }}
+      />
+
+      <svg
+        width={0}
+        height={0}
+      >
+        <defs>
+          <linearGradient
+            id="timer-gradient"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop
+              offset="9.9%"
+              stopColor="#FC712F"
+            />
+            <stop
+              offset="73.88%"
+              stopColor="#7E2AEA"
+            />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      {/* Центральный контент */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: 56,
+          height: 56,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Typography
+          variant="body1"
+          fontWeight="bold"
+          sx={{
+            fontSize: "16px",
+            fontWeight: 400,
+            color: theme.palette.text.primary,
+          }}
+        >
+          {remaining}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};