From 6de87cae143e9de33e715415a690a4bc51532263 Mon Sep 17 00:00:00 2001 From: Hope87 Date: Wed, 16 Jun 2021 17:51:25 +0300 Subject: [PATCH] start calendar page --- src/App.js | 17 +- .../Auth/{Auth.js => AuthForDevelopers.js} | 46 +- .../Auth/AuthForDevelopers.module.css | 405 ++++++++++++++++++ src/components/Auth/AuthForPartners.js | 118 +++++ ....module.css => AuthForPartners.module.css} | 115 ++--- src/components/Calendar/Calendar.js | 27 ++ src/components/Calendar/Calendar.module.css | 4 + src/components/Home/Home.js | 2 - src/pages/AuthPage.js | 8 - src/pages/AuthPageForDevelopers.js | 8 + src/pages/AuthPageForPartners.js | 8 + src/pages/CalendarPage.js | 8 + 12 files changed, 665 insertions(+), 101 deletions(-) rename src/components/Auth/{Auth.js => AuthForDevelopers.js} (72%) create mode 100644 src/components/Auth/AuthForDevelopers.module.css create mode 100644 src/components/Auth/AuthForPartners.js rename src/components/Auth/{Auth.module.css => AuthForPartners.module.css} (80%) create mode 100644 src/components/Calendar/Calendar.js create mode 100644 src/components/Calendar/Calendar.module.css delete mode 100644 src/pages/AuthPage.js create mode 100644 src/pages/AuthPageForDevelopers.js create mode 100644 src/pages/AuthPageForPartners.js create mode 100644 src/pages/CalendarPage.js diff --git a/src/App.js b/src/App.js index 71976897..cc91822d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,17 @@ -import React, { useState, useEffect, Suspense, lazy } from 'react'; +import React, { useState, Suspense, lazy } from 'react'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; import 'bootstrap/dist/css/bootstrap.min.css'; import './fonts/stylesheet.css'; -const AuthPage = lazy(() => import('./pages/AuthPage')); +// const AuthPageForDevelopers = lazy(() => import('./pages/AuthPageForDevelopers')); +// const AuthPageForPartners = lazy(() => import('./pages/AuthPageForPartners')); const HomePage = lazy(() => import('./pages/HomePage')); const CandidatePage = lazy(() => import('./pages/CandidatePage')); +const CalendarPage = lazy(() => import('./pages/CalendarPage')); const App = () => { const [isAuth, setIsAuth] = useState(false); - useEffect(() => { - const auth = localStorage.getItem('auth'); - if (auth === 'true') { - setIsAuth(true); - } - }, []); - return ( Loading...}> @@ -34,7 +29,9 @@ const App = () => { ) : ( - + + {/* */} + {/* */} )} diff --git a/src/components/Auth/Auth.js b/src/components/Auth/AuthForDevelopers.js similarity index 72% rename from src/components/Auth/Auth.js rename to src/components/Auth/AuthForDevelopers.js index 77acc782..4b497e1e 100644 --- a/src/components/Auth/Auth.js +++ b/src/components/Auth/AuthForDevelopers.js @@ -1,10 +1,10 @@ import React from 'react'; -import style from './Auth.module.css'; +import style from './AuthForDevelopers.module.css'; import ellipse from '../../images/ellipse.png'; import arrow from '../../images/arrow__login_page.png'; import authImg from '../../images/auth_img.png'; import cross from '../../images/cross.png'; -import specialists from '../../images/specialists.png'; +// import specialists from '../../images/specialists.png'; import text from '../../images/Body_Text.png'; import align from '../../images/align-left.png'; import phone from '../../images/phone.png'; @@ -12,24 +12,24 @@ import telegram from '../../images/telegram.png'; import vector from '../../images/Vector_Smart_Object.png'; import vectorBlack from '../../images/Vector_Smart_Object_black.png'; -const Auth = ({ setAuthed }) => { +const AuthForDevelopers = ({ setAuthed }) => { return ( -
-
+
+
-
-

+
+

Войти в систему

