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
No related branches found
No related tags found
No related merge requests found
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;
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")
......
src/main/java/Team5/SmartTowns/dragonstale/DragonsTaleController.java
+ 13
− 0
View file @ 605d12fc
......@@ -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");
......
src/main/resources/data.sql
+ 4
− 1
View file @ 605d12fc
......@@ -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
src/main/resources/static/css/allTrails.css
+ 102
− 104
View file @ 605d12fc
#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;
}
src/main/resources/static/css/dragonstaless.css
+ 23
− 0
View file @ 605d12fc
......@@ -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;
......
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 (){
}
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
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 @@
<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
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