CyberBloom/OgeetoCaseCyberGarden
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Vsevo;od
2023-12-24 00:00:48 +03:00
parent a08d4d3cdf
commit d344619507
14 changed files with 621 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/Components/AddUsersPage/index.jsx Normal file
View File

@ -0,0 +1,52 @@
import styles from './style.module.scss';
import avatar from '../../img/profilePage/avatar.png';
import Header from '../Header';
const AddUsers = () => {
return (
<>
<Header></Header>
<section className={styles.addUsers__container}>
<input className={styles.addUsers__search} type='text' placeholder='Найти мероприятие'></input>
<div className={styles.select__container}>
<select className={styles.select} name="time__meeting">
<option value="">роль пользователя</option>
</select>
</div>
<div className={styles.addUser__container}>
<div className={styles.addUser__cards_container}>
<div className={styles.addUser__card_container}>
<div className={styles.round}>+</div>
<div className={styles.addUser__card_text}>Добавить пользователя</div>
</div>
<div className={styles.profile__user_container}>
<div className={styles.profile__user_img_container}>
<img src={avatar} className={styles.profile__user_img}></img>
<div className={styles.profile__user_role}>Участник</div>
</div>
<div className={styles.profile__user_info_container}>
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
<div className={styles.profile__user_email}>gmail@gmail.com</div>
<div className={styles.profile__user_progress_container}>
<span>0</span>
<span className={styles.profile__user_progress_line}></span>
<span>1</span>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default AddUsers;

171
src/Components/AddUsersPage/style.module.scss Normal file
View File

@ -0,0 +1,171 @@
.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 {
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 {
&_container {
display: flex;
flex-direction: column;
margin-right: 50px;
}
}
&_container {
display: flex;
width: 50%;
}
&_info_container {
text-align: left;
margin-top: 20px;
display: flex;
text-align: left;
flex-direction: column;
}
&_fullName {
color: #000;
font-family: Montserrat;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: normal;
span {
color: #FD0;
}
}
&_spaciality {
color: #000;
font-family: Montserrat;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 25px;
}
&_socialMedia {
color: #000;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 25px;
}
&_email {
color: #000;
font-family: Montserrat;
font-size: 20px;
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;
}
&__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);
}
&_text {
color: #000;
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 34px;
}
}
}
.round {
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;
}

1
src/Components/BeingPage/style.module.css Normal file
View File

@ -0,0 +1 @@
/*# sourceMappingURL=style.module.css.map */

1
src/Components/BeingPage/style.module.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"style.module.css"}

16
src/Components/Calendar/index.jsx Normal file
View File

@ -0,0 +1,16 @@
import * as React from 'react';
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
export default function DateCalendarFormProps() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateCalendar']}>
<DateCalendar defaultValue={dayjs('2023-12-24')} readOnly />
</DemoContainer>
</LocalizationProvider>
);
}

73
src/Components/Card/style.module.css Normal file
View File

@ -0,0 +1,73 @@
.event_card {
width: 292px;
height: 626px;
flex-shrink: 0;
margin-top: 100px;
}
.wrapp {
display: flex;
justify-content: flex-start;
/* max-width: 1521px; */
}
:root {
text-align: left;
}
.event-card_date {
color: var(--gray_text, #888);
/* title */
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.event-card__photo {
width: 292px;
height: 340px;
flex-shrink: 0;
background: #D9D9D9;
margin-bottom: 26px;
}
.event-card_title {
color: #000;
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.feautures {
display: flex;
justify-content: center;
font-family: Montserrat;
align-items: center;
font-size: 8px;
font-style: normal;
font-weight: 400;
line-height: normal;
border-radius: 10px;
background: #E7FFD2;
height: 15px;
padding: 10px;
}
.tagged {
display: inline-flex;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
border: 1px solid var(--gray_text, #888);
}
.taggs {
display: flex;
justify-content: space-between;
}/*# sourceMappingURL=style.module.css.map */

1
src/Components/Card/style.module.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["style.module.scss","style.module.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,2BAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,6BAAA;EAEJ,UAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACJ,mBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,WAAA;EAEA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACDJ;;ADGA;EAEA,aAAA;EACA,uBAAA;EACA,uBAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;ACDA;;ADIA;EACI,oBAAA;EACJ,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,wCAAA;ACDA;;ADGA;EACI,aAAA;EACA,8BAAA;ACAJ","file":"style.module.css"}

74
src/Components/profilePage/index.jsx Normal file
View File

@ -0,0 +1,74 @@
import Header from "../Header";
import styles from "./style.module.scss"
import Calendar from "../Calendar";
import avatar from '../../img/profilePage/avatar.png';
import gift from '../../img/profilePage/gift.png';
import Home from '../Home/Home';
const ProfilePage = () => {
return (
<>
<Header></Header>
<section className={styles.profile__container}>
<div className={styles.profile__user_container}>
<div className={styles.profile__user_img_container}>
<img src={avatar} className={styles.profile__user_img}></img>
<div className={styles.profile__user_role}>Участник</div>
</div>
<div className={styles.profile__user_info_container}>
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
<div className={styles.profile__user_email}>gmail@gmail.com</div>
<div className={styles.profile__user_progress_container}>
<span>0</span>
<span className={styles.profile__user_progress_line}></span>
<span>1</span>
<img src={gift} className={styles.profile__user_progress_img}></img>
</div>
</div>
</div>
<div className={styles.calendar__container}>
<Calendar></Calendar>
</div>
</section>
<section className={styles.myMeets}>
<div className={styles.myMeets__title}>Ваши мероприятия</div>
<div 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 /> */}
</div>
</section>
</>
)
}
export default ProfilePage;

154
src/Components/profilePage/style.module.scss Normal file
View File

@ -0,0 +1,154 @@
.profile {
&__container {
margin-top: 200px;
display: flex;
justify-content: space-between;
}
&__user {
&_img {
&_container {
display: flex;
flex-direction: column;
margin-right: 50px;
}
}
&_container {
display: flex;
}
&_info_container {
text-align: left;
margin-top: 20px;
display: flex;
text-align: left;
flex-direction: column;
}
&_fullName {
color: #000;
font-family: Montserrat;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: normal;
span {
color: #FD0;
}
}
&_spaciality {
color: #000;
font-family: Montserrat;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 25px;
}
&_socialMedia {
color: #000;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 25px;
}
&_email {
color: #000;
font-family: Montserrat;
font-size: 20px;
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;
}
}
}
}
.meeting {
&__container {
height: 1400px;
margin-top: 60px;
}
&__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;
}
.myMeets {
display: flex;
flex-direction: column;
align-content: start;
text-align: left;
justify-content: start;
&__title {
margin-top: 150px;
color: #000;
font-family: Montserrat;
font-size: 52px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}