global

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",

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",

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;
+	}
 </style>
 
 <!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
@@ -2734,6 +2737,18 @@
 			<polygon fill="#62381B" points="74.637,109.911 70.346,116.354 74.69,118.545 78.333,113.075 			"/>
 		</g>
 	</g>
+		<g id="startButtonComponent">
+			<line fill="none" x1="136.654" y1="231.395" x2="287.233" y2="198.513"/>
+			<text transform="matrix(0.977 -0.2134 0 1 149.3367 226.363)" font-family="'Pathway Gothic One'" font-size="39.6581">T</text>
+			<text transform="matrix(0.977 -0.2133 0 1 161.5945 223.6863)" font-family="'Pathway Gothic One'" font-size="39.6581">R</text>
+			<text transform="matrix(0.977 -0.2133 0 1 175.5847 220.6306)" font-family="'Pathway Gothic One'" font-size="39.6581">A</text>
+			<text transform="matrix(0.977 -0.2133 0 1 190.0623 217.4695)" font-family="'Pathway Gothic One'" font-size="39.6581">V</text>
+			<text transform="matrix(0.977 -0.2133 0 1 203.6252 214.5085)" font-family="'Pathway Gothic One'" font-size="39.6581">E</text>
+			<text transform="matrix(0.977 -0.2133 0 1 215.5266 211.9099)" font-family="'Pathway Gothic One'" font-size="39.6581">L</text>
+			<text transform="matrix(0.977 -0.2133 0 1 226.9495 209.4148)" font-family="'Pathway Gothic One'" font-size="39.6581">E</text>
+			<text transform="matrix(0.977 -0.2133 0 1 238.844 206.8171)" font-family="'Pathway Gothic One'" font-size="39.6581">R</text>
+		</g>
+	
 	<g id="innerCircles">
 		<path id="circle5" fill="#F15C27" d="M288.569,200.171c0.433-34.354-21.302-67.555-52.857-81.048
 			c-31.26-14.176-70.434-7.837-95.479,15.701c-25.674,22.849-35.486,61.307-24.13,93.701c10.636,32.639,41.765,57.229,76.03,59.846

src/App.js

@@ -3,6 +3,7 @@ import Start from './components/Start/Start';
 import Second from './components/Second/Second';
 import Tinder from './components/Tinder/Tinder';
 import Map from './components/Map/Map';
+import City from './components/City/City';
 import axios from 'axios';
 import './App.css';
 
@@ -36,7 +37,7 @@ function App() {
 
   let content = null;
   switch (buttonValue) {
-    case '/':
+    case '/second':
       content = <Second getValue={handleButtonValue}/>
       break;
     case '/tinder':
@@ -45,6 +46,9 @@ function App() {
     case '/map':
       content = <Map/>
       break;
+    case '/city':
+      content = <City getValue={handleButtonValue}/>
+    break;
     default: content = <Start getValue={handleButtonValue}/>
   }
 

src/components/City/City.css

@@ -0,0 +1,32 @@
+.button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+  }
+  
+  .animated-button {
+    width: 304px;
+    height: 54px;
+    border-radius: 27px;
+    border: none;
+    font-family: 'Raleway';
+    font-weight: bold;
+    color: #FFFFFF;
+    background-color: #46A2E3;
+    transition: background-color 0.3s ease;
+  }
+  
+  .animated-button:hover {
+    background-color: #357ABF;
+  }
+  
+  .button-container.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  
+  

src/components/City/City.js

@@ -1,9 +1,148 @@
-const City = () => {
+import React, { useEffect, useState } from "react";
-    return ( 
+import axios from "axios";
-        <div>
+
-            <input />
+const City = (props) => {
+  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 (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100vh',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
+    }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        gap: 50,
+      }}>
+        <div style={{
+          display: 'flex',
+          width: 304,
+        }}>
+          <img src="./image 2.png" alt="#" style={{
+            width: 282,
+            height: 282,
+          }} />
         </div>
-     );
+
+        <select onChange={e => cityHandler(e)} value={selectedCity} id="city" name="city" style={{
+          height: 40,
+          width: 304,
+          borderRadius: '20px',
+          padding: '5px',
+        }}>
+          <option value="" style={{
+                maxWidth: 200,
+            }}>Select a city</option>
+          {filteredCityOptions.map(option => (
+            <option key={option.id} value={option.name} style={{
+                maxWidth: 200,
+            }}>{option.name}</option>
+          ))}
+        </select>
+      </div>
+      {buttonsVisible ? (
+  <div className="button-container" style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    }}>
+    <button
+      onClick={() => route('/second')}
+      className="animated-button"
+      style={{
+        width: 304,
+        height: 54,
+        borderRadius: 27,
+        border: 'none',
+        backgroundColor: '#46A2E3',
+        fontFamily: 'Raleway',
+        color: '#FFFFFF',
+        fontWeight: '97px',
+      }}
+    >
+      Я в этом городе
+    </button>
+    <button
+      onClick={() => 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',
+      }}
+    >
+      <img
+        src="./icon200.png"
+        alt="#"
+        style={{
+          width: 30,
+          height: 30,
+          marginRight: 10,
+        }}
+      />
+      Купить билет
+    </button>
+  </div>
+) : null}
+    </div>
+  );
 }
 
 export default City;

