SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'newvis' into 'main'

Browse Source 
Newvis

See merge request frontend/squiz!35
This commit is contained in:
Nastya 2023-10-23 11:23:20 +00:00
commit 9fd2f83fd3
26 changed files with 921 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -19,6 +19,7 @@
"@types/react-dnd": "^3.0.2", "@types/react-dnd": "^3.0.2",
"@types/react-dom": "^18.0.0", "@types/react-dom": "^18.0.0",
"axios": "^1.5.1", "axios": "^1.5.1",
"cytoscape": "^3.26.0",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"emoji-mart": "^5.5.2", "emoji-mart": "^5.5.2",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
@ -28,6 +29,7 @@
"notistack": "^3.0.1", "notistack": "^3.0.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",
"react-cytoscapejs": "^2.0.0",
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1", "react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
@ -81,6 +83,7 @@
"@emoji-mart/data": "^1.1.2", "@emoji-mart/data": "^1.1.2",
"@emoji-mart/react": "^1.1.1", "@emoji-mart/react": "^1.1.1",
"@types/react-beautiful-dnd": "^13.1.4", "@types/react-beautiful-dnd": "^13.1.4",
"@types/react-cytoscapejs": "^1.2.4",
"craco-alias": "^3.0.1" "craco-alias": "^3.0.1"
} }
} }

4
src/api/contactForm.ts
View File

