src/main/java/Team5/SmartTowns/rewards/Sticker.java

+/*AUTHOR: Gabriel Copat*/
+package Team5.SmartTowns.rewards;
+
+import lombok.Data;
+
+import java.io.File;
+import java.util.Objects;
+
+@Data
+public class Sticker {
+    /* Stickers are trade-able rewards, they vary in rarity and are earned at random */
+
+    int id;
+    String name;
+    String description;
+    String imgPath;
+    int rarity; //1-5
+    boolean hasSticker;
+
+    public Sticker(int id, String name, String description, int rarity) {
+        this.id = id;
+        this.name = name;
+        this.description = description;
+        this.rarity = rarity;
+        imgPath = findImagePath();
+    }
+
+    private String findImagePath(){
+        /* Finds the image in the Path folder, if image is not found assigns default image */
+        String imgPath = "images/rewards/stickers/" + id + ".jpg";
+        String notFoundPath = "images/rewards/stickers/0.png";
+
+        File imgFile = new File("src/main/resources/static/" + imgPath);
+        return imgFile.exists() ? imgPath : notFoundPath;
+    }
+
+    public boolean hasSticker(){
+        return hasSticker;
+    }
+    public void setVisibility(boolean hasSticker){
+        this.hasSticker = hasSticker;
+    }
+    public String getVisibility(){
+        return hasSticker? "" : "grayedOut";
+    }
+
+
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (o == null || getClass() != o.getClass()) return false;
+        Sticker sticker = (Sticker) o;
+        return id == sticker.id && Objects.equals(name, sticker.name);
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(id, name);
+    }
+}
+

src/main/java/Team5/SmartTowns/rewards/StickersRepository.java

+//Holds locations data repository
+package Team5.SmartTowns.rewards;
+
+import java.util.List;
+
+public interface StickersRepository {
+    List<Sticker> getAllStickers();
+}
+

src/main/java/Team5/SmartTowns/rewards/StickersRepositoryJDBC.java

+//Implements the locations repository using JDBC
+package Team5.SmartTowns.rewards;
+
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public class StickersRepositoryJDBC implements StickersRepository {
+    private JdbcTemplate jdbc;
+    private RowMapper<Sticker> stickerMapper;
+
+    public StickersRepositoryJDBC(JdbcTemplate aJdbc) {
+        this.jdbc = aJdbc;
+        setStickerMapper();
+    }
+    private void setStickerMapper(){
+        stickerMapper = (rs, i) -> new Sticker(
+                rs.getInt("stickerID"),
+                rs.getString("name"),
+                rs.getString("description"),
+                rs.getInt("rarity")
+        );
+    }
+
+    @Override
+    public List<Sticker> getAllStickers(){
+        String sql= "SELECT * FROM stickers";
+        return jdbc.query(sql, stickerMapper);
+    }
+}

src/main/java/Team5/SmartTowns/trails/Trail.java

@@ -14,6 +14,7 @@ public class Trail {
             new Trail(4,"Trail4", "This is trail four"),
             new Trail(5,"A Dragon's Tale", "EDITING THIS")
     );
+
     int id;
     String name;
     String description;

src/main/java/Team5/SmartTowns/trails/TrailsController.java

@@ -13,7 +13,7 @@ import org.springframework.web.servlet.ModelAndView;
 import java.util.ArrayList;
 import java.util.List;
 
