diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
index 9b6e9d2d8cd46f5ac11b195c9db49cbe3cc9423e..ba532c16700b0ad61fa2524a90957e2a085e2aa5 100644
--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
@@ -1,7 +1,10 @@
package Team5.SmartTowns.Webpages;
+import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
@Controller
@@ -26,6 +29,17 @@ public class WebpageController {
return modelAndView;
}
+ @GetMapping("/home")
+ public ModelAndView getHome(){
+ ModelAndView modelAndView = new ModelAndView("home");
+ return modelAndView;
+ }
+
+ @RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
+ public String sendHtmlFragment(Model map) {
+ //map.addAttribute("foo", "bar");
+ return "fragments/temp_frags.html :: trailInfo2";
+ }
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..c116f6554429b20e76bcc8fbe703a9bddeee9792
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,202 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+.center {
+ text-align: center;
+}
+body {
+ background-color: rgb(41, 41, 41);
+ margin: 0%;
+}
+.headerBlock {
+ background-color: rgb(15, 15, 15);
+ padding-bottom: 20px;
+ box-shadow: 0 10px 20px black;
+ .headerTitle {
+ text-align: center;
+ padding: 10px 10px 0 10px;
+ margin: 0 50px 0 50px;
+ letter-spacing: 10px;
+ font-size: 50px;
+ font-style: italic;
+ color: blueviolet;
+ text-shadow: black 3px 3px 5px;
+ border-bottom: 3px blueviolet solid;
+ }
+ .headerBanner {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ height: 200px;
+ border-top: grey solid 2px;
+ border-bottom: grey solid 2px;
+
+ .bannerBack {
+ opacity: 0.6;
+ width: 100%;
+ left: 0;
+ top: 0;
+ position: absolute
+ }
+ .bigTitle {
+ color:white;
+ text-align: center;
+ position: relative;
+ font-size: 50px;
+ margin: 20px 20px 5px;
+ }
+ .smallTitle {
+ position: relative;
+ color:white;
+ text-align: center;
+ font-size: 20px;
+ margin: 5px 20px 20px;
+ }
+ }
+}
+
+
+
+.mainTrails{
+ overflow: hidden;
+ position: relative;
+ height: 200px;
+ border-top: grey solid 2px;
+ border-bottom: grey solid 2px;
+}
+.trailList {
+ .ulHeader {
+ margin: 30px;
+ display: flex;
+ list-style: none;
+ justify-content: center;
+ padding: 0px;
+ border-bottom: solid black 5px;
+
+ .liHeader {
+
+ flex: 1 1 0px;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: white;
+ text-align: center;
+ }
+ .liHeader:hover {
+ color: blueviolet;
+ border-bottom: solid blueviolet 2px;
+ }
+ .selected {
+ flex: 1 1 0px;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: rgb(154, 69, 234);
+ border-bottom: solid blueviolet 2px;
+ text-align: center;
+ }
+ }
+
+}
+.mainBlock {
+ display: flex;
+ min-width: 300px;
+ flex-wrap: wrap;
+ margin-top: 20px;
+ margin-bottom: 100px;
+}
+.mainBlock .trailStats{
+ background-color: rgb(206, 153, 253);
+ flex: 0 0 0px;
+ min-width: 400px;
+ height: 600px;
+ margin: auto;
+ margin-bottom: 20px;
+ box-shadow: 0px 0px 20px rgb(20, 20, 20);
+ border-radius: 30px;
+ .stats {
+ display: block;
+ width: 200px;
+ margin: auto;
+ }
+ .textStats {
+ display: block;
+ text-align: left;
+ margin: 20px;
+ }
+}
+.mainBlock .trailInfo{
+ background-color: rgb(206, 153, 253);
+ flex: 0 0 0px;
+ min-width: 400px;
+ height: 600px;
+ margin: auto;
+ margin-bottom: 20px;
+ box-shadow: 0px 10px 10px rgb(20, 20, 20);
+ border-radius: 30px;
+ .trailInfoTxt {
+ margin: 15px;
+ }
+}
+.titleH1 {
+ padding: 0px;
+ margin: 10px 30px 20px 30px;
+ text-align: center;
+ font-size: 40px;
+ font-style: italic;
+ border-bottom: solid black 1px;
+}
+.mainBlock p {
+ font-size: 25px;
+ text-align: left;
+ padding: 1px;
+}
+main .badgesBlock{
+ bottom: 0%;
+ background-color: rgb(222, 75, 255);
+ flex: 0 0 0px;
+ min-width: 500px;
+ min-height: 100px;
+ margin: auto;
+ margin-bottom: 10px;
+ box-shadow: 0px 10px 10px rgb(20, 20, 20);
+ border-radius: 30px;
+}
+.badgesList {
+ display: flex;
+}
+.badgeImg {
+ flex: 0 1 0px;
+ width: 60px;
+ margin: auto;
+ margin-bottom: 20px;
+
+}
+
+footer {
+ bottom: 0%;
+ left: 0%;
+ position: fixed;
+ width: 100%;
+ min-width: 300px;
+}
+footer .footerBar {
+ display: flex;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+}
+footer .footerButton {
+ padding: 20px;
+ text-align: center;
+ flex: 1 1 0px;
+ color:crimson;
+ background-color: white;
+
+}
+footer .footerButton:hover {
+ background-color: black;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/images/badges.png b/src/main/resources/static/images/badges.png
new file mode 100644
index 0000000000000000000000000000000000000000..57e379c719f5fe28ba827d7007be9637cfd9ff73
Binary files /dev/null and b/src/main/resources/static/images/badges.png differ
diff --git a/src/main/resources/static/images/stats.png b/src/main/resources/static/images/stats.png
new file mode 100644
index 0000000000000000000000000000000000000000..39904f1cfc911df01306fb85ab78b015e7d0386c
Binary files /dev/null and b/src/main/resources/static/images/stats.png differ
diff --git a/src/main/resources/static/images/trails.jpg b/src/main/resources/static/images/trails.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..20481a4f8a914ae8b272f490e2006dd0afaa5a2b
Binary files /dev/null and b/src/main/resources/static/images/trails.jpg differ
diff --git a/src/main/resources/static/scripts/gabScripts.js b/src/main/resources/static/scripts/gabScripts.js
new file mode 100644
index 0000000000000000000000000000000000000000..3053fc2316552e2f8c588847aa67e1aaa44aed44
--- /dev/null
+++ b/src/main/resources/static/scripts/gabScripts.js
@@ -0,0 +1,16 @@
+function selectTrail(string, element) {
+ console.log('Clicked')
+ let listEl = document.getElementsByClassName('liHeader')
+ for (let i = 0; i < listEl.length; i++) {
+ listEl[i].classList.remove('selected')
+ }
+ document.getElementById(string).classList.add("selected")
+
+}
+
+function updateOutput() {
+ $.post("test_ajax_frag").done(function (fragment) {
+ console.log(fragment);
+ $("#trailInfoBox").replaceWith(fragment);
+ });
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/temp_frags.html b/src/main/resources/templates/fragments/temp_frags.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2bd9778aceb58a6d3327e459f9e19baa4e29f47
--- /dev/null
+++ b/src/main/resources/templates/fragments/temp_frags.html
@@ -0,0 +1,36 @@
+<header th:fragment="header" class="headerBlock">
+ <h1 class="headerTitle">SMART-TOWNS</h1>
+ <div class="headerBanner">
+ <img src="images/trails.jpg" alt="Trails" class="bannerBack">
+<!-- <div class="bannerText">-->
+ <h1 class="bigTitle">Smart Town Trails</h1>
+ <h2 class="smallTitle">Information about trails for your town</h2>
+<!-- </div>-->
+ </div>
+</header>
+<footer th:fragment="footer">
+ <ul class="footerBar">
+ <li class="footerButton">Home</li>
+ <li class="footerButton">About</li>
+ <li class="footerButton">Map</li>
+ <li class="footerButton">Facilities</li>
+ <li class="footerButton">Search</li>
+ </ul>
+</footer>
+
+<article class="trailInfo" th:fragment="trailInfo1">
+ <h1 class="titleH1">Trail Info</h1>
+ <p class="trailInfoTxt">Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+</article>
+<article id="trailInfoBox" class="trailInfo" th:fragment="trailInfo2">
+ <h1 class="titleH1">Trail Info</h1>
+ <p class="trailInfoTxt">TESTTESTETSTESdent, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+</article>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
new file mode 100644
index 0000000000000000000000000000000000000000..39906f23d230c075381eeb440453ce3b4ace4029
--- /dev/null
+++ b/src/main/resources/templates/home.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Website Web</title>
+ <link rel="stylesheet" th:href="@{css/style.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+
+<body>
+ <header th:replace="fragments/temp_frags.html :: header"></header>
+
+ <main>
+ <div class="trailList">
+ <ul class="ulHeader">
+ <li onclick="selectTrail('trail1', this)" class="liHeader" id="trail1" >Trail 1</li>
+ <li onclick="selectTrail('trail2', this)" class="liHeader selected" id="trail2" >Trail 2</li>
+ <li onclick="selectTrail('trail3', this)" class="liHeader" id="trail3" >Trail 3</li>
+ <li onclick="updateOutput()" class="liHeader" id="trail4" >Trail 4</li>
+ </ul>
+ </div>
+
+ <section class="mainBlock">
+ <article class="trailStats">
+ <h1 class="titleH1">Trail Stats</h1>
+ <img src="../static/images/stats.png" alt="Stats" class="stats">
+ <div class="textStats">
+ <p><b>Explored:</b> 60%</p>
+ <p><b>Landmarks Visited:</b> 3/5</p>
+ <p><b>Shops Visited:</b> 6/10</p>
+ </div>
+ </article>
+ <article id="trailInfoBox" class="trailInfo"></article>
+ <article class="badgesBlock">
+ <h1 class="titleH1">Badges</h1>
+ <div class="badgesList">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ </div>
+
+ </article>
+ </section>
+ </main>
+
+ <footer th:replace="fragments/temp_frags.html :: footer"></footer>
+ <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
+ <script type="text/javascript" th:src="@{scripts/gabScripts.js}"></script>
+</body>
+</html>
\ No newline at end of file