From 12e250d9a47bf83d593856f5f5238c20f5616a51 Mon Sep 17 00:00:00 2001
From: Tamara <tomka-zel@yandex.ru>
Date: Wed, 7 Jun 2023 17:20:45 +0300
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D1=81?=
 =?UTF-8?q?=20=D0=B4=D0=B5=D1=81=D0=BA=D1=82=D0=BE=D0=BF=D0=B0=D0=BC=D0=B8?=
 =?UTF-8?q?=2037,=2039=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B9=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B0=D1=87=D0=B8=20?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C=D1=82=D0=B0=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=D0=B0=20=D0=B2=20=D1=81?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B5=D0=BA=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/startPage/CardWithImage.tsx     |   4 +-
 src/pages/startPage/StartPageSettings.tsx | 431 +++++++++++-----------
 src/pages/startPage/steptwo.tsx           |   9 +-
 src/stores/quizes.ts                      |  62 ++--
 4 files changed, 264 insertions(+), 242 deletions(-)

diff --git a/src/pages/startPage/CardWithImage.tsx b/src/pages/startPage/CardWithImage.tsx
index fb3f83f3..68354add 100755
--- a/src/pages/startPage/CardWithImage.tsx
+++ b/src/pages/startPage/CardWithImage.tsx
@@ -4,15 +4,17 @@ import { Box, Typography, useTheme } from "@mui/material";
 interface Props {
     image: string;
     text: string;
+    border?: string;
 }
 