-import static Team5.SmartTowns.Landmarks.Landmarks.landmarksDragonstrail;
+import static Team5.SmartTowns.Landmarks.Landmarks.getLandmarksDragonstrail;
 
 @Controller
 public class TrailsController {
@@ -40,11 +40,21 @@ public class TrailsController {
 
     @GetMapping("/dragonstale")
     public ModelAndView getDragonsTale(){
-        List<Landmarks> landmarksList = landmarksDragonstrail;
+        List<Landmarks> landmarksList = getLandmarksDragonstrail();
+        Landmarks landmarks = new Landmarks();
+        int listSize = landmarksList.size();
         ModelAndView modelAndView = new ModelAndView("towns/trails/dragonstale/index");
         modelAndView.addObject("landmarksList", landmarksList);
+        modelAndView.addObject("getListSize", listSize);
         return modelAndView;
     }
 
+//    @GetMapping("/dragonstale/{landmarks}")
+//    public ModelAndView getDragonstaleLandmarks(){
+//        ModelAndView modelAndView = new ModelAndView();
+//        modelAndView.addObject()
+//    }
+
+
 }
 

src/main/java/Team5/SmartTowns/users/User.java

+package Team5.SmartTowns.users;
+
+import Team5.SmartTowns.rewards.Badge;
+import Team5.SmartTowns.rewards.Sticker;
+import lombok.Data;
+
+import java.io.File;
+import java.util.HashMap;
+import java.util.Map;
+
+@Data
+public class User {
+
+    int id;
+    String email; //Validation would be done by email, since they will have that
+    String name;
+    String imgPath;
+    int dragonProgress;
+
+    Map<Badge, Integer> badgeProgress = new HashMap<>(); // Demonstrates the progress towards a specific badge (0-100)
+    Map<Sticker, Boolean> hasStickers = new HashMap<>(); // True if User has sticker (key)
+
+    public User(int id, String email, String name, int dragonProgress) {
+        this.id = id;
+        this.email = email;
+        this.name = name;
+        this.dragonProgress = dragonProgress;
+        imgPath = findImagePath();
+    }
+
+
+    private String findImagePath(){
+        /* Finds the image in the Path folder, if image is not found assigns default image */
+        String imgPath = "images/users/" + id + ".jpg";
+        String notFoundPath = "../images/users/0.png";
+
+        File imgFile = new File("src/main/resources/static/" + imgPath);
+        return imgFile.exists() ? "../" + imgPath : notFoundPath;
+    }
+}

src/main/java/Team5/SmartTowns/users/UserController.java

+package Team5.SmartTowns.users;
+
+
+import Team5.SmartTowns.rewards.Badge;
+import Team5.SmartTowns.rewards.BadgesRepository;
+import Team5.SmartTowns.rewards.Sticker;
+import Team5.SmartTowns.rewards.StickersRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.List;
+import java.util.Map;
+
+@Controller
+public class UserController {
+
+    @Autowired
+    private UserRepository userRepository;
+    @Autowired
+    private BadgesRepository badgesRepository;
+    @Autowired
+    private StickersRepository stickersRepository;
+
+    @GetMapping("/login")
+    public ModelAndView getLoginPage() {
+        ModelAndView mav = new ModelAndView("rewards/login");
+//        List<User> users = userRepository.getAllUsers();
+//        mav.addObject("users", users);
+        return mav;
+    }
+
+    @GetMapping("/userList")
+    public ModelAndView userList() {
+        ModelAndView mav = new ModelAndView("towns/userData");
+        List<User> users = userRepository.getAllUsers();
+        mav.addObject("users", users);
+        return mav;
+    }
+
+    @GetMapping("/user/{id}")
+    public ModelAndView getUserPage(@PathVariable int id) {
+        ModelAndView mav = new ModelAndView("rewards/userProfile");
+        List<Badge> badges = badgesRepository.getAllBadges(); /*DEPRECATED FOR THE MOMENT*/
+        mav.addObject("badges", badges);
+        List<Sticker> allStickers = stickersRepository.getAllStickers();
+        List<User> users = userRepository.getAllUsers();
+        Map<Long, Boolean> userStickers = userRepository.getStickers(id);
+
+        for (Long stickerID : userStickers.keySet()) { //Finds and updates visibility of stickers based on what the user has
+            allStickers.stream()
+                    .filter(sticker -> sticker.getId()==stickerID)
+                    .findFirst().ifPresent(sticker -> sticker.setVisibility(userStickers.get(stickerID)));
+        }
+
+        mav.addObject("user", userRepository.getUser(id));
+        mav.addObject("stickers", allStickers);
+        return mav;
+    }
+}

src/main/java/Team5/SmartTowns/users/UserRepository.java

+//Holds users data repository
+package Team5.SmartTowns.users;
+
+import java.util.List;
+import java.util.Map;
+
+public interface UserRepository {
+    List<User> getAllUsers();
+//    Map<Long, Integer> getBadgeProgress(int id);
+    Map<Long, Boolean> getStickers(int id);
+    User getUser(int id);
+}

src/main/java/Team5/SmartTowns/users/UserRepositoryJDBC.java

+//Implements the users repository using JDBC
+package Team5.SmartTowns.users;
+
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+import org.springframework.stereotype.Repository;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@Repository
+public class UserRepositoryJDBC implements UserRepository{
+
+    private JdbcTemplate jdbc;
+    private RowMapper<User> userMapper;
+
+    public UserRepositoryJDBC(JdbcTemplate aJdbc){
+        this.jdbc = aJdbc;
+        setUserMapper();
+    }
+
+
+    private void setUserMapper(){
+        userMapper = (rs, i) -> new User(
+                rs.getInt("userID"),
+                rs.getString("email"),
+                rs.getString("name"),
+                rs.getInt("dragonProgress")
+        );
+    }
+
+    @Override
+    public List<User> getAllUsers(){
+        String sql= "SELECT * FROM users";
+        return jdbc.query(sql, userMapper);
+    }
+
+    @Override
+    public User getUser(int id){
+        String sql= "SELECT * FROM users WHERE userID="+id;
+        List<User> result = jdbc.query(sql, userMapper);
+        return result.get(0);
+    }
+
+    @Override
+    public Map<Long, Boolean> getStickers(int id){
+        String sql = "SELECT stickerID, hasSticker FROM stickerprogress WHERE userID=" + id;
+        List<Map<String, Object>> query = jdbc.queryForList(sql);
+        Map<Long, Boolean> progress = new HashMap<>();
+        for (Map<String, Object> result : query) {
+            progress.put((Long)result.get("stickerID"), (boolean)result.get("hasSticker"));
+        }
+        return progress;
+    }
+
+
+//    @Override
+//    public Map<Long, Integer> getBadgeProgress(int id){
+//        String sql = "SELECT badgeID, progress FROM badgeprogress WHERE userID=" + id;
+//        List<Map<String, Object>> query = jdbc.queryForList(sql);
+//        Map<Long, Integer> progress = new HashMap<>();
+//        for (Map<String, Object> result : query) {
+//            progress.put((Long)result.get("badgeID"), (int)result.get("progress"));
+//        }
+//        return progress;
+//    }
+}

src/main/resources/templates/towns/trails/welshhistory/welshhistory.html → src/main/resources/QRCodeScanner.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>The Roman Empire</title>
+    <title>QR Camera</title>
 </head>
 <body>
 

src/main/resources/application.properties

+spring.datasource.url=jdbc:mariadb://localhost:3306/towns
+spring.datasource.username=root
+spring.datasource.password=comsc
 
+spring.sql.init.mode=always

src/main/resources/data.sql

+delete from users;
+insert into users (email, name, dragonProgress) value ('hannah@gmail.com', 'Hannah', '90');
+insert into users (userID, email, name, dragonProgress) value ('2', 'nigel@gmail.com', 'Nigel', '40');
+
+delete from trails;
+insert into trails ( Name) value ( 'Caerphilly Coffee Trail');
+insert into trails ( Name) value ( 'Penarth Dragon Trail');
+
+delete from locations;
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'St Cenydd','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Castle','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Medieval Trades','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Queen''s War','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Green Lady','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Armoury','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Architecture','','Location description here','Caerphilly',0101);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( '21st Century Landmark','','Location description here','Caerphilly',0101);
+
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'JD Wetherspoons-Malcolm Uphill','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Cwtch','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Conservative Club','','Location description here','Caerphilly',0102);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The King''s Arms','','Location description here','Caerphilly',0102);
+
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Caerphilly Bus Station','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'The Medieval Courthouse','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ('Caerphilly Castle','','Location description here','Caerphilly',0103);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Ty Vaughan House','','Location description here','Caerphilly',0103);
+
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Risca Colliery','','Location description here','Risca',0201);
+insert into locations ( locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value ( 'Black Vein Colliery Disaster','','Location description here','Risca',0201);
+
+
+insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (19, 'The Esplanade','','Location description here','Penarth',0301);
+insert into locations (locationID, locationName , locationEmail,locationDescription,locationPlace, locationTrailID) value (20, 'The Old Swimming Baths','','Location description here','Penarth',0301);
+delete from badges;
+insert into badges (name, description, difficulty) value ('TownConnoisseur', 'You know the town very well!', '2');
+insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
+insert into badges (name, description, difficulty) value ('TownMaster', 'You visited the town 7 days in a row!', '1');
+insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
+insert into badges (name, description, difficulty) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
+
+delete from stickers;
+insert into stickers (name, description, rarity) value ('TownConnoisseur', 'You know the town very well!', '2');
+insert into stickers (name, description, rarity) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
+insert into stickers (name, description, rarity) value ('TownMaster', 'You visited the town 7 days in a row!', '1');
+insert into stickers (name, description, rarity) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
+insert into stickers (name, description, rarity) value ('TownRegular', 'You visited the town 3 days in a row!', '1');
+
+delete from badgeprogress;
+insert into badgeprogress (userID, badgeID, progress) value ('1', '1', '40');
+insert into badgeprogress (userID, badgeID, progress) value ('1', '2', '70');
+insert into badgeprogress (userID, badgeID, progress) value ('2', '2', '70');
+
+delete from stickerprogress;
+insert into stickerprogress (userID, stickerID, hasSticker) value ('1', '1', true);
+insert into stickerprogress (userID, stickerID, hasSticker) value ('1', '3', true);
+insert into stickerprogress (userID, stickerID, hasSticker) value ('2', '2', true);
\ No newline at end of file

src/main/resources/schema.sql

+drop table if exists trails;
+create table if not exists trails
+(
+    trailID bigint auto_increment primary key,
+    name varchar(128)
+)   engine=InnoDB;
+
+drop table if exists locations;
+
+create table if not exists locations
+(
+    locationID bigint auto_increment primary key,
+    locationName varchar(128),
+    locationEmail varchar(128),
+    locationDescription longtext,
+    locationPlace varchar(255),
+    locationTrailID varchar(128)
+)   engine=InnoDB;
+
+drop table if exists users;
+create table if not exists users
+(
+    userID bigint auto_increment primary key,
+    email varchar(128),
+    name varchar(128),
+    dragonProgress int
+) engine=InnoDB;
+
+drop table if exists badges;
+create table if not exists badges
+(
+    badgeID bigint auto_increment primary key,
+    name varchar(128),
+    description varchar(128),
+    difficulty bigint
+) engine=InnoDB;
+
+drop table if exists stickers;
+create table if not exists stickers
+(
+    stickerID bigint auto_increment primary key,
+    name varchar(128),
+    description varchar(128),
+    rarity bigint
+) engine=InnoDB;
+
+drop table if exists badgeProgress;
+create table if not exists badgeProgress
+(
+    userID bigint,
+    badgeID bigint,
+    progress int /*0-100*/
+) engine=InnoDB;
+
+create table if not exists stickerProgress
+(
+    userID bigint,
+    stickerID bigint,
+    hasSticker boolean /*Has sticker or not*/
+) engine=InnoDB;
\ No newline at end of file

src/main/resources/static/css/dragonstaless.css

@@ -8,10 +8,19 @@
     background-color: #927BB7;
 }
 
