Skip to content
Snippets Groups Projects
Commit 6b7f9181 authored by Connor Brock's avatar Connor Brock
Browse files

Commented out seperate landmark page and used dropdown instead for presentation

parent 6d587b47
No related branches found
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
src/main/resources/static/css/dragonstaless.css
+ 23
− 0
View file @ 6b7f9181
......@@ -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/dtlm2.png 0 → 100644
+ 0
− 0
View file @ 6b7f9181
src/main/resources/static/images/dragonstale/dtlm2.png

111 KiB

src/main/resources/templates/dragonstale/alllandmarks.html
+ 30
− 1
View file @ 6b7f9181
......@@ -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
src/main/resources/templates/dragonstale/index.html
+ 37
− 35
View file @ 6b7f9181
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment