chore: release 1.0.7

.drone.yml

@@ -1,101 +0,0 @@
----
-kind: secret
-name: docker_username
-get:
-  path: odit-registry-builder
-  name: username
-
----
-kind: secret
-name: docker_password
-get:
-  path: odit-registry-builder
-  name: password
-
----
-kind: secret
-name: npm_url
-get:
-  path: odit-npm-cache
-  name: url
-
----
-kind: pipeline
-type: kubernetes
-name: build:dev
-
-steps:
-  - name: build dev
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      build_args:
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: registry.odit.services/lfk/beamershow
-      tags:
-        - dev
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  branch:
-    - dev
-  event:
-    - push
-
----
-kind: pipeline
-type: kubernetes
-name: build:latest
-
-steps:
-  - name: build latest
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      build_args:
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: registry.odit.services/lfk/beamershow
-      tags:
-        - latest
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  branch:
-    - main
-  event:
-    - push
-
----
-kind: pipeline
-type: kubernetes
-name: build:tags
-steps:
-  - name: build $DRONE_TAG
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      build_args:
-        - NPM_REGISTRY_URL:
-          from_secret: npm_url
-      repo: registry.odit.services/lfk/beamershow
-      tags:
-        - '${DRONE_TAG}'
-      registry: registry.odit.services
-      mtu: 1000
-trigger:
-  event:
-  - tag

.gitea/workflows/release.yaml

