diff --git a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
index 785e4b77e8a9434175581db63bebacc21ad8fe37..c56bb7582da0545d4d21f46a5c29f517c66f2a49 100644
--- a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
+++ b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
@@ -13,6 +13,7 @@ public class TownStorage {
List.of(
new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"),
new Towns("Risca",02,2,0,"/images/RiscaBanner.jpg"),
+ new Towns("Penarth",03,5,60,"/images/PenarthBanner.jpg"),
new Towns("Penarth",03,5,60,"/images/PenarthBanner.jpg")
diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
index 6e2a91e341594ae4f89a867da1bc89fb93d4c4f1..e2f5323b6ec91ff58e271e98946cad37f8e260d4 100644
--- a/src/main/resources/static/css/homePageStyle.css
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -37,6 +37,10 @@ body{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
}
+.riscaBannerTrail{
+ background-image: linear-gradient(to right, darkslategrey , darkgoldenrod );
+}
+
.caerphillyBanner{
grid-area:townBannerC;
background-image: url('/images/CaerphillyCastle.jpg');
@@ -60,6 +64,7 @@ body{
background-position: left 65%;
color: inherit;
text-decoration: none;
+
}
.penarthBanner {
diff --git a/src/main/resources/templates/towns/home/homePageTest.html b/src/main/resources/templates/towns/home/homePageTest.html
index f4976d116cdb17b440fdf4ca13391e745bc2f681..a9776fb718754602d4c78c1f6f99d32644939440 100644
--- a/src/main/resources/templates/towns/home/homePageTest.html
+++ b/src/main/resources/templates/towns/home/homePageTest.html
@@ -5,69 +5,204 @@
<title>Title</title>
<!-- <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">-->
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
-
+<style>
+
+ /*body{*/
+ /* background-color: rgb(41, 41, 41)*/
+ /*}*/
+ #homeTitle{
+ grid-area: pageTitle;}
+ /* color: whitesmoke;*/
+ /*}*/
+ .submitLand{
+ grid-area: submitButton;
+ }
+ .Banner , .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;
+ }
+ .BannerTrail ,.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;
+ }
+ /*.Banner th{*/
+ /* grid-area:townBanner;*/
+ /*}*/
+ .BannerTrail th{
+ grid-area:townBannerDetsR
+ }
+ .Banner {
+ grid-area:townBanner;
+ /*background-size: 10px 10px;*/
+ /*background-size: contain;*/
+ /*background-position: left 78%;*/
+ color: inherit;
+ text-decoration: none;
+ background-color: hotpink;
+ }
+
+
+ a{
+ background-size: contain;
+
+ }
+ /*.Banner {*/
+ /* grid-area:townBanner;*/
+ /* background-color: #bbbb00;*/
+ /* !*background-size: 10px 10px;*!*/
+ /* !*background-repeat: no-repeat;*!*/
+ /* !*background-position: left 78%;*!*/
+ /* !*color: inherit;*!*/
+ /* !*text-decoration: none;*!*/
+ /*}*/
+ .BannerTrail{
+ grid-area:townBannerDets;
+ }
+
+ #aboutUsFlavour{
+ grid-area: textFlavour;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ color: whitesmoke;
+ }
+ #trailCount{
+ flex:1;
+
+
+ /*align-items: center;*/
+ /*justify-content: center;*/
+
+ }
+ #trailProgress{
+ flex:2;
+ align-content: center;
+
+ }
+
+
+ .gridContainer1 {
+ display:grid;
+ grid-template-columns: 10% 10% 60% 5% 5% 10%;
+ grid-template-rows: auto;
+ grid-template-areas:
+ ". pageTitle pageTitle pageTitle pageTitle ."
+ ". . . submitButton submitButton .";
+ }
+
+ .gridContainer2 {
+ display:grid;
+ grid-template-columns: 10% 10% 60% 5% 5% 10%;
+ grid-template-rows: auto;
+ grid-template-areas:
+
+ ". townBanner townBanner townBannerDets . .";
+ }
+
+
+
+
+</style>
</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>
-
- <div th:text="${towns}">
-
-
-
-
-
-
-
-
+ <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
+ <a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
+<!-- <div th:text="${towns}">-->
</div>
- <ul th:each="town:${towns}">
-
- <a href="/allTrails" class="caerphillyBanner">
- <H2 th:text="${town.getName()}"> </H2></a>
+ <div th:each="town:${towns}" class="gridContainer2">
+ <a href="/allTrails" class="Banner"
+ th:style="'background:url('+ ${town.getImageTown()} +');'"
+ th:styleappend="'background-size: 850px 200px;'+'background-repeat: no-repeat;'+'background-position: left 78%;'"
- <div class="caerphillyBannerTrail">
- <div id="trailCountCaer" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
- <div id="trailProgressCaer" th:text="${town.getTrailProgress()}"></div>
- </div>
- <!-- //goes through each student in list of students^^-->
-
- <li th:text="${town.getName()}"></li>
+ >
- </ul>
+ <H2 th:text="${town.getName()}"> </H2></a>
+ <div class="BannerTrail"
+ th:style=" ${town.getTrailProgress()==0 ? 'background-image:darkslategrey' : 'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey '}
- <a href="/allTrails" class="caerphillyBanner">
- <H2> Caerphilly</H2></a>
+<!-- 'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey );'-->
+">
+ <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
+ <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>
+ </div>
+<!-- <div class="BannerTrail"-->
+<!-- th:style="'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey );'">-->
+<!-- <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>-->
+<!-- <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>-->
+<!-- </div>-->
- <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>