utm

src/assets/icons/PlusIco.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="6" fill="#EEE4FC"/>
+<path d="M26.9503 17.9503H18M18 17.9503V9M18 17.9503V26.9006M18 17.9503H9.04972" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -1,11 +1,14 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
 import { decrementCurrentStep } from "@root/quizes/actions";
 import ArrowLeft from "@/assets/icons/questionsPage/arrowLeft";
 import QuizInstallationCard from "./QuizInstallationCard/QuizInstallationCard";
 import QuizLinkCard from "./QuizLinkCard";
 import { useNavigate } from "react-router-dom";
+import QuizMarkCreate from "./QuizInstallationCard/QuizMarkCreate";
 
 export default function InstallQuiz() {
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1426));
   const navigate = useNavigate();
   return (
     <>
@@ -17,8 +20,16 @@ export default function InstallQuiz() {
           flexDirection: "column",
         }}
       >
+        <Box sx={{
+          display: "inline-flex",
+          gap: "22px",
+          flexDirection: isTablet ? "column" : "row"
+        }}>
           <QuizLinkCard />
+          <QuizMarkCreate />
+        </Box>
         <QuizInstallationCard />
+
         <Box
           sx={{
             display: "flex",

src/pages/InstallQuiz/QuizInstallationCard/QuizMarkCreate.tsx

@@ -0,0 +1,227 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  IconButton,
+  MenuItem,
+  TextField as MuiTextField,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  TextFieldProps,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { FC, useState } from "react";
+import ArrowDown from "@/assets/icons/ArrowDownIcon";
+import CopyIcon from "@/assets/icons/CopyIcon";
+import LinkIcon from "@/assets/icons/LinkIcon";
+import { ReactComponent as PlusIco } from "@/assets/icons/PlusIco.svg";
+import { InfoPopover } from "@/ui_kit/InfoPopover";
+const TextField = MuiTextField as unknown as FC<TextFieldProps>;
+
+
+export default function QuizMarkCreate() {
+  const theme = useTheme();
+  const quiz = useCurrentQuiz();
+  const [display, setDisplay] = useState("1");
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+
+  const CopyLink = () => {
+    let one = (document.getElementById("inputMarkLinkone") as HTMLInputElement)
+      ?.value;
+    let text = (document.getElementById("inputMarkLink") as HTMLInputElement)
+      ?.value;
+    navigator.clipboard.writeText(one + text);
+  };
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setDisplay(event.target.value);
+  };
+
+  if (!quiz) return null;
+
+  return (
+    <Paper
+      sx={{
+        boxSizing: "border-box",
+        maxWidth: "580px",
+        width: "100%",
+        padding: "22px 18px 20px 20px",
+        borderRadius: "12px",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow:
+          "0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: isMobile ? "flex-start" : "center",
+          gap: "10px",
+          flexDirection: isMobile ? "column" : "row",
+        }}
+      >
+        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+          <LinkIcon
+            color={theme.palette.brightPurple.main}
+            bgcolor={"#EEE4FC"}
+          />
+          <Typography color="#4D4D4D">Создание/выбор utm меток</Typography>
+        </Box>
+        <Box>
+
+          <InfoPopover />
+          <FormControl
+            fullWidth
+            size="small"
+            sx={{
+
+              width: "100%",
+              maxWidth: "118px",
+              height: "24px",
+            }}
+          >
+            <Select
+              id="display-select"
+              variant="outlined"
+              value={display}
+              displayEmpty
+              onChange={handleChange}
+              sx={{
+                height: "24px",
+                borderRadius: "8px",
+                "& .MuiOutlinedInput-notchedOutline": {
+                  border: "none !important",
+                },
+                "& .MuiSelect-icon": {
+                  position: 'relative',
+                  marginBottom: '13px',
+                }
+              }}
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    mt: "8px",
+                    p: "4px",
+                    borderRadius: "8px",
+                  },
+                },
+                MenuListProps: {
+                  sx: {
+                    py: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "8px",
+                    "& .Mui-selected": {
+                      backgroundColor: theme.palette.background.default,
+                      color: theme.palette.brightPurple.main,
+                    },
+                  },
+                },
+              }}
+              inputProps={{
+                sx: {
+                  color: theme.palette.brightPurple.main,
+                  display: "flex",
+                  alignItems: "center",
+                  px: "20px",
+                  gap: "20px"
+                },
+              }}
+              IconComponent={(props) => <ArrowDown  {...props} sx={{
+                position: 'relative',
+                top: '-5px', // Поднимаем вверх
+                right: '5px'
+              }} />}
+
+            >
+              <MenuItem
+                value={1}
+                sx={{
+                  display: "flex",
+                  gap: "20px",
+                  p: "4px",
+                  borderRadius: "5px",
+                  color: theme.palette.grey2.main,
+                }}
+              >
+                Google
+              </MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
+      </Box>
+      <Box sx={{ display: "inline-flex", alignItems: "center", justifyContent: "space-between", margin: "30px 0px 0px 0px" }}>
+        <Box sx={{ display: "inline-flex" }}>
+          <FormControl variant="standard" sx={{ p: 0 }}>
+            <TextField
+              disabled
+              id="inputMarkLinkone"
+              placeholder="Название"
+              sx={{
+                width: isTablet ? "100%" : "182px",
+                maxWidth: "182px",
+                "& .MuiInputBase-root": {
+
+                  height: "48px",
+                  color: "#525253",
+                  borderRadius: "8px 0 0 8px",
+                  backgroundColor: "#F2F3F7",
+                },
+              }}
+            />
+          </FormControl>
+          <FormControl variant="standard" sx={{ p: 0 }}>
+            <TextField
+              placeholder="пример-ссылки-с-utm-метками"
+
+              sx={{
+
+                "& .MuiInputBase-root": {
+                  color: "#525253",
+                  width: isTablet ? "100%" : "317px",
+                  maxWidth: "317px",
+                  height: "48px",
+                  borderRadius: "0 8px 8px 0",
+                  backgroundColor: "#F2F3F7"
+                },
+              }}
+              inputProps={{
+                sx: {
+                  borderRadius: "0 10px 10px 0",
+                  fontSize: "18px",
+                  lineHeight: "21px",
+                  py: 0,
+                },
+              }}
+            />
+          </FormControl>
+
+          <IconButton
+            onClick={CopyLink}
+            id={"copyLink"}
+            sx={{ borderRadius: "6px" }}
+          >
+            <CopyIcon
+              color={theme.palette.brightPurple.main}
+              bgcolor={"#EEE4FC"}
+            />
+          </IconButton>
+        </Box>
+      </Box>
+
+      <Box sx={{ display: "inline-flex", margin: "11px 0 0 0", alignItems: "flex-end" }}>
+        <IconButton sx={{ borderRadius: "6px", padding: "0px 0px 0px 0px" }}>
+          <PlusIco></PlusIco>
+        </IconButton>
+        <Button variant="contained" sx={{ width: "133px", height: "44px", margin: "0px 0 0 auto" }}>Сохранить</Button>
+      </Box>
+    </Paper>
+  );
+
+}

