Skip to content
Snippets Groups Projects
Commit 0e161cd8 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Added login page and initial styling and controller

parent 2a6887f8
No related branches found
No related tags found
1 merge request!26Resolve "As a client I want gamification of the badges, so that users remain engaged."
Hide whitespace changes
Inline Side-by-side
src/main/java/Team5/SmartTowns/users/UserController.java
+ 7
− 0
View file @ 0e161cd8
...@@ -24,6 +24,13 @@ public class UserController { ...@@ -24,6 +24,13 @@ public class UserController {
@Autowired @Autowired
private StickersRepository stickersRepository; private StickersRepository stickersRepository;
@GetMapping("/login")
public ModelAndView getLoginPage() {
ModelAndView mav = new ModelAndView("rewards/login");
// List<User> users = userRepository.getAllUsers();
// mav.addObject("users", users);
return mav;
}
@GetMapping("/userList") @GetMapping("/userList")
public ModelAndView userList() { public ModelAndView userList() {
......
src/main/resources/static/css/userProfile.css
+ 91
− 4
View file @ 0e161cd8
/* AUTHOR: Gabriel Copat*/ /* AUTHOR: Gabriel Copat*/
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
/*COLOUR PALETTE*/
* {
--main-colour: #e47201;
--secondary-colour: #e47201;
--accent-colour: #e47201;
--accent-border: #b25901;
--accent-shadow: rgba(0, 0, 0, 0.7) 0 0.5em 1em -0.5em;
}
/*FONTS, TYPOGRAPHY & BACKGROUNDS*/ /*FONTS, TYPOGRAPHY & BACKGROUNDS*/
* { * {
...@@ -12,6 +25,10 @@ ...@@ -12,6 +25,10 @@
color: white; color: white;
text-justify: inter-word; text-justify: inter-word;
} }
& label {
color: white;
}
} }
@media only screen and (max-device-width: 500px) { @media only screen and (max-device-width: 500px) {
/*ADJUSTING FOR SMALLER SCREENS*/ /*ADJUSTING FOR SMALLER SCREENS*/
...@@ -22,7 +39,7 @@ ...@@ -22,7 +39,7 @@
} }
body { body {
background: linear-gradient(135deg, #9f74be, #3e126b); background: linear-gradient(135deg, #d295e9, #53166a);
height: 100svh; height: 100svh;
} }
main { main {
...@@ -36,8 +53,6 @@ main { ...@@ -36,8 +53,6 @@ main {
padding-inline: 1vw; padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em); box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
} }
.userInfo { .userInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -170,10 +185,12 @@ main { ...@@ -170,10 +185,12 @@ main {
} }
& h1 { & h1 {
font-size: 3em; font-size: 3em;
font-family: 'MedievalSharp', cursive;
letter-spacing: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw; box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px; border-bottom: #36454F solid 2px;
border-top: #36454F solid 2px; border-top: #36454F solid 2px;
margin-inline: 25%; margin-inline: 15%;
margin-bottom: 1%; margin-bottom: 1%;
} }
& .dragonContainer { & .dragonContainer {
...@@ -231,4 +248,74 @@ header .footerButton:hover { ...@@ -231,4 +248,74 @@ header .footerButton:hover {
.grayedOut { .grayedOut {
filter: grayscale(1); filter: grayscale(1);
}
.solidBg {
background: #1e1e1e;
display: flex;
}
.loginWrapper {
margin-inline: auto;
margin-block: 5svh;
display: flex;
text-align: center;
justify-content: left;
background: #c45cef;
padding: 2em;
width: auto;
height: auto;
border-radius: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
& h2 {
margin-left: 1vw;
margin-right: auto;
}
& form{
margin-block: auto;
font-size: 3em;
display: flex;
flex-direction: column;
}
& label {
position: relative;
margin-top: 1em;
/*width: fit-content;*/
font-size: 0.8em;
& b {
float: left;
}
& a {
position: absolute;
font-size: 0.4em;
right: 0.2em;
bottom: 0.2em;
height: fit-content;
}
}
& input {
font-size: 0.6em;
height: 1.5em;
width: 40vw;
border-radius: 0.2em;
padding-inline: 0.4em;
}
& button {
font-size: 1em;
height: 2em;
width: 4em;
box-shadow: var(--accent-shadow);
margin:auto;
margin-top: 1em;
background-color: var(--accent-colour);
border: 0.1em solid var(--accent-border);
border-radius: 1em;
color: white;
}
& button:hover{
background-color: var(--accent-border);
border: 0.1em solid var(--accent-colour);
}
} }
\ No newline at end of file
src/main/resources/templates/rewards/login.html 0 → 100644
+ 36
− 0
View file @ 0e161cd8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Log In</title>
<link rel="stylesheet" th:href="@{/css/userProfile.css}">
</head>
<body>
<header>
<ul class="footerBar">
<li class="footerButton"><b>Home</b></li>
<li class="footerButton"><b>About</b></li>
<li class="footerButton"><b>Map</b></li>
<li class="footerButton"><b>Facilities</b></li>
<li class="footerButton"><b>Log In</b></li>
</ul>
</header>
<main class="solidBg">
<div class="loginWrapper">
<form action="/login" method="post">
<h2>Log In</h2>
<label for="username"><b>Username</b><br></label>
<input type="text" name="username" id="username" placeholder="Enter Username">
<label for="password"><b>Password</b><a>Forgot Password</a><br></label>
<input type="password" id="password" name="password">
<button type="submit"><b>Log In</b></button>
</form>
</div>
</main>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment