Merge pull request #11 from robonen/Frontend

Frontend

frontend/package-lock.json

@@ -8,8 +8,10 @@
       "name": "metr",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^0.27.2",
         "vue": "^3.2.33",
-        "vue-router": "^4.0.14"
+        "vue-router": "^4.0.14",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^2.3.1",
@@ -147,11 +149,44 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
       "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.14.39",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.39.tgz",
@@ -512,6 +547,38 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -564,6 +631,25 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -736,6 +822,17 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
     }
   },
   "dependencies": {
@@ -855,11 +952,38 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
       "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "esbuild": {
       "version": "0.14.39",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.39.tgz",
@@ -1033,6 +1157,21 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1072,6 +1211,19 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -1171,6 +1323,14 @@
       "requires": {
         "@vue/devtools-api": "^6.0.0"
       }
+    },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
     }
   }
 }

frontend/package.json

@@ -7,8 +7,10 @@
     "preview": "vite preview --port 5050"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.14",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.1",

frontend/raw/Catalog.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/catalog.css">
+    <link rel="stylesheet" href="../src/assets/css/catalog.css">
     <title>Metr</title>
 </head>
 <body>
@@ -74,25 +74,25 @@
                 <div class="prm">
                     <div class="prm__inside">
                         <div class="prm__text"><h2>Квартира</h2></div>
-                        <a href="#"><img src="assets/images/arrow.png" alt=""></a>
+                        <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
                     </div>
                 </div>
                 <div class="prm">
                     <div class="prm__inside">
                         <div class="prm__text"><h2>Купить</h2></div>
-                        <a href="#"><img src="assets/images/arrow.png" alt=""></a>
+                        <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
                     </div>
                 </div>
                 <div class="prm">
                     <div class="prm__inside">
                         <div class="prm__text"><h2>Комнаты</h2></div>
-                        <a href="#"><img src="assets/images/arrow.png" alt=""></a>
+                        <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
                     </div>
                 </div>
                 <div class="prm">
                     <div class="prm__inside">
                         <div class="prm__text"><h2>Цена</h2></div>
-                        <a href="#"><img src="assets/images/arrow.png" alt=""></a>
+                        <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
                     </div>
                 </div>
             </div>

frontend/raw/advertisment.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/advertisment.css">
+    <link rel="stylesheet" href="../src/assets/css/offer.css">
     <title>Metr</title>
 </head>
 <body>
@@ -88,7 +88,7 @@
                             <a href="#"><img src="assets/images/adv1.png" alt=""></a>
                         </div>
                         <div class="other__images">
-                            <a href="#"><img src="assets/images/adv2.png" alt=""></a>
+                            <a href="#"><img src="../src/assets/images/offer2.png" alt=""></a>
                             <a href="#"><img src="assets/images/adv3.png" alt=""></a>
                             <a href="#"><img src="assets/images/adv4.png" alt=""></a>
                         </div>

frontend/raw/profile.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/profile.css">
+    <link rel="stylesheet" href="../src/assets/css/profile.css">
     <title>Metr</title>
 </head>
 <body>
@@ -69,7 +69,7 @@
         <div class="main">
             <div class="user__info">
                 <div class="user__logo">      
-                    <img src="assets/images/userlogo.png" alt="">
+                    <img src="../src/assets/images/userlogo.png" alt="">
                 </div>
                 <div class="username">
                     <h3>Виктория</h3>
@@ -77,11 +77,11 @@
                 <div class="user__stat">
                     <div class="stat"><h3>4,5</h3></div>
                     <div class="stars">
-                        <img src="assets/images/star.png" alt="">
+                        <img src="../src/assets/images/star.png" alt="">
-                        <img src="assets/images/star.png" alt="">
+                        <img src="../src/assets/images/star.png" alt="">
-                        <img src="assets/images/star.png" alt="">
+                        <img src="../src/assets/images/star.png" alt="">
-                        <img src="assets/images/star.png" alt="">
+                        <img src="../src/assets/images/star.png" alt="">
-                        <img src="assets/images/star.png" alt="">
+                        <img src="../src/assets/images/star.png" alt="">
                     </div>
                 </div>
                 <div class="user__hrefs">

