diff --git a/package-lock.json b/package-lock.json index d116cbd..77b9138 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,8 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "axios": "^1.4.0", "framer": "^2.3.0", + "matchmedia": "^0.1.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -5451,29 +5451,6 @@ "node": ">=4" } }, - "node_modules/axios": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", - "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", - "dependencies": { - "follow-redirects": "^1.15.0", - "form-data": "^4.0.0", - "proxy-from-env": "^1.1.0" - } - }, - "node_modules/axios/node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dependencies": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -6502,6 +6479,11 @@ "webpack": "^5.0.0" } }, + "node_modules/css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==" + }, "node_modules/css-minimizer-webpack-plugin": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz", @@ -12415,6 +12397,14 @@ "tmpl": "1.0.5" } }, + "node_modules/matchmedia": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/matchmedia/-/matchmedia-0.1.2.tgz", + "integrity": "sha512-ylpxHN2LdORLPJ62MAMBS1aXgwJYg4RunqwtQfREaAW6AV8wuPKb+6Ab+oE96npCaW2hVHZSmh3eIjOaYc4Fkw==", + "dependencies": { + "css-mediaquery": "^0.1.2" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -14609,11 +14599,6 @@ "node": ">= 0.10" } }, - "node_modules/proxy-from-env": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", - "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" - }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index 297481e..d6894a9 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "axios": "^1.4.0", "framer": "^2.3.0", + "matchmedia": "^0.1.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/public/Dis.png b/public/Dis.png new file mode 100644 index 0000000..c60fe03 Binary files /dev/null and b/public/Dis.png differ diff --git a/public/Like.png b/public/Like.png new file mode 100644 index 0000000..ad96629 Binary files /dev/null and b/public/Like.png differ diff --git a/public/circle.html b/public/circle.html index bea6109..2ff3974 100644 --- a/public/circle.html +++ b/public/circle.html @@ -121,6 +121,9 @@ -webkit-transform: translate3d(0, 0, 0); -webkit-animation: rotate-right 12s linear 0s infinite; } + .svg-button { + cursor: pointer; + } @@ -2734,6 +2737,18 @@ + + + T + R + A + V + E + L + E + R + + { + const route = props.getValue; + + const [cityOptions, setCityOptions] = useState([]); + const [filteredCityOptions, setFilteredCityOptions] = useState([]); + const [selectedCity, setSelectedCity] = useState(''); + const [buttonsVisible, setButtonsVisible] = useState(false); + + const cityHandler = (e) => { + setSelectedCity(e.target.value); + }; + + const options = { + method: 'GET', + url: 'https://easytravel.zetcraft.ru/v1/GetAllCity', + }; + + useEffect(() => { + axios.request(options) + .then(function (response) { + console.log(response.data); + setCityOptions(response.data); + setFilteredCityOptions(response.data); + }) + .catch(function (error) { + console.error(error); + }); + }, []); + + useEffect(() => { + const filteredOptions = cityOptions.filter(option => + option.name.toLowerCase().includes(selectedCity.toLowerCase()) + ); + setFilteredCityOptions(filteredOptions); + + setTimeout(() => { + setButtonsVisible(selectedCity !== ''); + }, 300); + }, [selectedCity, cityOptions]); + + useEffect(() => { + const filteredOptions = cityOptions.filter(option => + option.name.toLowerCase().includes(selectedCity.toLowerCase()) + ); + setFilteredCityOptions(filteredOptions); + }, [selectedCity, cityOptions]); + + return ( + + + + - ); + + cityHandler(e)} value={selectedCity} id="city" name="city" style={{ + height: 40, + width: 304, + borderRadius: '20px', + padding: '5px', + }}> + Select a city + {filteredCityOptions.map(option => ( + {option.name} + ))} + + + {buttonsVisible ? ( + + route('/second')} + className="animated-button" + style={{ + width: 304, + height: 54, + borderRadius: 27, + border: 'none', + backgroundColor: '#46A2E3', + fontFamily: 'Raleway', + color: '#FFFFFF', + fontWeight: '97px', + }} + > + Я в этом городе + + window.location.href = ''} + className="animated-button" + style={{ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: 304, + height: 42, + borderRadius: 27, + border: 'none', + backgroundColor: '#fff', + fontFamily: 'Raleway', + color: '#0C78FE', + fontWeight: '97px', + }} + > + + Купить билет + + +) : null} + + ); } - -export default City; \ No newline at end of file + +export default City; diff --git a/src/components/Start/Start.js b/src/components/Start/Start.js index e6da9c7..d51f564 100644 --- a/src/components/Start/Start.js +++ b/src/components/Start/Start.js @@ -24,7 +24,7 @@ const Start = (props) => { fontFamily: 'Raleway', fontSize: '40px', }}>Путешествия просто! - route('/')} style={{ + route('/city')} style={{ height: 70, borderRadius: '32px', backgroundColor: '#0094FF', @@ -39,7 +39,7 @@ const Start = (props) => { border: 'none', width: '440px', height: '440px', - }}/> + }}> ) }; diff --git a/src/components/Start/kek.css b/src/components/Start/kek.css new file mode 100644 index 0000000..3d53039 --- /dev/null +++ b/src/components/Start/kek.css @@ -0,0 +1,122 @@ +@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One); + +@-webkit-keyframes rotate-right { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } + } + @-webkit-keyframes rotate-left { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(-360deg); + } + } + @-webkit-keyframes hover { + 0% { + -webkit-transform: translateY(0%); + } + 50% { + -webkit-transform: translateY(5%); + } + 100% { + -webkit-transform: translateY(0%); + } + } + @-webkit-keyframes pull { + 0% { + -webkit-transform: scaleY(1); + } + 40% { + -webkit-transform: scaleY(1.01); + } + 60% { + -webkit-transform: scaleY(0.99); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(0.99); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(1); + } + } + #airplane2, #airplane1 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-right 60s linear 0s infinite; + } + #countryObjects { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-right 240s linear 0s infinite; + } + #floatingGlobe { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-left 360s linear 0s infinite; + } + #globe { + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: hover 0s linear 0s infinite; + } + #windmill { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 331px 201px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-right 2s linear 0s infinite; + } + #cloud1 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: hover 3s linear 1s infinite; + } + #cloud2 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: hover 3s linear 2s infinite; + } + #cloud3 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: hover 3s linear 3s infinite; + } + #circle1 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-right 12s linear 0s infinite; + } + #circle2 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-left 24s linear 0s infinite; + } + #circle3 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-right 12s linear 0s infinite; + } + #circle4 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-left 24s linear 0s infinite; + } + #circle5 { + -webkit-transform: translate3d(0, 0, 0); + -webkit-transform-origin: 200px 200px; + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation: rotate-right 12s linear 0s infinite; + } \ No newline at end of file diff --git a/src/components/Start/kek.html b/src/components/Start/kek.html new file mode 100644 index 0000000..603c795 --- /dev/null +++ b/src/components/Start/kek.html @@ -0,0 +1,2 @@ + + diff --git a/src/components/Tinder/Tinder.css b/src/components/Tinder/Tinder.css index 7d6c7ec..5e5cfe9 100644 --- a/src/components/Tinder/Tinder.css +++ b/src/components/Tinder/Tinder.css @@ -20,11 +20,17 @@ .swipe { margin-top: 15%; + display: flex; + gap: 5px; + flex-direction: column; + align-items: center; position: absolute; width: 100%; max-width: 300px; max-height: 400px; cursor: pointer; + border-radius: 10px; + background-color: #fff; transition: transform 0.05s ease-in-out, opacity 0.05s ease-in-out; } @@ -59,10 +65,11 @@ .card-content { border-radius: 10px; - /* padding: 8px; */ text-align: center; + align-items: center; + justify-content: space-between; width: 300px; - height: 400px; + height: 350px; background-color: rgba(255, 255, 255, 0.8); } diff --git a/src/components/Tinder/Tinder.js b/src/components/Tinder/Tinder.js index 07f3fb3..6920688 100644 --- a/src/components/Tinder/Tinder.js +++ b/src/components/Tinder/Tinder.js @@ -1,7 +1,6 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import TinderCard from 'react-tinder-card'; import './Tinder.css'; -import axios from 'axios'; const Tinder = (props) => { @@ -21,6 +20,16 @@ const Tinder = (props) => { }; }; + const handleDislike = (id) => { + console.log('left'); + swiped('left', id); + }; + + const handleLike = (id) => { + console.log('right'); + swiped('right', id); + }; + return ( Card @@ -35,24 +44,76 @@ const Tinder = (props) => { var uniqueIds = [...new Set(allIds)]; if(uniqueIds.length === cardInfo.length) { route('/map'); - console.log(unique); } }} > + - - {card.question} + + + + {card.question} + + handleDislike(card.id)} + > + handleDislike(card.id)}/> + + handleLike(card.id)} + > + handleLike(card.id)}/> + + + +
просто!