package.json

@@ -18,6 +18,7 @@
 		"gridjs": "3.2.2",
 		"localforage": "1.9.0",
 		"lodash.isequal": "^4.5.0",
+		"marked": "^1.2.8",
 		"svelte-filepond": "0.0.1",
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",

public/imprint_en.md

@@ -0,0 +1 @@
+Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.

public/privacy_en.md

@@ -0,0 +1 @@
+Nostrud tempor dolor aute ea excepteur aute mollit elit eiusmod exercitation. Magna laborum pariatur adipisicing pariatur cupidatat exercitation duis aliquip pariatur sint exercitation deserunt labore. Consectetur id laboris dolore nostrud do velit ipsum. Eu laboris velit do commodo ad ea sint ex cillum. Cillum ipsum qui eiusmod laborum mollit sunt dolore incididunt. Cillum sunt culpa veniam voluptate et qui ut magna anim occaecat ut mollit dolor. Duis irure proident eu incididunt dolore sunt nisi aute dolore amet eu fugiat laboris quis.

src/App.svelte

@@ -50,6 +50,8 @@
   import TeamDetail from "./components/TeamDetail.svelte";
   import UserPermissions from "./components/UserPermissions.svelte";
   import RunnerDetail from "./components/RunnerDetail.svelte";
+  import Imprint from "./components/Imprint.svelte";
+  import Privacy from "./components/Privacy.svelte";
   store.init();
   registerSW();
 </script>
@@ -63,6 +65,14 @@
     <Route path="/about">
       <About />
     </Route>
+  {:else if $router.path === '/imprint'}
+    <Route path="/imprint">
+      <Imprint />
+    </Route>
+  {:else if $router.path === '/privacy'}
+    <Route path="/privacy">
+      <Privacy />
+    </Route>
   {:else if $store.isLoggedIn}
     <Dashboard>
       <Transition>

src/components/Footer.svelte

@@ -31,5 +31,9 @@
       target="_blank"
       rel="noopener, noreferrer"
       href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+    -
+    <a class="underline" href="/privacy">{$_('privacy')}</a>
+    -
+    <a class="underline" href="/imprint">{$_('imprint')}</a>
   </p>
 </footer>

src/components/Imprint.svelte

@@ -0,0 +1,45 @@
+<script>
+  import { _, getLocaleFromNavigator } from "svelte-i18n";
+  import * as css from "./simple.css";
+  import marked from "marked";
+  import Footer from "./Footer.svelte";
+  let html = "";
+  async function load() {
+    let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
+    if (!md.ok) {
+      md = await fetch("/imprint_en.md");
+    }
+    html = marked(await md.text());
+  }
+  const promise = load();
+</script>
+
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      {$_('imprint')}
+    </h1>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    {#await promise}
+      <p class="text-center w-full">{$_('imprint-loading')}</p>
+    {:then}
+      <div class="simplecontent">
+        {@html html}
+      </div>
+    {:catch error}
+      <div
+        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        <span class="inline-block align-middle mr-8">
+          <b class="capitalize">{$_('general_promise_error')}</b>
+          {error}
+        </span>
+      </div>
+    {/await}
+  </div>
+</div>
+<Footer />

src/components/Privacy.svelte

@@ -0,0 +1,45 @@
+<script>
+  import { _, getLocaleFromNavigator } from "svelte-i18n";
+  import * as css from "./simple.css";
+  import marked from "marked";
+  import Footer from "./Footer.svelte";
+  let html = "";
+  async function load() {
+    let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
+    if (!md.ok) {
+      md = await fetch("/privacy_en.md");
+    }
+    html = marked(await md.text());
+  }
+  const promise = load();
+</script>
+
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      {$_('privacy')}
+    </h1>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    {#await promise}
+      <p class="text-center w-full">{$_('privacy-loading')}</p>
+    {:then}
+      <div class="simplecontent">
+        {@html html}
+      </div>
+    {:catch error}
+      <div
+        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        <span class="inline-block align-middle mr-8">
+          <b class="capitalize">{$_('general_promise_error')}</b>
+          {error}
+        </span>
+      </div>
+    {/await}
+  </div>
+</div>
+<Footer />

src/locales/en.json

@@ -96,6 +96,8 @@
     "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
     "import-runners": "Import runners",
     "import__target-organization": "Target Organization",
+    "imprint": "Imprint 🧾",
+    "imprint-loading": "Imprint loading...",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
     "last-name": "Last name",
@@ -126,6 +128,8 @@
     "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
     "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
+    "privacy": "Privacy 🔒",
+    "privacy-loading": "Privacy loading...",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
     "register": "Register",