kiosk/src/routes/+layout.svelte

39 lines
1.1 KiB
Svelte

<script>
import { OpenAPI } from '@odit/lfk-client-js';
import '@fontsource/athiti';
import '../app.css';
import { onMount } from 'svelte';
import lfkbackground from './background.png';
OpenAPI.BASE = 'https://run.lauf-fuer-kaya.de';
onMount(() => {
window.addEventListener('keydown', (e) => {
// F1
if (e.keyCode === 112) e.preventDefault();
// F5
if (e.keyCode === 116) e.preventDefault();
});
});
let time = new Date();
$: hours = (time.getHours() + '').padStart(2, '0');
$: minutes = (time.getMinutes() + '').padStart(2, '0');
$: seconds = (time.getSeconds() + '').padStart(2, '0');
setInterval(() => {
time = new Date();
}, 500);
</script>
<div
class="text-neutral-800 flex flex-col h-screen print:h-full select-none"
style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
>
<main class="flex-grow">
<div
class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8 print:hidden"
>
{hours}:{minutes}:{seconds}
</div>
<slot />
</main>
</div>