diff --git a/build.gradle b/build.gradle
index 23c63713820b99e7cdc0d8d71af9859b937099a0..88324f038029c164be24e9981047807df3da43c9 100644
--- a/build.gradle
+++ b/build.gradle
@@ -24,12 +24,20 @@ repositories {
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
+<<<<<<< HEAD
implementation 'org.springframework.boot:spring-boot-starter-jdbc'
implementation 'org.mariadb.jdbc:mariadb-java-client:2.1.2'
compileOnly 'org.projectlombok:lombok'
+=======
+ testImplementation 'org.projectlombok:lombok:1.18.28'
+ compileOnly 'org.projectlombok:lombok'
+>>>>>>> main
developmentOnly 'org.springframework.boot:spring-boot-devtools'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
+ implementation 'org.springframework.boot:spring-boot-starter-validation'
+// implementation 'org.springframework.boot:spring-boot-starter-jdbc'
+// implementation 'org.mariadb.jdbc:mariadb-java-client:2.1.2'
}
tasks.named('bootBuildImage') {
diff --git a/src/main/java/Team5/SmartTowns/Landmarks/Landmarks.java b/src/main/java/Team5/SmartTowns/Landmarks/Landmarks.java
new file mode 100644
index 0000000000000000000000000000000000000000..94fec3e5f18cf082f58ca3dbca4223b1c50429b7
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/Landmarks/Landmarks.java
@@ -0,0 +1,44 @@
+package Team5.SmartTowns.Landmarks;
+
+import Team5.SmartTowns.trails.Trail;
+import jakarta.validation.constraints.Email;
+import jakarta.validation.constraints.Min;
+import jakarta.validation.constraints.NotEmpty;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.List;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class Landmarks {
+
+ // Intialised object to getID from trail.
+
+ //Predefined Landmark for Dragons Tale.
+ public static List<Landmarks> landmarksDragonstrail = List.of(
+ new Landmarks( 1, "A scent of...Dragon", "The Dragon has been spotted near by, find the QR code to continue" , "Start your discovery, at the sweet shop."),
+ new Landmarks( 2, "They've been found!", "Don't let them escape, find the next QR code to continue!", "location test")
+ );
+
+ private Integer trailID;
+ private int landmarkID;
+ @NotEmpty(message = "You must type in a username.")
+ private String landmarkName;
+ @Email(message = "You must attach a contact address.")
+ private String landmarkEmail;
+ private String landmarkDescription;
+ private String landmarkLocation;
+ private String landmarkPicture;
+
+ // Constructor for List above.
+ public Landmarks( int landmarkID, String landmarkName, String landmarkDescription, String landmarkLocation) {
+ this.landmarkID = landmarkID;
+ this.landmarkName = landmarkName;
+ this.landmarkDescription = landmarkDescription;
+ this.landmarkLocation = landmarkLocation; }
+
+
+}
diff --git a/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java b/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java
new file mode 100644
index 0000000000000000000000000000000000000000..98c35594da947d261f6980b10a516a75b4583431
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java
@@ -0,0 +1,53 @@
+package Team5.SmartTowns.Landmarks;
+
+import jakarta.validation.Valid;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.validation.BindingResult;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.servlet.ModelAndView;
+//import jakarta.validation.Valid;
+
+@Controller
+public class LandmarksController {
+
+// Controllers for LandmarkFormTh.html landmark submission form
+ @GetMapping("/landmarkSubmission")
+ public ModelAndView landmarkSubmission(){
+ ModelAndView modelAndView1 = new ModelAndView("Landmarks/LandmarkFormTh.html");
+ modelAndView1.addObject("landmarkData", new Landmarks());
+ return modelAndView1;
+
+ }
+
+
+ @PostMapping("/landmarkSub")
+ public ModelAndView landmarkSent(@Valid @ModelAttribute("landmarkData") Landmarks landmarks, BindingResult bindingResult, Model model ) {
+
+
+ if (bindingResult.hasErrors()) {
+ ModelAndView modelAndView = new ModelAndView("Landmarks/LandmarkFormTh.html", model.asMap());
+ return modelAndView;
+
+ } else{
+ System.out.println(landmarks);
+ // current functionality only prints successful Landmarks, (todo )database integration is necessary here
+
+
+ ModelAndView modelAndView = new ModelAndView("redirect:/test.html");
+ return modelAndView;
+
+ }
+
+
+
+
+
+
+
+ }
+
+
+}
diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
index 9b6e9d2d8cd46f5ac11b195c9db49cbe3cc9423e..5338f32f6dcbd262d1b9070169fcbaa211363a44 100644
--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
@@ -1,13 +1,14 @@
package Team5.SmartTowns.Webpages;
+import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
@Controller
public class WebpageController {
-
-
@GetMapping("/Caerleon")
public ModelAndView getCaerleonPage(){
ModelAndView modelAndView = new ModelAndView("towns/caerleon");
@@ -26,6 +27,17 @@ public class WebpageController {
return modelAndView;
}
+ @GetMapping("/home")
+ public ModelAndView getHome(){
+ ModelAndView modelAndView = new ModelAndView("towns/home/homePage");
+ return modelAndView;
+ }
+
+ @RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
+ public String sendHtmlFragment(Model map) {
+ //map.addAttribute("foo", "bar");
+ return "fragments/temp_frags.html :: trailInfo2";
+ }
diff --git a/src/main/java/Team5/SmartTowns/trails/Trail.java b/src/main/java/Team5/SmartTowns/trails/Trail.java
new file mode 100644
index 0000000000000000000000000000000000000000..efc9e125af8f94a79e29c21e1de4b1cdf3d5a503
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trails/Trail.java
@@ -0,0 +1,39 @@
+package Team5.SmartTowns.trails;
+
+import lombok.Data;
+
+import java.io.File;
+import java.util.List;
+
+@Data
+public class Trail {
+ public static List<Trail> trails = List.of(
+ new Trail(1,"Caerphilly Castle Trail", "Take a stroll through the grounds of one of Europe's finest historic buildings and you will see stunning views of the castle and the lakes. The route of the trail is marked with eight special circular markers, which depict various fascinating historical facts relating to the castle. Pupils from Ysgol Gynradd Gymraeg Caerffili, Plasyfelin Junior School, Ysgol Y Castell and Twyn Primary worked with the artist to come up with the different designs. You do not need to pay to go in the castle to complete this trail. This Trail is fairly short at 1.5 miles and very suitable for wheelchairs and pushchairs as the route stays mostly on well-marked and ramped paths with just a couple of short diversions onto grassed areas."),
+ new Trail(2,"Trail2", "This is trail two"),
+ new Trail(3,"Trail3", "This is trail three"),
+ new Trail(4,"Trail4", "This is trail four"),
+ new Trail(5,"A Dragon's Tale", "EDITING THIS")
+ );
+ int id;
+ String name;
+ String description;
+ int nLandmarks;
+ int difficulty; //1-5
+ String imgPath;
+
+ public Trail(int id, String name, String description) {
+ this.id = id;
+ this.name = name;
+ this.description = description;
+ imgPath = findImagePath();
+ }
+
+ private String findImagePath(){
+ /* Finds the image in the Path folder, if image is not found assigns default image */
+ String imgPath = "images/trails/trail" + id + ".jpg";
+ String notFoundPath = "images/trails/trailNotFound.jpg";
+
+ File imgFile = new File("src/main/resources/static/" + imgPath);
+ return imgFile.exists() ? imgPath : notFoundPath;
+ }
+}
diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
new file mode 100644
index 0000000000000000000000000000000000000000..0b9b8f6c7f241a88b31b38598378fe1ab1b6ab4c
--- /dev/null
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
@@ -0,0 +1,50 @@
+package Team5.SmartTowns.trails;
+
+
+import Team5.SmartTowns.Landmarks.Landmarks;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import static Team5.SmartTowns.Landmarks.Landmarks.landmarksDragonstrail;
+
+@Controller
+public class TrailsController {
+ @GetMapping("/allTrails")
+ public ModelAndView getAllTrails(){
+ ModelAndView mav = new ModelAndView("allTrails/allTrails");
+ mav.addObject("trails", Trail.trails); //Mock data for trails
+ return mav;
+ }
+ @RequestMapping(value="/id", method=RequestMethod.POST)
+ public String sendHtmlFragment(Model map) {
+ map.addAttribute("foo", "bar");
+ return "allTrails/allTrails";
+ }
+
+ @GetMapping("/allTrails/{id}")
+ public ModelAndView getResultBySearchKey(@PathVariable int id)
+ {
+ List<Trail> trailList= Trail.trails;//results from db
+ ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
+ mv.addObject("trail", trailList.get(id-1));
+ return mv;
+ }
+
+ @GetMapping("/dragonstale")
+ public ModelAndView getDragonsTale(){
+ List<Landmarks> landmarksList = landmarksDragonstrail;
+ ModelAndView modelAndView = new ModelAndView("towns/trails/dragonstale/index");
+ modelAndView.addObject("landmarksList", landmarksList);
+ return modelAndView;
+ }
+
+}
+
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
new file mode 100644
index 0000000000000000000000000000000000000000..ab706c5ba8ee5925faf8c774e1ec8711ffab4674
--- /dev/null
+++ b/src/main/resources/static/css/allTrails.css
@@ -0,0 +1,134 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ background-color: rgb(41, 41, 41);
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ min-height: 100svh;
+}
+main {
+}
+
+.centerFlex {
+ display: flex;
+ justify-content: center;
+}
+#allTrailsBar {
+ width: 100%;
+ height: auto;
+ /*margin: 1svh auto;*/
+ padding: 0 5svh;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+
+}
+.trailsImages {
+ margin: 1svh auto;
+ height: 12svh;
+ width: auto;
+ border-radius: 20px;
+ border: solid grey 2px;
+ transition: 0.5s ease-out 100ms;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
+}
+
+.trailsImages:hover {
+ box-shadow: 0 0 20px 10px #bbbb00;
+ transform: scale(1.2,1.2);
+}
+
+.selected {
+ box-shadow: 0 0 20px 10px #bbbb00;
+}
+@keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+main {
+ margin: 0;
+}
+
+#trailInfoContainer {
+
+ overflow: scroll;
+}
+
+.trailInfoFrag {
+ background-color: rgb(84, 33, 128);
+ border: #000000 solid 2px;
+ border-radius: 10px;
+ box-shadow: 0 5px 20px 0 #000000;
+ margin: 2svh auto;
+ padding-bottom: 2svw;
+ width: 70vw;
+ height: auto;
+ min-height: 30svh;
+ animation: fadeIn 3s;
+
+ display: grid;
+ grid-template-areas:
+ "header header header"
+ "image text text";
+ grid-template-columns: 30% 30% auto;
+ grid-template-rows: 10% auto;
+ grid-column-gap: 2vw;
+ grid-row-gap: 2svh;
+ & .trailInfoHeader {
+ grid-area: header;
+ width: 100%;
+ height: 100%;
+ margin-top: 1svh;
+ padding: 0;
+ & h1 {
+ color: white;
+ padding:0;
+ margin:0 25%;
+ font-size: 2vw;
+ text-align: center;
+ box-shadow: 0 10px 10px -10px black;
+ }
+
+ }
+
+ & img {
+ grid-area: image;
+ border-radius: 10px;
+ border: black solid 1px;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ width: 100%;
+ height: auto;
+ box-shadow: 0 10px 20px -10px black;
+ }
+ & p {
+ grid-area: text;
+ color: white;
+ margin: 0;
+ padding: 0 2vw;
+ font-size: 1.3vw;
+ text-align: justify;
+ text-justify: inter-character;
+ line-height: 1.5;
+ width: fit-content;
+ height: fit-content;
+ overflow: scroll;
+
+ }
+}
+
+#trailFragContent {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ min-height: 40svh;
+ flex-wrap: wrap;
+
+}
+
+header {
+ box-shadow: #1e1e1e 0 0 10px 10px;
+ font-size: 1vw;
+}
diff --git a/src/main/resources/static/css/dragonstaless.css b/src/main/resources/static/css/dragonstaless.css
new file mode 100644
index 0000000000000000000000000000000000000000..69503719953005705fd789f816766664caa2d3d2
--- /dev/null
+++ b/src/main/resources/static/css/dragonstaless.css
@@ -0,0 +1,17 @@
+.centre{
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+ background-color: #927BB7;
+}
+
+#homeimg.centre{
+ box-shadow: 100px -100px purple;
+}
+
+body{
+ background-color: #927BB7;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..6e2a91e341594ae4f89a867da1bc89fb93d4c4f1
--- /dev/null
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -0,0 +1,124 @@
+body{
+ background-color: rgb(41, 41, 41)
+}
+#homeTitle{
+ grid-area: pageTitle;
+ color: whitesmoke;
+}
+.submitLand{
+ grid-area: submitButton;
+}
+.caerphillyBanner , .riscaBanner,.penarthBanner{
+ margin-top: 20px;
+ background-color: darkslategrey;
+ margin-bottom: 20px;
+ border: solid 2px whitesmoke;
+ /*border colour here at .banner and .bannertrail*/
+ border-right: none;
+}
+.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
+ background-color: darkslategrey;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: solid 2px whitesmoke;
+ border-left: none;
+ text-align: center;
+}
+
+.penarthBannerTrail{
+ background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%);
+}
+
+.caerphillyBannerTrail{
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: solid 2px whitesmoke;
+ border-left: none;
+ background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
+}
+
+.caerphillyBanner{
+ grid-area:townBannerC;
+ background-image: url('/images/CaerphillyCastle.jpg');
+ /*// from cadw*/
+ background-size: 850px 200px;
+ background-repeat: no-repeat;
+ background-position: left 35%;
+ color: inherit;
+ text-decoration: none;
+ /*filter: grayscale(30%);*/
+}
+
+/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
+
+.riscaBanner {
+ /* #caerUrl{*/
+ grid-area: townBannerR;
+ background-image: url('/images/RiscaBanner.jpg');
+ background-size: 850px 200px;
+ background-repeat: no-repeat;
+ background-position: left 65%;
+ color: inherit;
+ text-decoration: none;
+}
+
+.penarthBanner {
+ grid-area: townBannerP;
+ background-image: url('/images/PenarthBanner.jpg');
+ background-size: 850px 200px;
+ background-repeat: no-repeat;
+ background-position: left 78%;
+ color: inherit;
+ text-decoration: none;
+}
+.caerphillyBannerTrail{
+ grid-area:townBannerDetsC;
+}
+.riscaBanner{
+ grid-area:townBannerR;
+}
+.riscaBannerTrail{
+ grid-area:townBannerDetsR;
+}
+.penarthBanner{
+ grid-area:townBannerP;
+}
+.penarthBannerTrail{
+ grid-area:townBannerDetsP;
+}
+#aboutUsFlavour{
+ grid-area: textFlavour;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ color: whitesmoke;
+}
+#trailCountCaer,#trailCountRisca,#trailCountPenarth{
+ flex:1;
+
+
+ /*align-items: center;*/
+ /*justify-content: center;*/
+
+}
+#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
+ flex:2;
+ align-content: center;
+
+}
+
+
+.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 ."
+ ". townBannerC townBannerC townBannerDetsC . ."
+ ". townBannerR townBannerR townBannerDetsR . ."
+ ". townBannerP townBannerP townBannerDetsP . ."
+ " . . textFlavour . . .";
+}
+
+
+
diff --git a/src/main/resources/static/css/landmarkFormStyle.css b/src/main/resources/static/css/landmarkFormStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..9d638b48ae03d406b9f97c85e21f14a00fb3188f
--- /dev/null
+++ b/src/main/resources/static/css/landmarkFormStyle.css
@@ -0,0 +1,21 @@
+/*LandmarkFormTh stylesheet*/
+body{
+ background: rgb(41, 41, 41);
+ color: wheat;
+}
+#landmarkSubmission {
+ background-color: rgb(206, 153, 253);
+ color: black;
+ border-color: white;
+ align-content: center;
+ text-align: center;
+ border-radius: 25px;
+ max-width: 620px;
+ margin: 0 auto
+}
+
+#landmarkFormTitle{
+ color:white;
+ text-align: center;
+
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..3d1973fac582203a1fbfa9cab0937ff213a45c51
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,209 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+#homeHead{
+ color: inherit;
+ text-decoration: none;
+ padding: 0;
+ margin: 0;}
+
+.center {
+ text-align: center;
+}
+body {
+ background-color: rgb(41, 41, 41);
+ margin: 0%;
+}
+.headerBlock {
+ background-color: rgb(15, 15, 15);
+ padding-bottom: 20px;
+ box-shadow: 0 10px 20px black;
+ .headerTitle {
+ text-align: center;
+ padding: 10px 10px 0 10px;
+ margin: 0 50px 0 50px;
+ letter-spacing: 10px;
+ font-size: 50px;
+ font-style: italic;
+ color: blueviolet;
+ text-shadow: black 3px 3px 5px;
+ border-bottom: 3px blueviolet solid;
+ }
+ .headerBanner {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ height: 200px;
+ border-top: grey solid 2px;
+ border-bottom: grey solid 2px;
+
+ .bannerBack {
+ opacity: 0.6;
+ width: 100%;
+ left: 0;
+ top: 0;
+ position: absolute
+ }
+ .bigTitle {
+ color:white;
+ text-align: center;
+ position: relative;
+ font-size: 50px;
+ margin: 20px 20px 5px;
+ }
+ .smallTitle {
+ position: relative;
+ color:white;
+ text-align: center;
+ font-size: 20px;
+ margin: 5px 20px 20px;
+ }
+ }
+}
+
+
+
+.mainTrails{
+ overflow: hidden;
+ position: relative;
+ height: 200px;
+ border-top: grey solid 2px;
+ border-bottom: grey solid 2px;
+}
+.trailList {
+ .ulHeader {
+ margin: 30px;
+ display: flex;
+ list-style: none;
+ justify-content: center;
+ padding: 0px;
+ border-bottom: solid black 5px;
+
+ .liHeader {
+
+ flex: 1 1 0px;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: white;
+ text-align: center;
+ }
+ .liHeader:hover {
+ color: blueviolet;
+ border-bottom: solid blueviolet 2px;
+ }
+ .selected {
+ flex: 1 1 0px;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: rgb(154, 69, 234);
+ border-bottom: solid blueviolet 2px;
+ text-align: center;
+ }
+ }
+
+}
+.mainBlock {
+ display: flex;
+ min-width: 300px;
+ flex-wrap: wrap;
+ margin-top: 20px;
+ margin-bottom: 100px;
+}
+.mainBlock .trailStats{
+ background-color: rgb(206, 153, 253);
+ flex: 0 0 0px;
+ min-width: 400px;
+ height: 600px;
+ margin: auto;
+ margin-bottom: 20px;
+ box-shadow: 0px 0px 20px rgb(20, 20, 20);
+ border-radius: 30px;
+ .stats {
+ display: block;
+ width: 200px;
+ margin: auto;
+ }
+ .textStats {
+ display: block;
+ text-align: left;
+ margin: 20px;
+ }
+}
+.mainBlock .trailInfo{
+ background-color: rgb(206, 153, 253);
+ flex: 0 0 0px;
+ min-width: 400px;
+ height: 600px;
+ margin: auto;
+ margin-bottom: 20px;
+ box-shadow: 0px 10px 10px rgb(20, 20, 20);
+ border-radius: 30px;
+ .trailInfoTxt {
+ margin: 15px;
+ }
+}
+.titleH1 {
+ padding: 0px;
+ margin: 10px 30px 20px 30px;
+ text-align: center;
+ font-size: 40px;
+ font-style: italic;
+ border-bottom: solid black 1px;
+}
+.mainBlock p {
+ font-size: 25px;
+ text-align: left;
+ padding: 1px;
+}
+main .badgesBlock{
+ bottom: 0%;
+ background-color: rgb(222, 75, 255);
+ flex: 0 0 0px;
+ min-width: 500px;
+ min-height: 100px;
+ margin: auto;
+ margin-bottom: 10px;
+ box-shadow: 0px 10px 10px rgb(20, 20, 20);
+ border-radius: 30px;
+}
+.badgesList {
+ display: flex;
+}
+.badgeImg {
+ flex: 0 1 0px;
+ width: 60px;
+ margin: auto;
+ margin-bottom: 20px;
+
+}
+
+footer {
+ bottom: 0%;
+ left: 0%;
+ position: fixed;
+ width: 100%;
+ min-width: 300px;
+}
+footer .footerBar {
+ display: flex;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+}
+footer .footerButton {
+ padding: 20px;
+ text-align: center;
+ flex: 1 1 0px;
+ color:crimson;
+ background-color: white;
+
+}
+footer .footerButton:hover {
+ background-color: black;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..1ffc84d486810f03102e4a7534aa5d088c97bab0
--- /dev/null
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -0,0 +1,109 @@
+/* Header */
+.headerBar {
+ border-bottom: 2px rgb(230, 230, 230) solid;
+ margin-bottom: 20px;
+ display: flex;
+ background-color: rgb(84, 33, 128);
+}
+/* Navbar Links */
+.navBar {
+ margin: 2svh 1vw 2svh auto;
+ text-align: right;
+}
+.work{
+ color: rgb(255, 255, 255);
+}
+.navBar ul {
+ list-style: none;
+ display: flex;
+ margin-left: 100px;
+}
+
+
+.navBar a {
+
+ /*border-left: 2px rgb(185, 185, 185) solid;*/
+ /*padding: 10px 40px;*/
+ padding-left:5px ;padding-right: 5px;
+ text-decoration: none;
+ /*color:rgb(87, 86, 86);*/
+/*// original color*/
+ color:white;
+ white-space: nowrap;
+ overflow: hidden;
+ float: right;
+}
+.navBar a:hover {
+ background-color: rgb(209, 209, 209);
+}
+.navBar li{
+ margin-left: 10px;
+ margin-right: 10px;
+ color: rgb(255, 255, 255);
+}
+.navListLast {
+ border-right: 2px rgb(185, 185, 185) solid;
+ margin-right:40px;
+}
+
+/* Navbar Logo */
+.Logo {
+ margin-left:10px;
+ padding: 20px;
+ width: fit-content;
+}
+.Logo img {
+ width: 120px;
+ margin-left:15px;
+}
+
+/* Footer */
+footer {
+ margin-top:auto;
+ display: flex;
+ justify-content: center;
+ background-color: rgb(84, 33, 128);
+ border-top: 2px rgb(230, 230, 230) solid;
+ font-size: 1vw;
+}
+.footerBar{
+
+ text-align: left;
+ display: flex;
+
+ color: rgb(255, 255, 255);
+ padding-left: 30px;
+}
+.footerBar ul {
+ list-style: none;
+ display: flex;
+}
+.copyright{
+ text-align: left;
+ display: flex;
+}
+.containerFooter{
+ display: flex;
+ flex-direction: row;
+}
+.leftFooter{
+ flex:1;
+ color: rgb(255, 255,255);
+}
+.centerFooter{
+ flex: 1;
+ color: rgb(255, 255,255);
+}
+.rightFooter{
+ flex:1;
+ color: rgb(255, 255, 255);
+}
+
+/*CHANGES*/
+
+.headerBar, .footerBar{
+ margin:0px;
+ padding: 0px;
+ width: 100%;
+}
+
diff --git a/src/main/resources/static/images/CaerphillyCastle.jpg b/src/main/resources/static/images/CaerphillyCastle.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ef4597465bf41491bc7173f473b94fd65bab6e19
Binary files /dev/null and b/src/main/resources/static/images/CaerphillyCastle.jpg differ
diff --git a/src/main/resources/static/images/Linkedin.png b/src/main/resources/static/images/Linkedin.png
new file mode 100644
index 0000000000000000000000000000000000000000..d24bc89a650a17bf68c4416211dcdc473c829467
Binary files /dev/null and b/src/main/resources/static/images/Linkedin.png differ
diff --git a/src/main/resources/static/images/PenarthBanner.jpg b/src/main/resources/static/images/PenarthBanner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..24c2b5226dc53a8782b5775d01d3a8a540c6db14
Binary files /dev/null and b/src/main/resources/static/images/PenarthBanner.jpg differ
diff --git a/src/main/resources/static/images/RiscaBanner.jpg b/src/main/resources/static/images/RiscaBanner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f3adaebe8598ed32a066c1d664626ddac9ee8b5a
Binary files /dev/null and b/src/main/resources/static/images/RiscaBanner.jpg differ
diff --git a/src/main/resources/static/images/Twitter.jpg b/src/main/resources/static/images/Twitter.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5a350e164922562dc8ba6dab403391daf2b9491a
Binary files /dev/null and b/src/main/resources/static/images/Twitter.jpg differ
diff --git a/src/main/resources/static/images/badges.png b/src/main/resources/static/images/badges.png
new file mode 100644
index 0000000000000000000000000000000000000000..57e379c719f5fe28ba827d7007be9637cfd9ff73
Binary files /dev/null and b/src/main/resources/static/images/badges.png differ
diff --git a/src/main/resources/static/images/stats.png b/src/main/resources/static/images/stats.png
new file mode 100644
index 0000000000000000000000000000000000000000..39904f1cfc911df01306fb85ab78b015e7d0386c
Binary files /dev/null and b/src/main/resources/static/images/stats.png differ
diff --git a/src/main/resources/static/images/trails.jpg b/src/main/resources/static/images/trails.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..20481a4f8a914ae8b272f490e2006dd0afaa5a2b
Binary files /dev/null and b/src/main/resources/static/images/trails.jpg differ
diff --git a/src/main/resources/static/images/trails/dragonone.png b/src/main/resources/static/images/trails/dragonone.png
new file mode 100644
index 0000000000000000000000000000000000000000..223398aab54b842b03c9c532f033b6765a5a10f0
Binary files /dev/null and b/src/main/resources/static/images/trails/dragonone.png differ
diff --git a/src/main/resources/static/images/trails/dragonstalehome.png b/src/main/resources/static/images/trails/dragonstalehome.png
new file mode 100644
index 0000000000000000000000000000000000000000..e41aab5599c40896d3ea97cb4292bd6ff7943284
Binary files /dev/null and b/src/main/resources/static/images/trails/dragonstalehome.png differ
diff --git a/src/main/resources/static/images/trails/trail1.jpg b/src/main/resources/static/images/trails/trail1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8b2411d1083639471dc6501d8a921d6ea4dbcd5c
Binary files /dev/null and b/src/main/resources/static/images/trails/trail1.jpg differ
diff --git a/src/main/resources/static/images/trails/trail2.jpg b/src/main/resources/static/images/trails/trail2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..683d275abb6772456d55082eb4940d0e606bf5f6
Binary files /dev/null and b/src/main/resources/static/images/trails/trail2.jpg differ
diff --git a/src/main/resources/static/images/trails/trail3.jpg b/src/main/resources/static/images/trails/trail3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f02b15249a3f0e2158023b8a98c8bf67fcc272c8
Binary files /dev/null and b/src/main/resources/static/images/trails/trail3.jpg differ
diff --git a/src/main/resources/static/images/trails/trail4.jpg b/src/main/resources/static/images/trails/trail4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c8c405e4f332a4f9b495c98ecbac7988b2b27cda
Binary files /dev/null and b/src/main/resources/static/images/trails/trail4.jpg differ
diff --git a/src/main/resources/static/images/trails/trailNotFound.jpg b/src/main/resources/static/images/trails/trailNotFound.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9fd46288f31cf61cbce2d58244e69b908cf727c1
Binary files /dev/null and b/src/main/resources/static/images/trails/trailNotFound.jpg differ
diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
new file mode 100644
index 0000000000000000000000000000000000000000..e62cd3bbedf582442bf20874e9f877949935db0d
--- /dev/null
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -0,0 +1,18 @@
+function updateOutputTrail(id) {
+ /* Updates the trail being shown on screen to the one requested by ID */
+ $.get("/allTrails/" + id).done(function (fragment) {
+ $(".trailInfoFrag").replaceWith(fragment);
+ });
+ updateSelectedTrail(id);
+}
+function updateSelectedTrail(id) {
+ /* Updates the trail bar, so that it highlights the selected trail */
+ let list = document.getElementsByClassName('trailsImages')
+ for (let i = 0; i < list.length; i++) {
+ if (list[i].classList.contains('selected')) {
+ list[i].classList.remove('selected')
+ break
+ }
+ }
+ document.getElementById("img" + id).classList.add("selected")
+}
\ No newline at end of file
diff --git a/src/main/resources/static/scripts/gabScripts.js b/src/main/resources/static/scripts/gabScripts.js
new file mode 100644
index 0000000000000000000000000000000000000000..3053fc2316552e2f8c588847aa67e1aaa44aed44
--- /dev/null
+++ b/src/main/resources/static/scripts/gabScripts.js
@@ -0,0 +1,16 @@
+function selectTrail(string, element) {
+ console.log('Clicked')
+ let listEl = document.getElementsByClassName('liHeader')
+ for (let i = 0; i < listEl.length; i++) {
+ listEl[i].classList.remove('selected')
+ }
+ document.getElementById(string).classList.add("selected")
+
+}
+
+function updateOutput() {
+ $.post("test_ajax_frag").done(function (fragment) {
+ console.log(fragment);
+ $("#trailInfoBox").replaceWith(fragment);
+ });
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/Landmarks/LandmarkFormTh.html b/src/main/resources/templates/Landmarks/LandmarkFormTh.html
new file mode 100644
index 0000000000000000000000000000000000000000..9690356f54031ce873453d68aa97a248ac89f687
--- /dev/null
+++ b/src/main/resources/templates/Landmarks/LandmarkFormTh.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Landmark Sign Up</title>
+ <link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}">
+ <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+
+
+</head>
+<body>
+<header th:insert="~{/towns/Templating.html :: header}"></header>
+<hr style="height:20px; visibility:hidden;" />
+<H2 id="landmarkFormTitle"> Interested in joining our trails? Sign up Here! </H2>
+<main>
+<!-- Form used to submit potential landmarks for trails-->
+ <form action="/landmarkSub" id="landmarkSubmission" name="landmarkSubmission" method="post" th:object="${landmarkData}" onsubmit="return landmarkFormValidation()">
+
+ <br>
+ <label>Business Name:
+ <input type="text" th:field="*{landmarkName}" placeholder="Business name here...">
+ </label><br>
+ <div th:errors="*{landmarkName}" th:if="${#fields.hasErrors('landmarkName')}">ErrorLandmarkName</div>
+ <br><label>Contact Address:
+ <input type="text" th:field="*{landmarkEmail}" placeholder="E-mail here...">
+ </label><br>
+ <div th:errors="*{landmarkEmail}" th:if="${#fields.hasErrors('landmarkEmail')}">ErrorEmail</div>
+ <br><label>Please Describe Your Business:<br>
+ <textarea th:field="*{landmarkDescription}" rows="18" cols="70" placeholder="Max 200 words please..."></textarea>
+ </label><br><br>
+ <label>Your Location:
+ <select th:field="*{landmarkLocation}">
+ <option value="" disabled selected>Select Location</option>
+ <option value="Caerphilly">Caerphilly</option>
+ <option value="Risca">Risca</option>
+ <option value="Penarth">Penarth</option>
+ </select>
+ </label><br><br>
+ <label>Trail:
+ <select th:field="*{trailID}">
+ <option value=0 disabled selected>Select Trail</option>
+ <option value=0101>(Caerphilly) Castle Trail</option>
+ <option value=0102>(Caerphilly) Pub Trail</option>
+ <option value=0103>(Caerphilly) Heritage Trail</option>
+ <option value=0201>(Risca) Heritage and Culture Trail</option>
+ <option value=0301>(Penarth) Esplanade Trail</option>
+ </select>
+
+ </label><br><br>
+
+
+ <input type="submit">
+ <hr style="height:0px; visibility:hidden;" />
+ </form>
+
+ <hr style="height:40px; visibility:hidden;" />
+</main>
+
+<script>
+
+
+
+
+// verification function of the above form
+ function landmarkFormValidation(){
+ var pass=true;
+ var trail = document.forms["landmarkSubmission"]["trailID"].value
+ var location = document.forms["landmarkSubmission"]["landmarkLocation"].value
+ var description = document.forms["landmarkSubmission"]["landmarkDescription"].value;
+ var descriptionWrdCount=description.split(" ").length
+ if (descriptionWrdCount>200){
+ alert('Please keep your description to a maximum of 200 words.');
+ pass = false;
+ }
+
+ if (trail==0){ // values of 0 and "" used to ensure default drop down option isn't submittable
+ alert('Invalid trail selected. \nPlease select the trail you wish to join.');
+ pass = false;
+ }
+
+ if (location==""){
+ alert('Invalid location selected. \nPlease select the location you wish to join.');
+
+ pass = false; // ensure correct trail is selected in accordance to the town it takes place in
+
+ } if ( (location=="Caerphilly" & (parseInt(trail/100)!==1)) ||
+ (location=="Risca" & (parseInt(trail/100)!==2)) ||
+ (location=="Penarth" & (parseInt(trail/100)!==3)) ){
+ alert('Trail unavailable in your current location. \nPlease choose an available trail');
+ pass = false;
+ }
+
+ return pass;
+ }
+
+
+</script>
+<footer th:insert="~{/towns/Templating.html :: footer}"></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
new file mode 100644
index 0000000000000000000000000000000000000000..746762b68f64b62190bf71e102edf0ff309772d9
--- /dev/null
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>All Trails</title>
+ <link rel="stylesheet" th:href="@{css/allTrails.css}">
+ <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+
+<header th:replace="~{/towns/Templating.html :: header}"></header>
+
+<main>
+ <section id="allTrailsBar" class="centerFlex">
+ <img class="trailsImages"
+ th:each="trail : ${trails}"
+ th:src="@{${trail.getImgPath()}}"
+ th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
+ th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
+ >
+ </section>
+
+ <section id="trailInfoContainer" class="trailInfoFrag">
+ <!--All this section is loaded from thymeleaf, based on what tail is selected
+ in the #allTrailsBar -->
+ <div class="trailInfoHeader">
+ <h1 class="centerFlex">Please select your trail</h1>
+ </div>
+ </section>
+
+</main>
+<footer th:insert="~{/towns/Templating.html :: footer}"></footer>
+
+
+<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/allTrailsFrags.html b/src/main/resources/templates/fragments/allTrailsFrags.html
new file mode 100644
index 0000000000000000000000000000000000000000..7f7f41dba9f99ce028118a4b4da502a6039d6f2d
--- /dev/null
+++ b/src/main/resources/templates/fragments/allTrailsFrags.html
@@ -0,0 +1,7 @@
+<article th:fragment="trailSection" class="trailInfoFrag">
+ <div class="trailInfoHeader">
+ <h1 th:text="${trail.getName()}"></h1>
+ </div>
+ <img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
+ <p id="trailDesc" th:text="${trail.getDescription()}"></p>
+</article>
diff --git a/src/main/resources/templates/fragments/landmarkFrag.html b/src/main/resources/templates/fragments/landmarkFrag.html
new file mode 100644
index 0000000000000000000000000000000000000000..67eaed5a79945996702aa451164c35c318f559d1
--- /dev/null
+++ b/src/main/resources/templates/fragments/landmarkFrag.html
@@ -0,0 +1,8 @@
+<!-- TODO Develop each individual landmark for DragonsTrail -->
+<!-- Each trail should have a preestablished set of landmarks -->
+
+<div th:fragment="landmarkList" class="centre" id="landmarkList">
+ <ul>
+ <li th:each="item : ${landmarksList}" th:text="${item}"></li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/landmarkInfoFrag.html b/src/main/resources/templates/fragments/landmarkInfoFrag.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef12db2ea01f1d2711213fba997dc8aa8634ad8e
--- /dev/null
+++ b/src/main/resources/templates/fragments/landmarkInfoFrag.html
@@ -0,0 +1,13 @@
+<!-- TODO Develop each individual landmark for DragonsTrail -->
+<!-- Each trail should have a preestablished set of landmarks -->
+
+<div th:fragment="landmarkInfoFrag" class="centre" id="landmarkList">
+ <ul>
+ <li th:replace=""> Landmark 1 </li>
+ <li> Landmark 2 </li>
+ <li> Larkmark 3 </li>
+ <li> Larkmark 4 </li>
+ <li> Larkmark 5 </li>
+ <li> Larkmark 6 </li>
+ </ul>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/temp_frags.html b/src/main/resources/templates/fragments/temp_frags.html
new file mode 100644
index 0000000000000000000000000000000000000000..03efad3ee73e973e0faf7401b7d3b0de2e1578e4
--- /dev/null
+++ b/src/main/resources/templates/fragments/temp_frags.html
@@ -0,0 +1,23 @@
+<header th:fragment="header" class="headerBlock">
+ <h1 class="headerTitle">SMART-TOWNS</h1>
+ <div class="headerBanner">
+ <img src="images/trails.jpg" alt="Trails" class="bannerBack">
+<!-- <div class="bannerText">-->
+ <h1 class="bigTitle">Smart Town Trails</h1>
+ <h2 class="smallTitle">Information about trails for your town</h2>
+<!-- </div>-->
+ </div>
+</header>
+<footer th:fragment="footer">
+ <ul class="footerBar">
+ <li class="footerButton">Home</li>
+ <li class="footerButton">About</li>
+ <li class="footerButton">Map</li>
+ <li class="footerButton">Facilities</li>
+ <li class="footerButton">Search</li>
+ </ul>
+</footer>
+
+<article class="trailInfo" th:fragment="trailInfo2">
+ <h1 class="titleH1" th:text="${trail.name}">Trail Info</h1>
+</article>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
new file mode 100644
index 0000000000000000000000000000000000000000..47b1dc1353c7c96bcb3409f54558ff18c4da6cf4
--- /dev/null
+++ b/src/main/resources/templates/home.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Website Web</title>
+ <link rel="stylesheet" th:href="@{css/style.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+
+<body>
+ <header th:replace="fragments/temp_frags.html :: header"></header>
+ <main>
+ <div class="trailList">
+ <ul class="ulHeader">
+ <li onclick="selectTrail('trail1', this)" class="liHeader" id="trail1" >Trail 1</li>
+ <li onclick="selectTrail('trail2', this)" class="liHeader selected" id="trail2" >Trail 2</li>
+ <li onclick="selectTrail('trail3', this)" class="liHeader" id="trail3" >Trail 3</li>
+ <li onclick="updateOutput()" class="liHeader" id="trail4" >Trail 4</li>
+ </ul>
+ </div>
+
+ <section class="mainBlock">
+ <article class="trailStats">
+ <h1 class="titleH1">Trail Stats</h1>
+ <img src="../static/images/stats.png" alt="Stats" class="stats">
+ <div class="textStats">
+ <p><b>Explored:</b> 60%</p>
+ <p><b>Landmarks Visited:</b> 3/5</p>
+ <p><b>Shops Visited:</b> 6/10</p>
+ </div>
+ </article>
+ <article id="trailInfoBox" class="trailInfo"></article>
+ <article class="badgesBlock">
+ <h1 class="titleH1">Badges</h1>
+ <div class="badgesList">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ </div>
+
+ </article>
+ </section>
+ </main>
+
+ <footer th:replace="fragments/temp_frags.html :: footer"></footer>
+ <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
+ <script type="text/javascript" th:src="@{scripts/gabScripts.js}"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html
new file mode 100644
index 0000000000000000000000000000000000000000..1313b325bb3027665a9242b8fcd6d9db707af4e7
--- /dev/null
+++ b/src/main/resources/templates/towns/Templating.html
@@ -0,0 +1,56 @@
+
+<link rel="stylesheet" href="../../static/css/templatingstyle.css">
+<header class="headerBar" th:fragment="header">
+ <div class="Logo">
+ <img src="/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
+ </div>
+ <nav class="navBar">
+ <ul>
+ <li><a id="homeHead" href="/home">Home</a></li>
+ <li>FAQs</li>
+ <li>Contact us</li>
+ </ul>
+ <label class="work">Who we Work with:</label>
+ <select>
+ <ul>
+ <option value="localauthorities">Local Authorities</option>
+ <option value="towns">Towns</option>
+ <option value="businesses">Businesses</option>
+ <option value="consumers">Consumers</option>
+ </ul>
+ </select>
+ </nav>
+</header>
+
+<div class="footerBar" th:fragment="footer">
+ <div class="containerFooter">
+ <div class="leftFooter">
+ <h3>VZTA</h3>
+ Near Me Now LTD
+ <br>Britania House
+ <br>Caerphilly Business Park
+ <br>Caerphilly
+ <br>CF83 3GG
+ </div>
+ <div class="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>
+ <div class="centerFooter">
+ <span class="footerText">
+ <h3>Follow Us</h3>
+ <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
+ <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="/images/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/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/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
+ </span>
+ </div>
+ <div class="copyright" style="text-align: left">
+
+ </div>
+ </div>
+</div>
+</div>
+<!-->>>>>>> main-->
diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html
index edf5af3527ab083f770fe10ee2f1d1d4744759b4..912da813737475d83dfc3af4c0ff4010189ec7f5 100644
--- a/src/main/resources/templates/towns/caerphilly.html
+++ b/src/main/resources/templates/towns/caerphilly.html
@@ -1,10 +1,221 @@
<!DOCTYPE html>
<html lang="en">
+<style>
+ body{
+ background-color: #36454F;
+ color: white;
+ }
+ .explore{
+
+ color: deeppink;
+
+
+ }
+ a:link{
+
+ color: red;
+
+
+ }
+
+ .explore:visited{
+ color:purple;
+ }
+
+ .explore:hover{
+ color:plum;
+ }
+
+ .fnd{
+ color: dodgerblue;
+
+ }
+ .shopping{
+ color: orangered;
+
+ }
+ .activities{
+ color: rebeccapurple;
+
+ }
+ .services{
+ color: darkseagreen;
+
+ }
+ .checklistFlexbox{
+ flex-direction: row;
+ display: inline-flex;
+ /*justify-content: space-between;*/
+ flex-wrap: wrap;
+ text-align: left;
+ border: 2px solid white;
+ grid-area: checklistFlexbox;
+
+
+ }
+ .landmarkList{
+ padding-right: 15px;
+
+ /*border: 2px solid black;*/
+
+
+
+
+ }
+
+ .landmarkProgress{
+ text-align: center;
+ font-size: larger; /*vw changes with browser size*/
+ color: yellow;
+ }
+
+
+
+ /*block types denote whether a user has unlocked the respective landmark*/
+
+ #block1{
+ width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px; width:18px;
+ }
+ #block2{
+ width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+ #block3{
+ width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+ #block4{
+ width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+ #block5{
+ width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+
+ .landmarkList, .checkList{
+ list-style-type: none;
+ }
+ .townName{
+ grid-area: title1;
+ }
+ .trailHeader{
+ grid-area: title2;
+ }
+ [BadgeStickerProgress]{
+ grid-area: BadgeStickerProgress;
+
+ }
+ .landmarkTitle{
+ grid-area:landmarkTitle;
+ }
+ .container{
+ display:grid;
+ grid-template-columns: 50% 50%;
+ grid-template-rows: auto;
+ grid-template-areas:
+
+ "title1 title1"
+ "title2 title2"
+ "BadgeStickerProgress ."
+ "landmarkTitle ."
+ "checklistFlexbox .";
+ }
+
+ .checkmark .uncollected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
+ visibility: hidden;
+ width: 120px;
+ background-color: red;
+ color: whitesmoke;
+ text-align: center;
+ padding: 5px 0;
+ border-radius: 6px;
+
+ /*top: -5px;*/
+ /*left: 105%;*/
+ top: 5px;
+ left: 105%
+
+
+
+
+ }
+ .checkmark:hover .uncollected{
+ visibility: visible;
+ }
+
+ .checkmark .collected{ /*taken from https://www.w3schools.com/css/css_tooltip.asp*/
+ visibility: hidden;
+ width: 120px;
+ background-color: green;
+ color: whitesmoke;
+ text-align: center;
+ padding: 5px 0;
+ border-radius: 6px;
+
+ top: 0px;
+ left: 105%;
+ /*background-color: whitesmoke;*/
+ /*color: green;*/
+
+
+
+ }
+ .checkmark:hover .collected{
+ visibility: visible;
+ }
+
+
+
+</style>
+
<head>
<meta charset="UTF-8">
<title>Caerphilly</title>
+ <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
-<h1> Welcome to the town of Caerphilly.</h1>
+<header th:insert="~{/towns/Templating.html::header}"></header>
+<main>
+ <div class="container">
+ <h1 class="townName"> Welcome to the town of Caerphilly.</h1>
+
+ <h2 class="trailHeader"> Welcome to the trail of trail-ness!</h2>
+ <section name="BadgeStickerProgress"> Sticker Pictures and stuff go here</section>
+ <h2 class="landmarkTitle">Caerphilly Landmark Progress:</h2>
+ <div class="checklistFlexbox">
+ <div><h2 style="padding-left: 3px">Badge Progress:</h2>
+ <div class="landmarkProgress"> <b class="landmarkProgress">2/5</b> </div>
+ <br>
+ <div class="landmarkProgress">
+ <b class="landmarkProgress" >3 to Go!!</b></div></p>
+ </div>
+ <li class="checkList">
+ <ul class="checkmark"><div id="block1"> </div> <span class="uncollected">Uncollected</span></ul>
+ <ul class="checkmark"><div id="block2"> </div><span class="uncollected">Uncollected</span></ul>
+ <ul class="checkmark"><div id="block3"> </div><span class="collected">Collected</span></ul>
+ <ul class="checkmark"><div id="block4"> </div><span class="uncollected">Uncollected</span></ul>
+ <ul class="checkmark"><div id="block5"> </div><span class="collected">Collected</span></ul>
+
+
+
+ </li>
+
+ <li name="landmarkList"class="landmarkList">
+ <ul><span class="shopping">Landmark 1 </span>
+ <span ><a href="../test.html" class="explore">- Explore!</a></span></ul>
+ <hr style="height:0px; visibility:hidden;" />
+ <ul><span class="services">Landmark 2 </span>
+ <span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
+ <ul><span class="activities">Landmark 3 </span>
+ <span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
+ <ul><span class="shopping">Landmark 4 </span>
+ <span class="explore">- Explore!</span></ul> <hr style="height:0px; visibility:hidden;" />
+ <ul><span class="fnd">Landmark 5 </span>
+ <span class="explore">- Explore!</span></ul>
+ </li>
+ </div>
+
+
+ </div>
+</main>
+<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
+
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/home/homePage.html b/src/main/resources/templates/towns/home/homePage.html
new file mode 100644
index 0000000000000000000000000000000000000000..0f80da587b942b6f12ef7bce29913df3fa077838
--- /dev/null
+++ b/src/main/resources/templates/towns/home/homePage.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
+ <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+
+</head>
+<body>
+
+<header th:insert="~{/towns/Templating.html::header}"></header>
+<main>
+<div class="gridContainer1">
+ <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
+ <a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
+
+ <a href="/allTrails" class="caerphillyBanner">
+ <H2> Caerphilly</H2></a>
+
+
+ <div class="caerphillyBannerTrail">
+ <div id="trailCountCaer">Trails: 3</div>
+ <div id="trailProgressCaer">70%</div>
+ </div>
+
+ <a href="/allTrails" class="riscaBanner">
+ <H2> Risca</H2> </a>
+
+ <div class="riscaBannerTrail">
+ <div id="trailCountRisca">Trails: 2</div>
+ <div id="trailProgressRisca">0%</div>
+ </div>
+
+
+ <a href="/allTrails" class="penarthBanner">
+ <H2> Penarth</H2> </a>
+ <div class="penarthBannerTrail">
+ <div id="trailCountPenarth">Trails: 5</div>
+ <div id="trailProgressPenarth">60%</div>
+ </div>
+
+ <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:insert="~{/towns/Templating.html::footer}"></footer>
+
+</body>
+</html>
diff --git a/src/main/resources/templates/towns/penarth.html b/src/main/resources/templates/towns/penarth.html
new file mode 100644
index 0000000000000000000000000000000000000000..ced6542a25376e193857367d615407510e31e9b3
--- /dev/null
+++ b/src/main/resources/templates/towns/penarth.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Penarth</title>
+</head>
+<body>
+<div>
+ <h1> Welcome to the town of Penarth.</h1>
+</div>
+
+<div>
+ <h2>Explore trails around Penarth</h2>
+ <ul>
+ <li href="">Welsh History</li>
+ <li>Super</li>
+ </ul>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/dragonstale/index.html b/src/main/resources/templates/towns/trails/dragonstale/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..21ef46b042f44eaf03bdb47075245e8d9b6a895d
--- /dev/null
+++ b/src/main/resources/templates/towns/trails/dragonstale/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
+ <meta charset="UTF-8">
+ <title>A Dragon's Tale</title>
+ <link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
+ <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+</head>
+ <body>
+ <header th:insert="towns/Templating.html :: header"></header>
+
+ <div class="centre">
+ <h1> Welcome, to a dragon's tale! </h1>
+ <img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" id="homeimg">
+ <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of (thymeleaf element) to discover a prize! </h2>
+ </div>
+
+ <div class="centre">
+ <p>
+ Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
+ Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
+ </p>
+ </div>
+
+ <div class="centre">
+ <ul th:each="item : ${landmarksList}">
+ <p th:text="${item.landmarkName}"></p>
+ <p th:text="${item.landmarkDescription}"></p>
+ </ul>
+ </div>
+
+ <div class="centre">
+ <h3>Begin your hunt!</h3>
+ <button type="button" id="begin">Click here!</button>
+ </div>
+
+ <div th:insert="towns/Templating.html :: footer"></div>
+
+ <script>
+
+ document.getElementById("begin").addEventListener("click", function (){
+ window.location.href = ("/dragonstale/landmarkone");
+ })
+
+ </script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/towns/trails/dragonstale/script.js b/src/main/resources/templates/towns/trails/dragonstale/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/main/resources/templates/towns/caerleon.html b/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
similarity index 57%
rename from src/main/resources/templates/towns/caerleon.html
rename to src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
index 4b53c334843f4fe623944fd5f9c179a8f6c672ef..9a4ae9e885b177cdaa5d12ef77ae9f52ec72f071 100644
--- a/src/main/resources/templates/towns/caerleon.html
+++ b/src/main/resources/templates/towns/trails/welshhistory/welshhistory.html
@@ -2,10 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>Caerleon</title>
+ <title>The Roman Empire</title>
</head>
<body>
-<h1> Welcome to the town of Caerleon.</h1>
</body>
</html>
\ No newline at end of file