frontend/src/assets/css/catalog.css

@@ -1,6 +1,6 @@
 /* Fonts */
 
-@import url("../../fonts/StapelS/style.css");
+@import url("@/assets/fonts/StapelS/style.css");
 
 body {
     margin: 0;
@@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
     height: 96px;
     margin: 0 auto;
     
-    background: url("../images/metr.svg") center
+    background: url("@/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.3)), url(
- "../images/intro.jpg");
+    "@/assets/images/intro.jpg");
     background-size: cover;
 }
 
@@ -314,7 +314,7 @@ h1, h2, h3, h4, h5, h6 {
     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");
+    "@/assets/images/video.jpg");
     background-size: cover;
 
 }

frontend/src/assets/css/offer.css

@@ -1,6 +1,6 @@
 /* Fonts */
 
-@import url("../../fonts/StapelS/style.css");
+@import url("@/assets/fonts/StapelS/style.css");
 
 body {
     margin: 0;
@@ -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;
 }
 

frontend/src/assets/css/profile.css

@@ -1,6 +1,6 @@
 /* Fonts */
 
-@import url("../../fonts/StapelS/style.css");
+@import url("@/assets/fonts/StapelS/style.css");
 
 body {
     margin: 0;
@@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
     height: 96px;
     margin: 0 auto;
     
-    background: url("../images/metr.svg") center
+    background: url("@/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");
+    "@/assets/images/intro.jpg");
     background-size: cover;
 }
 
@@ -250,21 +250,6 @@ h1, h2, h3, h4, h5, h6 {
     color: white;
     font-size: 15px;
     font-weight: 600;
+    cursor: pointer;
 }
 
-.about__user {
-    display: flex;
-    flex-direction: column;
-}
-
-.about__images {
-    width: 105%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 1%;
-}
-
-.about_describtions {
-    margin-top: 5%;
-}

frontend/src/assets/css/style.css

@@ -1,6 +1,6 @@
 /* Fonts */
 
-  @import url("../../fonts/StapelS/style.css");
+  @import url("@/assets/fonts/StapelS/style.css");
 
 body {
     margin: 0;

frontend/src/components/ProfileAbout.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="about__user">
+    <div class="about__title"><h2>Обо мне</h2></div>
+    <div class="about__images">
+      <img src="@/assets/images/metr.svg" alt="">
+      <img src="@/assets/images/metr.svg" alt="">
+      <img src="@/assets/images/metr.svg" alt="">
+    </div>
+    <div class="about_describtions">
+      <h3>Занимаюсь продажей квартир более 10 лет.</h3>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProfileAbout"
+}
+</script>
+
+<style scoped>
+.about__user {
+  display: flex;
+  flex-direction: column;
+}
+
+.about__images {
+  width: 105%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+}
+
+.about_describtions {
+  margin-top: 5%;
+}
+</style>

frontend/src/components/ProfileAddOffer.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="about__user">
+    <div class="about__title"><h2>Добавить обьявление</h2></div>
+    <div class="about__images">
+      <img src="@/assets/images/metr.svg" alt="">
+      <img src="@/assets/images/metr.svg" alt="">
+      <img src="@/assets/images/metr.svg" alt="">
+    </div>
+    <div class="about_describtions">
+      <h3>Однушка на Елизаровых, 44</h3>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProfileAbout"
+}
+</script>
+
+<style scoped>
+.about__user {
+  display: flex;
+  flex-direction: column;
+}
+
+.about__images {
+  width: 105%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+}
+
+.about_describtions {
+  margin-top: 5%;
+}
+</style>

