Newer
Older
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<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>
<header th:insert="fragments/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 to discover a prize! </h2>
</div>
<div class="centre">
<p>
Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon.
Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
</p>
</div>
<!-- tabs -->
<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>
<!-- 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}"> -->
<h3> Begin or Continue your hunt!</h3>
<button type="button" id="begin">Click here!</button>
</div>
<div th:insert="fragments/Templating.html :: footer"></div>
<script>
document.getElementById("begin").addEventListener("click", function (){
window.location.href = ("/dragonstale/landmarkone");
})
</script>
</body>