global

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 = () => {
-    return ( 
-        <div>
-            <input />
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+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;
+
+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
-                            className='card-content'
-                            style={{
-                                backgroundImage: `url(${card.imageURL})`,
-                                width: '300px',
-                                height: '400px',
-                                borderRadius: '10px',
-                                backgroundRepeat: 'no-repeat',
-                                backgroundPosition: 'center',
-                            }}
-                        >
-                                <h3>{card.question}</h3>
+                            <div
+                                className='card-content'
+                                style={{
+                                    width: '300px',
+                                    height: '400px',
+                                    borderRadius: '10px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    paddingTop: '10px',
+                                }}
+                            >
+                                <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>