diff --git a/src/main/java/Team5/SmartTowns/SmartTownsController.java b/src/main/java/Team5/SmartTowns/SmartTownsController.java
new file mode 100644
index 0000000000000000000000000000000000000000..8f21592b64931ea5a0eb04abe0de1c0ade0fb5f9
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/SmartTownsController.java
@@ -0,0 +1,16 @@
+package Team5.SmartTowns;
+
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+@Controller
+public class SmartTownsController {
+
+
+ @GetMapping("/")
+ public ModelAndView getHomePage(){
+ return new ModelAndView("welcome-page");
+ }
+}
diff --git a/src/main/java/Team5/SmartTowns/towns/TownController.java b/src/main/java/Team5/SmartTowns/towns/TownController.java
index 9063712be2de660379c504bb064254367dcaa3d8..acd352fec42a135cdf7a5dfe6ef6f0dc5f99ebd1 100644
--- a/src/main/java/Team5/SmartTowns/towns/TownController.java
+++ b/src/main/java/Team5/SmartTowns/towns/TownController.java
@@ -11,7 +11,16 @@ public class TownController {
@GetMapping("/home")
public ModelAndView getTownList(){
- ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
+ ModelAndView modelAndView = new ModelAndView("towns/home/homePage");
+ TownStorage townsCurrent= new TownStorage().getInstance();
+ List<Towns> towns = townsCurrent.getTownList();
+ modelAndView.addObject("towns",towns);
+ return modelAndView;
+
+ }
+ @GetMapping("/mobile-home")
+ public ModelAndView getTownListMobile(){
+ ModelAndView modelAndView = new ModelAndView("towns/home/mobile-homepage");
TownStorage townsCurrent= new TownStorage().getInstance();
List<Towns> towns = townsCurrent.getTownList();
modelAndView.addObject("towns",towns);
diff --git a/src/main/java/Team5/SmartTowns/towns/Towns.java b/src/main/java/Team5/SmartTowns/towns/Towns.java
index ebe6fd4797c205ace803727026e64837a2af93e6..677faf85a287ac8903edcbf9ff4395a234d9e44f 100644
--- a/src/main/java/Team5/SmartTowns/towns/Towns.java
+++ b/src/main/java/Team5/SmartTowns/towns/Towns.java
@@ -59,4 +59,23 @@ public class Towns {
this.trailProgress = trailProgress;
this.imageTown = imageTown;
}
+
+ public String setTrailProgressClass() {
+ /*SUGGESTION INSTEAD OF DOING THIS IS THE HTML*/
+ String progress;
+ if (trailProgress < 50) {
+ progress = "notComplete";
+ } else if (trailProgress < 70) {
+ progress = "farComplete";
+ } else if (trailProgress < 90) {
+ progress = "nearComplete";
+ } else if (trailProgress < 100) {
+ progress = "closeComplete";
+ } else {
+ progress = "Complete";
+ }
+ return progress;
+ }
+
+
}
diff --git a/src/main/resources/static/css/colours.css b/src/main/resources/static/css/colours.css
new file mode 100644
index 0000000000000000000000000000000000000000..fd5fc2bf78240e9a2b07b222cab37d118145e2a0
--- /dev/null
+++ b/src/main/resources/static/css/colours.css
@@ -0,0 +1,50 @@
+/* AUTHOR: Gabriel Copat
+ * Variable list for website palette, to be re-used throughout the site
+ *
+ * This makes it easy to change up the site's colours without having to go through
+ * each individual reference in the CSS
+*/
+
+/*FONTS*/
+@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap'); /*MedievalSharp*/
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); /*Montserrat*/
+
+:root {
+ /*Variable Colours for Dark Theme Users
+ *************DEFAULT VALUES************
+ */
+
+ --primary-colour: hsl(271, 100%, 20%);
+ --primary-dark: hsl(271, 100%, 15%);
+ --primary-darker: hsl(272, 100%, 10%);
+ --prim-shade-1:#632e93;
+ --prim-shade-2:#9159c2;
+ --prim-shade-3:#c285f3;
+
+ --secondary-colour: #f2724a;
+ --accent-colour: #cc2f58;
+ --accent-secondary: #8f0065;
+
+ /*DEFAULT TEXT COLOUR*/
+ color: white;
+ font-family: 'Montserrat', sans-serif;
+
+
+ /*Variable Colours for Light Theme Users*/
+ /*UN-IMPLEMENTED AS OF YET*/
+ @media (prefers-color-scheme: light) {
+ /*--primary-darker: hsl(272, 100%, 10%);*/
+ /*--primary-dark: hsl(271, 100%, 20%);*/
+ /*--primary-colour: hsl(271, 100%, 30%);*/
+ /*--primary-light: hsl(271, 100%, 40%);*/
+ /*--primary-lighter: hsl(271, 100%, 50%);*/
+
+ /*--secondary-colour: hsl(12, 81%, 46%);*/
+ /*--accent-colour: hsl(12, 82%, 32%);*/
+ /*--accent-border: hsl(12, 81%, 25%);*/
+
+ /*--accent-shadow: rgba(0, 0, 0, 0.7) 0 0.5em 1em -0.5em;*/
+
+ /*color: white;*/
+ }
+}
diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
index 64f767d40b32ccef413ea7b749e11356ef045aa4..4d69af3c489fc11c8772ed8e68eda94d2d536b75 100644
--- a/src/main/resources/static/css/homePageStyle.css
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -1,172 +1,264 @@
+@media only screen
+and (min-device-width: 1000px) {
+ body {
+ background-color: rgb(41, 41, 41)
+ }
+
+ #homeTitle {
+ grid-area: pageTitle;
+ color: whitesmoke;
+ }
+
+ .submitLand {
+ grid-area: submitButton;
+ }
+
+ .Banner {
+ margin-top: 20px;
+ background-color: darkslategrey;
+ margin-bottom: 20px;
+ /*border: solid 2px whitesmoke;*/
+ /*border colour here at .banner and .bannertrail*/
+ border-right: none;
+ }
+
+ /* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
+ .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: solid 2px whitesmoke;
+ text-align: center;
+ }
+
+ .BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th {
+ grid-area: townBannerDetsR
+ }
+
+ .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
+ grid-area: townBannerDets;
+ }
+
+ .BannerTrail {
+ background-color: darkslategrey;
+
+ }
+
+ .BannerTrail.Complete {
+ background-color: gold;
+ border: 2px solid gold;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.closeComplete {
+ background-color: darkgoldenrod;
+ background-color: darkgoldenrod;
+ border: 2px solid darkgoldenrod;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.nearComplete {
+ background-color: deepskyblue;
+ background-color: deepskyblue;
+ border: 2px solid deepskyblue;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.farComplete {
+ background-color: green;
+ background-color: green;
+ border: 2px solid green;
+ border-left: solid 2px whitesmoke;
+ }
+
+ .BannerTrail.notComplete {
+ background-color: red;
+ background-color: red;
+ border: 2px solid red;
+ border-left: solid 2px whitesmoke;
+ }
+
+ /*Below selects banner that has the Complete class to change color*/
+ .Banner:has(+.BannerTrail.Complete) {
+ border: 2px solid gold;
+ border-right: solid 2px whitesmoke;
+ }
+
+ .Banner:has(+.BannerTrail.closeComplete) {
+ border: 2px solid darkgoldenrod;
+ border-right: solid 2px whitesmoke;
+ }
+
+
+ .Banner:has(+.BannerTrail.nearComplete) {
+ border: 2px solid deepskyblue;
+ border-right: solid 2px whitesmoke;
+ }
+
+ .Banner:has(+.BannerTrail.farComplete) {
+ border: 2px solid green;
+ border-right: solid 2px whitesmoke;
+ }
+
+ .Banner:has(+.BannerTrail.notComplete) {
+ border: 2px solid red;
+ border-right: solid 2px whitesmoke;
+ }
-body{
- background-color: rgb(41, 41, 41)
-}
-#homeTitle{
- grid-area: pageTitle;
- color: whitesmoke;
-}
-.submitLand{
- grid-area: submitButton;
-}
-.Banner {
- margin-top: 20px;
- background-color: darkslategrey;
- margin-bottom: 20px;
- /*border: solid 2px whitesmoke;*/
- /*border colour here at .banner and .bannertrail*/
- border-right: none;
-}
-
-/* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
-.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
- margin-top: 20px;
- margin-bottom: 20px;
- border: solid 2px whitesmoke;
- text-align: center;
-}
-
-.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
- grid-area:townBannerDetsR
-}
-
-.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
- grid-area:townBannerDets;
-}
-
-.BannerTrail {
- background-color: darkslategrey;
-
-}
-
-.BannerTrail.Complete {
- background-color: gold;
- border: 2px solid gold;
- border-left: solid 2px whitesmoke;
-}
-.BannerTrail.closeComplete {
- background-color: darkgoldenrod;
- background-color: darkgoldenrod;
- border: 2px solid darkgoldenrod;
- border-left: solid 2px whitesmoke;
-}
-
-.BannerTrail.nearComplete {
- background-color: deepskyblue;
- background-color: deepskyblue;
- border: 2px solid deepskyblue;
- border-left: solid 2px whitesmoke;
-}
-
-.BannerTrail.farComplete {
- background-color: green;
- background-color: green;
- border: 2px solid green;
- border-left: solid 2px whitesmoke;
-}
-
-.BannerTrail.notComplete {
- background-color: red;
- background-color: red;
- border: 2px solid red;
- border-left: solid 2px whitesmoke;
-}
-
-/*Below selects banner that has the Complete class to change color*/
-.Banner:has(+.BannerTrail.Complete){
- border: 2px solid gold;
- border-right: solid 2px whitesmoke;
-}
-
-.Banner:has(+.BannerTrail.closeComplete){
- border: 2px solid darkgoldenrod;
- border-right: solid 2px whitesmoke;
-}
-
-
-.Banner:has(+.BannerTrail.nearComplete){
- border: 2px solid deepskyblue;
- border-right: solid 2px whitesmoke;
-}
-.Banner:has(+.BannerTrail.farComplete){
- border: 2px solid green;
- border-right: solid 2px whitesmoke;
-}
-.Banner:has(+.BannerTrail.notComplete){
- border: 2px solid red;
- border-right: solid 2px whitesmoke;
-}
-
-
-.BannerTrail {
- background-color: darkslategrey;
-
-}
-
+ .BannerTrail {
+ background-color: darkslategrey;
+
+ }
+
+
+ .Banner {
+ grid-area: townBanner;
+ color: inherit;
+ text-decoration: none;
+ background-color: hotpink;
+ }
+ a {
+ background-size: contain;
-
-.Banner {
- grid-area:townBanner;
- color: inherit;
- text-decoration: none;
- background-color: hotpink;
-}
-
-
-a{
- background-size: contain;
-
-}
+ }
+ #aboutUsFlavour {
+ grid-area: textFlavour;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ color: whitesmoke;
+ }
-#aboutUsFlavour{
- grid-area: textFlavour;
- margin-top: 25px;
- margin-bottom: 15px;
- color: whitesmoke;
-}
-#trailCount{
- flex:1;
-
+ #trailCount {
+ flex: 1;
+ }
-}
-#trailProgress{
- flex:2;
- align-content: center;
+ #trailProgress {
+ flex: 2;
+ align-content: center;
-}
+ }
-.gridContainer1 {
- display:grid;
- grid-template-columns: 10% 10% 60% 5% 5% 10%;
- grid-template-rows: auto;
- grid-template-areas:
+ .gridContainer1 {
+ display: grid;
+ grid-template-columns: 10% 10% 60% 5% 5% 10%;
+ grid-template-rows: auto;
+ grid-template-areas:
". pageTitle pageTitle pageTitle pageTitle ."
". . . submitButton submitButton .";
-}
+ }
-.gridContainer2 {
- display:grid;
- grid-template-columns: 10% 10% 60% 5% 5% 10%;
- grid-template-rows: auto;
- grid-template-areas:
+ .gridContainer2 {
+ display: grid;
+ grid-template-columns: 10% 10% 60% 5% 5% 10%;
+ grid-template-rows: auto;
+ grid-template-areas:
". townBanner townBanner townBannerDets . .";
-}
+ }
-.gridContainer3 {
- display:grid;
- grid-template-columns: 10% 10% 60% 5% 5% 10%;
- grid-template-rows: auto;
- grid-template-areas:
+ .gridContainer3 {
+ display: grid;
+ grid-template-columns: 10% 10% 60% 5% 5% 10%;
+ grid-template-rows: auto;
+ grid-template-areas:
" . . textFlavour . . .";
+ }
}
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 640px) {
+ .small-text {
+ font-size: 0.8em;
+ }
+
+
+ .towns-wrapper {
+ width: 100%;
+ }
+ .gridContainer2 {
+ height: 10svh;
+ position: relative;
+ display: flex;
+ justify-content: flex-start;
+ text-align: left;
+ flex: 1 1;
+ margin-block: 1svh;
+ }
+ .town-name {
+ position: absolute;
+ z-index: 5;
+ padding: 0.2em;
+ margin: 0.5em;
+ border-radius: 35%;
+ background: rgba(31, 31, 31, 0.6);
+
+ }
+ .img-container {
+ float: left;
+ z-index: 1;
+ height: 100%;
+ width: 60vw;
+ }
+ .town-img {
+ width: 100%;
+ height: 100%;
+ border-radius: 20% 0 0 20%;
+ border: #36454F solid;
+ border-width: 6px 3px 6px 6px;
+ }
+ .BannerTrail {
+ width: 25vw;
+ height: 10svh;
+ border-radius: 0 20% 20% 0;
+ border: #36454F solid;
+ border-width: 6px 6px 6px 3px;
+ position: relative;
+ overflow: hidden;
+ & h4 {
+ text-align: center;
+ }
+ }
+ .trail-info {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ width: 25vw;
+ height: 10svh;
+ }
+
+ /*Below selects banner that has the Complete class to change color*/
+ .BannerFill {
+ position: absolute;
+ background: var(--trail-colour, transparent);
+ width: 10%;
+ height: 10svh;
+ opacity: 0.9;
+ z-index: 0;
+ }
+ .Complete {
+ --trail-colour: gold;
+ }
+ .closeComplete {
+ --trail-colour: darkgoldenrod;
+ }
+ .nearComplete {
+ --trail-colour: deepskyblue;
+ }
+ .farComplete {
+ --trail-colour: green;
+ }
+ .notComplete {
+ --trail-colour: red;
+ }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
index 023566c253e9354e789e85744cd1e4989d523845..429650407d571c6b75283b6bb67db4962951cf84 100644
--- a/src/main/resources/static/css/login.css
+++ b/src/main/resources/static/css/login.css
@@ -1,8 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
+@import url(colours.css);
:root {
--container-colour: #2a2a2a;
- --details-colour: var(--primary-light);
+ --details-colour: var(--prim-shade-1);
--details-light: #512da8;
--font-buttons: 14px;
@@ -21,19 +21,6 @@
color: white;
}
-body{
- align-items: center;
- height: 100svh;
-}
-
-main {
- height: 90%;
- width: 90%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
@keyframes move{
0%, 49.99%{
opacity: 0;
@@ -48,9 +35,6 @@ main {
@media only screen
and (min-device-width: 650px) {
.container{
- background-color: var(--container-colour);
- border-radius: 30px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
min-width: 768px;
@@ -215,53 +199,64 @@ and (min-device-width: 650px) {
}
}
+
@media only screen
and (max-device-width: 640px) {
+ main {
+ padding: 0;
+ height: 70svh;
+ }
.container {
position: relative;
-
- background-color: var(--container-colour);
- border-radius: 30px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
-
overflow: hidden;
-
width: 100%;
height: 100%;
-
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
}
.form-container {
- height: 100%;
+ height: 50%;
transition: all 0.6s ease-in-out;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ }
+ .form-title {
+ padding-top: 3svh;
+ font-size: 3em;
}
.form-container form {
display: flex;
-
+ width: 100%;
+ height: 100%;
+ padding-block: 1svh;
flex-direction: column;
- align-items: center;
- font-size: 3em;
- margin-inline: 5%;
+ font-size: 1.5em;
+ & label {
+ width: 100%;
+ }
}
+ .form-container label {
+ margin-block: 0.5svh;
+ }
+
.form-container input {
- flex: 1 1;
+ width: 70%;
+ height: 90%;
+ padding: 0.5em;
font-size: 1em;
color: black;
- margin-block: 5%;
- padding: 2%;
border-radius: 30px;
+ border: #36454F 5px solid;
+ box-shadow: rgba(0, 0, 0, 0.25) 0 1svh 1svh;
+ /*margin-top: 1svh;*/
}
.form-container button {
- flex: 1 1;
+ width: 40%;
font-size: 1em;
+ margin: auto;
+ }
+ .recovery-text {
+ margin-top: 1svh;
+ font-size: 0.6em;
}
+
.toggle-container {
position: absolute;
top: 0;
@@ -269,16 +264,16 @@ and (max-device-width: 640px) {
height: 50%;
transition: all 0.6s ease-in-out;
overflow: hidden;
- border-radius: 0 0 150px 150px;
- z-index: 1000;
-
+ border-radius: 150px 150px 0 0;
+ transform: translateY(100%);
}
.container.active .toggle-container{
- transform: translateY(100%); /*BG THING*/
- border-radius: 150px 150px 0 0;
+ transform: translateY(0); /*BG THING*/
+
+ border-radius: 0 0 150px 150px;
}
.toggle {
- position: absolute;
+ position: relative;
width: 100%;
height: 200%;
display: flex;
@@ -289,46 +284,48 @@ and (max-device-width: 640px) {
/*background-color: red;*/
}
.toggle-panel {
- flex: 1 1;
+ height: 100%;
width: 100%;
+ position: absolute;
}
.container .toggle-right {
- transform: translateY(0);
opacity: 1;
+ z-index: 5;
+ transform: translateY(-25%);
}
.container .toggle-left {
transform: translateY(-100%);
opacity: 0;
}
.container.active .toggle-right{
- transform: translateY(-100%);
+ transform: translateY(50%);
opacity: 0;
}
.container.active .toggle-left{
- transform: translateY(-100%);
+ transform: translateY(-25%);
opacity: 1;
}
.container .sign-up {
opacity: 0;
z-index: -1;
- transform: translateY(100%);
+ transform: translateY(0%);
}
.container .sign-in {
+ transform: translateY(-100%);
opacity: 1;
z-index: 5;
}
.container.active .sign-in{
- transform: translateY(-100%);
+ transform: translateY(0);
opacity: 0;
z-index: -1;
}
.container.active .sign-up{
- animation: move 0.6s;
opacity: 1;
z-index: 5;
- transform: translateY(0);
+ transform: translateY(100%);
}
@@ -347,7 +344,7 @@ and (max-device-width: 640px) {
line-height: 1.5em;
}
.container button{
- background-color: var(--details-colour)/*#512da8*/;
+ background-color: var(--details-colour);
color: #fff;
font-size: xxx-large;
padding: 40px 40px;
diff --git a/src/main/resources/static/css/mobile-style.css b/src/main/resources/static/css/mobile-style.css
new file mode 100644
index 0000000000000000000000000000000000000000..cba00c1ca92b75e0785f80614f09710c14ce3704
--- /dev/null
+++ b/src/main/resources/static/css/mobile-style.css
@@ -0,0 +1,197 @@
+@import url(colours.css);
+
+/*PHONES - PORTRAIT*/
+@media only screen
+and (min-device-width: 320px)
+and (max-device-width: 640px) {
+ :root{
+ --font-headers: 20px;
+ --font-body: 20px;
+ }
+ *{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ body {
+ background: linear-gradient(to bottom right,
+ var(--primary-darker),
+ var(--primary-dark),
+ var(--primary-darker));
+
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+
+ width: 100vw;
+ min-height: 100svh;
+ font-size: 2em;
+ row-gap: 2svh;
+ }
+
+ header {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-inline: auto;
+ width: 95vw;
+ height: 6svh;
+ margin-top: 1svh;
+
+ .head-navbar {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ background-color: #1f1f1f;
+ border-radius: 20px;
+ box-shadow: rgba(0, 0, 0, 0.4) 0 1svh 1svh;
+ overflow: hidden;
+ }
+
+ .nav-ul {
+ list-style: none;
+ display: flex;
+ justify-content: space-evenly;
+ flex: 1 1;
+ }
+
+ .nav-li {
+ display: flex;
+ flex: 1 1;
+ }
+
+ .nav-links {
+ display: grid;
+ align-content: center;
+ flex: 1 1;
+ text-align: center;
+ transition: 0.3s ease-in-out 1ms;
+ font-weight: bolder;
+ text-decoration: none;
+ color: white;
+ }
+
+ .nav-links:hover {
+ background-color: #36454F;
+ }
+
+ .nav-logo-container {
+ display: flex;
+ width: 20vw;
+ height: 100%;
+ z-index: 5;
+ }
+
+ .nav-logo {
+ height: 100%;
+ width: 100%;
+ border-radius: 45% 15% 15% 45%;
+ border: #1f1f1f 5px solid;
+ box-shadow: rgba(0, 0, 0, 0.4) 0 1svh 1svh;
+ transition: 0.3s ease-in-out 1ms;
+ }
+
+ .nav-logo:hover {
+ filter: grayscale(0.7);
+ }
+
+ .li-middle {
+ border-style: solid;
+ border-width: 2px;
+ border-image: linear-gradient(to bottom, transparent 10%, #36454F, transparent 90%) 0 50;
+ }
+
+ .li-last {
+ border-style: solid;
+ border-width: 2px;
+ border-image: linear-gradient(to bottom, transparent 10%, #36454F, transparent 90%) 0 0 0 50;
+ }
+
+ .li-first {
+ border-style: solid;
+ border-width: 2px;
+ border-image: linear-gradient(to bottom, transparent 10%, #36454F, transparent 90%) 0 50 0 0;
+ }
+ }
+
+ main {
+ background-color: #1f1f1f;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: rgba(0, 0, 0, 0.4) 0 1svh 2svh;
+ padding: 3vw;
+ margin-inline: 5vw;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ min-height: 80svh;
+ height: max-content;
+ /*overflow-y: scroll;*/
+
+ }
+ .center-flex-columns {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ footer {
+ display: flex;
+ font-size: 0.5em;
+ justify-content: space-evenly;
+ margin-inline: 5%;
+ padding-top: 2%;
+ border-width: 5px;
+ border-style: solid;
+ border-image: linear-gradient(to left, transparent 5%, #36454F, transparent 95%) 50 0 0 0;
+
+
+ .footer-div {
+ width: 30%;
+ }
+
+ .centerFooter {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
+ .rightFooter {
+ text-align: right;
+ }
+
+ .icon {
+ border-radius: 50%;
+ width: 4vw;
+ height: auto;
+ aspect-ratio: 1;
+ }
+ }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*PHONES - LANDSCAPE*/
+/* TODO -> UNIMPLEMENTED LANDSCAPE STYLE FOR PHONES*/
+@media only screen
+and (min-device-width: 640px)
+and (max-device-width: 1000px) {
+
+
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/banners.html b/src/main/resources/templates/fragments/banners.html
new file mode 100644
index 0000000000000000000000000000000000000000..57bfda57bc38a010bb528cad9e2c1d3c0560a4d3
--- /dev/null
+++ b/src/main/resources/templates/fragments/banners.html
@@ -0,0 +1,43 @@
+<header th:fragment="header">
+ <a class="nav-logo-container"><img th:src="@{/images/icons/VZTA.png}" alt="Logo" class="nav-logo"></a>
+ <nav class="head-navbar">
+ <ul class="nav-ul">
+ <li class="nav-li li-first"><a href="/mobile-home" class="nav-links">Home</a></li>
+ <li class="nav-li li-middle"><a class="nav-links">Profile</a></li>
+ <li class="nav-li li-middle"><a class="nav-links">FAQ</a></li>
+ <li class="nav-li li-last" th:if="${#authentication.principal}==anonymousUser">
+ <a href="/login" class="nav-links">Log In</a>
+ </li>
+ <li class="nav-li li-last" th:if="${#authentication.principal}!=anonymousUser">
+ <a href="/logout" class="nav-links">Log Out</a>
+ </li>
+ </ul>
+ </nav>
+</header>
+
+<footer th:fragment="footer">
+ <!-- By Rhys Nute -->
+ <div class="footer-div leftFooter">
+ <h3>VZTA</h3>
+ Near Me Now LTD
+ <br>Britania House
+ <br>Caerphilly Business Park
+ <br>Caerphilly
+ <br>CF83 3GG
+ </div>
+ <div class="footer-div centerFooter">
+ <div class="footerText">
+ <h3>Follow Us</h3>
+ <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/icons/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
+ <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="/images/icons/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
+ <a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="/images/icons/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
+ <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="/images/icons/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
+ </div>
+ </div>
+ <div class="footer-div rightFooter">
+ <h3>Connect with us</h3>
+ <p>Be the first to know about updates by joining out Community page</p>
+ (C) VZTA 2022<br>
+ Policy Terms and Conditions
+ </div>
+</footer>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/home/mobile-homepage.html b/src/main/resources/templates/towns/home/mobile-homepage.html
new file mode 100644
index 0000000000000000000000000000000000000000..d413c4531829de4abc2f538ab89c0e5d2f050e35
--- /dev/null
+++ b/src/main/resources/templates/towns/home/mobile-homepage.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>VZTA - Smart Towns Trails</title>
+ <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+ <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
+</head>
+<body>
+<header th:replace="~{/fragments/banners::header}"></header>
+
+<main>
+ <div class="title-container">
+ <h1 class="title">Welcome to VZTA Smart Towns!</h1>
+ <a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
+ <p class="small-text">Choose your town and start tracking your trails!</p>
+ </div>
+
+ <article class="towns-wrapper">
+ <div th:each="town:${towns}" class="gridContainer2">
+ <h2 class="town-name" th:text="${town.getName()}"></h2>
+ <a href="/allTrails" class="img-container">
+ <img class="town-img" th:src="${town.getImageTown()}" th:alt="${town.getName()}">
+ </a>
+ <div class="BannerTrail">
+ <div class="BannerFill" th:style="'width: '+ ${town.getTrailProgress()} + '%;'" th:classappend="${town.setTrailProgressClass()}" ></div>
+ <div class="trail-info">
+ <h4 class="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}"></h4>
+ <h4 class="trailProgress" th:text="${town.getTrailProgress()}+'%'"></h4>
+ </div>
+ </div>
+ </div>
+ </article>
+
+
+ <div class="gridContainer3">
+
+
+ <div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
+ the trails and towns and resultant awards written in an excitable manner!!</div>
+
+ </div>
+
+</main>
+<footer th:replace="~{/fragments/banners::footer}"></footer>
+
+</body>
+</html>
diff --git a/src/main/resources/templates/users/login.html b/src/main/resources/templates/users/login.html
index 51c6222e2f98b73a01116a4123fb5050a7f43eeb..d134eff130f4fc3867f77f0cd33457e7d29a8992 100644
--- a/src/main/resources/templates/users/login.html
+++ b/src/main/resources/templates/users/login.html
@@ -3,23 +3,23 @@
<head>
<meta charset="UTF-8">
<title>User Log In</title>
- <link rel="stylesheet" th:href="@{/css/style.css}">
+ <link rel="stylesheet" th:href="@{/css/colours.css.css}">
+ <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
<link rel="stylesheet" th:href="@{/css/login.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
-<header>
-</header>
+<header th:replace="~{/fragments/banners::header}"></header>
<main>
<!--CODE MODIFIED FROM: https://github.com/AsmrProg-YT/Modern-Login -->
- <div class="container sign-in">
+
<div class="container" id="container">
<div class="form-container sign-up">
+ <h1 class="form-title">Create Account</h1>
<form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="return registerFormValidation()">
- <h1>Create Account</h1>
<label>
<input class="input" th:field="*{name}" id="register-username" type="text" placeholder="Name">
</label>
@@ -33,8 +33,8 @@
</form>
</div>
<div class="form-container sign-in">
+ <h1 class="form-title">Sign In</h1>
<form name="f" th:action="@{/login}" th:method="POST">
- <h1>Sign In</h1>
<div th:if="${param.error}" class="alert alert-error">Invalid Username or Password</div>
<div th:if="${param.logout}" class="alert alert-success">Successfully Logged out</div>
<label>
@@ -43,7 +43,7 @@
<label>
<input class="input" id="password" type="password" name="password" placeholder="Password">
</label>
- <a href="#" class="text">Forget Your Password?</a>
+ <a href="#" class="recovery-text">Forget Your Password?</a>
<button type="submit">Sign In</button>
</form>
</div>
@@ -62,10 +62,10 @@
</div>
</div>
</div>
- </div>
-</main>
+</main>
+<footer th:replace="~{/fragments/banners::footer}"></footer>
<script type="text/javascript" th:src="@{scripts/login.js}"></script>
diff --git a/src/main/resources/templates/welcome-page.html b/src/main/resources/templates/welcome-page.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed84a8bb9a708c8d6ed940d42dcdfa338ded18b0
--- /dev/null
+++ b/src/main/resources/templates/welcome-page.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <link rel="stylesheet" th:href="@{/css/colours.css}">
+ <link rel="stylesheet" th:href="@{/css/mobile-style.css}">
+</head>
+
+<body>
+ <header th:replace="~{/fragments/banners :: header}"></header>
+
+ <main>
+ <h1>Welcome to Smart Towns by VZTA!</h1>
+ <p>Click here to start exploring!</p>
+ <button type="submit">Explore!</button>
+ </main>
+
+ <footer th:replace="~{/fragments/banners :: footer}"></footer>
+</body>
+</html>
\ No newline at end of file