src/components/Start/Start.js

@@ -24,7 +24,7 @@ const Start = (props) => {
                 fontFamily: 'Raleway',
                 fontSize: '40px',
             }}>Путешествия <p>просто!</p></span>
-            <button onClick={() => route('/')} style={{
+            <button onClick={() => route('/city')} style={{
                 height: 70,
                 borderRadius: '32px',
                 backgroundColor: '#0094FF',
@@ -39,7 +39,7 @@ const Start = (props) => {
                 border: 'none',
                 width: '440px',
                 height: '440px',
-            }}/>
+            }}></iframe>
         </div>
     ) 
 };

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;
+  }

src/components/Start/kek.html

@@ -0,0 +1,2 @@
+<!-- <?xml version="1.0" encoding="utf-8"?> -->
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

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);
   }
   

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 (
         <div className='tinder-container'>
             <h1>Card</h1>
@@ -35,24 +44,76 @@ const Tinder = (props) => {
                             var uniqueIds = [...new Set(allIds)];
                             if(uniqueIds.length === cardInfo.length) {
                                 route('/map');
-
                                 console.log(unique);
                             }
                         }}
                     >
+                        
                         <div className='card'>
-                        <div
+                            <div
-                            className='card-content'
+                                className='card-content'
-                            style={{
+                                style={{
-                                backgroundImage: `url(${card.imageURL})`,
+                                    width: '300px',
-                                width: '300px',
+                                    height: '400px',
-                                height: '400px',
+                                    borderRadius: '10px',
-                                borderRadius: '10px',
+                                    display: 'flex',
-                                backgroundRepeat: 'no-repeat',
+                                    flexDirection: 'column',
-                                backgroundPosition: 'center',
+                                    paddingTop: '10px',
-                            }}
+                                }}
-                        >
+                            >
-                                <h3>{card.question}</h3>
+                                <div style={{
+                                    height: '188px',
+                                    width: '245px',
+                                    borderRadius: '10px',
+                                    backgroundImage: `url(${card.imageURL})`,
+                                    backgroundRepeat: 'no-repeat',
+                                    backgroundPosition: 'center',
+                                }}/>
+                                <div style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'space-between',
+                                    height: '150px',
+                                    width: '100%',
+                                }}>
+                                    <h3>{card.question}</h3>
+                                <div style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    marginLeft: '3px',
+                                    marginRight: '3px',
+                                }}>
+                                    <button
+                                    style={{
+                                        height: '69px',
+                                        width: '69px',
+                                        backgroundColor: 'rgb(0,0,0,0)',
+                                        border: 'none',
+                                    }}
+                                    onClick={() => handleDislike(card.id)}
+                                >
+                                    <img src="./Dis.png" alt='#' style={{
+                                        height: '100%',
+                                        width: '100%',
+                                    }} onClick={() => handleDislike(card.id)}/>
+                                </button>
+                                <button
+                                    style={{
+                                        height: '69px',
+                                        width: '69px',
+                                        backgroundColor: 'rgb(0,0,0,0)',
+                                        border: 'none',
+                                    }}
+                                    onClick={() => handleLike(card.id)}
+                                >
+                                    <img src="./Like.png" alt='#' style={{
+                                        height: '100%',
+                                        width: '100%',
+                                    }} onClick={() => handleLike(card.id)}/>
+                                </button>
+                                </div>
+                                </div>
+                                
                             </div>
                         </div>
                     </TinderCard>