diff --git a/react-app/src/components/app/css/app.css b/react-app/src/components/app/css/app.css index e69de29..55cad08 100644 --- a/react-app/src/components/app/css/app.css +++ b/react-app/src/components/app/css/app.css @@ -0,0 +1,335 @@ +* { + font-family: "Roboto", sans-serif; +} +header { + position: relative; + height: 83px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #fff; +} +.menu { + width: 435px; + height: 58px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-left: 88px; +} +.menu_logo { + width: 40px; + height: 52px; +} +.menu_project_name { + margin-left: 20px; +} +.menu_project_name_text { + color: #20d37d; + font-size: 48px; + font-style: normal; + font-weight: 500; +} +.menu_hamburger { + display: block; + position: absolute; + left: 50px; + top: 17px; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + height: 50px; + width: 50px; + background-color: #20d37d; + border-radius: 9px; +} +.menu_hamburger span { + display: block; + height: 5px; + width: 32px; + background-color: #fff; + margin: 0 9px 6px 9px; +} +.menu_hamburger span:nth-child(1) { + margin-top: 12px; +} +.menu_hamburger span:nth-child(3) { + margin-bottom: 12px; +} +.menu_hamburger_active { + -webkit-transition: 0.8 all; + transition: 0.8 all; +} +.menu_hamburger_active span:nth-child(1) { + margin-top: 12px; + -webkit-transform: translateY(12px) rotate(-45deg); + transform: translateY(12px) rotate(-45deg); +} +.menu_hamburger_active span:nth-child(2) { + display: none; +} +.menu_hamburger_active span:nth-child(3) { + margin-top: 12px; + -webkit-transform: translateY(-5px) rotate(45deg); + transform: translateY(-5px) rotate(45deg); +} +.header_login { + display: block; + height: 100%; + padding-left: 19px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: 10px; + width: 290px; + height: 71px; + background-color: #43ca79; + border-radius: 40px; + color: #fff; + font-size: 32px; + font-style: normal; + font-weight: 500; +} +.header_login_text { + padding-top: 6px; + height: 100%; + margin-left: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + font-size: 22px; + font-style: normal; + font-weight: 500; +} +.universe { + position: relative; + min-height: 640px; + padding: 22px 0 30px 0; + background: -webkit-gradient( + linear, + left bottom, + left top, + from(#ececec), + to(#ececec) + ), + #e8e8e8; + background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8; +} +.universe_input_block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 50px; + margin-bottom: 25px; +} +.universe_input { + padding-left: 20px; + height: 100%; + border-radius: 40px; + display: block; + width: 100%; + border: 0px; +} +.universe_input:focus { + outline: none; + border: 1px solid gray; +} +.universe_search { + height: 35px; + width: 35px; + position: absolute; + right: 30px; +} +.universe_card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-left: 30px; + height: 205px; + width: 205px; + background-color: #fff; + border-radius: 44px; +} +.universe_card_text { + color: #2a2a2a; + font-size: 24px; + font-style: normal; + font-weight: 500; +} +.universe_card_text span { + color: #50d400; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.universe_icon { + height: 130px; + width: 130px; +} +.universe_slid { + height: 18px; + width: 112px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + bottom: 30px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +.universe_slid_active { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #fff; +} +.universe_slid_disable { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #aeaeae; +} +.navigation { + background: -webkit-gradient( + linear, + left bottom, + left top, + from(#ececec), + to(#ececec) + ), + #e8e8e8; + background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8; + position: relative; + min-height: 640px; + padding: 22px 0 30px 0; +} +.navigation_input_block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 60px; + margin-bottom: 60px; +} +.navigation_input { + padding-left: 20px; + height: 100%; + border-radius: 40px; + display: block; + width: 100%; + border: 0px; + font-size: 20px; +} +.navigation_input:focus { + outline: none; + border: 1px solid gray; +} +.navigation_search { + height: 35px; + width: 35px; + position: absolute; + right: 30px; +} +.navigation_info { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 56px; + background-color: #fff; + border-radius: 50px; +} +.navigation_info_text { + color: #545454; + font-size: 20px; + font-style: normal; + font-weight: 500; +} +.navigation_cost { + position: absolute; + right: 150px; + color: #20d37d; + font-size: 20px; + font-style: normal; + font-weight: 500; +} +.navigation_slid { + height: 18px; + width: 112px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + bottom: 30px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +.navigation_slid_active { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #fff; +} +.navigation_slid_disable { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #aeaeae; +} /*# sourceMappingURL=style.css.map */ diff --git a/react-app/src/components/header/css/header.css b/react-app/src/components/header/css/header.css deleted file mode 100644 index fac8fc4..0000000 --- a/react-app/src/components/header/css/header.css +++ /dev/null @@ -1,122 +0,0 @@ -* { - font-family: "Roboto", sans-serif; -} -header { - position: relative; - height: 83px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #fff; -} -.menu { - width: 435px; - height: 58px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: left; - -ms-flex-pack: left; - justify-content: left; - -ms-flex-line-pack: center; - align-content: center; - margin-left: 88px; -} -.menu_logo { - width: 40px; - height: 52px; -} -.menu_project_name { - margin-left: 20px; -} -.menu_project_name_text { - color: #20d37d; - font-size: 48px; - font-style: normal; - font-weight: 500; -} -.menu_hamburger { - display: block; - position: absolute; - left: 50px; - top: 17px; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - height: 50px; - width: 50px; - background-color: #20d37d; - border-radius: 9px; -} -.menu_hamburger span { - display: block; - height: 5px; - width: 32px; - background-color: #fff; - margin: 0 9px 6px 9px; -} -.menu_hamburger span:nth-child(1) { - margin-top: 12px; -} -.menu_hamburger span:nth-child(3) { - margin-bottom: 12px; -} -.menu_hamburger_active { - margin-top: 6px; - -webkit-transition: 0.8 all; - transition: 0.8 all; -} -.menu_hamburger_active span:nth-child(1) { - margin-top: -2px; - -webkit-transform: translateY(3px) rotate(-45deg); - transform: translateY(3px) rotate(-45deg); -} -.menu_hamburger_active span:nth-child(2) { - display: none; -} -.menu_hamburger_active span:nth-child(3) { - margin-top: -2px; - -webkit-transform: translateY(3px) rotate(45deg); - transform: translateY(3px) rotate(45deg); -} -.header_login { - height: 100%; - padding-left: 19px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-right: 10px; - width: 290px; - height: 71px; - background-color: #43ca79; - border-radius: 40px; - color: #fff; - font-size: 32px; - font-style: normal; - font-weight: 500; -} -.header_login_text { - padding-top: 6px; - height: 100%; - margin-left: 10px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #000; - font-size: 22px; - font-style: normal; - font-weight: 500; -} /*# sourceMappingURL=style.css.map */ diff --git a/react-app/src/components/header/header.js b/react-app/src/components/header/header.js index df06898..43d768b 100644 --- a/react-app/src/components/header/header.js +++ b/react-app/src/components/header/header.js @@ -1,7 +1,5 @@ import { Component } from "react"; -import "./css/header.css"; - import logo from "./img/logo/logoPayDay.png"; class Header extends Component { diff --git a/react-app/src/components/main/css/main.css b/react-app/src/components/main/css/main.css deleted file mode 100644 index f78e4dd..0000000 --- a/react-app/src/components/main/css/main.css +++ /dev/null @@ -1,46 +0,0 @@ -.universe { - position: relative; - min-height: 640px; - padding: 22px 0 30px 0; - background: -webkit-gradient( - linear, - left bottom, - left top, - from(#ececec), - to(#ececec) - ), - #e8e8e8; - background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8; -} -.universe_input_block { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 50px; - margin-bottom: 25px; -} -.universe_input { - padding-left: 20px; - height: 100%; - border-radius: 40px; - display: block; - width: 100%; - border: 0px; -} -.universe_input:focus { - outline: none; - border: 1px solid gray; -} -.universe_search { - height: 35px; - width: 35px; - position: absolute; - right: 30px; -} /*# sourceMappingURL=style.css.map */ diff --git a/react-app/src/components/main/img/kubgu.jpg b/react-app/src/components/main/img/kubgu.jpg new file mode 100644 index 0000000..f084176 Binary files /dev/null and b/react-app/src/components/main/img/kubgu.jpg differ diff --git a/react-app/src/components/main/img/ufu.jpg b/react-app/src/components/main/img/ufu.jpg new file mode 100644 index 0000000..7d14da7 Binary files /dev/null and b/react-app/src/components/main/img/ufu.jpg differ diff --git a/react-app/src/components/main/img/vshe.png b/react-app/src/components/main/img/vshe.png new file mode 100644 index 0000000..1ce8069 Binary files /dev/null and b/react-app/src/components/main/img/vshe.png differ diff --git a/react-app/src/components/main/main.js b/react-app/src/components/main/main.js index d90db5d..59f4436 100644 --- a/react-app/src/components/main/main.js +++ b/react-app/src/components/main/main.js @@ -1,42 +1,80 @@ import { Component } from "react"; -import Slider from "../slider/slider"; -import Universe from "../universe/universe"; -import "./css/main.css"; -import searchLogo from "./img/search.svg"; +import UniverseList from "../universe/universe-list"; +import NavigationList from "../navigation/navigation-list"; + +//генерятся из get запроса (будет ссылка в universeData вместо #) +import KubGu from "./img/kubgu.jpg"; +import Ufu from "./img/ufu.jpg"; +import Vshe from "./img/vshe.png"; class Main extends Component { state = { - universeData: [], + //генерируется из get запроса + universeData: [ + //вузы + { + id: "1", + name: "ЮФУ", + credit: "от 135т руб", + logo: "#", + navigation: [ + //направления + { + name: "09.03.04 - Программная инженерия ", + credit: "От 5600 в мес.", + bankCount: " 10+ Банков", + }, + { + name: "09.03.04 - Программная инженерия ", + credit: "От 5600 в мес.", + bankCount: " 10+ Банков", + }, + { + name: "09.03.04 - Программная инженерия ", + credit: "От 5600 в мес.", + bankCount: " 10+ Банков", + }, + ], + }, + { + id: "2", + name: "КубГУ", + credit: "от 135т руб", + logo: "#", + navigation: [], + }, + { + id: "3", + name: "ВШЭ", + credit: "от 135т руб", + logo: "#", + navigation: [], + }, + ], + }; + + //Клик на карточку вуза - должны получить его id, чтобы потом предать его в навигацию + onClickToUniverse = (e) => { + console.log(e.target.name); }; render() { - return ( -
-
-
-
- - search -
+ const { universeData } = this.state; //universeData генерируется через map -
- {/* Генерация университетов из списка на основе пропсов*/} - -
-
-
- {/* Переключение активного слайдера в зависимости от секции */} - -
+ const picturesList = [Ufu, KubGu, Vshe]; //заглушка - картинки будут приходить из universeData + + return ( + //Из UniverseList приходит текущий выбранный вуз, он отправляется в NavigationList + <> + {/* тут проиходит переключение слайдеров (мб стоит сделать как список) */} + + {/* */} + ); } } diff --git a/react-app/src/components/navigation-item/navigation-item.js b/react-app/src/components/navigation-item/navigation-item.js new file mode 100644 index 0000000..1a03275 --- /dev/null +++ b/react-app/src/components/navigation-item/navigation-item.js @@ -0,0 +1,19 @@ +import { Component } from "react"; + +class NavigationItem extends Component { + state = {}; + + render() { + return ( +
+
+ 09.03.04 - Программная инженерия{" "} + От 5600 в мес. 10+ + Банков +
+
+ ); + } +} + +export default NavigationItem; diff --git a/react-app/src/components/main/img/search.svg b/react-app/src/components/navigation/img/search.svg similarity index 100% rename from react-app/src/components/main/img/search.svg rename to react-app/src/components/navigation/img/search.svg diff --git a/react-app/src/components/navigation/navigation-list.js b/react-app/src/components/navigation/navigation-list.js new file mode 100644 index 0000000..aef9b24 --- /dev/null +++ b/react-app/src/components/navigation/navigation-list.js @@ -0,0 +1,55 @@ +import { Component } from "react"; + +import NavigationItem from "../navigation-item/navigation-item"; +import searchLogo from "./img/search.svg"; + +class NavigationList extends Component { + state = {}; + + render() { + const { data } = this.props; + + //Тут генерим список направлений, генерируется он на основе data, в которой фильтром выбирает нужный вуз + //вуз приходит из пропсов + + // const navigations = data.map((item) => { + // // const { navigation } = item; + // // return ; + // }); + + return ( +
+
+
+
+ + search +
+
+
+ + + + +
+
+
+ + + + +
+
+ ); + } +} + +export default NavigationList; diff --git a/react-app/src/components/slider/css/slider.css b/react-app/src/components/slider/css/slider.css deleted file mode 100644 index f1afbed..0000000 --- a/react-app/src/components/slider/css/slider.css +++ /dev/null @@ -1,24 +0,0 @@ -.universe_slid { - height: 18px; - width: 112px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: absolute; - bottom: 30px; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} -.universe_slid_active { - width: 20px; - margin-right: 8px; - border-radius: 50%; - background-color: #fff; -} -.universe_slid_disable { - width: 20px; - margin-right: 8px; - border-radius: 50%; - background-color: #aeaeae; -} diff --git a/react-app/src/components/slider/slider.js b/react-app/src/components/slider/slider.js deleted file mode 100644 index 371c44c..0000000 --- a/react-app/src/components/slider/slider.js +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from "react"; - -import "./css/slider.css"; - -class Slider extends Component { - state = {}; - - render() { - return ( -
- - - - -
- ); - } -} - -export default Slider; diff --git a/react-app/src/components/universe-item/universe-item.js b/react-app/src/components/universe-item/universe-item.js new file mode 100644 index 0000000..6505ba0 --- /dev/null +++ b/react-app/src/components/universe-item/universe-item.js @@ -0,0 +1,23 @@ +import { Component } from "react"; + +class UniverseItem extends Component { + state = {}; + + render() { + const { name, credit, pic, onUniverseProps } = this.props; + + return ( +
+ universe + {name} + {credit} +
+ ); + } +} + +export default UniverseItem; diff --git a/react-app/src/components/universe/css/universe.css b/react-app/src/components/universe/css/universe.css deleted file mode 100644 index d73d20c..0000000 --- a/react-app/src/components/universe/css/universe.css +++ /dev/null @@ -1,40 +0,0 @@ -.universe_card { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-left: 30px; - height: 205px; - width: 205px; - background-color: #fff; - border-radius: 44px; -} -.universe_card_text { - color: #2a2a2a; - font-size: 24px; - font-style: normal; - font-weight: 500; -} -.universe_card_text span { - color: #50d400; - font-family: Inter; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; -} -.universe_icon { - height: 130px; - width: 130px; -} diff --git a/react-app/src/components/universe/img/search.svg b/react-app/src/components/universe/img/search.svg new file mode 100644 index 0000000..c1af0b5 --- /dev/null +++ b/react-app/src/components/universe/img/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/react-app/src/components/universe/universe-list.js b/react-app/src/components/universe/universe-list.js new file mode 100644 index 0000000..fea42a1 --- /dev/null +++ b/react-app/src/components/universe/universe-list.js @@ -0,0 +1,57 @@ +import { Component } from "react"; + +import UniverseItem from "../universe-item/universe-item"; +import searchLogo from "./img/search.svg"; + +class UniverseList extends Component { + state = {}; + + render() { + const { data, picturesList, onUniverseProps } = this.props; + + //Генерация университетов из списка на основе пропсов + const universes = data.map((item) => { + const { id, ...itemProps } = item; + + return ( + onUniverseProps(e)} + /> + ); + }); + + return ( +
+
+
+
+ + search +
+ {universes} +
+
+ {/* Переключение активного слайдера в зависимости от секции */} +
+ + + + +
+
+ ); + } +} + +export default UniverseList; diff --git a/react-app/src/components/universe/universe.js b/react-app/src/components/universe/universe.js deleted file mode 100644 index fdb87df..0000000 --- a/react-app/src/components/universe/universe.js +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from "react"; - -import "./css/universe.css"; - -// import logo from "./img/logo/logoPayDay.png"; - -class Universe extends Component { - state = {}; - - render() { - return ( -
- universe - ЮФУ от 135т руб -
- ); - } -} - -export default Universe;