owlboard-svelte/src/lib/overlays/welcome.svelte

<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>