cleanups, brand font, etc.

This commit is contained in:
Philipp Dormann 2025-04-06 16:39:22 +02:00
parent 22a8953332
commit b7c1ce947c
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
6 changed files with 126 additions and 113 deletions

View File

@ -26,6 +26,7 @@
"vite": "^6.2.0" "vite": "^6.2.0"
}, },
"dependencies": { "dependencies": {
"@fontsource/athiti": "^5.2.5",
"@tailwindcss/vite": "^4.1.3", "@tailwindcss/vite": "^4.1.3",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.3",
"validator": "13.15.0" "validator": "13.15.0"

8
pnpm-lock.yaml generated
View File

@ -8,6 +8,9 @@ importers:
.: .:
dependencies: dependencies:
'@fontsource/athiti':
specifier: ^5.2.5
version: 5.2.5
'@tailwindcss/vite': '@tailwindcss/vite':
specifier: ^4.1.3 specifier: ^4.1.3
version: 4.1.3(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(lightningcss@1.29.2)) version: 4.1.3(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(lightningcss@1.29.2))
@ -357,6 +360,9 @@ packages:
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
'@fontsource/athiti@5.2.5':
resolution: {integrity: sha512-vHoAKBBw+wI4y3bGOkiogOkgcoLH7+SWtNNo/nBQ1XfhvfRPX/91xGtclEdwqUlbOJTCkNzEecdKChJQ5MsDFg==}
'@formatjs/ecma402-abstract@2.3.4': '@formatjs/ecma402-abstract@2.3.4':
resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==} resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
@ -2306,6 +2312,8 @@ snapshots:
'@esbuild/win32-x64@0.25.2': '@esbuild/win32-x64@0.25.2':
optional: true optional: true
'@fontsource/athiti@5.2.5': {}
'@formatjs/ecma402-abstract@2.3.4': '@formatjs/ecma402-abstract@2.3.4':
dependencies: dependencies:
'@formatjs/fast-memoize': 2.2.7 '@formatjs/fast-memoize': 2.2.7

View File

@ -1,8 +1,8 @@
<script> <script lang="ts">
import axios from "axios"; import axios from "axios";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { apikey, api_endpoint, page, stationinfo } from "./store.js"; import { apikey, api_endpoint, page, stationinfo } from "./store.js";
function init(el) { function init(el: HTMLInputElement) {
el.focus(); el.focus();
} }
let lastscan_error = ""; let lastscan_error = "";
@ -29,7 +29,7 @@
</div> </div>
<div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center"> <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
Lauf Für Kaya! Scan LfK!Scan
</div> </div>
<div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center"> <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
@ -100,11 +100,11 @@
}} }}
> >
<label class="block"> <label class="block">
<span class="block mb-1 text-xs font-medium text-gray-700" <span class="block text-base font-semibold text-gray-700"
>{$_("runner_card")}</span >{$_("runner_card")}</span
> >
<input <input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mt-1 leading-tight focus:outline-none focus:shadow-outline" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="text" type="text"
placeholder="123456789" placeholder="123456789"
required required

View File

