refactor: improve map routing, refine login UI styling, update footer credits, add George Inn data, and enhance particle background rendering.

Author: lukepring

app/views/layout.pug

@@ -43,7 +43,7 @@ html
 
     block footer
       footer
-        p © 2026 TapThat
+        p © 2026 TapThat - Created by Luke Pring, Jack Turner, Alec Thompson, and Victor Tepeniuc - University of Roehampton London - #[a(href="https://github.com/jackoturner/SoftwareEngineeringModuleCoursework" target="_blank") View Project on GitHub]
 
     script(src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js")
     script(src="/static/bubbles.js")
@@ -102,6 +102,7 @@ html
     script.
       function showLoginModal() {
         document.getElementById('loginModal').classList.add('show');
+        setTimeout(() => window.dispatchEvent(new Event('resize')), 50);
       }
 
       document.addEventListener('DOMContentLoaded', () => {

schema.sql

@@ -135,7 +135,8 @@ INSERT INTO pubs VALUES
 (47,'The Seven Stars','53-54 Carey Street','WC2A 2JB',51.51620000,-0.11320000,'Tiny historic legal quarter pub',NOW()),
 (48,'The Ship & Shovell','1-3 Craven Passage','WC2N 5PH',51.50790000,-0.12450000,'Unique split pub near Charing Cross',NOW()),
 (49,'The White Cross','1 Water Lane','TW9 1TH',51.46080000,-0.30720000,'Riverside Richmond pub',NOW()),
-(50,'The Trafalgar Tavern','Park Row','SE10 9NW',51.48230000,-0.00680000,'Grand Greenwich riverside pub',NOW());
+(50,'The Trafalgar Tavern','Park Row','SE10 9NW',51.48230000,-0.00680000,'Grand Greenwich riverside pub',NOW()),
+(51,'The George Inn','High Street, Robertsbridge','TN32 5AW',50.98595400,0.48202100,'Historic inn in Robertsbridge, East Sussex',NOW());
 
 -- BEERS DATA
 INSERT INTO beers VALUES
@@ -206,7 +207,8 @@ INSERT INTO pub_beers (pub_id, beer_id, is_available) VALUES
 (47,13,1),(47,3,1),(47,11,1),(47,5,1),(47,14,1),(47,8,1),(47,9,1),
 (48,12,1),(48,7,1),(48,9,1),(48,1,1),(48,2,1),(48,11,1),
 (49,15,1),(49,12,1),(49,3,1),(49,9,1),(49,1,1),(49,6,1),
-(50,10,1),(50,9,1),(50,3,1),(50,7,1),(50,13,1),(50,1,1),(50,5,1),(50,6,1),(50,12,1),(50,15,1);
+(50,10,1),(50,9,1),(50,3,1),(50,7,1),(50,13,1),(50,1,1),(50,5,1),(50,6,1),(50,12,1),(50,15,1),
+(51,1,1),(51,2,1),(51,5,1),(51,12,1),(51,13,1);
 
 -- REVIEWS DATA
 INSERT INTO reviews (user_id,pub_id,beer_id,rating,ai_pour_score,comment) VALUES
@@ -299,4 +301,5 @@ INSERT INTO reviews (user_id,pub_id,beer_id,rating,ai_pour_score,comment) VALUES
 (7,49,5,5,4.7,'Riverside Richmond'),
 (8,49,3,4,4.4,'White Cross views'),
 (9,50,7,5,4.9,'Trafalgar Tavern grand'),
-(10,50,1,4,4.3,'Greenwich riverside perfect');
+(10,50,1,4,4.3,'Greenwich riverside perfect'),
+(2,51,5,5,5.00,'Wonderful service from Ethan Pring');

static/bubbles.js

@@ -1,15 +1,17 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     if (typeof particlesJS !== "function") return;
-    const heroes = document.querySelectorAll('section.beer-hero, .beer-hero');
+    const heroes = document.querySelectorAll('section.beer-hero, .beer-hero, #loginModal');
     heroes.forEach((hero, index) => {
         const id = 'particles-hero-' + index;
         const div = document.createElement('div');
         div.id = id;
         div.className = 'particles-bg';
-        
+
         // Setup hero for absolute positioning of the canvas
-        hero.style.position = 'relative';
-        
+        if (window.getComputedStyle(hero).position === 'static') {
+            hero.style.position = 'relative';
+        }
+
         // zIndex 1 for children so they sit on top of the canvas
         Array.from(hero.children).forEach(child => {
             child.style.position = 'relative';

static/maps.js

@@ -297,6 +297,15 @@ function showRoute(userLat, userLng, pub) {
       L.latLng(userLat, userLng),
       L.latLng(pub.latitude, pub.longitude)
     ],
-    routeWhileDragging: false
+    routeWhileDragging: false,
+    fitSelectedRoutes: false // Disable the default fit so we can do it manually with padding
   }).addTo(map);
+
+  routingControl.on('routesfound', function (e) {
+    const routes = e.routes;
+    if (routes && routes.length > 0) {
+      const bounds = L.latLngBounds(routes[0].coordinates);
+      map.fitBounds(bounds, { padding: [50, 50] });
+    }
+  });
 }

static/styles.css

@@ -831,17 +831,26 @@ body.login-page {
   z-index: 2;
   background: #ffffff;
   padding: 40px;
-  border-radius: 20px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border-radius: 12px;
+  box-shadow: 0 15px 35px rgba(184, 115, 51, 0.15);
   width: 100%;
   max-width: 400px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(184, 115, 51, 0.1);
 }
 
+.login-container .close-btn {
+  color: #888 !important;
+  z-index: 10;
+}
 
+.login-container .close-btn:hover {
+  color: #333 !important;
+}
 
-.login-title {
-  color: #2c2c2c;
+.modal-content h2.login-title {
+  color: #B87333;
+  background: transparent;
+  padding: 0;
   text-align: center;
   margin-bottom: 30px;
   font-size: 2.8rem;
@@ -850,7 +859,6 @@ body.login-page {
   font-style: italic;
 }
 
-
 .login-form {
   width: 100%;
   margin: 0 auto;
@@ -861,13 +869,14 @@ body.login-page {
 
 .form-group {
   margin-bottom: 24px;
+  width: 100%;
 }
 
 .form-label {
   display: block;
-  color: #16183a;
+  color: #2c2c2c;
   margin-bottom: 8px;
-  font-weight: 500;
+  font-weight: 600;
   text-align: left;
 }
 
@@ -876,17 +885,18 @@ body.login-page {
   padding: 12px 16px;
   border: 1px solid #ddd;
   border-radius: 8px;
-  background: white;
+  background: #fdfdfd;
   font-size: 1rem;
   color: #333;
   transition: all 0.2s ease;
+  box-sizing: border-box;
 }
 
-
 .form-input:focus {
   outline: none;
   background: #fff;
-  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.5);
+  border-color: #B87333;
+  box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.2);
 }
 
 .login-button {
@@ -904,7 +914,7 @@ body.login-page {
 }
 
 .login-button:hover {
-  background: #ff9800;
+  background: #a0632b;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(184, 115, 51, 0.3);
 }