frontend/src/components/ProfileMyOffers.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="about__user">
+    <div class="about__title"><h2>Мои объявления</h2></div>
+    <div class="about__images">
+      <img src="@/assets/images/metr.svg" alt="">
+      <img src="@/assets/images/metr.svg" alt="">
+      <img src="@/assets/images/metr.svg" alt="">
+    </div>
+    <div class="about_describtions">
+      <h3>Однушка на Елизаровых, 44</h3>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProfileAbout"
+}
+</script>
+
+<style scoped>
+.about__user {
+  display: flex;
+  flex-direction: column;
+}
+
+.about__images {
+  width: 105%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+}
+
+.about_describtions {
+  margin-top: 5%;
+}
+</style>

frontend/src/main.js

@@ -1,9 +1,10 @@
-import { createApp } from 'vue'
+// Core
-import App from './App.vue'
+import { createApp } from 'vue';
-import router from './router'
+import router from './router';
+import store from './store';
 
-const app = createApp(App)
+import App from './App.vue';
 
-app.use(router)
+const app = createApp(App);
 
-app.mount('#app')
+app.use(router).use(store).mount('#app');

frontend/src/router/index.js

@@ -1,6 +1,9 @@
 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),
@@ -15,6 +18,21 @@ const router = createRouter({
       name: 'auth',
       component: AuthView
     },
+    {
+      path: '/catalog',
+      name: 'catalog',
+      component: CatalogView
+    },
+    {
+      path: '/profile',
+      name: 'profile',
+      component: ProfileView
+    },
+    {
+      path: '/offer',
+      name: 'offer',
+      component: OfferView
+    },
   ]
 })
 

frontend/src/services/api.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export default axios.create({
+    baseURL: 'http://tusur.tk:9080/api',
+    withCredentials: true,
+});

frontend/src/services/auth.js

@@ -0,0 +1,27 @@
+import api from "@/services/api";
+
+export const AuthService = {
+    async registration(email, password) {
+        const resp = await api.post('/auth/registration', {
+            email,
+            password,
+        });
+        localStorage.setItem('auth', JSON.stringify(resp));
+        return resp;
+    },
+    async login(email, password) {
+        const resp = await api.post('/auth/login', {
+            email,
+            password,
+        });
+        localStorage.setItem('auth', JSON.stringify(resp));
+        return resp;
+    },
+    async logout() {
+        await api.post('/auth/logout');
+        localStorage.removeItem('auth');
+        return true;
+    },
+};
+
+export default AuthService;

frontend/src/store/index.js

@@ -0,0 +1,8 @@
+import { createStore } from 'vuex';
+import auth from '@/store/modules/auth';
+
+export default createStore({
+    modules: {
+        auth,
+    },
+});

frontend/src/store/modules/auth.js

@@ -0,0 +1,51 @@
+import authService from '@/services/auth';
+
+const savedUser = JSON.parse(localStorage.getItem('auth'));
+
+export const state = {
+    user: savedUser?.data?.data ?? null,
+    token: savedUser?.data?.token ?? null,
+};
+
+export const actions = {
+    async login({ commit }, { email, password }) {
+        const { data: user } = await authService.login(email, password);
+        commit('SET_USER', user.data);
+        commit('SET_TOKEN', user.token);
+    },
+    async logout({ commit }) {
+        await authService.logout();
+        commit('SET_USER', null);
+        commit('SET_TOKEN', null);
+    },
+};
+
+export const mutations = {
+    SET_USER(state, user) {
+        state.user = user;
+    },
+    SET_TOKEN(state, token) {
+        state.token = token;
+    },
+};
+
+export const getters = {
+    user(state) {
+        return state.user;
+    },
+    username(state) {
+        return state.user && state.user.last_name && state.user.first_name
+            ? `${state.user.last_name} ${state.user.first_name}`
+            : null;
+    },
+    userAuthenticated(state) {
+        return state.user !== null && state.token !== null;
+    },
+};
+
+export default {
+    state,
+    actions,
+    mutations,
+    getters,
+};

frontend/src/views/AuthView.vue

@@ -1,28 +1,29 @@
 <template>
     <div class="container">
     <div class="logo">
+      <router-link to="/" class="nav__link" href="#">
         <div class="logoMetr">
         </div>