-
+
- Для партнеров + Для разработчиков
-
+ @@ -43,11 +43,11 @@ const Auth = ({ setAuthed }) => {
- +
-
-
+
+

Управление @@ -55,22 +55,20 @@ const Auth = ({ setAuthed }) => {

-
-
+
+
- + {/* */} +

20 Специалистов

  • Рабочее пространство
    • -
  • Управления задачами
    • - {/*
  • Python
    • -
  • Vue.js
    • -
  • React. JS
    • */} +
  • Управление задачами
@@ -81,7 +79,7 @@ const Auth = ({ setAuthed }) => {
-
+
@@ -95,14 +93,14 @@ const Auth = ({ setAuthed }) => {
-
+
-
+

+7 495 156 78 98

Будни с 9:00 до 21:00

@@ -114,4 +112,4 @@ const Auth = ({ setAuthed }) => { ); }; -export default Auth; +export default AuthForDevelopers; diff --git a/src/components/Auth/AuthForDevelopers.module.css b/src/components/Auth/AuthForDevelopers.module.css new file mode 100644 index 00000000..e581f316 --- /dev/null +++ b/src/components/Auth/AuthForDevelopers.module.css @@ -0,0 +1,405 @@ +.developers { + overflow: hidden; +} + +.developers__background { + background-color: #f1f1f1; + position: relative; +} + +.vector, +.vectorBlack { + position: absolute; +} + +.vector { + top: -720px; + left: -320px; +} + +.vectorBlack { + top: 460px; + right: -224px; +} + +@media (max-width: 575.98px) { + .vector, + .vectorBlack { + display: none; + } +} + +.developers__box { + display: flex; + flex-direction: column; + align-self: center; + margin-bottom: 194px; +} + +@media (max-width: 575.98px) { + .developers__box { + margin-bottom: 44px; + } +} + +.developers__title { + font-family: 'GT Eesti Pro Display'; + font-size: 5.3em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 77.81px; + text-align: left; + margin-top: 164px; +} + +@media (max-width: 575.98px) { + .developers__title { + text-align: center; + margin-top: 44px; + } +} + +.developers__title > span { + font-family: 'GT Eesti Pro Display'; + color: #52b709; + font-style: normal; + letter-spacing: 0.56px; + line-height: normal; +} + +.developers__partners { + display: flex; + align-items: center; + justify-content: center; + margin-top: 15px; + margin-bottom: 65px; +} + +.developers__partners > img { + width: 6px; + height: 6px; + margin-left: 120px; +} + +.developers__partners > span { + color: #18586e; + font-family: 'GT Eesti Pro Display'; + font-size: 1.6em; + font-weight: 500; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; + margin-left: 10px; +} + +.developers__form { + display: flex; + flex-direction: column; +} + +.developers__form > label { + color: #48802d; + font-family: 'GT Eesti Pro Display'; + font-size: 2.4em; + font-weight: 500; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; + margin-bottom: 20px; + margin-left: 45px; +} + +.developers__form > input { + max-width: 366px; + height: 75px; + box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); + border-radius: 37px; + border: 1px solid #c4c4c4; + background-color: #ffffff; + margin-bottom: 60px; + color: #a6a6a6; + font-family: 'GT Eesti Pro Display'; + font-size: 2.2em; + font-weight: 300; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: left; + padding-left: 45px; + outline: none; +} + +.form__btn { + width: 288px; + height: 75px; + box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); + border-radius: 38px; + background-color: #ffffff; + background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), + linear-gradient( + 36deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.16) 47%, + rgba(255, 255, 255, 0.17) 50%, + rgba(255, 255, 255, 0) 100% + ); + border: none; + color: #ffffff; + font-family: 'Muller'; + font-size: 2.2em; + letter-spacing: normal; + line-height: 71.88px; + text-align: center; +} + +@media (max-width: 575.98px) { + .form__btn { + margin: 0 auto; + } +} + +.developers__arrow { + margin-top: 360px; +} + +@media (max-width: 575.98px) { + .developers__arrow { + display: none; + } +} + +.developers__info { + background-color: #e1fccf; + margin-top: 70px; + max-width: 310px; + padding-top: 30px; + position: relative; + padding-bottom: 310px; +} + +@media (max-width: 575.98px) { + .developers__info { + max-width: 380px; + } +} + +@media (max-width: 375.98px) { + .developers__info { + max-width: 340px; + } +} + +.developers__info__box { + display: flex; + align-items: center; +} + +@media (max-width: 575.98px) { + .developers__info__box { + flex-direction: column; + justify-content: center; + } +} + +.developers__info__box > img { + width: 150px; + height: 150px; + margin-left: -84px; + margin-right: 30px; +} + +@media (max-width: 575.98px) { + .developers__info__box > img { + margin-left: 0px; + margin-right: 0px; + } +} + +.developers__info__box > h3 { + font-family: 'GT Eesti Pro Display'; + font-size: 2em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: left; +} + +@media (max-width: 575.98px) { + .developers__info__box > h3 { + margin-top: 20px; + } +} + +.developers__info__container { + display: flex; + position: relative; +} + +.developers__info__img { + display: flex; + flex-direction: column; + text-align: center; + margin-top: 28px; + margin-left: -20px; +} + +@media (max-width: 575.98px) { + .developers__info__img { + margin-left: -48px; + } +} + +.developers__info__img > div > img { + margin-bottom: 100px; +} + +.specialists { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 26.12px; + text-align: left; + transform: rotate(-90deg); + text-transform: uppercase; +} + +/* .specialists { + margin-left: 26px; +} */ + +.info__list { + list-style: none; + margin-top: 110px; + position: absolute; + left: 114px; +} + +@media (max-width: 575.98px) { + .info__list { + left: 34px; + } +} + +.info__list__item { + color: #1f1f1f; + font-family: 'GT Eesti Pro Display'; + font-size: 4em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 56.95px; + text-align: left; + text-decoration: underline; + text-transform: uppercase; + margin-bottom: 34px; +} + +@media (max-width: 575.98px) { + .info__list__item { + font-size: 2.6em; + margin-bottom: 14px; + } +} + +.img__text { + position: absolute; + right: -68px; + bottom: -84px; +} + +@media (max-width: 575.98px) { + .img__text { + right: -10px; + } +} + +.developers__footer__left { + display: flex; + align-items: center; + margin-bottom: 60px; +} + +@media (max-width: 575.98px) { + .developers__footer__left { + margin-top: 120px; + } +} + +.footer__left__sp { + padding: 0 100px 0 34px; +} + +@media (max-width: 575.98px) { + .footer__left__sp { + padding: 0; + margin-left: 10px; + } +} + +.developers__footer__left > div > span { + color: #18586e; + font-family: 'GT Eesti Pro Display'; + font-size: 1.6em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 16.81px; + text-align: left; +} + +@media (max-width: 575.98px) { + .developers__footer__left > div > span { + font-size: 1.2em; + } +} + +.developers__footer__icon { + text-align: end; +} + +.developers__footer__icon > img { + margin-left: 20px; +} + +@media (max-width: 575.98px) { + .developers__footer__icon > img { + margin-left: 10px; + } +} + +.developers__footer__right { + display: flex; + flex-direction: column; + align-items: left; +} + +@media (max-width: 575.98px) { + .developers__footer__right { + margin-bottom: 20px; + } +} +.phone { + color: #003b65; + font-family: 'CeraPro'; + font-size: 2.1em; + letter-spacing: normal; + line-height: 25px; + text-align: left; +} + +.workingHours { + color: #003b65; + font-family: 'CeraPro'; + font-size: 1.2em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: normal; + margin-left: 24px; +} diff --git a/src/components/Auth/AuthForPartners.js b/src/components/Auth/AuthForPartners.js new file mode 100644 index 00000000..76f85f01 --- /dev/null +++ b/src/components/Auth/AuthForPartners.js @@ -0,0 +1,118 @@ +import React from 'react'; +import style from './AuthForPartners.module.css'; +import ellipse from '../../images/ellipse.png'; +import arrow from '../../images/arrow__login_page.png'; +import medium from '../../images/medium_male_big.png'; +import cross from '../../images/cross.png'; +// import specialists from '../../images/specialists.png'; +import text from '../../images/Body_Text.png'; +import align from '../../images/align-left.png'; +import phone from '../../images/phone.png'; +import telegram from '../../images/telegram.png'; +import vector from '../../images/Vector_Smart_Object.png'; +import vectorBlack from '../../images/Vector_Smart_Object_black.png'; + +const AuthForPartners = ({ setAuthed }) => { + return ( +
+
+ + +
+
+
+
+

+ Войти в систему +

+
+ + Для партнеров +
+ + + + + + + + + +
+
+
+ +
+
+
+
+ +

+ Frontend разработчик, +
Middle +

+
+ +
+
+
+ +
+
+ {/* */} +

20 Специалистов

+
+
+ +
    +
  • Ruby on Rails
    • +
  • PHP
    • +
  • Python
    • +
  • Vue.js
    • +
  • React. JS
    • +
+
+ + +
+
+
+ +
+
+
+
+ +
+
+ + © Адвего — биржа контента №1. Копирайтинг, рерайтинг, переводы, работа на дому: поставщик + уникального контента. 2021{' '} + +
+
+
+ +
+
+ + +
+
+ +
+
+

+7 495 156 78 98

+

Будни с 9:00 до 21:00

+
+
+
+
+
+
+ ); +}; + +export default AuthForPartners; diff --git a/src/components/Auth/Auth.module.css b/src/components/Auth/AuthForPartners.module.css similarity index 80% rename from src/components/Auth/Auth.module.css rename to src/components/Auth/AuthForPartners.module.css index 5a506be3..f7cb98fb 100644 --- a/src/components/Auth/Auth.module.css +++ b/src/components/Auth/AuthForPartners.module.css @@ -1,16 +1,8 @@ -/* .auth { - background-color: #f1f1f1; - background: url(../../images/Vector_Smart_Object.png)-302px -720px no-repeat, - url(../../images/Vector_Smart_Object_black.png) 1760px 480px no-repeat; -} */ - -.auth { - background-color: #f1f1f1; - position: relative; +.partners { overflow: hidden; } -.auth__background { +.partners__background { background-color: #f1f1f1; position: relative; } @@ -37,7 +29,7 @@ } } -.auth__box { +.partners__box { display: flex; flex-direction: column; align-self: center; @@ -45,12 +37,12 @@ } @media (max-width: 575.98px) { - .auth__box { + .partners__box { margin-bottom: 44px; } } -.auth__title { +.partners__title { font-family: 'GT Eesti Pro Display'; font-size: 5.3em; font-weight: 700; @@ -62,13 +54,13 @@ } @media (max-width: 575.98px) { - .auth__title { + .partners__title { text-align: center; margin-top: 44px; } } -.auth__title > span { +.partners__title > span { font-family: 'GT Eesti Pro Display'; color: #52b709; font-style: normal; @@ -76,7 +68,7 @@ line-height: normal; } -.auth__partners { +.partners__partners { display: flex; align-items: center; justify-content: center; @@ -84,13 +76,13 @@ margin-bottom: 65px; } -.auth__partners > img { +.partners__partners > img { width: 6px; height: 6px; margin-left: 120px; } -.auth__partners > span { +.partners__partners > span { color: #18586e; font-family: 'GT Eesti Pro Display'; font-size: 1.6em; @@ -102,12 +94,12 @@ margin-left: 10px; } -.auth__form { +.partners__form { display: flex; flex-direction: column; } -.auth__form > label { +.partners__form > label { color: #48802d; font-family: 'GT Eesti Pro Display'; font-size: 2.4em; @@ -120,7 +112,7 @@ margin-left: 45px; } -.auth__form > input { +.partners__form > input { max-width: 366px; height: 75px; box-shadow: 0 0 59px rgba(44, 44, 44, 0.05); @@ -141,7 +133,7 @@ } .form__btn { - width: 290px; + width: 288px; height: 75px; box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21); border-radius: 38px; @@ -169,64 +161,64 @@ } } -.auth__arrow { +.partners__arrow { margin-top: 360px; } @media (max-width: 575.98px) { - .auth__arrow { + .partners__arrow { display: none; } } -.auth__info { +.partners__info { background-color: #e1fccf; margin-top: 70px; max-width: 310px; padding-top: 30px; position: relative; - padding-bottom: 160px; + padding-bottom: 310px; } @media (max-width: 575.98px) { - .auth__info { + .partners__info { max-width: 380px; } } @media (max-width: 375.98px) { - .auth__info { + .partners__info { max-width: 340px; } } -.auth__info__box { +.partners__info__box { display: flex; align-items: center; } @media (max-width: 575.98px) { - .auth__info__box { + .partners__info__box { flex-direction: column; justify-content: center; } } -.auth__info__box > img { - width: 150px; - height: 150px; +.partners__info__box > img { + width: 165px; + height: 165px; margin-left: -84px; margin-right: 30px; } @media (max-width: 575.98px) { - .auth__info__box > img { + .partners__info__box > img { margin-left: 0px; margin-right: 0px; } } -.auth__info__box > h3 { +.partners__info__box > h3 { font-family: 'GT Eesti Pro Display'; font-size: 2em; font-weight: 100; @@ -237,43 +229,54 @@ } @media (max-width: 575.98px) { - .auth__info__box > h3 { + .partners__info__box > h3 { margin-top: 20px; } } -.auth__info__container { +.partners__info__container { display: flex; position: relative; } -.auth__info__img { +.partners__info__img { display: flex; flex-direction: column; - margin-left: 55px; + text-align: center; margin-top: 28px; } @media (max-width: 575.98px) { - .auth__info__img { - margin-left: 8px; + .partners__info__img { + margin-left: -48px; } } -.auth__info__img > div > img { - margin-bottom: 40px; +.partners__info__img > div > img { + margin-bottom: 100px; } .specialists { - margin-left: 26px; + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 26.12px; + text-align: left; + transform: rotate(-90deg); + text-transform: uppercase; } +/* .specialists { + margin-left: 26px; +} */ + .info__list { list-style: none; margin-top: 110px; position: absolute; - /* right: -116px; */ - left: 114px; + right: -120px; } @media (max-width: 575.98px) { @@ -293,13 +296,11 @@ text-align: left; text-decoration: underline; text-transform: uppercase; - margin-bottom: 34px; } @media (max-width: 575.98px) { .info__list__item { font-size: 2.6em; - margin-bottom: 14px; } } @@ -315,14 +316,14 @@ } } -.auth__footer__left { +.partners__footer__left { display: flex; align-items: center; margin-bottom: 60px; } @media (max-width: 575.98px) { - .auth__footer__left { + .partners__footer__left { margin-top: 120px; } } @@ -338,7 +339,7 @@ } } -.auth__footer__left > div > span { +.partners__footer__left > div > span { color: #18586e; font-family: 'GT Eesti Pro Display'; font-size: 1.6em; @@ -350,33 +351,33 @@ } @media (max-width: 575.98px) { - .auth__footer__left > div > span { + .partners__footer__left > div > span { font-size: 1.2em; } } -.auth__footer__icon { +.partners__footer__icon { text-align: end; } -.auth__footer__icon > img { +.partners__footer__icon > img { margin-left: 20px; } @media (max-width: 575.98px) { - .auth__footer__icon > img { + .partners__footer__icon > img { margin-left: 10px; } } -.auth__footer__right { +.partners__footer__right { display: flex; flex-direction: column; align-items: left; } @media (max-width: 575.98px) { - .auth__footer__right { + .partners__footer__right { margin-bottom: 20px; } } diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js new file mode 100644 index 00000000..1d9de06b --- /dev/null +++ b/src/components/Calendar/Calendar.js @@ -0,0 +1,27 @@ +import React from 'react'; +import style from './Calendar.module.css'; +import calendarMale from '../../images/medium_male.png'; + +const Calendar = () => { + return ( +
+
+
+

+ Добрый день, Александр! +

+
+
+ img +

header

+
+
+
+
+
+
+
+ ); +}; + +export default Calendar; diff --git a/src/components/Calendar/Calendar.module.css b/src/components/Calendar/Calendar.module.css new file mode 100644 index 00000000..d514e503 --- /dev/null +++ b/src/components/Calendar/Calendar.module.css @@ -0,0 +1,4 @@ +.calendar__title { + font-size: 32px; + color: violet; +} diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index df6579bd..5cf477c8 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -68,8 +68,6 @@ const Home = () => { const keys = Object.keys(res); const values = Object.values(res); - console.log(values); - const tempTags = values.map((item, index) => item.map((tag) => { return { id: tag.id, value: tag.tags, name: keys[index] }; diff --git a/src/pages/AuthPage.js b/src/pages/AuthPage.js deleted file mode 100644 index 248ea6db..00000000 --- a/src/pages/AuthPage.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import Auth from '../components/Auth/Auth'; - -const AuthPage = ({ setAuth }) => { - return ; -}; - -export default AuthPage; diff --git a/src/pages/AuthPageForDevelopers.js b/src/pages/AuthPageForDevelopers.js new file mode 100644 index 00000000..031a9ea9 --- /dev/null +++ b/src/pages/AuthPageForDevelopers.js @@ -0,0 +1,8 @@ +import React from 'react'; +import AuthForDevelopers from '../components/Auth/AuthForDevelopers'; + +const AuthPageForDevelopers = ({ setAuth }) => { + return ; +}; + +export default AuthPageForDevelopers; diff --git a/src/pages/AuthPageForPartners.js b/src/pages/AuthPageForPartners.js new file mode 100644 index 00000000..184f8a25 --- /dev/null +++ b/src/pages/AuthPageForPartners.js @@ -0,0 +1,8 @@ +import React from 'react'; +import AuthForPartners from '../components/Auth/AuthForPartners'; + +const AuthPageForPartners = ({ setAuth }) => { + return ; +}; + +export default AuthPageForPartners; diff --git a/src/pages/CalendarPage.js b/src/pages/CalendarPage.js new file mode 100644 index 00000000..960b2d1a --- /dev/null +++ b/src/pages/CalendarPage.js @@ -0,0 +1,8 @@ +import React from 'react'; +import Calendar from '../components/Calendar/Calendar'; + +const CalendarPage = () => { + return ; +}; + +export default CalendarPage;