homePageTest.html

<!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}">
<style>

  body{
    background-color: rgb(41, 41, 41)
  }
  #homeTitle{
    grid-area: pageTitle;
    color: whitesmoke;
  }
  .submitLand{
    grid-area: submitButton;
  }
  .Banner {
    margin-top: 20px;
    background-color: darkslategrey;
    margin-bottom: 20px;
    border: solid 2px whitesmoke;
    /*border colour here at .banner and .bannertrail*/
    border-right: none;
  }
  .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty {
    /*background-color: darkslategrey;*/
    margin-top: 20px;
    margin-bottom: 20px;
    border: solid 2px whitesmoke;
    /*border-left: none;*/
    text-align: center;
  }

  .BannerTrail th, .BannerTrail.overSixty th, .BannerTrail.underSixty{
    grid-area:townBannerDetsR
  }

  .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty{
      grid-area:townBannerDets;
  }
  .BannerTrail.overSixty {
      background-color: green;


  }
  .BannerTrail {
      background-color: darkslategrey;

  }

  .BannerTrail.underSixty {
      background-color: red;


  }


  .BannerTrail {
      background-color: darkslategrey;

  }

  .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;

  }


  #aboutUsFlavour{
    grid-area: textFlavour;
    margin-top: 25px;
    margin-bottom: 15px;
    color: whitesmoke;
  }
  #trailCount{
    flex:1;


  }
  #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 . .";
  }

  .gridContainer3 {
    display:grid;
    grid-template-columns: 10% 10% 60% 5% 5% 10%;
    grid-template-rows: auto;
    grid-template-areas:

            " . . textFlavour . . .";
  }
  .a .banner{
      background-color: #36454F;
  }

</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}">-->
    </div>

    <div th:each="town:${towns}" class="gridContainer2">

      <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%;'" />


        <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 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>


<div class="aa aa">asdasdasdf gsddfsfsadf</div>

</main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>

</body>
</html>