From 94ef5a1d2391243fc1a9fd62022c5f46b760d680 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 2 May 2024 22:36:34 +0200
Subject: [PATCH] Added login form
Still needs to be hooked onto a submit functionality
---
src/assets/main.scss | 2 +-
src/components/screens/Login.vue | 48 +++++++++++++++++++++++++++++++-
2 files changed, 48 insertions(+), 2 deletions(-)
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 5d3d8f7..d2df235 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -10,7 +10,7 @@ body {
background: black;
}
-p, a, li {
+p, a, li, label {
font-family: Arial, sans-serif;
color: #FFF;
}
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index e6f3bdc..5af01e4 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -4,8 +4,21 @@
<div class="content-wrapper">
<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">
- <a class="button button-1" href="/">
+ <a class="button button-1" href="/" id="submit">
LOGIN
</a>
@@ -59,6 +72,39 @@ onMounted(() => {
flex-direction: column;
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 {
display: flex;
gap: 0.5rem;