diff --git a/pairent_frontend_react/index.html b/pairent_frontend_react/index.html index 9c66fd0..de6868d 100644 --- a/pairent_frontend_react/index.html +++ b/pairent_frontend_react/index.html @@ -5,7 +5,7 @@ Pairent - + diff --git a/pairent_frontend_react/package.json b/pairent_frontend_react/package.json index 7086091..a9c809e 100644 --- a/pairent_frontend_react/package.json +++ b/pairent_frontend_react/package.json @@ -5,11 +5,14 @@ "type": "module", "dependencies": { "axios": "^1.4.0", + "bootstrap-icons": "^1.10.5", "font-awesome": "^4.7.0", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.0", - "styled-components": "^6.0.0-rc.1" + "styled-components": "^6.0.0-rc.1", + "swiper": "^9.2.4" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", diff --git a/pairent_frontend_react/public/images/filter.png b/pairent_frontend_react/public/images/filter.png new file mode 100644 index 0000000..c117fd9 Binary files /dev/null and b/pairent_frontend_react/public/images/filter.png differ diff --git a/pairent_frontend_react/public/images/house-s-2.jpg b/pairent_frontend_react/public/images/house-s-2.jpg new file mode 100644 index 0000000..3e8d401 Binary files /dev/null and b/pairent_frontend_react/public/images/house-s-2.jpg differ diff --git a/pairent_frontend_react/public/images/house-s.jpg b/pairent_frontend_react/public/images/house-s.jpg new file mode 100644 index 0000000..f24eab6 Binary files /dev/null and b/pairent_frontend_react/public/images/house-s.jpg differ diff --git a/pairent_frontend_react/public/images/icons/calendar-day.svg b/pairent_frontend_react/public/images/icons/calendar-day.svg new file mode 100644 index 0000000..eb18448 --- /dev/null +++ b/pairent_frontend_react/public/images/icons/calendar-day.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/pairent_frontend_react/public/images/icons/calendar.svg b/pairent_frontend_react/public/images/icons/calendar.svg new file mode 100644 index 0000000..e7d3fbc --- /dev/null +++ b/pairent_frontend_react/public/images/icons/calendar.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pairent_frontend_react/public/images/icons/eraser-fill.svg b/pairent_frontend_react/public/images/icons/eraser-fill.svg new file mode 100644 index 0000000..aa30486 --- /dev/null +++ b/pairent_frontend_react/public/images/icons/eraser-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx b/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx index 9f25629..9cd8d56 100644 --- a/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx +++ b/pairent_frontend_react/src/components/UI/Icon/SVGIcon.jsx @@ -9,4 +9,5 @@ export default styled.div` background-size: contain; margin: 0 8px; display: inline-block; + transform: translateY(2px) `; \ No newline at end of file diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx new file mode 100644 index 0000000..b6c144e --- /dev/null +++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx @@ -0,0 +1,182 @@ +import React, { useState } from "react"; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Scrollbar, Navigation } from 'swiper/core'; +import ISVGIcon from '../../components/UI/Icon/SVGIcon'; +import { Formik, Field, Form } from 'formik'; + +import styled from 'styled-components'; +import 'swiper/css'; +import 'swiper/css/scrollbar'; +import 'swiper/css/navigation'; + +// swiper customization +import './swiper.css'; + + +const SVGIcon = styled(ISVGIcon)` + margin-left:0; +`; + +const Title = styled.p` + font-size: 20pt; + font-weight: 600; + text-align: center; + margin: 32px 0; + text-shadow: 0 2px 1px #00000020; +`; + +const HighlightWord = styled.span` + color: cornflowerblue; +`; + +const SwiperImage = styled.div` + background: url(${props => props.src ? props.src : ''}); + background-repeat: no-repeat; + background-size: cover; + + width: 800px; + height: 400px; +`; + +const Filters = styled.div` + background: url(/images/filter.png); + height: 300px; + width: 1150px; + margin: 0 auto; + border-radius: 20px; + box-shadow: 0 2px 12px #00000060; + padding: 30px; + text-shadow: 0 2px 16px #ffffffa0; +`; + +const PeriodFilter = styled.div` + display: block; + + margin: 12px 0; +`; + +const PeriodButton = styled.button` + width: fit-content; + height: 27px; + display: inline-block; + margin-right: 16px; + + border-radius: 14px; + padding: 0 16px; + box-shadow: 0 2px 16px #ffffff30; + + color: ${props => props.active ? 'green' : 'black'}; + box-sizing: border-box; + ${props => props.active ? 'font-weight: 600;' : ''} +`; + +const FilterText = styled.h1` + font-size: 16pt; + color: #f0f4f0; + user-select: none; + + padding-bottom: 6px; + border-bottom: 1px solid #f0f2f030; +`; + +const ClearButton = styled(PeriodButton)` + float: right; + color: darkred; + margin-right: 0; +`; + +const SearchBarFilter = styled.div` + background: #f2f3f2; + border-radius: 12px; + width: 100%; + height: 56px; + margin-top: 12px; + font-weight: 400 +`; + +const SubmitBtn = styled.button` + background: darkblue; +`; + +const FiltersForm = () => { + + const def_form = { + per_day: false, + per_month: false + }; + + const submitted = (a) => { + console.log(a); + } + + return ( + { + console.log(values); + }} + > +
+ + Фильтры + + + + + Посуточно + + + + Ежемесячно + + + + Сбросить + + + + + asbvccxcz + + + + +
+ + ); +} + +export default function IndexPage(props) { + return ( + <> +
+ + + + + + + + + + + Выбор квартиры во + <HighlightWord> Владивостоке</HighlightWord> + + + + + + ); +} \ No newline at end of file diff --git a/pairent_frontend_react/src/pages/IndexPage/swiper.css b/pairent_frontend_react/src/pages/IndexPage/swiper.css new file mode 100644 index 0000000..7ad5888 --- /dev/null +++ b/pairent_frontend_react/src/pages/IndexPage/swiper.css @@ -0,0 +1,12 @@ +:root { + --swiper-scrollbar-drag-bg-color: #e1e3e1a0; + --swiper-scrollbar-size: 5px; + --swiper-scrollbar-bottom: 0px; + --swiper-scrollbar-border-radius: 5px; + + --swiper-navigation-color: white +} + +.swiper { + box-shadow: 0 2px 12px #00000030; +} \ No newline at end of file diff --git a/pairent_frontend_react/src/router/index.jsx b/pairent_frontend_react/src/router/index.jsx index a07cca7..207fe4e 100644 --- a/pairent_frontend_react/src/router/index.jsx +++ b/pairent_frontend_react/src/router/index.jsx @@ -1,5 +1,6 @@ import Favorites from "../pages/Favorites"; import Comparisons from "../pages/Comparisons"; +import IndexPage from "../pages/IndexPage"; // НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ // export const privateRoutes = [ @@ -9,9 +10,9 @@ import Comparisons from "../pages/Comparisons"; export default Object.freeze({ publicRoutes: [ - {path: '/', component: , exact: true}, - {path: '/favorites', component: , exact: true}, - {path: '/comparisons', component: , exact: true}, + {path: '/', component: , exact: true}, + {path: '/favorites', component: , exact: true}, + {path: '/comparisons', component: , exact: true}, ], privateRoutes: [] }) \ No newline at end of file diff --git a/pairent_frontend_react/yarn.lock b/pairent_frontend_react/yarn.lock index 819577f..e94f92d 100644 --- a/pairent_frontend_react/yarn.lock +++ b/pairent_frontend_react/yarn.lock @@ -1598,6 +1598,11 @@ binary-extensions@^2.0.0: resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== +bootstrap-icons@^1.10.5: + version "1.10.5" + resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz#5a1bbb1bb2212397d416587db1d422cc9501847c" + integrity sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -1813,6 +1818,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5" @@ -2200,6 +2210,19 @@ form-data@^4.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +formik@^2.2.9: + version "2.2.9" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0" + integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^1.10.0" + fs-readdir-recursive@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" @@ -2365,6 +2388,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + ignore@^5.2.0: version "5.2.4" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" @@ -2699,6 +2729,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -2709,7 +2744,7 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash@^4.17.15: +lodash@^4.17.15, lodash@^4.17.21: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -3010,7 +3045,12 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -3235,6 +3275,11 @@ source-map-js@^1.0.2: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== +ssr-window@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be" + integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ== + stack-utils@^2.0.3: version "2.0.6" resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f" @@ -3354,11 +3399,23 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +swiper@^9.2.4: + version "9.2.4" + resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.2.4.tgz#2fa3cf58cef586366f674a10fa56fe6eec2026fe" + integrity sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg== + dependencies: + ssr-window "^4.0.2" + text-table@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" @@ -3371,6 +3428,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +tslib@^1.10.0: + version "1.14.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" + integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== + tslib@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"