diff --git a/src/main/java/Team5/SmartTowns/Towns/TownController.java b/src/main/java/Team5/SmartTowns/Towns/TownController.java new file mode 100644 index 0000000000000000000000000000000000000000..aa15a341da7fe2ef346f5278ae1a55faaa3136fc --- /dev/null +++ b/src/main/java/Team5/SmartTowns/Towns/TownController.java @@ -0,0 +1,21 @@ +package Team5.SmartTowns.Towns; + +import org.springframework.stereotype.Controller; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.servlet.ModelAndView; + +import java.util.List; + +@Controller +public class TownController { + + @GetMapping("/home") + public ModelAndView getTownList(){ + ModelAndView modelAndView = new ModelAndView("Towns/home/homePage"); + TownStorage townsCurrent= new TownStorage().getInstance(); + List<Towns> towns = townsCurrent.getTownList(); + modelAndView.addObject("towns",towns); + return modelAndView; + + } +} diff --git a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java new file mode 100644 index 0000000000000000000000000000000000000000..d2d99ea992086630324fa131ad5bb410acd3c425 --- /dev/null +++ b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java @@ -0,0 +1,44 @@ +package Team5.SmartTowns.Towns; + +import java.util.ArrayList; +import java.util.List; + +public class TownStorage { + private List<Towns> townList; + private static TownStorage singleton; + + TownStorage() { + townList = new ArrayList<>(); + townList.addAll( + List.of( + new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"), + new Towns("Risca",02,2,34,"/images/RiscaBanner.jpg"), + new Towns("Penarth",03,5,0,"/images/PenarthBanner.jpg"), + new Towns("Penarth",03,5,50,"/images/PenarthBanner.jpg"), + new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"), + new Towns("Risca",02,2,90,"/images/RiscaBanner.jpg"), + new Towns("Penarth",03,5,100,"/images/PenarthBanner.jpg") + + + + ) + + ); + + } + public static TownStorage getInstance() { + if (singleton == null) { + singleton = new TownStorage(); + + } + return singleton; + } + + public List<Towns> getTownList() { + return townList; + } + + + + +} diff --git a/src/main/java/Team5/SmartTowns/Towns/Towns.java b/src/main/java/Team5/SmartTowns/Towns/Towns.java new file mode 100644 index 0000000000000000000000000000000000000000..a1b103f7abf6aa4379d877c645185f2c522a25ba --- /dev/null +++ b/src/main/java/Team5/SmartTowns/Towns/Towns.java @@ -0,0 +1,62 @@ +package Team5.SmartTowns.Towns; + +import lombok.Data; + +@Data +public class Towns { + private String name; + private Integer id; + private int trailNumber; + private int trailProgress; + + private String imageTown; + + + public String getName() { + return name; + } + + public void setName(String name) { + this.name = name; + } + + public Integer getId() { + return id; + } + + public void setId(Integer id) { + this.id = id; + } + + public int getTrailNumber() { + return trailNumber; + } + + public void setTrailNumber(int trailNumber) { + this.trailNumber = trailNumber; + } + + public int getTrailProgress() { + return trailProgress; + } + + public void setTrailProgress(int trailProgress) { + this.trailProgress = trailProgress; + } + + public String getImageTown() { + return imageTown; + } + + public void setImageTown(String imageTown) { + this.imageTown = imageTown; + } + + public Towns(String name, Integer id, int trailNumber, int trailProgress, String imageTown) { + this.name = name; + this.id = id; + this.trailNumber = trailNumber; + this.trailProgress = trailProgress; + this.imageTown = imageTown; + } +} diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java index 5338f32f6dcbd262d1b9070169fcbaa211363a44..37a30366e5335d1870c202d1a49b4a5d2bca474d 100644 --- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java +++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java @@ -11,27 +11,28 @@ import org.springframework.stereotype.Controller; public class WebpageController { @GetMapping("/Caerleon") public ModelAndView getCaerleonPage(){ - ModelAndView modelAndView = new ModelAndView("towns/caerleon"); + ModelAndView modelAndView = new ModelAndView("Towns/caerleon"); return modelAndView; } @GetMapping("/Caerphilly") public ModelAndView getCaerphillyPage(){ - ModelAndView modelAndView = new ModelAndView("towns/caerphilly"); + ModelAndView modelAndView = new ModelAndView("Towns/caerphilly"); return modelAndView; } @GetMapping("/Risca") public ModelAndView getRiscaPage(){ - ModelAndView modelAndView = new ModelAndView("towns/risca"); + ModelAndView modelAndView = new ModelAndView("Towns/risca"); return modelAndView; } - @GetMapping("/home") - public ModelAndView getHome(){ - ModelAndView modelAndView = new ModelAndView("towns/home/homePage"); - 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) { diff --git a/src/main/resources/data.sql b/src/main/resources/data.sql index c7b960defab205639d46c66fcad52df8ffb3fc18..13137e1537cdf71c3ea608325401c3e70c58cfa4 100644 --- a/src/main/resources/data.sql +++ b/src/main/resources/data.sql @@ -3,32 +3,32 @@ insert into users (userID, Name) value ('1', 'Hannah'); insert into users (userID, Name) value ('2', 'Nigel'); delete from trails; -insert into trails (trailID, Name) value ('1', 'Caerphilly Coffee Trail'); -insert into trails (trailID, Name) value ('2', 'Penarth Dragon Trail'); +insert into trails ( Name) value ( 'Caerphilly Coffee Trail'); +insert into trails ( Name) value ( 'Penarth Dragon Trail'); delete from locations; -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (1, 'St Cenydd','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (2, 'The Castle','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (3, 'Medieval Trades','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (4, 'The Queen''s War','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (5, 'The Green Lady','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (6, 'Armoury','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (7, 'Architecture','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (8, '21st Century Landmark','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'St Cenydd','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Castle','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Medieval Trades','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Queen''s War','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Green Lady','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Armoury','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Architecture','','Location description here','Caerphilly',0101); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( '21st Century Landmark','','Location description here','Caerphilly',0101); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (9, 'JD Wetherspoons-Malcolm Uphill','','Location description here','Caerphilly',0102); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (10, 'Caerphilly Cwtch','','Location description here','Caerphilly',0102); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (11, 'Caerphilly Conservative Club','','Location description here','Caerphilly',0102); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (12, 'The King''s Arms','','Location description here','Caerphilly',0102); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'JD Wetherspoons-Malcolm Uphill','','Location description here','Caerphilly',0102); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Cwtch','','Location description here','Caerphilly',0102); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Conservative Club','','Location description here','Caerphilly',0102); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The King''s Arms','','Location description here','Caerphilly',0102); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (13, 'Caerphilly Bus Station','','Location description here','Caerphilly',0103); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (14, 'The Medieval Courthouse','','Location description here','Caerphilly',0103); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (15 ,'Caerphilly Castle','','Location description here','Caerphilly',0103); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (16, 'Ty Vaughan House','','Location description here','Caerphilly',0103); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Bus Station','','Location description here','Caerphilly',0103); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Medieval Courthouse','','Location description here','Caerphilly',0103); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ('Caerphilly Castle','','Location description here','Caerphilly',0103); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Ty Vaughan House','','Location description here','Caerphilly',0103); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (17, 'Risca Colliery','','Location description here','Risca',0201); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (18, 'Black Vein Colliery Disaster','','Location description here','Risca',0201); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Risca Colliery','','Location description here','Risca',0201); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Black Vein Colliery Disaster','','Location description here','Risca',0201); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (19, 'The Esplanade','','Location description here','Penarth',0301); -insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (20, 'The Old Swimming Baths','','Location description here','Penarth',0301); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Esplanade','','Location description here','Penarth',0301); +insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Old Swimming Baths','','Location description here','Penarth',0301); diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css index 6e2a91e341594ae4f89a867da1bc89fb93d4c4f1..64f767d40b32ccef413ea7b749e11356ef045aa4 100644 --- a/src/main/resources/static/css/homePageStyle.css +++ b/src/main/resources/static/css/homePageStyle.css @@ -1,3 +1,4 @@ + body{ background-color: rgb(41, 41, 41) } @@ -8,117 +9,164 @@ body{ .submitLand{ grid-area: submitButton; } -.caerphillyBanner , .riscaBanner,.penarthBanner{ +.Banner { margin-top: 20px; background-color: darkslategrey; margin-bottom: 20px; - border: solid 2px whitesmoke; + /*border: solid 2px whitesmoke;*/ /*border colour here at .banner and .bannertrail*/ border-right: none; } -.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{ - background-color: darkslategrey; + +/* .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; - border-left: none; text-align: center; } -.penarthBannerTrail{ - background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%); +.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{ + grid-area:townBannerDetsR } -.caerphillyBannerTrail{ - margin-top: 20px; - margin-bottom: 20px; - border: solid 2px whitesmoke; - border-left: none; - background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%); +.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{ + grid-area:townBannerDets; } -.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%);*/ +.BannerTrail { + background-color: darkslategrey; + } -/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/ +.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; +} -.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; +.BannerTrail.nearComplete { + background-color: deepskyblue; + background-color: deepskyblue; + border: 2px solid deepskyblue; + border-left: solid 2px whitesmoke; } -.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; +.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; } -.caerphillyBannerTrail{ - grid-area:townBannerDetsC; + +/*Below selects banner that has the Complete class to change color*/ +.Banner:has(+.BannerTrail.Complete){ + border: 2px solid gold; + border-right: solid 2px whitesmoke; } -.riscaBanner{ - grid-area:townBannerR; + +.Banner:has(+.BannerTrail.closeComplete){ + border: 2px solid darkgoldenrod; + border-right: solid 2px whitesmoke; } -.riscaBannerTrail{ - grid-area:townBannerDetsR; + + +.Banner:has(+.BannerTrail.nearComplete){ + border: 2px solid deepskyblue; + border-right: solid 2px whitesmoke; } -.penarthBanner{ - grid-area:townBannerP; +.Banner:has(+.BannerTrail.farComplete){ + border: 2px solid green; + border-right: solid 2px whitesmoke; } -.penarthBannerTrail{ - grid-area:townBannerDetsP; +.Banner:has(+.BannerTrail.notComplete){ + border: 2px solid red; + border-right: solid 2px whitesmoke; } + + +.BannerTrail { + background-color: darkslategrey; + +} + + + + + + +.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; } -#trailCountCaer,#trailCountRisca,#trailCountPenarth{ +#trailCount{ flex:1; - /*align-items: center;*/ - /*justify-content: center;*/ + } -#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{ +#trailProgress{ flex:2; align-content: center; } -.gridContainer1{ +.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 . . ."; + ". . . submitButton submitButton ."; +} + +.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: + " . . textFlavour . . ."; +} diff --git a/src/main/resources/templates/Landmarks/LandmarkFormTh.html b/src/main/resources/templates/Landmarks/LandmarkFormTh.html index b54a9143e3a41726670ad9acdb98c82b1cef3aca..b77bb90ece04cc582bc5fa5ea369bd8ba45e864b 100644 --- a/src/main/resources/templates/Landmarks/LandmarkFormTh.html +++ b/src/main/resources/templates/Landmarks/LandmarkFormTh.html @@ -5,9 +5,7 @@ <title>Landmark Sign Up</title> <link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}"> <link rel="stylesheet" th:href="@{css/templatingstyle.css}"> -<!-- <link rel="script" th:href="@{scripts/landmarkFormThScript.js}">--> <script src="scripts/landmarkFormThScript.js"></script> -<!-- <style in="scripts/landmarkFormThScript.js"></style>--> </head> diff --git a/src/main/resources/templates/towns/home/homePage.html b/src/main/resources/templates/towns/home/homePage.html index 0f80da587b942b6f12ef7bce29913df3fa077838..2cdc1e854fba95f89dd2da702bbeb6d5011ed5d8 100644 --- a/src/main/resources/templates/towns/home/homePage.html +++ b/src/main/resources/templates/towns/home/homePage.html @@ -2,62 +2,58 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Title</title> + <title>VZTA - Smart Towns Trails</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 class="gridContainer1"> + <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1> + <a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a> +<!-- <div th:text="${towns}">--> </div> + <div th:each="town:${towns}" class="gridContainer2"> - <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> + <a href="/allTrails" class="Banner" + th:style="'background:url('+ ${town.getImageTown()} +');'" + th:styleappend="'background-size: 80vw 24vh;'+'background-repeat: no-repeat;'+'background-position: left 30%;'" /> -</div> + <H2 th:text="${town.getName()}"> </H2></a> + <div class="BannerTrail"th:classappend="|${town.getTrailProgress()==100 ? 'Complete' : ''} ${town.getTrailProgress()<100 and town.getTrailProgress()>=90 ? 'closeComplete' : ''''} ${town.getTrailProgress()<90 and town.getTrailProgress()>=70 ? 'nearComplete' : ''''} ${town.getTrailProgress()<70 and town.getTrailProgress()>=50 ? 'farComplete' : ''''} ${town.getTrailProgress()<50 ? 'notComplete' : ''''}|" + > +<!--Rough class append used to distinguish progress, using a class append based on progress can allow for further customisation to banners later on +rough % outline; +100 -gold +90-99 - darkgold +70-89 - blue +50-69-green +0-49-red--> + <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div> + <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div> + </div> + </div> +<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:insert="~{/towns/Templating.html::footer}"></footer> diff --git a/src/main/resources/templates/towns/home/homePageOld.html b/src/main/resources/templates/towns/home/homePageOld.html new file mode 100644 index 0000000000000000000000000000000000000000..bf35e662607a4b2a101aeef83f3a05a65fd50ad2 --- /dev/null +++ b/src/main/resources/templates/towns/home/homePageOld.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>