Compare revisions

f8c5598f · f8c5598f · f8c5598f · f8c5598f · f8c5598f · f8c5598f
--- a/src/main/resources/static/images/Twitter-Logо.png
+++ b/src/main/resources/static/images/Twitter-Logо.png
--- a/src/main/resources/static/images/rewards/badges/0.png
+++ b/src/main/resources/static/images/rewards/badges/0.png
--- a/src/main/resources/static/images/rewards/dragonFilled.png
+++ b/src/main/resources/static/images/rewards/dragonFilled.png
--- a/src/main/resources/static/images/rewards/dragonOutline.png
+++ b/src/main/resources/static/images/rewards/dragonOutline.png
--- a/src/main/resources/static/images/rewards/stickers/0.png
+++ b/src/main/resources/static/images/rewards/stickers/0.png
--- a/src/main/resources/static/images/users/0.png
+++ b/src/main/resources/static/images/users/0.png
--- a/src/main/resources/static/scripts/gabScripts.js
+++ b/src/main/resources/static/scripts/gabScripts.js
-function selectTrail(string, element) {
- console.log('Clicked')
- let listEl = document.getElementsByClassName('liHeader')
- for (let i = 0; i < listEl.length; i++) {
-  listEl[i].classList.remove('selected')
- }
- document.getElementById(string).classList.add("selected")
-
-}
-
-function updateOutput() {
- $.post("test_ajax_frag").done(function (fragment) {
-  console.log(fragment);
-  $("#trailInfoBox").replaceWith(fragment);
- });
-}
\ No newline at end of file
--- a/src/main/resources/static/scripts/landmarkFormThScript.js
+++ b/src/main/resources/static/scripts/landmarkFormThScript.js
+
+
+    // verification function of the above form
+    function landmarkFormValidation(){
+    var pass=true;
+    var trail = document.forms["landmarkSubmission"]["trailID"].value
+    var location = document.forms["landmarkSubmission"]["landmarkLocation"].value
+    var description = document.forms["landmarkSubmission"]["landmarkDescription"].value;
+    var descriptionWrdCount=description.split(" ").length
+    if (descriptionWrdCount>200){
+    alert('Please keep your description to a maximum of 200 words.');
+    pass = false;
+}
+
+    if (trail==0){ // values of 0 and "" used to ensure default drop down option isn't submittable
+    alert('Invalid trail selected. \nPlease select the trail you wish to join.');
+    pass = false;
+}
+
+    if (location==""){
+    alert('Invalid location selected. \nPlease select the location you wish to join.');
+
+    pass = false; // ensure correct trail is selected in accordance to the town it takes place in
+
+} if ( (location=="Caerphilly" & (parseInt(trail/100)!==1)) ||
+    (location=="Risca" & (parseInt(trail/100)!==2)) ||
+    (location=="Penarth" & (parseInt(trail/100)!==3)) ){
+    alert('Trail unavailable in your current location. \nPlease choose an available trail');
+    pass = false;
+}
+
+    return pass;
+}
+
+
--- a/src/main/resources/static/scripts/login.js
+++ b/src/main/resources/static/scripts/login.js
+let username = document.forms["loginForm"]["username"];
+let password = document.forms["loginForm"]["password"];
+let pattern = new RegExp("^[a-z0-9_-]{3,15}$");
+
+username.addEventListener("input", validateUsername)
+password.addEventListener("input", validatePassword)
+
+function validateUsername() {
+    if (!(username.value === "") && pattern.test(username.value)){
+        username.classList.remove("invalid-field");
+        username.classList.add("valid-field");
+        document.getElementById(username.name+"Invalid").style.opacity = 0;
+        username.style.borderColor = "green";
+        return true;
+    } else if( ! (username.classList.contains("invalid-field") ) ){
+        username.classList.add("invalid-field");
+        username.classList.remove("valid-field");
+        document.getElementById(username.name+"Invalid").style.opacity = 1;
+        username.style.borderColor = "red";
+    }
+    return false;
+}
+function validatePassword(){
+    if (password.value === "") {
+        password.classList.add("invalid-field");
+        password.classList.remove("valid-field");
+        document.getElementById(password.name+"Invalid").style.opacity = 1;
+        password.style.borderColor = "red";
+        return false;
+    } else if( ! (password.classList.contains("valid-field") ) ) {
+        password.classList.remove("invalid-field");
+        password.classList.add("valid-field");
+        document.getElementById(password.name+"Invalid").style.opacity = 0;
+        password.style.borderColor = "green";
+    }
+    return true;
+}
+
+function validateForm(){
+    if (validateUsername() & validatePassword()) { //Using just & so it checks both, even if the first is false (it applies the style)
+        console.log("VALID");
+        return false;
+    } else {
+        console.log("Invalid");
+        document.getElementById("invalidLogin").style.opacity = 1;
+        return false;
+    }
+    //TODO SERVER SIDE VALIDATION AND CHECK AGAINST USERS DB TABLE
+}
\ No newline at end of file
--- a/src/main/resources/static/scripts/qrCode.js
+++ b/src/main/resources/static/scripts/qrCode.js
--- a/src/main/resources/static/users.html
+++ b/src/main/resources/static/users.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
--- a/src/main/resources/templates/Landmarks/LandmarkFormTh.html
+++ b/src/main/resources/templates/Landmarks/LandmarkFormTh.html
@@ -5,6 +5,7 @@
    <title>Landmark Sign Up</title>
    <link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}">
    <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+    <script src="scripts/landmarkFormThScript.js"></script>


 </head>
