diff --git a/public/bonus.svg b/public/bonus.svg new file mode 100644 index 0000000..1aaec19 --- /dev/null +++ b/public/bonus.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/favorites.svg b/public/favorites.svg new file mode 100644 index 0000000..0a6b8cd --- /dev/null +++ b/public/favorites.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/generateTour.png b/public/generateTour.png new file mode 100644 index 0000000..c8f54fc Binary files /dev/null and b/public/generateTour.png differ diff --git a/public/icons/dz.svg b/public/icons/dz.svg new file mode 100644 index 0000000..cf28206 --- /dev/null +++ b/public/icons/dz.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/ok.svg b/public/icons/ok.svg new file mode 100644 index 0000000..1f150f1 --- /dev/null +++ b/public/icons/ok.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/tg.svg b/public/icons/tg.svg new file mode 100644 index 0000000..1976570 --- /dev/null +++ b/public/icons/tg.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/icons/vk.svg b/public/icons/vk.svg new file mode 100644 index 0000000..b0d1f87 --- /dev/null +++ b/public/icons/vk.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/yt.svg b/public/icons/yt.svg new file mode 100644 index 0000000..7e44be3 --- /dev/null +++ b/public/icons/yt.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/language.png b/public/language.png new file mode 100644 index 0000000..ae5fe28 Binary files /dev/null and b/public/language.png differ diff --git a/public/language.svg b/public/language.svg new file mode 100644 index 0000000..2518fb9 --- /dev/null +++ b/public/language.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/likeButton.svg b/public/likeButton.svg new file mode 100644 index 0000000..08c8781 --- /dev/null +++ b/public/likeButton.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/likeButtonActive.svg b/public/likeButtonActive.svg new file mode 100644 index 0000000..b29d6ef --- /dev/null +++ b/public/likeButtonActive.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..c1b4d12 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/magicWand.svg b/public/magicWand.svg new file mode 100644 index 0000000..68bcb70 --- /dev/null +++ b/public/magicWand.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/menu.svg b/public/menu.svg new file mode 100644 index 0000000..d17ca80 --- /dev/null +++ b/public/menu.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/profile.svg b/public/profile.svg new file mode 100644 index 0000000..570a720 --- /dev/null +++ b/public/profile.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/restourant.png b/public/restourant.png new file mode 100644 index 0000000..55333e9 Binary files /dev/null and b/public/restourant.png differ diff --git a/public/search.svg b/public/search.svg new file mode 100644 index 0000000..6614377 --- /dev/null +++ b/public/search.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/support.svg b/public/support.svg new file mode 100644 index 0000000..baa1a41 --- /dev/null +++ b/public/support.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 1617617..747637c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { configureRootTheme } from '@yandex/ui/Theme' -import { theme } from '@yandex/ui/Theme/presets/default' - - +import { Register } from './pages/Register'; import { MyMap } from './сomponents/map'; import 'mapbox-gl/dist/mapbox-gl.css'; diff --git a/src/elements/Button/style.css b/src/elements/Button/style.css index 9b27253..06643ca 100644 --- a/src/elements/Button/style.css +++ b/src/elements/Button/style.css @@ -6,4 +6,8 @@ border: none; width: 100%; cursor: pointer; + transition: 0.3s; +} +.button:hover{ + opacity: 0.5; } \ No newline at end of file diff --git a/src/elements/FavoriteCard/index.tsx b/src/elements/FavoriteCard/index.tsx new file mode 100644 index 0000000..0e90bd1 --- /dev/null +++ b/src/elements/FavoriteCard/index.tsx @@ -0,0 +1,26 @@ +import React, { useState } from "react"; +import './style.css' + +export interface FavoriteCardIE{ + title: string, + location:string, + imageURL:string +} + +export const FavoriteCard:React.FC = (props) =>{ + const [liked, setLiked] = useState(false) + + return ( +
+
+ + setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}> +
+
+ {props.title} +
+ {props.location} +
+
+ ); +} \ No newline at end of file diff --git a/src/elements/FavoriteCard/style.css b/src/elements/FavoriteCard/style.css new file mode 100644 index 0000000..3ebc72c --- /dev/null +++ b/src/elements/FavoriteCard/style.css @@ -0,0 +1,30 @@ +.favoriteCard{ + display: block; +} + +.imageFavoriteCard{ + border-radius: 30px; +} +.likeButton{ + cursor: pointer; + transition: 0.3s; + transform: translateY(-60px) translateX(10px); +} +.likeButton:hover{ + transform: scale(1.1); +} +.titleFavoriteCard{ + margin-top: 10px; + font-size: 18px; + font-weight: 500; +} +.locationFavoriteCard{ + font-size: 16px; +} +.img-cnt{ + display: flex; + flex-direction: column; +} +.tr-cnt{ + transform: translateY(-40px); +} \ No newline at end of file diff --git a/src/elements/GenerateCard/index.tsx b/src/elements/GenerateCard/index.tsx new file mode 100644 index 0000000..1a80e18 --- /dev/null +++ b/src/elements/GenerateCard/index.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { Button } from '../Button' +import { Block } from '../Block' +import './style.css' + + + + + + +export const GenerateCard:React.FC = (props) =>{ + + + return( + +
+
+
Сгенерируй свой фантастический Тур!
+
+
+ + + + + ); + + +} \ No newline at end of file diff --git a/src/elements/GenerateCard/style.css b/src/elements/GenerateCard/style.css new file mode 100644 index 0000000..d1b7c6e --- /dev/null +++ b/src/elements/GenerateCard/style.css @@ -0,0 +1,52 @@ +.generatecard-block{ + width: 400px; + display: flex; + flex-direction: column; + gap:30px; + padding: 25px; + border: solid #F5DFB8 1px; + background-color: #fff; +} + +.generateCardDescr{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.cardTitle{ + display: flex; + flex-direction: column; + gap:15px; + width: 75%; +} + + + +.generateTitleText{ + font-size: 24px; +} + +.generateCardTitle{ + display: flex; + flex-direction: column; + gap:15px +} + + +.generate-y{ + background-color: #FFCF08; + border-radius: 10px; + padding: 15px 50px; + outline: none; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap:10px +} + +.wand{ + height: 25px; +} \ No newline at end of file diff --git a/src/elements/Header/index.tsx b/src/elements/Header/index.tsx new file mode 100644 index 0000000..ffdec2e --- /dev/null +++ b/src/elements/Header/index.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import './style.css' + +export const RusPassHeader:React.FC = () =>{ + return( +
+
+
+ + + + + +
+
+ + + + +
+
+
+ + ); +} \ No newline at end of file diff --git a/src/elements/Header/style.css b/src/elements/Header/style.css new file mode 100644 index 0000000..c05c560 --- /dev/null +++ b/src/elements/Header/style.css @@ -0,0 +1,27 @@ +.headerWrapper{ + height: 100px; + display: flex; + align-items: center; + justify-content: space-between; +} +.padding{ + padding-left: 50px; + padding-right: 50px; + width: calc(100% - 100px); +} + +.iconWrapper{ + display: flex; + align-items: center; + gap:10px; +} + +.headerIcon{ + transition: 0.3s; + cursor:pointer + +} + +.headerIcon:hover{ + transform: scale(1.05); +} \ No newline at end of file diff --git a/src/elements/TourCard/index.tsx b/src/elements/TourCard/index.tsx new file mode 100644 index 0000000..b4e4983 --- /dev/null +++ b/src/elements/TourCard/index.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import { Button } from '../../elements/Button' +import { Block } from '../../elements/Block' +import './style.css' + +export interface PlaceCardIE{ + title:string, + type: string, + imageURL?: string +} + +export interface TourCardIE{ + title:string, + days:number, + placeCards: PlaceCardIE[], + imageURL?: string +} + +export const PlaceCard: React.FC = (props) =>{ + return( +
+
+
{props.title}
+
{props.type}
+
+ +
+ ); +} + +export const TourCard:React.FC = (props) =>{ + + + return( + +
+
+
{props.title}
+
+
{props.days} дней,
+
{props.placeCards.length} мест
+
+
+ + +
+
+ { + props.placeCards.map((value, index) => ) + } +
+ + + + ); + + +} \ No newline at end of file diff --git a/src/elements/TourCard/style.css b/src/elements/TourCard/style.css new file mode 100644 index 0000000..cf18754 --- /dev/null +++ b/src/elements/TourCard/style.css @@ -0,0 +1,70 @@ +.tourcard-block{ + width: 400px; + display: flex; + flex-direction: column; + gap:50px; + padding: 25px; + border: solid #F5DFB8 1px; + background-color: #fff; +} + +.cardDescr{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.cardTitle{ + display: flex; + flex-direction: column; + gap:15px +} + +.cardInfo{ + display: flex; + gap:15px; + color:rgba(29, 29, 29, 0.5) +} + +.cardAvatar{ + height: 100px; + transform: rotate(5deg); +} + +.titleText{ + font-size: 24px; + padding-right: 50px; +} + +.placesWrapper{ + display: flex; + flex-direction: column; + gap:20px; + margin-top: 30px; +} + +.placeCard{ + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + +} + +.placeImage{ + width: 40px; + height: 40px; + border-radius: 5px; +} + +.placeDescrWrapper{ + display: flex; + flex-direction: column; + gap:7px; + font-size: 16px; +} + +.placeType{ + color:rgba(29, 29, 29, 0.5); + font-size: 12px; +} \ No newline at end of file diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index db49d91..abb22c5 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,6 +1,82 @@ import react from 'react' +import { Button } from '../../elements/Button'; +import { FavoriteCard, FavoriteCardIE } from '../../elements/FavoriteCard'; +import { GenerateCard } from '../../elements/GenerateCard'; +import { RusPassHeader } from '../../elements/Header'; +import { TourCard, TourCardIE } from '../../elements/TourCard'; +import './style.css' export const Main: react.FC = () => { + const TourPropsCard = { + title: 'Я покажу тебе Москву', + days: 8, + imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80', + placeCards: [ + { + title:'Парк Горького', + type: 'Место', + imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80', + }, + { + title:'Отель Москва', + type: 'Отель', + imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80', + }, + { + title:'Ресторан Сказка', + type: 'Ресторан', + imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80', + } + ] + } as TourCardIE - return
Main
+ const favoriteCardProps = { + imageURL:'restourant.png', + title:'Кафе Сказка', + location:'Казань' + } as FavoriteCardIE + + return ( +
+ +
+

Рекомендации

+
+ + + + + + +
+
+
+

Добавьте в избранное

+
+ + + + + + +
+
+ +
+
+ + Документация + +
+ + + + + +
+ +
© 2023 A project of the Government of Moscow
+
+ + ); } \ No newline at end of file diff --git a/src/pages/Main/style.css b/src/pages/Main/style.css new file mode 100644 index 0000000..8f0e175 --- /dev/null +++ b/src/pages/Main/style.css @@ -0,0 +1,59 @@ +.mainCard{ + background-color: #FFFBF3; + width: сalc(100%-100px); + margin: 0px 50px; + display: flex; + flex-direction: column; + gap:25px; + border-radius: 48px; + padding: 50px; + width: calc(100% - 200px); +} +.mainCard>h2{ + display: inline-block; + width: 400px; +} + +.cardWrapper{ + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + gap:25px; + justify-content: center; +} + +.fav-wrapper{ + display: flex; + justify-content: space-between; + gap: 25px; + flex-wrap: wrap; +} + +.grey{ + font-size: 12px; + color:#1D1D1D +} + +.mainIcon{ + cursor: pointer; + transition: 0.3s; +} + +.mainIcon:hover{ + transform: scale(1.1); +} + +.mainIconWrapper{ + display: flex; + flex-direction: row; + gap:25px +} + +.mainWrapper{ + display: flex; + flex-direction: column; + gap:50px; + justify-content: center; + align-items: center; + padding-bottom: 100px; +} \ No newline at end of file