lfk/kiosk
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

branding

Browse Source
This commit is contained in:
Philipp Dormann 2023-04-19 12:33:07 +02:00
parent f2d8ab81e9
commit 0a883ce7fb
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
6 changed files with 122 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -59,6 +59,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fontsource/athiti": "^4.5.10",
"@odit/lfk-client-js": "1.0.1", "@odit/lfk-client-js": "1.0.1",
"bwip-js": "3.4.0" "bwip-js": "3.4.0"
}, },

3
pnpm-lock.yaml generated
View File

@ -1,6 +1,9 @@
lockfileVersion: '6.0' lockfileVersion: '6.0'
dependencies: dependencies:
'@fontsource/athiti':
specifier: ^4.5.10
version: 4.5.10
'@odit/lfk-client-js': '@odit/lfk-client-js':
specifier: 1.0.1 specifier: 1.0.1
version: 1.0.1 version: 1.0.1

5
src/app.html
View File

@ -5,6 +5,11 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
<style>
body {
font-family: 'Athiti', sans-serif;
}
</style>
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>

2
src/routes/+layout.svelte
View File

@ -2,6 +2,7 @@
import { OpenAPI } from '@odit/lfk-client-js'; import { OpenAPI } from '@odit/lfk-client-js';
import { env } from '$env/dynamic/public'; import { env } from '$env/dynamic/public';
import '../app.postcss'; import '../app.postcss';
import "@fontsource/athiti"
import Footer from '../components/footer.svelte'; import Footer from '../components/footer.svelte';
OpenAPI.BASE = env.PUBLIC_BASE_URL || 'https://run.lauf-fuer-kaya.de'; OpenAPI.BASE = env.PUBLIC_BASE_URL || 'https://run.lauf-fuer-kaya.de';
@ -11,5 +12,4 @@
<main class="flex-grow"> <main class="flex-grow">
<slot /> <slot />
</main> </main>
<Footer />
</div> </div>

193
src/routes/registration/+page.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js'; import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
import bwipjs from 'bwip-js'; import bwipjs from 'bwip-js';
import lfkbackground from './background.png';
$: firstname = ''; $: firstname = '';
$: lastname = ''; $: lastname = '';
@ -47,35 +48,40 @@
} }
</script> </script>
<div class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16"> <div
class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16"
style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
>
<div class="w-full max-w-md mx-auto p-6"> <div class="w-full max-w-md mx-auto p-6">
<div <!-- <div
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700" class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700"
> > -->
<div class="p-4 sm:p-7"> <div class="p-4 sm:p-7">
<div class="mt-5"> <div class="mt-5">
<!-- Form --> <!-- Form -->
{#if !showResult} {#if !showResult}
<div class="text-center"> <div class="text-center">
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Registrierung</h1> <h1 class="block text-7xl font-bold text-gray-800 dark:text-white">LfK!2023</h1>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> <h1 class="block text-4xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
</div> <!-- <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> -->
<form on:submit|preventDefault={register}> </div>
<div class="grid gap-y-4"> <form class="mt-4 text-lg" on:submit|preventDefault={register}>
<!-- Form Group --> <div class="grid gap-y-4">
<div> <!-- Form Group -->
<label for="firstname" class="block text-sm mb-2 dark:text-white">Vorname</label> <div>
<div class="relative"> <label for="firstname" class="block text-lg font-bold mb-2 sr-only">Vorname</label>
<input <div class="relative">
type="text" <input
id="firstname" type="text"
name="firstname" id="firstname"
class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border" name="firstname"
required class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
bind:value={firstname} required
aria-describedby="firstname-error" placeholder="Vorname"
/> bind:value={firstname}
<!-- <div aria-describedby="firstname-error"
/>
<!-- <div
class:hidden={firstname || firstname.length != 0} class:hidden={firstname || firstname.length != 0}
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3" class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
> >
@ -92,31 +98,32 @@
/> />
</svg> </svg>
</div> --> </div> -->
</div> </div>
<!-- <p <!-- <p
class:hidden={firstname || firstname.length != 0} class:hidden={firstname || firstname.length != 0}
class="text-xs text-red-600 mt-2" class="text-xs text-red-600 mt-2"
id="firstname-error" id="firstname-error"
> >
Bitte gebe deinen Vornamen ein Bitte gebe deinen Vornamen ein
</p> --> </p> -->
</div> </div>
<!-- End Form Group --> <!-- End Form Group -->
<!-- Form Group --> <!-- Form Group -->
<div> <div>
<label for="lastname" class="block text-sm mb-2 dark:text-white">Nachname</label> <label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label>
<div class="relative"> <div class="relative">
<input <input
type="lastname" type="lastname"
id="lastname" id="lastname"
name="lastname" name="lastname"
class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border" class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
required required
aria-describedby="lastname-error" placeholder="Nachname"
bind:value={lastname} aria-describedby="lastname-error"
/> bind:value={lastname}
<!-- <div />
<!-- <div
class:hidden={lastname || lastname.length != 0} class:hidden={lastname || lastname.length != 0}
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3" class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
> >
@ -133,54 +140,78 @@
/> />
</svg> </svg>
</div> --> </div> -->
</div> </div>
<!-- <p <!-- <p
class:hidden={lastname || lastname.length != 0} class:hidden={lastname || lastname.length != 0}
class="text-xs text-red-600 mt-2" class="text-xs text-red-600 mt-2"
id="lastname-error" id="lastname-error"
> >
Bitte gebe deinen Nachnamen ein Bitte gebe deinen Nachnamen ein
</p> --> </p> -->
</div>
<!-- End Form Group -->
<button
type="submit"
disabled={!firstname || !lastname}
class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
>Anmelden</button
>
</div> </div>
</form> <!-- End Form Group -->
<!-- End Form -->
{:else}
<div class="mb-2 text-center">
<h3 class="text-2xl font-semibold dark:text-white">
{response.firstname}
{response.lastname}
</h3>
</div>
<div class="mb-2 text-center">
<img
class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
alt="runner id"
src={textToBase64Barcode(response.id.toString(), false)}
/>
</div>
<div class="mx-auto text-center items-center">
<button <button
on:click={() => { type="submit"
showResult = false; disabled={!firstname || !lastname}
}} class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800"
class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" >Anmelden</button
>Fertig</button
> >
</div> </div>
{/if} </form>
</div> <!-- End Form -->
{:else}
<div class="mb-2 text-center">
<h3 class="text-4xl font-semibold dark:text-white">
{response.firstname}
{response.lastname}
</h3>
</div>
<div class="mb-2 text-center">
<img
class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
alt="runner id"
src={textToBase64Barcode(response.id.toString(), false)}
/>
</div>
<div class="mx-auto text-center items-center">
<button
on:click={() => {
showResult = false;
}}
class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
>Fertig</button
>
</div>
{/if}
</div> </div>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
<div class="fixed bottom-0 w-full text-center text-xl p-4">
<a
rel="noopener noreferrer"
target="_blank"
href="https://lauf-fuer-kaya.de/datenschutz/"
class="underline">Datenschutzerklärung</a
>
|
<a
rel="noopener noreferrer"
target="_blank"
href="https://lauf-fuer-kaya.de/impressum/"
class="underline">Impressum</a
>
<br />
<br />
<b class="font-bold">LfK!2023</b> powered by
<a
rel="noopener noreferrer"
target="_blank"
href="https://odit.services?ref=lfk"
class="underline">ODIT.Services</a
>
</div>

BIN
src/routes/registration/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB