Frontend: Add more help content

Signed-off-by: Fred Boniface <fred@fjla.uk>

UpNext.md

@@ -9,12 +9,12 @@
 * Enable text search for `locationName` on find-code page.
 * Recreate raster logos with the new vector file.
 * Responsive text sizes for boards.
-* Change dockerfile to deploy with brotli support for faster laoding.
 
 ### In Progress:
 
 ### Completed - Testing:
 
+* Change dockerfile to deploy with brotli support for faster laoding.
 * Implement calling list.
 * Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
 * Frontend Code Refactor

static/help.html

@@ -8,6 +8,7 @@
     <meta name="author" content="Frederick Boniface">
     <meta name="theme-color" content="#155bb7">
     <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
+    <link rel="stylesheet" type="text/css" href="./styles/help.css"/>
     <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
     <link rel="manifest" type="application/json" href="./manifest.json"/>
     <!-- NO SCRIPTS LOADED - NOT REQUIRED AT PRESENT -->
@@ -25,21 +26,61 @@
       <source srcset="/images/logo/logo-full-256.webp" type="image/webp">
       <img class="titleimg" src="/images/logo/logo-full-256.png" alt="OwlBoard Logo">
     </picture>
-      <h2>Help</h2>
+    <h2>Help</h2>
-        <p>OwlBoard gives you quick and easy access to departure boards for 
+      <p>OwlBoard gives you quick and easy access to departure boards for 
          all National Rail stations in the UK.</p>
-        <p>Just type a CRS or TIPLOC into the textbox on the homepage and tap 
+      <p>Just type a CRS, TIPLOC or STANOX into the textbox on the homepage and tap 
-           enter on the screen or your keypad.</p>
+         enter on the screen or your keypad.  You can also select a differnt board type,
-        <p>For example, Portway Park & 
+         more details on your choices below.</p>
-           Ride's CRS is 'PRI', and its TIPLOC is 'PTWYPR'; Portsmouth Harbour's 
+      <p>For example, Portway Park & 
-           CRS is 'PMH', and its TIPLOC is 'PHBR'.</p>
+         Ride's CRS is 'PRI', and its TIPLOC is 'PTWYPR'; Portsmouth Harbour's 
-        <p>A CRS is always three letters, 
+         CRS is 'PMH', and its TIPLOC is 'PHBR'.</p>
-           a TIPLOC can be between 4-7 letters.</p>
+      <p>A CRS is always three letters, 
-        <br>
+         a TIPLOC can be between 4-7 letters.</p>
-        <h3>Don't know the CRS or TIPLOC?</h3>
+      <br>
-        <p>Sorry, you can't search for them on OwlBoard yet but will be able to 
+      <h3>Don't know the CRS or TIPLOC?</h3>
-           in the future.</p>
+        <p>Sorry, you can't search by name but you can use our <a href="find-code.html">
-        <h3>Spotted an issue with the site?</h3>
+           Code Lookup</a> page to help.</p>
+      <h3>Board Types</h3>
+        <h4>Basic Board - Default</h4>
+          <p>The basic board shows the next 10 train arrival and departures, as well as 
+             bus and ferry departures where available.</p>
+          <p>You can tap on a trains origin or destination to see service details.</p>
+      <br>
+      <h3>Glossary</h3>
+        <p>Some of the terms may be new to you or different from those commonly used.</p>
+        <table id="table">
+          <tr>
+            <th>Term</th>
+            <th>Definition</th>
+          </tr>
+          <tr>
+            <td>CAN</td>
+            <td>Cancelled</td>
+          </tr>
+          <tr>
+            <td>CRS</td>
+            <td>Computer Reservation System Code - correctly termed as '3ALPHA'</td>
+          </tr>
+          <tr>
+            <td>NLC</td>
+            <td>National Location Code - Used for finance & accounting</td>
+          </tr>
+          <tr>
+            <td>RT</td>
+            <td>Right rime (On time)</td>
+          </tr>
+          <tr>
+            <td>STANOX</td>
+            <td>Station Number</td>
+          </tr>
+          <tr>
+            <td>TIPLOC</td>
+            <td>Timing Point Location (Name)</td>
+          </tr>
+        </table>
+      <br>
+      <h3>Spotted an issue with the site?</h3>
         <p>Let me know by <a href="./report.html">reporting an issue</a>.</p>
   </body>
 </html>

static/styles/help.css

@@ -0,0 +1,13 @@
+/* Glossary */
+table, th, td {
+    border: 1px solid;
+    border-color: lightgrey;
+    border-collapse: collapse;
+  }
+
+#table {
+    color: lightgrey;
+    width: 80%;
+    max-width: 700px;
+    margin: auto;
+}

static/styles/main.css

@@ -294,6 +294,7 @@ label {
   white-space: nowrap;
   transition: 0.5s;
 }
+
 /* Footer Styles */
 footer {
   background-color: var(--accent-color);