Resolve "Change login style"
This commit is contained in:
parent
ce3a45efda
commit
1631156ef4
995
frontend/package-lock.json
generated
995
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,6 +10,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apexcharts": "^3.19.0",
|
"apexcharts": "^3.19.0",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
|
"node-sass": "^4.14.1",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-apexcharts": "^1.5.3",
|
"vue-apexcharts": "^1.5.3",
|
||||||
"vue-router": "^3.1.6"
|
"vue-router": "^3.1.6"
|
||||||
|
@ -20,6 +20,12 @@ name: "Footer"
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.footer {
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 10vh;
|
||||||
background: #272727;
|
background: #272727;
|
||||||
color: #f1f1f1f1;
|
color: #f1f1f1f1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<u><router-link to="/"><img alt="Vue logo" src="../../assets/logo.svg"></router-link></u>
|
<u><router-link to="/"><img alt="Vue logo" src="../../assets/logo.svg"></router-link></u>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<u><router-link to="/login">Login</router-link></u>
|
<u><router-link to="/signin">Sign In</router-link></u>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -18,6 +18,7 @@
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 10vh;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: #272727;
|
background: #272727;
|
||||||
color: #f1f1f1f1;
|
color: #f1f1f1f1;
|
||||||
@ -33,9 +34,9 @@
|
|||||||
|
|
||||||
.header img {
|
.header img {
|
||||||
float: left;
|
float: left;
|
||||||
height: 60px;
|
height: 7vh;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 5px;
|
/* padding: 5px; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -9,6 +9,7 @@ import About from "../views/About.vue";
|
|||||||
import Login from "../views/Login.vue";
|
import Login from "../views/Login.vue";
|
||||||
import Register from "../views/Register.vue";
|
import Register from "../views/Register.vue";
|
||||||
import WeekSummary from "../views/WeekSummary.vue";
|
import WeekSummary from "../views/WeekSummary.vue";
|
||||||
|
import SignIn from "../views/SignIn.vue";
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@ -22,6 +23,11 @@ const routes = [
|
|||||||
name: "TimeRecords",
|
name: "TimeRecords",
|
||||||
component: TimeRecords
|
component: TimeRecords
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/signin",
|
||||||
|
name: "SignIn",
|
||||||
|
component: SignIn
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/login",
|
path: "/login",
|
||||||
name: "Login",
|
name: "Login",
|
||||||
|
261
frontend/src/views/SignIn.vue
Normal file
261
frontend/src/views/SignIn.vue
Normal file
@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<div class="test" >
|
||||||
|
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="container" :class="{'sign-up-active' : signUp}">
|
||||||
|
<div class="overlay-container">
|
||||||
|
<div class="overlay">
|
||||||
|
<div class="overlay-left">
|
||||||
|
<h2>Welcome Back!</h2>
|
||||||
|
<img src="../assets/logo_gt.svg" height="100vh">
|
||||||
|
<button class="invert" id="signIn" @click="signUp = !signUp">Sign In</button>
|
||||||
|
</div>
|
||||||
|
<div class="overlay-right">
|
||||||
|
<h2>Create a new account</h2>
|
||||||
|
<img src="../assets/logo_gt.svg" height="100vh">
|
||||||
|
<button class="invert" id="signUp" @click="signUp = !signUp">Sign Up</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form class="sign-up" action="#">
|
||||||
|
<h2>Create login</h2>
|
||||||
|
|
||||||
|
<input type="text" placeholder="Firstname" v-model="firstname"/>
|
||||||
|
<input type="text" placeholder="Lastname" v-model="lastname"/>
|
||||||
|
<input type="text" placeholder="Username" vmodel="usernamer"/>
|
||||||
|
<input type="password" placeholder="Password" v-model="passwordr"/>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</form>
|
||||||
|
<form class="sign-in" action="#">
|
||||||
|
<h2>Sign In</h2>
|
||||||
|
<input type="text" placeholder="Username" v-model="usernamel" />
|
||||||
|
<input type="password" placeholder="Password" v-model="passwordl" />
|
||||||
|
<button>Sign In</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SignIn",
|
||||||
|
// data: () => {
|
||||||
|
// return {
|
||||||
|
// signUp: false
|
||||||
|
// }
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
signUp: false,
|
||||||
|
firstname: '',
|
||||||
|
lastname: '',
|
||||||
|
usernamer: '',
|
||||||
|
passwordr: '',
|
||||||
|
usernamel: '',
|
||||||
|
passwordl: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log(this.usernamel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.test {
|
||||||
|
|
||||||
|
height: 70vh;
|
||||||
|
// box-sizing: content-box;
|
||||||
|
display: flex;
|
||||||
|
//flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
// padding-top: %;
|
||||||
|
// padding-bottom: 0%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
// flex:1;
|
||||||
|
|
||||||
|
|
||||||
|
height: 70vh;
|
||||||
|
position: relative;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
// box-shadow: 0 15px 30px rgba(0, 0, 0, .2),
|
||||||
|
// 0 10px 10px rgba(0, 0, 0, .2);
|
||||||
|
// background: linear-gradient(to bottom, #efefef, #ccc);
|
||||||
|
background-color: #131313;
|
||||||
|
.overlay-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform .5s ease-in-out;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: relative;
|
||||||
|
left: -100%;
|
||||||
|
height: 100%;
|
||||||
|
width: 200%;
|
||||||
|
// background: linear-gradient(to bottom right, #7FD625, #009345);
|
||||||
|
background-color: #0096ff;
|
||||||
|
color: #fff;
|
||||||
|
transform: translateX(0);
|
||||||
|
transition: transform .5s ease-in-out;
|
||||||
|
}
|
||||||
|
@mixin overlays($property) {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 70px 40px;
|
||||||
|
width: calc(50% - 80px);
|
||||||
|
height: calc(100% - 140px);
|
||||||
|
text-align: center;
|
||||||
|
transform: translateX($property);
|
||||||
|
transition: transform .5s ease-in-out;
|
||||||
|
}
|
||||||
|
.overlay-left {
|
||||||
|
@include overlays(-20%);
|
||||||
|
}
|
||||||
|
.overlay-right {
|
||||||
|
@include overlays(0);
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 20px 0 30px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #222;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #0096ff;
|
||||||
|
background-color: #0096ff;
|
||||||
|
color: #EBE7D9;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10px 40px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform .1s ease-in;
|
||||||
|
&:active {
|
||||||
|
transform: scale(.9);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button.invert {
|
||||||
|
background-color: #272727;
|
||||||
|
border-color: #272727;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 90px 60px;
|
||||||
|
width: calc(50% - 120px);
|
||||||
|
height: calc(100% - 180px);
|
||||||
|
text-align: center;
|
||||||
|
// background: linear-gradient(to bottom, #efefef, #ccc);
|
||||||
|
background-color: #272727;
|
||||||
|
transition: all .5s ease-in-out;
|
||||||
|
div {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
background-color: #EBE7D9;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 15px;
|
||||||
|
margin: 6px 0;
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
border-radius: 15px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4),
|
||||||
|
0 -1px 1px #fff,
|
||||||
|
0 1px 0 #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sign-in {
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.sign-up {
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.sign-up-active {
|
||||||
|
.sign-in {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
.sign-up {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 5;
|
||||||
|
animation: show .5s;
|
||||||
|
}
|
||||||
|
.overlay-container {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
.overlay-left {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
.overlay-right {
|
||||||
|
transform: translateX(20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes show {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
49% {
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user