Skip to content
Snippets Groups Projects
Commit d7e7fb8b authored by Sven Grinneby's avatar Sven Grinneby
Browse files

Some additions to the login/register-pages

parent 525fb2bd
No related branches found
No related tags found
4 merge requests!139The members of the project should be showing now in pgsa pages, but there are...,!134The members of the project should be showing now in pgsa pages, but there are...,!117UX updates and language change,!107Added autofill from database into text boxes, but now data is taken from wrong...
Hide whitespace changes
Inline Side-by-side
client/login/login.css
+ 6
− 5
View file @ d7e7fb8b
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
display: flex; display: flex;
height: 100vh; height: 100vh;
background: linear-gradient(to right, #845380, #303866); background-image: url(../images/backgroundLogin.png);
background-size:cover;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -15,7 +16,7 @@ body { ...@@ -15,7 +16,7 @@ body {
text-align: center; text-align: center;
padding: 40px; padding: 40px;
width: 400px; width: 400px;
background: linear-gradient(to right, #845380, #303866); background: linear-gradient(to right, #db89db,#a05b9a, #532e75);
} }
.login-header { .login-header {
...@@ -48,7 +49,7 @@ body { ...@@ -48,7 +49,7 @@ body {
padding: 8px 15px; padding: 8px 15px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: #303866; background-color: #663d8c;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
...@@ -59,7 +60,7 @@ body { ...@@ -59,7 +60,7 @@ body {
.login-button:hover, .login-button:hover,
.register-button:hover { .register-button:hover {
background-color: #6c3483; background-color: #7b3a94;
} }
.login-form { .login-form {
......
client/login/login.html
+ 7
− 7
View file @ d7e7fb8b
...@@ -106,18 +106,18 @@ ...@@ -106,18 +106,18 @@
<script src = "../dist/login.bundle.js" type = "module"> </script> <script src = "../dist/login.bundle.js" type = "module"> </script>
<div class="login-container"> <div class="login-container">
<div class="login-header"> <div class="login-header">
<img src="../images/logo.png" alt="Company Logo"> <img src="../images/companyLogo.png" alt="Company Logo">
<h2>Ideabank 2.0</h2> <h2>Idébanken 2.0</h2>
<p class="welcome-text">Welcome to the app</p> <p class="welcome-text">Välkommen till appen!</p>
</div> </div>
<div id = "login-form" class="login-form"> <div id = "login-form" class="login-form">
<label class="label-text">Email</label> <label class="label-text">Email</label>
<input id = "email" class="login-input" type="text" placeholder="" required><br> <input id = "email" class="login-input" type="text" placeholder="" required><br>
<label class="label-text">Password</label> <label class="label-text">Lösenord</label>
<input id = "password" class="login-input" type="password" placeholder="" required><br> <input id = "password" class="login-input" type="password" placeholder="" required><br>
<button id = "button-login" class="login-button" type="button">Login</button> <button id = "button-login" class="login-button" type="button">Logga in</button>
<p class="welcome-text">Don't have an account ?</p> <p class="welcome-text">Inget konto ?</p>
<button id ="button-register" class="register-button" type="button">Register</button> <button id ="button-register" class="register-button" type="button">Registrera dig</button>
</div> </div>
</div> </div>
</body> </body>
......
client/login/register.html
+ 12
− 11
View file @ d7e7fb8b
...@@ -6,9 +6,10 @@ ...@@ -6,9 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ideabank Register</title> <title>Ideabank Register</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
<style> <style>
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
display: flex; display: flex;
height: 100vh; height: 100vh;
...@@ -121,7 +122,7 @@ ...@@ -121,7 +122,7 @@
/* Style the checked state of the checkbox */ /* Style the checked state of the checkbox */
#managerCheck:checked+label[for="managerCheck"]::before { #managerCheck:checked+label[for="managerCheck"]::before {
font-family: 'Poppins'; font-family: 'Roboto';
margin-right: 5px; margin-right: 5px;
} }
</style> </style>
...@@ -134,28 +135,28 @@ ...@@ -134,28 +135,28 @@
<script src = "../dist/register.bundle.js" type = "module"> </script> <script src = "../dist/register.bundle.js" type = "module"> </script>
<div class="login-container"> <div class="login-container">
<div class="login-header"> <div class="login-header">
<img src="../images/logo.png" alt="Company Logo"> <img src="../images/companylogo.png" alt="Company Logo">
<h2>Ideabank</h2> <h2>Idébanken 2.0</h2>
<p class="welcome-text">Please register below!</p> <p class="welcome-text">Var god registrera dig nedan!</p>
</div> </div>
<div class="login-form"> <div class="login-form">
<label class="label-text" for="hsa-id">HSA ID</label> <label class="label-text" for="hsa-id">HSA ID</label>
<input id="hsa-id" class="login-input" type="text" placeholder="" required><br> <input id="hsa-id" class="login-input" type="text" placeholder="" required><br>
<label class="label-text" for="unit-id">Unit ID</label> <label class="label-text" for="unit-id">Enhets-ID</label>
<input id="unit-id" class="login-input" type="text" placeholder="" required><br> <input id="unit-id" class="login-input" type="text" placeholder="" required><br>
<label class="label-text" for="first-name">First Name</label> <label class="label-text" for="first-name">Förnamn</label>
<input id="first-name" class="login-input name-input" type="text" placeholder="" required> <input id="first-name" class="login-input name-input" type="text" placeholder="" required>
<label class="label-text" for="last-name">Last Name</label> <label class="label-text" for="last-name">Efternamn</label>
<input id="last-name" class="login-input name-input" type="text" placeholder="" required><br> <input id="last-name" class="login-input name-input" type="text" placeholder="" required><br>
<label class="label-text" for="email">Email</label> <label class="label-text" for="email">Email</label>
<input id="email" class="login-input" type="text" placeholder="" required><br> <input id="email" class="login-input" type="text" placeholder="" required><br>
<label class="label-text" for="password">Password</label> <label class="label-text" for="password">Lösenord</label>
<input id="password" class="login-input" type="password" placeholder="" required><br> <input id="password" class="login-input" type="password" placeholder="" required><br>
<div class="manager-check"> <div class="manager-check">
<input type="checkbox" id="managerCheck"> <input type="checkbox" id="managerCheck">
<label for="managerCheck">Manager?</label> <label for="managerCheck">Chef?</label>
</div> </div>
<button id="register-button" class="register-button" type="submit">Register</button> <button id="register-button" class="register-button" type="submit">Registrera dig</button>
</div> </div>
</div> </div>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment