Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • d1656298/client-project
  • d1634883/client-project
2 results
Show changes
Commits on Source (23)
Showing
with 333 additions and 122 deletions
...@@ -36,7 +36,7 @@ public class LandmarksController { ...@@ -36,7 +36,7 @@ public class LandmarksController {
// current functionality only prints successful Landmarks, (todo )database integration is necessary here // 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; return modelAndView;
} }
......
...@@ -29,7 +29,7 @@ public class WebpageController { ...@@ -29,7 +29,7 @@ public class WebpageController {
@GetMapping("/home") @GetMapping("/home")
public ModelAndView getHome(){ public ModelAndView getHome(){
ModelAndView modelAndView = new ModelAndView("home"); ModelAndView modelAndView = new ModelAndView("towns/home/homePage");
return modelAndView; return modelAndView;
} }
......
...@@ -12,7 +12,7 @@ public class Trail { ...@@ -12,7 +12,7 @@ public class Trail {
new Trail(2,"Trail2", "This is trail two"), new Trail(2,"Trail2", "This is trail two"),
new Trail(3,"Trail3", "This is trail three"), new Trail(3,"Trail3", "This is trail three"),
new Trail(4,"Trail4", "This is trail four"), new Trail(4,"Trail4", "This is trail four"),
new Trail(5,"Trail5", "EDITING THIS") new Trail(5,"Trail5", "This trail is an example of a trail that does not have an image")
); );
int id; int id;
String name; String name;
......
...@@ -4,37 +4,40 @@ ...@@ -4,37 +4,40 @@
body { body {
background-color: rgb(41, 41, 41); background-color: rgb(41, 41, 41);
margin: 0; margin: 0;
display: flex;
flex-direction: column;
min-height: 100svh;
} }
main { main {
} }
.centerFlex { .centerFlex {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#allTrailsBar { #allTrailsBar {
padding:0; width: 100%;
max-width: 80%; height: auto;
height: 11svh; /*margin: 1svh auto;*/
margin: 1svh auto; padding: 0 5svh;
display: flex; display: flex;
justify-content: space-between; flex-wrap: wrap;
/*border-bottom: solid grey 2px;*/ justify-content: space-evenly;
/*border-top: solid grey 4px;*/
} }
.trailsImages { .trailsImages {
margin: auto; margin: 1svh auto;
height: 10svh; height: 12svh;
width: 10svh; width: auto;
border-radius: 20px; border-radius: 20px;
border: solid grey 2px; border: solid grey 2px;
transition: 0.5s ease-out 100ms; transition: 0.5s ease-out 100ms;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
} }
.trailsImages:hover { .trailsImages:hover {
box-shadow: 0 0 20px 10px #bbbb00; box-shadow: 0 0 20px 10px #bbbb00;
transform: scale(1.2,1.2); transform: scale(1.2,1.2);
!important; overflow: visible;
} }
.selected { .selected {
...@@ -49,10 +52,8 @@ main { ...@@ -49,10 +52,8 @@ main {
} }
#trailInfoContainer { #trailInfoContainer {
margin: auto;
width: 95svw; overflow: scroll;
min-height: 40svh;
min-width: 30svw;
} }
.trailInfoFrag { .trailInfoFrag {
...@@ -60,62 +61,74 @@ main { ...@@ -60,62 +61,74 @@ main {
border: #000000 solid 2px; border: #000000 solid 2px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 5px 20px 0 #000000; box-shadow: 0 5px 20px 0 #000000;
margin:0; margin: 2svh auto;
padding:0; padding-bottom: 2svw;
width: 70vw;
height: auto;
min-height: 30svh;
animation: fadeIn 3s; animation: fadeIn 3s;
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 30svh;
& h1 { display: grid;
color: white; 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; grid-area: header;
margin: 10px 25%; width: 100%;
font-size: xx-large; height: 100%;
text-align: center; margin-top: 1svh;
border-bottom: #1e1e1e solid 2px; padding: 0;
} & h1 {
} color: white;
padding:0;
margin:0 25%;
font-size: 2vw;
text-align: center;
box-shadow: 0 10px 10px -10px black;
}
#trailFragContent { }
margin: 0;
padding: 0;
display: flex;
overflow: hidden;
min-height: 40svh;
max-height: 60svh;
& img { & img {
grid-area: image;
border-radius: 10px; border-radius: 10px;
border: black solid 1px; border: black solid 1px;
margin: 1%; margin-left: 2vw;
flex: 1 1; margin-right: 2vw;
width: 100%;
min-width: 20%; height: auto;
max-width: 40%; box-shadow: 0 10px 20px -10px black;
min-height: 20svh;
max-height: 90%;
overflow: hidden;
} }
& p { & p {
grid-area: text;
color: white; color: white;
flex: 1 1; margin: 0;
padding: 5%; padding: 0 2vw;
width: 60%; font-size: 1.3vw;
border-left: solid darkgrey 2px;
font-size: x-large;
text-align: justify; text-align: justify;
text-justify: inter-character; text-justify: inter-character;
line-height: 1.5; 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 { header {
box-shadow: #1e1e1e 0 0 10px 10px; box-shadow: #1e1e1e 0 0 10px 10px;
font-size: 1vw;
} }
footer {
position: relative;
bottom: 0;
}
\ No newline at end of file
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 . . .";
}
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#homeHead{
color: inherit;
text-decoration: none;
padding: 0;
margin: 0;}
.center { .center {
text-align: center; text-align: center;
} }
......
...@@ -3,13 +3,11 @@ ...@@ -3,13 +3,11 @@
border-bottom: 2px rgb(230, 230, 230) solid; border-bottom: 2px rgb(230, 230, 230) solid;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
background: blueviolet; background-color: rgb(84, 33, 128);
} }
/* Navbar Links */ /* Navbar Links */
.navBar { .navBar {
margin-top: 50px; margin: 2svh 1vw 2svh auto;
margin-left: auto;
margin-right:20px;
text-align: right; text-align: right;
} }
.work{ .work{
...@@ -20,11 +18,17 @@ ...@@ -20,11 +18,17 @@
display: flex; display: flex;
margin-left: 100px; margin-left: 100px;
} }
.navBar a { .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; text-decoration: none;
color:rgb(87, 86, 86); /*color:rgb(87, 86, 86);*/
/*// original color*/
color:white;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
float: right; float: right;
...@@ -55,15 +59,18 @@ ...@@ -55,15 +59,18 @@
/* Footer */ /* Footer */
footer { footer {
margin-top:20px; margin-top:auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: rgb(84, 33, 128);
border-top: 2px rgb(230, 230, 230) solid;
font-size: 1vw;
} }
.footerBar{ .footerBar{
border-top: 2px rgb(230, 230, 230) solid;
text-align: left; text-align: left;
display: flex; display: flex;
background: blueviolet;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
padding-left: 30px; padding-left: 30px;
} }
...@@ -90,4 +97,13 @@ footer { ...@@ -90,4 +97,13 @@ footer {
.rightFooter{ .rightFooter{
flex:1; flex:1;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }
\ No newline at end of file
/*CHANGES*/
.headerBar, .footerBar{
margin:0px;
padding: 0px;
width: 100%;
}
src/main/resources/static/images/CaerphillyCastle.jpg

351 KiB

src/main/resources/static/images/PenarthBanner.jpg

263 KiB

src/main/resources/static/images/RiscaBanner.jpg

110 KiB

src/main/resources/static/images/trails/trail2.jpg

68.1 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trail2.jpg

318 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trail2.jpg
src/main/resources/static/images/trails/trail2.jpg
src/main/resources/static/images/trails/trail2.jpg
src/main/resources/static/images/trails/trail2.jpg
  • 2-up
  • Swipe
  • Onion skin
src/main/resources/static/images/trails/trail3.jpg

415 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trail3.jpg

378 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trail3.jpg
src/main/resources/static/images/trails/trail3.jpg
src/main/resources/static/images/trails/trail3.jpg
src/main/resources/static/images/trails/trail3.jpg
  • 2-up
  • Swipe
  • Onion skin
src/main/resources/static/images/trails/trail4.jpg

102 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trail4.jpg

304 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trail4.jpg
src/main/resources/static/images/trails/trail4.jpg
src/main/resources/static/images/trails/trail4.jpg
src/main/resources/static/images/trails/trail4.jpg
  • 2-up
  • Swipe
  • Onion skin
src/main/resources/static/images/trails/trailNotFound.jpg

73.8 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trailNotFound.jpg

59.4 KiB | W: 0px | H: 0px

src/main/resources/static/images/trails/trailNotFound.jpg
src/main/resources/static/images/trails/trailNotFound.jpg
src/main/resources/static/images/trails/trailNotFound.jpg
src/main/resources/static/images/trails/trailNotFound.jpg
  • 2-up
  • Swipe
  • Onion skin
function updateOutputTrail(id) { function updateOutputTrail(id) {
/* Updates the trail being shown on screen to the one requested by ID */ /* Updates the trail being shown on screen to the one requested by ID */
$.get("/allTrails/" + id).done(function (fragment) { $.get("/allTrails/" + id).done(function (fragment) {
$("#trailInfoContainer").html(fragment) $(".trailInfoFrag").replaceWith(fragment);
}); });
updateSelectedTrail(id); updateSelectedTrail(id);
} }
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Trails</title> <title>All Trails</title>
<link rel="stylesheet" th:href="@{css/allTrails.css}"> <link rel="stylesheet" th:href="@{css/allTrails.css}">
<link rel="stylesheet" th:href="@{css/templatingstyle.css}"> <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
...@@ -21,9 +22,12 @@ ...@@ -21,9 +22,12 @@
> >
</section> </section>
<section id="trailInfoContainer"> <section id="trailInfoContainer" class="trailInfoFrag">
<h1 class="centerFlex">Please select your trail</h1> <!--All this section is loaded from thymeleaf, based on what tail is selected
<!--Loaded from thymeleaf--> in the #allTrailsBar -->
<div class="trailInfoHeader">
<h1 class="centerFlex">Please select your trail</h1>
</div>
</section> </section>
</main> </main>
......
<article th:fragment="trailSection" class="trailInfoFrag"> <article th:fragment="trailSection" class="trailInfoFrag">
<h1 th:text="${trail.getName()}"></h1> <div class="trailInfoHeader">
<h1 th:text="${trail.getName()}"></h1>
<div id="trailFragContent">
<img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
<p th:text="${trail.getDescription()}"></p>
</div> </div>
<img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
<p id="trailDesc" th:text="${trail.getDescription()}"></p>
<!--TODO add more to this fragment and then add styling to it-->
</article> </article>
<!--<<<<<<< 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"> <link rel="stylesheet" href="../../static/css/templatingstyle.css">
<header class="headerBar" th:fragment="header"> <header class="headerBar" th:fragment="header">
<div class="Logo">
<div class="Logo"> <img src="/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
<img src="../../static/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/> </div>
</div> <nav class="navBar">
<nav class="navBar">
<ul>
<li>Home</li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
<label class="work">Who we Work with:</label>
<select>
<ul> <ul>
<option value="localauthorities">Local Authorities</option> <li><a id="homeHead" href="/home">Home</a></li>
<option value="towns">Towns</option> <li>FAQs</li>
<option value="businesses">Businesses</option> <li>Contact us</li>
<option value="consumers">Consumers</option>
</ul> </ul>
</select> <label class="work">Who we Work with:</label>
</nav> <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> </header>
<div class="footerBar" th:fragment="footer"> <div class="footerBar" th:fragment="footer">
...@@ -59,10 +41,10 @@ ...@@ -59,10 +41,10 @@
<div class="centerFooter"> <div class="centerFooter">
<span class="footerText"> <span class="footerText">
<h3>Follow Us</h3> <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.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="../../static/images/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) 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="../../static/images/Instagram.jpg" height="25" width="25" alt="Instagram 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="../../static/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br> <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> </span>
</div> </div>
<div class="copyright" style="text-align: left"> <div class="copyright" style="text-align: left">
......
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<style> <style>
*{ body{
background-color: #36454F; background-color: #36454F;
color: white; color: white;
} }
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
} }
.landmarkTitle{ .landmarkTitle{
grid-area:landmarkTitle grid-area:landmarkTitle;
} }
.container{ .container{
display:grid; display:grid;
...@@ -168,8 +168,10 @@ ...@@ -168,8 +168,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Caerphilly</title> <title>Caerphilly</title>
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head> </head>
<body> <body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main> <main>
<div class="container"> <div class="container">
<h1 class="townName"> Welcome to the town of Caerphilly.</h1> <h1 class="townName"> Welcome to the town of Caerphilly.</h1>
...@@ -213,6 +215,7 @@ ...@@ -213,6 +215,7 @@
</div> </div>
</main> </main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body> </body>
</html> </html>
\ No newline at end of file
<!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>