@@ -30,7 +31,8 @@
        </label><br><br>
        <label>Your Location:
            <select th:field="*{landmarkLocation}">
-                <option value="" disabled selected>Select Location</option>
+                <option value="" hidden="true">Select Location</option>
+                <option value=""  selected disabled>Select Location</option>
                <option value="Caerphilly">Caerphilly</option>
                <option value="Risca">Risca</option>
                <option value="Penarth">Penarth</option>
@@ -38,6 +40,7 @@
        </label><br><br>
        <label>Trail:
            <select th:field="*{trailID}">
+                <option value=0 hidden="true">Select Trail</option>
                <option value=0 disabled selected>Select Trail</option>
                <option value=0101>(Caerphilly) Castle Trail</option>
                <option value=0102>(Caerphilly) Pub Trail</option>
@@ -56,45 +59,7 @@
    <hr style="height:40px; visibility:hidden;" />
 </main>

-<script>

-
-
-
-// verification function of the above form
-    function landmarkFormValidation(){
-        var pass=true;
-        var trail = document.forms["landmarkSubmission"]["trailID"].value
-        var location = document.forms["landmarkSubmission"]["landmarkLocation"].value
-        var description = document.forms["landmarkSubmission"]["landmarkDescription"].value;
-        var descriptionWrdCount=description.split(" ").length
-        if (descriptionWrdCount>200){
-            alert('Please keep your description to a maximum of 200 words.');
-            pass = false;
-        }
-
-        if (trail==0){ // values of 0 and "" used to ensure default drop down option isn't submittable
-            alert('Invalid trail selected. \nPlease select the trail you wish to join.');
-            pass = false;
-        }
-
-        if (location==""){
-            alert('Invalid location selected. \nPlease select the location you wish to join.');
-
-            pass = false; // ensure correct trail is selected in accordance to the town it takes place in
-
-        } if ( (location=="Caerphilly" & (parseInt(trail/100)!==1)) ||
-            (location=="Risca" & (parseInt(trail/100)!==2)) ||
-            (location=="Penarth" & (parseInt(trail/100)!==3)) ){
-            alert('Trail unavailable in your current location. \nPlease choose an available trail');
-            pass = false;
-        }
-
-        return pass;
-    }
-
-
-</script>
 <footer th:insert="~{/towns/Templating.html :: footer}"></footer>
 </body>
 </html>
