diff --git a/src/main/resources/static/css/dragonstaless.css b/src/main/resources/static/css/dragonstaless.css
index 2a0ecb3566ffa4d3e5a839c51d051423ba63f132..917d7fe1bdf4e752a7e43acf5c945210fb1065fa 100644
--- a/src/main/resources/static/css/dragonstaless.css
+++ b/src/main/resources/static/css/dragonstaless.css
@@ -17,6 +17,24 @@ body{
cursor: pointer;
}
+#hero-image-one{
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/dragonstale/DTLM1.png');
+ height: 50%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+}
+
+#hero-text-one {
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+}
+
.dropdown .content{
display: none;
@@ -32,6 +50,11 @@ body{
}
+main{
+ padding: 20px;
+ margin: 20px;
+}
+
.images{
max-width:100%;
height:auto;
diff --git a/src/main/resources/static/images/dragonstale/dtlm2.png b/src/main/resources/static/images/dragonstale/dtlm2.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc13bf3b5439f1c3f392e7fa1867160be140c252
Binary files /dev/null and b/src/main/resources/static/images/dragonstale/dtlm2.png differ
diff --git a/src/main/resources/templates/dragonstale/alllandmarks.html b/src/main/resources/templates/dragonstale/alllandmarks.html
index ab6095a0a4f178a2bbe40f416e62775f6142aea0..4ce4d628db0fb19d6c41afd72e2b5719c9b03d0b 100644
--- a/src/main/resources/templates/dragonstale/alllandmarks.html
+++ b/src/main/resources/templates/dragonstale/alllandmarks.html
@@ -3,8 +3,37 @@
<head>
<meta charset="UTF-8">
<title>The Dragons Path.</title>
+ <link rel="stylesheet" th:href="@{css/dragonstaless.css}">
+ <link rel="stylesheet" th:href="@{css/mobile-style.css}">
</head>
<body>
- <h1> Testing </h1>
+ <main>
+ <header th:insert="~{/fragments/banners.html::header}"></header>
+ <h1> Find your path... </h1>
+
+ <div id="hero-image-one">
+ <div id="hero-text-one">
+ <h1>An adventure begins....</h1>
+ <button onclick="getQR()">Click here to scan a QR code for this trail</button>
+ </div>
+ </div>
+
+ <div id="hero-image-two">
+ <div id="hero-text-two">
+ <h1>An adventure continues....</h1>
+ <button onclick="getQR()">Click here to scan a QR code for this trail</button>
+ </div>
+ </div>
+<!-- <ul>-->
+<!-- <li class="landmark" id="landmarkOne">-->
+<!-- <p>Adventure 1: <span> <img th:src="@{/images/dragonstale/DTLM1.png}" alt="Image of a dragon" class="images"></span></p>-->
+<!-- </li>-->
+<!-- <li class="landmark" id="landmarkTwo">-->
+<!-- <p> Bye</p>-->
+<!-- <img th:src="@{/images/dragonstale/dtlm2.png}" alt="Image of a dragon" class="images">-->
+<!-- </li>-->
+<!-- </ul>-->
+ <footer th:insert="~{/fragments/banners.html::footer}"></footer>
+ </main>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/dragonstale/index.html b/src/main/resources/templates/dragonstale/index.html
index 84f76c774b75ac1ca3ffc526c0668a572c1b11db..fe480e4c701ac743bb533ea8055d6a1ee62ea9cf 100644
--- a/src/main/resources/templates/dragonstale/index.html
+++ b/src/main/resources/templates/dragonstale/index.html
@@ -5,49 +5,51 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Dragon's Tale</title>
- <link rel="stylesheet" th:href="@{/css/dragonstaless.css}">
- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+ <link rel="stylesheet" th:href="@{css/dragonstaless.css}">
+ <link rel="stylesheet" th:href="@{css/mobile-style.css}">
<script type="text/javascript" th:src="@{/scripts/DTscript.js}"></script>
</head>
<body>
- <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>
- <h1> Welcome, to a dragon's tale! </h1>
- <img th:src="@{/images/dragonstale/dragonstalehome.png}" alt="Image of a dragon" class="images">
- <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
- </div>
+ <main id="main">
+ <header th:insert="~{/fragments/banners.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>
+ <h1> Welcome, to a dragon's tale! </h1>
+ <img th:src="@{/images/dragonstale/dragonstalehome.png}" alt="Image of a dragon" class="images">
+ <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
+ </div>
- <div>
- <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>
+ <div>
+ <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>
- <div class="dropdown">
- <button class="dropdownButton" onclick="toggleDropDown()" >There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
- <ul id="dropdownList">
- <li class="content" th:each="item : ${landmarksList}">
- <a class="option" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
- <button class="option" id="qrCodeScanner" onclick="getQR()">Click here to scan a QR code for: <span th:text="${item.landmarkName}">Landmark Name Here</span></button>
- </li>
- </ul>
- </div>
+ <div class="dropdown">
+ <button class="dropdownButton" onclick="toggleDropDown()" >There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
+ <ul id="dropdownList">
+ <li class="content" th:each="item : ${landmarksList}">
+ <a class="option" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a>
+ <button class="option" id="qrCodeScanner" onclick="getQR()">Click here to scan a QR code for: <span th:text="${item.landmarkName}">Landmark Name Here</span></button>
+ </li>
+ </ul>
+ </div>
- <!-- Need to mark each element to an ID then loop through them. -->
- <!-- <div id="listOfLandmarks">-->
- <!-- <p th:each="item : ${landmarksList}">-->
- <!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
- <!-- </p>-->
- <!-- </div>-->
+ <!-- Need to mark each element to an ID then loop through them. -->
+ <!-- <div id="listOfLandmarks">-->
+ <!-- <p th:each="item : ${landmarksList}">-->
+ <!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
+ <!-- </p>-->
+ <!-- </div>-->
- <div>
- <h3> Begin or Continue your hunt!</h3>
- <button type="button" id="begin" onclick="routeToAllLandmarks()">Click here!</button>
- </div>
- <div th:insert="fragments/Templating.html :: footer"></div>
+<!-- <div>-->
+<!-- <h3> Begin or Continue your hunt!</h3>-->
+<!-- <button type="button" id="begin" onclick="routeToAllLandmarks()">Click here!</button>-->
+<!-- </div>-->
+ <footer th:insert="~{/fragments/banners.html::footer}"></footer>
+ </main>
</body>
</html>
\ No newline at end of file