+      </router-link>
     </div>
     <div class="title">
         <h2> {{authForm ? "Вход" : "Регистрация" }} Метр</h2>
     </div>
-    <form action="" method="get" class="form__example">
+    <form class="form__example">
       <div class="form__example">
         <label for="name"></label>
-        <input class="login" type="text" name="name" id="name" placeholder="Почта" required>
+        <input class="login" type="email" name="name" id="name" placeholder="Почта" required v-model.trim="credentials.email">
       </div>
       <div class="form__example">
         <label for="email"></label>
-        <input class="login" type="email" name="email" id="email" placeholder="Пароль" required>
+        <input class="login" type="password" name="email" id="email" placeholder="Пароль" required v-model.trim="credentials.password">
       </div>
       <div class="form__example">
-        <button class="form__input">
+        <button class="form__input" @click.prevent="auth">
         {{ authForm ? "Войти" : "Зарегистрироваться" }}
         </button>
       </div>
     </form>
-    
     <div class="form__example">
         <button class="form__input" @click="authForm = false" v-if="authForm">
           Зарегистрироваться
@@ -32,9 +33,33 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 export default {
   data ()  {
-    return { authForm: true }
+    return {
+      authForm: true,
+      credentials: {
+        email: '',
+        password: '',
+      }
+    }
+  },
+  methods: {
+    login() {
+      this.$store.dispatch('login', this.credentials).then(() => {
+        this.$router.push('/profile');
+      });
+    },
+    registration() {
+
+    },
+    auth() {
+      if (this.authForm)
+        this.login();
+      else
+        this.registration();
+    }
   }
 }
 </script>>

frontend/src/views/CatalogView.vue

@@ -0,0 +1,140 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header__table">
+        <div class="header__image">
+          <router-link to="/" class="nav__link" href="#">
+          </router-link>
+        </div>
+        <div class="header__block">
+          <div class="header__block__content">
+            <img src="~@/assets/images/location.png" alt="">
+            <a class="nav__link_tomsk" href="#">Томск</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <a class="nav__link" href="#">каталог</a>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">блог</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <a class="nav__link" href="#">контакты</a>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">помощь</a>
+          </div>
+        </div>
+        <div class="header__search">
+          <div class="search">
+            <div class="search__block">
+
+            </div>
+            <div class="search__img">
+              <a class="nav__link" href="#">
+                <img src="@/assets/images/search.jpg" alt="">
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="header__contacts">
+          <div class="header__contacts__imgtop">
+            <a class="nav__link" href="#">
+              <img src="@/assets/images/tell.jpg" alt="">
+            </a>
+          </div>
+          <div class="header__contacts__img">
+            <router-link to="/auth" class="nav__link" href="#" id="user">
+              <img src="@/assets/images/user.jpg" alt="">
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <section class="suggestions">
+    <div class="suggestions__title">
+      <h3 class="newhome">Найти недвижимость</h3>
+    </div>
+    <div class="parametrs__block">
+      <div class="parametrs">
+        <div class="prm">
+          <div class="prm__inside">
+            <div class="prm__text"><h2>Квартира</h2></div>
+            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
+          </div>
+        </div>
+        <div class="prm">
+          <div class="prm__inside">
+            <div class="prm__text"><h2>Купить</h2></div>
+            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
+          </div>
+        </div>
+        <div class="prm">
+          <div class="prm__inside">
+            <div class="prm__text"><h2>Комнаты</h2></div>
+            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
+          </div>
+        </div>
+        <div class="prm">
+          <div class="prm__inside">
+            <div class="prm__text"><h2>Цена</h2></div>
+            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="suggestions__images">
+      <div class="podlozhka">
+        <router-link to="/offer" class="nav__link" href="#">
+          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
+          <div class="sugg__text"><p>2-к. Квартира, 34 м кв</p><h2>2 900 000₽</h2></div>
+        </router-link>
+      </div>
+      <div class="podlozhka">
+        <router-link to="/offer" class="nav__link" href="#">
+          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
+          <div class="sugg__text"><p>3-к. Квартира, 34 м кв</p><h2>4 900 000₽</h2></div>
+        </router-link>
+      </div>
+      <div class="podlozhka">
+        <router-link to="/offer" class="nav__link" href="#">
+          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/3.jpg" alt=""></a></div>
+          <div class="sugg__text"><p>1-к. Квартира, 34 м кв</p><h2>1 900 000₽</h2></div>
+        </router-link>>
+      </div>
+      <div class="podlozhka">
+        <router-link to="/offer" class="nav__link" href="#">
+          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/4.jpg" alt=""></a></div>
+          <div class="sugg__text"><p>5-к. Квартира, 34 м кв</p><h2>10 900 000₽</h2></div>
+        </router-link>
+      </div>
+      <div class="podlozhka">
+        <router-link to="/offer" class="nav__link" href="#">
+          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
+          <div class="sugg__text"><p>6-к. Квартира, 34 м кв</p><h2>15 900 000₽</h2></div>
+        </router-link>
+      </div>
+      <div class="podlozhka">
+        <router-link to="/offer" class="nav__link" href="#">
+          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
+          <div class="sugg__text"><p>3-к. Квартира, 34 м кв</p><h2>5 900 000₽</h2></div>
+        </router-link>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "CatalogView"
+}
+</script>
+
+<style scoped>
+    @import url("@/assets/css/catalog.css");
+</style>