\ No newline at end of file
--- a/src/main/resources/templates/rewards/login.html
+++ b/src/main/resources/templates/rewards/login.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>User Log In</title>
+    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+
+</head>
+<body>
+
+<header>
+    <ul class="footerBar">
+        <li class="footerButton"><b>Home</b></li>
+        <li class="footerButton"><b>About</b></li>
+        <li class="footerButton"><b>Map</b></li>
+        <li class="footerButton"><b>Facilities</b></li>
+        <li class="footerButton"><b>Log In</b></li>
+    </ul>
+</header>
+<main  class="solidBg">
+    <div class="loginWrapper">
+        <form action="" onsubmit="return validateForm()" method="post" name="loginForm">
+            <h2>Log In</h2>
+            <div class="label">
+                <label for="username"><b>Username</b><br></label>
+                <div id="usernameInvalid" class="invalid-tooltip">Please fill out this field.</div>
+            </div>
+            <input type="text" name="username" id="username" placeholder="Enter Username" title="Username Input">
+
+            <div class="label">
+                <label for="password"><b>Password</b><br></label>
+                <div id="passwordInvalid" class="invalid-tooltip">Please fill out this field.</div>
+            </div>
+            <input type="password" id="password" name="password">
+            <div id="invalidLogin">Username and/or Password incorrect. Please try again.</div>
+            <button type="submit"><b>Log In</b></button>
+        </form>
+
+    </div>
+
+</main>
+
+
+
+<script type="text/javascript" th:src="@{scripts/login.js}"></script>
+
+</body>
+</html>
\ No newline at end of file
--- a/src/main/resources/templates/rewards/userProfile.html
+++ b/src/main/resources/templates/rewards/userProfile.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
+    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+<!--    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
+</head>
+<body>
+
+<header>
+    <ul class="footerBar">
+        <li class="footerButton"><b>Home</b></li>
+        <li class="footerButton"><b>About</b></li>
+        <li class="footerButton"><b>Map</b></li>
+        <li class="footerButton"><b>Facilities</b></li>
+        <li class="footerButton"><b>Log In</b></li>
+    </ul>
+</header>
+
+<main>
+    <!--PICTURE - DATA - BADGES -->
+    <div class="userInfo">
+        <img th:src="@{${user.getImgPath()}}"
+             th:alt="${user.getName()}"
+             id="userPicture"
+        >
+        <h1 th:text="${user.getName()}"></h1>
+        <!--TODO add some progression info here?-->
+    </div>
+    <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
+        <article id="badgesBar">
+            <h2>Your Badges: </h2> <!--Shows first earned badges, followed by greyed out badges-->
+            <div id="allBadgesContainer"  class="centerFlex">
+                <img class="badgeImg"  th:each="badge : ${badges}" th:src="@{'..' + ${badge.getImgPath()}}"
+                     th:id="'img' + ${badge.getId()}" th:alt="${badge.getName()}" >
+            </div>
+        </article>
+        <article class="dragonProgression">
+            <h1>The Dragon's Tale</h1>
+            <div class="dragonContainer">
+                <div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
+                    <img th:src="@{/images/rewards/dragonFilled.png}"
+                         alt="Filled Dragon" id="FilledDragon" class="dragonImg">
+                </div>
+                <div class="dragonOut">
+                    <img th:src="@{/images/rewards/dragonOutline.png}"
+                         alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
+                </div>
+            </div>
+            <h2 th:text="${user.getDragonProgress()} + '%'"></h2>
+        </article>
+        <article id="stickersBox"> <!--Need a controller to show earned stickers -->
+            <h2> STICKERS! </h2>
+            <div class="stickersContainer">
+                <img th:class="'stickerImg ' + ${sticker.getVisibility()}"  th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getImgPath()}}"
+                     th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
+            </div>
+        </article>
+    </section>
+
+
+</main>
+
+<footer>
+
+</footer>
+
+
+<script>
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/src/main/resources/templates/towns/UserData.html
+++ b/src/main/resources/templates/towns/UserData.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>User Information</title>
+</head>
+<body>
+<div>
+    <ul th:each="user:${users}">
+        <li th:text="${user}"></li>
+    </ul>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/src/main/resources/templates/towns/home/homePage.html
+++ b/src/main/resources/templates/towns/home/homePage.html
@@ -2,10 +2,9 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <title>Title</title>
+  <title>VZTA - Smart Towns Trails</title>
    <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
