diff --git a/src/App.jsx b/src/App.jsx index 8a9a479..8d40fb8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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() { }/> }/> }/> + }/> + }/> diff --git a/src/Components/Header/index.jsx b/src/Components/Header/index.jsx index 9bcc280..07e7579 100644 --- a/src/Components/Header/index.jsx +++ b/src/Components/Header/index.jsx @@ -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 ( -
+ <> + {(isAuth ? ( +
logo
- +
+ ) : + ( +
+
+
logo
+ +
+
+ )) + } + + + + ) } diff --git a/src/Components/Header/style.module.scss b/src/Components/Header/style.module.scss index 5fbb6be..f2959e3 100644 --- a/src/Components/Header/style.module.scss +++ b/src/Components/Header/style.module.scss @@ -35,5 +35,12 @@ font-style: normal; font-weight: 400; line-height: normal; + position: relative; + &_img { + + width: 55px; + margin-right: 40px; + height: 55px; + } } } \ No newline at end of file diff --git a/src/Components/HomePageAdmin/index.jsx b/src/Components/HomePageAdmin/index.jsx new file mode 100644 index 0000000..0026d6d --- /dev/null +++ b/src/Components/HomePageAdmin/index.jsx @@ -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 ( + <> + +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
100 мероприятий
+ +
+
+
+
+
+ + {/* */} + {/* */} + {/* */} +
+ + + + + + + + ) +} +export default HomePage; \ No newline at end of file diff --git a/src/Components/HomePageAdmin/style.module.scss b/src/Components/HomePageAdmin/style.module.scss new file mode 100644 index 0000000..e3e3ef5 --- /dev/null +++ b/src/Components/HomePageAdmin/style.module.scss @@ -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; +} diff --git a/src/Components/MeetAuthPageAdmin/index.jsx b/src/Components/MeetAuthPageAdmin/index.jsx new file mode 100644 index 0000000..09f329a --- /dev/null +++ b/src/Components/MeetAuthPageAdmin/index.jsx @@ -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 ( + <> + +
+ +
+
+ Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза» + Психология +
clock Онлайн
+
globe 22 декабря, с 10:00 до 22:00 по Московскому времени
+
+
+ +
+
+ +
+
+ + Ссылка на мероприятие + СКАЧАТЬ ВИДЕО +
+
+ Оставить вопрос + Оставьте вопрос первым +
+ +
+
+ +
+
О мероприятии
+
Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.
+
+
+
Специалист
+
+
+
avatar
+ +
+
Иванов Иван Иванович
+
Психолог, таролог
+
+7 (888) 888 - 88 - 88
+ exampl@ya.ru +
+ +
+
+
Ссылки на материалы специалиста
+
+ + + +
+ +
+
+ +
+
+
Комментарии
+
+
3 КОММЕНТАРИЯ
+
+
+ avatar + +
+
+ +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
avatar
+
+
+
Дмитрий Кирсанов
+
4 мая 1990, 00:00
+
+
+ Хорошее мероприятие, специалист знает свое дело +
+
+
+
+
+ +
+
+
Еще мероприятия
+ + + + + + + + + + + + + + + + + +
+
+ + + +
Вопросы
+
+
+
+
Всего 1
+
+
+
+
avatar Дмитрий Кирсанов
+
Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями.
+
+
4 мая 1990, 00:00
+
like 0
+
+ +
+
+
+
avatar Дмитрий Кирсанов
+ +
+ + +
+
+
+
+
+
+ + + ) + + +} +export default MeetPage; \ No newline at end of file diff --git a/src/Components/MeetAuthPageAdmin/style.module.scss b/src/Components/MeetAuthPageAdmin/style.module.scss new file mode 100644 index 0000000..c8b8b37 --- /dev/null +++ b/src/Components/MeetAuthPageAdmin/style.module.scss @@ -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; +} diff --git a/src/Components/UserHeader/index.jsx b/src/Components/UserHeader/index.jsx new file mode 100644 index 0000000..9bcc280 --- /dev/null +++ b/src/Components/UserHeader/index.jsx @@ -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 ( +
+
+
logo
+ +
+
+ ) + +} +export default Header; \ No newline at end of file diff --git a/src/Components/UserHeader/style.module.scss b/src/Components/UserHeader/style.module.scss new file mode 100644 index 0000000..5fbb6be --- /dev/null +++ b/src/Components/UserHeader/style.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/img/headerImg/Icon.png b/src/img/headerImg/Icon.png new file mode 100644 index 0000000..f7e2f95 Binary files /dev/null and b/src/img/headerImg/Icon.png differ diff --git a/src/img/headerImg/avatar.png b/src/img/headerImg/avatar.png new file mode 100644 index 0000000..18690b5 Binary files /dev/null and b/src/img/headerImg/avatar.png differ diff --git a/src/img/headerImg/google.png b/src/img/headerImg/google.png new file mode 100644 index 0000000..8f979cb Binary files /dev/null and b/src/img/headerImg/google.png differ diff --git a/src/img/headerImg/header.png b/src/img/headerImg/header.png new file mode 100644 index 0000000..caa4af6 Binary files /dev/null and b/src/img/headerImg/header.png differ