frontend/src/views/MainView.vue

@@ -11,8 +11,11 @@
                 </div>
                 <div class="header__block">
                     <div class="header__block__contenttop">
-                        <a class="nav__link" href="#" id="catalog">каталог</a>
+                      <router-link to="/catalog" class="nav__link" href="#" id="catalog">
+                          каталог
+                      </router-link>
                     </div>
+
                     <div class="header__block__contentdown">
                         <a class="nav__link" href="#">блог</a>
                     </div>
@@ -27,9 +30,7 @@
                 </div>
                 <div class="header__search">
                     <div class="search">
-                        <div class="search__block">
+                        <input class="search__block">
-
-                        </div>
                         <div class="search__img">
                             <a class="nav__link" href="#">
                                 <img src="@/assets/images/search.jpg" alt="">
@@ -93,30 +94,12 @@
             <h3 class="newhome">Интересные предложения</h3>
         </div>
         <div class="suggestions__images">
-            <div class="podlozhka">
+
+            <div class="podlozhka" v-for="offer in offers">
                 <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
-                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+                <div class="sugg__text"><p>{{offer.name}}}</p><h2>{{ offer.price }}₽</h2></div>
-            </div>
-            <div class="podlozhka">
-                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
-                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
-            </div>
-            <div class="podlozhka">
-                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/3.jpg" alt=""></a></div>
-                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
-            </div>
-            <div class="podlozhka">
-                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/4.jpg" alt=""></a></div>
-                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
-            </div>
-            <div class="podlozhka">
-                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
-                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
-            </div>
-            <div class="podlozhka">
-                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
-                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
             </div>
+
         </div>
         <div class="afterword">
             <p class="afterword">Это подборка лучших вариантов, найденных</p>
@@ -167,6 +150,21 @@
     
 </template>
 
+<script>
+export default {
+  data ()  {
+    return { offers: [] }
+  },
+  async mounted() {
+    const requests = await fetch('http://tusur.tk:9080/api/offers');
+    const offers = await requests.json();
+    this.offers = offers.data;
+  }
+
+}
+
+</script>
+
 <style scoped>
     @import url("@/assets/css/main.css");
 </style>

frontend/src/views/OfferView.vue

