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{ ...@@ -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/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 @@ ...@@ -3,8 +3,37 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>The Dragons Path.</title> <title>The Dragons Path.</title>
<link rel="stylesheet" th:href="@{css/dragonstaless.css}">
<link rel="stylesheet" th:href="@{css/mobile-style.css}">
</head> </head>
<body> <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> </body>
</html> </html>
\ No newline at end of file
src/main/resources/templates/dragonstale/index.html
+ 37
− 35
View file @ 6b7f9181
...@@ -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/dragonstale/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" onclick="routeToAllLandmarks()">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
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