сделал анимированный гамбургер в main и переписал несколько стилей
This commit is contained in:
parent
30421a97da
commit
bdbf2c0080
64
package-lock.json
generated
64
package-lock.json
generated
@ -18,9 +18,11 @@
|
||||
"matchmedia": "^0.1.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.15.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-tinder-card": "^1.6.2",
|
||||
"sass": "^1.66.1",
|
||||
"web-vitals": "^2.1.4",
|
||||
"workbox-background-sync": "^6.6.0",
|
||||
"workbox-broadcast-update": "^6.6.0",
|
||||
@ -34,8 +36,7 @@
|
||||
"workbox-routing": "^6.6.0",
|
||||
"workbox-strategies": "^6.6.0",
|
||||
"workbox-streams": "^6.6.0"
|
||||
},
|
||||
"devDependencies": {}
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
"version": "1.2.6",
|
||||
@ -3409,6 +3410,14 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
|
||||
"integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -9450,6 +9459,11 @@
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
|
||||
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@ -14924,6 +14938,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
|
||||
"integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.8.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
|
||||
"integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.8.0",
|
||||
"react-router": "6.15.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -15505,6 +15549,22 @@
|
||||
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
|
||||
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.66.1",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
|
||||
"integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-loader": {
|
||||
"version": "12.6.0",
|
||||
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
|
||||
|
||||
@ -12,9 +12,11 @@
|
||||
"matchmedia": "^0.1.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.15.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-tinder-card": "^1.6.2",
|
||||
"sass": "^1.66.1",
|
||||
"web-vitals": "^2.1.4",
|
||||
"workbox-background-sync": "^6.6.0",
|
||||
"workbox-broadcast-update": "^6.6.0",
|
||||
@ -53,6 +55,10 @@
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-scripts": "^5.0.1",
|
||||
"sass": "^1.38.0"
|
||||
},
|
||||
"main": "index.js",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Start from './components/Start/Start';
|
||||
import Second from './components/Second/Second';
|
||||
import Tinder from './components/Tinder/Tinder';
|
||||
import Main from './components/Main/Main';
|
||||
import City from './components/City/City';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Start from '../Start/Start';
|
||||
import Second from '../Second/Second';
|
||||
import Tinder from '../Tinder/Tinder';
|
||||
import Main from '../Main/Main';
|
||||
import City from '../City/City';
|
||||
import axios from 'axios';
|
||||
import './App.css';
|
||||
|
||||
@ -48,30 +49,17 @@ function App() {
|
||||
console.log(userData);
|
||||
}, [userData]);
|
||||
|
||||
let content = null;
|
||||
switch (buttonValue) {
|
||||
case '/second':
|
||||
content = <Second getValue={handleButtonValue}setUserData={setUserData} />
|
||||
break;
|
||||
case '/tinder':
|
||||
content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />
|
||||
break;
|
||||
case '/main':
|
||||
content = <Main />
|
||||
break;
|
||||
case '/city':
|
||||
content = <City getValue={handleButtonValue} setUserData={setUserData} />
|
||||
break;
|
||||
default:
|
||||
content = <Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />
|
||||
}
|
||||
|
||||
const arrayLength = userData.unique ? userData.unique.length : 0;
|
||||
|
||||
return (
|
||||
<div className={`App ${isHidden ? 'hidden' : ''}`}>
|
||||
{arrayLength !== 0 ? <Main userData={userData}/> : content}
|
||||
</div>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />}/>
|
||||
<Route path="second" element={<Second getValue={handleButtonValue} setUserData={setUserData} />} />
|
||||
<Route path="tinder" element={<Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />} />
|
||||
<Route path="city" element={<City getValue={handleButtonValue} setUserData={setUserData} />} />
|
||||
<Route path="main" element={<Main userData={userData}/>} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
/* .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;
|
||||
font-size: 20px;
|
||||
border-radius: 27px;
|
||||
border: none;
|
||||
background-color: #46A2E3;
|
||||
font-family: 'Raleway';
|
||||
color: #FFFFFF;
|
||||
font-weight: 97px;
|
||||
}
|
||||
|
||||
.animated-button:hover {
|
||||
background-color: #398ac5;
|
||||
}
|
||||
|
||||
.ab {
|
||||
width: 304px;
|
||||
height: 54px;
|
||||
font-size: 20px;
|
||||
border-radius: 27px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
font-family: 'Raleway';
|
||||
color: #398ac5;
|
||||
font-weight: 97px;
|
||||
}
|
||||
|
||||
.ab:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/*
|
||||
.button-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
} */
|
||||
@ -1,10 +1,13 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import axios from "axios";
|
||||
import './City.css'
|
||||
import './City.scss'
|
||||
|
||||
const City = (props) => {
|
||||
const route = props.getValue;
|
||||
const setUserData = props.setUserData
|
||||
const second = useNavigate();
|
||||
|
||||
const [cityOptions, setCityOptions] = useState([]);
|
||||
const [filteredCityOptions, setFilteredCityOptions] = useState([]);
|
||||
@ -51,48 +54,13 @@ const City = (props) => {
|
||||
}, [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={{
|
||||
position: 'fixed',
|
||||
top: 100,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
gap: 80,
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: 304,
|
||||
}}>
|
||||
<img src='./image 2.png' alt="#" draggable="false" style={{
|
||||
width: 282,
|
||||
height: 282,
|
||||
}} />
|
||||
<div className="container container_space_around">
|
||||
<div className="city">
|
||||
<div className="city__plannet">
|
||||
<img src='./image 2.png' alt="#" draggable="false" className="city__plannet_img"/>
|
||||
</div>
|
||||
<span style={{
|
||||
fontWeight: 700,
|
||||
fontSize: 30,
|
||||
color: '#000'
|
||||
}}></span>
|
||||
<select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" style={{
|
||||
height: 40,
|
||||
width: 304,
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
padding: '5px',
|
||||
}}>
|
||||
<option value="" style={{
|
||||
maxWidth: 200,
|
||||
}}>Выберите город...</option>
|
||||
<select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" className="city__choise">
|
||||
<option value="" className="city__choise_option">Выберите город...</option>
|
||||
{filteredCityOptions.map(option => (
|
||||
<option key={option.id} value={option.name} style={{
|
||||
maxWidth: 200,
|
||||
@ -101,17 +69,11 @@ const City = (props) => {
|
||||
</select>
|
||||
</div>
|
||||
{buttonsVisible ? (
|
||||
<div className="button-container" style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'fixed',
|
||||
bottom: 50,
|
||||
gap: 10,
|
||||
}}>
|
||||
<div className="button-container">
|
||||
<button
|
||||
className="animated-button"
|
||||
onClick={() => {
|
||||
route('/second')
|
||||
second('/second')
|
||||
setUserData({selectedCity: selectedCity});
|
||||
console.log(selectedCity);
|
||||
}}
|
||||
@ -119,25 +81,13 @@ const City = (props) => {
|
||||
Я в этом городе
|
||||
</button>
|
||||
<button
|
||||
className="ab"
|
||||
className="city__ticket"
|
||||
onClick={() => window.open('https://www.aviasales.ru/?marker=15468.ydof241309826304&yclid=18373991699987824639¶ms=TGK1')}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: 42,
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className="city__ticket_img"
|
||||
src="./icon200.png"
|
||||
alt="#"
|
||||
style={{
|
||||
fontSize: 20,
|
||||
width: 30,
|
||||
height: 30,
|
||||
marginRight: 10,
|
||||
}}
|
||||
/>
|
||||
Купить билет
|
||||
</button>
|
||||
|
||||
96
src/components/City/City.scss
Normal file
96
src/components/City/City.scss
Normal file
@ -0,0 +1,96 @@
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.animated-button {
|
||||
width: 304px;
|
||||
height: 54px;
|
||||
font-size: 20px;
|
||||
border-radius: 27px;
|
||||
border: none;
|
||||
background-color: #46A2E3;
|
||||
font-family: 'Raleway';
|
||||
color: #FFFFFF;
|
||||
font-weight: 97px;
|
||||
&:hover {
|
||||
background-color: #398ac5;
|
||||
}
|
||||
}
|
||||
.city__ticket {
|
||||
width: 304px;
|
||||
height: 54px;
|
||||
font-size: 20px;
|
||||
border-radius: 27px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
font-family: 'Raleway';
|
||||
color: #398ac5;
|
||||
font-weight: 97px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
border: none;
|
||||
&_img {
|
||||
font-size: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.button-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
} */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 95vh;
|
||||
|
||||
align-items: 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%);
|
||||
&_space_around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
.city {
|
||||
height: 400px;
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 80px;
|
||||
&__plannet {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 304px;
|
||||
&_img {
|
||||
width: 282px;
|
||||
height: 282px;
|
||||
}
|
||||
}
|
||||
&__choise {
|
||||
height: 40px;
|
||||
width: 304px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
|
||||
&_option {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
0
src/components/Footer/footer.scss
Normal file
0
src/components/Footer/footer.scss
Normal file
87
src/components/Header/Header.js
Normal file
87
src/components/Header/Header.js
Normal file
@ -0,0 +1,87 @@
|
||||
import './header.scss';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
|
||||
const Header = () => {
|
||||
useEffect(() => {
|
||||
const humburger = document.querySelector('.hamburger');
|
||||
const header = document.querySelector('.header__navigation');
|
||||
console.log(humburger);
|
||||
|
||||
humburger.addEventListener('click', (e) => {
|
||||
e.currentTarget.classList.toggle('hamburger_active');
|
||||
header.classList.toggle('hide');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return () => {
|
||||
humburger.removeEventListener('click', (e) => {
|
||||
e.currentTarget.classList.toggle('hamburger_active');
|
||||
header.classList.toggle('hide');
|
||||
});
|
||||
|
||||
};
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<header className="header" style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<div className="header__container" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingLeft: '40px',
|
||||
height: 79,
|
||||
|
||||
backgroundColor: '#ffffff',
|
||||
}}>
|
||||
<div className="header__logo" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<img src="./logo5121.png" alt="#" className="header__logo_img" style={{
|
||||
height: 53,
|
||||
width: 53,
|
||||
}}/>
|
||||
<span className="header__title" style={{
|
||||
color: '#F68C43',
|
||||
width: '60%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'Raleway',
|
||||
fontSize: '20px',
|
||||
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
|
||||
</div>
|
||||
<button className="header__btn" style={{
|
||||
backgroundColor: '#fff',
|
||||
border: 'none',
|
||||
}}>
|
||||
|
||||
</button>
|
||||
<div className='hamburger'>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='header__navigation hide'>
|
||||
<a href='#' className='header__navigation_link'>Кино по пушкинской карте</a>
|
||||
<a href='#' className='header__navigation_link'>Достопримечательности</a>
|
||||
<a href='#' className='header__navigation_link'>Отели</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
78
src/components/Header/header.scss
Normal file
78
src/components/Header/header.scss
Normal file
@ -0,0 +1,78 @@
|
||||
.hamburger {
|
||||
display: block;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 28px;
|
||||
transform: translateX(-50%);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
span {
|
||||
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
margin-top: 5px;
|
||||
&:nth-child(1) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
&_active {
|
||||
margin-top: 6px;
|
||||
span {
|
||||
transition: ease 0.5s;
|
||||
&:nth-child(1) {
|
||||
margin-top: -2px;
|
||||
transform: translateY(4px) rotate(-45deg);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
margin-top: -3px;
|
||||
transform: translateY(4px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
|
||||
&__navigation {
|
||||
transition:ease 0.6s;
|
||||
transform: translateX(0%);
|
||||
height: 200%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
width: 60%;
|
||||
background-color: rgba( 0, 0, 0, 0.5 );
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
padding-left: 30px;
|
||||
padding-top: 100px;
|
||||
|
||||
&_link {
|
||||
margin-top: 6px;
|
||||
z-index: 1;
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&__container {
|
||||
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
|
||||
const Header = () => {
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingLeft: '10px',
|
||||
height: 79,
|
||||
width: 390,
|
||||
backgroundColor: '#ffffff',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<img src="./logo5121.png" alt="#" style={{
|
||||
height: 53,
|
||||
width: 53,
|
||||
}}/>
|
||||
<span style={{
|
||||
color: '#F68C43',
|
||||
width: '60%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'Raleway',
|
||||
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,
|
||||
}}/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Header from "./Header";
|
||||
import Card from "./Card";
|
||||
import Footer from "./Footer";
|
||||
import Header from "../Header/Header";
|
||||
import Card from "../Card/Card";
|
||||
import Footer from "../Footer/Footer";
|
||||
|
||||
const Main = ({ userData }) => {
|
||||
|
||||
@ -50,7 +50,7 @@ const Main = ({ userData }) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{paddingTop:'70px'}}>
|
||||
<Header />
|
||||
<Card city={userData.selectedCity}/>
|
||||
<div style={{
|
||||
|
||||
0
src/components/Main/main.scss
Normal file
0
src/components/Main/main.scss
Normal file
@ -1,48 +1,26 @@
|
||||
import React from "react"
|
||||
import './style.css'
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './second.scss';
|
||||
import Icon from './images/Vector.svg'
|
||||
|
||||
|
||||
const Second = (props) => {
|
||||
|
||||
const route = props.getValue;
|
||||
|
||||
const tinder = useNavigate();
|
||||
const main = useNavigate();
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignContent: 'center',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
height: '95vh' ,
|
||||
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%)',
|
||||
filter: 'blur 2',
|
||||
paddingBottom:10,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div className="container">
|
||||
<img src={Icon} alt='#'/>
|
||||
<div style={{
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
gap:20,
|
||||
alignItems:'center',
|
||||
}}>
|
||||
<h1 className="main_text">Давайте<br/>знакомиться!</h1>
|
||||
<p style={{
|
||||
textAlign:'center',
|
||||
color:'#6C6C6C',
|
||||
}} className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
|
||||
<div className="container__description">
|
||||
<h1 className="container__main_text">Давайте<br/>знакомиться!</h1>
|
||||
<p className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
|
||||
для вас мероприятия</p>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display:'flex',
|
||||
flexDirection:'column',
|
||||
gap:15,
|
||||
alignItems:'center',
|
||||
}}>
|
||||
<button className="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
|
||||
<button className="btn_second" onClick={() => route('/main')}>Пропустить</button>
|
||||
<div className="btn__container">
|
||||
<button className="btn_first" onClick={() => tinder('/tinder')}>Давайте!</button>
|
||||
<button className="btn_second" onClick={() => main('/main')}>Пропустить</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
77
src/components/Second/second.scss
Normal file
77
src/components/Second/second.scss
Normal file
@ -0,0 +1,77 @@
|
||||
@font-face {
|
||||
font-family: "Raleway";
|
||||
src: url("../Second/fonts/Raleway.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
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%);
|
||||
filter: blur(2);
|
||||
padding-bottom: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
&__description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
&__main_text{
|
||||
font-size: 45px;
|
||||
text-align: center;
|
||||
font-family: "Raleway";
|
||||
p {
|
||||
font-size: 18px;
|
||||
color: #6C6C6C;
|
||||
text-align: center;
|
||||
width: 332px;
|
||||
font-family: "Raleway";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.btn_first{
|
||||
width: 231px;
|
||||
height: 61px;
|
||||
background: #46A2E3;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 53px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn_first:hover {
|
||||
background-color: #398ac5;
|
||||
}
|
||||
|
||||
.btn_second{
|
||||
width: 169px;
|
||||
height: 49px;
|
||||
background: #7dc5f8;
|
||||
border: #0094FF;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
border-radius: 53px;
|
||||
}
|
||||
|
||||
.btn_second:hover {
|
||||
background-color: #398ac5;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Raleway";
|
||||
src: url("../Second/fonts/Raleway.ttf");
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main_text{
|
||||
font-size: 45px;
|
||||
text-align: center;
|
||||
font-family: "Raleway";
|
||||
|
||||
}
|
||||
.text{
|
||||
font-size: 18px;
|
||||
color: #6C6C6C;
|
||||
text-align: center;
|
||||
width: 332px;
|
||||
font-family: "Raleway";
|
||||
}
|
||||
.btn_first{
|
||||
width: 231px;
|
||||
height: 61px;
|
||||
background: #46A2E3;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 53px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn_first:hover {
|
||||
background-color: #398ac5;
|
||||
}
|
||||
|
||||
.btn_second{
|
||||
width: 169px;
|
||||
height: 49px;
|
||||
background: #7dc5f8;
|
||||
border: #0094FF;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
border-radius: 53px;
|
||||
}
|
||||
|
||||
.btn_second:hover {
|
||||
background-color: #398ac5;
|
||||
}
|
||||
0
src/components/SetupTests/setupTests.js
Normal file
0
src/components/SetupTests/setupTests.js
Normal file
@ -1,69 +1,50 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './start.scss';
|
||||
|
||||
|
||||
const Start = (props) => {
|
||||
const history = useNavigate();
|
||||
const kek = './circle.html';
|
||||
|
||||
const route = props.getValue;
|
||||
const kek = './circle.html'
|
||||
function hideAddressBar() {
|
||||
if (document.documentElement.scrollHeight < window.outerHeight / window.devicePixelRatio)
|
||||
document.documentElement.style.height = (window.outerHeight / window.devicePixelRatio) + 'px';
|
||||
setTimeout(window.scrollTo(1, 1), 0);
|
||||
}
|
||||
|
||||
function hideAddressBar(){
|
||||
if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
|
||||
document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
|
||||
setTimeout(window.scrollTo(1,1),0);
|
||||
}
|
||||
window.addEventListener("load",function(){hideAddressBar();});
|
||||
window.addEventListener("orientationchange",function(){hideAddressBar();});
|
||||
window.addEventListener("load", function () { hideAddressBar(); });
|
||||
window.addEventListener("orientationchange", function () { hideAddressBar(); });
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (ev: MessageEvent<{ type: string }>) => {
|
||||
if (typeof ev.data !== 'object') return
|
||||
if (!ev.data.type) return
|
||||
if (ev.data.type !== 'button-click') return
|
||||
const handleButtonClick = () => {
|
||||
history('/city');
|
||||
};
|
||||
|
||||
route('/city')
|
||||
}
|
||||
useEffect(() => {
|
||||
const frame = document.querySelector("#start");
|
||||
frame.addEventListener('load', () => {
|
||||
frame.contentWindow.addEventListener('click', () => {
|
||||
handleButtonClick();
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('message', handler)
|
||||
return () => {
|
||||
frame.removeEventListener('load', () => {
|
||||
frame.contentWindow.removeEventListener('click', () => {
|
||||
});
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Don't forget to remove addEventListener
|
||||
return () => window.removeEventListener('message', handler)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-evenly',
|
||||
height: '95vh',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<img src="./logo192.png" alt="logo" style={{width: '181px', height: '181px'}} />
|
||||
<span style={{
|
||||
color: '#F68C43',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'Raleway',
|
||||
fontSize: '40px',
|
||||
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
|
||||
</div>
|
||||
|
||||
<iframe scrolling="no" src={kek} style={{
|
||||
overflow: 'hidden',
|
||||
border: 'none',
|
||||
width: '440px',
|
||||
height: '440px',
|
||||
}}></iframe>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="container container_space_around">
|
||||
<div className="header">
|
||||
<img src="./logo192.png" alt="logo" className="header__logo"/>
|
||||
<span className="header__text">Путешествия<p>Просто!</p></span>
|
||||
</div>
|
||||
<iframe id="start" scrolling="no" src={kek} className="content__btn"></iframe>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Start;
|
||||
37
src/components/Start/start.scss
Normal file
37
src/components/Start/start.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
height: 95vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&__logo {
|
||||
width: 181px;
|
||||
height: 181px;
|
||||
}
|
||||
&__text {
|
||||
color: #F68C43;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
font-weight: 700;
|
||||
font-family: 'Raleway';
|
||||
font-size: 40px;
|
||||
p {
|
||||
color: #4EB0F2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content__btn {
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
width: 440px;
|
||||
height: 440px;
|
||||
}
|
||||
@ -1,12 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import TinderCard from 'react-tinder-card';
|
||||
import './Tinder.css';
|
||||
import './Tinder.scss';
|
||||
|
||||
const Tinder = (props) => {
|
||||
|
||||
const route = props.getValue;
|
||||
const cardInfo = props.cardInfo;
|
||||
const setUserData = props.setUserData;
|
||||
const main = useNavigate();
|
||||
|
||||
const [lastDirection, setLastDirection] = useState();
|
||||
const [cardId, setCardId] = useState([]);
|
||||
@ -32,14 +34,7 @@ const Tinder = (props) => {
|
||||
};
|
||||
|
||||
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 className='tinder__flex'>
|
||||
<div className='tinder-container'>
|
||||
<div className='card-container'>
|
||||
{cardInfo.map((card) => (
|
||||
@ -51,74 +46,33 @@ const Tinder = (props) => {
|
||||
var unique = [...new Set(cardId)]
|
||||
var uniqueIds = [...new Set(allIds)];
|
||||
if(uniqueIds.length === cardInfo.length) {
|
||||
route('/main');
|
||||
main('/main');
|
||||
setUserData(prevUserData => ({ ...prevUserData, unique: unique }));
|
||||
console.log(unique);
|
||||
console.log(props.userData);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className='card'>
|
||||
<div
|
||||
className='card-content'
|
||||
style={{
|
||||
width: '300px',
|
||||
height: '500px',
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingTop: '10px',
|
||||
}}>
|
||||
<div style={{
|
||||
height: '300px',
|
||||
width: '245px',
|
||||
borderRadius: '10px',
|
||||
backgroundImage: `url(${card.imageURL})`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
>
|
||||
<div className='card__img' style={{
|
||||
backgroundImage: `url(${card.imageURL})`
|
||||
}}/>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
height: '150px',
|
||||
}}>
|
||||
<div className='card__description_container'>
|
||||
<h3 className="noselect text">{card.question}</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginLeft: '18px',
|
||||
marginRight: '18px',
|
||||
}}>
|
||||
<div className='btn__container_tinder'>
|
||||
<button
|
||||
className="noselect"
|
||||
style={{
|
||||
height: '69px',
|
||||
width: '69px',
|
||||
backgroundColor: 'rgb(0,0,0,0)',
|
||||
border: 'none',
|
||||
}}
|
||||
className="btn__tinder noselect"
|
||||
onClick={() => handleDislike(card.id)}
|
||||
>
|
||||
<img draggable="false" src="./Dis.png" alt='#' style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} onClick={() => handleDislike(card.id)}/>
|
||||
<img draggable="false" src="./Dis.png" alt='#' className='card__choise_img' onClick={() => handleDislike(card.id)}/>
|
||||
</button>
|
||||
<button
|
||||
className="noselect"
|
||||
style={{
|
||||
height: '69px',
|
||||
width: '69px',
|
||||
backgroundColor: 'rgb(0,0,0,0)',
|
||||
border: 'none',
|
||||
}}
|
||||
className="btn__tinder noselect"
|
||||
|
||||
onClick={() => handleLike(card.id)}
|
||||
>
|
||||
<img draggable="false" src="./Like.png" alt='#' style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} onClick={() => handleLike(card.id)}/>
|
||||
<img draggable="false" src="./Like.png" alt='#' className='card__choise_img' onClick={() => handleLike(card.id)}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -80,6 +80,24 @@
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
&__choise_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&__img {
|
||||
height: 300px;
|
||||
width: 245px;
|
||||
border-radius: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
&__description_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@ -90,8 +108,34 @@
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.tinder__flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
justify-content: space-around;
|
||||
align-items: 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%);
|
||||
|
||||
}
|
||||
.btn__container_tinder {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 0 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn__tinder {
|
||||
height: 69px;
|
||||
width: 69px;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import App from './components/App/App';
|
||||
import * as serviceWorkerRegistration from './components/ServiceWorkerRegistration/serviceWorkerRegistration';
|
||||
import reportWebVitals from './components/ReportWebVitals/reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user