diff --git a/FrontendFolder/switch-room/src/App.vue b/FrontendFolder/switch-room/src/App.vue
index d79ac650bb6d44f13b4efee3ebf71bfd23762286..a732bafee8722146197080e5e4898bdaacf18a5e 100644
--- a/FrontendFolder/switch-room/src/App.vue
+++ b/FrontendFolder/switch-room/src/App.vue
@@ -1,6 +1,11 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import AppFooter from "@/components/AppFooter.vue";
+import AppHeader from "@/components/AppHeader.vue";
+</script>
<template>
+ <app-header></app-header>
<router-view></router-view>
+ <app-footer></app-footer>
</template>
<style></style>
diff --git a/FrontendFolder/switch-room/src/components/AppHeader.vue b/FrontendFolder/switch-room/src/components/AppHeader.vue
index 1727560fbed815825e7f31e58a160f1504a52bc0..8b2491eba320e0e17721795730c0c5c2634648b3 100644
--- a/FrontendFolder/switch-room/src/components/AppHeader.vue
+++ b/FrontendFolder/switch-room/src/components/AppHeader.vue
@@ -1,73 +1,20 @@
<template>
- <header>
- <div class="overlay">
- <h1>Switch Room</h1>
- <h3>Reasons for Choosing US</h3>
- <p>
- Wanna to pay for hotel for traveling? Switch Room provide the local
- rooms for you. No need to pay rental. You can switch your living home
- with other people who want to travel to your place.
- </p>
- <br />
- <button>READ MORE</button>
- </div>
- </header>
+ <div class="h-6" />
+ <el-menu
+ :default-active="activeIndex2"
+ class="el-menu-demo"
+ mode="horizontal"
+ background-color="#545c64"
+ text-color="#fff"
+ active-text-color="#ffd04b"
+ @select="handleSelect"
+ >
+ <el-menu-item index="1">Main</el-menu-item>
+ <el-menu-item index="2">Wish List</el-menu-item>
+ <el-menu-item index="3">Flight Ticket</el-menu-item>
+ </el-menu>
</template>
<script lang="ts"></script>
-<style scoped>
-* {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
-}
-body {
- height: 900px;
-}
-header {
- background: url("@/assets/mainPage/headerPhoto.jpeg");
- text-align: center;
- width: 100%;
- height: auto;
- background-size: cover;
- background-attachment: fixed;
- position: relative;
- overflow: hidden;
- border-radius: 0 0 85% 85% / 30%;
-}
-header .overlay {
- width: 100%;
- height: 100%;
- padding: 50px;
- color: #fff;
- text-shadow: 1px 1px 1px #333;
- background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
-}
-
-h1 {
- font-family: "Dancing Script", cursive;
- font-size: 80px;
- margin-bottom: 30px;
-}
-
-h3,
-p {
- font-family: "Open Sans", sans-serif;
- margin-bottom: 30px;
-}
-
-button {
- border: none;
- outline: none;
- padding: 10px 20px;
- border-radius: 50px;
- color: #333;
- background: #fff;
- margin-bottom: 50px;
- box-shadow: 0 3px 20px 0 #0000003b;
-}
-button:hover {
- cursor: pointer;
-}
-</style>
+<style scoped></style>
diff --git a/FrontendFolder/switch-room/src/components/MainPage.vue b/FrontendFolder/switch-room/src/components/MainPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f03d384905eb104392374b7b5b1e551e76e1cb1
--- /dev/null
+++ b/FrontendFolder/switch-room/src/components/MainPage.vue
@@ -0,0 +1,197 @@
+<template>
+ <div class="content">
+ <div class="leftPart">
+ <div class="overlay">
+ <h1>Switch Room</h1>
+ <h3>Reasons for Choosing US</h3>
+ <p>
+ Wanna to pay for hotel for traveling? Switch Room provide the local
+ rooms for you. No need to pay rental. You can switch your living home
+ with other people who want to travel to your place.
+ </p>
+ <br />
+ <router-link to="/login">
+ <button>READ MORE</button>
+ </router-link>
+ </div>
+ </div>
+ <div id="card">
+ <div id="card-content">
+ <div id="card-title">
+ <h2>LOGIN</h2>
+ <div class="underline-title"></div>
+ </div>
+ <form method="post" class="form">
+ <label for="user-email" style="padding-top: 13px">
+ Username
+ </label>
+ <input
+ id="user-email"
+ class="form-content"
+ type="text"
+ name="username"
+ autocomplete="on"
+ required
+ />
+ <div class="form-border"></div>
+ <label for="user-password" style="padding-top: 22px"
+ > Password
+ </label>
+ <input
+ id="user-password"
+ class="form-content"
+ type="password"
+ name="password"
+ required
+ />
+ <div class="form-border"></div>
+ <a href="#">
+ <legend id="forgot-pass">Forgot password?</legend>
+ </a>
+ <input id="submit-btn" type="submit" name="submit" value="LOGIN" />
+ <router-link to="/register">
+ <div id="signup">Don't have account yet?</div>
+ </router-link>
+ </form>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.content {
+ display: flex;
+}
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+body {
+ height: 900px;
+}
+.leftPart {
+ background: url("@/assets/mainPage/headerPhoto.jpeg");
+ text-align: center;
+ width: 70%;
+ height: auto;
+ background-size: cover;
+ background-attachment: fixed;
+ position: relative;
+ overflow: hidden;
+ border-radius: 0 0 85% 85% / 30%;
+}
+.leftPart .overlay {
+ width: 100%;
+ height: 100%;
+ padding: 50px;
+ color: #fff;
+ text-shadow: 1px 1px 1px #333;
+ background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
+}
+
+h1 {
+ font-family: "Dancing Script", cursive;
+ font-size: 80px;
+ margin-bottom: 30px;
+}
+
+h3,
+p {
+ font-family: "Open Sans", sans-serif;
+ margin-bottom: 30px;
+}
+
+button {
+ border: none;
+ outline: none;
+ padding: 10px 20px;
+ border-radius: 50px;
+ color: #333;
+ background: #fff;
+ margin-bottom: 50px;
+ box-shadow: 0 3px 20px 0 #0000003b;
+}
+button:hover {
+ cursor: pointer;
+}
+a {
+ text-decoration: none;
+}
+label {
+ font-family: "Raleway", sans-serif;
+ font-size: 11pt;
+}
+#forgot-pass {
+ color: #2dbd6e;
+ font-family: "Raleway", sans-serif;
+ font-size: 10pt;
+ margin-top: 3px;
+ text-align: right;
+}
+#card {
+ background: #fbfbfb;
+ border-radius: 8px;
+ box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
+ height: 410px;
+ width: 30%;
+}
+#card-content {
+ padding: 12px 44px;
+}
+#card-title {
+ font-family: "Raleway Thin", sans-serif;
+ letter-spacing: 4px;
+ padding-bottom: 23px;
+ padding-top: 13px;
+ text-align: center;
+}
+#signup {
+ color: #2dbd6e;
+ font-family: "Raleway", sans-serif;
+ font-size: 10pt;
+ margin-top: 16px;
+ text-align: center;
+}
+#submit-btn {
+ background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);
+ border: none;
+ border-radius: 21px;
+ box-shadow: 0px 1px 8px #24c64f;
+ cursor: pointer;
+ color: white;
+ font-family: "Raleway SemiBold", sans-serif;
+ height: 42.3px;
+ margin: 0 auto;
+ margin-top: 50px;
+ transition: 0.25s;
+ width: 153px;
+}
+#submit-btn:hover {
+ box-shadow: 0px 1px 18px #24c64f;
+}
+.form {
+ align-items: left;
+ display: flex;
+ flex-direction: column;
+}
+.form-border {
+ background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+ height: 1px;
+ width: 100%;
+}
+.form-content {
+ background: #fbfbfb;
+ border: none;
+ outline: none;
+ padding-top: 14px;
+}
+.underline-title {
+ background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+ height: 2px;
+ margin: 0rem auto 0 auto;
+ width: 89px;
+}
+</style>
diff --git a/FrontendFolder/switch-room/src/components/RegisterPage.vue b/FrontendFolder/switch-room/src/components/RegisterPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..881f35b1bdfeea9a125ebef852d86746f0403f81
--- /dev/null
+++ b/FrontendFolder/switch-room/src/components/RegisterPage.vue
@@ -0,0 +1,330 @@
+<template>
+ <div class="form_wrapper">
+ <div class="form_container">
+ <div class="title_container">
+ <h2>Registration</h2>
+ <div class="underline-title"></div>
+ </div>
+ <div class="row clearfix">
+ <div class="">
+ <form method="post" class="form">
+ <!-- Username input -->
+ <label for="user-name" style="padding-top: 13px">
+ Username
+ </label>
+ <input
+ id="user-name"
+ class="form-content"
+ type="text"
+ name="username"
+ autocomplete="on"
+ required
+ />
+ <div class="form-border"></div>
+
+ <!-- Password input -->
+ <label for="user-password" style="padding-top: 13px">
+ Password
+ </label>
+ <input
+ id="user-password"
+ class="form-content"
+ type="password"
+ name="password"
+ required
+ />
+ <div class="form-border"></div>
+
+ <!-- retype Password input -->
+ <label for="user-retypePassword" style="padding-top: 13px">
+ Re-type Password
+ </label>
+ <input
+ id="user-password"
+ class="form-content"
+ type="password"
+ name="retypePassword"
+ required
+ />
+ <div class="form-border"></div>
+
+ <!-- Firstname input -->
+ <label for="user-firstname" style="padding-top: 13px">
+ First Name
+ </label>
+ <input
+ id="user-firstname"
+ class="form-content"
+ type="text"
+ name="firstname"
+ required
+ />
+ <div class="form-border"></div>
+
+ <!-- Lastname input -->
+ <label for="user-lastname" style="padding-top: 13px">
+ Last Name
+ </label>
+ <input
+ id="user-lastname"
+ class="form-content"
+ type="text"
+ name="lastname"
+ required
+ />
+ <div class="form-border"></div>
+
+ <!-- Gender Choose -->
+ <label for="user-gender" style="padding-top: 13px">
+ Gender
+ </label>
+ <div class="mb-2 flex items-center text-sm">
+ <el-radio-group v-model="radio1" class="ml-4">
+ <el-radio label="1" size="large">Male</el-radio>
+ <el-radio label="2" size="large">Female</el-radio>
+ </el-radio-group>
+ </div>
+
+ <!-- terms agreement -->
+ <div>
+ <el-checkbox
+ v-model="checked1"
+ label="I agree with terms and conditions"
+ size="large"
+ />
+ </div>
+ <input id="submit-btn" type="submit" value="Register" />
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const radio1 = ref("1");
+const checked1 = ref(false);
+</script>
+
+<style scoped>
+body {
+ font-family: Verdana, Geneva, sans-serif;
+ font-size: 14px;
+ background: #f2f2f2;
+}
+
+.form_wrapper {
+ justify-content: center;
+ align-items: center;
+ display: flex;
+}
+
+.form_container {
+ background: #fbfbfb;
+ border-radius: 8px;
+ box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
+ height: auto;
+ width: 30%;
+ padding: 12px 44px;
+}
+
+.title_container {
+ font-family: "Raleway Thin", sans-serif;
+ letter-spacing: 4px;
+ padding-bottom: 23px;
+ padding-top: 13px;
+ text-align: center;
+}
+
+.form {
+ align-items: left;
+ display: flex;
+ flex-direction: column;
+}
+
+.form-content {
+ background: #fbfbfb;
+ border: none;
+ outline: none;
+ padding-top: 14px;
+}
+
+.form-border {
+ background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+ height: 1px;
+ width: 100%;
+}
+
+#submit-btn {
+ background: -webkit-linear-gradient(right, #a6f77b, #2dbd6e);
+ border: none;
+ border-radius: 21px;
+ box-shadow: 0px 1px 8px #24c64f;
+ cursor: pointer;
+ color: white;
+ font-family: "Raleway SemiBold", sans-serif;
+ height: 42.3px;
+ margin: 0 auto;
+ margin-top: 50px;
+ transition: 0.25s;
+ width: 153px;
+}
+#submit-btn:hover {
+ box-shadow: 0px 1px 18px #24c64f;
+}
+
+.underline-title {
+ background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
+ height: 2px;
+ margin: -1.1rem auto 0 auto;
+ width: 200px;
+}
+
+.input_field radio_option {
+ margin-top: 10px;
+}
+@-webkit-keyframes check {
+ 0% {
+ height: 0;
+ width: 0;
+ }
+ 25% {
+ height: 0;
+ width: 7px;
+ }
+ 50% {
+ height: 20px;
+ width: 7px;
+ }
+}
+
+@keyframes check {
+ 0% {
+ height: 0;
+ width: 0;
+ }
+ 25% {
+ height: 0;
+ width: 7px;
+ }
+ 50% {
+ height: 20px;
+ width: 7px;
+ }
+}
+
+@-webkit-keyframes expand {
+ 0% {
+ -webkit-transform: scale3d(1, 0, 1);
+ opacity: 0;
+ }
+ 25% {
+ -webkit-transform: scale3d(1, 1.2, 1);
+ }
+ 50% {
+ -webkit-transform: scale3d(1, 0.85, 1);
+ }
+ 75% {
+ -webkit-transform: scale3d(1, 1.05, 1);
+ }
+ 100% {
+ -webkit-transform: scale3d(1, 1, 1);
+ opacity: 1;
+ }
+}
+
+@keyframes expand {
+ 0% {
+ -webkit-transform: scale3d(1, 0, 1);
+ transform: scale3d(1, 0, 1);
+ opacity: 0;
+ }
+ 25% {
+ -webkit-transform: scale3d(1, 1.2, 1);
+ transform: scale3d(1, 1.2, 1);
+ }
+ 50% {
+ -webkit-transform: scale3d(1, 0.85, 1);
+ transform: scale3d(1, 0.85, 1);
+ }
+ 75% {
+ -webkit-transform: scale3d(1, 1.05, 1);
+ transform: scale3d(1, 1.05, 1);
+ }
+ 100% {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes bounce {
+ 0% {
+ -webkit-transform: translate3d(0, -25px, 0);
+ opacity: 0;
+ }
+ 25% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ }
+ 50% {
+ -webkit-transform: translate3d(0, -6px, 0);
+ }
+ 75% {
+ -webkit-transform: translate3d(0, 2px, 0);
+ }
+ 100% {
+ -webkit-transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes bounce {
+ 0% {
+ -webkit-transform: translate3d(0, -25px, 0);
+ transform: translate3d(0, -25px, 0);
+ opacity: 0;
+ }
+ 25% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+ 50% {
+ -webkit-transform: translate3d(0, -6px, 0);
+ transform: translate3d(0, -6px, 0);
+ }
+ 75% {
+ -webkit-transform: translate3d(0, 2px, 0);
+ transform: translate3d(0, 2px, 0);
+ }
+ 100% {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+@media (max-width: 600px) {
+ .form_wrapper {
+ .col_half {
+ width: 100%;
+ float: none;
+ }
+ }
+ .bottom_row {
+ .col_half {
+ width: 50%;
+ float: left;
+ }
+ }
+ .form_container {
+ .row {
+ .col_half.last {
+ border-left: none;
+ }
+ }
+ }
+ .remember_me {
+ padding-bottom: 20px;
+ }
+}
+</style>
diff --git a/FrontendFolder/switch-room/src/main.ts b/FrontendFolder/switch-room/src/main.ts
index 5945d532adf5e04b6e008cdcef3de8d36373c85c..d7d29c5051447ec96febc3bc3d79f73c347df6a4 100644
--- a/FrontendFolder/switch-room/src/main.ts
+++ b/FrontendFolder/switch-room/src/main.ts
@@ -1,6 +1,6 @@
import { createApp } from "vue";
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";
/* import the fontawesome core */
@@ -33,5 +33,5 @@ library.add(faGithub);
createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.use(router)
- .use(ElementPlus)
+ .use(ElementPlus)
.mount("#app");
diff --git a/FrontendFolder/switch-room/src/router/index.ts b/FrontendFolder/switch-room/src/router/index.ts
index 7f45b70750d27d72aa533510a00c950c8a01c655..443ca2e90dcc467611bcb7a1770eb783eb45a51e 100644
--- a/FrontendFolder/switch-room/src/router/index.ts
+++ b/FrontendFolder/switch-room/src/router/index.ts
@@ -1,5 +1,6 @@
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";
+import RegisterView from "../views/RegisterView.vue";
const routes: Array<RouteRecordRaw> = [
{
@@ -8,13 +9,9 @@ const routes: Array<RouteRecordRaw> = [
component: HomeView,
},
{
- path: "/about",
- name: "about",
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+ path: "/register",
+ name: "register",
+ component: RegisterView,
},
{
path: "/offer-page",
diff --git a/FrontendFolder/switch-room/src/views/HomeView.vue b/FrontendFolder/switch-room/src/views/HomeView.vue
index 4e0530f9f5cf95d6111b3d461cf9f1fa219c8069..44192bdb38701ffe30a9a356cb829e104e1615f9 100644
--- a/FrontendFolder/switch-room/src/views/HomeView.vue
+++ b/FrontendFolder/switch-room/src/views/HomeView.vue
@@ -1,11 +1,9 @@
<template>
- <app-header></app-header>
- <app-footer></app-footer>
+ <main-page></main-page>
<app-wel></app-wel>
</template>
<script setup lang="ts">
-import AppHeader from "@/components/AppHeader.vue";
-import AppFooter from "@/components/AppFooter.vue";
+import MainPage from "@/components/MainPage.vue";
import AppWel from "@/components/HelloWorld.vue";
</script>
diff --git a/FrontendFolder/switch-room/src/views/RegisterView.vue b/FrontendFolder/switch-room/src/views/RegisterView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2130b59341a1cdcdc7c7903ead6a7521cc0206e
--- /dev/null
+++ b/FrontendFolder/switch-room/src/views/RegisterView.vue
@@ -0,0 +1,9 @@
+<template>
+ <register-page></register-page>
+</template>
+
+<script setup lang="ts">
+import RegisterPage from "@/components/RegisterPage.vue";
+</script>
+
+<style scoped></style>