fdddd
This commit is contained in:
Vsevo;od
parent
bffd070793
commit
949e186112
@ -12,6 +12,8 @@ import HomePage from "./Components/HomePage/index.jsx";
|
||||
import MeetPage from "./Components/MeetPage/index.jsx";
|
||||
import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
|
||||
import ProfilePage from './Components/profilePage/index.jsx';
|
||||
import MeetAuthPageAdmin from './Components/MeetAuthPageAdmin/index.jsx'
|
||||
import HomeAuthPageAdmin from './Components/HomePageAdmin/index.jsx'
|
||||
|
||||
|
||||
function App() {
|
||||
@ -27,6 +29,8 @@ function App() {
|
||||
<Route path="/firstMeet" element={<MeetPage />}/>
|
||||
<Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
|
||||
<Route path='/profile' element={<ProfilePage />}/>
|
||||
<Route path='/adminMeets' element={<MeetAuthPageAdmin/>}/>
|
||||
<Route path='/admin' element={<HomeAuthPageAdmin/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
|
||||
@ -1,21 +1,45 @@
|
||||
|
||||
import styles from './style.module.scss';
|
||||
import logo from '../../img/headerImg/OgettoLogo.png';
|
||||
import logo from '../../img/headerImg/header.png';
|
||||
import google from '../../img/headerImg/google.png';
|
||||
import avatar from '../../img/headerImg/avatar.png';
|
||||
import icon from '../../img/headerImg/Icon.png';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
}
|
||||
const isAuth = useState(true)[0];
|
||||
console.log(isAuth)
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.header__container}>
|
||||
<>
|
||||
{(isAuth ? (
|
||||
<div className={styles.header__container}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||
<button className={styles.header__button}>ВХОД</button>
|
||||
<div className={styles.header_img_container}> <img className={styles.header_img} src={icon}></img> <img className={styles.header_img} src={avatar}></img></div>
|
||||
</header>
|
||||
</div>
|
||||
) :
|
||||
(
|
||||
<div className={styles.header__container}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||
<button className={styles.header__button}>ВХОД <img className={styles.header__button_img} src={google}></img></button>
|
||||
</header>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
@ -35,5 +35,12 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
&_img {
|
||||
|
||||
width: 55px;
|
||||
margin-right: 40px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
src/Components/HomePageAdmin/index.jsx
Normal file
80
src/Components/HomePageAdmin/index.jsx
Normal file
@ -0,0 +1,80 @@
|
||||
import Header from "../Header";
|
||||
import styles from "./style.module.scss";
|
||||
import TableMeets from '../TableMeets/TableMeets'
|
||||
import Home from "../Home/Home";
|
||||
// import FetchUtils from "../utils/FetchUtils";
|
||||
import EditForm from "../edit/EditForm";
|
||||
import PostForm from "../post/PostForm";
|
||||
|
||||
const APIURL = ''
|
||||
|
||||
// const events = [
|
||||
// {
|
||||
// id: 1,
|
||||
// date: '10.10.2022',
|
||||
// time: '14:00',
|
||||
// title: 'Мероприятие 1',
|
||||
// speaker: 'Спикер 1',
|
||||
// avatar: 'speaker1.jpg',
|
||||
// description: 'Описание мероприятия 1',
|
||||
// isExpanded: true,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// date: '11.10.2022',
|
||||
// time: '15:30',
|
||||
// title: 'Мероприятие 2',
|
||||
// speaker: 'Спикер 2',
|
||||
// avatar: 'speaker2.jpg',
|
||||
// description: 'Описание мероприятия 2',
|
||||
// isExpanded: true,
|
||||
// },
|
||||
// // Добавьте другие мероприятия сюда
|
||||
// ];
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
<section className={styles.muza__container}>
|
||||
|
||||
|
||||
</section>
|
||||
<section className={styles.meeting__container}>
|
||||
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.select__container}>
|
||||
<select className={styles.select} name="time__meeting">
|
||||
<option value="">Время мироприятия</option>
|
||||
</select>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.NewContainer}>
|
||||
<div className={styles.search_container}>
|
||||
<div className={styles.search__descr}>100 мероприятий</div>
|
||||
<select className={styles.select} name="type__meeting">
|
||||
<option value="">Тип мероприятия</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cards__container}>
|
||||
<div className={styles.card}></div>
|
||||
</div>
|
||||
<Home></Home>
|
||||
{/* <FetchUtils></FetchUtils> */}
|
||||
{/* <PostForm /> */}
|
||||
{/* <EditForm /> */}
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
export default HomePage;
|
||||
89
src/Components/HomePageAdmin/style.module.scss
Normal file
89
src/Components/HomePageAdmin/style.module.scss
Normal file
@ -0,0 +1,89 @@
|
||||
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.muza {
|
||||
&__container {
|
||||
height: 700px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-top: 150px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 143.016px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
&__descr {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
margin-top: 50px;
|
||||
margin-left: 70px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 46px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
.meeting {
|
||||
&__container {
|
||||
height: 1400px;
|
||||
}
|
||||
&__inputs {
|
||||
width: 90%;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #000;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.select {
|
||||
margin-right: 50px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 200px;
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.NewContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.search_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search__descr {
|
||||
margin-right: 25px;
|
||||
}
|
||||
263
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
263
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
@ -0,0 +1,263 @@
|
||||
import Header from "../Header";
|
||||
import styles from './style.module.scss';
|
||||
import clock from '../../img/MeetPage/Clock.png';
|
||||
import globe from '../../img/MeetPage/Globe.png';
|
||||
import avatar from '../../img/MeetPage/avatar.png';
|
||||
import like from '../../img/MeetPage/Facebook.png';
|
||||
import Card from "../Card";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||
import vk from '../../img/MeetPage/Vk.png';
|
||||
import tg from '../../img/MeetPage/Telegram.png';
|
||||
import book from '../../img/MeetPage/Book.png';
|
||||
import * as React from 'react';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: "56%",
|
||||
height: "80vh",
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: '25px',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
const MeetPage = () => {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<section className={styles.meets}>
|
||||
<div className={styles.meets__mainInfo_container}>
|
||||
<span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
|
||||
<span className={styles.meets__mainInfo_type}>Психология</span>
|
||||
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||
</div>
|
||||
<div className={styles.meets__img}></div>
|
||||
|
||||
</section>
|
||||
<div className={styles.container}>
|
||||
|
||||
<div className={styles.meets__otziv_container}>
|
||||
<div className={styles.newMeeting__container}>
|
||||
<button className={styles.newMeeting__button}>ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</button>
|
||||
<a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
|
||||
<a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
|
||||
</div>
|
||||
<div onClick={handleOpen} className={styles.meets__otziv}>
|
||||
<span className={styles.meets__otziv_title}>Оставить вопрос</span>
|
||||
Оставьте вопрос первым
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className={styles.aboutMeet}>
|
||||
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
|
||||
</section>
|
||||
<section className={styles.expert}>
|
||||
<div className={styles.expert__title}>Специалист</div>
|
||||
<div className={styles.newContainer}>
|
||||
<div className={styles.expert__container}>
|
||||
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
|
||||
|
||||
<div className={styles.expert__descr_container}>
|
||||
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
|
||||
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
|
||||
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
|
||||
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className={styles.container__links}>
|
||||
<div className={styles.links__title}>Ссылки на материалы специалиста</div>
|
||||
<div className={styles.links__img_container}>
|
||||
<a href="#"><img src={vk} className={styles.links__img}></img></a>
|
||||
<a href="#"><img src={tg} className={styles.links__img}></img></a>
|
||||
<a href="#"><img src={book} className={styles.links__img}></img></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section className={styles.comments}>
|
||||
<div className={styles.comments__title}>Комментарии</div>
|
||||
<div className={styles.newInputContainer}>
|
||||
<div className={styles.comments__number}>3 КОММЕНТАРИЯ</div>
|
||||
<div className={styles.comments__input_container}>
|
||||
<div className={styles.comments__input_img_container}>
|
||||
<img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
|
||||
<textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
|
||||
</div>
|
||||
<div className={styles.comments__button_container}>
|
||||
<button className={styles.comments__button}>ОТПРАВИТЬ</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.comments__all_container}>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__container}>
|
||||
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||
<div className={styles.oneComment__descr_container}>
|
||||
<div className={styles.oneComment__descr_title_container}>
|
||||
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||
</div>
|
||||
<div className={styles.oneComment__descr}>
|
||||
Хорошее мероприятие, специалист знает свое дело
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section className={styles.someMeetings}>
|
||||
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
<Grid item xs={6} md={4} lg={3} >
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Box>
|
||||
</section>
|
||||
<div>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<div className={styles.modal__title}>Вопросы</div>
|
||||
<div onClick={handleClose} className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
|
||||
<div className={styles.modal__line}></div>
|
||||
<div className={styles.modal__question_number}>Всего <span>1</span></div>
|
||||
<div className={styles.modal__question_container}>
|
||||
<div className={styles.modal__question_containerSecond}>
|
||||
<div className={styles.modal__question_user}>
|
||||
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||
<div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
|
||||
<div className={styles.modal__question_time_container}>
|
||||
<div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
|
||||
<div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.modal__question_containerThird}>
|
||||
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||
<textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
|
||||
<div className={styles.modal__question_button_container}>
|
||||
<button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
|
||||
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export default MeetPage;
|
||||
595
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
595
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
@ -0,0 +1,595 @@
|
||||
.meets {
|
||||
margin-top: 150px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&__img {
|
||||
width: 44%;
|
||||
height: 300px;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&__mainInfo {
|
||||
&_container {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: start;
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
&_type {
|
||||
display: flex;
|
||||
margin-top: 25px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_text, #888);
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--gray_text, #888);
|
||||
font-family: Montserrat;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_status {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&_time {
|
||||
margin-top: 40px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
&_status_img {
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
&__otziv {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300px;
|
||||
width: 44%;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
&_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 4px;
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.aboutMeet {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__descr {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.90);
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 110%; /* 27.6px */
|
||||
}
|
||||
|
||||
}
|
||||
.expert {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__img {
|
||||
border-radius: 10000px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.expert {
|
||||
|
||||
|
||||
&__container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
&__img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
&_container {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
&__descr {
|
||||
|
||||
|
||||
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
&_fullname {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 36px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&_speciality {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&_phone {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 16px;
|
||||
}
|
||||
&_email {
|
||||
color: #2C41FF;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.someMeetings {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
}
|
||||
.cards_container {
|
||||
display: flex;
|
||||
}
|
||||
.newMeeting {
|
||||
&__container {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&__button {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
border-radius: 10px;
|
||||
background: var(--yellow, #FFED00);
|
||||
height: 80px;
|
||||
width: 450px;
|
||||
}
|
||||
&__link {
|
||||
margin-top: 30px;
|
||||
color: #2C41FF;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
&__ling_video {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 140px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.newContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container__links {
|
||||
width: 40%;
|
||||
}
|
||||
.links {
|
||||
|
||||
&__title {
|
||||
margin-top: 128px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
&__img {
|
||||
margin-right: 10px;
|
||||
|
||||
&_container {
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expert {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__img {
|
||||
border-radius: 10000px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.yellowSpan {
|
||||
color: #FD0
|
||||
}
|
||||
.comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 200px;
|
||||
&__title {
|
||||
display: flex;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 56px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__number {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
background: #FFF;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
padding-left: 20px;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding-left: 30px;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
padding-top: 30px;
|
||||
&_img {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
&_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&_img_container {
|
||||
display: flex;
|
||||
margin-top: 60px;
|
||||
}
|
||||
&_img {
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
.newInputContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&__number {
|
||||
display: flex;
|
||||
margin-top: 60px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__button {
|
||||
border-radius: 5.833px;
|
||||
background: var(--yellow, #FD0);
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
margin-top: 35px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&__all_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 500px;
|
||||
margin-top: 50px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.oneComment {
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
margin-top: 70px;
|
||||
}
|
||||
&__img {
|
||||
margin-right: 50px;
|
||||
}
|
||||
&__descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 20px;
|
||||
&_title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-right: 12px;
|
||||
&_container {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
color: var(--gray_text, #888);
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
&__container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 5000px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
&__title {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
&__line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
stroke-width: 1px;
|
||||
background-color: #D0D2D8;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
height: 96px;
|
||||
height: 45px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 58.625px;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
line-height: normal;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
}
|
||||
&__question {
|
||||
&_number {
|
||||
margin-top: 50px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
span {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_container {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&_containerSecond {
|
||||
width: 48%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
&_user {
|
||||
&_img {
|
||||
margin-right: 25px;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
&_descr {
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
&_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&_like {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px 0 0 10px;
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
&_input {
|
||||
margin-top: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||
width: 100%;
|
||||
height: 235px;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&_containerThird {
|
||||
margin-right: 3%;
|
||||
}
|
||||
&_button {
|
||||
&_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yellow {
|
||||
border-radius: 10px;
|
||||
background-color: #FD0;
|
||||
width: 190px;
|
||||
height: 50px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.gray {
|
||||
border-radius: 10px;
|
||||
background: var(--gray_stroke, #D0D2D8);
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
}
|
||||
22
src/Components/UserHeader/index.jsx
Normal file
22
src/Components/UserHeader/index.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
import styles from './style.module.scss';
|
||||
import logo from '../../img/headerImg/OgettoLogo.png';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Header = () => {
|
||||
const navigate = useNavigate();
|
||||
const handleHome = () => {
|
||||
navigate('/');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.header__container}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||
<button className={styles.header__button}>ВХОД</button>
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
export default Header;
|
||||
39
src/Components/UserHeader/style.module.scss
Normal file
39
src/Components/UserHeader/style.module.scss
Normal file
@ -0,0 +1,39 @@
|
||||
|
||||
|
||||
.header {
|
||||
height: 75px;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
background-color: #fff;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
&__logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: #FFED00;
|
||||
width: 200px;
|
||||
height: 42px;
|
||||
color: #000;
|
||||
font-family: Montserrat;
|
||||
font-size: 25px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
BIN
src/img/headerImg/Icon.png
Normal file
BIN
src/img/headerImg/Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1016 B |
BIN
src/img/headerImg/avatar.png
Normal file
BIN
src/img/headerImg/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/img/headerImg/google.png
Normal file
BIN
src/img/headerImg/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
BIN
src/img/headerImg/header.png
Normal file
BIN
src/img/headerImg/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Loading…
x
Reference in New Issue
Block a user