-
 </head>
 <body>

@@ -14,50 +13,47 @@
  <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 th:text="${towns}">-->
    </div>

-        <a href="/allTrails" class="riscaBanner">
-            <H2> Risca</H2> </a>
+    <div th:each="town:${towns}" class="gridContainer2">

-    <div class="riscaBannerTrail">
-        <div id="trailCountRisca">Trails: 2</div>
-        <div id="trailProgressRisca">0%</div>
-    </div>
+      <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%;'" />


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


+        <H2 th:text="${town.getName()}"> </H2></a>

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

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

--- a/src/main/resources/templates/towns/home/homePageOld.html
+++ b/src/main/resources/templates/towns/home/homePageOld.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}">
+
+</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>
--- a/src/main/resources/templates/towns/locationData.html
+++ b/src/main/resources/templates/towns/locationData.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Location Data</title>
+</head>
+<body>
+<div>
+    <ul th:each="locations:${location}">
+        <li th:text="${locations}"></li>
+    </ul>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/src/main/resources/templates/towns/templates.server/Templating.html
+++ b/src/main/resources/templates/towns/templates.server/Templating.html
+<header class="headerBar th:fragment="header">
+
+            <div class="Logo">
+                <img th:src="@{images/VZTA.png}" 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>
+                        <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">
+            <div class="containerFooter">
+                <div class="leftFooter">
+                    <h3>VZTA</h3>
+                    Near Me Now LTD
+                    <br>Britania House
+                    <br>Caerphilly Business Park
+                    <br>Caerphilly
+                    <br>CF83 3GG
+                </div>
+                <div class="rightFooter">
+                    <h3>Connect with us</h3>
+                    <p>Be the first to know about updates by joining out Community page</p>
+                    (C) VZTA 2022<br>
+                    Policy Terms and Conditions
+                </div>
+                    <div class="centerFooter">
+                        <span class="footerText">
+                            <h3>Follow Us</h3>
+                            <a th:href=="https://www.facebook.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Facebook.png}" alt="Facebook Logo" class="picture">
+                            <a th:href=="https://www.twitter.com/VZTAsmarttowns/" class="icon"></a><img th:src="@{images/Twitter-Logo.png}" alt="X (formally Twitter) Logo" class="picture">
+                            <a th:href=="https://www.instagram.com/vztasmarttowns/" class="icon"></a><img th:src="@{images/Instagram.jpg}" alt="Instagram Logo" class="picture">
+                            <a th:href=="https://'www.linkin.com/company/vztasmarttowns/" class="icon"></a><img th:src="@{images/LinkedIn.jpg}" alt="Linkedin Logo" class="picture"> <br>
+                        </span>
+                        </div>
+                            <div class="copyright" style="text-align: left">
+
+                            </div>
+                    </div>
+            </div>
+</div>
+<style>
+    /* Header */
+    .headerBar {
+        border-bottom: 2px rgb(230, 230, 230) solid;
+        margin-bottom: 20px;
+        display: flex;
+        background: blueviolet;
+    }
+    /* Navbar Links */
+    .navBar {
+        margin-top: 50px;
+        margin-left: auto;
+        margin-right:20px;
+        text-align: right;
+    }
+    .work{
+        color: rgb(255, 255, 255);
+    }
+    .navBar ul {
+        list-style: none;
+        display: flex;
+        margin-left: 100px;
+    }
+    .navBar a {
+        border-left: 2px rgb(185, 185, 185) solid;
+        padding: 10px 40px;
+        text-decoration: none;
+        color:rgb(87, 86, 86);
+        white-space: nowrap;
+        overflow: hidden;
+        float: right;
+    }
+    .navBar a:hover {
+        background-color: rgb(209, 209, 209);
+    }
+    .navBar li{
+        margin-left: 10px;
+        margin-right: 10px;
+        color: rgb(255, 255, 255);
+    }
+    .navListLast {
+        border-right: 2px rgb(185, 185, 185) solid;
+        margin-right:40px;
+    }
+
+    /* Navbar Logo */
+    .Logo {
+        margin-left:10px;
+        padding: 20px;
+        width: fit-content;
+    }
+    .Logo img {
+        width: 120px;
+        margin-left:15px;
+    }
+
+    /* Footer */
+    footer {
+        margin-top:20px;
+        display: flex;
+        justify-content: center;
+    }
+    .footerBar{
+        border-top: 2px rgb(230, 230, 230) solid;
+        text-align: left;
+        display: flex;
+        background: blueviolet;
+        color: rgb(255, 255, 255);
+        padding-left: 30px;
+    }
+    .footerBar ul {
+        list-style: none;
+        display: flex;
+    }
+    .copyright{
+        text-align: left;
+        display: flex;
+    }
+    .containerFooter{
+        display: flex;
+        flex-direction: row;
+    }
+    .leftFooter{
+        flex:1;
+        color: rgb(255, 255,255);
+    }
+    .centerFooter{
+        flex: 1;
+        color: rgb(255, 255,255);
+    }
+    .rightFooter{
+        flex:1;
+        color: rgb(255, 255, 255);
+    }
+</style>
\ No newline at end of file
--- a/src/main/resources/templates/towns/trails/dragonstale/index.html
+++ b/src/main/resources/templates/towns/trails/dragonstale/index.html
@@ -5,14 +5,16 @@
    <title>A Dragon's Tale</title>
    <link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+    <script src="./node_modules/html5-qrcode/html5-qrcode.min.js"></script>
 </head>
    <body>
        <header th:insert="towns/Templating.html :: header"></header>

