Графические фиксы
This commit is contained in:
parent
5cd2deb3df
commit
b2ed7b452e
GPG Key ID:
B6AD49C8C835460C
@ -1,32 +1,46 @@
|
||||
.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);
|
||||
}
|
||||
/* .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,5 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import './City.css'
|
||||
|
||||
const City = (props) => {
|
||||
const route = props.getValue;
|
||||
@ -72,7 +73,7 @@ const City = (props) => {
|
||||
justifyContent: 'center',
|
||||
width: 304,
|
||||
}}>
|
||||
<img src='./image 2.png' alt="#" style={{
|
||||
<img src='./image 2.png' alt="#" draggable="false" style={{
|
||||
width: 282,
|
||||
height: 282,
|
||||
}} />
|
||||
@ -81,16 +82,17 @@ const City = (props) => {
|
||||
fontWeight: 700,
|
||||
fontSize: 30,
|
||||
color: '#000'
|
||||
}}>Выберите город</span>
|
||||
<select onChange={e => cityHandler(e)} value={selectedCity} id="city" name="city" style={{
|
||||
}}></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,
|
||||
}}>Select a city</option>
|
||||
}}>Выберите город...</option>
|
||||
{filteredCityOptions.map(option => (
|
||||
<option key={option.id} value={option.name} style={{
|
||||
maxWidth: 200,
|
||||
@ -107,46 +109,31 @@ const City = (props) => {
|
||||
gap: 10,
|
||||
}}>
|
||||
<button
|
||||
className="animated-button"
|
||||
onClick={() => {
|
||||
route('/second')
|
||||
setUserData({selectedCity: selectedCity});
|
||||
console.log(selectedCity);
|
||||
}}
|
||||
className="animated-button"
|
||||
style={{
|
||||
width: 304,
|
||||
height: 54,
|
||||
borderRadius: 27,
|
||||
border: 'none',
|
||||
backgroundColor: '#46A2E3',
|
||||
fontFamily: 'Raleway',
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '97px',
|
||||
}}
|
||||
>
|
||||
Я в этом городе
|
||||
</button>
|
||||
<button
|
||||
className="ab"
|
||||
onClick={() => window.open('https://www.aviasales.ru/?marker=15468.ydof241309826304&yclid=18373991699987824639¶ms=TGK1')}
|
||||
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={{
|
||||
fontSize: 20,
|
||||
width: 30,
|
||||
height: 30,
|
||||
marginRight: 10,
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
|
||||
.tinder-container {
|
||||
margin-top: 30%;
|
||||
height: 85vh;
|
||||
@ -9,15 +10,34 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
||||
.card-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: 'Raleway';
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.swipe {
|
||||
margin-top: 15%;
|
||||
display: flex;
|
||||
|
||||
@ -32,6 +32,14 @@ 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-container'>
|
||||
<div className='card-container'>
|
||||
{cardInfo.map((card) => (
|
||||
@ -60,8 +68,7 @@ const Tinder = (props) => {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingTop: '10px',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div style={{
|
||||
height: '188px',
|
||||
width: '245px',
|
||||
@ -77,7 +84,7 @@ const Tinder = (props) => {
|
||||
height: '150px',
|
||||
width: '100%',
|
||||
}}>
|
||||
<h3>{card.question}</h3>
|
||||
<h3 className="noselect text">{card.question}</h3>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
@ -85,6 +92,7 @@ const Tinder = (props) => {
|
||||
marginRight: '3px',
|
||||
}}>
|
||||
<button
|
||||
className="noselect"
|
||||
style={{
|
||||
height: '69px',
|
||||
width: '69px',
|
||||
@ -93,12 +101,13 @@ const Tinder = (props) => {
|
||||
}}
|
||||
onClick={() => handleDislike(card.id)}
|
||||
>
|
||||
<img src="./dis.jpg" alt='#' style={{
|
||||
<img draggable="false" src="./Dis.png" alt='#' style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} onClick={() => handleDislike(card.id)}/>
|
||||
</button>
|
||||
<button
|
||||
className="noselect"
|
||||
style={{
|
||||
height: '69px',
|
||||
width: '69px',
|
||||
@ -107,7 +116,7 @@ const Tinder = (props) => {
|
||||
}}
|
||||
onClick={() => handleLike(card.id)}
|
||||
>
|
||||
<img src="./like.jpg" alt='#' style={{
|
||||
<img draggable="false" src="./Like.png" alt='#' style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} onClick={() => handleLike(card.id)}/>
|
||||
@ -121,6 +130,7 @@ const Tinder = (props) => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user