@ -1,13 +1,13 @@
import axios from "axios"; import axios from "axios";
const domen = window.location.hostname === "localhost" ? "squiz.pena.digital" : window.location.hostname
export function sendContactFormRequest(body: { export function sendContactFormRequest(body: {
contact: string; contact: string;
whoami: string; whoami: string;
}) { }) {
return axios("https://squiz.pena.digital/feedback/callme", { return axios(`https://${domen}/feedback/callme`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",

63
src/assets/icons/QuestionsMapIcon.tsx Normal file
View File

@ -0,0 +1,63 @@
import { Box } from "@mui/material";
interface Props {
color: string;
}
export default function QuestionsMapIcon({ color = "#7E2AEA" }: Props) {
return (
<Box
sx={{
width: "24px",
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="21"
height="18"
viewBox="0 0 21 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.90039 6.375H2.15039C1.73618 6.375 1.40039 6.71079 1.40039 7.125V10.875C1.40039 11.2892 1.73618 11.625 2.15039 11.625H5.90039C6.3146 11.625 6.65039 11.2892 6.65039 10.875V7.125C6.65039 6.71079 6.3146 6.375 5.90039 6.375Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.4004 0.75H14.9004C14.4862 0.75 14.1504 1.08579 14.1504 1.5V6C14.1504 6.41421 14.4862 6.75 14.9004 6.75H19.4004C19.8146 6.75 20.1504 6.41421 20.1504 6V1.5C20.1504 1.08579 19.8146 0.75 19.4004 0.75Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.4004 11.25H14.9004C14.4862 11.25 14.1504 11.5858 14.1504 12V16.5C14.1504 16.9142 14.4862 17.25 14.9004 17.25H19.4004C19.8146 17.25 20.1504 16.9142 20.1504 16.5V12C20.1504 11.5858 19.8146 11.25 19.4004 11.25Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.65039 9H10.4004"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.1504 14.25H12.6504C12.3546 14.2513 12.0615 14.1939 11.7879 14.0813C11.5144 13.9686 11.2658 13.803 11.0567 13.5938C10.8475 13.3846 10.6818 13.1361 10.5692 12.8625C10.4565 12.589 10.3992 12.2958 10.4004 12V6.00002C10.3992 5.7042 10.4565 5.41106 10.5692 5.13752C10.6818 4.86397 10.8475 4.61544 11.0567 4.40626C11.2658 4.19708 11.5144 4.0314 11.7879 3.91876C12.0615 3.80613 12.3546 3.74878 12.6504 3.75002H14.1504"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

4
src/pages/Landing/BusinessPluses.tsx
View File

@ -33,13 +33,13 @@ export default function Component () {
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'section'} bg={'#7e2aea'} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#7e2aea'} mwidth={'1160px'}
sxsect={{minHeight: '394px'}} sxsect={{}}
sxcont={{display: 'flex', sxcont={{display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-around', justifyContent: 'space-around',
height: '100%', height: '100%',
color:'#ffffff', color:'#ffffff',
padding: isMobile ? '60px 16px 32px 16px' : (isTablet ? "55px 40px 63px 40px" : '55px 14px 63px 10px'), padding: isMobile ? '60px 16px 32px 16px' : (isTablet ? "55px 40px 63px 40px" : '70px 0 65px 0'),
}} }}
> >
<BoxText> <BoxText>

50
src/pages/Landing/Collaboration.tsx Normal file
View File

@ -0,0 +1,50 @@
import {useMediaQuery, useTheme, Box, Typography} from "@mui/material";
import SectionStyled from './SectionStyled';
import SmiLogo from "./images/icons/SmiIcon";
import PenaLogoOnly from "./images/icons/PenaLogoOnly";
export default function Collaboration() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return (
<SectionStyled tag={'section'} bg={'#262835'} mwidth={'1160px'}
sxsect={{
height: isMobile ? '598px' : '369px',
}}
sxcont={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
padding: isMobile ? "30px 16px 0 16px" : (isTablet ? "0px 40px 0 40px" : 0),
marginBottom: isMobile ? '55px' : 0,
flexDirection: "column",
gap: "25px"
}}>
<Box sx={{display: "flex", gap: isMobile ? "15px" : "30px", flexDirection: isMobile ? "column" : "row"}}>
<Typography variant='h6' fontSize='36px' color="white" lineHeight={"normal"}>Совместный проект</Typography>
<Box sx={{display: "flex", gap: isMobile ? "16px" : "25px"}}>
<SmiLogo width={isMobile ? 151 : 240}/>
<Typography variant='h6' fontSize='36px' color="white">и</Typography>
<PenaLogoOnly width={isMobile ? 90 : 138}/>
</Box>
</Box>
<Box sx={{maxWidth: "712px"}}>
<Typography sx={{
fontSize: "18px",
fontStyle: "normal",
fontWeight: 400,
color: "white"
}} >
Цель двух наших сервисов предоставлять самые качественные сервисы,
для людей которые думают о завтрашнем дне и стремятся к тому, что бы их бизнес рос и развивался.
Поэтому мы решили объединить свои усилия и теперь каждый дорогой нашему сердцу читатель
может после запуска сервиса получить не только 14 дней <span style={{color: "#BB86FE"}} >бесплатно</span> ,
но и промокод со <span style={{color: "#BB86FE"}}>скидкой в 20%</span> на любой тариф сервиса PENA QUIZ
</Typography>
</Box>
</SectionStyled>
)
}

8
src/pages/Landing/Counter.tsx
View File

@ -9,15 +9,17 @@ export default function Counter() {
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<Box <Box
component={"section"}
sx={{ sx={{
width: '100%', width: '100%',
fontFamily: 'Rubik', fontFamily: 'Rubik',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'flex-start',
height: 0, height: isMobile ? "606px" : isTablet ? "430px" : "208px",
boxSizing: "border-box", boxSizing: "border-box",
padding: isTablet ? "0 40px" : undefined, padding: isTablet ? "0 40px" : undefined,
backgroundColor: "#333647"
}} }}
> >
<Box <Box
@ -34,7 +36,7 @@ export default function Counter() {
boxSizing: "border-box", boxSizing: "border-box",
padding: isMobile ? '42px 60px 30px 35px' : isTablet ? '37px 99px 0px 100px' : '30px 60px 30px 20px', padding: isMobile ? '42px 60px 30px 35px' : isTablet ? '37px 99px 0px 100px' : '30px 60px 30px 20px',
width: '100%', width: '100%',
marginTop: isMobile ? "483px" : isTablet ? "258px" : "106px", marginTop: isMobile ? "-50px" : isTablet ? "45px" : "-41px",
rowGap: isMobile ? undefined : (isTablet ? '51px' : undefined), rowGap: isMobile ? undefined : (isTablet ? '51px' : undefined),
}} }}
> >

2
src/pages/Landing/FooterLanding.tsx
View File

@ -72,7 +72,7 @@ export default function Component() {
'button':{color: '#F2F3F7', textTransform: 'none'}, 'button':{color: '#F2F3F7', textTransform: 'none'},
}} }}
> >
<Button variant="text" sx={{fontSize: "16px", fontWeight: 500}}> <Button variant="text" sx={{fontSize: "16px", fontWeight: 500, color: "white"}} href={"https://docs.pena.digital/docs"}>
Пользовательское соглашение Пользовательское соглашение
</Button> </Button>
</Box> </Box>

48
src/pages/Landing/HeaderLanding.tsx
View File

@ -25,33 +25,33 @@ export default function Component() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: '0 10px' padding: 0
}}> }}>
<QuizLogo width={isMobile ? 100 : 150} /> <QuizLogo width={isMobile ? 100 : 150} />
<Box {/*<Box*/}
sx={{ {/* sx={{*/}
maxWidth: '595px', {/* maxWidth: '595px',*/}
width: '100%', {/* width: '100%',*/}
display: 'flex', {/* display: 'flex',*/}
justifyContent: 'space-between', {/* justifyContent: 'space-between',*/}
flexWrap: 'wrap', {/* flexWrap: 'wrap',*/}
marginRight: "138px", {/* marginRight: "138px",*/}
}} {/* }}*/}
> {/*>*/}
{buttonMenu.map( (element, index) => ( {/* {buttonMenu.map( (element, index) => (*/}
<NavMenuItem {/* <NavMenuItem*/}
text={element} {/* text={element}*/}
// component={Link} {/* // component={Link}*/}
// to={url} {/* // to={url}*/}
key={index} {/* key={index}*/}
onClick={() => { {/* onClick={() => {*/}
setSelect(index); {/* setSelect(index);*/}
}} {/* }}*/}
isActive={select === index} {/* isActive={select === index}*/}
/> {/* />*/}
))} {/* ))}*/}
</Box> {/*</Box>*/}
<Button variant="outlined" <Button variant="outlined"
onClick={() => setIsContactFormOpen(true)} onClick={() => setIsContactFormOpen(true)}
sx={{ sx={{

10
src/pages/Landing/Hero.tsx
View File

@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
// import logotip from "./image/black_logo_PenaHab.svg";
import {Typography, useMediaQuery, useTheme} from "@mui/material"; import {Typography, useMediaQuery, useTheme} from "@mui/material";
import abstraction from '../../assets/Quiz-main.png' import abstraction from '../../assets/Quiz-main.png'
import SectionStyled from './SectionStyled'; import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import { Link, redirect } from 'react-router-dom'; import { Link, redirect } from 'react-router-dom';
import {setIsContactFormOpen} from "@root/contactForm";
export default function Component() { export default function Component() {
const theme = useTheme(); const theme = useTheme();
@ -47,13 +46,16 @@ export default function Component() {
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
</Typography> </Typography>
</Box> </Box>
<Link to="/list" style={{textDecoration: "none"}}> {/*<Link */}
{/* to="/list"*/}
{/* style={{textDecoration: "none"}}>*/}
<Button variant="contained" <Button variant="contained"
onClick={() => setIsContactFormOpen(true)}
> >
Попробуйте бесплатно Попробуйте бесплатно
</Button> </Button>
</Link> {/*</Link>*/}
<Box <Box
component={"img"} component={"img"}

22
src/pages/Landing/HowItWorks.tsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} from "@mui/material"; import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled'; import SectionStyled from './SectionStyled';
import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
import OneIconBorder from "@icons/OneIconBorder"; import OneIconBorder from "@icons/OneIconBorder";
import TwoIcon from "./images/icons/IconNumber2"; import TwoIcon from "./images/icons/IconNumber2";
import ThreeIcon from "./images/icons/IconNumber3"; import ThreeIcon from "./images/icons/IconNumber3";
@ -38,9 +37,9 @@ export default function HowItWorks () {
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2226px', marginBottom: isMobile? 0 : "-47px"}} mwidth={'1160px'}
sxcont={{ sxcont={{
padding: isMobile ? '603px 16px 0 16px' : (isTablet ? '383px 40px 0 40px':'232px 10px 0 10px'), padding: isMobile ? '65px 16px 0 16px' : (isTablet ? '80px 40px':'75px 0 0 0'),
boxSizing: 'border-box' boxSizing: 'border-box'
}} }}
> >
@ -60,21 +59,6 @@ export default function HowItWorks () {
<Typography variant='h6' fontSize='36px' >Как это работает</Typography> <Typography variant='h6' fontSize='36px' >Как это работает</Typography>
<Typography fontSize='18px'>Квиз как диалог</Typography> <Typography fontSize='18px'>Квиз как диалог</Typography>
</Box> </Box>
<Box
sx={{
display: "flex",
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
gap: "17px",
flexDirection: isMobile ? "row-reverse" : undefined,
}}
>
<Box width='140px'>
<Typography fontSize='18px'>Видео о квизах 2 мин</Typography>
</Box>
<YoutobeIcon width={isMobile ? "73px" : "120px"} />
</Box>
</Box> </Box>
<Box <Box
sx={{ sx={{
@ -582,7 +566,7 @@ export default function HowItWorks () {
marginTop: isMobile ? "20px" : 0 marginTop: isMobile ? "20px" : 0
}} }}
> >
<Typography variant='h6' fontSize='20px'>что можно делать на последнем шаге</Typography> <Typography variant='h6' fontSize='20px'>Максимальная конверсия</Typography>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',

3
src/pages/Landing/HowToUse.tsx
View File

@ -132,7 +132,7 @@ export default function Component () {
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
height: '100%', height: '100%',
padding: isMobile ? "16px 16px 70px 16px" : isTablet ? '16px 40px 50px 40px' : '16px 10px 50px 10px', padding: isMobile ? "70px 16px 70px 16px" : isTablet ? '16px 40px 50px 40px' : '81px 0 50px 0',
}} }}
> >
{/*<Box*/} {/*<Box*/}
@ -231,7 +231,6 @@ export default function Component () {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "16px", gap: "16px",
marginTop: "52px",
maxWidth: isMobile ? "273px" : undefined maxWidth: isMobile ? "273px" : undefined
}} }}
> >

4
src/pages/Landing/Landing.tsx
View File

@ -13,6 +13,7 @@ import WhatTheySay from './WhatTheySay';
import StartWithTemplates from './StartWithTemplates'; import StartWithTemplates from './StartWithTemplates';
import WhatTheFeatures from './WhatTheFeatures'; import WhatTheFeatures from './WhatTheFeatures';
import FullScreenDialog from "./headerMobileLanding"; import FullScreenDialog from "./headerMobileLanding";
import Collaboration from "./Collaboration";
export default function Landing() { export default function Landing() {
const theme = useTheme(); const theme = useTheme();
@ -23,6 +24,7 @@ export default function Landing() {
{isTablet ? <FullScreenDialog/> : <Header/> } {isTablet ? <FullScreenDialog/> : <Header/> }
<Hero/> <Hero/>
<Counter/> <Counter/>
<Collaboration/>
<HowItWorks/> <HowItWorks/>
<BusinessPluses/> <BusinessPluses/>
<HowToUse/> <HowToUse/>
@ -30,7 +32,7 @@ export default function Landing() {
{/*<StartWithTemplates/>*/} {/*<StartWithTemplates/>*/}
<WhatTheFeatures/> <WhatTheFeatures/>
{/*<Blog/>*/} {/*<Blog/>*/}
<Questions/> {/*<Questions/>*/}
<Footer /> <Footer />
</> </>

54
src/pages/Landing/WhatTheFeatures.tsx
View File

@ -11,14 +11,8 @@ import Desktop4 from './images/Frame 1171274552-3.png';
import Desktop5 from './images/Frame 1171274552-4.png'; import Desktop5 from './images/Frame 1171274552-4.png';
import Desktop6 from './images/Frame 1171274552-5.png'; import Desktop6 from './images/Frame 1171274552-5.png';
import Desktop7 from './images/Frame 1171274552-6.png'; import Desktop7 from './images/Frame 1171274552-6.png';
import {styled} from "@mui/material/styles";
//
// const BoxCard = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('xl')]: {
// alignItems: 'center',
// width: '100%',
// },
// }));
interface Props { interface Props {
children: React.ReactNode; children: React.ReactNode;
image: string; image: string;
@ -256,7 +250,7 @@ export default function Component () {
<Box> <Box>
<Box <Box
sx={{ sx={{
display: open ? 'flex' : "none", display: 'flex',
flexDirection: 'column', flexDirection: 'column',
paddingTop: isMobile ? "25px" : "106px", paddingTop: isMobile ? "25px" : "106px",
gap: isMobile ? "25px" : "113px", gap: isMobile ? "25px" : "113px",
@ -363,7 +357,7 @@ export default function Component () {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
padding: isMobile ? "40px 0 0 0" : '217px 22px 0 20px', padding: isMobile ? "40px 0 0 0" : isTablet ? "70px 22px 0 20px" : "217px 22px 0 20px",
}} }}
> >
<Box <Box
@ -396,28 +390,28 @@ export default function Component () {
больше вы не останетесь 1 на 1 со своими проблемами. больше вы не останетесь 1 на 1 со своими проблемами.
</Typography> </Typography>
</Box> </Box>
<Button variant="outlined" {/*<Button variant="outlined"*/}
onClick={() => setOpen((isOpened) => !isOpened)} {/* onClick={() => setOpen((isOpened) => !isOpened)}*/}
sx={{ {/* sx={{*/}
textTransform: 'none', {/* textTransform: 'none',*/}
color: '#ffffff', {/* color: '#ffffff',*/}
backgroundColor: 'transparent', {/* backgroundColor: 'transparent',*/}
fontSize: '18px', {/* fontSize: '18px',*/}
borderRadius: '8px', {/* borderRadius: '8px',*/}
borderColor: '#ffffff', {/* borderColor: '#ffffff',*/}
}} {/* }}*/}
>Все возможности сервиса</Button> {/*>Все возможности сервиса</Button>*/}
</Box> </Box>
<Button variant="contained" {/*<Button variant="contained"*/}
sx={{ {/* sx={{*/}
textTransform: 'none', {/* textTransform: 'none',*/}
fontSize: '18px', {/* fontSize: '18px',*/}
borderRadius: '8px', {/* borderRadius: '8px',*/}
padding: '10px 32px', {/* padding: '10px 32px',*/}
marginTop: '27px', {/* marginTop: '27px',*/}
}}> {/* }}>*/}
Создать квиз</Button> {/* Создать квиз</Button>*/}
</Box> </Box>
</Box> </Box>
</SectionStyled> </SectionStyled>

102
src/pages/Landing/headerMobileLanding.tsx
View File

@ -26,16 +26,16 @@ import Logotip from "./images/icons/QuizLogo";
// import logotipBlack from "../Icons/Logo/black_logo_PenaHab.svg"; // import logotipBlack from "../Icons/Logo/black_logo_PenaHab.svg";
// import logotipBlackMobile from "../Icons/Logo/black_logo_PenaHab_mobile.svg"; // import logotipBlackMobile from "../Icons/Logo/black_logo_PenaHab_mobile.svg";
const buttonMenu: { path: string; title: string }[] = [ // const buttonMenu: { path: string; title: string }[] = [
{ path: "/", title: "Меню 1" }, // { path: "/", title: "Меню 1" },
{ path: "/", title: "Меню 2" }, // { path: "/", title: "Меню 2" },
{ path: "/", title: "Меню 3" }, // { path: "/", title: "Меню 3" },
{ path: "/", title: "Меню 4" }, // { path: "/", title: "Меню 4" },
{ path: "/", title: "Меню 5" }, // { path: "/", title: "Меню 5" },
{ path: "/", title: "Меню 6" }, // { path: "/", title: "Меню 6" },
{ path: "/", title: "Меню 7" }, // { path: "/", title: "Меню 7" },
{ path: "/", title: "Меню 8" }, // { path: "/", title: "Меню 8" },
]; // ];
interface Props { interface Props {
theme?: "dark" | "light"; theme?: "dark" | "light";
@ -165,47 +165,47 @@ export default function FullScreenDialog({
p: "0", p: "0",
}} }}
> >
<ListItem {/*<ListItem*/}
sx={{ {/* sx={{*/}
pl: "40px", {/* pl: "40px",*/}
flexDirection: "column", {/* flexDirection: "column",*/}
alignItems: isMobile ? "stretch" : "end", {/* alignItems: isMobile ? "stretch" : "end",*/}
}} {/* }}*/}
> {/*>*/}
{buttonMenu.map(({ path, title }) => ( {/* {buttonMenu.map(({ path, title }) => (*/}
<Link {/* <Link*/}
key={path} {/* key={path}*/}
to={path} {/* to={path}*/}
style={{ {/* style={{*/}
textDecoration: "none", {/* textDecoration: "none",*/}
height: "20px", {/* height: "20px",*/}
marginBottom: "25px", {/* marginBottom: "25px",*/}
}} {/* }}*/}
> {/* >*/}
<Button {/* <Button*/}
disableRipple {/* disableRipple*/}
variant="text" {/* variant="text"*/}
sx={{ {/* sx={{*/}
color: {/* color:*/}
location.pathname === path {/* location.pathname === path*/}
? "#7E2AEA" {/* ? "#7E2AEA"*/}
: theme === "dark" {/* : theme === "dark"*/}
? "white" {/* ? "white"*/}
: "black", {/* : "black",*/}
height: "20px", {/* height: "20px",*/}
textTransform: "none", {/* textTransform: "none",*/}
fontSize: "16px", {/* fontSize: "16px",*/}
"&:hover": { {/* "&:hover": {*/}
background: "none", {/* background: "none",*/}
color: "#7E2AEA", {/* color: "#7E2AEA",*/}
}, {/* },*/}
}} {/* }}*/}
> {/* >*/}
{title} {/* {title}*/}
</Button> {/* </Button>*/}
</Link> {/* </Link>*/}
))} {/* ))}*/}
</ListItem> {/*</ListItem>*/}
{isMobile ? ( {isMobile ? (
<Button <Button
// onClick={() => setIsContactFormOpen(true)} // onClick={() => setIsContactFormOpen(true)}

23
src/pages/Landing/images/icons/PenaLogoOnly.tsx Normal file
View File

@ -0,0 +1,23 @@
import { useTheme } from "@mui/material";
interface Props {
width: number;
}
export default function PenaLogoOnly({ width }: Props) {
const theme = useTheme();
return (
<svg style={{ minWidth: width }} width={width} height="54" viewBox="0 0 138 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9217 2.58184C14.2944 1.92292 10.4121 8.03332 6.80104 12.4503C3.63194 16.3265 1.27229 20.7048 0.998207 25.7281C0.706608 31.0725 1.66565 36.6383 5.26744 40.558C8.97746 44.5955 14.535 47.1465 19.9217 46.3217C24.8612 45.5654 27.0469 40.0821 30.7244 36.6603C34.7175 32.9447 42.1568 31.2166 42.0536 25.7281C41.9503 20.2313 34.0988 19.1553 30.321 15.2043C26.4078 11.1118 25.5118 3.2364 19.9217 2.58184Z" fill="#7E2AEA"/>
<ellipse cx="33.9215" cy="44.2308" rx="3.10509" ry="3.13884" fill="#7E2AEA"/>
<ellipse cx="30.8196" cy="9.4073" rx="1.18289" ry="1.19575" fill="#7E2AEA"/>
<path d="M49.74 24.4426C49.3951 21.053 47.8175 17.9135 45.3131 15.6327C42.8086 13.3519 39.5557 12.0923 36.1848 12.098C35.7062 12.0982 35.228 12.1235 34.752 12.1738C31.4003 12.5296 28.2976 14.1273 26.0424 16.6589C23.7872 19.1904 22.5392 22.4764 22.5391 25.8832V25.8832V45.5764H28.3835V37.2068C30.6686 38.8138 33.3865 39.673 36.1702 39.6684C36.6488 39.6682 37.1271 39.6429 37.6031 39.5926C39.3841 39.4034 41.1109 38.8614 42.6847 37.9976C44.2586 37.1338 45.6487 35.965 46.7757 34.5581C47.9027 33.1512 48.7446 31.5337 49.2532 29.7979C49.7618 28.0621 49.9272 26.2421 49.74 24.4417V24.4426ZM42.2338 30.8429C41.5918 31.6491 40.7979 32.3185 39.8982 32.8124C38.9985 33.3062 38.0108 33.6148 36.9923 33.7201C36.7192 33.7488 36.4448 33.7632 36.1702 33.7634C34.4027 33.7618 32.6883 33.1528 31.3083 32.0363C29.9283 30.9199 28.9648 29.3624 28.5758 27.6195C28.1869 25.8766 28.3957 24.0518 29.1679 22.4446C29.9401 20.8374 31.2299 19.5434 32.8255 18.7748C34.4212 18.0063 36.2279 17.809 37.9491 18.2152C39.6703 18.6214 41.2038 19.6071 42.2978 21.0104C43.3918 22.4137 43.9814 24.1513 43.9698 25.938C43.9581 27.7247 43.346 29.4543 42.2338 30.8429Z" fill="white"/>
<path d="M64.9893 12.098C64.5107 12.0982 64.0324 12.1235 63.5564 12.1738C60.0835 12.5435 56.8833 14.2459 54.6153 16.9301C52.3473 19.6143 51.1843 23.0758 51.3662 26.601C51.548 30.1263 53.0608 33.4467 55.5926 35.8779C58.1245 38.3091 61.4826 39.6658 64.9746 39.6684C65.4532 39.6682 65.9315 39.6429 66.4075 39.5926C68.9115 39.3231 71.2933 38.3602 73.2906 36.81C75.2879 35.2597 76.8231 33.1823 77.7272 30.8065H71.0655L71.0382 30.8409C70.1849 31.9071 69.0711 32.7296 67.8068 33.2271C66.5426 33.7246 65.1717 33.8798 63.8299 33.6774C62.4881 33.475 61.2218 32.922 60.1563 32.073C59.0908 31.2241 58.263 30.1087 57.7548 28.8371H78.3077C78.7405 26.8244 78.7222 24.7394 78.2544 22.7347C77.7866 20.73 76.881 18.8566 75.604 17.2516C74.327 15.6466 72.711 14.3508 70.8743 13.459C69.0376 12.5673 67.0268 12.1022 64.9893 12.098V12.098ZM57.7548 22.9292C58.2869 21.6054 59.1643 20.4524 60.2935 19.593C61.4228 18.7336 62.7615 18.2 64.1671 18.0492C64.4403 18.0206 64.7147 18.0061 64.9893 18.0059C66.5416 18.0033 68.0591 18.4709 69.346 19.3485C70.6329 20.226 71.6301 21.4732 72.2091 22.9292H57.7548Z" fill="white"/>
<path d="M92.7423 12.098C90.5085 12.0944 88.3173 12.7153 86.4108 13.892V12.098H80.5664V39.6684H86.4108V24.4062C86.4108 22.7087 87.0779 21.0808 88.2653 19.8805C89.4527 18.6802 91.0631 18.0059 92.7423 18.0059C94.4215 18.0059 96.0319 18.6802 97.2193 19.8805C98.4067 21.0808 99.0737 22.7087 99.0737 24.4062V39.6684H104.918V24.4062C104.918 21.1419 103.635 18.0112 101.352 15.703C99.0685 13.3947 95.9715 12.098 92.7423 12.098Z" fill="white"/>
<path d="M134.144 27.6448V12.098H128.299V14.5596C126.015 12.9519 123.296 12.0926 120.513 12.098C120.034 12.0982 119.556 12.1235 119.08 12.1738C115.607 12.5435 112.407 14.2459 110.139 16.9301C107.871 19.6143 106.708 23.0758 106.89 26.601C107.071 30.1263 108.584 33.4467 111.116 35.8779C113.648 38.3091 117.006 39.6658 120.498 39.6684C120.977 39.6682 121.455 39.6429 121.931 39.5926C125.328 39.2412 128.468 37.6054 130.722 35.013C132.474 37.3818 135.01 39.0343 137.868 39.6684V33.4749C136.759 32.9672 135.818 32.1474 135.157 31.1135C134.497 30.0796 134.145 28.8754 134.144 27.6448ZM126.562 30.841C125.92 31.647 125.126 32.3163 124.226 32.8101C123.326 33.304 122.339 33.6126 121.32 33.7181C121.047 33.7468 120.773 33.7613 120.498 33.7615C118.501 33.7614 116.581 32.9865 115.133 31.5966C113.685 30.2068 112.82 28.3081 112.716 26.2924C112.613 24.2766 113.279 22.2977 114.577 20.7638C115.875 19.2299 117.706 18.2583 119.692 18.0493C119.964 18.0206 120.238 18.0061 120.513 18.0059C121.984 18.0072 123.425 18.4295 124.669 19.2239C125.912 20.0184 126.908 21.1525 127.541 22.4952C128.174 23.8379 128.418 25.3342 128.244 26.8112C128.071 28.2881 127.488 29.6852 126.562 30.841Z" fill="white"/>
</svg>
);
}

22
src/pages/Landing/images/icons/SmiIcon.tsx Normal file
View File

File diff suppressed because one or more lines are too long

17
src/pages/Landing/images/icons/logo_PenaHab.svg
View File

@ -1,17 +0,0 @@
<svg width="149" height="58" viewBox="0 0 149 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3258_71703)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5091 2.75764C15.4332 2.05385 11.2415 8.58037 7.34253 13.2981C3.92083 17.4383 1.37308 22.1148 1.07715 27.4802C0.762314 33.1885 1.79779 39.1334 5.68668 43.32C9.69244 47.6324 15.6929 50.3572 21.5091 49.4762C26.8423 48.6684 29.2022 42.8117 33.1728 39.1568C37.4842 35.1882 45.5165 33.3425 45.4051 27.4802C45.2935 21.609 36.8162 20.4598 32.7372 16.2397C28.5122 11.8685 27.5447 3.45678 21.5091 2.75764Z" fill="#7E2AEA"/>
<circle cx="36.626" cy="47.2429" r="3.3526" fill="#7E2AEA"/>
<circle cx="33.2733" cy="10.0479" r="1.27718" fill="#7E2AEA"/>
<path d="M53.705 26.1072C53.3326 22.4867 51.6293 19.1334 48.9253 16.6973C46.2212 14.2612 42.709 12.9158 39.0694 12.9218C38.5526 12.9221 38.0363 12.9491 37.5223 13.0028C33.9035 13.3828 30.5535 15.0893 28.1185 17.7933C25.6835 20.4973 24.3361 24.0071 24.3359 27.6458V27.6458V48.6801H30.6462V39.7405C33.1134 41.457 36.0481 42.3747 39.0536 42.3698C39.5704 42.3696 40.0867 42.3426 40.6007 42.2888C42.5237 42.0867 44.3881 41.5078 46.0874 40.5852C47.7867 39.6626 49.2876 38.4142 50.5045 36.9115C51.7213 35.4088 52.6303 33.6811 53.1794 31.8271C53.7286 29.9731 53.9072 28.0291 53.705 26.1061V26.1072ZM45.6005 32.9433C44.9074 33.8044 44.0502 34.5194 43.0788 35.0469C42.1074 35.5744 41.0409 35.9039 39.9413 36.0164C39.6464 36.047 39.3501 36.0625 39.0536 36.0627C37.1452 36.0609 35.2941 35.4104 33.8041 34.218C32.3142 33.0256 31.2738 31.362 30.8539 29.5004C30.434 27.6388 30.6594 25.6897 31.4931 23.9731C32.3269 22.2564 33.7195 20.8743 35.4423 20.0534C37.1652 19.2325 39.1159 19.0217 40.9743 19.4556C42.8327 19.8895 44.4884 20.9423 45.6696 22.4412C46.8509 23.9401 47.4875 25.796 47.4749 27.7044C47.4623 29.6127 46.8014 31.4601 45.6005 32.9433Z" fill="#151515"/>
<path d="M70.1665 12.9218C69.6497 12.922 69.1333 12.9491 68.6194 13.0028C64.8697 13.3977 61.4144 15.216 58.9656 18.083C56.5168 20.95 55.2612 24.6472 55.4575 28.4125C55.6538 32.1779 57.2872 35.7244 60.0209 38.3212C62.7545 40.9179 66.3803 42.367 70.1507 42.3698C70.6674 42.3696 71.1838 42.3426 71.6978 42.2888C74.4013 42.001 76.973 40.9725 79.1295 39.3167C81.286 37.6609 82.9436 35.442 83.9197 32.9044H76.7271L76.6976 32.9412C75.7763 34.08 74.5737 34.9585 73.2086 35.4899C71.8436 36.0212 70.3635 36.187 68.9147 35.9708C67.4659 35.7546 66.0987 35.1639 64.9483 34.2572C63.7979 33.3505 62.9041 32.1591 62.3554 30.8009H84.5466C85.0138 28.6512 84.9941 26.4241 84.489 24.2829C83.9839 22.1417 83.0061 20.1407 81.6273 18.4264C80.2485 16.7121 78.5037 15.328 76.5206 14.3756C74.5375 13.4231 72.3664 12.9264 70.1665 12.9218V12.9218ZM62.3554 24.4907C62.9298 23.0767 63.8772 21.8452 65.0964 20.9272C66.3157 20.0093 67.7612 19.4394 69.2788 19.2784C69.5737 19.2477 69.87 19.2323 70.1665 19.2321C71.8425 19.2293 73.481 19.7288 74.8705 20.6661C76.2599 21.6034 77.3367 22.9355 77.9618 24.4907H62.3554Z" fill="#151515"/>
<path d="M100.135 12.9218C97.7229 12.918 95.357 13.5812 93.2986 14.8381V12.9218H86.9883V42.3698H93.2986V26.0683C93.2986 24.2552 94.0188 22.5164 95.3008 21.2344C96.5829 19.9523 98.3216 19.2321 100.135 19.2321C101.948 19.2321 103.687 19.9523 104.969 21.2344C106.251 22.5164 106.971 24.2552 106.971 26.0683V42.3698H113.281V26.0683C113.281 22.5816 111.896 19.2378 109.431 16.7723C106.965 14.3069 103.621 12.9218 100.135 12.9218Z" fill="#151515"/>
<path d="M144.833 29.5273V12.9218H138.523V15.5511C136.056 13.834 133.121 12.9161 130.116 12.9218C129.599 12.9221 129.083 12.9491 128.569 13.0028C124.819 13.3977 121.364 15.2161 118.915 18.083C116.466 20.95 115.21 24.6472 115.407 28.4126C115.603 32.1779 117.236 35.7244 119.97 38.3212C122.704 40.918 126.329 42.3671 130.1 42.3698C130.617 42.3696 131.133 42.3426 131.647 42.2888C135.314 41.9135 138.705 40.1663 141.139 37.3973C143.03 39.9275 145.769 41.6925 148.854 42.3698V35.7545C147.657 35.2122 146.641 34.3366 145.928 33.2323C145.215 32.128 144.835 30.8418 144.833 29.5273ZM136.647 32.9412C135.954 33.8021 135.096 34.517 134.125 35.0445C133.154 35.572 132.087 35.9016 130.988 36.0143C130.693 36.0449 130.396 36.0604 130.1 36.0606C127.944 36.0605 125.87 35.2328 124.307 33.7484C122.744 32.2639 121.81 30.2359 121.698 28.0829C121.586 25.9299 122.305 23.8161 123.707 22.1778C125.108 20.5395 127.085 19.5016 129.229 19.2784C129.524 19.2477 129.82 19.2323 130.116 19.2321C131.704 19.2335 133.26 19.6845 134.603 20.5331C135.946 21.3816 137.021 22.593 137.704 24.0271C138.388 25.4613 138.651 27.0595 138.464 28.637C138.277 30.2145 137.647 31.7067 136.647 32.9412Z" fill="#151515"/>
<path d="M123.338 57.5645V54.1748C123.106 54.4753 122.816 54.7144 122.469 54.8921C122.122 55.0656 121.747 55.1523 121.345 55.1523C120.579 55.1523 119.949 54.8646 119.454 54.2891C118.87 53.6162 118.578 52.7043 118.578 51.5532C118.578 50.4699 118.851 49.6257 119.396 49.0205C119.947 48.4111 120.628 48.1064 121.44 48.1064C121.889 48.1064 122.276 48.2017 122.602 48.3921C122.932 48.5825 123.224 48.8703 123.478 49.2554V48.2588H125.122V57.5645H123.338ZM123.396 51.5469C123.396 50.8571 123.254 50.3451 122.97 50.0107C122.691 49.6722 122.34 49.5029 121.917 49.5029C121.485 49.5029 121.123 49.6743 120.831 50.0171C120.543 50.3599 120.399 50.9036 120.399 51.6484C120.399 52.389 120.539 52.9243 120.818 53.2544C121.098 53.5802 121.443 53.7432 121.853 53.7432C122.264 53.7432 122.623 53.5591 122.932 53.1909C123.241 52.8228 123.396 52.2747 123.396 51.5469ZM131.317 55V53.9907C131.072 54.3504 130.748 54.634 130.346 54.8413C129.948 55.0487 129.527 55.1523 129.083 55.1523C128.63 55.1523 128.224 55.0529 127.864 54.854C127.505 54.6551 127.244 54.3758 127.083 54.0161C126.923 53.6564 126.842 53.1592 126.842 52.5244V48.2588H128.626V51.3564C128.626 52.3044 128.658 52.8862 128.721 53.1021C128.789 53.3136 128.91 53.4829 129.083 53.6099C129.257 53.7326 129.477 53.7939 129.743 53.7939C130.048 53.7939 130.321 53.7114 130.562 53.5464C130.803 53.3771 130.968 53.1698 131.057 52.9243C131.146 52.6746 131.19 52.0674 131.19 51.1025V48.2588H132.974V55H131.317ZM134.828 47.3447V45.6943H136.611V47.3447H134.828ZM134.828 55V48.2588H136.611V55H134.828ZM137.729 55V53.6099L140.255 50.709C140.67 50.235 140.976 49.8986 141.175 49.6997C140.968 49.7124 140.695 49.7209 140.356 49.7251L137.976 49.7378V48.2588H143.549V49.522L140.972 52.4927L140.064 53.4766C140.56 53.4469 140.866 53.4321 140.985 53.4321H143.746V55H137.729Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_3258_71703">
<rect width="149" height="57.6774" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

295
src/pages/QuestionsMap/elements.ts Normal file
View File

@ -0,0 +1,295 @@
import type { ElementDefinition } from "cytoscape";
const POINTS: ElementDefinition[] = [
{ data: { id: "point_1", label: "Вопрос 1" } },
{ data: { id: "point_2", label: "Вопрос 2" } },
{ data: { id: "point_3", label: "Вопрос 3" } },
{ data: { id: "point_4", label: "Вопрос 4" } },
{ data: { id: "point_5", label: "Вопрос 5" } },
{ data: { id: "point_6", label: "Вопрос 6" } },
{ data: { id: "point_7", label: "Вопрос 7" } },
{ data: { id: "point_8", label: "Вопрос 8" } },
{ data: { id: "point_9", label: "Вопрос 9" } },
{ data: { id: "point_10", label: "Вопрос 10" } },
{ data: { id: "point_11", label: "Вопрос 11" } },
{ data: { id: "point_12", label: "Вопрос 12" } },
{ data: { id: "point_13", label: "Вопрос 13" } },
{ data: { id: "point_14", label: "Вопрос 14" } },
{ data: { id: "point_15", label: "Вопрос 15" } },
{ data: { id: "point_16", label: "Вопрос 16" } },
{ data: { id: "point_17", label: "Вопрос 17" } },
{ data: { id: "point_18", label: "Вопрос 18" } },
{ data: { id: "point_19", label: "Вопрос 19" } },
{ data: { id: "point_20", label: "Вопрос 20" } },
{ data: { id: "point_21", label: "Вопрос 21" } },
{ data: { id: "point_22", label: "Вопрос 22" } },
{ data: { id: "point_23", label: "Вопрос 23" } },
{ data: { id: "point_24", label: "Вопрос 24" } },
{ data: { id: "point_25", label: "Вопрос 25" } },
{ data: { id: "point_26", label: "Вопрос 26" } },
{ data: { id: "point_27", label: "Вопрос 27" } },
{ data: { id: "point_28", label: "Вопрос 28" } },
{ data: { id: "point_29", label: "Вопрос 29" } },
{ data: { id: "point_30", label: "Вопрос 30" } },
{ data: { id: "point_31", label: "Вопрос 31" } },
{ data: { id: "point_32", label: "Вопрос 32" } },
{ data: { id: "point_33", label: "Вопрос 33" } },
{ data: { id: "point_34", label: "Вопрос 34" } },
{ data: { id: "point_35", label: "Вопрос 35" } },
{ data: { id: "point_36", label: "Вопрос 36" } },
{ data: { id: "point_37", label: "Вопрос 37" } },
{ data: { id: "point_38", label: "Вопрос 38" } },
{ data: { id: "point_39", label: "Вопрос 39" } },
{ data: { id: "point_40", label: "Вопрос 40" } },
{ data: { id: "point_41", label: "Вопрос 41" } },
{ data: { id: "point_42", label: "Вопрос 42" } },
{ data: { id: "point_43", label: "Вопрос 43" } },
{ data: { id: "point_44", label: "Вопрос 44" } },
{ data: { id: "point_45", label: "Вопрос 45" } },
{ data: { id: "point_46", label: "Вопрос 46" } },
{ data: { id: "point_47", label: "Вопрос 47" } },
{ data: { id: "point_48", label: "Вопрос 48" } },
{ data: { id: "point_49", label: "Вопрос 49" } },
{ data: { id: "point_50", label: "Вопрос 50" } },
{ data: { id: "point_51", label: "Вопрос 51" } },
{ data: { id: "point_52", label: "Вопрос 52" } },
{ data: { id: "point_53", label: "Вопрос 53" } },
{ data: { id: "point_54", label: "Вопрос 54" } },
{ data: { id: "point_55", label: "Вопрос 55" } },
{ data: { id: "point_56", label: "Вопрос 56" } },
{ data: { id: "point_57", label: "Вопрос 57" } },
{ data: { id: "point_58", label: "Вопрос 58" } },
{ data: { id: "point_59", label: "Вопрос 59" } },
{ data: { id: "point_60", label: "Вопрос 60" } },
{ data: { id: "point_61", label: "Вопрос 61" } },
{ data: { id: "point_62", label: "Вопрос 62" } },
{ data: { id: "point_63", label: "Вопрос 63" } },
{ data: { id: "point_64", label: "Вопрос 64" } },
{ data: { id: "point_65", label: "Вопрос 65" } },
{ data: { id: "point_66", label: "Вопрос 66" } },
{ data: { id: "point_67", label: "Вопрос 67" } },
{ data: { id: "point_68", label: "Вопрос 68" } },
{ data: { id: "point_69", label: "Вопрос 69" } },
{ data: { id: "point_70", label: "Вопрос 70" } },
{ data: { id: "point_71", label: "Вопрос 71" } },
{ data: { id: "point_72", label: "Вопрос 72" } },
{ data: { id: "point_73", label: "Вопрос 73" } },
{ data: { id: "point_74", label: "Вопрос 74" } },
{ data: { id: "point_75", label: "Вопрос 75" } },
{ data: { id: "point_76", label: "Вопрос 76" } },
{ data: { id: "point_77", label: "Вопрос 77" } },
{ data: { id: "point_78", label: "Вопрос 78" } },
{ data: { id: "point_79", label: "Вопрос 79" } },
{ data: { id: "point_80", label: "Вопрос 80" } },
{ data: { id: "point_81", label: "Вопрос 81" } },
{ data: { id: "point_82", label: "Вопрос 82" } },
{ data: { id: "point_83", label: "Вопрос 83" } },
{ data: { id: "point_84", label: "Вопрос 84" } },
{ data: { id: "point_85", label: "Вопрос 85" } },
{ data: { id: "point_86", label: "Вопрос 86" } },
{ data: { id: "point_87", label: "Вопрос 87" } },
{ data: { id: "point_88", label: "Вопрос 88" } },
{ data: { id: "point_89", label: "Вопрос 89" } },
{ data: { id: "point_90", label: "Вопрос 90" } },
{ data: { id: "point_91", label: "Вопрос 91" } },
{ data: { id: "point_92", label: "Вопрос 92" } },
{ data: { id: "point_93", label: "Вопрос 93" } },
{ data: { id: "point_94", label: "Вопрос 94" } },
{ data: { id: "point_95", label: "Вопрос 95" } },
{ data: { id: "point_96", label: "Вопрос 96" } },
{ data: { id: "point_97", label: "Вопрос 97" } },
{ data: { id: "point_98", label: "Вопрос 98" } },
{ data: { id: "point_99", label: "Вопрос 99" } },
{ data: { id: "point_100", label: "Вопрос 100" } },
{ data: { id: "point_101", label: "Вопрос 101" } },
{ data: { id: "point_102", label: "Вопрос 102" } },
{ data: { id: "point_103", label: "Вопрос 103" } },
{ data: { id: "point_104", label: "Вопрос 104" } },
{ data: { id: "point_105", label: "Вопрос 105" } },
{ data: { id: "point_106", label: "Вопрос 106" } },
{ data: { id: "point_107", label: "Вопрос 107" } },
{ data: { id: "point_108", label: "Вопрос 108" } },
{ data: { id: "point_109", label: "Вопрос 109" } },
{ data: { id: "point_110", label: "Вопрос 110" } },
{ data: { id: "point_111", label: "Вопрос 111" } },
{ data: { id: "point_112", label: "Вопрос 112" } },
{ data: { id: "point_113", label: "Вопрос 113" } },
{ data: { id: "point_114", label: "Вопрос 114" } },
{ data: { id: "point_115", label: "Вопрос 115" } },
{ data: { id: "point_116", label: "Вопрос 116" } },
{ data: { id: "point_117", label: "Вопрос 117" } },
{ data: { id: "point_118", label: "Вопрос 118" } },
{ data: { id: "point_119", label: "Вопрос 119" } },
{ data: { id: "point_120", label: "Вопрос 120" } },
{ data: { id: "point_121", label: "Вопрос 121" } },
{ data: { id: "point_122", label: "Вопрос 122" } },
{ data: { id: "point_123", label: "Вопрос 123" } },
{ data: { id: "point_124", label: "Вопрос 124" } },
{ data: { id: "point_125", label: "Вопрос 125" } },
{ data: { id: "point_126", label: "Вопрос 126" } },
{ data: { id: "point_127", label: "Вопрос 127" } },
{ data: { id: "point_128", label: "Вопрос 128" } },
{ data: { id: "point_129", label: "Вопрос 129" } },
{ data: { id: "point_130", label: "Вопрос 130" } },
{ data: { id: "point_131", label: "Вопрос 131" } },
{ data: { id: "point_132", label: "Вопрос 132" } },
{ data: { id: "point_133", label: "Вопрос 133" } },
{ data: { id: "point_134", label: "Вопрос 134" } },
{ data: { id: "point_135", label: "Вопрос 135" } },
{ data: { id: "point_136", label: "Вопрос 136" } },
{ data: { id: "point_137", label: "Вопрос 137" } },
{ data: { id: "point_138", label: "Вопрос 138" } },
{ data: { id: "point_139", label: "Вопрос 139" } },
{ data: { id: "point_140", label: "Вопрос 140" } },
{ data: { id: "point_141", label: "Вопрос 141" } },
{ data: { id: "point_142", label: "Вопрос 142" } },
];
const BRIDGES: ElementDefinition[] = [
{ data: { source: "point_1", target: "point_2" } },
{ data: { source: "point_1", target: "point_3" } },
{ data: { source: "point_1", target: "point_4" } },
{ data: { source: "point_1", target: "point_5" } },
{ data: { source: "point_1", target: "point_6" } },
{ data: { source: "point_1", target: "point_7" } },
{ data: { source: "point_1", target: "point_7" } },
{ data: { source: "point_1", target: "point_8" } },
{ data: { source: "point_1", target: "point_9" } },
{ data: { source: "point_1", target: "point_10" } },
{ data: { source: "point_1", target: "point_11" } },
{ data: { source: "point_1", target: "point_12" } },
{ data: { source: "point_2", target: "point_13" } },
{ data: { source: "point_2", target: "point_14" } },
{ data: { source: "point_2", target: "point_15" } },
{ data: { source: "point_2", target: "point_16" } },
{ data: { source: "point_2", target: "point_17" } },
{ data: { source: "point_2", target: "point_18" } },
{ data: { source: "point_2", target: "point_19" } },
{ data: { source: "point_2", target: "point_20" } },
{ data: { source: "point_2", target: "point_21" } },
{ data: { source: "point_2", target: "point_22" } },
{ data: { source: "point_2", target: "point_23" } },
{ data: { source: "point_2", target: "point_24" } },
{ data: { source: "point_3", target: "point_25" } },
{ data: { source: "point_3", target: "point_26" } },
{ data: { source: "point_3", target: "point_27" } },
{ data: { source: "point_3", target: "point_28" } },
{ data: { source: "point_3", target: "point_29" } },
{ data: { source: "point_3", target: "point_30" } },
{ data: { source: "point_3", target: "point_31" } },
{ data: { source: "point_3", target: "point_32" } },
{ data: { source: "point_3", target: "point_33" } },
{ data: { source: "point_3", target: "point_34" } },
{ data: { source: "point_3", target: "point_35" } },
{ data: { source: "point_3", target: "point_36" } },
{ data: { source: "point_4", target: "point_37" } },
{ data: { source: "point_4", target: "point_38" } },
{ data: { source: "point_4", target: "point_39" } },
{ data: { source: "point_4", target: "point_40" } },
{ data: { source: "point_4", target: "point_41" } },
{ data: { source: "point_4", target: "point_42" } },
{ data: { source: "point_4", target: "point_43" } },
{ data: { source: "point_4", target: "point_44" } },
{ data: { source: "point_4", target: "point_45" } },
{ data: { source: "point_4", target: "point_46" } },
{ data: { source: "point_4", target: "point_47" } },
{ data: { source: "point_4", target: "point_48" } },
{ data: { source: "point_5", target: "point_49" } },
{ data: { source: "point_5", target: "point_50" } },
{ data: { source: "point_5", target: "point_51" } },
{ data: { source: "point_5", target: "point_52" } },
{ data: { source: "point_5", target: "point_53" } },
{ data: { source: "point_5", target: "point_54" } },
{ data: { source: "point_5", target: "point_55" } },
{ data: { source: "point_5", target: "point_56" } },
{ data: { source: "point_5", target: "point_57" } },
{ data: { source: "point_5", target: "point_58" } },
{ data: { source: "point_5", target: "point_59" } },
{ data: { source: "point_5", target: "point_60" } },
{ data: { source: "point_6", target: "point_61" } },
{ data: { source: "point_6", target: "point_62" } },
{ data: { source: "point_6", target: "point_63" } },
{ data: { source: "point_6", target: "point_64" } },
{ data: { source: "point_6", target: "point_65" } },
{ data: { source: "point_6", target: "point_66" } },
{ data: { source: "point_6", target: "point_67" } },
{ data: { source: "point_6", target: "point_68" } },
{ data: { source: "point_6", target: "point_69" } },
{ data: { source: "point_6", target: "point_70" } },
{ data: { source: "point_6", target: "point_71" } },
{ data: { source: "point_6", target: "point_72" } },
{ data: { source: "point_7", target: "point_73" } },
{ data: { source: "point_7", target: "point_74" } },
{ data: { source: "point_7", target: "point_75" } },
{ data: { source: "point_7", target: "point_76" } },
{ data: { source: "point_7", target: "point_77" } },
{ data: { source: "point_7", target: "point_78" } },
{ data: { source: "point_7", target: "point_79" } },
{ data: { source: "point_7", target: "point_80" } },
{ data: { source: "point_7", target: "point_81" } },
{ data: { source: "point_7", target: "point_82" } },
{ data: { source: "point_7", target: "point_83" } },
{ data: { source: "point_7", target: "point_84" } },
{ data: { source: "point_8", target: "point_85" } },
{ data: { source: "point_8", target: "point_86" } },
{ data: { source: "point_8", target: "point_87" } },
{ data: { source: "point_8", target: "point_88" } },
{ data: { source: "point_8", target: "point_89" } },
{ data: { source: "point_8", target: "point_90" } },
{ data: { source: "point_8", target: "point_91" } },
{ data: { source: "point_8", target: "point_92" } },
{ data: { source: "point_8", target: "point_93" } },
{ data: { source: "point_8", target: "point_94" } },
{ data: { source: "point_8", target: "point_95" } },
{ data: { source: "point_8", target: "point_96" } },
{ data: { source: "point_9", target: "point_97" } },
{ data: { source: "point_9", target: "point_98" } },
{ data: { source: "point_9", target: "point_99" } },
{ data: { source: "point_9", target: "point_100" } },
{ data: { source: "point_9", target: "point_101" } },
{ data: { source: "point_9", target: "point_102" } },
{ data: { source: "point_9", target: "point_103" } },
{ data: { source: "point_9", target: "point_104" } },
{ data: { source: "point_9", target: "point_105" } },
{ data: { source: "point_9", target: "point_106" } },
{ data: { source: "point_9", target: "point_107" } },
{ data: { source: "point_9", target: "point_108" } },
{ data: { source: "point_10", target: "point_109" } },
{ data: { source: "point_10", target: "point_110" } },
{ data: { source: "point_10", target: "point_111" } },
{ data: { source: "point_10", target: "point_112" } },
{ data: { source: "point_10", target: "point_113" } },
{ data: { source: "point_10", target: "point_114" } },
{ data: { source: "point_10", target: "point_115" } },
{ data: { source: "point_10", target: "point_116" } },
{ data: { source: "point_10", target: "point_117" } },
{ data: { source: "point_10", target: "point_118" } },
{ data: { source: "point_10", target: "point_119" } },
{ data: { source: "point_10", target: "point_120" } },
{ data: { source: "point_11", target: "point_121" } },
{ data: { source: "point_11", target: "point_122" } },
{ data: { source: "point_11", target: "point_123" } },
{ data: { source: "point_11", target: "point_124" } },
{ data: { source: "point_11", target: "point_125" } },
{ data: { source: "point_11", target: "point_126" } },
{ data: { source: "point_11", target: "point_127" } },
{ data: { source: "point_11", target: "point_128" } },
{ data: { source: "point_11", target: "point_129" } },
{ data: { source: "point_11", target: "point_130" } },
{ data: { source: "point_11", target: "point_131" } },
{ data: { source: "point_11", target: "point_132" } },
{ data: { source: "point_12", target: "point_132" } },
{ data: { source: "point_12", target: "point_133" } },
{ data: { source: "point_12", target: "point_134" } },
{ data: { source: "point_12", target: "point_135" } },
{ data: { source: "point_12", target: "point_136" } },
{ data: { source: "point_12", target: "point_137" } },
{ data: { source: "point_12", target: "point_138" } },
{ data: { source: "point_12", target: "point_139" } },
{ data: { source: "point_12", target: "point_140" } },
{ data: { source: "point_12", target: "point_141" } },
{ data: { source: "point_12", target: "point_142" } },
{ data: { source: "point_12", target: "point_142" } },
];
export const ELEMENTS: ElementDefinition[] = [...POINTS, ...BRIDGES];

69
src/pages/QuestionsMap/graph.tsx Normal file
View File

@ -0,0 +1,69 @@
import { Box } from "@mui/material";
import Cytoscape from "react-cytoscapejs";
import { ELEMENTS } from "./elements";
import type { Stylesheet } from "cytoscape";
const stylesheet: Stylesheet[] = [
{
selector: "node",
style: {
shape: "round-rectangle",
width: 130,
height: 130,
backgroundColor: "#FFFFFF",
},
},
{
selector: "node[label]",
style: {
label: "data(label)",
"font-size": "16",
color: "#4D4D4D",
"text-halign": "center",
"text-valign": "center",
},
},
{
selector: "edge",
style: {
width: 30,
"line-color": "#DEDFE7",
"curve-style": "taxi",
"taxi-direction": "downward",
"taxi-turn": 20,
"taxi-turn-min-distance": 5,
},
},
{
selector: ":selected",
style: {
"border-style": "solid",
"border-width": 1.5,
"border-color": "#9A9AAF",
},
},
];
export const Graph = () => {
return (
<Box
sx={{
padding: "20px",
background: "#FFFFFF",
borderRadius: "12px",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
marginTop: "30px",
}}
>
<Cytoscape
wheelSensitivity={0.1}
elements={ELEMENTS}
style={{ height: "480px", background: "#F2F3F7" }}
layout={{ name: "breadthfirst" }}
stylesheet={stylesheet}
/>
</Box>
);
};

51
src/pages/QuestionsMap/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Box, Typography, Button, useTheme } from "@mui/material";
import { useParams } from "react-router-dom";
import { Graph } from "./graph";
import { quizStore } from "@root/quizes";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
export const QuestionsMap = () => {
const { listQuizes, updateQuizesList } = quizStore();
const quizId = Number(useParams().quizId);
const quize = listQuizes[quizId];
const theme = useTheme();
return (
<Box>
<Typography variant="h5" sx={{ marginTop: "50px" }}>
Карта вопросов
</Typography>
<Graph />
<Box sx={{ display: "flex", gap: "8px", marginTop: "25px" }}>
<Button
variant="outlined"
sx={{
padding: "10px 20px",
borderRadius: "8px",
height: "44px",
marginLeft: "auto",
}}
onClick={() => updateQuizesList(quizId, { step: quize.step - 1 })}
>
<ArrowLeft />
</Button>
<Button
variant="contained"
sx={{
height: "44px",
padding: "10px 20px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={() => updateQuizesList(quizId, { step: quize.step + 1 })}
>
Следующий шаг
</Button>
</Box>
</Box>
);
};

291
src/pages/startPage/ModalSizeImage.tsx
View File

@ -1,133 +1,180 @@
import { import {
Button, Button,
Modal, Modal,
Box, Box,
useTheme, useTheme,
Typography, Typography,
Table, Table,
TableCell, TableCell,
TableBody, TableBody,
TableContainer, TableContainer,
TableRow, IconButton, Link, TableRow,
IconButton,
Link,
} from "@mui/material"; } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from "@mui/icons-material/Close";
import * as React from "react"; import * as React from "react";
import {useState} from "react"; import { useState } from "react";
export default function ModalSizeImage () { export default function ModalSizeImage() {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true); const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false); const handleClose = () => setOpen(false);
function createData( function createData(name: string, size: string) {
name: string, return { name, size };
size: string }
) {
return { name, size };
}
const rows = [ const rows = [
createData('Прямая ссылка/домен', "1792х1509 px"), createData("Прямая ссылка/домен", "1792х1509 px"),
createData('Модальное окно на сайте', "1380х1300 px"), createData("Модальное окно на сайте", "1380х1300 px"),
createData('Во ВКонтакте', "1166х1200 px"), createData("Во ВКонтакте", "1166х1200 px"),
createData('Версия для планшета', "767х220 px"), createData("Версия для планшета", "767х220 px"),
createData('Мобильная версия', "400х220 px"), createData("Мобильная версия", "400х220 px"),
createData('Картинка для дизайна Centered', "900х490 px"), createData("Картинка для дизайна Centered", "900х490 px"),
createData('Картинка для дизайна Expanded', "1920х1080 px"), createData("Картинка для дизайна Expanded", "1920х1080 px"),
]; ];
const rows2 = [ const rows2 = [
createData('Вертикальный вариант', "180х240 px"), createData("Вертикальный вариант", "180х240 px"),
createData('Квадратные', "240х240 px"), createData("Квадратные", "240х240 px"),
createData('Варианты и картинка', "380х307 px"), createData("Варианты и картинка", "380х307 px"),
createData('Консультант', "140х140 px"), createData("Консультант", "140х140 px"),
createData('Логотип', "107х37 px"), createData("Логотип", "107х37 px"),
createData('Результаты',"1100х600 px"), createData("", "1100х600 px"),
createData('Бонус', "200х60 px"), createData("Бонус", "200х60 px"),
createData('Картинка для формата вопроса "Страница"', "860х1250 px"), createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
]; ];
return ( return (
<> <>
<Link <Link
component='button' component="button"
sx={{ sx={{
mt: "20px", mt: "20px",
fontSize: "16px", fontSize: "16px",
lineHeight: "19px", lineHeight: "19px",
textAlign: 'left', textAlign: "left",
color: theme.palette.orange.main, color: theme.palette.orange.main,
textDecorationColor: theme.palette.orange.main textDecorationColor: theme.palette.orange.main,
}} }}
onClick={handleOpen}>Размер картинок</Link> onClick={handleOpen}
<Modal >
open={open} Размер картинок
onClose={handleClose} </Link>
aria-labelledby="modal-modal-title" <Modal
aria-describedby="modal-modal-description" open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
sx={{
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "540px",
width: "100%",
minHeight: "632px",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "baseline",
backgroundColor: theme.palette.background.default,
padding: "10px 9px 17px 20px",
borderRadius: "12px 12px 0px 0px",
}}
>
<Typography variant={"h5"}>Размеры картинок</Typography>
<IconButton onClick={handleClose}>
<CloseIcon />
</IconButton>
</Box>
<Box sx={{ padding: "15px 20px 0px" }}>
<Typography
variant={"body2"}
sx={{ color: theme.palette.grey2.main, fontWeight: 400 }}
> >
<Box Рекомендованный размер зависит от того, как вы будете чаще
sx={{ использовать квиз:
position: "absolute" as "absolute", </Typography>
top: "50%", </Box>
left: "50%", <Box sx={{ padding: "15px 40px 30px" }}>
transform: "translate(-50%, -50%)", {rows.map((row) => (
maxWidth: "540px", <Box
width: "100%", sx={{
minHeight: "632px", display: "flex",
bgcolor: "background.paper", justifyContent: "space-between",
borderRadius: "12px", width: "100%",
boxShadow: 24, paddingBottom: "5px",
p: 0, }}
}} >
> <Box sx={{ display: "block ruby", height: "20px" }}>
<Box <Typography variant={"body2"} fontWeight={400}>
sx={{ {row.name}
display: "flex", </Typography>
justifyContent: "space-between",
alignItems: "baseline",
backgroundColor: theme.palette.background.default,
padding: "10px 9px 17px 20px",
borderRadius: "12px 12px 0px 0px"
}}>
<Typography variant={"h5"}>Размеры картинок</Typography>
<IconButton onClick={handleClose}><CloseIcon/></IconButton>
</Box>
<Box sx={{padding: "15px 20px 0px"}}>
<Typography variant={"body2"} sx={{color: theme.palette.grey2.main, fontWeight: 400}}>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography>
</Box>
<Box sx={{padding: "15px 40px 30px"}}>
{rows.map((row) => (
<Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.name}</Typography></Box>
<Box sx={{borderBottom: "solid 1px #F2F3F7", width: "100%", margin: "0 7px"}}></Box>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"}>{row.size}</Typography></Box>
</Box>
))}
</Box>
<Box
sx={{
backgroundColor: theme.palette.background.default,
padding: "20px"
}}
>
<Typography variant={"h5"}>Размеры изображений в квизе</Typography>
</Box>
<Box sx={{padding: "15px 40px 20px"}}>
{rows2.map((row) => (
<Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.name}</Typography></Box>
<Box sx={{borderBottom: "solid 1px #F2F3F7", width: "100%", margin: "0 7px"}}></Box>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"}>{row.size}</Typography></Box>
</Box>
))}
</Box>
</Box> </Box>
</Modal> <Box
</> sx={{
borderBottom: "solid 1px #F2F3F7",
width: "100%",
margin: "0 7px",
}}
></Box>
<Box sx={{ display: "block ruby", height: "20px" }}>
<Typography variant={"body2"}>{row.size}</Typography>
</Box>
</Box>
))}
</Box>
); <Box
} sx={{
backgroundColor: theme.palette.background.default,
padding: "20px",
}}
>
<Typography variant={"h5"}>Размеры изображений в квизе</Typography>
</Box>
<Box sx={{ padding: "15px 40px 20px" }}>
{rows2.map((row) => (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
paddingBottom: "5px",
}}
>
<Box sx={{ display: "block ruby", height: "20px" }}>
<Typography variant={"body2"} fontWeight={400}>
{row.name}
</Typography>
</Box>
<Box
sx={{
borderBottom: "solid 1px #F2F3F7",
width: "100%",
margin: "0 7px",
}}
></Box>
<Box sx={{ display: "block ruby", height: "20px" }}>
<Typography variant={"body2"}>{row.size}</Typography>
</Box>
</Box>
))}
</Box>
</Box>
</Modal>
</>
);
}

1
src/pages/startPage/StartPage.tsx
View File

@ -28,6 +28,7 @@ const DESCRIPTIONS = [
"Настройка стартовой страницы", "Настройка стартовой страницы",
"Задайте вопросы", "Задайте вопросы",
"Настройте авторезультаты", "Настройте авторезультаты",
"Оценка графа карты вопросов",
"Настройте форму контактов", "Настройте форму контактов",
"Установите квиз", "Установите квиз",
"Запустите рекламу", "Запустите рекламу",

26
src/ui_kit/Sidebar.tsx
View File

@ -11,23 +11,25 @@ import {
import { quizStore } from "@root/quizes"; import { quizStore } from "@root/quizes";
import MegaphoneIcon from "../assets/icons/MegaphoneIcon"; import MegaphoneIcon from "@icons/MegaphoneIcon";
import QuestionIcon from "../assets/icons/QuestionIcon"; import QuestionIcon from "@icons/QuestionIcon";
import ChartPieIcon from "../assets/icons/ChartPieIcon"; import QuestionsMapIcon from "@icons/QuestionsMapIcon";
import ContactBookIcon from "../assets/icons/ContactBookIcon"; import ChartPieIcon from "@icons/ChartPieIcon";
import FlowArrowIcon from "../assets/icons/FlowArrowIcon"; import ContactBookIcon from "@icons/ContactBookIcon";
import CollapseMenuIcon from "../assets/icons/CollapseMenuIcon"; import FlowArrowIcon from "@icons/FlowArrowIcon";
import TagIcon from "../assets/icons/TagIcon"; import CollapseMenuIcon from "@icons/CollapseMenuIcon";
import PencilCircleIcon from "../assets/icons/PencilCircleIcon"; import TagIcon from "@icons/TagIcon";
import PuzzlePieceIcon from "../assets/icons/PuzzlePieceIcon"; import PencilCircleIcon from "@icons/PencilCircleIcon";
import GearIcon from "../assets/icons/GearIcon"; import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
import LayoutIcon from "../assets/icons/LayoutIcon"; import GearIcon from "@icons/GearIcon";
import LayoutIcon from "@icons/LayoutIcon";
import MenuItem from "./MenuItem"; import MenuItem from "./MenuItem";
const createQuizMenuItems = [ const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"], [LayoutIcon, "Стартовая страница"],
[QuestionIcon, "Вопросы"], [QuestionIcon, "Вопросы"],
[ChartPieIcon, "Результаты"], [ChartPieIcon, "Результаты"],
[QuestionsMapIcon, "Карта вопросов"],
[ContactBookIcon, "Форма контактов"], [ContactBookIcon, "Форма контактов"],
[FlowArrowIcon, "Установка квиза"], [FlowArrowIcon, "Установка квиза"],
[MegaphoneIcon, "Запуск рекламы"], [MegaphoneIcon, "Запуск рекламы"],
@ -43,7 +45,7 @@ const quizSettingsMenuItems = [
export default function Sidebar() { export default function Sidebar() {
const theme = useTheme(); const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [progress, setProgress] = useState<number>(1 / 6); const [progress, setProgress] = useState<number>(1 / 7);
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuizes, updateQuizesList } = quizStore(); const { listQuizes, updateQuizesList } = quizStore();

2
src/ui_kit/Stepper.tsx
View File

@ -7,7 +7,7 @@ interface Props {
steps?: number; steps?: number;
} }
export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 7 }: Props) { export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 8 }: Props) {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));

7
src/ui_kit/switchStepPages.tsx
View File

@ -8,6 +8,7 @@ import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "../pages/InstallQuiz/InstallQuiz"; import InstallQuiz from "../pages/InstallQuiz/InstallQuiz";
import { Result } from "../pages/Result/Result"; import { Result } from "../pages/Result/Result";
import { Setting } from "../pages/Result/Setting"; import { Setting } from "../pages/Result/Setting";
import { QuestionsMap } from "../pages/QuestionsMap";
interface Props { interface Props {
activeStep: number; activeStep: number;
@ -34,10 +35,12 @@ export default function SwitchStepPages({
if (!createResult) return <Result />; if (!createResult) return <Result />;
return <Setting />; return <Setting />;
case 4: case 4:
return <ContactFormPage />; return <QuestionsMap />;
case 5: case 5:
return <InstallQuiz />; return <ContactFormPage />;
case 6: case 6:
return <InstallQuiz />;
case 7:
return <>Реклама</>; return <>Реклама</>;
default: default:

33
yarn.lock
View File

@ -2180,6 +2180,11 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@types/cytoscape@*":
version "3.19.13"
resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.19.13.tgz#2e4c5df1e85d4ad77b7bf1375f0f01c8f26457b1"
integrity sha512-FZY6Zyh8kGqEwZ6jizCJa5rbKriOWqJaEoGR8AG2LNQyo5sy1q7hFNo8ojbRpHNBluBmCJa+/w//OWaehxolgA==
"@types/eslint-scope@^3.7.3": "@types/eslint-scope@^3.7.3":
version "3.7.4" version "3.7.4"
resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz" resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz"
@ -2346,6 +2351,14 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-cytoscapejs@^1.2.4":
version "1.2.4"
resolved "https://registry.yarnpkg.com/@types/react-cytoscapejs/-/react-cytoscapejs-1.2.4.tgz#9cdc1b2cdc5fe9d36417dd348f410e52c6745d07"
integrity sha512-bMWmBCRAjPrQgondFLfqworU/DDpAr15aw3jdJUik7QMjHI5B+kTNPi2Q0mCzPQXHbB1+Bg7rJbYjbfPUZsISA==
dependencies:
"@types/cytoscape" "*"
"@types/react" "*"
"@types/react-dnd@^3.0.2": "@types/react-dnd@^3.0.2":
version "3.0.2" version "3.0.2"
resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz" resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz"
@ -3887,6 +3900,14 @@ csstype@^3.0.2, csstype@^3.1.1:
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz" resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
cytoscape@^3.26.0:
version "3.26.0"
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.26.0.tgz#b4c6961445fd51e1fd3cca83c3ffe924d9a8abc9"
integrity sha512-IV+crL+KBcrCnVVUCZW+zRRRFUZQcrtdOPXki+o4CFUWLdAEYvuZLcBSJC9EBK++suamERKzeY7roq2hdovV3w==
dependencies:
heap "^0.2.6"
lodash "^4.17.21"
damerau-levenshtein@^1.0.8: damerau-levenshtein@^1.0.8:
version "1.0.8" version "1.0.8"
resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz" resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@ -5199,6 +5220,11 @@ he@^1.2.0:
resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz" resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
heap@^0.2.6:
version "0.2.7"
resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2" version "3.3.2"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
@ -7893,6 +7919,13 @@ react-beautiful-dnd@^13.1.1:
redux "^4.0.4" redux "^4.0.4"
use-memo-one "^1.1.1" use-memo-one "^1.1.1"
react-cytoscapejs@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz#fdc2547626df0678acfbb48e73a437ddc1687b01"
integrity sha512-t3SSl1DQy7+JQjN+8QHi1anEJlM3i3aAeydHTsJwmjo/isyKK7Rs7oCvU6kZsB9NwZidzZQR21Vm2PcBLG/Tjg==
dependencies:
prop-types "^15.8.1"
react-dev-utils@^12.0.1: react-dev-utils@^12.0.1:
version "12.0.1" version "12.0.1"
resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz" resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"