+        <!-- As this predefined trail will be accessible from multiple different towns, this thymeleaf element will display the town the user is currently trying to access and display it accordingly.   <span th:text="${townName}">  -->
        <div class="centre">
            <h1> Welcome, to a dragon's tale! </h1>
            <img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" id="homeimg">
-            <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of (thymeleaf element) to discover a prize! </h2>
+            <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
        </div>

        <div class="centre">
@@ -22,15 +24,28 @@
            </p>
        </div>

+
+        <!-- tabs -->
        <div class="centre">
-            <ul th:each="item : ${landmarksList}">
-                <p th:text="${item.landmarkName}"></p>
-                <p th:text="${item.landmarkDescription}"></p>
+            <h2>There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </h2>
+            <ul th:each="item : ${landmarksList}" id="tabBox">
+                <li>
+                    <a id="tabIdCounter" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
+                </li>
            </ul>
        </div>

+
+        <!-- Need to mark each element to an ID then loop through them.  -->
+        <div class="centre" id="listOfLandmarks">
+            <p th:each="item : ${landmarksList}">
+                <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>
+            </p>
+        </div>
+
+        <!-- If use is starting their journey, this will display begin. If not, they'll continue their journey.  <span th:text="${beginOrContinue}"> -->
        <div class="centre">
-            <h3>Begin your hunt!</h3>
+            <h3>  Begin or Continue your hunt!</h3>
            <button type="button" id="begin">Click here!</button>
        </div>
No results found