110 lines
3.3 KiB
Svelte
110 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { welcome } from '$lib/stores/welcome';
|
|
import { fade } from 'svelte/transition';
|
|
import { version } from '$lib/stores/version';
|
|
|
|
let pageNum: number = 0;
|
|
|
|
function pageUp() {
|
|
pageNum++;
|
|
console.log(`Welcome page: ${pageNum}`);
|
|
}
|
|
|
|
function pageDn() {
|
|
pageNum--;
|
|
console.log(`Welcome page: ${pageNum}`);
|
|
}
|
|
|
|
function close() {
|
|
welcome.set(version);
|
|
}
|
|
|
|
const pageText: string[] = [
|
|
'<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}><</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}>></button>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
#popup {
|
|
position: fixed;
|
|
top: 50px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 85%;
|
|
height: 85vh;
|
|
max-height: 600px;
|
|
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>
|