diff --git a/src/main/java/Team5/SmartTowns/users/UserController.java b/src/main/java/Team5/SmartTowns/users/UserController.java
index e4453bf07e5a26060d661bfa397f44726a9b89d6..a631e41b5c88ba7714e5f2dbc929a00b056cfc48 100644
--- a/src/main/java/Team5/SmartTowns/users/UserController.java
+++ b/src/main/java/Team5/SmartTowns/users/UserController.java
@@ -24,6 +24,13 @@ public class UserController {
@Autowired
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")
public ModelAndView userList() {
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index ae3282e5b69e2055d184c93cca4abb56e44fce7f..7047dc433cb12a093bb7bb9223203a38048b62df 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -1,4 +1,17 @@
/* 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*/
* {
@@ -12,6 +25,10 @@
color: white;
text-justify: inter-word;
}
+ & label {
+ color: white;
+ }
+
}
@media only screen and (max-device-width: 500px) {
/*ADJUSTING FOR SMALLER SCREENS*/
@@ -22,7 +39,7 @@
}
body {
- background: linear-gradient(135deg, #9f74be, #3e126b);
+ background: linear-gradient(135deg, #d295e9, #53166a);
height: 100svh;
}
main {
@@ -36,8 +53,6 @@ main {
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
}
-
-
.userInfo {
display: flex;
flex-direction: column;
@@ -170,10 +185,12 @@ main {
}
& h1 {
font-size: 3em;
+ font-family: 'MedievalSharp', cursive;
+ letter-spacing: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px;
border-top: #36454F solid 2px;
- margin-inline: 25%;
+ margin-inline: 15%;
margin-bottom: 1%;
}
& .dragonContainer {
@@ -231,4 +248,74 @@ header .footerButton:hover {
.grayedOut {
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
diff --git a/src/main/resources/templates/rewards/login.html b/src/main/resources/templates/rewards/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed1791fd4073e8f8a29d140eb0ec21a1cc4a0293
--- /dev/null
+++ b/src/main/resources/templates/rewards/login.html
@@ -0,0 +1,36 @@
+<!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