From 3a8cff16af003877b7fff919fb875f2cab0baaa0 Mon Sep 17 00:00:00 2001 From: Sevka <240303vilkov@gmail.com> Date: Wed, 6 Sep 2023 00:10:02 +0300 Subject: [PATCH] =?UTF-8?q?=D1=87=D0=B0=D1=81=D1=82=D1=8C=20=D1=81=D1=82?= =?UTF-8?q?=D0=B8=D0=BB=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 22 ++++++++ package.json | 5 ++ src/components/City/City.css | 46 --------------- src/components/City/City.js | 73 ++++-------------------- src/components/City/City.scss | 93 +++++++++++++++++++++++++++++++ src/components/Second/Second.js | 36 ++---------- src/components/Second/second.scss | 77 +++++++++++++++++++++++++ src/components/Second/style.css | 50 ----------------- src/components/Start/Start.js | 38 +++---------- src/components/Start/start.scss | 37 ++++++++++++ 10 files changed, 257 insertions(+), 220 deletions(-) delete mode 100644 src/components/City/City.css create mode 100644 src/components/City/City.scss create mode 100644 src/components/Second/second.scss delete mode 100644 src/components/Second/style.css create mode 100644 src/components/Start/start.scss diff --git a/package-lock.json b/package-lock.json index bb2d9a7..6de3ec7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "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", @@ -9458,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", @@ -15543,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", diff --git a/package.json b/package.json index 2d7fc46..0b8066a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "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", @@ -54,6 +55,10 @@ "last 1 safari version" ] }, + "devDependencies": { + "react-scripts": "^5.0.1", + "sass": "^1.38.0" + }, "main": "index.js", "keywords": [], "author": "", diff --git a/src/components/City/City.css b/src/components/City/City.css deleted file mode 100644 index c4215df..0000000 --- a/src/components/City/City.css +++ /dev/null @@ -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); -} */ \ No newline at end of file diff --git a/src/components/City/City.js b/src/components/City/City.js index a17685d..a355c67 100644 --- a/src/components/City/City.js +++ b/src/components/City/City.js @@ -2,7 +2,7 @@ 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; @@ -54,48 +54,13 @@ const City = (props) => { }, [selectedCity, cityOptions]); return ( -
-
-
- # +
+
+
+ #
- - cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" className="city__choise"> + {filteredCityOptions.map(option => (
{buttonsVisible ? ( -
+
diff --git a/src/components/City/City.scss b/src/components/City/City.scss new file mode 100644 index 0000000..2a0adca --- /dev/null +++ b/src/components/City/City.scss @@ -0,0 +1,93 @@ +.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: 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%); + +} +.city { + height: 520px; + 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; + } + } +} diff --git a/src/components/Second/Second.js b/src/components/Second/Second.js index fd01f4d..bced485 100644 --- a/src/components/Second/Second.js +++ b/src/components/Second/Second.js @@ -1,6 +1,6 @@ import React from "react" import { useNavigate } from "react-router-dom"; -import './style.css' +import './second.scss' import Icon from './images/Vector.svg' @@ -10,39 +10,15 @@ const Second = (props) => { const tinder = useNavigate(); const main = useNavigate(); return ( -
+
# -
-

Давайте
знакомиться!

-

Пройдите небольшой тест,
чтобы мы подобрали интересные
+

+

Давайте
знакомиться!

+

Пройдите небольшой тест,
чтобы мы подобрали интересные
для вас мероприятия

-
+
diff --git a/src/components/Second/second.scss b/src/components/Second/second.scss new file mode 100644 index 0000000..b90fa4f --- /dev/null +++ b/src/components/Second/second.scss @@ -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: 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); + 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; +} \ No newline at end of file diff --git a/src/components/Second/style.css b/src/components/Second/style.css deleted file mode 100644 index ef966da..0000000 --- a/src/components/Second/style.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/Start/Start.js b/src/components/Start/Start.js index e816ec9..f3ae8b2 100644 --- a/src/components/Start/Start.js +++ b/src/components/Start/Start.js @@ -1,5 +1,7 @@ import React, { useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import './start.scss'; + const Start = (props) => { const history = useNavigate(); @@ -35,38 +37,12 @@ const Start = (props) => { }, []); return ( -
-
- logo - Путешествия

Просто!

 +
+
+ logo + Путешествия

Просто!
- +
) }; diff --git a/src/components/Start/start.scss b/src/components/Start/start.scss new file mode 100644 index 0000000..85b1043 --- /dev/null +++ b/src/components/Start/start.scss @@ -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; +} \ No newline at end of file