@@ -0,0 +1,200 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header__table">
+        <div class="header__image">
+          <router-link to="/" class="nav__link" href="#">
+          </router-link>
+        </div>
+        <div class="header__block">
+          <div class="header__block__content">
+            <img src="@/assets/images/location.png" alt="">
+            <a class="nav__link_tomsk" href="#">Томск</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">блог</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <a class="nav__link" href="#">контакты</a>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">помощь</a>
+          </div>
+        </div>
+        <div class="header__search">
+          <div class="search">
+            <div class="search__block">
+
+            </div>
+            <div class="search__img">
+              <a class="nav__link" href="#">
+                <img src="@/assets/images/search.jpg" alt="">
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="header__contacts">
+          <div class="header__contacts__imgtop">
+            <a class="nav__link" href="#">
+              <img src="@/assets/images/tell.jpg" alt="">
+            </a>
+          </div>
+          <div class="header__contacts__img">
+            <router-link to="/auth" class="nav__link" href="#" id="user">
+              <img src="@/assets/images/user.jpg" alt="">
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="intro">
+    <div class="main">
+      <div class="adv__info">
+        <div class="adv__main">
+          <div class="adv__main__title">
+            <div class="mtitle">
+              <h2>4-к. квартира, 78,4 м², 20/28 эт.</h2>
+            </div>
+            <div class="mprice__fav">
+              <div class="price">
+                <h2>40 610 000 ₽</h2>
+              </div>
+<!--              <a href="#" class="favoritext"><div class="favorite">-->
+<!--                <h4>Добавить в избранное</h4>-->
+<!--                <img src="@/assets/images/heart.png" alt="">-->
+<!--              </div></a>-->
+            </div>
+          </div>
+          <div class="adv__main__images">
+            <div class="main__image">
+              <a href="#"><img src="../assets/images/offer1.png" alt=""></a>
+            </div>
+            <div class="other__images">
+              <a href="#"><img src="../assets/images/offer3.png" alt=""></a>
+              <a href="#"><img src="../assets/images/offer2.png" alt=""></a>
+              <a href="#"><img src="../assets/images/offer4.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+
+        <div class="adv__host">
+          <div class="adv__host__about__user">
+            <div class="username">
+              <h2>Виктория</h2>
+            </div>
+            <div class="host__stat">
+              <div class="stat">
+                <h3>5</h3>
+              </div>
+              <div class="stars">
+                <img src="@/assets/images/star.png" alt="">
+                <img src="@/assets/images/star.png" alt="">
+                <img src="@/assets/images/star.png" alt="">
+                <img src="@/assets/images/star.png" alt="">
+                <img src="@/assets/images/star.png" alt="">
+              </div>
+            </div>
+            <div class="number">
+              <a href="#" class="favoritextinf"><h5>Показать номер</h5></a>
+            </div>
+<!--            <div class="message">-->
+<!--              <a href="#" class="favoritextinf"><h5>Написать владельцу</h5></a>-->
+<!--            </div>-->
+          </div>
+          <div class="userlogo">
+            <img src="@/assets/images/userlogosmall.png" alt="">
+          </div>
+        </div>
+      </div>
+
+      <div class="about__adv">
+        <div class="about__adv__title">
+          <h2>О квартире</h2>
+        </div>
+        <div class="about__adv__info">
+          <h4>Кол-во комнат: 4</h4>
+          <h4>Общая площадь: 78.4 м²</h4>
+          <h4>Площадь кухни: 12 м²</h4>
+          <h4>Этаж: 20</h4>
+        </div>
+        <div class="about__adv__descriptions">
+          <p>Продается 4х комнатная квартира, уютная, светлая, теплая. Натяжные потолки,
+            ламинат, деревянные евроокна, два кондиционера. Теплые полы в туалете, ванной,
+            кухне, частично в прихожей. Хороший вид из окна.</p>
+        </div>
+      </div>
+      <div class="reviews">
+        <div class="reviews__title">
+          <h2>Отзывы</h2>
+        </div>
+        <div class="reviews__blocks">
+          <div class="review">
+            <div class="review__avatar">
+              <img src="@/assets/images/forcomment.png" alt="">
+            </div>
+            <div class="rewiew__comment">
+              <h5>Очень приятный владелец, все чисто и опрятно</h5>
+            </div>
+            <div class="rewiew__stars">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+            </div>
+          </div>
+          <div class="review">
+            <div class="review__avatar">
+              <img src="@/assets/images/forcomment.png" alt="">
+            </div>
+            <div class="rewiew__comment">
+              <h5>Очень приятный владелец, все чисто и опрятно</h5>
+            </div>
+            <div class="rewiew__stars">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+            </div>
+          </div>
+          <div class="review">
+            <div class="review__avatar">
+              <img src="@/assets/images/forcomment.png" alt="">
+            </div>
+            <div class="rewiew__comment">
+              <h5>Очень приятный владелец, все чисто и опрятно</h5>
+            </div>
+            <div class="rewiew__stars">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+              <img src="@/assets/images/star.png" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "OfferView"
+}
+</script>
+
+<style scoped>
+  @import url("@/assets/css/offer.css");
+</style>