-#homeimg.centre{
-    box-shadow: 100px -100px purple;
+.landmarkName{
+    font-weight: bold;
+    text-align: left;
+}
+
+.landmarkDesc{
+    font-style: italic;
+    text-align: left;
 }
 
 body{
-    background-color: #927BB7;
+    background-color: #E8A87C;
 }
+
+
+

src/main/resources/static/css/homePageStyle.css

+
 body{
     background-color: rgb(41, 41, 41)
 }
@@ -8,99 +9,134 @@ body{
 .submitLand{
     grid-area: submitButton;
 }
-.caerphillyBanner , .riscaBanner,.penarthBanner{
+.Banner {
     margin-top: 20px;
     background-color: darkslategrey;
     margin-bottom: 20px;
-    border: solid 2px whitesmoke;
+    /*border: solid 2px whitesmoke;*/
     /*border colour here at .banner and .bannertrail*/
     border-right: none;
 }
-.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
-    background-color: darkslategrey;
+
+/* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
+.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
     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%);
+.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
+    grid-area:townBannerDetsR
 }
 
-.caerphillyBannerTrail{
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: solid 2px whitesmoke;
-    border-left: none;
-    background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
+.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
+    grid-area:townBannerDets;
 }
 
-.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%);*/
+.BannerTrail {
+    background-color: darkslategrey;
+
 }
 
-/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
+.BannerTrail.Complete {
+    background-color: gold;
+    border: 2px solid gold;
+    border-left: solid 2px whitesmoke;
+}
+.BannerTrail.closeComplete {
+    background-color: darkgoldenrod;
+    background-color: darkgoldenrod;
+    border: 2px solid darkgoldenrod;
+    border-left: solid 2px whitesmoke;
+}
 
-.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;
+.BannerTrail.nearComplete {
+    background-color: deepskyblue;
+    background-color: deepskyblue;
+    border: 2px solid deepskyblue;
+    border-left: solid 2px whitesmoke;
 }
 
-.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;
+.BannerTrail.farComplete {
+    background-color: green;
+    background-color: green;
+    border: 2px solid green;
+    border-left: solid 2px whitesmoke;
+}
+
+.BannerTrail.notComplete {
+    background-color: red;
+    background-color: red;
+    border: 2px solid red;
+    border-left: solid 2px whitesmoke;
 }
-.caerphillyBannerTrail{
-    grid-area:townBannerDetsC;
+
+/*Below selects banner that has the Complete class to change color*/
+.Banner:has(+.BannerTrail.Complete){
+    border: 2px solid gold;
+    border-right: solid 2px whitesmoke;
 }
-.riscaBanner{
-    grid-area:townBannerR;
+
+.Banner:has(+.BannerTrail.closeComplete){
+    border: 2px solid darkgoldenrod;
+    border-right: solid 2px whitesmoke;
 }
-.riscaBannerTrail{
-    grid-area:townBannerDetsR;
+
+
+.Banner:has(+.BannerTrail.nearComplete){
+    border: 2px solid deepskyblue;
+    border-right: solid 2px whitesmoke;
 }
-.penarthBanner{
-    grid-area:townBannerP;
+.Banner:has(+.BannerTrail.farComplete){
+    border: 2px solid green;
+    border-right: solid 2px whitesmoke;
 }
-.penarthBannerTrail{
-    grid-area:townBannerDetsP;
+.Banner:has(+.BannerTrail.notComplete){
+    border: 2px solid red;
+    border-right: solid 2px whitesmoke;
 }
+
+
+.BannerTrail {
+    background-color: darkslategrey;
+
+}
+
+
+
+
+
+
+.Banner {
+    grid-area:townBanner;
+    color: inherit;
+    text-decoration: none;
+    background-color: hotpink;
+}
+
+
+a{
+    background-size: contain;
+
+}
+
+
+
 #aboutUsFlavour{
     grid-area: textFlavour;
     margin-top: 25px;
     margin-bottom: 15px;
     color: whitesmoke;
 }
-#trailCountCaer,#trailCountRisca,#trailCountPenarth{
+#trailCount{
     flex:1;
 
 
-    /*align-items: center;*/
-    /*justify-content: center;*/
+
 
 }
-#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
+#trailProgress{
     flex:2;
     align-content: center;
 
@@ -113,12 +149,24 @@ body{
     grid-template-rows: auto;
     grid-template-areas:
             ". pageTitle pageTitle pageTitle pageTitle ."
-            ". . . submitButton submitButton ."
-            ". townBannerC townBannerC townBannerDetsC . ."
-            ". townBannerR townBannerR townBannerDetsR . ."
-            ". townBannerP townBannerP townBannerDetsP . ."
-            " . . textFlavour . . .";
+            ". . . submitButton submitButton .";
+}
+
+.gridContainer2 {
+    display:grid;
+    grid-template-columns: 10% 10% 60% 5% 5% 10%;
+    grid-template-rows: auto;
+    grid-template-areas:
+
+            ". townBanner townBanner townBannerDets . .";
 }
 
+.gridContainer3 {
+    display:grid;
+    grid-template-columns: 10% 10% 60% 5% 5% 10%;
+    grid-template-rows: auto;
+    grid-template-areas:
 
+            " . . textFlavour . . .";
+}
 

src/main/resources/static/css/style.css

@@ -183,6 +183,7 @@ main .badgesBlock{
 }
 
 footer {
+    z-index: 99;
     bottom: 0%;
     left: 0%;
     position: fixed;

src/main/resources/static/css/userProfile.css

+/* AUTHOR: Gabriel Copat*/
+@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
+
+/*COLOUR PALETTE*/
+* {
+    --main-colour: #e47201;
+    --secondary-colour: #e47201;
+    --accent-colour: #e47201;
+    --accent-border: #b25901;
+
+    --accent-shadow: rgba(0, 0, 0, 0.7) 0 0.5em 1em -0.5em;
+}
+
+
+/*FONTS, TYPOGRAPHY & BACKGROUNDS*/
+* {
+    margin: 0;
+    padding: 0;
+
+    & h1, & h2 {
+        letter-spacing: 0.25vw;
+        line-height: 1.3;
+        text-align: center;
+        color: white;
+        text-justify: inter-word;
+    }
+    & label {
+        color: white;
+    }
+
+}
+@media only screen and (max-device-width: 500px) {
+    /*ADJUSTING FOR SMALLER SCREENS*/
+    * {
+        & h1, & h2 { text-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1svh;}
+        & p { line-height: 1.1; color: white;}
+    }
+}
+
+body {
+    background: linear-gradient(135deg, #f7e8fd, #9914d1);
+    height: 100svh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+main {
+    background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
+    border-radius: 1vw;
+    margin-inline: 5%;
+    /*margin-block: 5%;*/
+    width: auto;
+    padding-block: 2svh;
+    margin-top: 6em;
+    padding-inline: 1vw;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+
+
+}
+.userInfo {
+    display: flex;
+    flex-direction: column;
+    /*padding: min(2vw, 4em);*/
+    text-align: center;
+
+    & #userPicture {
+        width: min(30vw, 30em);
+        margin-inline: auto;
+        border-radius: 100%;
+        border: solid #a2a2a2 4px;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+    }
+
+    & h1 {
+        font-size: max(5vw, 2em);
+        margin: 1svh 25%;
+        color:white;
+        border-bottom: #36454F solid 2px;
+        border-radius: 5vw;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
+    }
+}
+#badgesBar::-webkit-scrollbar {
+    display: none;
+    -ms-scrollbar-darkshadow-color: transparent;
+}
+#badgesBar {
+    display: grid;
+    grid-template-areas:
+        "header"
+        "badges";
+    overflow-x: scroll;
+    overflow-y: hidden;
+    color: white;
+    padding-bottom: 2%;
+    @media only screen and (min-device-width: 501px) {
+        height: 24vw;
+    }
+    & h2 {
+        position: absolute;
+        grid-area: header;
+        margin-inline: 5vw;
+        padding-inline: 2vw;
+        margin-block: -1svh;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
+        border-bottom: #36454F solid 2px;
+        font-size: 4vw;
+        width: 7em;
+        height: 1.2em;
+
+    }
+    & #allBadgesContainer {
+        margin-top: 3svh;
+        grid-area: badges;
+        height: 10svh;
+        align-content: center;
+        display: flex;
+        @media only screen and (min-device-width: 501px) {
+            height: 20vw;
+            margin-top: 6vw;
+        }
+    }
+    & .badgeImg {
+        margin-inline: 3vw;
+        height: 8svh;
+        z-index: 50;
+        @media only screen and (min-device-width: 501px) {
+            height: 15vw;
+        }
+        transition: 0.3s ease-out 100ms;
+    }
+    & .badgeImg:hover {
+        /*box-shadow: 0 0 20px 10px #bbbb00;*/
+        transform: scale(1.5,1.5);
+
+    }
+}
+
+#stickersBox {
+    padding-top: 5%;
+    display: flex;
+    flex-direction: column;
+    /* border-bottom-left-radius: 2vw; */
+    /* border-bottom-right-radius: 2vw; */
+    /*background: linear-gradient(to bottom, darkgoldenrod, transparent 90%);*/
+    margin-top: -1%;
+    & h2 {
+        font-size: 4em;
+        text-align: center;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
+        border-bottom: #36454F solid 2px;
+        margin-block: 1svh;
+        margin-inline: 25%;
+    }
+    & .stickersContainer {
+        margin-block: 1svh;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        width: 100%;
+
+        & .stickerImg {
+            width: 20vw;
+            margin-block: 1em;
+
+        }
+    }
+}
+.locked {
+    filter: grayscale(100%);
+}
+
+.dragonProgression {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    height: 16svh;
+    box-sizing: content-box;
+    /*background: linear-gradient(to bottom, transparent -50%, darkgoldenrod 50%);*/
+    width: 100%;
+    /*padding-top: 1svh;*/
+
+    @media only screen and (min-device-width: 501px) {
+        height: 28vw;
+        margin-bottom: 0;
+        padding-bottom: 5svh;
+    }
+    & h1 {
+        font-size: 3em;
+        font-family: 'MedievalSharp', cursive;
+        letter-spacing: 1vw;
+        box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
+        border-bottom: #36454F solid 2px;
+        border-top: #36454F solid 2px;
+        margin-inline: 15%;
+        margin-bottom: 1%;
+    }
+    & .dragonContainer {
+        position: relative;
+        margin: auto;
+    }
+    & .dragonImg {
+        height: 10svh;
+        width: 16svh;
+        @media only screen and (min-device-width: 501px) {
+            height: 22vw;
+            width: 30vw;
+        }
+
+    }
+    & .dragonFill {
+        position: absolute;
+        overflow: hidden;
+        width: 40%;
+    }
+    & .dragonOut {
+        /*position: absolute;*/
+        overflow: hidden;
+    }
+}
+header {
+    z-index: 99;
+    top: 0.5svh;
+    left: 0;
+    position: fixed;
+    width: 100vw;
+    justify-content: center;
+    display: flex;
+}
+header .footerBar {
+    display: flex;
+    list-style: none;
+    border-radius: 1vw;
+    overflow: hidden;
+    justify-content: space-evenly;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+header .footerButton {
+    padding: 1vw;
+    text-align: center;
+    /*flex: 1 1;*/
+    color:crimson;
+    background-color: rgba(31, 31, 31, 0.7);
+    font-size: 2.5em;
+    width: 15vw;
+}
+header .footerButton:hover {
+    background-color: #36454F;
+}
+
+.grayedOut {
+    filter: grayscale(1);
+}
+
+.solidBg {
+    background: #1e1e1e;
+    display: flex;
+}
+.loginWrapper {
+    margin-inline: auto;
+    margin-block: 5svh;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    background: rgba(196, 92, 239, 0.75);
+    padding: 2em;
+    flex: 0 0;
+    border-radius: 1vw;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+    & h2 {
+        margin-left: 0;
+        margin-right: auto;
+        margin-bottom: 0.5em;
+    }
+    & form{
+        margin-block: auto;
+        font-size: 3em;
+        display: flex;
+        flex-direction: column;
+    }
+    & label {
+        position: relative;
+        margin-top: 1em;
+        /*width: fit-content;*/
+        font-size: 0.8em;
+        & b {
+            float: left;
+        }
+        & a {
+            position: absolute;
+            font-size: 0.4em;
+            right: 0.2em;
+            bottom: 0.2em;
+            height: fit-content;
+        }
+
+    }
+    & input {
+        font-size: 0.6em;
+        height: 1.5em;
+        width: 40vw;
+        border-radius: 0.2em;
+        padding-inline: 0.4em;
+        border: transparent solid 0.1em;
+        margin-bottom: 1em;
+    }
+    & button {
+        font-size: 1em;
+        height: 2em;
+        width: 4em;
+        box-shadow: var(--accent-shadow);
+        margin:auto;
+        margin-top: 1em;
+        background-color: var(--accent-colour);
+        border: 0.1em solid var(--accent-border);
+        border-radius: 1em;
+        color: white;
+
+    }
+    & button:hover{
+        background-color: var(--accent-border);
+        border: 0.1em solid var(--accent-colour);
+    }
+}
+.label {
+    position: relative;
+}
+.invalid-tooltip {
+    color: red;
+    width: fit-content;
+    opacity: 0;
+    font-size: 0.6em;
+    text-shadow: red 0 0.2em 1em;
+    transition: 0.3s ease-in-out 1ms;
+    padding:0.1em;
+    position: absolute;
+    right: 0.2em;
+    bottom: 0.2em;
+    height: fit-content;
+}
+.invalid-field {
+    box-shadow: red 0 0 1em;
+    transition: 0.3s ease-in-out 1ms;
+}
+.valid-field {
+    box-shadow: #40ff00 0 0 1em;
+    border: #40ff00 solid 0.1em;
+    transition: 0.3s ease-in-out 1ms;
+}
+
+
+#invalidLogin {
+    color: red;
+    text-shadow: black 0 0.1em 0.2em;
+    width: auto;
+    height: auto;
+    font-size: 0.6em;
+    opacity: 0;
+    transition: 0.5s ease-in-out 1ms;
+}
\ No newline at end of file