Skip to content
Snippets Groups Projects
Commit 605d12fc authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Merge branch... 

Merge branch '81-as-a-child-i-want-a-very-flashy-and-modern-looking-webpage-that-will-draw-me-in-and-keep-me' into 'main'

Resolve "As a child, I want a very flashy and modern looking webpage that will draw me in and keep me entertained while following the dragons tale trail."

Closes #81

See merge request d1634883/client-project!43
parents 97b7a1dc aa9d0003
Branches main
No related tags found
1 merge request!43Resolve "As a child, I want a very flashy and modern looking webpage that will draw me in and keep me entertained while following the dragons tale trail."
Hide whitespace changes
Inline Side-by-side
Showing
with 250 additions and 142 deletions
src/main/java/Team5/SmartTowns/dragonstale/DragonsTale.java
+ 6
− 0
View file @ 605d12fc
package Team5.SmartTowns.dragonstale; package Team5.SmartTowns.dragonstale;
import Team5.SmartTowns.landmarks.Landmarks; import Team5.SmartTowns.landmarks.Landmarks;
import lombok.Data;
import java.util.List; import java.util.List;
@Data
public class DragonsTale { public class DragonsTale {
Landmarks landmarks = new Landmarks(); 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 int landmarkID = landmarks.getLandmarkID();
private String landmarkName = landmarks.getLandmarkName(); private String landmarkName = landmarks.getLandmarkName();
private String landmarkDescription = landmarks.getLandmarkDescription(); private String landmarkDescription = landmarks.getLandmarkDescription();
private String getImgPath;
public static List<Landmarks> landmarksDragonstrail = List.of( 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( 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") new Landmarks( 2, "They've been found!", "Don't let them escape, find the next QR code to continue!", "Location test")
......
src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
+ 13
− 0
View file @ 605d12fc
...@@ -29,6 +29,19 @@ public class DragonsTaleController { ...@@ -29,6 +29,19 @@ public class DragonsTaleController {
return modelAndView; 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. @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(){ public ModelAndView getQRScanner(){
modelAndView = new ModelAndView("fragments/qr-scanner"); modelAndView = new ModelAndView("fragments/qr-scanner");
......
src/main/resources/data.sql
+ 4
− 1
View file @ 605d12fc
...@@ -83,4 +83,7 @@ insert into businesses ( businessName, address1, address2, city, county, postcod ...@@ -83,4 +83,7 @@ insert into businesses ( businessName, address1, address2, city, county, postcod
delete from townsWithTrails; 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 ('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 ('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'); 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
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
src/main/resources/static/css/allTrails.css
+ 102
− 104
View file @ 605d12fc
#allTrailsBar { * {
width: 100%; box-sizing: border-box;
min-height: 70svh; }
/*margin: 1svh auto;*/ body {
background-color: rgb(41, 41, 41);
margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; min-height: 100svh;
position: relative; }
main {
} }
.trailWrapper { .centerFlex {
position: relative;
display: flex; display: flex;
width: 70vw; justify-content: center;
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;
}
} }
#allTrailsBar {
width: 100%;
height: auto;
/*margin: 1svh auto;*/
padding: 0 5svh;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.trailsImages { .trailsImages {
width: 100%; margin: 1svh auto;
height: 100%; height: 12svh;
/*margin: 1svh 0;*/ width: auto;
/*height: auto;*/
/*aspect-ratio: 1;*/
border-radius: 20px; border-radius: 20px;
border: solid grey 4px; border: solid grey 2px;
transition: 0.5s ease-out 100ms; transition: 0.5s ease-out 100ms;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
} }
...@@ -59,79 +47,89 @@ ...@@ -59,79 +47,89 @@
0% { opacity: 0; } 0% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
main {
margin: 0;
}
/*#trailInfoContainer {*/ #trailInfoContainer {
/* overflow: scroll;*/ overflow: scroll;
/*}*/ }
/*.trailInfoFrag {*/ .trailInfoFrag {
/* background-color: rgb(84, 33, 128);*/ background-color: rgb(84, 33, 128);
/* border: #000000 solid 2px;*/ border: #000000 solid 2px;
/* border-radius: 10px;*/ border-radius: 10px;
/* box-shadow: 0 5px 20px 0 #000000;*/ box-shadow: 0 5px 20px 0 #000000;
/* margin: 2svh auto;*/ margin: 2svh auto;
/* padding-bottom: 2svw;*/ padding-bottom: 2svw;
/* width: 70vw;*/ width: 70vw;
/* height: auto;*/ height: auto;
/* min-height: 30svh;*/ min-height: 30svh;
/* animation: fadeIn 3s;*/ animation: fadeIn 3s;
/* display: grid;*/ display: grid;
/* grid-template-areas:*/ grid-template-areas:
/* "header header header"*/ "header header header"
/* "image text text";*/ "image text text";
/* grid-template-columns: 30% 30% auto;*/ grid-template-columns: 30% 30% auto;
/* grid-template-rows: 10% auto;*/ grid-template-rows: 10% auto;
/* grid-column-gap: 2vw;*/ grid-column-gap: 2vw;
/* grid-row-gap: 2svh;*/ grid-row-gap: 2svh;
/* & .trailInfoHeader {*/ & .trailInfoHeader {
/* grid-area: header;*/ grid-area: header;
/* width: 100%;*/ width: 100%;
/* height: 100%;*/ height: 100%;
/* margin-top: 1svh;*/ margin-top: 1svh;
/* padding: 0;*/ padding: 0;
/* & h1 {*/ & h1 {
/* color: white;*/ color: white;
/* padding:0;*/ padding:0;
/* margin:0 25%;*/ margin:0 25%;
/* font-size: 2vw;*/ font-size: 2vw;
/* text-align: center;*/ text-align: center;
/* box-shadow: 0 10px 10px -10px black;*/ box-shadow: 0 10px 10px -10px black;
/* }*/ }
/* }*/ }
/* & img {*/ & img {
/* grid-area: image;*/ grid-area: image;
/* border-radius: 10px;*/ border-radius: 10px;
/* border: black solid 1px;*/ border: black solid 1px;
/* margin-left: 2vw;*/ margin-left: 2vw;
/* margin-right: 2vw;*/ margin-right: 2vw;
/* width: 100%;*/ width: 100%;
/* height: auto;*/ height: auto;
/* box-shadow: 0 10px 20px -10px black;*/ box-shadow: 0 10px 20px -10px black;
/* }*/ }
/* & p {*/ & p {
/* grid-area: text;*/ grid-area: text;
/* color: white;*/ color: white;
/* margin: 0;*/ margin: 0;
/* padding: 0 2vw;*/ padding: 0 2vw;
/* font-size: 1.3vw;*/ font-size: 1.3vw;
/* text-align: justify;*/ text-align: justify;
/* text-justify: inter-character;*/ text-justify: inter-character;
/* line-height: 1.5;*/ line-height: 1.5;
/* width: fit-content;*/ width: fit-content;
/* height: fit-content;*/ height: fit-content;
/* overflow: scroll;*/ overflow: scroll;
/* }*/ }
/*}*/ }
#trailFragContent {
margin: 0;
padding: 0;
display: flex;
min-height: 40svh;
flex-wrap: wrap;
}
/*#trailFragContent {*/ header {
/* margin: 0;*/ box-shadow: #1e1e1e 0 0 10px 10px;
/* padding: 0;*/ font-size: 1vw;
/* display: flex;*/ }
/* min-height: 40svh;*/
/* flex-wrap: wrap;*/
/*}*/
\ No newline at end of file
src/main/resources/static/css/dragonstaless.css
+ 23
− 0
View file @ 605d12fc
...@@ -17,6 +17,24 @@ body{ ...@@ -17,6 +17,24 @@ body{
cursor: pointer; 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{ .dropdown .content{
display: none; display: none;
...@@ -32,6 +50,11 @@ body{ ...@@ -32,6 +50,11 @@ body{
} }
main{
padding: 20px;
margin: 20px;
}
.images{ .images{
max-width:100%; max-width:100%;
height:auto; height:auto;
......
src/main/resources/static/images/dragonstale/DTLM1.png 0 → 100644
+ 0
− 0
View file @ 605d12fc
src/main/resources/static/images/dragonstale/DTLM1.png

118 KiB

src/main/resources/static/images/dragonstale/dtlm2.png 0 → 100644
+ 0
− 0
View file @ 605d12fc
src/main/resources/static/images/dragonstale/dtlm2.png

111 KiB

src/main/resources/static/scripts/DTscript.js
+ 6
− 2
View file @ 605d12fc
...@@ -4,6 +4,10 @@ var getQR = function (){ ...@@ -4,6 +4,10 @@ var getQR = function (){
} }
function toggleDropDown(){ function toggleDropDown(){
var dropdownList = document.getElementById("dropdownList") var dropdownList = document.getElementById("dropdownList");
dropdownList.style.display = (dropdownList.style.display === "block") ? "none" : "block" dropdownList.style.display = (dropdownList.style.display === "block") ? "none" : "block";
}
function routeToAllLandmarks(){
window.location.href="/allDTLandmarks";
} }
\ No newline at end of file
src/main/resources/templates/dragonstale/alllandmarks.html 0 → 100644
+ 39
− 0
View file @ 605d12fc
<!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
src/main/resources/templates/dragonstale/index.html
+ 37
− 35
View file @ 605d12fc
...@@ -5,49 +5,51 @@ ...@@ -5,49 +5,51 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Dragon's Tale</title> <title>A Dragon's Tale</title>
<link rel="stylesheet" th:href="@{/css/dragonstaless.css}"> <link rel="stylesheet" th:href="@{css/dragonstaless.css}">
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}"> <link rel="stylesheet" th:href="@{css/mobile-style.css}">
<script type="text/javascript" th:src="@{/scripts/DTscript.js}"></script> <script type="text/javascript" th:src="@{/scripts/DTscript.js}"></script>
</head> </head>
<body> <body>
<header th:insert="fragments/Templating.html :: header"></header> <main id="main">
<!-- 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}"> --> <header th:insert="~{/fragments/banners.html::header}"></header>
<div> <!-- 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}"> -->
<h1> Welcome, to a dragon's tale! </h1> <div>
<img th:src="@{/images/trails/dragonstalehome.png}" alt="Image of a dragon" class="images"> <h1> Welcome, to a dragon's tale! </h1>
<h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2> <img th:src="@{/images/dragonstale/dragonstalehome.png}" alt="Image of a dragon" class="images">
</div> <h2> Discover the mystery of the dragon, track its location and follow it throughout the town of to discover a prize! </h2>
</div>
<div> <div>
<p> <p>
Adventurers... embark through mystical historical landmarks to ultimately discover the lair of the dragon. 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.... Legend has it that within this ominous lair, mighty dragons, guardians of ancient wisdom and treasures untold lay....
</p> </p>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="dropdownButton" onclick="toggleDropDown()" >There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button> <button class="dropdownButton" onclick="toggleDropDown()" >There are <span th:text="${getListSize}"> Size of List </span> adventures in this journey! </button>
<ul id="dropdownList"> <ul id="dropdownList">
<li class="content" th:each="item : ${landmarksList}"> <li class="content" th:each="item : ${landmarksList}">
<a class="option" href="#landmarkTabLink" th:text="${item.landmarkName}"> Landmark Tab</a> <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> <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> </li>
</ul> </ul>
</div> </div>
<!-- Need to mark each element to an ID then loop through them. --> <!-- Need to mark each element to an ID then loop through them. -->
<!-- <div id="listOfLandmarks">--> <!-- <div id="listOfLandmarks">-->
<!-- <p th:each="item : ${landmarksList}">--> <!-- <p th:each="item : ${landmarksList}">-->
<!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>--> <!-- <span th:text="${item.landmarkDescription}" class="landmarkDesc" id="landmarkTabLink"> Landmark Description</span>-->
<!-- </p>--> <!-- </p>-->
<!-- </div>--> <!-- </div>-->
<div> <!-- <div>-->
<h3> Begin or Continue your hunt!</h3> <!-- <h3> Begin or Continue your hunt!</h3>-->
<button type="button" id="begin">Click here!</button> <!-- <button type="button" id="begin" onclick="routeToAllLandmarks()">Click here!</button>-->
</div> <!-- </div>-->
<div th:insert="fragments/Templating.html :: footer"></div> <footer th:insert="~{/fragments/banners.html::footer}"></footer>
</main>
</body> </body>
</html> </html>
\ No newline at end of file
src/main/resources/templates/dragonstale/landmarkonedone.html 0 → 100644
+ 20
− 0
View file @ 605d12fc
<!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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment