diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js
index ea21bb4e80f8301b542c6410dd3a5bee8f4ed64a..d04eed9d438bc2c7683e35b048068f9a556bb018 100644
--- a/src/main/resources/static/scripts/allTrails.js
+++ b/src/main/resources/static/scripts/allTrails.js
@@ -1,2 +1,18 @@
-
-/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/
+function updateOutputTrail(id) {
+ /* Updates the trail being shown on screen to the one requested by ID */
+ $.get("/allTrails/" + id).done(function (fragment) {
+ $("#trailInfoBox").html(fragment)
+ });
+ updateSelectedTrail(id);
+}
+function updateSelectedTrail(id) {
+ /* Updates the trail bar, so that it highlights the selected trail */
+ let list = document.getElementsByClassName('trailsImages')
+ for (let i = 0; i < list.length; i++) {
+ if (list[i].classList.contains('selected')) {
+ list[i].classList.remove('selected')
+ break
+ }
+ }
+ document.getElementById("img" + id).classList.add("selected")
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html
index a05cf5ff1e977462588588aaf7f3569c1eba5d3b..1179d27219d11ee88a7dc44453ed0e458706f0b4 100644
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
@@ -4,12 +4,15 @@
<meta charset="UTF-8">
<title>All Trails</title>
<link rel="stylesheet" th:href="@{css/allTrails.css}">
+ <link rel="stylesheet" th:href="@{css/banners.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
-<header>
- <div id="allTrailsBar" class="centerFlex">
+<header th:replace="towns/templates.server/Templating.html :: headerBlock"></header>
+
+<main>
+ <section id="allTrailsBar" class="centerFlex">
<!--TODO add rest of page-->
<img class="trailsImages"
th:each="trail : ${trails}"
@@ -17,34 +20,13 @@
th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
>
- </div>
-</header>
-
-<main>
+ </section>
<section id="trailInfoBox"></section>
</main>
+<footer th:replace="towns/templates.server/Templating.html:: footerBlock"></footer>
<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
-<script th:inline="javascript">
- function updateOutputTrail(id) {
- /* Updates the trail being shown on screen to the one requested by ID */
- $.get("/allTrails/" + id).done(function (fragment) {
- $("#trailInfoBox").html(fragment)
- });
- updateSelectedTrail(id);
- }
- function updateSelectedTrail(id) {
- /* Updates the trail bar, so that it highlights the selected trail */
- let list = document.getElementsByClassName('trailsImages')
- for (let i = 0; i < list.length; i++) {
- if (list[i].classList.contains('selected')) {
- list[i].classList.remove('selected')
- break
- }
- }
- document.getElementById("img" + id).classList.add("selected")
- }
-</script>
+
</body>
</html>
\ No newline at end of file