103 lines
2.7 KiB
Svelte
103 lines
2.7 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>Sign-up Fixed</h3>' +
|
|
"<p>An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.</p>" +
|
|
'<p>This issue has now been fixed and new users will be able to register for Rail Staff Access</p>',
|
|
'<h3>Always Improving</h3>' +
|
|
'<p>OwlBoard is always improving, the current focus is to improve performance when you have low mobile signal by reducing the amount of data being sent.</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: 75vh;
|
|
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>
|