Skip to content
Snippets Groups Projects
Commit a77f12f1 authored by fz2907's avatar fz2907
Browse files

Merge branch 'LoginPage' into 'sprint_1_offer_wishlist_page' 

Login page to sprint_1_offer_wishlist_page

See merge request !16
parents fd83c940 06ee6d24
No related branches found
No related tags found
4 merge requests!27Sprint 1 done,!20WishListPage and OfferPage UI done.,!17Merge branch 'LoginPage' into 'sprint_1_offer_wishlist_page' into "Sprint_1",!16Login page to sprint_1_offer_wishlist_page
Hide whitespace changes
Inline Side-by-side
Showing
with 566 additions and 83 deletions
FrontendFolder/switch-room/src/App.vue
+ 6
− 1
View file @ a77f12f1
<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>
FrontendFolder/switch-room/src/components/AppHeader.vue
+ 15
− 68
View file @ a77f12f1
<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>
FrontendFolder/switch-room/src/components/MainPage.vue 0 → 100644
+ 197
− 0
View file @ a77f12f1
<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">
&nbsp;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"
>&nbsp;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>
FrontendFolder/switch-room/src/components/RegisterPage.vue 0 → 100644
+ 330
− 0
View file @ a77f12f1
<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">
&nbsp;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">
&nbsp;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">
&nbsp;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">
&nbsp;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">
&nbsp;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">
&nbsp;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>
FrontendFolder/switch-room/src/main.ts
+ 3
− 3
View file @ a77f12f1
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");
FrontendFolder/switch-room/src/router/index.ts
+ 4
− 7
View file @ a77f12f1
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",
......
FrontendFolder/switch-room/src/views/HomeView.vue
+ 2
− 4
View file @ a77f12f1
<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>
FrontendFolder/switch-room/src/views/RegisterView.vue 0 → 100644
+ 9
− 0
View file @ a77f12f1
<template>
<register-page></register-page>
</template>
<script setup lang="ts">
import RegisterPage from "@/components/RegisterPage.vue";
</script>
<style scoped></style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment