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

<script>
  import { welcome } from '$lib/stores/welcome';
  import { fade } from 'svelte/transition';
  import { version } from '$lib/stores/version';

  const variables = {
    title: 'Welcome to OwlBoard'
  };
  let pageNum = 0;

  function pageUp() {
    pageNum++;
    console.log(`Welcome page: ${pageNum}`);
  }

  function pageDn() {
    pageNum--;
    console.log(`Welcome page: ${pageNum}`);
  }

  function close() {
    welcome.set(version);
  }

  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 - you won't have to register again.</p>" +
      "<p><strong>Live station data</strong> is still available right from the homepage.  If you are signed up, you'll get improved data from the <strong>Staff board</strong>.  Bus and Ferry services are still included</p>" +
      '<p><strong>Train Data & PIS</strong> is now available right from the homepage if you are searching by headcode, for other PIS searches, the PIS finder is in the bottom menu</p>',
    '<h3>Staff Station Boards</h3>' +
      '<p>If you are registered, staff station boards will be available.</p>' +
      '<p>Staff boards will show hidden platform numbers as well as ECS moves</p>' +
      '<p>You can also tap on a train to see live train data.</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." +
      '<br>' +
      "<p>You will only see this welcome page again when there are new updates</p>"
  ];
</script>

<div id="popup" in:fade={{ delay: 500, duration: 300 }} out:fade={{ duration: 300 }}>
  <h2>What's new in OwlBoard {version}</h2>
  {#key pageNum}
    <div in:fade={{ delay: 300 }} out:fade={{ duration: 200 }}>
      {@html pageText[pageNum] || "You won't see this welcome message again"}
    </div>
  {/key}
  {#if pageNum >= pageText.length - 1}
    <button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonCentre" type="button" on:click={close}>X</button>
  {/if}
  {#if pageNum > 0 && pageNum < pageText.length}
    <button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonLeft" type="button" on:click={pageDn}>&lt;</button>
  {/if}
  {#if pageNum < pageText.length - 1}
    <button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonRight" type="button" on:click={pageUp}>&gt;</button>
  {/if}
</div>

<style>
  #popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 85%;
    height: 85vh;
    overflow-y: auto;
    max-width: 400px;
    margin: auto;
    margin-top: 25px;
    padding: 10px;
    background-color: grey;
    border-radius: 10px;
    z-index: 2500;
  }

  .navButton {
    border-radius: 50px;
    border: none;
    color: white;
    background-color: var(--overlay-color);
    width: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: 600;
    bottom: 50px;
  }

  #buttonLeft {
    position: absolute;
    margin: auto;
    left: 50px;
  }

  #buttonCentre {
    position: absolute;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  #buttonRight {
    position: absolute;
    margin: auto;
    right: 50px;
  }

  div {
    color: white;
  }
</style>