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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
package-lock.json generated
View File

@ -14,7 +14,9 @@
"@mui/icons-material": "^5.15.1",
"@mui/material": "^5.15.1",
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
"@mui/x-date-pickers": "^6.18.6",
"axios": "^1.6.2",
"dayjs": "^1.11.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
@ -1370,6 +1372,71 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/x-date-pickers": {
"version": "6.18.6",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.18.6.tgz",
"integrity": "sha512-pqOrGPUDVY/1xXrM1hofqwgquno/SB9aG9CVS1m2Rs8hKF1VWRC+jYlEa1Qk08xKmvkia5g7NsdV/BBb+tHUZw==",
"dependencies": {
"@babel/runtime": "^7.23.2",
"@mui/base": "^5.0.0-beta.22",
"@mui/utils": "^5.14.16",
"@types/react-transition-group": "^4.4.8",
"clsx": "^2.0.0",
"prop-types": "^15.8.1",
"react-transition-group": "^4.4.5"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.8.6",
"@mui/system": "^5.8.0",
"date-fns": "^2.25.0",
"date-fns-jalali": "^2.13.0-0",
"dayjs": "^1.10.7",
"luxon": "^3.0.2",
"moment": "^2.29.4",
"moment-hijri": "^2.1.2",
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"date-fns": {
"optional": true
},
"date-fns-jalali": {
"optional": true
},
"dayjs": {
"optional": true
},
"luxon": {
"optional": true
},
"moment": {
"optional": true
},
"moment-hijri": {
"optional": true
},
"moment-jalaali": {
"optional": true
}
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -2210,6 +2277,11 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/dayjs": {
"version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

2
package.json
View File

@ -16,7 +16,9 @@
"@mui/icons-material": "^5.15.1",
"@mui/material": "^5.15.1",
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
"@mui/x-date-pickers": "^6.18.6",
"axios": "^1.6.2",
"dayjs": "^1.11.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",

7
src/App.jsx
View File

@ -6,12 +6,12 @@ import './App.css'
// import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
// import TableMeets from './components/fetchUtils/TableMeets.jsx'
import AddUsers from './Components/AddUsersPage/index.jsx'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import BeingPage from "./Components/BeingPage/index.jsx";
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';
function App() {
@ -22,10 +22,11 @@ function App() {
<BrowserRouter>
<Routes>
<Route path="/being" element={<BeingPage />}/>
<Route path="/addUser" element={<AddUsers />}/>
<Route path="/" element={<HomePage />}/>
<Route path="/firstMeet" element={<MeetPage />}/>
<Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
<Route path='/profile' element={<ProfilePage />}/>
</Routes>
</BrowserRouter>
</>

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;
}
}

BIN
src/img/profilePage/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/img/profilePage/gift.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B