🚀Bumped version to 0.4.0

Reviewed-on: #1

CHANGELOG.md

@@ -0,0 +1,66 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### [0.4.0](https://git.odit.services/lfk/kiosk/compare/0.3.0...0.4.0)
+
+- Merge pull request 'branding' (#1) from branding into main [`a07eb4d`](https://git.odit.services/lfk/kiosk/commit/a07eb4ddf52c31b391ea14d13c129282b5e344c3)
+- chore(deps): update all [`a610c6a`](https://git.odit.services/lfk/kiosk/commit/a610c6abd1887bf450294fff15db6eca7d99919c)
+- branding [`0a883ce`](https://git.odit.services/lfk/kiosk/commit/0a883ce7fbd3defccbe7be70ce6affcab281c9c5)
+- Lockfile [`9387203`](https://git.odit.services/lfk/kiosk/commit/93872030ed48a315d9721f253ff00568e1f42aee)
+
+#### [0.3.0](https://git.odit.services/lfk/kiosk/compare/0.2.0...0.3.0)
+
+> 19 April 2023
+
+- feat(registration): drop privacy checkbox [privacy is linked on page] [`c546a96`](https://git.odit.services/lfk/kiosk/commit/c546a96c4d959b41181c34d6affccafdf84a221a)
+- 🚀Bumped version to 0.3.0 [`f2d8ab8`](https://git.odit.services/lfk/kiosk/commit/f2d8ab81e9ed87f8a9e0cae3010f27ed12c081cb)
+
+#### [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)
+- 🚀Bumped version to 0.2.0 [`c82fdf3`](https://git.odit.services/lfk/kiosk/commit/c82fdf3823acf0ea49f0218ba57805e5d15fae97)
+
+#### 0.1.0
+
+> 19 April 2023
+
+- 🚀Bumped version to 0.1.0 [`3aa6f04`](https://git.odit.services/lfk/kiosk/commit/3aa6f0473bd8767cbe33277643a5778d2b68a8ae)
+- Basic sveltekit project [`e0c0cbb`](https://git.odit.services/lfk/kiosk/commit/e0c0cbbbd8b2c4cb7db0a8ae3aa295083ae636d1)
+- Release config [`6b98ee9`](https://git.odit.services/lfk/kiosk/commit/6b98ee96341def78447317a39e1ff30f9db73a9d)
+- Added basic welcome page [`5ed21bb`](https://git.odit.services/lfk/kiosk/commit/5ed21bb13d30cc43bc16fd6357f2e92e031c3273)
+- Bump ts [`50764bc`](https://git.odit.services/lfk/kiosk/commit/50764bca472a441c2e84fc3273771303a94759ae)
+- Basic registration page [`09aee15`](https://git.odit.services/lfk/kiosk/commit/09aee15f60bec58ca3cc3b9ce392774a7ff77219)
+- Added basic drone docker build, build checks and typechecks [`eca9966`](https://git.odit.services/lfk/kiosk/commit/eca9966e29f5222189e0f10a6874e3c9e5f32b56)
+- Basic userstore [`88f3657`](https://git.odit.services/lfk/kiosk/commit/88f36575fb81c47b2e88f708890da77dcadde2e1)
+- Added login page with logic [`078e8dc`](https://git.odit.services/lfk/kiosk/commit/078e8dcb9af67ea874a7547c9303cb2a831a8486)
+- Added license exporter [`28b45f8`](https://git.odit.services/lfk/kiosk/commit/28b45f876877391d466a4a71e0772793bbe02137)
+- Added readme [`0bd83f8`](https://git.odit.services/lfk/kiosk/commit/0bd83f8000daeef993764aea29149036b1d80254)
+- Added runnerid as barcode [`5a81cb6`](https://git.odit.services/lfk/kiosk/commit/5a81cb64f59ca75264a38d09d54c19e506486e3a)
+- Registration feedback logic [`d3d0d17`](https://git.odit.services/lfk/kiosk/commit/d3d0d17b3a99ab8412df3111dc2d4c029fd04908)
+- Pin dependencies [`abff31a`](https://git.odit.services/lfk/kiosk/commit/abff31aaee4b6f6a07f4e1292e2b95d13b995fab)
+- Register results [`7cecbfe`](https://git.odit.services/lfk/kiosk/commit/7cecbfe80e60bc22cab9f4c0e8e2aa0b33899280)
+- Authed page login logic [`7879ca8`](https://git.odit.services/lfk/kiosk/commit/7879ca82fde600fdb9f314b6dd63a324eb308102)
+- Added dockerfile + compose [`e5535f1`](https://git.odit.services/lfk/kiosk/commit/e5535f18692d7afc3f2636283722e61aa0437c59)
+- Package project info [`2e355db`](https://git.odit.services/lfk/kiosk/commit/2e355dbb46404fe0eccd8409614ec7444933bcae)
+- Added bwip types [`1a0f52f`](https://git.odit.services/lfk/kiosk/commit/1a0f52f31f9bdd0fd78756e714f23433e16deb1e)
+- Fix in auth [`710cad3`](https://git.odit.services/lfk/kiosk/commit/710cad376eb865a0c82743a7213c3f4097027c23)
+- Switched to adapter static [`93bf436`](https://git.odit.services/lfk/kiosk/commit/93bf436e94ad492a1bc1acdaa8958ef9e79e3a73)
+- fix(a11y): input borders [`fffe290`](https://git.odit.services/lfk/kiosk/commit/fffe29036045ead825b54f44b38d824d09f039b8)
+- Added lfk client [`f927cc9`](https://git.odit.services/lfk/kiosk/commit/f927cc916b07e908c3bd18ee7d16d82cb41ca972)
+- Added license [`39fc381`](https://git.odit.services/lfk/kiosk/commit/39fc381343de6d2be4f8e5aa53c9d986f05a99bb)
+- Added login error [`8b086c5`](https://git.odit.services/lfk/kiosk/commit/8b086c5aa850f423b19a54499ae636937ff33387)
+- Updated typing [`d68e88e`](https://git.odit.services/lfk/kiosk/commit/d68e88ec9a890e418070f0698d5da6d7c75cc0c1)
+- Moved barcode height to main config [`3d110e8`](https://git.odit.services/lfk/kiosk/commit/3d110e8f48b9a3df8dba462e2ee71125e47aa875)
+- Open footer links in new tab [`c1400c0`](https://git.odit.services/lfk/kiosk/commit/c1400c0120a1b3b0e4358b3c6bb6ac38f4f01e35)
+- Moved config into call [`e25aaf3`](https://git.odit.services/lfk/kiosk/commit/e25aaf3e5e0c2ed52413b8289c7d5bdd5b8a54f1)
+- Added sample env [`f6dd25c`](https://git.odit.services/lfk/kiosk/commit/f6dd25c988a67b4d826410fea59473ca8d0b718f)
+- typo [`22be683`](https://git.odit.services/lfk/kiosk/commit/22be68311baaa3d866106603deb6c7ae3a8ab09b)
+- updated release hook [`5d7a25e`](https://git.odit.services/lfk/kiosk/commit/5d7a25e54ffe454ce4e61876acaae7b1a34df3eb)
+- pnpx -> npx [`16deab5`](https://git.odit.services/lfk/kiosk/commit/16deab5308b7245860d42b8f49aba0706595d95f)
+- release from main [`c0a39bd`](https://git.odit.services/lfk/kiosk/commit/c0a39bdabe9a597823fd28cee059b690bc7e34c3)
+- fix(registration): typo [`1c5e246`](https://git.odit.services/lfk/kiosk/commit/1c5e2460958919951968c8c20eb69929cfba81d5)
+- pinned dependency [`910fa38`](https://git.odit.services/lfk/kiosk/commit/910fa3867b32918e3791642526d414268049ed38)
+- Hide error on successfull signin [`f98a4fc`](https://git.odit.services/lfk/kiosk/commit/f98a4fc2b1a34343353fdc361ef08e92ea046ced)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lfk/kiosk",
-	"version": "0.0.1",
+	"version": "0.4.0",
 	"private": false,
 	"license": "MIT",
 	"repository": "https://git.odit.services/lfk/kiosk",
@@ -35,30 +35,31 @@
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.12",
 		"@sveltejs/adapter-static": "2.0.2",
-		"@sveltejs/kit": "1.5.0",
+		"@sveltejs/kit": "1.15.7",
 		"@types/bwip-js": "^3.2.0",
-		"@typescript-eslint/eslint-plugin": "5.45.0",
-		"@typescript-eslint/parser": "5.45.0",
+		"@typescript-eslint/eslint-plugin": "5.59.0",
+		"@typescript-eslint/parser": "5.59.0",
 		"auto-changelog": "2.4.0",
-		"autoprefixer": "10.4.7",
-		"eslint": "8.28.0",
-		"eslint-config-prettier": "8.5.0",
+		"autoprefixer": "10.4.14",
+		"eslint": "8.38.0",
+		"eslint-config-prettier": "8.8.0",
 		"eslint-plugin-svelte3": "4.0.0",
-		"postcss": "8.4.14",
+		"postcss": "8.4.22",
 		"postcss-load-config": "4.0.1",
-		"prettier": "2.8.0",
-		"prettier-plugin-svelte": "2.8.1",
+		"prettier": "2.8.7",
+		"prettier-plugin-svelte": "2.10.0",
 		"release-it": "15.10.1",
-		"svelte": "3.54.0",
-		"svelte-check": "3.0.1",
-		"svelte-preprocess": "4.10.7",
-		"tailwindcss": "3.1.5",
-		"tslib": "2.4.1",
+		"svelte": "3.58.0",
+		"svelte-check": "3.2.0",
+		"svelte-preprocess": "5.0.3",
+		"tailwindcss": "3.3.1",
+		"tslib": "2.5.0",
 		"typescript": "5.0.4",
-		"vite": "4.2.0"
+		"vite": "4.2.2"
 	},
 	"type": "module",
 	"dependencies": {
+		"@fontsource/athiti": "^4.5.10",
 		"@odit/lfk-client-js": "1.0.1",
 		"bwip-js": "3.4.0"
 	},
@@ -77,7 +78,7 @@
 			"publish": false
 		},
 		"hooks": {
-			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && pnpm licenses:export && git add CHANGELOG.md licenses.md"
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && npm run license:export && git add CHANGELOG.md && git add licenses.md"
 		}
 	},
 	"volta": {
@@ -86,4 +87,4 @@
 	"engines": {
 		"pnpm": "8"
 	}
-}
+}

src/app.html

@@ -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>

src/routes/+layout.svelte

@@ -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>

src/routes/registration/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
 	import bwipjs from 'bwip-js';
+	import lfkbackground from './background.png';
 
 	$: firstname = '';
 	$: lastname = '';
-	$: accepted = false;
 	$: showResult = false;
 	$: showError = false;
 
@@ -27,7 +27,6 @@
 		}
 		firstname = '';
 		lastname = '';
-		accepted = false;
 	}
 
 	function textToBase64Barcode(text: string, is_qrcode: boolean) {
@@ -49,36 +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="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>
-
-				<div class="mt-5">
-					<!-- Form -->
-					{#if !showResult}
-						<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"
 										>
@@ -95,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"
 										>
@@ -136,83 +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 -->
-
-								<!-- 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>
-						</form>
-						<!-- End Form -->
-					{:else}
-						<div class="mb-2">
-							<h3 class="text-xl font-semibold text-center dark:text-white">Läuferdaten</h3>
-							<p class="text-lg dark:text-white">ID: {response.id}</p>
-							<p class="text-lg dark:text-white">Vorname: {response.firstname}</p>
-							<p class="text-lg dark:text-white">Nachname: {response.lastname}</p>
-						</div>
+							<!-- End Form Group -->
 
-						<div class="mb-2 text-center">
-							<h3 class="text-xl font-semibold dark:text-white">Läufercode</h3>
-							<img
-								class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
-								alt="Runnerid"
-								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>