Reformat

.prettierrc

@@ -4,7 +4,7 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "none",
-  "printWidth": 80,
+  "printWidth": 180,
   "plugins": ["prettier-plugin-svelte"],
   "pluginSearchDirs": ["."],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]

src/app.css

@@ -1,32 +1,26 @@
 /* FONTS */
 @font-face {
   font-family: 'firamono';
-  src: url('/font/firamono/firamono-regular.woff2') format('woff2'),
+  src: url('/font/firamono/firamono-regular.woff2') format('woff2'), url('/font/firamono/firamono-regular.woff') format('woff'),
-    url('/font/firamono/firamono-regular.woff') format('woff'),
     url('/font/firamono/firamono-regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'firamono';
-  src: url('/font/firamono/firamono-500.woff2') format('woff2'),
+  src: url('/font/firamono/firamono-500.woff2') format('woff2'), url('/font/firamono/firamono-500.woff') format('woff'), url('/font/firamono/firamono-500.ttf') format('truetype');
-    url('/font/firamono/firamono-500.woff') format('woff'),
-    url('/font/firamono/firamono-500.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: 'urwgothic';
-  src: url('/font/urwgothic/urwgothic.woff2') format('woff2'),
+  src: url('/font/urwgothic/urwgothic.woff2') format('woff2'), url('/font/urwgothic/urwgothic.woff') format('woff'), url('/font/urwgothic/urwgothic.ttf') format('truetype');
-    url('/font/urwgothic/urwgothic.woff') format('woff'),
-    url('/font/urwgothic/urwgothic.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'urwgothic';
-  src: url('/font/urwgothic/urwgothicDemi.woff2') format('woff2'),
+  src: url('/font/urwgothic/urwgothicDemi.woff2') format('woff2'), url('/font/urwgothic/urwgothicDemi.woff') format('woff'),
-    url('/font/urwgothic/urwgothicDemi.woff') format('woff'),
     url('/font/urwgothic/urwgothicDemi.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
@@ -58,10 +52,7 @@ html {
 
 body {
   background-color: var(--main-bg-color);
-  background-image: radial-gradient(
+  background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));
-    var(--second-bg-color),
-    var(--main-bg-color)
-  );
   color: var(--second-text-color);
   font-family: urwgothic, sans-serif;
   text-align: center;

src/lib/islands/input-island-form.svelte

@@ -10,14 +10,7 @@
 
 <Island {variables}>
   <form action={variables.action}>
-    <input
+    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off" />
-      class="form-input"
-      type="text"
-      id="input-headcode"
-      name={variables.queryName}
-      placeholder={variables.placeholder}
-      autocomplete="off"
-    />
     <br />
     <button type="submit">Submit</button>
   </form>
@@ -32,8 +25,7 @@
     border-radius: 50px;
     border: none;
     text-align: center;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     text-transform: uppercase;
     font-size: 15px;
   }
@@ -44,8 +36,7 @@
     border: none;
     border-radius: 20px;
     padding: 5px;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
     background-color: var(--main-bg-color);

src/lib/islands/island.svelte

@@ -9,8 +9,7 @@
 
 <style>
   span {
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-weight: 600;
     font-size: 20px;
     color: var(--main-text-color);

src/lib/islands/overlay-island.svelte

@@ -11,8 +11,7 @@
 
 <style>
   span {
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     color: var(--main-text-color);
     font-weight: 600;
     font-size: 20px;

src/lib/islands/quick-link-island.svelte

@@ -43,8 +43,7 @@
     border: none;
     border-radius: 20px;
     padding: 5px;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
     text-decoration: none;

src/lib/islands/quick-link-set-island.svelte

@@ -92,8 +92,7 @@
     border: none;
     border-radius: 20px;
     padding: 5px;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
     text-decoration: none;
@@ -107,8 +106,7 @@
     border: none;
     border-radius: 20px;
     padding: 5px;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
     background-color: var(--main-bg-color);

src/lib/ldb/alert-bar.svelte

@@ -11,17 +11,7 @@
   }
 
   function numberAsWord(number) {
-    const words = [
+    const words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
-      'zero',
-      'one',
-      'two',
-      'three',
-      'four',
-      'five',
-      'six',
-      'seven',
-      'eight'
-    ];
     let word = words[number];
     if (word) {
       return word;
@@ -45,11 +35,7 @@
   <p id="arrow" class:displayAlerts>V</p>
 </div>
 {#if displayAlerts}
-  <div
+  <div id="alerts" in:fly={{ y: -200, duration: 500 }} out:fly={{ y: -200, duration: 800 }}>
-    id="alerts"
-    in:fly={{ y: -200, duration: 500 }}
-    out:fly={{ y: -200, duration: 800 }}
-  >
     {#each uniqueAlerts as msg}
       <p class="alert">{@html msg}</p>
     {/each}

src/lib/ldb/public-ldb.svelte

@@ -54,9 +54,7 @@
     isLoading = true; // Set loading state
     try {
       console.log(`Requested Station: ${requestedStation}`);
-      const data = await fetch(
+      const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
-        `https://owlboard.info/api/v1/ldb/${requestedStation}`
-      );
       jsonData = await data.json();
     } catch (error) {
       console.error('Error fetching data:', error);
@@ -168,41 +166,25 @@
       </tr>
       {#each services as service}
         <tr>
-          <td
+          <td class="origdest from" on:click={loadService(service.serviceID)} on:keypress={loadService(service.serviceID)}>
-            class="origdest from"
-            on:click={loadService(service.serviceID)}
-            on:keypress={loadService(service.serviceID)}
-          >
             {#if Array.isArray(service.origin?.location)}
-              {service.origin.location[0]['locationName'] +
+              {service.origin.location[0]['locationName'] + ' & ' + service.origin.location[1]['locationName']}
-                ' & ' +
-                service.origin.location[1]['locationName']}
             {:else}
               {service.origin?.location?.locationName || ''}
             {/if}
           </td>
-          <td
+          <td class="origdest to" on:click={loadService(service.serviceID)} on:keypress={loadService(service.serviceID)}>
-            class="origdest to"
-            on:click={loadService(service.serviceID)}
-            on:keypress={loadService(service.serviceID)}
-          >
             {#if Array.isArray(service.destination?.location)}
-              {service.destination.location[0]['locationName'] +
+              {service.destination.location[0]['locationName'] + ' & ' + service.destination.location[0]['locationName']}
-                ' & ' +
-                service.destination.location[0]['locationName']}
             {:else}
               {service.destination?.location?.locationName || ''}
             {/if}
           </td>
           <td class="plat">{service.platform || '-'}</td>
           <td class="time">{parseTime(service.sta).data}</td>
-          <td class="time {parseTime(service.eta).changed}"
+          <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
-            >{parseTime(service.eta).data}</td
-          >
           <td class="time">{parseTime(service.std).data}</td>
-          <td class="time {parseTime(service.etd).changed}"
+          <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
-            >{parseTime(service.etd).data}</td
-          >
         </tr>
 
         <tr
@@ -228,11 +210,7 @@
   {/if}
   {#if busServices.length}
     <br />
-    <img
+    <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
-      class="transport-mode"
-      src="/images/transport-modes/bus.svg"
-      alt="Bus services"
-    /><br />
     <span class="table-head-text">Bus Services</span>
     <table class="ldbTable">
       <tr>
@@ -245,26 +223,14 @@
       </tr>
       {#each busServices as service}
         <tr>
-          <td
+          <td class="origdest from" on:click={loadBusService(service.serviceID)} on:keypress={loadBusService(service.serviceID)}>{service.origin?.location?.locationName || ''}</td>
-            class="origdest from"
+          <td class="origdest to" on:click={loadBusService(service.serviceID)} on:keypress={loadBusService(service.serviceID)}
-            on:click={loadBusService(service.serviceID)}
-            on:keypress={loadBusService(service.serviceID)}
-            >{service.origin?.location?.locationName || ''}</td
-          >
-          <td
-            class="origdest to"
-            on:click={loadBusService(service.serviceID)}
-            on:keypress={loadBusService(service.serviceID)}
             >{service.destination?.location?.locationName || ''}</td
           >
           <td class="time">{parseTime(service.sta).data}</td>
-          <td class="time {parseTime(service.eta).changed}"
+          <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
-            >{parseTime(service.eta).data}</td
-          >
           <td class="time">{parseTime(service.std).data}</td>
-          <td class="time {parseTime(service.etd).changed}"
+          <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
-            >{parseTime(service.etd).data}</td
-          >
         </tr>
 
         <tr
@@ -285,11 +251,7 @@
   {/if}
   {#if ferryServices.length}
     <br />
-    <img
+    <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services" /><br />
-      class="transport-mode"
-      src="/images/transport-modes/ferry.svg"
-      alt="Bus services"
-    /><br />
     <span class="table-head-text">Ferry Services</span>
     <table class="ldbTable">
       <tr>
@@ -302,20 +264,12 @@
       </tr>
       {#each ferryServices as service}
         <tr>
-          <td class="origdest from"
+          <td class="origdest from">{service.origin?.location?.locationName || ''}</td>
-            >{service.origin?.location?.locationName || ''}</td
+          <td class="origdest to">{service.destination?.location?.locationName || ''}</td>
-          >
-          <td class="origdest to"
-            >{service.destination?.location?.locationName || ''}</td
-          >
           <td class="time">{parseTime(service.sta).data}</td>
-          <td class="time {parseTime(service.eta).changed}"
+          <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
-            >{parseTime(service.eta).data}</td
-          >
           <td class="time">{parseTime(service.std).data}</td>
-          <td class="time {parseTime(service.etd).changed}"
+          <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
-            >{parseTime(service.etd).data}</td
-          >
         </tr>
 
         <tr
@@ -352,35 +306,17 @@
               <tr>
                 <td>{prevPoint.locationName}</td>
                 <td>{prevPoint.st}</td>
-                <td
+                <td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td>
-                  class="time {parseTime(prevPoint.at || prevPoint.et).changed}"
-                  >{parseTime(prevPoint.at || prevPoint.et).data}</td
-                >
               </tr>
             {/each}
           {:else}
             <tr>
+              <td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.locationName}</td>
+              <td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.st}</td>
               <td
-                >{serviceDetail.previousCallingPoints.callingPointList
+                class="time {parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et)
-                  .callingPoint.locationName}</td
+                  .changed}"
-              >
+                >{parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).data}</td
-              <td
-                >{serviceDetail.previousCallingPoints.callingPointList
-                  .callingPoint.st}</td
-              >
-              <td
-                class="time {parseTime(
-                  serviceDetail.previousCallingPoints.callingPointList
-                    .callingPoint.at ||
-                    serviceDetail.previousCallingPoints.callingPointList
-                      .callingPoint.et
-                ).changed}"
-                >{parseTime(
-                  serviceDetail.previousCallingPoints.callingPointList
-                    .callingPoint.at ||
-                    serviceDetail.previousCallingPoints.callingPointList
-                      .callingPoint.et
-                ).data}</td
               >
             </tr>
           {/if}
@@ -388,11 +324,7 @@
         <tr class="thisStop">
           <td>{title}</td>
           <td>{serviceDetail.std || serviceDetail.sta}</td>
-          <td
+          <td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td>
-            class="time {parseTime(serviceDetail.etd || serviceDetail.eta)
-              .changed}"
-            >{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td
-          >
         </tr>
         {#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint}
           {#if Array.isArray(serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint)}
@@ -400,30 +332,15 @@
               <tr>
                 <td>{nextPoint.locationName}</td>
                 <td>{nextPoint.st}</td>
-                <td class="time {parseTime(nextPoint.et).changed}"
+                <td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td>
-                  >{parseTime(nextPoint.et).data}</td
-                >
               </tr>
             {/each}
           {:else}
             <tr class="detailRow">
-              <td
+              <td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName}</td>
-                >{serviceDetail.subsequentCallingPoints.callingPointList
+              <td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st}</td>
-                  .callingPoint.locationName}</td
+              <td class="time {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).changed}"
-              >
+                >{parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data}</td
-              <td
-                >{serviceDetail.subsequentCallingPoints.callingPointList
-                  .callingPoint.st}</td
-              >
-              <td
-                class="time {parseTime(
-                  serviceDetail.subsequentCallingPoints.callingPointList
-                    .callingPoint.et
-                ).changed}"
-                >{parseTime(
-                  serviceDetail.subsequentCallingPoints.callingPointList
-                    .callingPoint.et
-                ).data}</td
               >
             </tr>
           {/if}

src/lib/ldb/staff-ldb.svelte

@@ -209,9 +209,7 @@
     let processedMessages = [];
     for (const message of arrMessages) {
       const msgText = message.xhtmlMessage;
-      processedMessages.push(
+      processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
-        msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, '')
-      );
     }
     return processedMessages;
   }
@@ -228,11 +226,7 @@
     <AlertBar {alerts} />
   {/if}
   <table>
-    <tr
+    <tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
-      ><td colspan="8" id="timestamp"
-        >Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td
-      ></tr
-    >
     <tr>
       <th class="id">ID</th>
       <th class="from">From</th>
@@ -254,36 +248,15 @@
              where 'length' is not provided but 'formation' is. -->
         <tr>
           <td class="id id-data data">{service.trainid}</td>
-          <td
+          <td class="from from-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.from}</td>
-            class="from from-data data {serviceStats.isCancelled && 'can-dat'}"
+          <td class="to to-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.to}</td>
-            >{serviceStats.from}</td
+          <td class="plat plat-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
-          >
+          <td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schArr}</td>
-          <td class="to to-data data {serviceStats.isCancelled && 'can-dat'}"
+          <td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
-            >{serviceStats.to}</td
-          >
-          <td
-            class="plat plat-data data {serviceStats.isCancelled &&
-              'can-dat'} {serviceStats.platformHidden && 'hidden'}"
-            >{serviceStats.platform.number || '-'}</td
-          >
-          <td
-            class="time time-data data {serviceStats.isCancelled && 'can-dat'}"
-            >{serviceStats.schArr}</td
-          >
-          <td
-            class="time time-data data {serviceStats.isArrDelayed &&
-              'late'} {serviceStats.isEarlyArr &&
-              'early'} {serviceStats.isLateArr && 'late'}"
             >{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
           >
-          <td
+          <td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
-            class="time time-data data {serviceStats.isCancelled && 'can-dat'}"
+          <td class="time time-data data {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep && 'late'}"
-            >{serviceStats.schDep}</td
-          >
-          <td
-            class="time time-data data {serviceStats.isDepDelayed &&
-              'late'} {serviceStats.isEarlyDep &&
-              'early'} {serviceStats.isLateDep && 'late'}"
             >{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
           >
         </tr>

src/lib/navigation/loading.svelte

@@ -2,11 +2,7 @@
   import { fade } from 'svelte/transition';
 </script>
 
-<div
+<div id="container" in:fade={{ delay: 150, duration: 250 }} out:fade={{ duration: 250 }}>
-  id="container"
-  in:fade={{ delay: 150, duration: 250 }}
-  out:fade={{ duration: 250 }}
->
   <div class="spinner" />
   <p>Loading...</p>
 </div>

src/lib/navigation/nav-ldb.svelte

@@ -11,11 +11,7 @@
 
 <footer>
   {#each links as item}
-    <a
+    <a class="footerLink" href={item.path} class:active={$page.url.pathname == item.path}>
-      class="footerLink"
-      href={item.path}
-      class:active={$page.url.pathname == item.path}
-    >
       <img src={item.svgPath} alt={item.title} />
       <br />
       <span>{item.title}</span>
@@ -26,11 +22,7 @@
       <picture>
         <source srcset="/images/nre/nre-powered_200w.jxl" type="image/jxl" />
         <source srcset="/images/nre/nre-powered_200w.webp" type="image/webp" />
-        <img
+        <img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others" />
-          id="nre-logo"
-          src="/images/nre/nre-powered_200w.png"
-          alt="Data sourced from National Rail and others"
-        />
       </picture>
     </a>
   </div>
@@ -76,11 +68,7 @@
   @media only screen and (min-width: 475px) {
     .data-source {
       background: rgb(255, 255, 255);
-      background: linear-gradient(
+      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);
-        90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 40%
-      );
     }
     #nre-logo {
       position: absolute;

src/lib/overlays/welcome.svelte

@@ -28,8 +28,7 @@
     '<h3>PIS Finder</h3>' +
       "<p>Don't worry, the PIS finder hasn't gone away.  It has even been moved to the new navigation bar for faster access</p>" +
       "<p>If there isn't a PIS code available for a given headcode, you can use this tool to search by start and end stations, enabling you to utilise a different code and skipping stops as needed.</p>",
-    '<h3>Everything Else</h3>' +
+    '<h3>Everything Else</h3>' + "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
-      "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
   ];
 </script>
 

src/lib/stores/quick-links.js

@@ -8,9 +8,7 @@ function fromLocalStorage(storageKey, fallback) {
   if (browser) {
     const storedValue = localStorage.getItem(storageKey);
     if (storedValue !== 'undefined' && storedValue !== null) {
-      return typeof fallback === 'object'
+      return typeof fallback === 'object' ? JSON.parse(storedValue) : storedValue;
-        ? JSON.parse(storedValue)
-        : storedValue;
     }
   }
   return fallback;
@@ -19,8 +17,7 @@ function fromLocalStorage(storageKey, fallback) {
 function toLocalStorage(store, storageKey) {
   if (browser) {
     store.subscribe((value) => {
-      let storageValue =
+      let storageValue = typeof value === 'object' ? JSON.stringify(value) : value;
-        typeof value === 'object' ? JSON.stringify(value) : value;
 
       localStorage.setItem(storageKey, storageValue);
     });

src/lib/train/train-detail.svelte

@@ -13,11 +13,8 @@
 <div class="container">
   <div class="container-header" on:click={expand} on:keypress={expand}>
     <span class="header"
-      >{service.operator || 'GW'}: {service.stops[0]['publicDeparture'] ||
+      >{service.operator || 'GW'}: {service.stops[0]['publicDeparture'] || service.stops[0]['wttDeparture']}
-        service.stops[0]['wttDeparture']}
+      {service.stops[0]['tiploc']} to {service.stops[service['stops'].length - 1]['tiploc']}</span
-      {service.stops[0]['tiploc']} to {service.stops[
-        service['stops'].length - 1
-      ]['tiploc']}</span
     >
     <span id="container-arrow" class:isExpanded>V</span>
   </div>
@@ -27,19 +24,15 @@
         <p class="pis">PIS: {service.pis}</p>
       {/if}
       <p class="svc-detail">
-        Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType ||
+        Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType || 'Bus'}
-          'Bus'}
       </p>
       <p class="svc-detail">
         Days Run: {service.daysRun.join(', ').toUpperCase()}
       </p>
       <p class="svc-detail validity">
-        Valid From: {new Date(service.scheduleStartDate).toLocaleDateString(
+        Valid From: {new Date(service.scheduleStartDate).toLocaleDateString('en-GB', {
-          'en-GB',
-          {
           timeZone: 'UTC'
-          }
+        })} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
-        )} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
           timeZone: 'UTC'
         })}
       </p>

src/routes/+error.svelte

@@ -11,10 +11,7 @@
 
 {#if $page.status === 404}
   <p>This is not the page you're looking for.</p>
-  <p>
+  <p>The page you are looking for doesn't exist, use the tabs below to find another page.</p>
-    The page you are looking for doesn't exist, use the tabs below to find
-    another page.
-  </p>
 {:else if $page.status === 500}
   <p>
     Something went wrong loading the app.<br />
@@ -22,10 +19,7 @@
   </p>
   <p>If the problem persists, you can report an issue from the 'More' menu.</p>
 {:else}
-  <p>
+  <p>Not sure what went wrong, please try again later or report an issue from the 'More' menu.</p>
-    Not sure what went wrong, please try again later or report an issue from the
-    'More' menu.
-  </p>
 {/if}
 
 <Nav />

src/routes/+layout.svelte

@@ -6,10 +6,7 @@
   <meta charset="utf-8" />
   <meta name="application-name" content="OwlBoard" />
   <meta name="author" content="Frederick Boniface" />
-  <meta
+  <meta name="description" content="Live train data, PIS Codes & reference data.  Built by railway staff, for railway staff." />
-    name="description"
-    content="Live train data, PIS Codes & reference data.  Built by railway staff, for railway staff."
-  />
   <meta name="viewport" content="width=device-width" />
   <meta name="theme-color" content="#00b7b7" />
   <link rel="icon" href="/images/icon.svg" type="image/svg+xml" />

src/routes/more/about/+page.svelte

@@ -10,13 +10,8 @@
 <LargeLogo />
 <p class="neg">&copy; 2022-2023 Frederick Boniface</p>
 <p>OwlBoard was created by train-crew for train-crew</p>
-<p>
+<p>I created OwlBoard in 2022 to freely give fast and easy access to the information that we need every day.</p>
-  I created OwlBoard in 2022 to freely give fast and easy access to the
+<p>Data sourced from: National Rail Enquiries, OwlBoard Project and Network Rail.</p>
-  information that we need every day.
-</p>
-<p>
-  Data sourced from: National Rail Enquiries, OwlBoard Project and Network Rail.
-</p>
 <p>
   OwlBoard components are available under various Open Source licenses, see the
   <a href="https://git.fjla.uk/OwlBoard" target="_blank">code repository</a>

src/routes/more/corpus/+page.svelte

@@ -82,46 +82,15 @@
   <form on:submit={submit}>
     <input type="text" readonly placeholder="Name" bind:value={val.name} />
     <br />
-    <input
+    <input type="text" maxlength="3" autocomplete="off" placeholder="CRS/3ALPHA" bind:value={val.crs} />
-      type="text"
-      maxlength="3"
-      autocomplete="off"
-      placeholder="CRS/3ALPHA"
-      bind:value={val.crs}
-    />
     <br />
-    <input
+    <input type="text" maxlength="7" autocomplete="off" placeholder="TIPLOC" bind:value={val.tiploc} />
-      type="text"
-      maxlength="7"
-      autocomplete="off"
-      placeholder="TIPLOC"
-      bind:value={val.tiploc}
-    />
     <br />
-    <input
+    <input type="text" maxlength="10" autocomplete="off" placeholder="STANOX" bind:value={val.stanox} />
-      type="text"
-      maxlength="10"
-      autocomplete="off"
-      placeholder="STANOX"
-      bind:value={val.stanox}
-    />
     <br />
-    <input
+    <input type="number" maxlength="6" min="0" autocomplete="off" placeholder="NLC" bind:value={val.nlc} />
-      type="number"
-      maxlength="6"
-      min="0"
-      autocomplete="off"
-      placeholder="NLC"
-      bind:value={val.nlc}
-    />
     <br />
-    <input
+    <input type="text" readonly autocomplete="off" placeholder="UIC" bind:value={val.uic} />
-      type="text"
-      readonly
-      autocomplete="off"
-      placeholder="UIC"
-      bind:value={val.uic}
-    />
     <br />
     <button type="submit">Submit</button>
     <button type="reset" on:click={reset}>Reset</button>

src/routes/more/data/+page.svelte

@@ -35,17 +35,9 @@
 
 <Header {title} />
 
-<p>
+<p>OwlBoard stores as little data about you as possible to offer the service.</p>
-  OwlBoard stores as little data about you as possible to offer the service.
+<p>Your randomly generated UUID is not displayed, this is stored in your browser and on the OwlBoard server.</p>
-</p>
+<p>The data below is the entirity of the data we hold about you and constitutes a response to a `Subject Access Request` under GDPR legislation.</p>
-<p>
-  Your randomly generated UUID is not displayed, this is stored in your browser
-  and on the OwlBoard server.
-</p>
-<p>
-  The data below is the entirity of the data we hold about you and constitutes a
-  response to a `Subject Access Request` under GDPR legislation.
-</p>
 <br /><br />
 
 {#if isLoading}
@@ -54,9 +46,7 @@
   <p class="api_response">Registration Domain: {data[0]['domain']}</p>
   <p class="api_response">Access Time: {data[0]['atime']}</p>
 {:else}
-  <p class="api_response">
+  <p class="api_response">You are not registered, we don't have any data stored.</p>
-    You are not registered, we don't have any data stored.
-  </p>
 {/if}
 
 <Nav />

src/routes/more/privacy/+page.svelte

@@ -7,57 +7,32 @@
 <Header {title} />
 <div>
   <p>
-    OwlBoard stores the minimum amount of data necessary to provide its
+    OwlBoard stores the minimum amount of data necessary to provide its functions for your use. No personal data is stored unless you report an issue. To review the specific data
-    functions for your use. No personal data is stored unless you report an
+    that we store, please visit <a href="/more/data">My Data</a>.
-    issue. To review the specific data that we store, please visit <a
-      href="/more/data">My Data</a
-    >.
-  </p>
-  <p>
-    OwlBoard does not utilize any cookies. IP addresses and browser fingerprints
-    are not logged.
   </p>
+  <p>OwlBoard does not utilize any cookies. IP addresses and browser fingerprints are not logged.</p>
   <h2>If You Do Not Sign Up</h2>
   <p>
-    If you choose not to sign up, no personal data will be processed or stored
+    If you choose not to sign up, no personal data will be processed or stored unless you report an issue. Any personal settings are stored locally in your browser and do not leave
-    unless you report an issue. Any personal settings are stored locally in your
+    your device.
-    browser and do not leave your device.
   </p>
   <h2>If You Sign Up</h2>
   <p>
-    If you sign up for the rail staff version of OwlBoard, we do require the
+    If you sign up for the rail staff version of OwlBoard, we do require the storage of some data. However, none of this data can be used to personally identify you. Any personal
-    storage of some data. However, none of this data can be used to personally
+    settings are stored locally in your browser and do not leave your device.
-    identify you. Any personal settings are stored locally in your browser and
-    do not leave your device.
   </p>
   <p>
-    During the sign-up process, you will be asked to provide a work email
+    During the sign-up process, you will be asked to provide a work email address, which will be checked to confirm its origin from a railway company. Once confirmed, an email
-    address, which will be checked to confirm its origin from a railway company.
+    containing a registration link will be sent to you. At this point, the username portion of your email address is discarded. For example, if your email address is
-    Once confirmed, an email containing a registration link will be sent to you.
+    'a-user@owlboard.info', only 'owlboard.info' will be stored. This host portion of your email address is stored to filter and display relevant results prominently.
-    At this point, the username portion of your email address is discarded. For
-    example, if your email address is 'a-user@owlboard.info', only
-    'owlboard.info' will be stored. This host portion of your email address is
-    stored to filter and display relevant results prominently.
-  </p>
-  <p>
-    The email server may store the address and message content as part of its
-    regular operation, and your consent to this is implied when you sign up.
-  </p>
-  <p>
-    In addition to the host portion of your email address, a randomly generated
-    UUID is stored for the purpose of authorizing access to the rail staff data.
   </p>
+  <p>The email server may store the address and message content as part of its regular operation, and your consent to this is implied when you sign up.</p>
+  <p>In addition to the host portion of your email address, a randomly generated UUID is stored for the purpose of authorizing access to the rail staff data.</p>
   <h2>Reporting an Issue</h2>
+  <p>When you report an issue, certain data is collected, including your browser's User Agent string and the size of the window in which you are viewing the website.</p>
   <p>
-    When you report an issue, certain data is collected, including your
+    Any data submitted when reporting an issue will be publicly viewable alongside the <a href="https://git.fjla.uk/owlboard/backend/issues" target="_blank"
-    browser's User Agent string and the size of the window in which you are
+      >OwlBoard/backend git repository</a
-    viewing the website.
-  </p>
-  <p>
-    Any data submitted when reporting an issue will be publicly viewable
-    alongside the <a
-      href="https://git.fjla.uk/owlboard/backend/issues"
-      target="_blank">OwlBoard/backend git repository</a
     >.
   </p>
 </div>

src/routes/more/reasons/+page.svelte

@@ -64,18 +64,9 @@
 </script>
 
 <Header {title} />
-<p>
+<p>A reason code is a three digit number that maps to a reason for a delay or cancellation</p>
-  A reason code is a three digit number that maps to a reason for a delay or
-  cancellation
-</p>
 <form on:submit={handleSubmit}>
-  <input
+  <input type="text" placeholder="Enter Code" autocomplete="off" bind:value={inputValue} on:input={handleInput} />
-    type="text"
-    placeholder="Enter Code"
-    autocomplete="off"
-    bind:value={inputValue}
-    on:input={handleInput}
-  />
 
   <br />
 
@@ -105,8 +96,7 @@
     border-radius: 50px;
     border: none;
     text-align: center;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     text-transform: uppercase;
     font-size: 15px;
   }
@@ -118,8 +108,7 @@
     border: none;
     border-radius: 20px;
     padding: 5px;
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 16px;
     font-weight: 400;
     background-color: var(--overlay-color);

src/routes/more/reg/+page.svelte

@@ -62,47 +62,23 @@
       <li>Display up to 40 services</li>
     </ul>
   </ul>
-  <p>
+  <p>To register, you will need to enter a work email address to receive a confirmation email</p>
-    To register, you will need to enter a work email address to receive a
-    confirmation email
-  </p>
   <form on:submit={request}>
-    <input
+    <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
-      type="text"
-      autocomplete="email"
-      placeholder="Enter work email"
-      bind:value={inputValue}
-      on:input={handleInput}
-    /><br />
     <label for="checkbox">
-      I have read and accept the terms of the <a href="/more/privacy"
+      I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
-        >Privacy Policy</a
-      ><br />
       <input id="checkbox" type="checkbox" required />
     </label><br />
     <button type="submit">Submit</button>
   </form>
 {:else if state == 'sent'}
-  <p>
+  <p>An email has been sent, click the link in the email to activate your profile.</p>
-    An email has been sent, click the link in the email to activate your
+  <p>When you click the link, your authorisation key will be automatically be stored in your browser.</p>
-    profile.
+  <p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p>
-  </p>
-  <p>
-    When you click the link, your authorisation key will be automatically be
-    stored in your browser.
-  </p>
-  <p>
-    If you use multiple browsers, you will only be logged in using the browser
-    you open the link with.
-  </p>
   <p>You will be able to register again using the same email address</p>
 {:else if state == 'unauth'}
-  <p>
+  <p>The email address you entered does not belong to an authorised business.</p>
-    The email address you entered does not belong to an authorised business.
+  <p>If you think this is an error, you can report an issue in the 'More' menu.</p>
-  </p>
-  <p>
-    If you think this is an error, you can report an issue in the 'More' menu.
-  </p>
 {:else if state == 'error'}
   <p>There was an error processing your request.</p>
   <p>Check that the email you entered was correct or try again later.</p>
@@ -120,8 +96,7 @@
     height: 40px;
     width: 80%;
     max-width: 375px;
-    font-family: urwgothic, 'Franklin Gothic Medium', 'Arial Narrow', Arial,
+    font-family: urwgothic, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-      sans-serif;
     text-align: center;
     font-size: 20px;
     border-radius: 50px;

src/routes/more/report/+page.svelte

@@ -88,20 +88,11 @@
 {#if !preFlight && !isDone}
   <p>
     Any data that you enter here will be visible publicly
-    <a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank"
+    <a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank">here</a>
-      >here</a
-    >
-  </p>
-  <p>
-    You will be shown all of the collected data before the form is submitted.
   </p>
+  <p>You will be shown all of the collected data before the form is submitted.</p>
   <form on:submit={submit}>
-    <select
+    <select class="formInputs" name="type" bind:value={reportType} placeholder="Choose Category">
-      class="formInputs"
-      name="type"
-      bind:value={reportType}
-      placeholder="Choose Category"
-    >
       <option value="" disabled selected>Choose an Issue Type</option>
       <option value="bug">Problem</option>
       <option value="enhancement">Feature Request</option>
@@ -109,18 +100,9 @@
       <option value="user-support">Unable to sign up</option>
     </select>
     <br />
-    <input
+    <input class="formInputs" type="text" bind:value={reportSubject} placeholder="Subject" />
-      class="formInputs"
-      type="text"
-      bind:value={reportSubject}
-      placeholder="Subject"
-    />
     <br />
-    <textarea
+    <textarea class="formInputs" bind:value={reportMsg} placeholder="Enter your message..." />
-      class="formInputs"
-      bind:value={reportMsg}
-      placeholder="Enter your message..."
-    />
     <br />
     <button type="submit">Submit</button>
     <button type="reset">Reset</button>

src/routes/pis/+page.svelte

@@ -96,33 +96,15 @@
   <p>This feature is only supported for GWR West & Sleeper services</p>
   <p class="label">Find By Start/End CRS:</p>
   <form on:submit={findByStartEnd}>
-    <input
+    <input type="text" maxlength="3" autocomplete="off" placeholder="Start" bind:value={entryStartCRS} />
-      type="text"
+    <input type="text" maxlength="3" autocomplete="off" placeholder="End" bind:value={entryEndCRS} />
-      maxlength="3"
-      autocomplete="off"
-      placeholder="Start"
-      bind:value={entryStartCRS}
-    />
-    <input
-      type="text"
-      maxlength="3"
-      autocomplete="off"
-      placeholder="End"
-      bind:value={entryEndCRS}
-    />
     <br />
     <button type="submit">Search</button>
   </form>
 
   <p class="label">Find By PIS Code:</p>
   <form on:submit={findByPis}>
-    <input
+    <input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />
-      type="number"
-      max="9999"
-      autocomplete="off"
-      placeholder="PIS"
-      bind:value={entryPIS}
-    />
     <br />
     <button type="submit">Search</button>
   </form>