Tidy general styling and introduce <Welcome /> overlay

src/app.css

@@ -59,7 +59,7 @@
   body {
     background-color: var(--main-bg-color);
     background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));
-    color: var(--main-text-color);
+    color: var(--second-text-color);
     font-family: urwgothic, sans-serif;
     text-align: center;
     padding-bottom: 60px; /*Footer height*/
@@ -67,9 +67,6 @@
   a {
     color: var(--link-color)
   }
-  p {
-    color: var(--second-text-color)
-  }
   button:hover {
     cursor: pointer;
   }

src/lib/islands/island.svelte

@@ -12,6 +12,7 @@ span {
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-weight: 600;
     font-size: 20px;
+    color: var(--main-text-color)
 }
 div {
     width: 85%;

src/lib/islands/overlay-island.svelte

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

src/lib/ldb/alert-bar.svelte

@@ -93,7 +93,7 @@
         background-color: var(--main-alert-color);
         opacity: 0.9;
         width: 100%;
-        max-height: 40%;
+        max-height: 80vh;
         overflow-y: auto;
         overflow-x: clip;
         left: 0;
@@ -104,8 +104,8 @@
         text-align: center;
         width: 80%;
         margin:auto;
-        padding-top: 10px;
+        margin-top: 10px;
-        padding-bottom: 10px;
+        margin-bottom: 10px;
         font-weight: 600;
     }
     .displayAlerts {

src/lib/navigation/header.svelte

@@ -17,6 +17,7 @@
 <style>
 .headerBar {
     background: var(--overlay-color-solid);
+    color: var(--main-text-color);
     position: fixed;
     top: 0; left: 0;
     width: 100%;

src/lib/overlays/welcome.svelte

@@ -0,0 +1,49 @@
+<script>
+    import OverlayIsland from "$lib/islands/overlay-island.svelte";
+
+    const variables = {
+        title: "Welcome to OwlBoard"
+    }
+    const version = "2023.7.1"
+    let pageNum = 0;
+
+    function pageUp() {
+        pageNum ++;
+        console.log(`Welcome page: ${pageNum}`)
+    }
+
+    function pageDn() {
+        pageNum --;
+        console.log(`Welcome page: ${pageNum}`)
+    }
+
+    const pageText = [
+        "<h3>A brand new look</h3>" +
+          "<p>OwlBoard has a brand new look, making it even faster for you to access the data</p>" +
+          "<p>If you have signed up before, you won't have to to it again and any customised Quick Links are here waiting for you</p>",
+        "<h3>Faster Access</h3>" +
+          "<p>Both live station data, and timetable search is available from the homepage.  Making it faster to get the info you need</p>" +
+          "<p>Search the timetable using a headcode to see a trains details - OwlBoard now shows data for all TOCs and FOCs.</p>" +
+          "<p>For GWR services: if a PIS code is available for a service, you'll see it alongside the train details.</p>",
+        "<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>" +
+          "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
+    ]
+</script>
+
+<OverlayIsland {variables}>
+  <h2>What's new in OwlBoard {version}</h2>
+    <div>
+        {@html pageText[pageNum]}
+    </div>
+    <button type="button" on:click={pageDn}>&lt;</button>
+    <button type="button" on:click={pageUp}>&gt;</button>
+</OverlayIsland>
+
+<style>
+    div {
+        color: white;
+    }
+</style>

src/routes/+page.svelte

@@ -3,6 +3,7 @@
     import Nav from '$lib/navigation/nav.svelte'
     import InputIsland from '$lib/islands/input-island-form.svelte'
 	import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
+    import Welcome from '$lib/overlays/welcome.svelte';
 
 const title = "OwlBoard"
 const inputIslands = [
@@ -19,10 +20,14 @@ const inputIslands = [
         queryName: "headcode"
     }
 ]
-const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"}
+
+const isWelcomed = "false"; // Usually a bool - <Welcome /> is incomplete so should be hidden for now.
 
 </script>
 
+{#if !isWelcomed}
+  <Welcome />
+{/if}
 <Header {title} />
 
 {#each inputIslands as variables}

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

@@ -6,38 +6,21 @@
 </script>
  
  <Header {title} />
-<div>
+ <div>
- <p>OwlBoard stores as little data as possible to offer its functions for you to use.
+   <p>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 that we store, please visit <a href="/more/data">My Data</a>.</p>
-    OwlBoard does not use any cookies.  To see the exact data that we store go to <a href="/more/data">My Data</a>.
+   <p>OwlBoard does not utilize any cookies. IP addresses and browser fingerprints are not logged.</p>
- </p>
+   <h2>If You Do Not Sign Up</h2>
- <p>Owlboard does not log IP addresses or browser fingerprints.</p>
+   <p>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 your device.</p>
- <h2>If you do not sign up</h2>
+   <h2>If You Sign Up</h2>
- <p>If you do not sign up, no personal data is processed or stored unless you report an issue.
+   <p>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 settings are stored locally in your browser and do not leave your device.</p>
-    Any personal settings are stored in your browser and do not leave your device.
+   <p>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 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 '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>
+   <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>
- <h2>If you do sign up</h2>
+   <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>If you do sign up for the rail staff version of OwlBoard, then we do need to store some data
+   <h2>Reporting an Issue</h2>
-    but none of it can be used to personally identify you.  Any personal settings are stored in your 
+   <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>
-    browser and do not leave your device.
+   <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>
- </p>
+ </div>
- <p>When you sign up, you will need to provide a work email address which is checked to confirm that 
+ 
-    it originates from a railway company.  You are then sent an email with a registration link, OwlBoard
-    at this point, the username portion of the email address is discarted - for example 'a-user@owlboard.info' 
-    would be stored at 'owlboard.info'.  This host part of your email address is stored so that the data that 
-    is displayed to you can be filtered, showing relevent results more prominently.
- </p>
- <p>The email-server may store the address and message content per it's usual operation and you consent to this 
-    when you sign up.
- </p>
- <p>Alongside the host poriton of your email address, we store a randomly generated UUID which is used to authorize 
-    access to the rail staff data.
- </p>
- <h2>Reporting an Issue</h2>
- <p>When you report an issue, some data is collected - This data is: your browsers User Agent string and the size of the window you 
-    are viewing the website in.</p>
- <p>Any data that is submitted when you report an issue will be publically viewable alongside the 
-    <a href="https://git.fjla.uk/owlboard/backend/issues" target="_blank">OwlBoard/backend git repository</a>.</p>
-</div>
  <Nav />
 
 <style>

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

@@ -64,8 +64,15 @@
       </ul>
   </ul>
   <p>To register, you will need to enter a work email address to receive a confirmation email</p>
-  <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput}><br>
+  <form on:submit={request}>
-  <button type="submit" on:click={request}>Submit</button>
+    <input 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">Privacy Policy</a><br>
+      <input id="checkbox" type="checkbox" required>
+    </label><br>
+    <button type="submit">Submit</button>
+  </form>
+  
 {:else if state == "sent"}
   <p>An email has been sent, click the link in the email to activate your profile.</p>
   <p>When you click the link, your authorisation key will be automatically be stored in your browser.</p>
@@ -98,6 +105,10 @@
         border: none;
         margin-bottom: 20px;
     }
+    #checkbox {
+      height: 30px;
+      width: 30px;
+    }
     button {
         border: none;
         background-color: var(--overlay-color);

src/routes/pis/+page.svelte

@@ -115,6 +115,7 @@
 <style>
     .label {
         font-weight: 600;
+        color: var(--main-text-color);
     }
     input {
         border: none;