Skip to content
Snippets Groups Projects
Commit cc3107a0 authored by Rhys Nute's avatar Rhys Nute
Browse files

Merge branch... 

Merge branch '44-as-a-user-i-want-to-be-able-to-have-the-homepage-being-very-intuitive-and-easy-to-navigate' into 'main'

Resolve "As a user I want  to be able to have the homepage being very intuitive and easy to navigate"

Closes #44

See merge request !17
parents da39e39e d41d0e7d
No related branches found
No related tags found
1 merge request!17Resolve "As a user I want to be able to have the homepage being very intuitive and easy to navigate"
Hide whitespace changes
Inline Side-by-side
Showing
with 247 additions and 50 deletions
src/main/java/Team5/SmartTowns/Landmarks/LandmarksController.java
+ 1
− 1
View file @ cc3107a0
......@@ -36,7 +36,7 @@ public class LandmarksController {
// current functionality only prints successful Landmarks, (todo )database integration is necessary here
ModelAndView modelAndView = new ModelAndView("redirect:/test.html");
ModelAndView modelAndView = new ModelAndView("redirect:/allTrails");
return modelAndView;
}
......
src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+ 1
− 1
View file @ cc3107a0
......@@ -29,7 +29,7 @@ public class WebpageController {
@GetMapping("/home")
public ModelAndView getHome(){
ModelAndView modelAndView = new ModelAndView("home");
ModelAndView modelAndView = new ModelAndView("towns/home/homePage");
return modelAndView;
}
......
src/main/resources/static/css/homePageStyle.css 0 → 100644
+ 124
− 0
View file @ cc3107a0
body{
background-color: rgb(41, 41, 41)
}
#homeTitle{
grid-area: pageTitle;
color: whitesmoke;
}
.submitLand{
grid-area: submitButton;
}
.caerphillyBanner , .riscaBanner,.penarthBanner{
margin-top: 20px;
background-color: darkslategrey;
margin-bottom: 20px;
border: solid 2px whitesmoke;
/*border colour here at .banner and .bannertrail*/
border-right: none;
}
.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
background-color: darkslategrey;
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
border-left: none;
text-align: center;
}
.penarthBannerTrail{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%);
}
.caerphillyBannerTrail{
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
border-left: none;
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
}
.caerphillyBanner{
grid-area:townBannerC;
background-image: url('/images/CaerphillyCastle.jpg');
/*// from cadw*/
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 35%;
color: inherit;
text-decoration: none;
/*filter: grayscale(30%);*/
}
/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
.riscaBanner {
/* #caerUrl{*/
grid-area: townBannerR;
background-image: url('/images/RiscaBanner.jpg');
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 65%;
color: inherit;
text-decoration: none;
}
.penarthBanner {
grid-area: townBannerP;
background-image: url('/images/PenarthBanner.jpg');
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 78%;
color: inherit;
text-decoration: none;
}
.caerphillyBannerTrail{
grid-area:townBannerDetsC;
}
.riscaBanner{
grid-area:townBannerR;
}
.riscaBannerTrail{
grid-area:townBannerDetsR;
}
.penarthBanner{
grid-area:townBannerP;
}
.penarthBannerTrail{
grid-area:townBannerDetsP;
}
#aboutUsFlavour{
grid-area: textFlavour;
margin-top: 25px;
margin-bottom: 15px;
color: whitesmoke;
}
#trailCountCaer,#trailCountRisca,#trailCountPenarth{
flex:1;
/*align-items: center;*/
/*justify-content: center;*/
}
#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
flex:2;
align-content: center;
}
.gridContainer1{
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". pageTitle pageTitle pageTitle pageTitle ."
". . . submitButton submitButton ."
". townBannerC townBannerC townBannerDetsC . ."
". townBannerR townBannerR townBannerDetsR . ."
". townBannerP townBannerP townBannerDetsP . ."
" . . textFlavour . . .";
}
src/main/resources/static/css/style.css
+ 7
− 0
View file @ cc3107a0
......@@ -3,6 +3,13 @@
padding: 0;
margin: 0;
}
#homeHead{
color: inherit;
text-decoration: none;
padding: 0;
margin: 0;}
.center {
text-align: center;
}
......
src/main/resources/static/css/templatingstyle.css
+ 19
− 4
View file @ cc3107a0
......@@ -20,11 +20,17 @@
display: flex;
margin-left: 100px;
}
.navBar a {
border-left: 2px rgb(185, 185, 185) solid;
padding: 10px 40px;
/*border-left: 2px rgb(185, 185, 185) solid;*/
/*padding: 10px 40px;*/
padding-left:5px ;padding-right: 5px;
text-decoration: none;
color:rgb(87, 86, 86);
/*color:rgb(87, 86, 86);*/
/*// original color*/
color:white;
white-space: nowrap;
overflow: hidden;
float: right;
......@@ -90,4 +96,13 @@ footer {
.rightFooter{
flex:1;
color: rgb(255, 255, 255);
}
\ No newline at end of file
}
/*CHANGES*/
.headerBar, .footerBar{
margin:0px;
padding: 0px;
width: 100%;
}
src/main/resources/static/images/CaerphillyCastle.jpg 0 → 100644
+ 0
− 0
View file @ cc3107a0
src/main/resources/static/images/CaerphillyCastle.jpg

351 KiB

src/main/resources/static/images/PenarthBanner.jpg 0 → 100644
+ 0
− 0
View file @ cc3107a0
src/main/resources/static/images/PenarthBanner.jpg

263 KiB

src/main/resources/static/images/RiscaBanner.jpg 0 → 100644
+ 0
− 0
View file @ cc3107a0
src/main/resources/static/images/RiscaBanner.jpg

110 KiB

src/main/resources/templates/towns/Templating.html
+ 21
− 39
View file @ cc3107a0
<!--<<<<<<< HEAD-->
<!--<header th:fragment="headerBlock">-->
<!-- <br>Header Block<br>-->
<!--</header>-->
<!--<footer th:fragment="footerBlock">-->
<!-- <br><b>VZTA</b><br>-->
<!-- <br>Near Me Now LTD<br>-->
<!-- <br>Britania House<br>-->
<!-- <br>Caerphilly Business Park<br>-->
<!-- <br>Caerphilly<br>-->
<!-- <br>CF83 3GG<br>-->
<!-- <br>(C) VZTA 2022<br>-->
<!-- <br><b>Follow Us</b><br>-->
<!-- <br>Facebook Twitter Instagram LinkedIn<br>-->
<!-- <br>Privacy Policy Terms and Conditions<br>-->
<!--</footer>-->
<!--=======-->
<link rel="stylesheet" href="../../static/css/templatingstyle.css">
<header class="headerBar" th:fragment="header">
<div class="Logo">
<img src="../../static/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
</div>
<nav class="navBar">
<ul>
<li>Home</li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
<label class="work">Who we Work with:</label>
<select>
<div class="Logo">
<img src="/images/VZTA.png" height="97" width="400" alt="VZTA Logo"/>
</div>
<nav class="navBar">
<ul>
<option value="localauthorities">Local Authorities</option>
<option value="towns">Towns</option>
<option value="businesses">Businesses</option>
<option value="consumers">Consumers</option>
<li><a id="homeHead" href="/home">Home</a></li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
</select>
</nav>
<label class="work">Who we Work with:</label>
<select>
<ul>
<option value="localauthorities">Local Authorities</option>
<option value="towns">Towns</option>
<option value="businesses">Businesses</option>
<option value="consumers">Consumers</option>
</ul>
</select>
</nav>
</header>
<div class="footerBar" th:fragment="footer">
......@@ -59,10 +41,10 @@
<div class="centerFooter">
<span class="footerText">
<h3>Follow Us</h3>
<a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
<a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="../../static/images/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
<a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="../../static/images/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
<a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="../../static/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
<a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
<a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="/images/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
<a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="/images/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
<a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
</span>
</div>
<div class="copyright" style="text-align: left">
......
src/main/resources/templates/towns/caerphilly.html
+ 5
− 2
View file @ cc3107a0
<!DOCTYPE html>
<html lang="en">
<style>
*{
body{
background-color: #36454F;
color: white;
}
......@@ -103,7 +103,7 @@
}
.landmarkTitle{
grid-area:landmarkTitle
grid-area:landmarkTitle;
}
.container{
display:grid;
......@@ -168,8 +168,10 @@
<head>
<meta charset="UTF-8">
<title>Caerphilly</title>
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="container">
<h1 class="townName"> Welcome to the town of Caerphilly.</h1>
......@@ -213,6 +215,7 @@
</div>
</main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
</html>
\ No newline at end of file
src/main/resources/templates/towns/home/homePage.html 0 → 100644
+ 66
− 0
View file @ cc3107a0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<a href="/allTrails" class="caerphillyBanner">
<H2> Caerphilly</H2></a>
<div class="caerphillyBannerTrail">
<div id="trailCountCaer">Trails: 3</div>
<div id="trailProgressCaer">70%</div>
</div>
<a href="/allTrails" class="riscaBanner">
<H2> Risca</H2> </a>
<div class="riscaBannerTrail">
<div id="trailCountRisca">Trails: 2</div>
<div id="trailProgressRisca">0%</div>
</div>
<a href="/allTrails" class="penarthBanner">
<H2> Penarth</H2> </a>
<div class="penarthBannerTrail">
<div id="trailCountPenarth">Trails: 5</div>
<div id="trailProgressPenarth">60%</div>
</div>
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</div>
</div>
</main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
</html>
src/main/resources/templates/towns/caerleon.html → src/main/resources/templates/towns/penarth.html
+ 3
− 3
View file @ cc3107a0
......@@ -2,15 +2,15 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Caerleon</title>
<title>Penarth</title>
</head>
<body>
<div>
<h1> Welcome to the town of Caerleon.</h1>
<h1> Welcome to the town of Penarth.</h1>
</div>
<div>
<h2>Explore trails around Caerleon</h2>
<h2>Explore trails around Penarth</h2>
<ul>
<li href="">Welsh History</li>
<li>Super</li>
......
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