diff --git a/frontend/raw/Catalog.html b/frontend/raw/Catalog.html index c5fc7ad..67f4cec 100644 --- a/frontend/raw/Catalog.html +++ b/frontend/raw/Catalog.html @@ -7,7 +7,7 @@ - + Metr @@ -64,35 +64,99 @@ +
+

Квартира

 +
+ +
+
+

Комната

 +
+ +
+
+

Дом, дача

 +
+ +
+
+

Коттедж

 +
+ +
+
+
+
+

Купить

 +
+ +
+
+

Продать

 +
+ +
+
+
+
+

Студия

 +
+ +
+
+

1 комната

 +
+ +
+
+

2 комнаты

 +
+ +
+
+

3 комнаты и более

 +
+ +
+
+
+
+
+

От

 +

До

 +
+

Найти недвижимость

-
-
-
-

Квартира

- +
+
+
+
+

Квартира

+ +
-
-
-
-

Купить

- +
+
+

Купить

+ +
-
-
-
-

Комнаты

- +
+
+

Комнаты

+ +
-
-
-
-

Цена

- +
+
+

Цена

+ +
diff --git a/frontend/raw/addingAdv.html b/frontend/raw/addingAdv.html index c49bc02..7ebb984 100644 --- a/frontend/raw/addingAdv.html +++ b/frontend/raw/addingAdv.html @@ -7,7 +7,7 @@ - + Metr diff --git a/frontend/raw/assets/css/catalog.css b/frontend/raw/assets/css/catalog.css new file mode 100644 index 0000000..42c59a6 --- /dev/null +++ b/frontend/raw/assets/css/catalog.css @@ -0,0 +1,665 @@ +/* Fonts */ + +@import url("../../fonts/StapelS/style.css"); + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: rgba(124, 173, 201, 1); + font-size: 17px; + color: white; + background: black; + line-height: 1.6; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +/* Main */ +.main { + width: 100%; +} + + +/* Container */ +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto; +} + + +/* Header */ + +.header { + width: 100%; + + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.header__table { + width: 1052px; + height: 100px; + border: 2px solid white; + margin: 50px auto 0; + display: flex; + flex-direction: row; + justify-content: center; + + color: white; + +} + +.header__image { + width: 140px; + height: 96px; + margin: 0 auto; + + background: url("../images/metr.svg") center + no-repeat; + background-size: cover; + border-right: 2px solid white; +} + +.header__block { + width: 145px; + height: 96px; + margin: 0 auto; + border-right: 2px solid white; +} + +.header__search { + width: 426px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.search { + width: 340px; + height: 40px; + padding-top: 25px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.search__block { + width: 300px; + height: 40px; + margin: 0; + padding-top: 20px; + + background: white; + border: 1px solid black; +} + +.search__img { + width: 40px; + height: 40px; + margin: 0; + padding-top: 2px; +} + +.header__contacts { + width: 46px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.header__contacts__imgtop { + width: 48px; + height: 48px; + padding-top: 5px; + border-bottom: 2px solid white; +} + +.header__contacts__img { + width: 48px; + height: 48px; + padding-top: 5px; +} + +.header__block__content { + width: 70px; + height: 20px; + margin: 0 auto; + padding-top: 35px; +} + +.header__block__contenttop { + width: 145px; + height: 48px; + margin: 0 auto; + border-bottom: 2px solid white; +} + +.header__block__contentbott { + width: 145px; + height: 48px; +} + +.nav__link { + text-decoration: none; + color: white; + font-size: 15px; + + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 10px; +} + +.nav__link_tomsk { + text-decoration: none; + color: white; + font-size: 15px; + +} + +.nav__link:hover, .nav__link_tomsk:hover { + color: #389EEB; + transition: color .2s linear; +} + +/* Intro */ +.intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content:center; + padding-top: 250px; + + background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url( + "../images/intro.jpg"); + background-size: cover; +} + +.intro__text { + width: 100%; + height: 100px; + margin: 0 auto; +} + +.intro__title { + font-size: 25px; + color: white; + text-align: center; +} + +.newhome { + font-family: 'Inter', sans-serif; +} + +.intro__subtitle { + font-size: 17px; + color: white; + text-align: center; + font-family: 'Inter', sans-serif; +} + +.intro_footer { + width: 1050px; + height: 80px; + margin: 300px auto 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.intro__btn { + width: 185px; + height: 55px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 5px; + + background-color: rgba(26, 137, 201, 1); + +} + +.intro__button { + font-size: 12px; + text-transform: uppercase; + text-decoration: none; + margin: 0 auto; + + font-weight: 500; + color: white; +} + +.intro__button:hover { + color: #0f171d; + font-weight: 600; + transition: color .2s linear; +} + +.intro__odnushka { + width: 250px; + height: 50px; + display: flex; + flex-direction: column; +} + +.odnushka { + font-size: 17px; + color: black; + background: white; + text-decoration: none; + padding: 2px; + font-weight: 600; +} + +.odnushka__price { + width: 115px; + font-size: 17px; + text-decoration: none; + padding: 2px; + font-weight: 900; + color: black; + background: white; + font-family: 'Inter'; +} + +.title { + font-size: 25px; + font-family: 'Inter'; + font-weight: 400; +} + +/* About */ + +.about { + height: 100vh; + background-color: rgba(124, 173, 201, 1); + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: 'Inter', sans-serif; +} + +.about__title { + padding-left: 10%; + padding-top: 50px; + font-size: 40px; + font-family: 'Stapel'; +} + +.video { + margin: 0 auto; + display: flex; + flex-direction: row; + align-items: center; + width: 1300px; + height: 590px; + border: 1px solid black; + background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url( + "../images/video.jpg"); + background-size: cover; + +} + +.about__us { + margin-right: 5%; + font-family: 'Inter'; + font-weight: 100; + font-size: 17px; + display: flex; + flex-direction: column; + align-items: flex-end; +} + +/* Suggestions */ + +.suggestions { + padding-top: 10%; + background-color: rgba(124, 173, 201, 1); + height: 100%; + min-height: 600px; + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0 auto; +} + +.suggestions__title { + font-size: 25px; + padding-left: 10%; +} + +.suggestions__images { + margin: 2% 12%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; +} + +.sugg__img { + flex-basis: 30%; + height: 460px; + margin: 4% 0 1% auto; + background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6)); + transition: transform .2s linear; +} + +.afterword { + margin: 0 5% 0 0; + display: flex; + flex-direction: column; + align-items: flex-end; + font-size: 17px; +} + +.after__afterword { + font-weight: 600; + margin-right: 5%; +} + +.gradient { + + display: inline-block; + position: relative; + line-height: 0; +} + +.gradient:after { + content: ""; + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: transparent; + background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8)); + opacity: 0.8; +} + +.podlozhka { + position: relative; +} + +.podlozhka:hover .sugg__img { + transform: translate3d(-10px, -10px, 0); +} + + +.podlozhka:hover .sugg__img img { + opacity: 0.6; +} + +.sugg__img img { + transition: opacity .1s linear; +} + +.sugg__text { + width: 100%; + text-align: left; + position: absolute; + top: 90%; + left: 0; + z-index: 2; + transform: translate3d(0, -50%, 0); + opacity: 1; + transition: opacity .2s linear; + padding-bottom: 20%; +} + +.sugg__text p { + width: 220px; + color: white; + font-family: 'Inter'; + font-weight: 700; + font-size: 20px; + text-decoration: none; + margin: 0 auto 0 2%; + text-align: left; +} + +.sugg__text h2 { + width: 200px; + font-weight: 600; + margin: 0 auto 0 2%; + color: white; + font-family: 'Inter'; + font-size: 20px; + text-align: left; +} + +.parametrs__block { + display: flex; + flex-direction: column; +} + +.parametrs { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.prm { + width: 20%; + height: 150%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + color: white; + font-family: 'Inter'; + font-size: 10px; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; +} + +.prm__top { + display: flex; + justify-content: space-between; + align-items: left; + margin: 2% 40% 0 10%; +} + +.prm__flat__block { + display: flex; + flex-direction: row; + justify-content: space-between; + transition: color .2s linear; + border-radius: 5px; +} + +.prm__flat__block:hover { + background-color: #779fbd; +} + +.prm__flat__block:hover .prm__img{ + opacity: 1; +} + +.prm__down { + display: flex; + flex-direction: row; + position: absolute; + z-index: 2; + margin-top: 252px; + margin-left: 70px; +} + +.prm__flat { + display: flex; + flex-direction: column; + position: absolute; + width: 130px; + height: 110px; + z-index: 2; + margin-top: 305px; + margin-left: 190px; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + padding: 1px 1px 0 2px; +} + +.prm__img { + width: 5%; + height: 5%; + margin-right: 10%; + opacity: 0; +} + +.prm__flat a { + display: flex; + flex-direction: column; + text-decoration: none; + color: white; + margin-right: 10%; +} + +.prm__buy { + display: flex; + flex-direction: column; + position: absolute; + margin-top: 305px; + margin-left: 444px; + width: 150px; + z-index: 2; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + padding: 1px 2px 0 2px; +} + +.prm__buy a { + display: flex; + flex-direction: column; + text-decoration: none; + color: white; + margin-right: 10%; +} + +.prm__komnaty { + display: flex; + flex-direction: column; + position: absolute; + margin-top: 305px; + margin-left: 698px; + z-index: 2; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + padding: 1px 2px 0 2px; +} + +.prm__komnaty a { + display: flex; + flex-direction: column; + text-decoration: none; + color: white; + margin-right: 10%; +} + +.prm__price { + display: flex; + flex-direction: column; + position: absolute; + margin-top: 305px; + margin-left: 952px; + width: 220px; + height: 32px; + z-index: 2; + background-color: rgba(26, 137, 201, 1); + border-radius: 5px; + padding: 2px; +} + +.prm__price a { + display: flex; + flex-direction: column; + text-decoration: none; + color: white; + margin-right: 10%; +} + +.price { + width: 50%; + border-radius: 5px; + margin-right: 1%; + border-color: rgb(173, 172, 172); + box-shadow: none; + background-color: #8bb9dd; + border: none; +} + +.prm__inside { + display: flex; + flex-direction: row; + justify-content: center; +} + +.prm__text { + margin-right: 15%; +} + +.prm__inside img { + padding-top: 20%; +} + + +/* Footer */ + +.footer { + height: 200px; + margin: 0 auto; + padding-top: 1%; + background-color: rgba(124, 173, 201, 1); +} + +.footer__search { + width: 300px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + + border-right: 2px solid white; +} + +.footer__contacts { + width: 165px; + height: 96px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.footer__contacts__imgtop { + width: 165px; + height: 48px; + border-bottom: 2px solid white; + margin: 0; +} + +.footer__contacts__img { + width: 166px; + height: 48px; + margin: 0; +} \ No newline at end of file diff --git a/frontend/raw/assets/css/addingAdv.css b/frontend/src/assets/css/addingAdv.css similarity index 97% rename from frontend/raw/assets/css/addingAdv.css rename to frontend/src/assets/css/addingAdv.css index ccd4421..1156ff8 100644 --- a/frontend/raw/assets/css/addingAdv.css +++ b/frontend/src/assets/css/addingAdv.css @@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 { height: 96px; margin: 0 auto; - background: url("../images/metr.svg") center + background: url("../../../raw/assets/images/metr.svg") center no-repeat; background-size: cover; border-right: 2px solid white; @@ -189,7 +189,7 @@ h1, h2, h3, h4, h5, h6 { padding-top: 250px; background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url( - "../images/intro.jpg"); + "../../../raw/assets/images/intro.jpg"); background-size: cover; } diff --git a/frontend/src/assets/css/catalog.css b/frontend/src/assets/css/catalog.css index 2a435a2..550f793 100644 --- a/frontend/src/assets/css/catalog.css +++ b/frontend/src/assets/css/catalog.css @@ -27,7 +27,6 @@ h1, h2, h3, h4, h5, h6 { width: 100%; } - /* Container */ .container { width: 100%; @@ -35,150 +34,6 @@ h1, h2, h3, h4, h5, h6 { margin: 0 auto; } - -/* Header */ - -.header { - width: 100%; - - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 1000; -} - -.header__table { - width: 1052px; - height: 100px; - border: 2px solid white; - margin: 50px auto 0; - display: flex; - flex-direction: row; - justify-content: center; - - color: white; - -} - -.header__image { - width: 140px; - height: 96px; - margin: 0 auto; - - background: url("@/assets/images/metr.svg") center - no-repeat; - background-size: cover; - border-right: 2px solid white; -} - -.header__block { - width: 145px; - height: 96px; - margin: 0 auto; - border-right: 2px solid white; -} - -.header__search { - width: 426px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: row; - justify-content: center; - - border-right: 2px solid white; -} - -.search { - width: 340px; - height: 40px; - padding-top: 25px; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.search__block { - width: 300px; - height: 40px; - margin: 0; - padding-top: 20px; - - background: white; - border: 1px solid black; -} - -.search__img { - width: 40px; - height: 40px; - margin: 0; - padding-top: 2px; -} - -.header__contacts { - width: 46px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.header__contacts__imgtop { - width: 48px; - height: 48px; - padding-top: 5px; - border-bottom: 2px solid white; -} - -.header__contacts__img { - width: 48px; - height: 48px; - padding-top: 5px; -} - -.header__block__content { - width: 70px; - height: 20px; - margin: 0 auto; - padding-top: 35px; -} - -.header__block__contenttop { - width: 145px; - height: 48px; - margin: 0 auto; - border-bottom: 2px solid white; -} - -.header__block__contentbott { - width: 145px; - height: 48px; -} - -.nav__link { - text-decoration: none; - color: white; - font-size: 15px; - - display: flex; - flex-direction: row; - justify-content: center; - padding-top: 10px; -} - -.nav__link_tomsk { - text-decoration: none; - color: white; - font-size: 15px; - -} - -.nav__link:hover, .nav__link_tomsk:hover { - color: #389EEB; - transition: color .2s linear; -} - /* Intro */ .intro { width: 100%; @@ -344,22 +199,25 @@ h1, h2, h3, h4, h5, h6 { .suggestions__title { font-size: 25px; - padding-left: 10%; + /*padding-left: 10%;*/ + margin: 0% 12%; } .suggestions__images { margin: 2% 12%; display: flex; - justify-content: space-between; + /*justify-content: space-between;*/ flex-wrap: wrap; align-items: center; } .sugg__img { - flex-basis: 30%; - height: 460px; + width: 100%; + height: 100%; margin: 4% 0 1% auto; background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6)); + background-repeat: no-repeat; + background-size: cover; transition: transform .2s linear; } @@ -377,7 +235,6 @@ h1, h2, h3, h4, h5, h6 { } .gradient { - display: inline-block; position: relative; line-height: 0; @@ -398,6 +255,12 @@ h1, h2, h3, h4, h5, h6 { .podlozhka { position: relative; + width: 369px; + height: 460px; + + margin-top: 1em; + margin-left: 1em; + margin-right: 1em; } .podlozhka:hover .sugg__img { @@ -451,7 +314,7 @@ h1, h2, h3, h4, h5, h6 { display: flex; justify-content: space-between; align-items: left; - margin: 2% 40% 2% 10%; + margin: 2% 12%; } .parametrs { @@ -530,4 +393,67 @@ h1, h2, h3, h4, h5, h6 { width: 166px; height: 48px; margin: 0; -} \ No newline at end of file +} + + + + +.parametrs__block ul { + + padding:0; + margin:0; + list-style: none; + position: relative; +} + +/* применяем inline-block позиционирование к элементам навигации */ +.parametrs__block ul li { + + margin: 0px 28px 0 0; + display:inline-block; + border-radius: 0px; + background-color: #1A89C9; +} + +/* стилизуем ссылки */ +.parametrs__block a { + + display:block; + padding:0 20px; + color:#FFF; + font-size:20px; + line-height: 60px; + text-decoration:none; +} + +.parametrs__block b { + display:block; + padding:0 20px; +} + +/* изменяем цвет фона при наведении курсора */ +.parametrs__block a:hover, .parametrs__block__selected { + background-color: #000000; +} + +.parametrs__block ul ul { + display: none; + position: absolute; + top: 100%; +} + +/* отображаем выпадающий список при наведении */ +.parametrs__block ul li:hover > ul { + display:inherit; +} + +/* первый уровень выпадающего списка */ +.parametrs__block ul ul li { + z-index: 100; + min-width: 200px; + float:none; + display:list-item; + position: relative; +} + + diff --git a/frontend/src/assets/css/offer.css b/frontend/src/assets/css/offer.css index b9ca953..a983465 100644 --- a/frontend/src/assets/css/offer.css +++ b/frontend/src/assets/css/offer.css @@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 { margin: 0 auto; } - -/* Header */ - -.header { - width: 100%; - - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 1000; -} - -.header__table { - width: 1052px; - height: 100px; - border: 2px solid white; - margin: 50px auto 0; - display: flex; - flex-direction: row; - justify-content: center; - - color: white; - -} - -.header__image { - width: 140px; - height: 96px; - margin: 0 auto; - - background: url("../../../raw/assets/images/metr.svg") center - no-repeat; - background-size: cover; - border-right: 2px solid white; -} - -.header__block { - width: 145px; - height: 96px; - margin: 0 auto; - border-right: 2px solid white; -} - -.header__search { - width: 426px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: row; - justify-content: center; - - border-right: 2px solid white; -} - -.search { - width: 340px; - height: 40px; - padding-top: 25px; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.search__block { - width: 300px; - height: 40px; - margin: 0; - padding-top: 20px; - - background: white; - border: 1px solid black; -} - -.search__img { - width: 40px; - height: 40px; - margin: 0; - padding-top: 2px; -} - -.header__contacts { - width: 46px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.header__contacts__imgtop { - width: 48px; - height: 48px; - padding-top: 5px; - border-bottom: 2px solid white; -} - -.header__contacts__img { - width: 48px; - height: 48px; - padding-top: 5px; -} - -.header__block__content { - width: 70px; - height: 20px; - margin: 0 auto; - padding-top: 35px; -} - -.header__block__contenttop { - width: 145px; - height: 48px; - margin: 0 auto; - border-bottom: 2px solid white; -} - -.header__block__contentbott { - width: 145px; - height: 48px; -} - -.nav__link { - text-decoration: none; - color: white; - font-size: 15px; - - display: flex; - flex-direction: row; - justify-content: center; - padding-top: 10px; -} - -.nav__link_tomsk { - text-decoration: none; - color: white; - font-size: 15px; - -} - -.nav__link:hover, .nav__link_tomsk:hover { - color: #389EEB; - transition: color .2s linear; -} - /* Intro */ .intro { width: 100%; @@ -259,10 +115,27 @@ h1, h2, h3, h4, h5, h6 { flex-direction: row; } +.main__image { + width: 728px; + height: 416px; + + background-size: cover; + background-repeat: no-repeat; + transition: background 0.2s ease; +} + .other__images a{ + margin-top: 2%; margin-right: 2%; } +.other__images a > img{ + margin-right: 2%; + + width: 220px; + height: 140px; +} + .adv__host { display: flex; flex-direction: row; @@ -278,6 +151,15 @@ h1, h2, h3, h4, h5, h6 { margin: 3% 0; } +.userlogo { + width: 148px; + height: 148px; + border-radius: 50%; + + background: center no-repeat; + background-size: cover; +} + .host__stat { display: flex; flex-direction: row; diff --git a/frontend/src/assets/css/profile.css b/frontend/src/assets/css/profile.css index 4c563d3..858a405 100644 --- a/frontend/src/assets/css/profile.css +++ b/frontend/src/assets/css/profile.css @@ -35,154 +35,10 @@ h1, h2, h3, h4, h5, h6 { margin: 0 auto; } - -/* Header */ - -.header { - width: 100%; - - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 1000; -} - -.header__table { - width: 1052px; - height: 100px; - border: 2px solid white; - margin: 50px auto 0; - display: flex; - flex-direction: row; - justify-content: center; - - color: white; - -} - -.header__image { - width: 140px; - height: 96px; - margin: 0 auto; - - background: url("@/assets/images/metr.svg") center - no-repeat; - background-size: cover; - border-right: 2px solid white; -} - -.header__block { - width: 145px; - height: 96px; - margin: 0 auto; - border-right: 2px solid white; -} - -.header__search { - width: 426px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: row; - justify-content: center; - - border-right: 2px solid white; -} - -.search { - width: 340px; - height: 40px; - padding-top: 25px; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.search__block { - width: 300px; - height: 40px; - margin: 0; - padding-top: 20px; - - background: white; - border: 1px solid black; -} - -.search__img { - width: 40px; - height: 40px; - margin: 0; - padding-top: 2px; -} - -.header__contacts { - width: 46px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.header__contacts__imgtop { - width: 48px; - height: 48px; - padding-top: 5px; - border-bottom: 2px solid white; -} - -.header__contacts__img { - width: 48px; - height: 48px; - padding-top: 5px; -} - -.header__block__content { - width: 70px; - height: 20px; - margin: 0 auto; - padding-top: 35px; -} - -.header__block__contenttop { - width: 145px; - height: 48px; - margin: 0 auto; - border-bottom: 2px solid white; -} - -.header__block__contentbott { - width: 145px; - height: 48px; -} - -.nav__link { - text-decoration: none; - color: white; - font-size: 15px; - - display: flex; - flex-direction: row; - justify-content: center; - padding-top: 10px; -} - -.nav__link_tomsk { - text-decoration: none; - color: white; - font-size: 15px; - -} - -.nav__link:hover, .nav__link_tomsk:hover { - color: #389EEB; - transition: color .2s linear; -} - /* Intro */ .intro { width: 100%; - height: 100vh; + min-height: 100vh; display: flex; flex-direction: column; align-items: center; @@ -203,18 +59,29 @@ h1, h2, h3, h4, h5, h6 { .user__info { display: flex; flex-direction: column; - justify-content: space-between; + /*justify-content: space-between;*/ margin-right: 5%; } .user__logo { - display: flex; - flex-direction: row; - justify-content: center; - border-radius: 20px; + border-radius: 50%; width: 200px; height: 200px; padding-left: 20%; + margin: 0 auto; + + background: url("@/assets/images/user_standart.png") center + no-repeat; + background-size: cover; +} + +.user__logo > img{ + display: flex; + flex-direction: row; + justify-content: center; + border-radius: 50%; + width: 120%; + height: 100%; } .username { @@ -223,18 +90,18 @@ h1, h2, h3, h4, h5, h6 { justify-content: center; } -.user__stat { - display: flex; - flex-direction: row; - margin: 2% 0 2% 5%; -} +/*.user__stat {*/ +/* display: flex;*/ +/* flex-direction: row;*/ +/* margin: 2% 0 2% 5%;*/ +/*}*/ -.stars { - display: flex; - flex-direction: row; - margin-left: 5%; - padding-bottom: 1%; -} +/*.stars {*/ +/* display: flex;*/ +/* flex-direction: row;*/ +/* margin-left: 5%;*/ +/* padding-bottom: 1%;*/ +/*}*/ .user__hrefs { display: flex; diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css index bffd3ed..dea5b98 100644 --- a/frontend/src/assets/css/style.css +++ b/frontend/src/assets/css/style.css @@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 { margin: 0 auto; } - -/* Header */ - -.header { - width: 100%; - - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 1000; -} - -.header__table { - width: 1052px; - height: 100px; - border: 2px solid white; - margin: 50px auto 0; - display: flex; - flex-direction: row; - justify-content: center; - - color: white; - -} - -.header__image { - width: 140px; - height: 96px; - margin: 0 auto; - - background: url("../images/metr.svg") center - no-repeat; - background-size: cover; - border-right: 2px solid white; -} - -.header__block { - width: 145px; - height: 96px; - margin: 0 auto; - border-right: 2px solid white; -} - -.header__search { - width: 426px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: row; - justify-content: center; - - border-right: 2px solid white; -} - -.search { - width: 340px; - height: 40px; - padding-top: 25px; - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.search__block { - width: 300px; - height: 40px; - margin: 0; - padding-top: 20px; - - background: white; - border: 1px solid black; -} - -.search__img { - width: 40px; - height: 40px; - margin: 0; - padding-top: 2px; -} - -.header__contacts { - width: 46px; - height: 96px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.header__contacts__imgtop { - width: 48px; - height: 48px; - padding-top: 5px; - border-bottom: 2px solid white; -} - -.header__contacts__img { - width: 48px; - height: 48px; - padding-top: 5px; -} - -.header__block__content { - width: 70px; - height: 20px; - margin: 0 auto; - padding-top: 35px; -} - -.header__block__contenttop { - width: 145px; - height: 48px; - margin: 0 auto; - border-bottom: 2px solid white; -} - -.header__block__contentbott { - width: 145px; - height: 48px; -} - -.nav__link { - text-decoration: none; - color: white; - font-size: 15px; - - display: flex; - flex-direction: row; - justify-content: center; - padding-top: 10px; -} - -.nav__link_tomsk { - text-decoration: none; - color: white; - font-size: 15px; - -} - -.nav__link:hover, .nav__link_tomsk:hover { - color: #389EEB; - transition: color .2s linear; -} - /* Intro */ .intro { width: 100%; diff --git a/frontend/src/assets/images/1.1.jpg b/frontend/src/assets/images/1.1.jpg new file mode 100644 index 0000000..aa281cb Binary files /dev/null and b/frontend/src/assets/images/1.1.jpg differ diff --git a/frontend/src/assets/images/delete_log.svg b/frontend/src/assets/images/delete_log.svg new file mode 100644 index 0000000..0e6cc58 --- /dev/null +++ b/frontend/src/assets/images/delete_log.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/galka.png b/frontend/src/assets/images/galka.png new file mode 100644 index 0000000..9678243 Binary files /dev/null and b/frontend/src/assets/images/galka.png differ diff --git a/frontend/src/assets/images/image_load.png b/frontend/src/assets/images/image_load.png new file mode 100644 index 0000000..4077e37 Binary files /dev/null and b/frontend/src/assets/images/image_load.png differ diff --git a/frontend/src/assets/images/location.svg b/frontend/src/assets/images/location.svg new file mode 100644 index 0000000..30df2b5 --- /dev/null +++ b/frontend/src/assets/images/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/metr_header.svg b/frontend/src/assets/images/metr_header.svg new file mode 100644 index 0000000..6690b48 --- /dev/null +++ b/frontend/src/assets/images/metr_header.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/redact.svg b/frontend/src/assets/images/redact.svg new file mode 100644 index 0000000..aa93314 --- /dev/null +++ b/frontend/src/assets/images/redact.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/images/upload_log.svg b/frontend/src/assets/images/upload_log.svg new file mode 100644 index 0000000..7c0c19a --- /dev/null +++ b/frontend/src/assets/images/upload_log.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/images/user_standart.png b/frontend/src/assets/images/user_standart.png new file mode 100644 index 0000000..4353808 Binary files /dev/null and b/frontend/src/assets/images/user_standart.png differ diff --git a/frontend/src/components/CatalogType.vue b/frontend/src/components/CatalogType.vue new file mode 100644 index 0000000..810bb89 --- /dev/null +++ b/frontend/src/components/CatalogType.vue @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/components/ProfileAbout.vue b/frontend/src/components/ProfileAbout.vue index 84b4ee0..46ee91a 100644 --- a/frontend/src/components/ProfileAbout.vue +++ b/frontend/src/components/ProfileAbout.vue @@ -1,20 +1,32 @@ @@ -22,6 +34,8 @@ export default { .about__user { display: flex; flex-direction: column; + + width: 888px; } .about__images { @@ -32,7 +46,16 @@ export default { margin-top: 1%; } +.about__images > img { + width: 296px; + height: 204px; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1%; +} + .about_describtions { - margin-top: 5%; + margin-top: 2%; } \ No newline at end of file diff --git a/frontend/src/components/ProfileAddOffer.vue b/frontend/src/components/ProfileAddOffer.vue index a77e8b5..e0baf0a 100644 --- a/frontend/src/components/ProfileAddOffer.vue +++ b/frontend/src/components/ProfileAddOffer.vue @@ -1,24 +1,199 @@ \ No newline at end of file diff --git a/frontend/src/components/ProfileMyOffers.vue b/frontend/src/components/ProfileMyOffers.vue index e1bf498..50640eb 100644 --- a/frontend/src/components/ProfileMyOffers.vue +++ b/frontend/src/components/ProfileMyOffers.vue @@ -1,38 +1,99 @@ \ No newline at end of file diff --git a/frontend/src/components/RatingStars.vue b/frontend/src/components/RatingStars.vue new file mode 100644 index 0000000..9363153 --- /dev/null +++ b/frontend/src/components/RatingStars.vue @@ -0,0 +1,35 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/components/TheFooter.vue b/frontend/src/components/TheFooter.vue new file mode 100644 index 0000000..6c2c382 --- /dev/null +++ b/frontend/src/components/TheFooter.vue @@ -0,0 +1,163 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue new file mode 100644 index 0000000..2d3bbc0 --- /dev/null +++ b/frontend/src/components/TheHeader.vue @@ -0,0 +1,225 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index 45d7855..a4b7d6e 100644 --- a/frontend/src/router/index.js +++ b/frontend/src/router/index.js @@ -1,9 +1,4 @@ import { createRouter, createWebHistory } from 'vue-router' -import MainView from '@/views/MainView.vue' -import AuthView from '@/views/AuthView.vue' -import CatalogView from "@/views/CatalogView.vue"; -import ProfileView from "@/views/ProfileView.vue"; -import OfferView from "@/views/OfferView.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -11,27 +6,27 @@ const router = createRouter({ { path: '/', name: 'home', - component: MainView + component: () => import(/* webpackChunkName: "MainView" */ '@/views/MainView.vue') }, { path: '/auth', name: 'auth', - component: AuthView + component: () => import(/* webpackChunkName: "AuthView" */ '@/views/AuthView.vue') }, { path: '/catalog', name: 'catalog', - component: CatalogView + component: () => import(/* webpackChunkName: "CatalogView" */ '@/views/CatalogView.vue') }, { path: '/profile', name: 'profile', - component: ProfileView + component: () => import(/* webpackChunkName: "ProfileView" */ '@/views/ProfileView.vue') }, { - path: '/offer', + path: '/catalog/:id', name: 'offer', - component: OfferView + component: () => import(/* webpackChunkName: "OfferView" */ '@/views/OfferView.vue') }, ] }) diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js index ce14510..f98c0b8 100644 --- a/frontend/src/services/api.js +++ b/frontend/src/services/api.js @@ -1,6 +1,21 @@ import axios from 'axios'; -export default axios.create({ +const instance = axios.create({ baseURL: 'http://tusur.tk:9080/api', withCredentials: true, }); + +instance.interceptors.request.use(function (config) { + const savedUser = JSON.parse(localStorage.getItem('auth')) || null; + if (savedUser === null) + return config; + + const token = savedUser.data.token; + config.headers.Authorization = `Bearer ${token}`; + + return config; +}, function (error) { + return Promise.reject(error); +}); + +export default instance; diff --git a/frontend/src/services/images.js b/frontend/src/services/images.js new file mode 100644 index 0000000..68d8dc3 --- /dev/null +++ b/frontend/src/services/images.js @@ -0,0 +1,4 @@ +export const getURL = (path) => { + const image = path.replace('public/', ''); + return `http://tusur.tk:9080/storage/${image}`; +}; \ No newline at end of file diff --git a/frontend/src/services/offer.js b/frontend/src/services/offer.js new file mode 100644 index 0000000..d315ccd --- /dev/null +++ b/frontend/src/services/offer.js @@ -0,0 +1,45 @@ +import api from "@/services/api"; + +export const OfferService = { + async add(data, files) { + data.images = files; + const resp = await api.post('/offers', data); + return resp; + }, + async update(id, data, files) { + data.images = files; + const resp = await api.put(`/offers/${id}`, data); + return resp; + }, + async all() { + const resp = await api.get('/offers'); + return resp; + }, + async allUserOffers() { + const resp = await api.get('/users/offers'); + return resp; + }, + async filter(filters) { + const queryParamsObj = filters.reduce((obj, item) => (obj[item.name] = item.value, obj) ,{}); + const resp = await api.get('/offers', { + params: queryParamsObj, + }); + return resp; + }, + async getById(id) { + const resp = await api.get(`/offers/${id}`); + return resp; + }, + async uploadImage(file) { + const resp = await api.postForm('/offers/images', { + 'image': file, + }); + return resp; + }, + async deleteImage(id) { + const resp = await api.delete(`/offers/images/${id}`); + return resp; + } +}; + +export default OfferService; diff --git a/frontend/src/store/modules/auth.js b/frontend/src/store/modules/auth.js index 162aabb..975b56f 100644 --- a/frontend/src/store/modules/auth.js +++ b/frontend/src/store/modules/auth.js @@ -8,6 +8,11 @@ export const state = { }; export const actions = { + async registration({ commit }, { email, password }) { + const { data: user } = await authService.registration(email, password); + commit('SET_USER', user.data); + commit('SET_TOKEN', user.token); + }, async login({ commit }, { email, password }) { const { data: user } = await authService.login(email, password); commit('SET_USER', user.data); diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue index d58dc20..fdd813a 100644 --- a/frontend/src/views/AuthView.vue +++ b/frontend/src/views/AuthView.vue @@ -52,7 +52,9 @@ export default { }); }, registration() { - + this.$store.dispatch('registration', this.credentials).then(() => { + this.$router.push('/profile'); + }); }, auth() { if (this.authForm) @@ -60,6 +62,10 @@ export default { else this.registration(); } + }, + mounted() { + if (this.$store.getters.userAuthenticated) + this.$router.push('/profile'); } } > diff --git a/frontend/src/views/CatalogView.vue b/frontend/src/views/CatalogView.vue index d29a121..5f18466 100644 --- a/frontend/src/views/CatalogView.vue +++ b/frontend/src/views/CatalogView.vue @@ -1,137 +1,143 @@ diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue index 46e9263..12eaa5e 100644 --- a/frontend/src/views/MainView.vue +++ b/frontend/src/views/MainView.vue @@ -1,58 +1,5 @@ \ No newline at end of file diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue index a46c93b..4f8d1d9 100644 --- a/frontend/src/views/ProfileView.vue +++ b/frontend/src/views/ProfileView.vue @@ -1,80 +1,15 @@ > \ No newline at end of file