2024-03-06 14:20:32 +01:00
|
|
|
<script setup>
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import i18n from './i18n.js'
|
|
|
|
|
|
|
|
|
|
const formname = i18n(login.guest.forname)
|
|
|
|
|
const login= ref(true)
|
|
|
|
|
const page = ref(0)
|
|
|
|
|
|
|
|
|
|
const message = ref("")
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
2024-03-03 18:37:55 +01:00
|
|
|
<template>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="logBoxCenterer">
|
|
|
|
|
<div class='loginBox'>
|
2024-03-06 14:20:32 +01:00
|
|
|
|
|
|
|
|
<div v-if="login">
|
|
|
|
|
<div class="form">
|
|
|
|
|
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>USERNAME</p>
|
|
|
|
|
|
|
|
|
|
<input type="text" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>PASSWORD</p>
|
|
|
|
|
<input type="password" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="register">
|
|
|
|
|
<a @click="login=!login">Register</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<input type="submit" value="Login">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-03-03 18:37:55 +01:00
|
|
|
</div>
|
2024-03-06 14:20:32 +01:00
|
|
|
|
|
|
|
|
<div v-else>
|
|
|
|
|
<div class="form">
|
|
|
|
|
<h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">WELCOME TO THE UNIVERSITY</h1>
|
|
|
|
|
|
|
|
|
|
<div v-if="page=== 0">
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>LASTNAME</p>
|
|
|
|
|
<input type="text" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>{{ forname }}</p>
|
|
|
|
|
<input type="text" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>PASSWORD</p>
|
|
|
|
|
<input type="password" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<button @click="page++">Next page</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="(login=!login) && (page=0)" class="register">
|
|
|
|
|
<a>Already Registered</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>E-MAIL</p>
|
|
|
|
|
<input type="mail" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>ADDRESS</p>
|
|
|
|
|
<input type="text" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>COUNTRY</p>
|
|
|
|
|
<input type="text" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<button @click="page--">Last page</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="(login=!login) && (page=0)" class="register">
|
|
|
|
|
<a>Already Registered</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-03-03 18:37:55 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
2024-03-02 15:52:35 +01:00
|
|
|
|
|
|
|
|
.logBoxCenterer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginBox {
|
|
|
|
|
background-color: rgb(24,24,24);
|
|
|
|
|
position : absolute;
|
|
|
|
|
width: 400px;
|
|
|
|
|
display:flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
box-shadow:0 5px 25px #000000;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.form {
|
|
|
|
|
position:relative;
|
|
|
|
|
width:100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items:center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inputBox input {
|
|
|
|
|
width:100%;
|
|
|
|
|
background:rgb(255, 0 255);
|
|
|
|
|
border: none;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-top:10px;
|
|
|
|
|
padding-bottom:10px;
|
|
|
|
|
outline:none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size:1.35em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inputBox p{
|
|
|
|
|
position:relative;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
font-family:sans-serif ;
|
|
|
|
|
color:rgb(239,60,168);
|
|
|
|
|
transition:0.5;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.register{
|
|
|
|
|
color:rgb(239,60,168);
|
|
|
|
|
width: 100%;
|
|
|
|
|
display:flex;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-06 14:20:32 +01:00
|
|
|
|
|
|
|
|
button , input[type = "submit"] {
|
|
|
|
|
margin-top:40px;
|
|
|
|
|
margin-bottom:20px;
|
2024-03-02 15:52:35 +01:00
|
|
|
background-color: rgb(239,60,168);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding:10px;
|
|
|
|
|
font-size:1.35em;
|
2024-03-06 14:20:32 +01:00
|
|
|
border:none;
|
|
|
|
|
border-radius:20px;
|
|
|
|
|
|
2024-03-02 15:52:35 +01:00
|
|
|
}
|
|
|
|
|
|
2024-03-06 14:20:32 +01:00
|
|
|
button:active , input[type = "submit"]:active{
|
2024-03-02 15:52:35 +01:00
|
|
|
opacity:0.8;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2024-03-03 18:37:55 +01:00
|
|
|
</style>
|