frontend/src/views/ProfileView.vue

@@ -0,0 +1,117 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header__table">
+        <div class="header__image">
+          <router-link to="/" class="nav__link" href="#">
+          </router-link>
+        </div>
+        <div class="header__block">
+          <div class="header__block__content">
+            <img src="@/assets/images/location.png" alt="">
+            <a class="nav__link_tomsk" href="#">Томск</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">блог</a>
+          </div>
+        </div>
+        <div class="header__block">
+          <div class="header__block__contenttop">
+            <a class="nav__link" href="#">контакты</a>
+          </div>
+          <div class="header__block__contentdown">
+            <a class="nav__link" href="#">помощь</a>
+          </div>
+        </div>
+        <div class="header__search">
+          <div class="search">
+            <div class="search__block">
+
+            </div>
+            <div class="search__img">
+              <a class="nav__link" href="#">
+                <img src="@/assets/images/search.jpg" alt="">
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="header__contacts">
+          <div class="header__contacts__imgtop">
+            <a class="nav__link" href="#">
+              <img src="@/assets/images/tell.jpg" alt="">
+            </a>
+          </div>
+          <div class="header__contacts__img">
+            <a class="nav__link" href="#">
+              <img src="@/assets/images/user.jpg" alt="">
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="intro">
+    <div class="main">
+      <div class="user__info">
+        <div class="user__logo">
+          <img src="../assets/images/userlogo.png" alt="">
+        </div>
+        <div class="username">
+          <h3>Виктория</h3>
+        </div>
+        <div class="user__stat">
+          <div class="stat"><h3>5</h3></div>
+          <div class="stars">
+            <img src="../assets/images/star.png" alt="">
+            <img src="../assets/images/star.png" alt="">
+            <img src="../assets/images/star.png" alt="">
+            <img src="../assets/images/star.png" alt="">
+            <img src="../assets/images/star.png" alt="">
+          </div>
+        </div>
+        <div class="user__hrefs">
+          <div class="aboutme">
+            <a @click.prevent="activeTab = 'profile-about'">
+              <h2>Обо мне</h2>
+            </a>
+          </div>
+          <div class="my__notice">
+            <a @click.prevent="activeTab = 'profile-my-offers'">
+              <h2>Мои объявления</h2></a>
+          </div>
+          <div class="add__notice">
+            <a @click.prevent="activeTab = 'profile-add-offer'">
+              <h2>Добавить объявление</h2>
+            </a>
+          </div>
+<!--          <div class="favorites">-->
+<!--            <a href="#"><h2>Избранное</h2></a>-->
+<!--          </div>-->
+        </div>
+      </div>
+      <component :is="activeTab"></component>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProfileAbout from "@/components/ProfileAbout.vue";
+import ProfileMyOffers from "@/components/ProfileMyOffers.vue";
+import ProfileAddOffer from "@/components/ProfileAddOffer.vue";
+export default {
+  components: {ProfileAbout, ProfileMyOffers, ProfileAddOffer},
+  data ()  {
+    return { activeTab : "profile-about" }
+  }
+}
+</script>>
+
+<style scoped>
+@import url("@/assets/css/profile.css");
+</style>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "metr",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}