дашборд - на ревью
This commit is contained in:
Nikolai
parent
cb28400c22
commit
9719012299
@ -1,259 +1,211 @@
|
||||
import * as React from "react";
|
||||
import { CssBaseline, Box, Typography, TextField, Checkbox, Button } from "@mui/material";
|
||||
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
|
||||
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
|
||||
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
|
||||
import theme from "../../theme";
|
||||
import Logo from "../Logo";
|
||||
|
||||
|
||||
const Authorization: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<Logo />
|
||||
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
height: "100vh",
|
||||
width: "100%"
|
||||
}}>
|
||||
<Typography variant="h5">
|
||||
Добро пожаловать
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Мы рады что вы выбрали нас!
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "135px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "350px",
|
||||
height: "700px",
|
||||
color: theme.palette.secondary.main,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
width: "100%",
|
||||
height: "65px"
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex"
|
||||
}}>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
PENA
|
||||
</Typography>
|
||||
<Typography
|
||||
variant = "subtitle2"
|
||||
sx = {{
|
||||
color: theme.palette.primary.main,
|
||||
backgroundColor: theme.palette.info.dark,
|
||||
borderRadius: "5px",
|
||||
margin: theme.spacing(0.5)
|
||||
}}
|
||||
>
|
||||
HUB
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%"
|
||||
}}>
|
||||
<Typography variant="h5">
|
||||
Добро пожаловать
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Мы рады что вы выбрали нас!
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "135px",
|
||||
|
||||
<Box sx={{
|
||||
width: "50px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
justifyContent: "center",
|
||||
alignItems: "left"
|
||||
}}>
|
||||
<EmailOutlinedIcon color="info" fontSize="large" />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "65px"
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
width: "50px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "left"
|
||||
}}>
|
||||
<EmailOutlinedIcon color="info" fontSize="large" />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<TextField
|
||||
id = "standard-basic"
|
||||
label = "Эл. почта"
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx = {{ width: "295px" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: theme.palette.secondary.main,
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "65px",
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
width: "50px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "left"
|
||||
}}>
|
||||
<LockOutlinedIcon color="info" fontSize="large" />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<TextField
|
||||
id = "outlined-password-input"
|
||||
label = "Пароль"
|
||||
type = "password"
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx = {{ width: "295px" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "75px"
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%"
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
width: "50px",
|
||||
height: "46px"
|
||||
}}>
|
||||
<Checkbox sx={{
|
||||
<TextField
|
||||
id = "standard-basic"
|
||||
label = "Эл. почта"
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx = {{ width: "295px" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: theme.palette.secondary.main,
|
||||
transform: "scale(1.5)",
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontWeight: "600"
|
||||
}}>
|
||||
Запомнить этот компьютер
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%"
|
||||
}}>
|
||||
|
||||
<Typography
|
||||
variant = "h4"
|
||||
sx={{
|
||||
color: theme.palette.info.main,
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
color: theme.palette.info.dark
|
||||
}
|
||||
}}>
|
||||
Забыли пароль?
|
||||
</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "82px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Typography
|
||||
variant = "h4">
|
||||
У вас нет аккаунта?
|
||||
</Typography>
|
||||
<Typography
|
||||
variant = "h4"
|
||||
sx={{
|
||||
color: theme.palette.info.main,
|
||||
borderBottom: `1px solid ${theme.palette.info.main}`,
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
color: theme.palette.info.dark
|
||||
}
|
||||
}}>
|
||||
Зарегистрируйтесь
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "65px",
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
width: "50px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "left"
|
||||
}}>
|
||||
<LockOutlinedIcon color="info" fontSize="large" />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<TextField
|
||||
id = "outlined-password-input"
|
||||
label = "Пароль"
|
||||
type = "password"
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx = {{ width: "295px" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "75px"
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%"
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
width: "50px",
|
||||
height: "46px"
|
||||
}}>
|
||||
<Checkbox sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
transform: "scale(1.5)",
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontWeight: "600"
|
||||
}}>
|
||||
Запомнить этот компьютер
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "100%"
|
||||
}}>
|
||||
|
||||
<Typography
|
||||
variant = "h4"
|
||||
sx={{
|
||||
color: theme.palette.info.main,
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
color: theme.palette.info.dark
|
||||
}
|
||||
}}>
|
||||
Забыли пароль?
|
||||
</Typography>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "82px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Typography
|
||||
variant = "h4">
|
||||
У вас нет аккаунта?
|
||||
</Typography>
|
||||
<Typography
|
||||
variant = "h4"
|
||||
sx={{
|
||||
color: theme.palette.info.main,
|
||||
borderBottom: `1px solid ${theme.palette.info.main}`,
|
||||
cursor: "pointer",
|
||||
"&:hover": {
|
||||
color: theme.palette.info.dark
|
||||
}
|
||||
}}>
|
||||
Зарегистрируйтесь
|
||||
</Typography>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
34
src/Components/CenterBox/index.tsx
Normal file
34
src/Components/CenterBox/index.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import * as React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import theme from "../../theme";
|
||||
import Authorization from "../Authorization";
|
||||
|
||||
|
||||
const CenterBox: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Box sx={{
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "350px",
|
||||
height: "700px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Authorization />
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default CenterBox;
|
||||
26
src/Components/Content/index.tsx
Normal file
26
src/Components/Content/index.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import * as React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import theme from "../../theme";
|
||||
import Users from "../Users";
|
||||
|
||||
|
||||
const Content: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
border: "1px solid purple"
|
||||
}}>
|
||||
хочу быть 100% высоты
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Content;
|
||||
65
src/Components/Header/index.tsx
Normal file
65
src/Components/Header/index.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import theme from "../../theme";
|
||||
import ExitToAppOutlinedIcon from '@mui/icons-material/ExitToAppOutlined';
|
||||
import Logo from "../Logo";
|
||||
|
||||
|
||||
const Header: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
borderBottom: "1px solid #45494c",
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "150px",
|
||||
display: "flex",
|
||||
justifyContent: "right",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Logo />
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex"
|
||||
}}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
width: "230px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontWeight: "normal"
|
||||
}}
|
||||
>
|
||||
Добро пожаловать, Администратор сервиса
|
||||
</Typography>
|
||||
|
||||
<Box sx={{
|
||||
width: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<ExitToAppOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.3)"
|
||||
}} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Header;
|
||||
36
src/Components/LoggedIn/index.tsx
Normal file
36
src/Components/LoggedIn/index.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import * as React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import theme from "../../theme";
|
||||
import Menu from "../Menu";
|
||||
import Header from "../Header";
|
||||
import Content from "../Content";
|
||||
|
||||
|
||||
const CenterBox: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
}}>
|
||||
<Menu />
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Header />
|
||||
<Content />
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default CenterBox;
|
||||
40
src/Components/Logo/index.tsx
Normal file
40
src/Components/Logo/index.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import theme from "../../theme";
|
||||
|
||||
|
||||
const Authorization: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Box sx={{
|
||||
display: "flex"
|
||||
}}>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
PENA
|
||||
</Typography>
|
||||
<Typography
|
||||
variant = "subtitle2"
|
||||
sx = {{
|
||||
width: "55px",
|
||||
color: theme.palette.primary.main,
|
||||
backgroundColor: theme.palette.info.dark,
|
||||
borderRadius: "5px",
|
||||
margin: theme.spacing(0.5)
|
||||
}}
|
||||
>
|
||||
HUB
|
||||
</Typography>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Authorization;
|
||||
155
src/Components/Menu/index.tsx
Normal file
155
src/Components/Menu/index.tsx
Normal file
@ -0,0 +1,155 @@
|
||||
import * as React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
|
||||
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
|
||||
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
||||
import BathtubOutlinedIcon from '@mui/icons-material/BathtubOutlined';
|
||||
import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined';
|
||||
import NaturePeopleOutlinedIcon from '@mui/icons-material/NaturePeopleOutlined';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import CameraIcon from '@mui/icons-material/Camera';
|
||||
import HeadsetMicOutlinedIcon from '@mui/icons-material/HeadsetMicOutlined';
|
||||
import theme from "../../theme";
|
||||
|
||||
|
||||
const Menu: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
width: "96px",
|
||||
height: "100vh",
|
||||
borderRight: "1px solid #45494c"
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<MenuOutlinedIcon sx={{
|
||||
transform: "scale(1.4)"
|
||||
}} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<PersonOutlineOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<SettingsOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<BathtubOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<AddPhotoAlternateOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<NaturePeopleOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<SettingsIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<CameraIcon sx={{
|
||||
transform: "scale(1.2)"
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
}}>
|
||||
<HeadsetMicOutlinedIcon sx={{
|
||||
color: theme.palette.info.main,
|
||||
transform: "scale(1.2)"
|
||||
}}/>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Menu;
|
||||
@ -1,201 +1,153 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
|
||||
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
|
||||
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
|
||||
import { Box, Typography, Button } from "@mui/material";
|
||||
import theme from "../../theme";
|
||||
import Logo from "../Logo";
|
||||
|
||||
|
||||
const Authorization: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Logo />
|
||||
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
height: "100vh",
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "350px",
|
||||
height: "700px",
|
||||
color: theme.palette.secondary.main,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex"
|
||||
}}>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
PENA
|
||||
</Typography>
|
||||
<Typography
|
||||
variant = "subtitle2"
|
||||
sx = {{
|
||||
color: theme.palette.primary.main,
|
||||
backgroundColor: theme.palette.info.dark,
|
||||
borderRadius: "5px",
|
||||
margin: theme.spacing(0.5)
|
||||
}}
|
||||
>
|
||||
HUB
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Все пользователи
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Общая статистика
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Шаблонизатор документов
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Конструктор опросов
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Сокращатель ссылок
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Все пользователи
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Общая статистика
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Шаблонизатор документов
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Конструктор опросов
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Box>
|
||||
<Typography variant="h6">
|
||||
Сокращатель ссылок
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
width: "100%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.primary.dark
|
||||
}
|
||||
}}>
|
||||
ВОЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
55
src/Components/Users/index.tsx
Normal file
55
src/Components/Users/index.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import theme from "../../theme";
|
||||
|
||||
|
||||
const Users: React.FC = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "60px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
border: "2px solid",
|
||||
fontWeight: "normal",
|
||||
borderColor: theme.palette.info.main
|
||||
}}>
|
||||
ИНФОРМАЦИЯ О ПРОЕКТЕ
|
||||
</Typography>
|
||||
|
||||
<Table sx={{
|
||||
width: "90%",
|
||||
color: theme.palette.secondary.main,
|
||||
border: "2px solid",
|
||||
borderColor: theme.palette.secondary.main
|
||||
}} aria-label="simple table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell sx={{ border: "1px solid red" }}>
|
||||
admin
|
||||
</TableCell>
|
||||
<TableCell sx={{ border: "1px solid red" }}>
|
||||
Администратор сервиса
|
||||
</TableCell>
|
||||
<TableCell sx={{ border: "1px solid red" }}>
|
||||
чек
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Users;
|
||||
@ -1,11 +1,11 @@
|
||||
import * as React from "react";
|
||||
// import * as ReactDOM from "react-dom";
|
||||
import Authorization from "./Components/Authorization";
|
||||
import Sections from "./Components/Sections";
|
||||
import { Box } from "@mui/material";
|
||||
import { ThemeProvider } from "@mui/material";
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import theme from "./theme";
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import LoggedIn from "./Components/LoggedIn";
|
||||
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container!);
|
||||
@ -13,7 +13,13 @@ root.render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Sections />
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.secondary.main,
|
||||
height: "100%"
|
||||
}}>
|
||||
<LoggedIn />
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
@ -31,7 +31,8 @@ const theme = createTheme({
|
||||
},
|
||||
subtitle2: {
|
||||
fontFamily: fontFamily,
|
||||
fontSize: 25
|
||||
fontSize: 25,
|
||||
textAlign: "center"
|
||||
},
|
||||
caption: {
|
||||
fontFamily: fontFamily,
|
||||
@ -46,7 +47,8 @@ const theme = createTheme({
|
||||
h6: {
|
||||
fontFamily: fontFamily,
|
||||
fontWeight: fontWeight,
|
||||
fontSize: 18
|
||||
fontSize: 18,
|
||||
textAlign: "center"
|
||||
},
|
||||
button: {
|
||||
fontFamily: fontFamily,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user