@@ -0,0 +1,33 @@
+name: Build release images
+on:
+  push:
+    tags:
+      - "*.*.*"
+
+jobs:
+  build-container:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 19
+      - run: npm i -g pnpm@10.7 && pnpm i
+      - run: pnpm licenses:export
+      - name: Login to registry
+        uses: docker/login-action@v3
+        with:
+          registry: registry.odit.services
+          username: ${{ vars.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: |
+            ${{ vars.REGISTRY }}/lfk/beamershow:${{ github.ref_name }}
+          platforms: linux/amd64,linux/arm64

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn format
-yarn license:export

CHANGELOG.md

@@ -2,8 +2,54 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.0.7](https://git.odit.services/lfk/beamershow/compare/1.0.6...1.0.7)
+
+#### [1.0.6](https://git.odit.services/lfk/beamershow/compare/1.0.5...1.0.6)
+
+> 4 April 2025
+
+- feat: show org names for teams_distance slide [`c6f7210`](https://git.odit.services/lfk/beamershow/commit/c6f721019691cdc9f5492f920dbdd99e6b25ca9f)
+- chore(deps). bump [`dc0488b`](https://git.odit.services/lfk/beamershow/commit/dc0488b1b7632326f4dd3bf5fff0ac8fa91fb128)
+- ci: move to gitea actions [`e6ff8ef`](https://git.odit.services/lfk/beamershow/commit/e6ff8ef80b667692574319f20bebe6a4e872ca6e)
+- chore: release 1.0.6 [`52528d3`](https://git.odit.services/lfk/beamershow/commit/52528d31a46f99bd44c9b7f18833159f9cd4db56)
+- chore: update readme [`aa707ff`](https://git.odit.services/lfk/beamershow/commit/aa707ff0ccaa2cb4a69d3c7b396591cd40827c6d)
+- chore(deps): pnpm@10 [`c286969`](https://git.odit.services/lfk/beamershow/commit/c286969a9de52519005013a6798f711cef26b465)
+- ci: change release message [`4920da1`](https://git.odit.services/lfk/beamershow/commit/4920da1df1a51a071eeba44d8d2c1cb6c5f8d09c)
+- fix: i18n [`f9a84f7`](https://git.odit.services/lfk/beamershow/commit/f9a84f798b1052530688aaabf654b08c2d466da5)
+- fix(login): bg image [`14ae9e4`](https://git.odit.services/lfk/beamershow/commit/14ae9e49fbdc10a1c5681212713b166e333e4b4d)
+
+#### [1.0.5](https://git.odit.services/lfk/beamershow/compare/1.0.4...1.0.5)
+
+> 18 December 2024
+
+- chore(deps): bump some [`ab4f82c`](https://git.odit.services/lfk/beamershow/commit/ab4f82ccf14a1569921845910e3b2a740f74aeea)
+- feat(ci)!: Switched to woodpecker [`1235776`](https://git.odit.services/lfk/beamershow/commit/1235776a6255a3925f98ac6cacd3167f6e86e363)
+- chore: remove husky [`72d34cb`](https://git.odit.services/lfk/beamershow/commit/72d34cbfd7f7e47f0239416469533aea772daa79)
+- 🚀Bumped version to 1.0.5 [`4874b22`](https://git.odit.services/lfk/beamershow/commit/4874b227960c30b65d7bc822f987c9b957144953)
+- chore(deps): pnpm@9 + node@23 [`c4ad18c`](https://git.odit.services/lfk/beamershow/commit/c4ad18cb4ff4dd13e50f4674d7b6016ed788ff63)
+- feat(footer): cleaned up text [`b10e964`](https://git.odit.services/lfk/beamershow/commit/b10e964ad900fcfd2503884c248ea0f6d11a2fb9)
+- feat: improved background img import [`919b295`](https://git.odit.services/lfk/beamershow/commit/919b2956ab5253a3697c14ac284f6da700afda91)
+
+#### [1.0.4](https://git.odit.services/lfk/beamershow/compare/1.0.3...1.0.4)
+
+> 15 April 2023
+
+- 🚀Bumped version to 1.0.4 [`4a1e266`](https://git.odit.services/lfk/beamershow/commit/4a1e26663e29339d6373fa8c340ba2117d3ecf28)
+- fix: formatting of total km [`2bdbd00`](https://git.odit.services/lfk/beamershow/commit/2bdbd001898b9dd5aa541f3cce90fc108e7e458c)
+
+#### [1.0.3](https://git.odit.services/lfk/beamershow/compare/1.0.2...1.0.3)
+
+> 15 April 2023
+
+- 🚀Bumped version to 1.0.3 [`85e7b7c`](https://git.odit.services/lfk/beamershow/commit/85e7b7c231b92233b58373cd4ad56f514d6d789c)
+- cleanup loading [`d5f685a`](https://git.odit.services/lfk/beamershow/commit/d5f685a8269737d148a06e0ec784c0074eac7d3f)
+- drop laptime runner stats, fix runner distance page [`8844917`](https://git.odit.services/lfk/beamershow/commit/88449174a148ab7498075a15149388213a532c02)
+
 #### [1.0.2](https://git.odit.services/lfk/beamershow/compare/1.0.1...1.0.2)
 
+> 15 April 2023
+
+- 🚀Bumped version to 1.0.2 [`d30be90`](https://git.odit.services/lfk/beamershow/commit/d30be90102b3065b16836adc44a686c677e3053d)
 - updated release config [`7e3570e`](https://git.odit.services/lfk/beamershow/commit/7e3570e9231929f366047ff149364ec06344d2ee)
 
 #### [1.0.1](https://git.odit.services/lfk/beamershow/compare/1.0.0...1.0.1)

Dockerfile

@@ -1,9 +1,9 @@
-FROM registry.odit.services/hub/library/node:19.8.1-alpine3.16 as build
+FROM registry.odit.services/hub/library/node:23.11.0-alpine3.21 as build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 
 COPY . ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@10.7 && pnpm i
 RUN pnpm build
 
 # final image

README.md

@@ -7,17 +7,17 @@ This is an API client for [https://git.odit.services/lfk/backend](@lfk/backend)
 ## Dev🛠
 ### 🚀 Getting Started
 ```
-yarn
+pnpm i
 ```
 ### Development
 ```
-yarn dev
+pnpm dev
 /
-yarn dev --open
+pnpm dev --open
 ```
 ### Build
 ```
-yarn build
+pnpm build
 ```
 
 ## Use (quickstart) 🔥

package.json

@@ -1,41 +1,39 @@
 {
 	"name": "@lfk/beamershow",
-	"version": "1.0.2",
+	"version": "1.0.7",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
 		"format": "prettier --write --plugin-search-dir=. ./**/*.html ./**/*.svelte",
-		"prepare": "husky install",
 		"license:export": "license-exporter --markdown && git stage licenses.md",
 		"release": "release-it --only-version"
 	},
 	"devDependencies": {
-		"@odit/license-exporter": "0.0.11",
+		"@odit/license-exporter": "0.2.0",
+		"@philippdormann/release-it": "1.0.0",
 		"@svitejs/vite-plugin-svelte": "0.11.1",
 		"@tsconfig/svelte": "1.0.10",
-		"@types/html-minifier": "4.0.0",
+		"@types/html-minifier": "4.0.5",
 		"axios": "0.21.1",
 		"html-minifier": "4.0.0",
-		"husky": "5.1.3",
-		"prettier": "2.2.1",
-		"prettier-plugin-svelte": "2.2.0",
-		"release-it": "14.5.0",
+		"prettier": "3.5.3",
+		"prettier-plugin-svelte": "3.3.3",
 		"svelte": "3.36.0",
 		"svelte-i18n": "3.3.9",
 		"svelte-preprocess": "4.7.0",
-		"validator": "13.5.2",
+		"validator": "13.15.0",
 		"vite": "2.1.4",
-		"vite-plugin-windicss": "1.8.10"
+		"vite-plugin-windicss": "1.9.4"
 	},
 	"release-it": {
 		"git": {
 			"commit": true,
 			"requireCleanWorkingDir": false,
-			"commitMessage": "🚀Bumped version to ${version}",
+			"commitMessage": "chore: release ${version}",
 			"requireBranch": "main",
 			"push": true,
 			"tag": true,
-			"tagName": null,
+			"tagName": "${version}",
 			"tagAnnotation": "${version}"
 		},
 		"npm": {
@@ -46,6 +44,6 @@
 		}
 	},
 	"dependencies": {
-		"@fontsource/athiti": "^4.5.10"
+		"@fontsource/athiti": "5.2.5"
 	}
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+  - svelte-preprocess

src/Beamershow.svelte

@@ -1,417 +1,420 @@
 <script>
-  import axios from "axios";
-  import bg from "../public/beamershow_background.png?import";
-  import { _ } from "svelte-i18n";
-  import { slide } from "svelte/transition";
-  import { apikey, api_endpoint, laptime_track } from "./store.js";
-  function init(el) {
-    el.focus();
-  }
-  $: pages = [
-    "general",
-    "runners_distance",
-    "runners_laptime",
-    "orgs_distance",
-    // "teams_distance",
-  ];
-  $: current_page = "general";
-  $: general = {};
-  $: runners = [];
-  $: runners_by_laptime = [];
-  $: orgs = [];
-  $: teams = [];
+	import axios from "axios";
+	import bg from "/beamershow_background.png?inline";
+	import { _ } from "svelte-i18n";
+	import { slide } from "svelte/transition";
+	import { apikey, api_endpoint, laptime_track } from "./store.js";
+	$: pages = [
+		"general",
+		"runners_distance",
+		// "runners_laptime",
+		"orgs_distance",
+		// "teams_distance",
+	];
+	$: current_page = "general";
+	$: general = {};
+	$: runners = [];
+	$: runners_by_laptime = [];
+	$: orgs = [];
+	$: teams = [];
 
-  let time = new Date();
-  $: hours = (time.getHours() + "").padStart(2, "0");
-  $: minutes = (time.getMinutes() + "").padStart(2, "0");
-  $: seconds = (time.getSeconds() + "").padStart(2, "0");
-  function format_laptime(laptime) {
-    if (laptime < 60) {
-      return `${laptime}s`;
-    }
-    if (laptime < 3600) {
-      return `${Math.floor(laptime / 60)}min ${
-        laptime - Math.floor(laptime / 60) * 60
-      }s`;
-    }
-    return `${Math.floor(laptime / 3600)}h ${
-      laptime - Math.floor(laptime / 3600) * 3600
-    }min ${
-      laptime -
-      Math.floor(laptime / 3600) * 3600 -
-      Math.floor(laptime / 60) * 60
-    }`;
-  }
-  function stats_general() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        general = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_runners() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/runners/distance",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        runners = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_runners_by_laptime() {
-    axios
-      .request({
-        method: "GET",
-        url:
-          $api_endpoint + "api/stats/runners/laptime?track=" + $laptime_track,
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        runners_by_laptime = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_orgs() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/organizations/distance",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        orgs = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  function stats_teams() {
-    axios
-      .request({
-        method: "GET",
-        url: $api_endpoint + "api/stats/teams/distance",
-        headers: { Authorization: "Bearer " + $apikey },
-      })
-      .then(function ({ data }) {
-        teams = data;
-      })
-      .catch(function (e) {
-        console.log(e);
-      });
-  }
-  Array.prototype.cycle = function (str) {
-    const i = this.indexOf(str);
-    if (i === -1) return undefined;
-    return this[(i + 1) % this.length];
-  };
-  function fetch_all() {
-    stats_general();
-    stats_runners();
-    stats_runners_by_laptime();
-    stats_orgs();
-    stats_teams();
-  }
-  fetch_all();
-  setInterval(() => {
-    time = new Date();
-  }, 1000);
-  setInterval(() => {
-    fetch_all();
-  }, 90000);
-  setInterval(() => {
-    current_page = pages.cycle(current_page);
-  }, 20000);
+	let time = new Date();
+	$: hours = (time.getHours() + "").padStart(2, "0");
+	$: minutes = (time.getMinutes() + "").padStart(2, "0");
+	$: seconds = (time.getSeconds() + "").padStart(2, "0");
+	function format_laptime(laptime) {
+		if (laptime < 60) {
+			return `${laptime}s`;
+		}
+		if (laptime < 3600) {
+			return `${Math.floor(laptime / 60)}min ${
+				laptime - Math.floor(laptime / 60) * 60
+			}s`;
+		}
+		return `${Math.floor(laptime / 3600)}h ${
+			laptime - Math.floor(laptime / 3600) * 3600
+		}min ${
+			laptime -
+			Math.floor(laptime / 3600) * 3600 -
+			Math.floor(laptime / 60) * 60
+		}`;
+	}
+	function stats_general() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				general = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_runners() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/runners/distance",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				runners = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_runners_by_laptime() {
+		axios
+			.request({
+				method: "GET",
+				url:
+					$api_endpoint + "api/stats/runners/laptime?track=" + $laptime_track,
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				runners_by_laptime = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_orgs() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/organizations/distance",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				orgs = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	function stats_teams() {
+		axios
+			.request({
+				method: "GET",
+				url: $api_endpoint + "api/stats/teams/distance",
+				headers: { Authorization: "Bearer " + $apikey },
+			})
+			.then(function ({ data }) {
+				teams = data;
+			})
+			.catch(function (e) {
+				console.log(e);
+			});
+	}
+	Array.prototype.cycle = function (str) {
+		const i = this.indexOf(str);
+		if (i === -1) return undefined;
+		return this[(i + 1) % this.length];
+	};
+	function fetch_all() {
+		stats_general();
+		stats_runners();
+		// stats_runners_by_laptime();
+		stats_orgs();
+		stats_teams();
+	}
+	fetch_all();
+	setInterval(() => {
+		time = new Date();
+	}, 1000);
+	setInterval(() => {
+		fetch_all();
+	}, 50000);
+	setInterval(() => {
+		current_page = pages.cycle(current_page);
+	}, 20000);
 </script>
 
 <div
-  class="min-h-screen flex items-center justify-center bg-gray-100"
-  style="background-image: url({bg});background-position: center;background-size: contain;background-repeat:no-repeat;"
+	class="min-h-screen flex items-center justify-center bg-gray-100"
+	style="background-image: url({bg});background-position: center;background-size: contain;background-repeat:no-repeat;"
 >
-  <div class="w-full">
-    <div class="w-3/4 xl:w-1/2 mx-auto">
-      <!--  -->
-      {#if current_page === "general"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900"
-          >
-            Statistiken
-          </h1>
-          <!--  -->
-          <div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-              <h1 class="text-5xl font-bold text-center text-gray-900">
-                {general.total_runners || "0"}
-              </h1>
-              <h1 class="text-2xl font-semibold text-center text-gray-900">
-                {$_("laeufer")}
-              </h1>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-              <h1 class="text-5xl font-bold text-center text-gray-900">
-                {general.total_distance || "0"}
-              </h1>
-              <h1 class="text-2xl font-semibold text-center text-gray-900">
-                {$_("kilometer-gesamt")}
-              </h1>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
-              <h1 class="text-5xl font-bold text-center text-gray-900">
-                {parseFloat(
-                  ((general.total_donation || 0) / 100).toFixed(2)
-                ).toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                }) || "0"} €
-              </h1>
-              <h1 class="text-2xl font-semibold text-center text-gray-900">
-                {$_("spendensumme")}
-              </h1>
-            </div>
-          </div>
-        </div>
-      {:else if current_page === "runners_distance"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-laeufer")} ({$_("distanz")})
-          </h1>
-          {#if runners_by_laptime.length === 0}
-            <p class="w-full text-center text-3xl font-semibold">
-              Noch keine Daten...
-            </p>
-          {:else}
-            <table
-              class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-            >
-              <thead>
-                <tr>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("platz")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("laeufer")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("organisation")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("kilometer")}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each runners as r, i}
-                  <tr class="text-gray-700">
-                    <td class="border p-4 dark:border-dark-5">
-                      {i + 1}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.firstname}
-                      {r.lastname}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.group.name}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.distance / 1000} km
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
-      {:else if current_page === "runners_laptime"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-laeufer")} ({$_("rundenzeit")})
-          </h1>
-          {#if runners_by_laptime.length === 0}
-            <p class="w-full text-center text-3xl font-semibold">
-              Noch keine Daten...
-            </p>
-          {:else}
-            <table
-              class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-            >
-              <thead>
-                <tr>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("platz")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("laeufer")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("organisation")}
-                  </th>
-                  <th
-                    class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                  >
-                    {$_("schnellste-rundenzeit")}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each runners_by_laptime as r, i}
-                  <tr class="text-gray-700">
-                    <td class="border p-4 dark:border-dark-5">
-                      {i + 1}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.firstname}
-                      {r.lastname}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {r.group.name}
-                    </td>
-                    <td class="border p-4 dark:border-dark-5">
-                      {format_laptime(r.minLaptime)}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          {/if}
-        </div>
-      {:else if current_page === "orgs_distance"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-organisationen")}
-          </h1>
-          <table
-            class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-          >
-            <thead>
-              <tr>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("platz")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("organsiation")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("kilometer")}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each orgs as o, i}
-                <tr class="text-gray-700">
-                  <td class="border p-4 dark:border-dark-5">
-                    {i + 1}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {o.name}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {o.distance / 1000} km
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {:else if current_page === "teams_distance"}
-        <div transition:slide|local>
-          <h1
-            class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
-          >
-            {$_("top-teams")}
-          </h1>
-          <table
-            class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
-          >
-            <thead>
-              <tr>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("platz")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("team")}
-                </th>
-                <th
-                  class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
-                >
-                  {$_("kilometer")}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each teams as t, i}
-                <tr class="text-gray-700">
-                  <td class="border p-4 dark:border-dark-5">
-                    {i + 1}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {t.name}
-                  </td>
-                  <td class="border p-4 dark:border-dark-5">
-                    {t.distance / 1000} km
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {:else}
-        <!-- content here -->
-      {/if}
-    </div>
-  </div>
-  <h1
-    class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
-  >
-    {hours}:{minutes}:{seconds}
-  </h1>
-  <h1
-    class="text-xl xl:text-3xl font-medium text-center text-gray-900 font-mono bottom-2 xl:bottom-4 w-full fixed"
-  >
-    <span class="text-black font-extrabold">LfK!2023 </span>powered by
-    ODIT.Services
-  </h1>
+	<div class="w-full">
+		<div class="w-3/4 xl:w-1/2 mx-auto">
+			<!--  -->
+			{#if current_page === "general"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900"
+					>
+						{$_("statistiken")}
+					</h1>
+					<!--  -->
+					<div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
+						<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+							<h1 class="text-5xl font-bold text-center text-gray-900">
+								{general.total_runners || "0"}
+							</h1>
+							<h1 class="text-2xl font-semibold text-center text-gray-900">
+								{$_("laeufer")}
+							</h1>
+						</div>
+						<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+							<h1 class="text-5xl font-bold text-center text-gray-900">
+								{general.total_distance / 1000 || 0}
+							</h1>
+							<h1 class="text-2xl font-semibold text-center text-gray-900">
+								{$_("kilometer-gesamt")}
+							</h1>
+						</div>
+						<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
+							<h1 class="text-5xl font-bold text-center text-gray-900">
+								{parseFloat(
+									((general.total_donation || 0) / 100).toFixed(2)
+								).toLocaleString(undefined, {
+									minimumFractionDigits: 2,
+									maximumFractionDigits: 2,
+								}) || "0"} €
+							</h1>
+							<h1 class="text-2xl font-semibold text-center text-gray-900">
+								{$_("spendensumme")}
+							</h1>
+						</div>
+					</div>
+				</div>
+			{:else if current_page === "runners_distance"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-laeufer")} ({$_("distanz")})
+					</h1>
+					{#if runners.length === 0}
+						<p class="w-full text-center text-3xl font-semibold">
+							Noch keine Daten...
+						</p>
+					{:else}
+						<table
+							class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+						>
+							<thead>
+								<tr>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("platz")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("laeufer")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("organisation")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("kilometer")}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each runners as r, i}
+									<tr class="text-gray-700">
+										<td class="border p-4 dark:border-dark-5">
+											{i + 1}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.firstname}
+											{r.lastname}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.group.name}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.distance / 1000} km
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/if}
+				</div>
+			{:else if current_page === "runners_laptime"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-laeufer")} ({$_("rundenzeit")})
+					</h1>
+					{#if runners_by_laptime.length === 0}
+						<p class="w-full text-center text-3xl font-semibold">
+							Noch keine Daten...
+						</p>
+					{:else}
+						<table
+							class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+						>
+							<thead>
+								<tr>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("platz")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("laeufer")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("organisation")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("schnellste-rundenzeit")}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each runners_by_laptime as r, i}
+									<tr class="text-gray-700">
+										<td class="border p-4 dark:border-dark-5">
+											{i + 1}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.firstname}
+											{r.lastname}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{r.group.name}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{format_laptime(r.minLaptime)}
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/if}
+				</div>
+			{:else if current_page === "orgs_distance"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-organisationen")}
+					</h1>
+					{#if orgs.length === 0}
+						<p class="w-full text-center text-3xl font-semibold">
+							Noch keine Daten...
+						</p>
+					{:else}
+						<table
+							class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+						>
+							<thead>
+								<tr>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("platz")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("organsiation")}
+									</th>
+									<th
+										class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+									>
+										{$_("kilometer")}
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each orgs as o, i}
+									<tr class="text-gray-700">
+										<td class="border p-4 dark:border-dark-5">
+											{i + 1}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{o.name}
+										</td>
+										<td class="border p-4 dark:border-dark-5">
+											{o.distance / 1000} km
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/if}
+				</div>
+			{:else if current_page === "teams_distance"}
+				<div transition:slide|local>
+					<h1
+						class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
+					>
+						{$_("top-teams")}
+					</h1>
+					<table
+						class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
+					>
+						<thead>
+							<tr>
+								<th
+									class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+								>
+									{$_("platz")}
+								</th>
+								<th
+									class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+								>
+									{$_("team")}
+								</th>
+								<th
+									class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
+								>
+									{$_("kilometer")}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each teams as t, i}
+								<tr class="text-gray-700">
+									<td class="border p-4 dark:border-dark-5">
+										{i + 1}
+									</td>
+									<td class="border p-4 dark:border-dark-5">
+										{t.parent.name}<br />
+										{t.name}
+									</td>
+									<td class="border p-4 dark:border-dark-5">
+										{t.distance / 1000} km
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{:else}
+				<!-- content here -->
+			{/if}
+		</div>
+	</div>
+	<h1
+		class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
+	>
+		{hours}:{minutes}:{seconds}
+	</h1>
+	<h1
+		class="text-xl xl:text-3xl font-medium text-center text-gray-900 font-mono bottom-2 xl:bottom-4 w-full fixed"
+	>
+		<span class="text-black font-extrabold">Lauf für Kaya!</span> - powered by ODIT.Services
+	</h1>
 </div>

src/Login.svelte

@@ -1,4 +1,5 @@
 <script>
+  import bg from "/beamershow_background.png?inline";
   import { apikey, lang, api_endpoint, laptime_track, clear } from "./store.js";
   import isURL from "validator/lib/isURL";
   import isUUID from "validator/lib/isUUID";
@@ -253,7 +254,7 @@
     <img
       alt=""
       class="object-cover w-full h-screen hidden md:block"
-      src="https://source.unsplash.com/IXUM4cJynP0"
+      src={bg}
     />
   </div>
 </div>

src/locales/de.json

@@ -30,6 +30,7 @@
     "spendensumme": "Spendensumme",
     "station_description": "Beschreibung der Scanstation",
     "station_id": "Scanstations-ID",
+    "statistiken": "Statistiken",
     "team": "Team",
     "the_provided_scan_station_is_disabled": "Die angegebene Scanstation ist deaktiviert.",
     "the_provided_scan_station_token_is_invalid": "Der angegebene Scanstation-Token ist ungültig.",

src/locales/en.json

@@ -30,6 +30,7 @@
     "spendensumme": "Donations",
     "station_description": "Station Description",
     "station_id": "Scanstation ID",
+    "statistiken": "Statistics",
     "team": "Team",
     "the_provided_scan_station_is_disabled": "The provided scan station is disabled.",
     "the_provided_scan_station_token_is_invalid": "The provided scan station token is invalid.",