129 lines
6.6 KiB
TypeScript
129 lines
6.6 KiB
TypeScript
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
|
||
import {
|
||
Box, Button,
|
||
FormControl,
|
||
IconButton,
|
||
InputAdornment, Link,
|
||
OutlinedInput,
|
||
TextField,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
import CopyIcon from "@icons/CopyIcon";
|
||
import React from "react";
|
||
import InfoIcon from "@icons/InfoIcon";
|
||
|
||
|
||
export default function InstallQzCode() {
|
||
const theme = useTheme();
|
||
return(
|
||
<InstallQzOnSiteParent outerContainerSx={{flexDirection: "column"}}>
|
||
<Box sx={{display: "flex", justifyContent: "space-between"}}>
|
||
<Box sx={{ maxWidth: "520px", width: "100%", display: "flex", flexDirection: "column", gap: "20px"}}>
|
||
<Typography>1. Код инициализации</Typography>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Вставьте блок head в начале страницы</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": {
|
||
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"}}
|
||
>
|
||
<CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box sx={{ maxWidth: "520px", width: "100%", display: "flex", flexDirection: "column", gap: "20px"}}>
|
||
<Typography>2. Код кнопки</Typography>
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Установите код в то место, где должна быть кнопка открытия квиза</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}}>Введите полный адрес страницы, где вы установили квиз и нажмите "проверить"</Typography>
|
||
</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>
|
||
Код нужно вставить один раз. Изменения в самом квизе будут отображаться автоматически после сохранения.
|
||
</Typography>
|
||
<Typography>
|
||
Для добавления нескольких квизов на одну страницу, код инициализации достаточно добавить один раз с любого квиза,
|
||
а затем вставить кнопки открытия с нужных квизов
|
||
</Typography>
|
||
</Box>
|
||
</InstallQzOnSiteParent>
|
||
)
|
||
} |