diff --git a/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java b/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java index 98c35594da947d261f6980b10a516a75b4583431..2de5783d1e96beeb3fa8043830fe04ac93a41f8e 100644 --- a/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java +++ b/src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java @@ -36,7 +36,7 @@ public class LandmarksController { // current functionality only prints successful Landmarks, (todo )database integration is necessary here - ModelAndView modelAndView = new ModelAndView("redirect:/test.html"); + ModelAndView modelAndView = new ModelAndView("redirect:/allTrails"); return modelAndView; } diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java index 612aa55309408aaf2b59e3e84d768617f71c108d..5338f32f6dcbd262d1b9070169fcbaa211363a44 100644 --- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java +++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java @@ -29,7 +29,7 @@ public class WebpageController { @GetMapping("/home") public ModelAndView getHome(){ - ModelAndView modelAndView = new ModelAndView("home"); + ModelAndView modelAndView = new ModelAndView("towns/home/homePage"); return modelAndView; } 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/style.css b/src/main/resources/static/css/style.css index c116f6554429b20e76bcc8fbe703a9bddeee9792..3d1973fac582203a1fbfa9cab0937ff213a45c51 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -3,6 +3,13 @@ padding: 0; margin: 0; } + +#homeHead{ + color: inherit; + text-decoration: none; + padding: 0; + margin: 0;} + .center { text-align: center; } diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css index 8661180143d4330efc6f86e02d3668c8c1520f24..7f975776b3acca318e9eee9d1e30d7bde4ea09d9 100644 --- a/src/main/resources/static/css/templatingstyle.css +++ b/src/main/resources/static/css/templatingstyle.css @@ -20,11 +20,17 @@ display: flex; margin-left: 100px; } + + .navBar a { - border-left: 2px rgb(185, 185, 185) solid; - padding: 10px 40px; + + /*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); + /*color:rgb(87, 86, 86);*/ +/*// original color*/ + color:white; white-space: nowrap; overflow: hidden; float: right; @@ -90,4 +96,13 @@ footer { .rightFooter{ flex:1; color: rgb(255, 255, 255); -} \ No newline at end of file +} + +/*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/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/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html index f7a4d184e91b2fb31759692f4d0771bfb781ac82..1313b325bb3027665a9242b8fcd6d9db707af4e7 100644 --- a/src/main/resources/templates/towns/Templating.html +++ b/src/main/resources/templates/towns/Templating.html @@ -1,43 +1,25 @@ -<!--<<<<<<< HEAD--> -<!--<header th:fragment="headerBlock">--> -<!-- <br>Header Block<br>--> -<!--</header>--> -<!--<footer th:fragment="footerBlock">--> -<!-- <br><b>VZTA</b><br>--> -<!-- <br>Near Me Now LTD<br>--> -<!-- <br>Britania House<br>--> -<!-- <br>Caerphilly Business Park<br>--> -<!-- <br>Caerphilly<br>--> -<!-- <br>CF83 3GG<br>--> -<!-- <br>(C) VZTA 2022<br>--> -<!-- <br><b>Follow Us</b><br>--> -<!-- <br>Facebook Twitter Instagram LinkedIn<br>--> -<!-- <br>Privacy Policy Terms and Conditions<br>--> -<!--</footer>--> -<!--=======--> <link rel="stylesheet" href="../../static/css/templatingstyle.css"> <header class="headerBar" th:fragment="header"> - -<div class="Logo"> - <img src="../../static/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/> -</div> -<nav class="navBar"> - <ul> - <li>Home</li> - <li>FAQs</li> - <li>Contact us</li> - </ul> - <label class="work">Who we Work with:</label> - <select> + <div class="Logo"> + <img src="/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/> + </div> + <nav class="navBar"> <ul> - <option value="localauthorities">Local Authorities</option> - <option value="towns">Towns</option> - <option value="businesses">Businesses</option> - <option value="consumers">Consumers</option> + <li><a id="homeHead" href="/home">Home</a></li> + <li>FAQs</li> + <li>Contact us</li> </ul> - </select> -</nav> + <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"> @@ -59,10 +41,10 @@ <div class="centerFooter"> <span class="footerText"> <h3>Follow Us</h3> - <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a> - <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="../../static/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="../../static/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="../../static/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br> + <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"> diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html index d8c697546429b69854bf5e6c8112223d11469d16..912da813737475d83dfc3af4c0ff4010189ec7f5 100644 --- a/src/main/resources/templates/towns/caerphilly.html +++ b/src/main/resources/templates/towns/caerphilly.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang="en"> <style> - *{ + body{ background-color: #36454F; color: white; } @@ -103,7 +103,7 @@ } .landmarkTitle{ - grid-area:landmarkTitle + grid-area:landmarkTitle; } .container{ display:grid; @@ -168,8 +168,10 @@ <head> <meta charset="UTF-8"> <title>Caerphilly</title> + <link rel="stylesheet" th:href="@{/css/templatingstyle.css}"> </head> <body> +<header th:insert="~{/towns/Templating.html::header}"></header> <main> <div class="container"> <h1 class="townName"> Welcome to the town of Caerphilly.</h1> @@ -213,6 +215,7 @@ </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/caerleon.html b/src/main/resources/templates/towns/penarth.html similarity index 63% rename from src/main/resources/templates/towns/caerleon.html rename to src/main/resources/templates/towns/penarth.html index ba3d749226587b1fbc60523f980b8ddc4c867c08..ced6542a25376e193857367d615407510e31e9b3 100644 --- a/src/main/resources/templates/towns/caerleon.html +++ b/src/main/resources/templates/towns/penarth.html @@ -2,15 +2,15 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Caerleon</title> + <title>Penarth</title> </head> <body> <div> - <h1> Welcome to the town of Caerleon.</h1> + <h1> Welcome to the town of Penarth.</h1> </div> <div> - <h2>Explore trails around Caerleon</h2> + <h2>Explore trails around Penarth</h2> <ul> <li href="">Welsh History</li> <li>Super</li>