diff --git a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTale.java b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTale.java
index c83257f683812efd8633eeb2fdfc78dafe973777..d5eece1e8aac2593c5834fe414f61e495e38387b 100644
--- a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTale.java
+++ b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTale.java
@@ -1,14 +1,20 @@
package Team5.SmartTowns.dragonstale;
import Team5.SmartTowns.landmarks.Landmarks;
+import lombok.Data;
import java.util.List;
+
+@Data
public class DragonsTale {
Landmarks landmarks = new Landmarks();
+
+ //As there were already landmark fields created, I used composition to import them into the class to be used within the file.
private int landmarkID = landmarks.getLandmarkID();
private String landmarkName = landmarks.getLandmarkName();
private String landmarkDescription = landmarks.getLandmarkDescription();
+ private String getImgPath;
public static List<Landmarks> landmarksDragonstrail = List.of(
new Landmarks( 1, "A scent of...Dragon", "The Dragon has been spotted near by, find the QR code to continue" , "Start your discovery, at the sweet shop."),
new Landmarks( 2, "They've been found!", "Don't let them escape, find the next QR code to continue!", "Location test")
diff --git a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
index 9066b1239a40d42aeaca7293c05a37529b5eaff5..5cacd6d363601b95c13e95742455a4096ae2ead1 100644
--- a/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
+++ b/src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
@@ -29,6 +29,19 @@ public class DragonsTaleController {
return modelAndView;
}
+ @GetMapping("/allDTLandmarks")
+ public ModelAndView getAllLandmarksDT(){
+ modelAndView = new ModelAndView("/dragonstale/alllandmarks");
+ return modelAndView;
+ }
+
+ // Placeholder until thorough controller is inputted.
+ @GetMapping("/dragonstale/landmarkonedone")
+ public ModelAndView getLa(){
+ modelAndView = new ModelAndView("/dragonstale/landmarkonedone");
+ return modelAndView;
+ }
+
@GetMapping ("/QRScan") //In here, we could use trailID as a string variable and use it to track what trail the user clicked from.
public ModelAndView getQRScanner(){
modelAndView = new ModelAndView("fragments/qr-scanner");
diff --git a/src/main/resources/data.sql b/src/main/resources/data.sql
index ce210bd1bf72638648e77f94ea1411a2f27d22dd..8ffad04380049d6c6c324827d8b5d80073a578f4 100644
--- a/src/main/resources/data.sql
+++ b/src/main/resources/data.sql
@@ -83,4 +83,7 @@ insert into businesses ( businessName, address1, address2, city, county, postcod
delete from townsWithTrails;
insert into townsWithTrails (townName, townCentreCoordsLat, townCentreCoordsLong, townUppermostCoordsLat, townLowermostCoordsLat, townLeftmostCoordsLong, townRightmostCoordsLong) value ('Caerphilly', '51.57903','-3.22075 ','51.60418','51.55093','-3.25222','-3.17696');
insert into townsWithTrails (townName, townCentreCoordsLat, townCentreCoordsLong, townUppermostCoordsLat, townLowermostCoordsLat, townLeftmostCoordsLong, townRightmostCoordsLong) value ('Risca','51.61195','-3.09648','51.63039','51.59175','-3.12129','-3.06438');
-insert into townsWithTrails (townName, townCentreCoordsLat, townCentreCoordsLong, townUppermostCoordsLat, townLowermostCoordsLat, townLeftmostCoordsLong, townRightmostCoordsLong) value ('Penarth','51.43893','-3.17354','51.44878','51.41233','-3.20271','-3.16005');
\ No newline at end of file
+insert into townsWithTrails (townName, townCentreCoordsLat, townCentreCoordsLong, townUppermostCoordsLat, townLowermostCoordsLat, townLeftmostCoordsLong, townRightmostCoordsLong) value ('Penarth','51.43893','-3.17354','51.44878','51.41233','-3.20271','-3.16005');
+
+delete from dragonstale;
+insert into dragonstale(landmarkID, landmarkName, landmarkDescription, imgPath) value (1, 'A scent of...Dragon', 'The Dragon has been spotted near by, find the QR code to continue', '~/images/dragonstale/DTLM1.png');
\ No newline at end of file
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index ea3a17f56d38be864c8d56530e925ec3abc7e29f..9ba8cfacc085d32f675d8d40757c85c95d6839ab 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -1,48 +1,36 @@
-#allTrailsBar {
- width: 100%;
- min-height: 70svh;
- /*margin: 1svh auto;*/
+* {
+ box-sizing: border-box;
+}
+body {
+ background-color: rgb(41, 41, 41);
+ margin: 0;
display: flex;
flex-direction: column;
- justify-content: space-evenly;
- position: relative;
-
+ min-height: 100svh;
+}
+main {
}
-.trailWrapper {
- position: relative;
+.centerFlex {
display: flex;
- width: 70vw;
- height: 20svh;
- margin-inline: auto;
- & h1 {
- display: flex;
- width: 100%;
- position: absolute;
- align-items: flex-start;
- padding-top: 1svh;
- padding-bottom: 0.5svh;
- text-align: center;
- justify-content: center;
- text-decoration: none;
- color: white;
- font-weight: 600;
- text-shadow: rgba(0, 0, 0, 0.2) 0 1svh 1svh;
- font-size: 2em;
- border-bottom: black solid 2px;
- background-color: rgba(31, 31, 31, 0.2);
- border-radius: 20px 20px 0 0;
- }
+ justify-content: center;
}
+#allTrailsBar {
+ width: 100%;
+ height: auto;
+ /*margin: 1svh auto;*/
+ padding: 0 5svh;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+}
.trailsImages {
- width: 100%;
- height: 100%;
- /*margin: 1svh 0;*/
- /*height: auto;*/
- /*aspect-ratio: 1;*/
+ margin: 1svh auto;
+ height: 12svh;
+ width: auto;
border-radius: 20px;
- border: solid grey 4px;
+ border: solid grey 2px;
transition: 0.5s ease-out 100ms;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
}
@@ -59,79 +47,89 @@
0% { opacity: 0; }
100% { opacity: 1; }
}
+main {
+ margin: 0;
+}
-/*#trailInfoContainer {*/
+#trailInfoContainer {
-/* overflow: scroll;*/
-/*}*/
+ overflow: scroll;
+}
-/*.trailInfoFrag {*/
-/* background-color: rgb(84, 33, 128);*/
-/* border: #000000 solid 2px;*/
-/* border-radius: 10px;*/
-/* box-shadow: 0 5px 20px 0 #000000;*/
-/* margin: 2svh auto;*/
-/* padding-bottom: 2svw;*/
-/* width: 70vw;*/
-/* height: auto;*/
-/* min-height: 30svh;*/
-/* animation: fadeIn 3s;*/
+.trailInfoFrag {
+ background-color: rgb(84, 33, 128);
+ border: #000000 solid 2px;
+ border-radius: 10px;
+ box-shadow: 0 5px 20px 0 #000000;
+ margin: 2svh auto;
+ padding-bottom: 2svw;
+ width: 70vw;
+ height: auto;
+ min-height: 30svh;
+ animation: fadeIn 3s;
-/* display: grid;*/
-/* grid-template-areas:*/
-/* "header header header"*/
-/* "image text text";*/
-/* grid-template-columns: 30% 30% auto;*/
-/* grid-template-rows: 10% auto;*/
-/* grid-column-gap: 2vw;*/
-/* grid-row-gap: 2svh;*/
-/* & .trailInfoHeader {*/
-/* grid-area: header;*/
-/* width: 100%;*/
-/* height: 100%;*/
-/* margin-top: 1svh;*/
-/* padding: 0;*/
-/* & h1 {*/
-/* color: white;*/
-/* padding:0;*/
-/* margin:0 25%;*/
-/* font-size: 2vw;*/
-/* text-align: center;*/
-/* box-shadow: 0 10px 10px -10px black;*/
-/* }*/
+ display: grid;
+ grid-template-areas:
+ "header header header"
+ "image text text";
+ grid-template-columns: 30% 30% auto;
+ grid-template-rows: 10% auto;
+ grid-column-gap: 2vw;
+ grid-row-gap: 2svh;
+ & .trailInfoHeader {
+ grid-area: header;
+ width: 100%;
+ height: 100%;
+ margin-top: 1svh;
+ padding: 0;
+ & h1 {
+ color: white;
+ padding:0;
+ margin:0 25%;
+ font-size: 2vw;
+ text-align: center;
+ box-shadow: 0 10px 10px -10px black;
+ }
-/* }*/
+ }
-/* & img {*/
-/* grid-area: image;*/
-/* border-radius: 10px;*/
-/* border: black solid 1px;*/
-/* margin-left: 2vw;*/
-/* margin-right: 2vw;*/
-/* width: 100%;*/
-/* height: auto;*/
-/* box-shadow: 0 10px 20px -10px black;*/
-/* }*/
-/* & p {*/
-/* grid-area: text;*/
-/* color: white;*/
-/* margin: 0;*/
-/* padding: 0 2vw;*/
-/* font-size: 1.3vw;*/
-/* text-align: justify;*/
-/* text-justify: inter-character;*/
-/* line-height: 1.5;*/
-/* width: fit-content;*/
-/* height: fit-content;*/
-/* overflow: scroll;*/
+ & img {
+ grid-area: image;
+ border-radius: 10px;
+ border: black solid 1px;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ width: 100%;
+ height: auto;
+ box-shadow: 0 10px 20px -10px black;
+ }
+ & p {
+ grid-area: text;
+ color: white;
+ margin: 0;
+ padding: 0 2vw;
+ font-size: 1.3vw;
+ text-align: justify;
+ text-justify: inter-character;
+ line-height: 1.5;
+ width: fit-content;
+ height: fit-content;
+ overflow: scroll;
-/* }*/
-/*}*/
+ }
+}
+
+
+#trailFragContent {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ min-height: 40svh;
+ flex-wrap: wrap;
+
+}
-/*#trailFragContent {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* display: flex;*/
-/* min-height: 40svh;*/
-/* flex-wrap: wrap;*/
-/*}*/
\ No newline at end of file
+header {
+ box-shadow: #1e1e1e 0 0 10px 10px;
+ font-size: 1vw;
+}
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/DTLM1.png b/src/main/resources/static/images/dragonstale/DTLM1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6617272744c064072415bacb7992b47a7cece852
Binary files /dev/null and b/src/main/resources/static/images/dragonstale/DTLM1.png differ
diff --git a/src/main/resources/static/images/trails/dragonone.png b/src/main/resources/static/images/dragonstale/dragonone.png
similarity index 100%
rename from src/main/resources/static/images/trails/dragonone.png
rename to src/main/resources/static/images/dragonstale/dragonone.png
diff --git a/src/main/resources/static/images/trails/dragonstalehome.png b/src/main/resources/static/images/dragonstale/dragonstalehome.png
similarity index 100%
rename from src/main/resources/static/images/trails/dragonstalehome.png
rename to src/main/resources/static/images/dragonstale/dragonstalehome.png
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/static/scripts/DTscript.js b/src/main/resources/static/scripts/DTscript.js
index b791445e69d24655e244294b57dfd72d71ce15c6..ed97cd7c01ab2095b8a1608d70ed19d9adc4f912 100644
--- a/src/main/resources/static/scripts/DTscript.js
+++ b/src/main/resources/static/scripts/DTscript.js
@@ -4,6 +4,10 @@ var getQR = function (){
}
function toggleDropDown(){
- var dropdownList = document.getElementById("dropdownList")
- dropdownList.style.display = (dropdownList.style.display === "block") ? "none" : "block"
+ var dropdownList = document.getElementById("dropdownList");
+ dropdownList.style.display = (dropdownList.style.display === "block") ? "none" : "block";
+}
+
+function routeToAllLandmarks(){
+ window.location.href="/allDTLandmarks";
}
\ No newline at end of file
diff --git a/src/main/resources/templates/dragonstale/alllandmarks.html b/src/main/resources/templates/dragonstale/alllandmarks.html
new file mode 100644
index 0000000000000000000000000000000000000000..4ce4d628db0fb19d6c41afd72e2b5719c9b03d0b
--- /dev/null
+++ b/src/main/resources/templates/dragonstale/alllandmarks.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>
+ <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 1745a9e2362b790850def159561e9b9d38a22c0f..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/trails/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">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
diff --git a/src/main/resources/templates/dragonstale/landmarkonedone.html b/src/main/resources/templates/dragonstale/landmarkonedone.html
new file mode 100644
index 0000000000000000000000000000000000000000..d9e7dab7d1ffcc42f98c709b814ac7c9085d2533
--- /dev/null
+++ b/src/main/resources/templates/dragonstale/landmarkonedone.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Landmark one Complete!</title>
+ <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>
+ <main>
+ <header th:insert="~{/fragments/banners.html::header}"></header>
+ <h1>Well done! You have completed the first landmark of dragons trail.
+ </h1>
+ <img th:src="@{/images/dragonstale/dtlm2.png}" alt="Image of a dragon" class="images">
+ <p> As I ventured deep into the mysterious cave, the air grew thick with anticipation. Amidst the shadows, a shimmering glint caught my eye, revealing the majestic scales of a slumbering dragon. Its enormous form lay curled protectively around a hoard of ancient treasures, and the cavern echoed with the rhythmic pulse of its slow, steady breaths. I stood in awe, torn between the thrill of discovery and the primal fear that gripped my heart in the presence of such a mythical beast.</p>
+ <footer th:insert="~{/fragments/banners.html::footer}"></footer>
+ </main>
+</body>
+</html>
\ No newline at end of file