Finalizing styling, user progress nbow effects banner and banner border colour scheme

src/main/java/Team5/SmartTowns/Towns/TownStorage.java

@@ -12,9 +12,13 @@ public class TownStorage {
         townList.addAll(
           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")
+                  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")
+
 
 
           )

src/main/resources/templates/towns/home/homePageTest.html

@@ -21,11 +21,11 @@
     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;
   }
-  .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty {
+  .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
     /*background-color: darkslategrey;*/
     margin-top: 20px;
     margin-bottom: 20px;
@@ -34,30 +34,79 @@
     text-align: center;
   }
 
-  .BannerTrail th, .BannerTrail.overSixty th, .BannerTrail.underSixty{
+  /* .BannerTrail.Complete .BannerTrail.closeComplete .BannerTrail.nearComplete .BannerTrail.farComplete .BannerTrail.notComplete */
+
+  .BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
     grid-area:townBannerDetsR
   }
 
-  .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty{
+  .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
       grid-area:townBannerDets;
   }
-  .BannerTrail.overSixty {
-      background-color: green;
 
-
-  }
   .BannerTrail {
       background-color: darkslategrey;
 
   }
 
-  .BannerTrail.underSixty {
+  .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;
+  }
+
+  .BannerTrail.nearComplete {
+      background-color: deepskyblue;
+      background-color: deepskyblue;
+      border: 2px solid deepskyblue;
+      border-left: solid 2px whitesmoke;
+  }
+
+  .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;
+  }
 
+  /*Below selects banner that has the Complete class to change color*/
+  .Banner:has(+.BannerTrail.Complete){
+      border: 2px solid gold;
+      border-right: solid 2px whitesmoke;
+  }
 
+  .Banner:has(+.BannerTrail.closeComplete){
+      border: 2px solid darkgoldenrod;
+      border-right: solid 2px whitesmoke;
   }
 
 
+  .Banner:has(+.BannerTrail.nearComplete){
+      border: 2px solid deepskyblue;
+      border-right: solid 2px whitesmoke;
+  }
+  .Banner:has(+.BannerTrail.farComplete){
+      border: 2px solid green;
+      border-right: solid 2px whitesmoke;
+  }
+  .Banner:has(+.BannerTrail.notComplete){
+      border: 2px solid red;
+      border-right: solid 2px whitesmoke;
+  }
+
 
   .BannerTrail {
       background-color: darkslategrey;
@@ -160,10 +209,16 @@
 
         <H2 th:text="${town.getName()}"> </H2></a>
 
-        <div class="BannerTrail"
-             th:classappend="(${town.getTrailProgress()>60}?'overSixty' :'underSixty')">
-<!--Rough class append used to distinguish progress, using a class append based on progress can allow for  further customisation to banners later on. this only works for
-a single % point though, todo research this further in the future-->
+        <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>