обновлена страница установка квиза
This commit is contained in:
Tamara
parent
c2950872b5
commit
e227ebbf25
@ -44,6 +44,7 @@ import InstallQzCode from "./InstallQzCode";
|
||||
import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { useDomainDefine } from "@utils/hooks/useDomainDefine";
|
||||
import NumberTwo from "@icons/NumberTwo";
|
||||
|
||||
type BackgroundType = "text" | "video";
|
||||
|
||||
@ -56,6 +57,7 @@ export default function InstallQuiz() {
|
||||
};
|
||||
|
||||
const [openVk, setOpenVk] = React.useState(false);
|
||||
const [stepState, setStepState] = React.useState("step1");
|
||||
const handleOpenVk = () => setOpenVk(true);
|
||||
const handleCloseVk = () => setOpenVk(false);
|
||||
|
||||
@ -77,7 +79,14 @@ export default function InstallQuiz() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ marginTop: "60px", display: "flex", gap: "40px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "60px",
|
||||
display: "flex",
|
||||
gap: "40px",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
sx={{
|
||||
maxWidth: "522px",
|
||||
@ -258,6 +267,200 @@ export default function InstallQuiz() {
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#ffffff",
|
||||
padding: "20px",
|
||||
mt: "40px",
|
||||
borderRadius: "12px",
|
||||
maxWidth: "1160px",
|
||||
boxShadow:
|
||||
"0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "30px" }}>
|
||||
<Typography variant="h5" sx={{ paddingRight: "30px" }}>
|
||||
Установка квизов на сайте
|
||||
</Typography>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setStepState("step1");
|
||||
}}
|
||||
>
|
||||
<OneIconBorder
|
||||
color={
|
||||
stepState === "step1" ? "#FC712F" : theme.palette.grey2.main
|
||||
}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
color:
|
||||
stepState === "step1"
|
||||
? "#FC712F"
|
||||
: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Способ установки
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setStepState("step2");
|
||||
}}
|
||||
>
|
||||
<NumberTwo
|
||||
color={
|
||||
stepState === "step2" ? "#FC712F" : theme.palette.grey2.main
|
||||
}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
color:
|
||||
stepState === "step2"
|
||||
? "#FC712F"
|
||||
: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Вставить код на сайт
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "30px",
|
||||
}}
|
||||
>
|
||||
{stepState === "step1" ? (
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setStepState("step2");
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "start",
|
||||
alignItems: "start",
|
||||
maxWidth: "205px",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<img src={InBidySite} />
|
||||
<Typography>В тело сайта</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: theme.palette.grey2.main,
|
||||
textAlign: "start",
|
||||
}}
|
||||
>
|
||||
Задайте свои размеры и встройте в сайт
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
) : (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "520px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography>1. Код вставки опросника</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Установите код в то место, где должен быть опросник
|
||||
</Typography>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={9}
|
||||
value={`<div id="idpena"></div> <script type="module"> import widget from "https://s.hbpn.link/export/pub.js"; widget.create({ selector: "idpena", quizId: ${quiz.qid} }) </script>`}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
maxWidth: "520px",
|
||||
width: "100%",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
fontSize: "18px",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<IconButton
|
||||
edge="end"
|
||||
sx={{ marginTop: "22px" }}
|
||||
onClick={() =>
|
||||
navigator.clipboard.writeText(
|
||||
document.getElementById(
|
||||
"outlined-multiline-static",
|
||||
).value,
|
||||
)
|
||||
}
|
||||
>
|
||||
<CopyIcon
|
||||
color={"#ffffff"}
|
||||
bgcolor={theme.palette.brightPurple.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#EEE4FC",
|
||||
border: "1px solid #7E2AEA",
|
||||
padding: "20px 50px 20px 20px",
|
||||
borderRadius: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
Код нужно вставить один раз. Изменения в самом quiz будут
|
||||
отображаться автоматически после сохранения.
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
justifyContent: "end",
|
||||
mt: "30px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ padding: "10px 20px", borderRadius: "8px" }}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button variant="contained" onClick={incrementCurrentStep}>
|
||||
Запустить рекламу
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
@ -532,7 +735,7 @@ export default function InstallQuiz() {
|
||||
// <OneIconBorder color={"#FC712F"} />
|
||||
// <Typography sx={{ color: "#FC712F" }}>Способ установки</Typography>
|
||||
// </Box>
|
||||
|
||||
//
|
||||
// <Box
|
||||
// sx={{
|
||||
// padding: "20px",
|
||||
|
||||
@ -29,9 +29,9 @@ export default function InstallQzCode() {
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography>1. Код инициализации</Typography>
|
||||
<Typography>1. Код вставки опросника</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Вставьте блок head в начале страницы
|
||||
Установите код в то место, где должен быть опросник
|
||||
</Typography>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
@ -67,77 +67,77 @@ export default function InstallQzCode() {
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "520px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography>2. Код кнопки</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Установите код в то место, где должна быть кнопка открытия quiz
|
||||
</Typography>
|
||||
<TextField
|
||||
id="outlined-multiline-static"
|
||||
multiline
|
||||
rows={9}
|
||||
value="<script>
|
||||
(function(w, d, s, o){
|
||||
var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {
|
||||
if (document.readyState !== 'loading') Marquiz.init(o);
|
||||
else document.addEventListener('DOMContentLoaded', function() {
|
||||
Marquiz.init(o);
|
||||
});"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
fontSize: "18px",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<IconButton edge="end" sx={{ marginTop: "22px" }}>
|
||||
<CopyIcon
|
||||
color={"#ffffff"}
|
||||
bgcolor={theme.palette.brightPurple.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
<Button variant="contained">Отправить код программисту</Button>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Link
|
||||
component="button"
|
||||
variant="body2"
|
||||
sx={{ color: theme.palette.brightPurple.main }}
|
||||
// onClick={() => {
|
||||
// }}
|
||||
>
|
||||
Инструкция к платформам
|
||||
</Link>
|
||||
<IconButton>
|
||||
<InfoIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
{/*<Box*/}
|
||||
{/* sx={{*/}
|
||||
{/* maxWidth: "520px",*/}
|
||||
{/* width: "100%",*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* flexDirection: "column",*/}
|
||||
{/* gap: "20px",*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* <Typography>2. Код кнопки</Typography>*/}
|
||||
{/* <Typography sx={{ color: theme.palette.grey2.main }}>*/}
|
||||
{/* Установите код в то место, где должна быть кнопка открытия quiz*/}
|
||||
{/* </Typography>*/}
|
||||
{/* <TextField*/}
|
||||
{/* id="outlined-multiline-static"*/}
|
||||
{/* multiline*/}
|
||||
{/* rows={9}*/}
|
||||
{/* value="<script>*/}
|
||||
{/* (function(w, d, s, o){*/}
|
||||
{/* var j = d.createElement(s); j.async = true; j.src = //script.marquiz.ru/v2.js';j.onload = function() {*/}
|
||||
{/* if (document.readyState !== 'loading') Marquiz.init(o);*/}
|
||||
{/* else document.addEventListener('DOMContentLoaded', function() {*/}
|
||||
{/* Marquiz.init(o);*/}
|
||||
{/* });"*/}
|
||||
{/* sx={{*/}
|
||||
{/* "& .MuiInputBase-root": {*/}
|
||||
{/* backgroundColor: theme.palette.background.default,*/}
|
||||
{/* fontSize: "18px",*/}
|
||||
{/* alignItems: "flex-start",*/}
|
||||
{/* },*/}
|
||||
{/* }}*/}
|
||||
{/* InputProps={{*/}
|
||||
{/* endAdornment: (*/}
|
||||
{/* <InputAdornment position="start">*/}
|
||||
{/* <IconButton edge="end" sx={{ marginTop: "22px" }}>*/}
|
||||
{/* <CopyIcon*/}
|
||||
{/* color={"#ffffff"}*/}
|
||||
{/* bgcolor={theme.palette.brightPurple.main}*/}
|
||||
{/* />*/}
|
||||
{/* </IconButton>*/}
|
||||
{/* </InputAdornment>*/}
|
||||
{/* ),*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/* <Box>*/}
|
||||
{/* <Button variant="contained">Отправить код программисту</Button>*/}
|
||||
{/* <Box sx={{ display: "flex" }}>*/}
|
||||
{/* <Link*/}
|
||||
{/* component="button"*/}
|
||||
{/* variant="body2"*/}
|
||||
{/* sx={{ color: theme.palette.brightPurple.main }}*/}
|
||||
{/* // onClick={() => {*/}
|
||||
{/* // }}*/}
|
||||
{/* >*/}
|
||||
{/* Инструкция к платформам*/}
|
||||
{/* </Link>*/}
|
||||
{/* <IconButton>*/}
|
||||
{/* <InfoIcon />*/}
|
||||
{/* </IconButton>*/}
|
||||
{/* </Box>*/}
|
||||
{/* </Box>*/}
|
||||
{/*</Box>*/}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ maxWidth: "520px", width: "100%" }}>
|
||||
<Typography>3. Проверьте правильность установки</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||
Введите полный адрес страницы, где вы установили quiz и нажмите
|
||||
"проверить"
|
||||
</Typography>
|
||||
</Box>
|
||||
{/*<Box sx={{ maxWidth: "520px", width: "100%" }}>*/}
|
||||
{/* <Typography>3. Проверьте правильность установки</Typography>*/}
|
||||
{/* <Typography sx={{ color: theme.palette.grey2.main }}>*/}
|
||||
{/* Введите полный адрес страницы, где вы установили quiz и нажмите*/}
|
||||
{/* "проверить"*/}
|
||||
{/* </Typography>*/}
|
||||
{/*</Box>*/}
|
||||
<Box
|
||||
sx={{
|
||||
background: "#EEE4FC",
|
||||
@ -154,11 +154,11 @@ export default function InstallQzCode() {
|
||||
Код нужно вставить один раз. Изменения в самом quiz будут отображаться
|
||||
автоматически после сохранения.
|
||||
</Typography>
|
||||
<Typography>
|
||||
Для добавления нескольких quiz на одну страницу, код инициализации
|
||||
достаточно добавить один раз с любого quiz, а затем вставить кнопки
|
||||
открытия с нужных quiz
|
||||
</Typography>
|
||||
{/*<Typography>*/}
|
||||
{/* Для добавления нескольких quiz на одну страницу, код инициализации*/}
|
||||
{/* достаточно добавить один раз с любого quiz, а затем вставить кнопки*/}
|
||||
{/* открытия с нужных quiz*/}
|
||||
{/*</Typography>*/}
|
||||
</Box>
|
||||
</InstallQzOnSiteParent>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user