last
This commit is contained in:
VITALY-VORON
parent
5c5661bef5
commit
932362af0b
BIN
public/pngwing 7.png
Normal file
BIN
public/pngwing 7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 B |
@ -1,11 +1,11 @@
|
||||
/* .button-container {
|
||||
.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;
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* .button-container.visible {
|
||||
.button-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
} */
|
||||
}
|
||||
@ -93,6 +93,9 @@ const City = (props) => {
|
||||
<option value="" style={{
|
||||
maxWidth: 200,
|
||||
}}>Выберите город...</option>
|
||||
<option value="Таганрог" style={{
|
||||
maxWidth: 200,
|
||||
}}>Таганрог</option>
|
||||
{filteredCityOptions.map(option => (
|
||||
<option key={option.id} value={option.name} style={{
|
||||
maxWidth: 200,
|
||||
|
||||
33
src/components/Main/Footer.js
Normal file
33
src/components/Main/Footer.js
Normal file
@ -0,0 +1,33 @@
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
marginTop: 50,
|
||||
marginBottom: 50,
|
||||
}}>
|
||||
<img src="./logo5121.png" alt="#" style={{
|
||||
height: 53,
|
||||
width: 53,
|
||||
}}/>
|
||||
<span style={{
|
||||
color: '#F68C43',
|
||||
width: '30%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'Raleway',
|
||||
fontSize: '20px',
|
||||
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -1,4 +1,6 @@
|
||||
|
||||
const Header = () => {
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100%',
|
||||
@ -35,11 +37,17 @@ const Header = () => {
|
||||
fontSize: '20px',
|
||||
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
|
||||
</div>
|
||||
<button style={{
|
||||
backgroundColor: '#fff',
|
||||
border: 'none',
|
||||
}}>
|
||||
<img src="./menu.png" alt="#" style={{
|
||||
height: 20,
|
||||
width: 32,
|
||||
marginRight: 10
|
||||
marginRight: 10,
|
||||
}}/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,26 +2,27 @@ import React, { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Header from "./Header";
|
||||
import Card from "./Card";
|
||||
import Footer from "./Footer";
|
||||
|
||||
const Main = ({ userData }) => {
|
||||
|
||||
const [films, setFilms] = useState([]);
|
||||
const [gits, setGits] = useState([]);
|
||||
const [museum, setMuseum] = useState([]);
|
||||
const [attract, setAttract] = useState([]);
|
||||
const [hotel, setHotel] = useState([]);
|
||||
|
||||
const optionsFilms = {
|
||||
method: 'GET',
|
||||
url: `https://easytravel.zetcraft.ru/v1/GetAllFilmsInCity/${userData.selectedCity}`,
|
||||
};
|
||||
|
||||
const optionsGis = {
|
||||
const optionsAttract = {
|
||||
method: 'GET',
|
||||
url: `https://easytravel.zetcraft.ru/v1/GetAllGuides/${userData.selectedCity}`,
|
||||
url: `https://easytravel.zetcraft.ru/v1/GetAllAttractionsInCity/${userData.selectedCity}`,
|
||||
};
|
||||
|
||||
const optionsMuseum = {
|
||||
const optionsHotel = {
|
||||
method: 'GET',
|
||||
url: `https://easytravel.zetcraft.ru/v1/GetAllMuseum/${userData.selectedCity}`,
|
||||
url: `https://easytravel.zetcraft.ru/v1/GetAllHotelsInCity/${userData.selectedCity}`,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -33,23 +34,21 @@ const Main = ({ userData }) => {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
axios.request(optionsGis).then(function (response) {
|
||||
setGits(response.data);
|
||||
axios.request(optionsAttract).then(function (response) {
|
||||
setAttract(response.data);
|
||||
}).catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
axios.request(optionsMuseum).then(function (response) {
|
||||
setMuseum(response.data);
|
||||
axios.request(optionsHotel).then(function (response) {
|
||||
setHotel(response.data);
|
||||
}).catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
console.log(userData.unique);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
@ -59,6 +58,7 @@ const Main = ({ userData }) => {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
marginTop: 10
|
||||
}}>
|
||||
<h2>Кино по пушкинской карте</h2>
|
||||
<div style={{
|
||||
@ -66,6 +66,7 @@ const Main = ({ userData }) => {
|
||||
overflowX: 'auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: 20
|
||||
}}>
|
||||
<ul style={{
|
||||
display: 'flex',
|
||||
@ -74,7 +75,8 @@ const Main = ({ userData }) => {
|
||||
}}>
|
||||
{films.map((film, index) => (
|
||||
<li key={index} style={{
|
||||
marginRight: '10px',
|
||||
padding: '10px',
|
||||
marginRight: '30px',
|
||||
}}>
|
||||
<div key={index} style={{
|
||||
height: 200,
|
||||
@ -82,6 +84,8 @@ const Main = ({ userData }) => {
|
||||
display: 'flex',
|
||||
alignContent: 'center',
|
||||
flexDirection: 'column',
|
||||
borderRadius: '10px',
|
||||
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
@ -91,8 +95,16 @@ const Main = ({ userData }) => {
|
||||
<img src={film.imageURL} alt="#" style={{
|
||||
height: 110,
|
||||
width: 79,
|
||||
marginTop: 10,
|
||||
borderRadius: 10
|
||||
}}/>
|
||||
{film.filmName}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 80,
|
||||
}}>{film.filmName}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -100,20 +112,86 @@ const Main = ({ userData }) => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Тур. гиды г.{userData.selectedCity}</h2>
|
||||
<ul>
|
||||
{gits.map((guide, index) => (
|
||||
<li key={index}>{guide.name}</li>
|
||||
<h2 style={{
|
||||
marginTop: 20,
|
||||
marginBottom: 20
|
||||
}}>Достопримечательности</h2>
|
||||
<ul style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
listStyle: 'none',
|
||||
padding: 0,
|
||||
marginTop: 20,
|
||||
gap: 20,
|
||||
}}>
|
||||
{attract.map((attr, index) => (
|
||||
<li key={index}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
width: 400,
|
||||
}}>
|
||||
<img src={attr.imageURL} alt="#" style={{
|
||||
height: '92px',
|
||||
width: '107px',
|
||||
borderRadius: '10px'
|
||||
}}/>
|
||||
<div style={{
|
||||
width: 150
|
||||
}}>{attr.name}</div>
|
||||
<button style={{
|
||||
height: 33,
|
||||
width: 33,
|
||||
backgroundColor: 'rgb(0,0,0,0)',
|
||||
border: 'none'
|
||||
}}><img src="./pngwing 7.png" alt="#" /></button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2>Музеи г.{userData.selectedCity}</h2>
|
||||
<ul>
|
||||
{museum.map((museumItem, index) => (
|
||||
<li key={index}>{museumItem.name}</li>
|
||||
<h2 style={{
|
||||
marginBottom: 20,
|
||||
marginTop: 20,
|
||||
}}>Отели</h2>
|
||||
<ul style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
listStyle: 'none',
|
||||
padding: 0,
|
||||
marginTop: 20,
|
||||
gap: 20,
|
||||
}}>
|
||||
{hotel.map((hotelItem, index) => (
|
||||
<li key={index}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 20
|
||||
|
||||
}}>
|
||||
<img src={hotelItem.imageURL} alt="#" style={{
|
||||
height: 119,
|
||||
width: 184,
|
||||
borderRadius: 10,
|
||||
}}/>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: 20,
|
||||
width: 150,
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div>{hotelItem.name}</div>
|
||||
<div>{hotelItem.price}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user