diff --git a/package-lock.json b/package-lock.json index 2aea760..48607b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 50c86dd..b50298d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.jsx b/src/App.jsx index 55ef91e..8a9a479 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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() { - }/> + }/> }/> }/> }/> + }/> diff --git a/src/Components/AddUsersPage/index.jsx b/src/Components/AddUsersPage/index.jsx new file mode 100644 index 0000000..3c2234a --- /dev/null +++ b/src/Components/AddUsersPage/index.jsx @@ -0,0 +1,52 @@ +import styles from './style.module.scss'; +import avatar from '../../img/profilePage/avatar.png'; +import Header from '../Header'; + +const AddUsers = () => { + return ( + <> +
+ + +
+ +
+ + +
+
+
+
+
+
+
Добавить пользователя
+
+
+
+ +
Участник
+
+
+
Кирсанов Дмитрий
+
Junior PHP разработчик
+
TG: @dkir
+
gmail@gmail.com
+
+ 0 + + 1 + +
+
+
+
+
+
+ + + + + ) +} +export default AddUsers; \ No newline at end of file diff --git a/src/Components/AddUsersPage/style.module.scss b/src/Components/AddUsersPage/style.module.scss new file mode 100644 index 0000000..aa5edc4 --- /dev/null +++ b/src/Components/AddUsersPage/style.module.scss @@ -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; +} \ No newline at end of file diff --git a/src/Components/BeingPage/style.module.css b/src/Components/BeingPage/style.module.css new file mode 100644 index 0000000..d53dbcb --- /dev/null +++ b/src/Components/BeingPage/style.module.css @@ -0,0 +1 @@ +/*# sourceMappingURL=style.module.css.map */ \ No newline at end of file diff --git a/src/Components/BeingPage/style.module.css.map b/src/Components/BeingPage/style.module.css.map new file mode 100644 index 0000000..f6f3c5e --- /dev/null +++ b/src/Components/BeingPage/style.module.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"style.module.css"} \ No newline at end of file diff --git a/src/Components/Calendar/index.jsx b/src/Components/Calendar/index.jsx new file mode 100644 index 0000000..9b8521f --- /dev/null +++ b/src/Components/Calendar/index.jsx @@ -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 ( + + + + + + ); +} \ No newline at end of file diff --git a/src/Components/Card/style.module.css b/src/Components/Card/style.module.css new file mode 100644 index 0000000..9e5de33 --- /dev/null +++ b/src/Components/Card/style.module.css @@ -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 */ \ No newline at end of file diff --git a/src/Components/Card/style.module.css.map b/src/Components/Card/style.module.css.map new file mode 100644 index 0000000..559f641 --- /dev/null +++ b/src/Components/Card/style.module.css.map @@ -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"} \ No newline at end of file diff --git a/src/Components/profilePage/index.jsx b/src/Components/profilePage/index.jsx new file mode 100644 index 0000000..e930651 --- /dev/null +++ b/src/Components/profilePage/index.jsx @@ -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 ( + <> +
+
+
+
+ +
Участник
+
+
+
Кирсанов Дмитрий
+
Junior PHP разработчик
+
TG: @dkir
+
gmail@gmail.com
+
+ 0 + + 1 + +
+
+
+
+ +
+
+
+
Ваши мероприятия
+
+ +
+
+ + +
+
+
+
+
100 мероприятий
+ +
+
+
+
+
+ + {/* */} + {/* */} + {/* */} +
+
+ + + + + ) + + +} +export default ProfilePage; \ No newline at end of file diff --git a/src/Components/profilePage/style.module.scss b/src/Components/profilePage/style.module.scss new file mode 100644 index 0000000..286327a --- /dev/null +++ b/src/Components/profilePage/style.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/img/profilePage/avatar.png b/src/img/profilePage/avatar.png new file mode 100644 index 0000000..f230394 Binary files /dev/null and b/src/img/profilePage/avatar.png differ diff --git a/src/img/profilePage/gift.png b/src/img/profilePage/gift.png new file mode 100644 index 0000000..247a8e9 Binary files /dev/null and b/src/img/profilePage/gift.png differ