d
This commit is contained in:
		| @@ -16,7 +16,7 @@ | ||||
|         top: 0px; | ||||
|         background-color: #fff; | ||||
|         left: 0px; | ||||
|         z-index: 10; | ||||
|         z-index: 20; | ||||
|     } | ||||
|     &__logo { | ||||
|         cursor: pointer; | ||||
|   | ||||
| @@ -5,7 +5,8 @@ import TableMeets from '../TableMeets/TableMeets' | ||||
| // import FetchUtils from "../utils/FetchUtils"; | ||||
| // import EditForm from "../edit/EditForm"; | ||||
| // import PostForm from "../post/PostForm"; | ||||
|  | ||||
| // import GetMeets from '../get/Meets'; | ||||
| import { useNavigate } from "react-router-dom"; | ||||
| const APIURL = '' | ||||
|  | ||||
| // const events = [ | ||||
| @@ -32,12 +33,16 @@ const APIURL = '' | ||||
| //     // Добавьте другие мероприятия сюда | ||||
| //   ]; | ||||
| const HomePage = () => { | ||||
|     const navigate = useNavigate(); | ||||
|     const handleMeet = () => { | ||||
|         navigate('/adminMeets'); | ||||
|     } | ||||
|     return ( | ||||
|     <> | ||||
|  | ||||
|         <Header></Header> | ||||
|         <section className={styles.muza__container}> | ||||
|             | ||||
|            <button onClick={handleMeet} className={styles.muza__container_button}>Создать мероприятие</button> | ||||
|              | ||||
|         </section> | ||||
|         <section className={styles.meeting__container}> | ||||
|   | ||||
| @@ -5,11 +5,24 @@ | ||||
| } | ||||
| .muza { | ||||
|     &__container { | ||||
|         height: 700px; | ||||
|         height: 400px; | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         flex-direction: column; | ||||
|         width: 100%; | ||||
|         &_button { | ||||
|             margin-top: 200px; | ||||
|             border-radius: 15px; | ||||
|             background: var(--linear, #FD0); | ||||
|             width: 60%; | ||||
|             height: 130px; | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 40px; | ||||
|             font-style: normal; | ||||
|             font-weight: 400; | ||||
|             line-height: normal; | ||||
|         } | ||||
|     } | ||||
|     | ||||
|     &__title { | ||||
|   | ||||
| @@ -14,6 +14,7 @@ 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'; | ||||
| import newAvatarSecond from '../../img/AddUsers/newAvatar.png'; | ||||
|  | ||||
| const style = { | ||||
|   position: 'absolute', | ||||
| @@ -41,219 +42,77 @@ const MeetPage = () => { | ||||
|  | ||||
|             <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> | ||||
|                     <input placeholder="Ввести название мероприятия" className={styles.meets__mainInfo_descr}></input> | ||||
|                     <input placeholder='Тип мероприятия' className={styles.meets__mainInfo_type}></input> | ||||
|                     <div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <input className={styles.time_input} placeholder="Время миропириятия" ></input> </div> | ||||
|                     <div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <input className={styles.status_input} placeholder='Дата проведения'></input> </div> | ||||
|                 </div> | ||||
|                 <div className={styles.meets__img}></div> | ||||
|                 | ||||
|                         <form className={styles.addModal_form} method="post" encType="multipart/form-data"> | ||||
|                                     <div className={styles.input_file_row}> | ||||
|                                         <label className={styles.input_file}> | ||||
|                                             <input type="file" name="file[]" multiple accept="image/*"/>	 | ||||
|                                             <div className={styles.addUser__card_container_new}> | ||||
|                                                 <div className={styles.round}>+</div> | ||||
|                                                 <div className={styles.addUser__card_text}>Добавить пользователя</div> | ||||
|                                             </div> | ||||
|                                         </label> | ||||
|                                         <div className={styles.input_file_list}></div>   | ||||
|                                     </div> | ||||
|                                 </form> | ||||
|                  | ||||
|             </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> | ||||
|                         Оставьте вопрос первым | ||||
|                          | ||||
|                         <input placeholder="Ссылка на мероприятие" className={styles.newMeeting__link}></input> | ||||
|                         <input placeholder="Добавить ссылку на видео" className={styles.newMeeting__link_video}></input> | ||||
|                     </div> | ||||
|                      | ||||
|                      | ||||
|                 </div> | ||||
|             </div> | ||||
|             | ||||
|             <section className={styles.aboutMeet}> | ||||
|                 <div className={styles.aboutMeet__title}>О мероприятии</div> | ||||
|                 <div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div> | ||||
|                 <textarea placeholder="Написать описание мероприятия" style={{marginTop: '50px'}} className={styles.comments__input}></textarea> | ||||
|             </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 className={styles.addModal_user_container}> | ||||
|                                 <div className={styles.addModal_user_img_container}> | ||||
|                                 <form className={styles.addModal_form} method="post" encType="multipart/form-data"> | ||||
|                                     <div className={styles.input_file_row}> | ||||
|                                         <label className={styles.input_file}> | ||||
|                                             <input type="file" name="file[]" multiple accept="image/*"/>	 | ||||
|                                             <span><img src={newAvatarSecond}></img></span> | ||||
|                                         </label> | ||||
|                                         <div className={styles.input_file_list}></div>   | ||||
|                                     </div> | ||||
|                                 </form> | ||||
|                                 </div> | ||||
|                                 <div className={styles.addModal_user_input_container}> | ||||
|                                     <input placeholder='ФИО специалиста' className={styles.addModal_user}></input> | ||||
|                                     <input placeholder='Должность' className={styles.addModal_user}></input> | ||||
|                                     <select className={styles.addModal_user_select}> | ||||
|                                         <option>Пользователь</option> | ||||
|                                         <option>Администратор</option> | ||||
|                                     </select> | ||||
|                                     <input placeholder='Почта' className={styles.addModal_user}></input> | ||||
|                                     <input placeholder='Номер телефона' className={styles.addModal_user}></input> | ||||
|                                     | ||||
|                                 </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> | ||||
|                                  | ||||
|                 </div> | ||||
|                 <div className={styles.btn_contain}> | ||||
|                     <button className={styles.newMeeting__button}>Опубликовать мероприятие</button> | ||||
|                 </div> | ||||
|                 | ||||
|                  | ||||
|             </section> | ||||
|              | ||||
|         </> | ||||
|          | ||||
|     ) | ||||
|   | ||||
| @@ -23,13 +23,14 @@ | ||||
|             font-weight: 600; | ||||
|             line-height: normal; | ||||
|             text-align: left; | ||||
|             padding-left: 20px; | ||||
|         } | ||||
|         &_type { | ||||
|             display: flex; | ||||
|             margin-top: 25px; | ||||
|             border-radius: 10px; | ||||
|             border: 1px solid var(--gray_text, #888); | ||||
|             width: 110px; | ||||
|             width: 150px; | ||||
|             height: 35px; | ||||
|             justify-content: center; | ||||
|             align-items: center; | ||||
| @@ -39,6 +40,7 @@ | ||||
|             font-style: normal; | ||||
|             font-weight: 400; | ||||
|             line-height: normal; | ||||
|             padding-left: 20px; | ||||
|         } | ||||
|         &_status { | ||||
|             margin-top: 40px; | ||||
| @@ -238,23 +240,30 @@ | ||||
|     } | ||||
|     &__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; | ||||
|         width: 400px; | ||||
|         height: 80px; | ||||
|         border-radius: 10px; | ||||
|         border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|         padding-left: 20px; | ||||
|     } | ||||
|     &__link_video { | ||||
|         font-family: Montserrat; | ||||
|         font-size: 22px; | ||||
|         font-style: normal; | ||||
|         font-weight: 400; | ||||
|         line-height: normal; | ||||
|         border-radius: 10px; | ||||
|         border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|         width: 400px; | ||||
|         margin-top: 150px; | ||||
|         height: 50px; | ||||
|         padding-left: 20px; | ||||
|     } | ||||
| } | ||||
| .newContainer { | ||||
| @@ -513,6 +522,7 @@ | ||||
|             position: relative; | ||||
|         } | ||||
|         &_user { | ||||
|              | ||||
|             &_img { | ||||
|                 margin-right: 25px; | ||||
|                 &_container { | ||||
| @@ -593,3 +603,570 @@ | ||||
|     width: 140px; | ||||
|     height: 40px; | ||||
| } | ||||
| .time_input { | ||||
|     border-radius: 10px; | ||||
|     border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|     padding-left: 20px; | ||||
| } | ||||
| .status_input { | ||||
|     border-radius: 10px; | ||||
|     border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|     padding-left: 20px; | ||||
| } | ||||
| .select { | ||||
|     margin-right: 50px; | ||||
|     height: 35px; | ||||
|     border-radius: 10px; | ||||
|     border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|     width: 200px; | ||||
|     padding-left: 10px; | ||||
|     option { | ||||
|         padding-left: 10px; | ||||
|     } | ||||
|     &__container { | ||||
|         display: flex; | ||||
|         width: 93%; | ||||
|         margin-top: 30px; | ||||
|     } | ||||
|    } | ||||
| .addUsers { | ||||
|  | ||||
|     | ||||
|     &__search { | ||||
|         margin-top: 150px; | ||||
|         border-radius: 10px; | ||||
|         border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|         height: 70px; | ||||
|         width: 100%; | ||||
|         font-family: Montserrat; | ||||
|         font-size: 22px; | ||||
|         font-style: normal; | ||||
|         font-weight: 400; | ||||
|         line-height: normal; | ||||
|         padding-left: 40px; | ||||
|     } | ||||
| } | ||||
| .profile { | ||||
|     &__container { | ||||
|         margin-top: 200px; | ||||
|         display: flex; | ||||
|         justify-content: space-between; | ||||
|          | ||||
|  | ||||
|     } | ||||
|     &__user { | ||||
|         &_img { | ||||
|             width: 180px; | ||||
|             height: 180px; | ||||
|             &_container { | ||||
|                 display: flex; | ||||
|                 flex-direction: column; | ||||
|                 margin-right: 50px; | ||||
|                  | ||||
|                  | ||||
|             } | ||||
|         } | ||||
|         &_container { | ||||
|             display: flex; | ||||
|             width: 48%; | ||||
|             margin-bottom: 110px; | ||||
|             position: relative; | ||||
|         } | ||||
|         &_info_container { | ||||
|             text-align: left; | ||||
|             margin-top: 18px; | ||||
|             display: flex; | ||||
|             text-align: left; | ||||
|             flex-direction: column; | ||||
|         } | ||||
|         &_fullName { | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 26px; | ||||
|             font-style: normal; | ||||
|             font-weight: 600; | ||||
|             line-height: normal; | ||||
|                 span { | ||||
|                     color: #FD0; | ||||
|                 } | ||||
|              | ||||
|         } | ||||
|         &_spaciality { | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 22px; | ||||
|             font-style: normal; | ||||
|             font-weight: 400; | ||||
|             line-height: normal; | ||||
|             margin-top: 25px; | ||||
|         } | ||||
|         &_socialMedia { | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 18px; | ||||
|             font-style: normal; | ||||
|             font-weight: 400; | ||||
|             line-height: normal; | ||||
|             margin-top: 25px; | ||||
|         } | ||||
|         &_email { | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 18px; | ||||
|             font-style: normal; | ||||
|             font-weight: 400; | ||||
|             line-height: normal; | ||||
|             margin-top: 25px; | ||||
|         } | ||||
|         &_role { | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 24px; | ||||
|             font-style: normal; | ||||
|             font-weight: 600; | ||||
|             line-height: normal; | ||||
|             margin-top: 20px; | ||||
|         } | ||||
|         &_progress { | ||||
|             &_container { | ||||
|                 display: flex; | ||||
|                 justify-content: center; | ||||
|                 align-items: center; | ||||
|                 margin-top: 20px; | ||||
|             } | ||||
|             &_line { | ||||
|                 height: 2px; | ||||
|                 width: 140%; | ||||
|                 background: linear-gradient(90deg, #ffdd00,#d0d2d8); | ||||
|                 padding: 0 30px 0 30px; | ||||
|                 margin: 0 10px 0 10px; | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| } | ||||
| .addUser { | ||||
|  | ||||
|  | ||||
|     &__cards_container { | ||||
|         display: flex; | ||||
|         justify-content: space-between; | ||||
|         margin-top: 120px; | ||||
|         flex-wrap: wrap; | ||||
|          | ||||
|     } | ||||
|     &__card { | ||||
|  | ||||
|  | ||||
|         &_container { | ||||
|             display: flex; | ||||
|             justify-content: center; | ||||
|             align-items: center; | ||||
|             flex-direction: column; | ||||
|             width: 48%; | ||||
|             border-radius: 10px; | ||||
|             border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|             margin-bottom: 110px; | ||||
|         } | ||||
|         &_text { | ||||
|             color: #000; | ||||
|             font-family: Montserrat; | ||||
|             font-size: 24px; | ||||
|             font-style: normal; | ||||
|             font-weight: 400; | ||||
|             line-height: normal; | ||||
|             margin-top: 34px; | ||||
|         } | ||||
|     } | ||||
| } | ||||
| .round { | ||||
|     cursor: pointer; | ||||
|     border-radius: 80%; | ||||
|     height: 50px; | ||||
|     border: 1px solid var(--yellow, #FD0); | ||||
|     background: var(--yellow, #FD0); | ||||
|     width: 50px; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     color: #000; | ||||
|     font-family: Montserrat; | ||||
|     font-size: 36px; | ||||
|     font-style: normal; | ||||
|     font-weight: 400; | ||||
|     line-height: normal; | ||||
| } | ||||
| .feautures { | ||||
|     width: 90px; | ||||
|     position: absolute; | ||||
|     right: 0px; | ||||
|     bottom: 40px; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     font-family: Montserrat; | ||||
|     align-items: center; | ||||
|     color: #60AD1E; | ||||
|     font-family: Montserrat; | ||||
|     font-size: 16px; | ||||
|     font-style: normal; | ||||
|     font-weight: 400; | ||||
|     line-height: normal; | ||||
|     background: #E7FFD2; | ||||
|     height: 15px; | ||||
|     padding: 10px; | ||||
|     } | ||||
|     .permission { | ||||
|  | ||||
|  | ||||
|         &_container { | ||||
|             width: 40px; | ||||
|             height: 40px; | ||||
|             position: absolute; | ||||
|             right: 0px; | ||||
|             bottom: 40px; | ||||
|         } | ||||
|         &_img { | ||||
|             height: 100%; | ||||
|             width: 100%; | ||||
|         } | ||||
|     } | ||||
|     .delete { | ||||
|  | ||||
|  | ||||
|         &_container { | ||||
|             width: 40px; | ||||
|             height: 40px; | ||||
|             position: absolute; | ||||
|             top: 40px; | ||||
|             right: 0px; | ||||
|         } | ||||
|         &_img { | ||||
|             height: 100%; | ||||
|             width: 100%; | ||||
|         } | ||||
|     } | ||||
| .addModal { | ||||
|  | ||||
|  | ||||
|     &__close { | ||||
|         cursor: pointer; | ||||
|         transform: rotate(-45deg); | ||||
|         position: absolute; | ||||
|         height: 96px; | ||||
|         height: 45px; | ||||
|         color: #000; | ||||
|         font-family: Montserrat; | ||||
|         font-size: 78.625px; | ||||
|         font-style: normal; | ||||
|         font-weight: 200; | ||||
|         line-height: normal; | ||||
|         top: 13px; | ||||
|         right: 50px; | ||||
|     } | ||||
|     &__title { | ||||
|         color: #000; | ||||
|         font-family: Montserrat; | ||||
|         font-size: 36px; | ||||
|         font-style: normal; | ||||
|         font-weight: 400; | ||||
|         line-height: normal; | ||||
|     } | ||||
|     &_form { | ||||
|         margin-top: 100px; | ||||
|         height: 100%; | ||||
|         width: 30%; | ||||
|     } | ||||
|     &_user { | ||||
|         border-radius: 7.794px; | ||||
|         border: 0.779px solid var(--gray_stroke, #D0D2D8); | ||||
|         height: 35px; | ||||
|         width: 200px; | ||||
|         margin-bottom: 12px; | ||||
|         text-align: center; | ||||
|         &_select  { | ||||
|             border-radius: 7.794px; | ||||
|             border: 0.779px solid var(--gray_stroke, #D0D2D8); | ||||
|             height: 40px; | ||||
|             width: 210px; | ||||
|             margin-bottom: 12px; | ||||
|             display: flex; | ||||
|             justify-content: center; | ||||
|             align-items: center; | ||||
|             text-align: center; | ||||
|         } | ||||
|         &_input_container { | ||||
|             justify-content: center; | ||||
|             align-items: center; | ||||
|             display: flex; | ||||
|             flex-direction: column; | ||||
|             margin-top: 100px; | ||||
|             margin-left: 10%; | ||||
|         } | ||||
|         &_container { | ||||
|             height: 96%; | ||||
|              | ||||
|             display: flex; | ||||
|             align-items: start; | ||||
|         } | ||||
|     } | ||||
|  | ||||
| } | ||||
| .input_file_row { | ||||
| 	display: inline-block; | ||||
|     height: 100%; | ||||
|  | ||||
| } | ||||
| .input_file { | ||||
| 	position: relative; | ||||
| 	display: inline-block; | ||||
| } | ||||
| .addUser__card_container_new { | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     flex-direction: column; | ||||
|     width: 48%; | ||||
|     border-radius: 10px; | ||||
|     border: 1px solid var(--gray_stroke, #D0D2D8); | ||||
|     margin-bottom: 110px; | ||||
|     width: 100%; | ||||
| } | ||||
| .input_file span { | ||||
|     margin-top: 159px; | ||||
|     padding-top: 200px; | ||||
|     width: 200px; | ||||
|     position: relative; | ||||
| 	display: inline-block; | ||||
| 	cursor: pointer; | ||||
| 	outline: none; | ||||
| 	text-decoration: none; | ||||
| 	font-size: 14px; | ||||
| 	vertical-align: middle; | ||||
| 	color: rgb(255 255 255); | ||||
| 	text-align: center; | ||||
| 	border-radius: 4px; | ||||
| 	line-height: 22px; | ||||
| 	height: 40px; | ||||
| 	padding: 10px 20px; | ||||
| 	box-sizing: border-box; | ||||
| 	border: none; | ||||
| 	margin: 0; | ||||
| 	transition: background-color 0.2s; | ||||
| } | ||||
| .input_file input[type=file] { | ||||
| 	position: absolute; | ||||
| 	z-index: -1; | ||||
| 	opacity: 0; | ||||
| 	display: block; | ||||
| 	width: 0; | ||||
| 	height: 0; | ||||
| } | ||||
|   | ||||
| /* Focus */ | ||||
| // .input_file input[type=file]:focus + span { | ||||
| // 	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); | ||||
| // } | ||||
|   | ||||
| /* Hover/active */ | ||||
|  | ||||
|   | ||||
| /* Disabled */ | ||||
|  | ||||
|   | ||||
| /* Список c превью */ | ||||
| .input_file_list { | ||||
| 	padding: 10px 0; | ||||
| } | ||||
| .input_file_list_item { | ||||
| 	display: inline-block; | ||||
| 	margin: 0 15px 15px; | ||||
| 	width: 150px; | ||||
| 	vertical-align: top; | ||||
| 	position: relative; | ||||
| } | ||||
| .input_file_list_item img { | ||||
| 	width: 150px; | ||||
| } | ||||
| .input_file_list_name { | ||||
| 	text-align: center; | ||||
| 	display: block; | ||||
| 	font-size: 12px; | ||||
| 	text-overflow: ellipsis; | ||||
| 	overflow: hidden; | ||||
| } | ||||
| .input_file_list_remove { | ||||
| 	color: #fff; | ||||
| 	text-decoration: none; | ||||
| 	display: inline-block; | ||||
| 	position: absolute; | ||||
| 	padding: 0; | ||||
| 	margin: 0; | ||||
| 	top: 5px; | ||||
| 	right: 5px; | ||||
| 	background: #ff0202; | ||||
| 	width: 16px; | ||||
| 	height: 16px; | ||||
| 	text-align: center; | ||||
| 	line-height: 16px; | ||||
| 	border-radius: 50%; | ||||
| } | ||||
| .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: #60AD1E; | ||||
|     width: 190px; | ||||
|     height: 50px; | ||||
|     margin-right: 30px; | ||||
| } | ||||
| .gray { | ||||
|     border-radius: 10px; | ||||
|     background: var(--gray_stroke, #D0D2D8); | ||||
|     width: 140px; | ||||
|     height: 40px; | ||||
| } | ||||
| .btn_contain { | ||||
|     margin-top: 40px; | ||||
|     margin-bottom: 30px; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
| } | ||||
| @@ -1,5 +1,5 @@ | ||||
| import React from 'react'; | ||||
| import './style.css' | ||||
|  | ||||
| import styled from 'styled-components'; | ||||
| // import { HttpApiMethods } from '../utils/FetchUtils'; | ||||
| import {useState} from 'react' | ||||
| @@ -7,6 +7,9 @@ import EditMeetsForm from '../edit/EditMeetsForm'; | ||||
| import Grid from '@mui/material/Grid'; | ||||
| // import Card from '../Card'; | ||||
| import Box from '@mui/material/Box'; | ||||
| import { HttpApiMethods } from '../utils/FetchUtils'; | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user