imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Added login form

Browse Source 
Still needs to be hooked onto a submit functionality
This commit is contained in:
Colin Kallemein 2024-05-02 22:36:34 +02:00
parent 4ec7f9ad38
commit 94ef5a1d23
2 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/main.scss
View File

@ -10,7 +10,7 @@ body {
background: black; background: black;
} }
p, a, li { p, a, li, label {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
color: #FFF; color: #FFF;
} }

48
src/components/screens/Login.vue
View File

@ -4,8 +4,21 @@
<div class="content-wrapper"> <div class="content-wrapper">
<h1 class="main-title">NEW QUEST</h1> <h1 class="main-title">NEW QUEST</h1>
<div class="login-form">
<form method="post">
<div class="form-field">
<label for="username">USERNAME</label>
<input type="text" name="username" required>
</div>
<div class="form-field">
<label for="password">PASSWORD</label>
<input type="password" name="password" required>
</div>
</form>
</div>
<div class="row-buttons"> <div class="row-buttons">
<a class="button button-1" href="/"> <a class="button button-1" href="/" id="submit">
LOGIN LOGIN
</a> </a>
@ -59,6 +72,39 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.login-form {
position: absolute;
bottom: 7rem;
width: 100%;
form {
display: grid;
gap: 1.5rem;
width: inherit;
.form-field {
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 3px;
width: 30%;
margin: 0 auto;
label {
color: #000;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.25rem 0.5rem;
}
input {
background-color: transparent;
border: none;
padding: 0.5rem 0.25rem;
font-size: 16px;
}
}
}
}
.row-buttons { .row-buttons {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;