frontPanel/src/pages/InstallQuiz/InstallQzCode.tsx

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>
    )
}