branding #1
@ -59,6 +59,7 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/athiti": "^4.5.10",
|
||||
"@odit/lfk-client-js": "1.0.1",
|
||||
"bwip-js": "3.4.0"
|
||||
},
|
||||
|
||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@ -1,6 +1,9 @@
|
||||
lockfileVersion: '6.0'
|
||||
|
||||
dependencies:
|
||||
'@fontsource/athiti':
|
||||
specifier: ^4.5.10
|
||||
version: 4.5.10
|
||||
'@odit/lfk-client-js':
|
||||
specifier: 1.0.1
|
||||
version: 1.0.1
|
||||
|
||||
@ -5,6 +5,11 @@
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Athiti', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { OpenAPI } from '@odit/lfk-client-js';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import '../app.postcss';
|
||||
import "@fontsource/athiti"
|
||||
import Footer from '../components/footer.svelte';
|
||||
|
||||
OpenAPI.BASE = env.PUBLIC_BASE_URL || 'https://run.lauf-fuer-kaya.de';
|
||||
@ -11,5 +12,4 @@
|
||||
<main class="flex-grow">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
|
||||
import bwipjs from 'bwip-js';
|
||||
import lfkbackground from './background.png';
|
||||
|
||||
$: firstname = '';
|
||||
$: lastname = '';
|
||||
@ -47,35 +48,40 @@
|
||||
}
|
||||
</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
|
||||
<!-- <div
|
||||
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="mt-5">
|
||||
<!-- Form -->
|
||||
{#if !showResult}
|
||||
<div class="text-center">
|
||||
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p>
|
||||
</div>
|
||||
<form on:submit|preventDefault={register}>
|
||||
<div class="grid gap-y-4">
|
||||
<!-- Form Group -->
|
||||
<div>
|
||||
<label for="firstname" class="block text-sm mb-2 dark:text-white">Vorname</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="firstname"
|
||||
name="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"
|
||||
required
|
||||
bind:value={firstname}
|
||||
aria-describedby="firstname-error"
|
||||
/>
|
||||
<!-- <div
|
||||
> -->
|
||||
<div class="p-4 sm:p-7">
|
||||
<div class="mt-5">
|
||||
<!-- Form -->
|
||||
{#if !showResult}
|
||||
<div class="text-center">
|
||||
<h1 class="block text-7xl font-bold text-gray-800 dark:text-white">LfK!2023</h1>
|
||||
<h1 class="block text-4xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
|
||||
<!-- <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> -->
|
||||
</div>
|
||||
<form class="mt-4 text-lg" on:submit|preventDefault={register}>
|
||||
<div class="grid gap-y-4">
|
||||
<!-- Form Group -->
|
||||
<div>
|
||||
<label for="firstname" class="block text-lg font-bold mb-2 sr-only">Vorname</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="firstname"
|
||||
name="firstname"
|
||||
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
|
||||
placeholder="Vorname"
|
||||
bind:value={firstname}
|
||||
aria-describedby="firstname-error"
|
||||
/>
|
||||
<!-- <div
|
||||
class:hidden={firstname || firstname.length != 0}
|
||||
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
||||
>
|
||||
@ -92,31 +98,32 @@
|
||||
/>
|
||||
</svg>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <p
|
||||
</div>
|
||||
<!-- <p
|
||||
class:hidden={firstname || firstname.length != 0}
|
||||
class="text-xs text-red-600 mt-2"
|
||||
id="firstname-error"
|
||||
>
|
||||
Bitte gebe deinen Vornamen ein
|
||||
</p> -->
|
||||
</div>
|
||||
<!-- End Form Group -->
|
||||
</div>
|
||||
<!-- End Form Group -->
|
||||
|
||||
<!-- Form Group -->
|
||||
<div>
|
||||
<label for="lastname" class="block text-sm mb-2 dark:text-white">Nachname</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="lastname"
|
||||
id="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"
|
||||
required
|
||||
aria-describedby="lastname-error"
|
||||
bind:value={lastname}
|
||||
/>
|
||||
<!-- <div
|
||||
<!-- Form Group -->
|
||||
<div>
|
||||
<label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="lastname"
|
||||
id="lastname"
|
||||
name="lastname"
|
||||
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
|
||||
placeholder="Nachname"
|
||||
aria-describedby="lastname-error"
|
||||
bind:value={lastname}
|
||||
/>
|
||||
<!-- <div
|
||||
class:hidden={lastname || lastname.length != 0}
|
||||
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
||||
>
|
||||
@ -133,54 +140,78 @@
|
||||
/>
|
||||
</svg>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <p
|
||||
</div>
|
||||
<!-- <p
|
||||
class:hidden={lastname || lastname.length != 0}
|
||||
class="text-xs text-red-600 mt-2"
|
||||
id="lastname-error"
|
||||
>
|
||||
Bitte gebe deinen Nachnamen ein
|
||||
</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>
|
||||
</form>
|
||||
<!-- End Form -->
|
||||
{:else}
|
||||
<div class="mb-2 text-center">
|
||||
<h3 class="text-2xl font-semibold dark:text-white">
|
||||
{response.firstname}
|
||||
{response.lastname}
|
||||
</h3>
|
||||
</div>
|
||||
<!-- End Form Group -->
|
||||
|
||||
<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
|
||||
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 dark:focus:ring-offset-gray-800"
|
||||
>Anmelden</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
<!-- 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 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
BIN
src/routes/registration/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Loading…
x
Reference in New Issue
Block a user