@ -1,114 +1,114 @@
<script> <script>
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { apikey, api_endpoint, lang, page, stationinfo } from "./store.js"; import { apikey, api_endpoint, lang, page, stationinfo } from "./store.js";
</script> </script>
<div class="p-5 min-h-screen"> <div class="p-5 min-h-screen">
<h1 class="font-bold text-3xl w-full text-center text-gray-900"> <h1 class="font-bold text-3xl w-full text-center text-gray-900">
Lauf Für Kaya! Scan Lauf Für Kaya! Scan
</h1> </h1>
<h1 class="text-3xl w-full text-center text-gray-900">{$_("settings")}</h1> <h1 class="text-3xl w-full text-center text-gray-900">{$_("settings")}</h1>
<p class="block text-sm font-bold text-gray-700 mt-2">{$_("api_key")}</p> <p class="block text-sm font-bold text-gray-700 mt-2">{$_("api_key")}</p>
<p class="block text-sm text-gray-700">{$apikey}</p> <p class="block text-sm text-gray-700">{$apikey}</p>
<p class="block text-sm font-bold text-gray-700 mt-2"> <p class="block text-sm font-bold text-gray-700 mt-2">
{$_("station_description")} {$_("station_description")}
</p> </p>
<p class="block text-sm text-gray-700"> <p class="block text-sm text-gray-700">
{JSON.parse($stationinfo).description} {JSON.parse($stationinfo).description}
</p> </p>
<p class="block text-sm font-bold text-gray-700 mt-2">{$_("station_id")}</p> <p class="block text-sm font-bold text-gray-700 mt-2">{$_("station_id")}</p>
<p class="block text-sm text-gray-700">{JSON.parse($stationinfo).id}</p> <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).id}</p>
<p class="block text-sm font-bold text-gray-700 mt-2">{$_("track_id")}</p> <p class="block text-sm font-bold text-gray-700 mt-2">{$_("track_id")}</p>
<p class="block text-sm text-gray-700">{JSON.parse($stationinfo).track.id}</p> <p class="block text-sm text-gray-700">{JSON.parse($stationinfo).track.id}</p>
<p class="block text-sm font-bold text-gray-700 mt-2">{$_("track_name")}</p> <p class="block text-sm font-bold text-gray-700 mt-2">{$_("track_name")}</p>
<p class="block text-sm text-gray-700"> <p class="block text-sm text-gray-700">
{JSON.parse($stationinfo).track.name} {JSON.parse($stationinfo).track.name}
</p> </p>
<p class="block text-sm font-bold text-gray-700 mt-2"> <p class="block text-sm font-bold text-gray-700 mt-2">
{$_("track_distance")} {$_("track_distance")}
</p> </p>
<p class="block text-sm text-gray-700"> <p class="block text-sm text-gray-700">
{JSON.parse($stationinfo).track.distance} {JSON.parse($stationinfo).track.distance}
</p> </p>
<p class="block text-sm font-bold text-gray-700 mt-2"> <p class="block text-sm font-bold text-gray-700 mt-2">
{$_("minimum_lap_time")} {$_("minimum_lap_time")}
</p> </p>
<p class="block text-sm text-gray-700"> <p class="block text-sm text-gray-700">
{JSON.parse($stationinfo).track.minimumLapTime}s {JSON.parse($stationinfo).track.minimumLapTime}s
</p> </p>
<p class="block text-sm font-bold text-gray-700 mt-2">{$_("language")}</p> <p class="block text-sm font-bold text-gray-700 mt-2">{$_("language")}</p>
<div class="w-full"> <div class="w-full">
<div class="inline-block mr-2 mt-2"> <div class="inline-block mr-2 mt-2">
<button <button
on:click={() => { on:click={() => {
lang.set("de-DE"); lang.set("de-DE");
location.reload(); location.reload();
}} }}
type="button" type="button"
class:bg-blue-700={$lang === "de-DE"} class:bg-blue-700={$lang === "de-DE"}
class="bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700 cursor-pointer" class="bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700 cursor-pointer"
>Deutsch >Deutsch
<svg <svg
class="h-4 inline" class="h-4 inline"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" viewBox="0 0 512 512"
><path ><path
d="M15.923 345.043C52.094 442.527 145.929 512 256 512s203.906-69.473 240.077-166.957L256 322.783l-240.077 22.26z" d="M15.923 345.043C52.094 442.527 145.929 512 256 512s203.906-69.473 240.077-166.957L256 322.783l-240.077 22.26z"
fill="#ffda44" fill="#ffda44"
/><path /><path
d="M256 0C145.929 0 52.094 69.472 15.923 166.957L256 189.217l240.077-22.261C459.906 69.472 366.071 0 256 0z" d="M256 0C145.929 0 52.094 69.472 15.923 166.957L256 189.217l240.077-22.261C459.906 69.472 366.071 0 256 0z"
/><path /><path
d="M15.923 166.957C5.633 194.69 0 224.686 0 256s5.633 61.31 15.923 89.043h480.155C506.368 317.31 512 287.314 512 256s-5.632-61.31-15.923-89.043H15.923z" d="M15.923 166.957C5.633 194.69 0 224.686 0 256s5.633 61.31 15.923 89.043h480.155C506.368 317.31 512 287.314 512 256s-5.632-61.31-15.923-89.043H15.923z"
fill="#d80027" fill="#d80027"
/></svg /></svg
></button ></button
> >
</div> </div>
<div class="inline-block mr-2 mt-2"> <div class="inline-block mr-2 mt-2">
<button <button
on:click={() => { on:click={() => {
lang.set("en-EN"); lang.set("en-EN");
location.reload(); location.reload();
}} }}
type="button" type="button"
class:bg-blue-700={$lang === "en-EN"} class:bg-blue-700={$lang === "en-EN"}
class="bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700 cursor-pointer" class="bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700 cursor-pointer"
>English >English
<svg <svg
class="h-4 inline" class="h-4 inline"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512" viewBox="0 0 512 512"
> >
<circle cx="256" cy="256" r="256" fill="#f0f0f0" /> <circle cx="256" cy="256" r="256" fill="#f0f0f0" />
<g fill="#d80027"> <g fill="#d80027">
<path <path
d="M244.87 256H512c0-23.106-3.08-45.49-8.819-66.783H244.87V256zM244.87 122.435h229.556a257.35 257.35 0 00-59.07-66.783H244.87v66.783zM256 512c60.249 0 115.626-20.824 159.356-55.652H96.644C140.374 491.176 195.751 512 256 512zM37.574 389.565h436.852a254.474 254.474 0 0028.755-66.783H8.819a254.474 254.474 0 0028.755 66.783z" d="M244.87 256H512c0-23.106-3.08-45.49-8.819-66.783H244.87V256zM244.87 122.435h229.556a257.35 257.35 0 00-59.07-66.783H244.87v66.783zM256 512c60.249 0 115.626-20.824 159.356-55.652H96.644C140.374 491.176 195.751 512 256 512zM37.574 389.565h436.852a254.474 254.474 0 0028.755-66.783H8.819a254.474 254.474 0 0028.755 66.783z"
/> />
</g> </g>
<path <path
d="M118.584 39.978h23.329l-21.7 15.765 8.289 25.509-21.699-15.765-21.699 15.765 7.16-22.037a257.407 257.407 0 00-49.652 55.337h7.475l-13.813 10.035a255.58 255.58 0 00-6.194 10.938l6.596 20.301-12.306-8.941a253.567 253.567 0 00-8.372 19.873l7.267 22.368h26.822l-21.7 15.765 8.289 25.509-21.699-15.765-12.998 9.444A258.468 258.468 0 000 256h256V0c-50.572 0-97.715 14.67-137.416 39.978zm9.918 190.422l-21.699-15.765L85.104 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zM220.328 230.4l-21.699-15.765L176.93 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zm0-74.574l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765z" d="M118.584 39.978h23.329l-21.7 15.765 8.289 25.509-21.699-15.765-21.699 15.765 7.16-22.037a257.407 257.407 0 00-49.652 55.337h7.475l-13.813 10.035a255.58 255.58 0 00-6.194 10.938l6.596 20.301-12.306-8.941a253.567 253.567 0 00-8.372 19.873l7.267 22.368h26.822l-21.7 15.765 8.289 25.509-21.699-15.765-12.998 9.444A258.468 258.468 0 000 256h256V0c-50.572 0-97.715 14.67-137.416 39.978zm9.918 190.422l-21.699-15.765L85.104 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zM220.328 230.4l-21.699-15.765L176.93 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zm0-74.574l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765z"
fill="#0052b4" fill="#0052b4"
/> />
</svg></button </svg></button
> >
</div> </div>
</div> </div>
<br /> <br />
<button <button
on:click={() => { on:click={() => {
page.set(""); page.set("");
}} }}
class="mb-3 w-full py-3 border-black border-3 text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black" class="mb-3 w-full py-3 border-black border-3 text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black cursor-pointer"
>{$_("back_to_scanner")}</button >{$_("back_to_scanner")}</button
> >
<button <button
on:click={() => { on:click={() => {
apikey.set(""); apikey.set("");
api_endpoint.set(""); api_endpoint.set("");
page.set(""); page.set("");
}} }}
class="w-full py-3 bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black" class="w-full py-3 bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black cursor-pointer"
>{$_("log_out_from_this_client")}</button >{$_("log_out_from_this_client")}</button
> >
</div> </div>

View File

@ -1 +1,4 @@
@import "tailwindcss"; @import "tailwindcss";
body {
font-family: "Athiti", sans-serif;
}

View File

@ -1,4 +1,5 @@
import { mount } from 'svelte' import { mount } from 'svelte'
import '@fontsource/athiti';
import './app.css' import './app.css'
import App from './App.svelte' import App from './App.svelte'