-export default function CardWithImage({ image, text }: Props) {
+export default function CardWithImage({ image, text, border }: Props) {
     const theme = useTheme();
 
     return (
         <Box sx={{
             flexGrow: 1,
             borderRadius: "12px",
+            border: {border},
             backgroundColor: "white",
             boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24), 
                         0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index 219601fa..131893a3 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -1,4 +1,4 @@
-import { Box, FormControl, Link, MenuItem, Select, Typography, useTheme } from "@mui/material";
+import {Box, Button, FormControl, Link, MenuItem, Select, Typography, useTheme} from "@mui/material";
 import { useState } from "react";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
@@ -14,6 +14,8 @@ import SelectableButton from "@ui_kit/SelectableButton";
 import SelectableIconButton from "./SelectableIconButton";
 import UploadBox from "@ui_kit/UploadBox";
 import CustomTextField from "@ui_kit/CustomTextField";
+import {quizStore} from "@root/quizes";
+import {useParams} from "react-router-dom";
 
 
 const designTypes = [
@@ -27,159 +29,199 @@ type BackgroundType = "image" | "video";
 type AlignType = "left" | "right";
 
 export default function StartPageSettings() {
+    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
+    const params = Number(useParams().quizId);
     const theme = useTheme();
-    const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
+    const designType = listQuizes[params].startpage
+    // const [designType, setDesignType] = useState<DesignType | "">(designTypes[0][0]);
     const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
     const [alignType, setAlignType] = useState<AlignType>("left");
 
     return (
-        <Box sx={{
-            backgroundColor: "white",
-            borderRadius: "12px",
-            p: "20px",
-            display: "flex",
-            gap: "20px",
-            boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+        <>
+            <Box sx={{
+                backgroundColor: "white",
+                borderRadius: "12px",
+                p: "20px",
+                display: "flex",
+                gap: "20px",
+                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={{
-                pr: "20px",
-                borderRight: `1px solid ${theme.palette.grey2.main}`,
-                display: "flex",
-                flexDirection: "column",
-                flex: `1 1 365px`,
             }}>
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
-                <FormControl
-                    fullWidth
-                    size="small"
-                    sx={{
-                        width: "100%",
-                        minWidth: "200px",
-                        height: "48px",
-                    }}
-                >
-                    <Select
-                        id="category-select"
-                        variant="outlined"
-                        value={designType}
-                        displayEmpty
-                        onChange={e => setDesignType(e.target.value as DesignType)}
+                <Box sx={{
+                    pr: "20px",
+                    borderRight: `1px solid ${theme.palette.grey2.main}`,
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: `1 1 365px`,
+                }}>
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Дизайн</Typography>
+                    <FormControl
+                        fullWidth
+                        size="small"
                         sx={{
+                            width: "100%",
+                            minWidth: "200px",
                             height: "48px",
-                            borderRadius: "8px",
-                            "& .MuiOutlinedInput-notchedOutline": {
-                                border: `1px solid ${theme.palette.brightPurple.main} !important`,
-                            },
                         }}
-                        MenuProps={{
-                            PaperProps: {
-                                sx: {
-                                    mt: "8px",
-                                    p: "4px",
-                                    borderRadius: "8px",
-                                    border: "1px solid #EEE4FC",
-                                    boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
-                                },
-                            },
-                            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} />}
                     >
-                        {designTypes.map(type =>
-                            <MenuItem
-                                key={type[0]}
-                                value={type[0]}
-                                sx={{
+                        <Select
+                            id="category-select"
+                            variant="outlined"
+                            value={designType}
+                            displayEmpty
+                            onChange={(e, i) => console.log(e.target, e.target.value, i)}
+                            // onChange={e => setDesignType(e.target.value as DesignType)}
+                            // onChange={updateQuizesList(params, {startpage: "standard"})}
+                            sx={{
+                                height: "48px",
+                                borderRadius: "8px",
+                                "& .MuiOutlinedInput-notchedOutline": {
+                                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
+                                },
+                            }}
+                            MenuProps={{
+                                PaperProps: {
+                                    sx: {
+                                        mt: "8px",
+                                        p: "4px",
+                                        borderRadius: "8px",
+                                        border: "1px solid #EEE4FC",
+                                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+                                    },
+                                },
+                                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",
-                                    p: "4px",
-                                    borderRadius: "5px",
-                                    color: theme.palette.grey2.main,
-                                }}
-                            >
-                                {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
-                                {type[0]}
-                            </MenuItem>
-                        )}
-                    </Select>
-                </FormControl>
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
-                <Box sx={{
-                    display: "flex",
-                    gap: "10px",
-                }}>
-                    <SelectableButton isSelected={backgroundType === "image"} onClick={() => setBackgroundType("image")}>
-                        Изображение
-                    </SelectableButton>
-                    <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
-                        Видео
-                    </SelectableButton>
-                </Box>
-                {backgroundType === "image" ?
-                    <>
-                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
-                        <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
-                        <Link sx={{
-                            mt: "20px",
-                            fontSize: "16px",
-                            lineHeight: "19px",
-                            color: theme.palette.orange.main,
-                            textDecorationColor: theme.palette.orange.main
-                        }}>Размер картинок</Link>
-                        <Box sx={{
-                            mt: "20px",
-                            display: "flex",
-                            gap: "10px",
-                            alignItems: "center",
+                                }
+                            }}
+                            IconComponent={props => <ArrowDown {...props} />}
+                        >
+                            {designTypes.map(type =>
+                                <MenuItem
+                                    key={type[0]}
+                                    value={type[0]}
 
-                        }}>
-                            <MobilePhoneIcon bgcolor="#EEE4FC" />
+                                    sx={{
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "20px",
+                                        p: "4px",
+                                        borderRadius: "5px",
+                                        color: theme.palette.grey2.main,
+                                    }}
+                                >
+                                    {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
+                                    {type[0]}
+                                </MenuItem>
+                            )}
+                        </Select>
+                    </FormControl>
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Фон</Typography>
+                    <Box sx={{
+                        display: "flex",
+                        gap: "10px",
+                    }}>
+                        <SelectableButton isSelected={backgroundType === "image"} onClick={() => setBackgroundType("image")}>
+                            Изображение
+                        </SelectableButton>
+                        <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
+                            Видео
+                        </SelectableButton>
+                    </Box>
+                    {backgroundType === "image" ?
+                        <>
+                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
+                            <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
                             <Link sx={{
+                                mt: "20px",
                                 fontSize: "16px",
                                 lineHeight: "19px",
-                                color: theme.palette.brightPurple.main,
-                                textDecorationColor: theme.palette.brightPurple.main
-                            }}>мобильная версия</Link>
-                        </Box>
-                    </>
-                    :
-                    <>
-                        <Box sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "7px",
-                            mt: "20px",
-                            mb: "14px",
-                        }}>
-                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
-                            <InfoIcon />
-                        </Box>
+                                color: theme.palette.orange.main,
+                                textDecorationColor: theme.palette.orange.main
+                            }}>Размер картинок</Link>
+                            <Box sx={{
+                                mt: "20px",
+                                display: "flex",
+                                gap: "10px",
+                                alignItems: "center",
+
+                            }}>
+                                <MobilePhoneIcon bgcolor="#EEE4FC" />
+                                <Link sx={{
+                                    fontSize: "16px",
+                                    lineHeight: "19px",
+                                    color: theme.palette.brightPurple.main,
+                                    textDecorationColor: theme.palette.brightPurple.main
+                                }}>мобильная версия</Link>
+                            </Box>
+                        </>
+                        :
+                        <>
+                            <Box sx={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "7px",
+                                mt: "20px",
+                                mb: "14px",
+                            }}>
+                                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main }}>Добавить видео</Typography>
+                                <InfoIcon />
+                            </Box>
+                            <UploadBox
+                                icon={<UploadIcon />}
+                                sx={{
+                                    height: "48px",
+                                    width: "48px",
+                                }}
+                            />
+                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
+                            <CustomCheckbox label="Зацикливать видео" />
+                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
+                            <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
+                        </>
+                    }
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
+                    <Box sx={{
+                        display: "flex",
+                        gap: "10px",
+                    }}>
+                        <SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
+                        <SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
+                    </Box>
+                    {backgroundType === "image" &&
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>
+                        Логотип</Typography>
+                    }
+                    <UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+                        Favicon</Typography>
+                    <Box sx={{
+                        display: "flex",
+                        alignItems: "end",
+                        gap: "10px",
+                    }}>
                         <UploadBox
                             icon={<UploadIcon />}
                             sx={{
@@ -187,91 +229,64 @@ export default function StartPageSettings() {
                                 width: "48px",
                             }}
                         />
-                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
-                        <CustomCheckbox label="Зацикливать видео" />
-                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
-                        <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
-                    </>
-                }
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
-                <Box sx={{
-                    display: "flex",
-                    gap: "10px",
-                }}>
-                    <SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
-                    <SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
+                        <Typography sx={{
+                            color: theme.palette.orange.main,
+                            fontSize: "16px",
+                            lineHeight: "19px",
+                            textDecoration: "underline",
+                        }}>5 MB максимум</Typography>
+                    </Box>
                 </Box>
-                {backgroundType === "image" &&
-                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px" }}>
-                        Логотип</Typography>
-                }
-                <UploadBox sx={{ mt: "20px" }} icon={<UploadIcon />} text="5 MB максимум" />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
-                    Favicon</Typography>
                 <Box sx={{
                     display: "flex",
-                    alignItems: "end",
-                    gap: "10px",
+                    flexDirection: "column",
+                    flex: `1 1 795px`,
                 }}>
-                    <UploadBox
-                        icon={<UploadIcon />}
-                        sx={{
-                            height: "48px",
-                            width: "48px",
-                        }}
-                    />
-                    <Typography sx={{
-                        color: theme.palette.orange.main,
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
+                    <CustomTextField placeholder="Начать" text={""} />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
+                    <CustomTextField placeholder="+7 900 000 00 00" text={""} />
+                    <CustomCheckbox label="Кликабельный" />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <Link sx={{
+                        mt: "20px",
                         fontSize: "16px",
                         lineHeight: "19px",
-                        textDecoration: "underline",
-                    }}>5 MB максимум</Typography>
+                        color: theme.palette.brightPurple.main,
+                        textDecorationColor: theme.palette.brightPurple.main
+                    }}>Дополнительно</Link>
+                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
+                    <Typography sx={{
+                        mt: "20px",
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        maxWidth: "80%",
+                        color: theme.palette.grey3.main,
+                    }}>
+                        Текст-заполнитель —
+                        это текст, который имеет Текст-заполнитель —
+                        это текст, который имеет Текст-заполнитель —
+                        это текст, который имеет Текст-заполнитель —
+                        это текст, который имеет Текст-заполнитель
+                    </Typography>
                 </Box>
             </Box>
-            <Box sx={{
-                display: "flex",
-                flexDirection: "column",
-                flex: `1 1 795px`,
-            }}>
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mb: "14px" }}>Заголовок</Typography>
-                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
-                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
-                <CustomTextField placeholder="Начать" text={""} />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
-                <CustomTextField placeholder="+7 900 000 00 00" text={""} />
-                <CustomCheckbox label="Кликабельный" />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
-                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
-                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
-                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
-                <Link sx={{
-                    mt: "20px",
-                    fontSize: "16px",
-                    lineHeight: "19px",
-                    color: theme.palette.brightPurple.main,
-                    textDecorationColor: theme.palette.brightPurple.main
-                }}>Дополнительно</Link>
-                <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
-                <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={""} />
-                <Typography sx={{
-                    mt: "20px",
-                    fontSize: "16px",
-                    lineHeight: "19px",
-                    maxWidth: "80%",
-                    color: theme.palette.grey3.main,
-                }}>
-                    Текст-заполнитель —
-                    это текст, который имеет Текст-заполнитель —
-                    это текст, который имеет Текст-заполнитель —
-                    это текст, который имеет Текст-заполнитель —
-                    это текст, который имеет Текст-заполнитель
-                </Typography>
+            <Box>
+                <Button variant="outlined">Отключить стартовую страницу</Button>
+                <Button variant="contained">Настроить вопросы</Button>
             </Box>
-        </Box>
+        </>
+
     );
 }
 
diff --git a/src/pages/startPage/steptwo.tsx b/src/pages/startPage/steptwo.tsx
index 0bb2da06..ecb4c6d4 100755
--- a/src/pages/startPage/steptwo.tsx
+++ b/src/pages/startPage/steptwo.tsx
@@ -26,24 +26,27 @@ export default function Steptwo ({handleNext}:HandleNext) {
             }}>
                 <Button variant='text'
                         onClick={() => {
+                            updateQuizesList(params, {startpage: "standard"})
                             handleNext()
                         }}
                 >
-                    <CardWithImage image={cardImage1} text="Standart" />
+                    <CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
                 </Button>
                 <Button variant='text'
                             onClick={() => {
+                                updateQuizesList(params, {startpage: "expanded"})
                                 handleNext()
                             }}
                 >
-                    <CardWithImage image={cardImage2} text="Expanded" />
+                    <CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
                 </Button>
                 <Button variant='text'
                             onClick={() => {
+                                updateQuizesList(params, {startpage: "centered"})
                                 handleNext()
                             }}
                 >
-                    <CardWithImage image={cardImage3} text="Centered" />
+                    <CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
                 </Button>
             </Box>
         </Box>
diff --git a/src/stores/quizes.ts b/src/stores/quizes.ts
index dfd2c8bb..68962131 100644
--- a/src/stores/quizes.ts
+++ b/src/stores/quizes.ts
@@ -35,41 +35,15 @@ interface Quizes {
     average_time: number,
     super: true,
     group_id: number,
-    step: number
+    step: number,
+    startpage: string,
+    config1?: any
 }
 
 export const quizStore = create<QuizStore>()(
     persist(
         (set, get) => ({
             listQuizes: {
-                //     1: {
-                //     "id": 0,
-                //     "qid": "string",
-                //     "deleted": false,
-                //     "archived": true,
-                //     "fingerprinting": true,
-                //     "repeatable": true,
-                //     "note_prevented": true,
-                //     "mail_notifications": true,
-                //     "unique_answers": true,
-                //     "name": "string",
-                //     "description": "string",
-                //     "config": "string",
-                //     "status": "string",
-                //     "limit": 0,
-                //     "due_to": 0,
-                //     "time_of_passing": 0,
-                //     "pausable": true,
-                //     "version": 0,
-                //     "version_comment": "string",
-                //     "created_at": "string",
-                //     "updated_at": "string",
-                //     "question_cnt": 0,
-                //     "passed_count": 0,
-                //     "average_time": 0,
-                //     "super": true,
-                //     "group_id": 0
-                // }
             },
             updateQuizesList: (id: number, values: any) => {
                 const state = get()["listQuizes"] || {};
@@ -120,7 +94,35 @@ export const quizStore = create<QuizStore>()(
                     "average_time": 0,
                     "super": true,
                     "group_id": 0,
-                    "step": 1
+                    "step": 1,
+                    "startpage": "",
+                    "config1": {
+                        "type": "", // quiz или form
+                        "favicon": [
+                            {"attrs": "320*650apple","link":"hub.pena.digital/fav/squiz1.jpg"}
+                        ],
+                        "logo": "hub.pena.digital/img/logo",
+                        "startpage": {
+                            "description": "",// приветственный текст опроса
+                            "button": "Начать", // текст на кнопке начала опроса
+                            "position": "ltr", // ltr или rtl. отображение элементов поверх фона
+                            "background": {
+                                "type": "image", //image или video
+                                "desctop": "hub.pena.digital/img/back/full.png",
+                                "mobile": "hub.pena.digital/img/back/mobile.png",
+                                "video":"hub.pena.digital/vid/back/vi1.mp4",
+                                "cycle": true //зацикливать видео или нет
+                            },
+                        },
+                        "info": {
+                            "phonenumber": "+79885895677",
+                            "clickable": true,
+                            "orgname": "ООО \"Пена\"",
+                            "site": "hub.pena.digital",
+                            "law": "юридическая информация"
+                        },
+                        "meta": "что-то"
+                    }
                 };
                 set({listQuizes: newListQuizes});
                 return id;