Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Trails</title>
<link rel="stylesheet" th:href="@{css/allTrails.css}">
<link rel="stylesheet" th:href="@{css/templatingstyle.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header th:replace="~{/towns/Templating.html :: header}"></header>
<main>
<section id="allTrailsBar" class="centerFlex">
<img class="trailsImages"
th:each="trail : ${trails}"
th:src="@{${trail.getImgPath()}}"
th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
<section id="trailInfoContainer" class="trailInfoFrag">
<!--All this section is loaded from thymeleaf, based on what tail is selected
in the #allTrailsBar -->
<div class="trailInfoHeader">
<h1 class="centerFlex">Please select your trail</h1>
</div>
<footer th:insert="~{/towns/Templating.html :: footer}"></footer>
<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
</body>
</html>