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

Compare commits

base: lfk:0.2.0
Branches Tags
lfk:main lfk:rebuild
lfk:1.2.6 lfk:1.2.5 lfk:1.2.4 lfk:1.2.3 lfk:1.2.2 lfk:1.2.1 lfk:1.2.0 lfk:1.1.4 lfk:1.1.3 lfk:1.1.2 lfk:1.1.1 lfk:1.1.0 lfk:1.0.0 lfk:0.6.0 lfk:0.5.0 lfk:0.4.4 lfk:0.4.3 lfk:0.4.2 lfk:0.4.1 lfk:0.4.0 lfk:0.3.0 lfk:0.2.0 lfk:0.1.0
...
compare: lfk:0a883ce7fbd3defccbe7be70ce6affcab281c9c5
Branches Tags
lfk:main lfk:rebuild
lfk:1.2.6 lfk:1.2.5 lfk:1.2.4 lfk:1.2.3 lfk:1.2.2 lfk:1.2.1 lfk:1.2.0 lfk:1.1.4 lfk:1.1.3 lfk:1.1.2 lfk:1.1.1 lfk:1.1.0 lfk:1.0.0 lfk:0.6.0 lfk:0.5.0 lfk:0.4.4 lfk:0.4.3 lfk:0.4.2 lfk:0.4.1 lfk:0.4.0 lfk:0.3.0 lfk:0.2.0 lfk:0.1.0

3 Commits
0.2.0 ... 0a883ce7fb

Author SHA1 Message Date
Philipp Dormann
0a883ce7fb branding 2023-04-19 12:33:07 +02:00
Philipp Dormann
f2d8ab81e9 🚀Bumped version to 0.3.0
All checks were successful
continuous-integration/drone/push Build is passing
Details
2023-04-19 12:16:08 +02:00
Philipp Dormann
c546a96c4d feat(registration): drop privacy checkbox [privacy is linked on page]
All checks were successful
continuous-integration/drone/push Build is passing
Details
2023-04-19 12:15:34 +02:00
7 changed files with 130 additions and 113 deletions
Expand all files Collapse all files

7
CHANGELOG.md
View File

@@ -2,9 +2,16 @@
All notable changes to this project will be documented in this file. Dates are displayed in UTC. All notable changes to this project will be documented in this file. Dates are displayed in UTC.
#### [0.3.0](https://git.odit.services/lfk/kiosk/compare/0.2.0...0.3.0)
- feat(registration): drop privacy checkbox [privacy is linked on page] [`c546a96`](https://git.odit.services/lfk/kiosk/commit/c546a96c4d959b41181c34d6affccafdf84a221a)
#### [0.2.0](https://git.odit.services/lfk/kiosk/compare/0.1.0...0.2.0) #### [0.2.0](https://git.odit.services/lfk/kiosk/compare/0.1.0...0.2.0)
> 19 April 2023
- feat(registration): cleanup finished page [`898d359`](https://git.odit.services/lfk/kiosk/commit/898d3595a032c87615e1825d0023299b029fc19e) - feat(registration): cleanup finished page [`898d359`](https://git.odit.services/lfk/kiosk/commit/898d3595a032c87615e1825d0023299b029fc19e)
- 🚀Bumped version to 0.2.0 [`c82fdf3`](https://git.odit.services/lfk/kiosk/commit/c82fdf3823acf0ea49f0218ba57805e5d15fae97)
#### 0.1.0 #### 0.1.0

3
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@lfk/kiosk", "name": "@lfk/kiosk",
"version": "0.2.0", "version": "0.3.0",
"private": false, "private": false,
"license": "MIT", "license": "MIT",
"repository": "https://git.odit.services/lfk/kiosk", "repository": "https://git.odit.services/lfk/kiosk",
@@ -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>

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

@@ -1,10 +1,10 @@
<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 = '';
$: accepted = false;
$: showResult = false; $: showResult = false;
$: showError = false; $: showError = false;
@@ -27,7 +27,6 @@
} }
firstname = ''; firstname = '';
lastname = ''; lastname = '';
accepted = false;
} }
function textToBase64Barcode(text: string, is_qrcode: boolean) { function textToBase64Barcode(text: string, is_qrcode: boolean) {
@@ -49,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"
> >
@@ -94,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"
> >
@@ -135,82 +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 -->
<!-- Checkbox -->
<div
class="flex items-center"
on:click={() => {
accepted = !accepted;
}}
on:keydown={() => {}}
>
<div class="flex">
<input
id="remember-me"
name="remember-me"
type="checkbox"
bind:checked={accepted}
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
/>
</div>
<div class="ml-3">
<label for="remember-me" class="text-sm dark:text-white"
>Ich habe die <a
class="text-blue-600 decoration-2 hover:underline font-medium"
href="https://lauf-fuer-kaya.de/datenschutz">Datenschutzerklärung</a
> gelesen und akzeptiert</label
>
</div>
</div>
<!-- End Checkbox -->
<button
type="submit"
disabled={!firstname || !lastname || !accepted}
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