src/pages/InstallQuiz/QuizLinkCard.tsx

@@ -18,6 +18,11 @@ import { FC, useState } from "react";
 import ArrowDown from "@/assets/icons/ArrowDownIcon";
 import CopyIcon from "@/assets/icons/CopyIcon";
 import LinkIcon from "@/assets/icons/LinkIcon";
+import BrowserIcon from "@/assets/icons/BrowserIcon";
+import TiktokIcon from "@/assets/icons/tiktokIcon";
+import { QrCode, Telegram } from "@mui/icons-material";
+import TelegramIcon from "@/assets/icons/telegramIcon";
+import { CrossedEyeIcon } from "@/assets/icons/CrossedEyeIcon";
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>;
 
@@ -27,6 +32,7 @@ export default function QuizLinkCard() {
   const { isTestServer } = useDomainDefine();
   const [display, setDisplay] = useState("1");
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   const CopyLink = () => {
     let one = (document.getElementById("inputLinkone") as HTMLInputElement)
@@ -45,13 +51,13 @@ export default function QuizLinkCard() {
   return (
     <Paper
       sx={{
-        maxWidth: "522px",
+        boxSizing: "border-box",
+        maxWidth: "560px",
         width: "100%",
         padding: "20px",
         borderRadius: "12px",
         display: "flex",
         flexDirection: "column",
-        gap: "30px",
         boxShadow:
           "0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
       }}
@@ -69,105 +75,45 @@ export default function QuizLinkCard() {
             color={theme.palette.brightPurple.main}
             bgcolor={"#EEE4FC"}
           />
-          <Typography>Ссылка на quiz</Typography>
+          <Typography color="#4D4D4D">Ссылка на quiz</Typography>
         </Box>
-        <FormControl
-          fullWidth
-          size="small"
-          sx={{
-            width: "100%",
-            maxWidth: "180px",
-            height: "48px",
-          }}
-        >
-          <Select
-            id="display-select"
-            variant="outlined"
-            value={display}
-            displayEmpty
-            onChange={handleChange}
-            sx={{
-              height: "48px",
-              borderRadius: "8px",
-              "& .MuiOutlinedInput-notchedOutline": {
-                border: "none !important",
-              },
-            }}
-            MenuProps={{
-              PaperProps: {
-                sx: {
-                  mt: "8px",
-                  p: "4px",
-                  borderRadius: "8px",
-                },
-              },
-              MenuListProps: {
-                sx: {
-                  py: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "8px",
-                  "& .Mui-selected": {
-                    backgroundColor: theme.palette.background.default,
-                    color: theme.palette.brightPurple.main,
-                  },
-                },
-              },
-            }}
-            inputProps={{
-              sx: {
-                color: theme.palette.brightPurple.main,
-                display: "flex",
-                alignItems: "center",
-                px: "9px",
-                gap: "20px",
-              },
-            }}
-            IconComponent={(props) => <ArrowDown {...props} />}
-          >
-            <MenuItem
-              value={1}
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: "20px",
-                p: "4px",
-                borderRadius: "5px",
-                color: theme.palette.grey2.main,
-              }}
-            >
-              Стандартная
-            </MenuItem>
-          </Select>
-        </FormControl>
+       
       </Box>
-      <Box sx={{ display: "flex", alignItems: "center" }}>
-        <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
+      <Box sx={{display: "inline-flex", alignItems: "center", justifyContent: "space-between", margin:"30px 0px 0px 0px"}}>
+        <Box sx={{ display: "inline-flex"}}>
+          <FormControl variant="standard" sx={{ p: 0 }}>
             <TextField
               disabled
               id={"inputLinkone"}
               value={isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}
               sx={{
+                width: isTablet ? "100%" : "182px",
+                maxWidth:"182px",
                 "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                   border: "none",
                 },
                 "& .MuiInputBase-root": {
+
                   height: "48px",
+                  color:"#8c8694",
                   borderRadius: "10px 0 0 10px",
                   backgroundColor: "#EEE4FC",
                 },
               }}
             />
           </FormControl>
-        <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
+          <FormControl variant="standard" sx={{ p: 0 }}>
             <TextField
               value={quiz.qid}
               id={"inputLink"}
-            fullWidth
+
               placeholder="6235840cc71"
               sx={{
+
                 "& .MuiInputBase-root": {
                   backgroundColor: theme.palette.background.default,
+                  color: "#a5a5ad",
+                  width: isTablet?"100%":"297px",
                   height: "48px",
                   borderRadius: "0 10px 10px 0",
                 },
@@ -182,6 +128,7 @@ export default function QuizLinkCard() {
               }}
             />
           </FormControl>
+    
         <IconButton
           onClick={CopyLink}
           id={"copyLink"}
@@ -193,17 +140,26 @@ export default function QuizLinkCard() {
           />
         </IconButton>
    </Box>
+      </Box>
+      <Box sx={{display:"inline-flex",margin:"29px 0 0 0",gap:"5px"}}>  
+           <BrowserIcon />
+          <TiktokIcon/>
+          <TelegramIcon/>
+         
       <Box
         sx={{
           display: "flex",
           alignItems: "center",
           justifyContent: "flex-end",
+          margin: "6px 0 0 auto",
         }}
       >
-        <Typography sx={{ color: "#FC712F" }}>
+        <Typography sx={{ color: "#FC712F", fontSize:"16px"}}>
           {quiz?.status === "start" ? "Опубликован" : "Не опубликован"}
         </Typography>
       </Box> 
+      </Box>
     </Paper>
+   
   );
 }