Wal/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

Adding menu button + Cursus

Browse Source
This commit is contained in:
Wawilski
2024-03-06 21:00:35 +01:00
parent d9ec085d2c
commit 886077349c
2 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.vue
View File

@ -34,9 +34,9 @@
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div> <div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
<li style="float: right;" title="Options"> <li style="float: right;" title="Options">
<a href="#Options"> <div class="item">
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div> <div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </div></li>
</ul> </ul>
</div> </div>
@ -112,7 +112,7 @@
transition-duration: .3s; transition-duration: .3s;
} }
li a{ .item,li a{
display: flex; display: flex;
padding: 8px 16px; padding: 8px 16px;
color:rgb(255, 255, 255); color:rgb(255, 255, 255);
@ -159,7 +159,8 @@
} }
ul.horizontal li a:hover:not(.active){ ul.horizontal .item:hover, li a:hover:not(.active){
background-color: black; background-color: black;
border-radius:6px; border-radius:6px;
color:white; color:white;

42
frontend/src/Login.vue
View File

@ -4,23 +4,29 @@
const login= ref(true) const login= ref(true)
const page = ref(0) const page = ref(0)
const emailIN=ref("") const emailID=ref("")
const passwordIN=ref("") const passwordIN=ref("")
const surname=ref("") const surname=ref("")
const firstname=ref("") const firstname=ref("")
const passwordOUT=ref("") const passwordOUT=ref("")
const emailOUT=ref("") const emailOUT=ref("")
const address=ref("") const address=ref("")
const country=ref("") const country=ref("")
const cursus=ref("")
const inputs = [emailIN,passwordIN] const inputs = [{_emailID:emailID},{_passwordIN:passwordIN}]
const outputs= [surname,firstname,passwordOUT,emailOUT,address,country] const outputs= [{_surname:surname},{_firstname:firstname},{_passwordOUT:passwordOUT},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
</script> </script>
<template> <template>
<body> <body>
<div class="Home">
<a href="/">
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a>
</div>
<div class="logBoxCenterer"> <div class="logBoxCenterer">
<div class='loginBox'> <div class='loginBox'>
@ -29,7 +35,7 @@
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">{{i18n("login.guest.signin")}}</h1> <h1 style="color:rgb(239,60,168); font-family: sans-serif;">{{i18n("login.guest.signin")}}</h1>
<div class="inputBox"> <div class="inputBox">
<p>ID / {{i18n("login.guest.email")}}</p> <p>ID / {{i18n("login.guest.email")}}</p>
<input type="text" v-model="emailIN"> <input type="text" v-model="emailID">
</div> </div>
<div class="inputBox"> <div class="inputBox">
<p>{{i18n("login.guest.password")}}</p> <p>{{i18n("login.guest.password")}}</p>
@ -62,6 +68,14 @@
<p>{{i18n("login.guest.password")}}</p> <p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordOUT"> <input type="password" v-model="passwordOUT">
</div> </div>
<div class="inputBox">
<p>Cursus</p>
<select v-model="cursus">
<option value="Chemistry">Chemistry</option>
<option value="Psycho">Psychology</option>
<option value="IT">IT</option>
</select>
</div>
<div class="switchpage"> <div class="switchpage">
<button @click="page++">{{i18n("login.guest.nextpage")}}</button> <button @click="page++">{{i18n("login.guest.nextpage")}}</button>
@ -101,6 +115,20 @@
</template> </template>
<style scoped> <style scoped>
.Home{
display: flex;
padding: 8px 16px;
color:rgb(255, 255, 255);
text-decoration: none;
}
.Home:hover{
width:40px;
background-color: black;
border-radius:6px;
color:white;
transform: translate(0px ,1px);
}
.logBoxCenterer { .logBoxCenterer {
position: absolute; position: absolute;
@ -134,7 +162,7 @@
} }
.inputBox input,button { .inputBox input,button,select {
width:100%; width:100%;
background:rgb(255, 0 255); background:rgb(255, 0 255);
@ -178,7 +206,7 @@
} }
button { button,select{
margin-bottom:20px; margin-bottom:20px;
background-color: rgb(239,60,168); background-color: rgb(239,60,168);
cursor: pointer; cursor: pointer;