From 5741cbe7562542ba2b81a9a6d6be7fb0f5145801 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 29 Jan 2021 19:02:53 +0100
Subject: [PATCH] added Privacy page

ref #46
---
 public/privacy_en.md          |  1 +
 src/App.svelte                |  5 ++++
 src/components/Imprint.svelte | 17 +++++++-------
 src/components/Privacy.svelte | 43 +++++++++++++++++++++++++++++++++++
 src/components/imprint.css    |  1 -
 src/components/simple.css     |  1 +
 src/locales/en.json           |  2 ++
 7 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 public/privacy_en.md
 create mode 100644 src/components/Privacy.svelte
 delete mode 100644 src/components/imprint.css
 create mode 100644 src/components/simple.css

diff --git a/public/privacy_en.md b/public/privacy_en.md
new file mode 100644
index 00000000..a56808ce
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 80bc0d87..78f36281 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -51,6 +51,7 @@
   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>
@@ -68,6 +69,10 @@
     <Route path="/imprint">
       <Imprint />
     </Route>
+  {:else if $router.path === '/privacy'}
+    <Route path="/privacy">
+      <Privacy />
+    </Route>
   {:else if $store.isLoggedIn}
     <Dashboard>
       <Transition>
diff --git a/src/components/Imprint.svelte b/src/components/Imprint.svelte
index dcb6a07d..6aa359e9 100644
--- a/src/components/Imprint.svelte
+++ b/src/components/Imprint.svelte
@@ -1,17 +1,16 @@
 <script>
   import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import * as css from "./imprint.css";
+  import * as css from "./simple.css";
   import marked from "marked";
-  let imprint_promise = Promise.resolve([]);
-  let imprinthtml = "";
-  async function loadImprint() {
+  let html = "";
+  async function load() {
     let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
     if (!md.ok) {
       md = await fetch("/imprint_en.md");
     }
-    imprinthtml = marked(await md.text());
+    html = marked(await md.text());
   }
-  imprint_promise = loadImprint();
+  const promise = load();
 </script>
 
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
@@ -25,11 +24,11 @@
 
 <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 imprint_promise}
+    {#await promise}
       <p class="text-center w-full">{$_('imprint-loading')}</p>
     {:then}
-      <div class="imprintcontent">
-        {@html imprinthtml}
+      <div class="simplecontent">
+        {@html html}
       </div>
     {:catch error}
       <div
diff --git a/src/components/Privacy.svelte b/src/components/Privacy.svelte
new file mode 100644
index 00000000..9b17d9ff
--- /dev/null
+++ b/src/components/Privacy.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { _, getLocaleFromNavigator } from "svelte-i18n";
+  import * as css from "./simple.css";
+  import marked from "marked";
+  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>
diff --git a/src/components/imprint.css b/src/components/imprint.css
deleted file mode 100644
index e3cd53da..00000000
--- a/src/components/imprint.css
+++ /dev/null
@@ -1 +0,0 @@
-.imprintcontent *{margin:0;padding:0}.imprintcontent address,.imprintcontent area,.imprintcontent article,.imprintcontent aside,.imprintcontent audio,.imprintcontent blockquote,.imprintcontent datalist,.imprintcontent details,.imprintcontent dl,.imprintcontent fieldset,.imprintcontent figure,.imprintcontent form,.imprintcontent iframe,.imprintcontent img,.imprintcontent input,.imprintcontent meter,.imprintcontent nav,.imprintcontent ol,.imprintcontent optgroup,.imprintcontent option,.imprintcontent output,.imprintcontent p,.imprintcontent pre,.imprintcontent progress,.imprintcontent ruby,.imprintcontent section,.imprintcontent table,.imprintcontent textarea,.imprintcontent ul,.imprintcontent video{margin-bottom:1rem}.imprintcontent button,.imprintcontent html,.imprintcontent input,.imprintcontent select{font-family:var(--nc-font-sans)}.imprintcontent body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}.imprintcontent ::-moz-selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}.imprintcontent ::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}.imprintcontent h1,.imprintcontent h2,.imprintcontent h3,.imprintcontent h4,.imprintcontent h5,.imprintcontent h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}.imprintcontent h1,.imprintcontent h2,.imprintcontent h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}.imprintcontent h4,.imprintcontent h5,.imprintcontent h6{margin-bottom:.3rem}.imprintcontent h1{font-size:2.25rem}.imprintcontent h2{font-size:1.85rem}.imprintcontent h3{font-size:1.55rem}.imprintcontent h4{font-size:1.25rem}.imprintcontent h5{font-size:1rem}.imprintcontent h6{font-size:.875rem}.imprintcontent a{color:#3d5af1}.imprintcontent a:hover{color:var(--nc-lk-2)}.imprintcontent abbr:hover{cursor:help}.imprintcontent blockquote{padding:1.5rem;background:#ddd;border-left:5px solid var(--nc-bg-3)}.imprintcontent abbr{cursor:help}.imprintcontent blockquote :last-child{padding-bottom:0;margin-bottom:0}.imprintcontent header{background:#ddd;border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}.imprintcontent header h1,.imprintcontent header h2,.imprintcontent header h3{padding-bottom:0;border-bottom:0}.imprintcontent header>:first-child{margin-top:0;padding-top:0}.imprintcontent header>:last-child{margin-bottom:0}.imprintcontent a button,.imprintcontent button,.imprintcontent input[type=button],.imprintcontent input[type=reset],.imprintcontent input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:#3d5af1;color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}.imprintcontent a button[disabled],.imprintcontent button[disabled],.imprintcontent input[type=button][disabled],.imprintcontent input[type=reset][disabled],.imprintcontent input[type=submit][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.imprintcontent .button:focus,.imprintcontent .button:hover,.imprintcontent button:focus,.imprintcontent button:hover,.imprintcontent input[type=button]:focus,.imprintcontent input[type=button]:hover,.imprintcontent input[type=reset]:focus,.imprintcontent input[type=reset]:hover,.imprintcontent input[type=submit]:focus,.imprintcontent input[type=submit]:hover{background:var(--nc-lk-2)}.imprintcontent code,.imprintcontent kbd,.imprintcontent pre,.imprintcontent samp{font-family:var(--nc-font-mono)}.imprintcontent code,.imprintcontent kbd,.imprintcontent pre,.imprintcontent samp{background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}.imprintcontent kbd{border-bottom:3px solid var(--nc-bg-3)}.imprintcontent pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}.imprintcontent pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.imprintcontent code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.imprintcontent details{padding:.6rem 1rem;background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px}.imprintcontent summary{cursor:pointer;font-weight:700}.imprintcontent details[open]{padding-bottom:.75rem}.imprintcontent details[open] summary{margin-bottom:6px}.imprintcontent details[open]>:last-child{margin-bottom:0}.imprintcontent dt{font-weight:700}.imprintcontent dd::before{content:"→ "}.imprintcontent hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}.imprintcontent fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}.imprintcontent legend{padding:auto .5rem}.imprintcontent table{border-collapse:collapse;width:100%}.imprintcontent td,.imprintcontent th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}.imprintcontent th{background:#ddd}.imprintcontent tr:nth-child(even){background:#ddd}.imprintcontent table caption{font-weight:700;margin-bottom:.5rem}.imprintcontent textarea{max-width:100%}.imprintcontent ol,.imprintcontent ul{padding-left:2rem}.imprintcontent li{margin-top:.4rem}.imprintcontent ol ol,.imprintcontent ol ul,.imprintcontent ul ol,.imprintcontent ul ul{margin-bottom:0}.imprintcontent mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}.imprintcontent input,.imprintcontent select,.imprintcontent textarea{padding:6px 12px;margin-bottom:.5rem;background:#ddd;color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}.imprintcontent img{max-width:100%}.imprintcontent blockquote{background:#ececec;}.imprintcontent ol{list-style-type: decimal;} .imprintcontent ul{list-style-type: circle;}
\ No newline at end of file
diff --git a/src/components/simple.css b/src/components/simple.css
new file mode 100644
index 00000000..013f45e7
--- /dev/null
+++ b/src/components/simple.css
@@ -0,0 +1 @@
+.simplecontent *{margin:0;padding:0}.simplecontent address,.simplecontent area,.simplecontent article,.simplecontent aside,.simplecontent audio,.simplecontent blockquote,.simplecontent datalist,.simplecontent details,.simplecontent dl,.simplecontent fieldset,.simplecontent figure,.simplecontent form,.simplecontent iframe,.simplecontent img,.simplecontent input,.simplecontent meter,.simplecontent nav,.simplecontent ol,.simplecontent optgroup,.simplecontent option,.simplecontent output,.simplecontent p,.simplecontent pre,.simplecontent progress,.simplecontent ruby,.simplecontent section,.simplecontent table,.simplecontent textarea,.simplecontent ul,.simplecontent video{margin-bottom:1rem}.simplecontent button,.simplecontent html,.simplecontent input,.simplecontent select{font-family:var(--nc-font-sans)}.simplecontent body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}.simplecontent ::-moz-selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}.simplecontent ::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}.simplecontent h1,.simplecontent h2,.simplecontent h3,.simplecontent h4,.simplecontent h5,.simplecontent h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}.simplecontent h1,.simplecontent h2,.simplecontent h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}.simplecontent h4,.simplecontent h5,.simplecontent h6{margin-bottom:.3rem}.simplecontent h1{font-size:2.25rem}.simplecontent h2{font-size:1.85rem}.simplecontent h3{font-size:1.55rem}.simplecontent h4{font-size:1.25rem}.simplecontent h5{font-size:1rem}.simplecontent h6{font-size:.875rem}.simplecontent a{color:#3d5af1}.simplecontent a:hover{color:var(--nc-lk-2)}.simplecontent abbr:hover{cursor:help}.simplecontent blockquote{padding:1.5rem;background:#ddd;border-left:5px solid var(--nc-bg-3)}.simplecontent abbr{cursor:help}.simplecontent blockquote :last-child{padding-bottom:0;margin-bottom:0}.simplecontent header{background:#ddd;border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}.simplecontent header h1,.simplecontent header h2,.simplecontent header h3{padding-bottom:0;border-bottom:0}.simplecontent header>:first-child{margin-top:0;padding-top:0}.simplecontent header>:last-child{margin-bottom:0}.simplecontent a button,.simplecontent button,.simplecontent input[type=button],.simplecontent input[type=reset],.simplecontent input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:#3d5af1;color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}.simplecontent a button[disabled],.simplecontent button[disabled],.simplecontent input[type=button][disabled],.simplecontent input[type=reset][disabled],.simplecontent input[type=submit][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.simplecontent .button:focus,.simplecontent .button:hover,.simplecontent button:focus,.simplecontent button:hover,.simplecontent input[type=button]:focus,.simplecontent input[type=button]:hover,.simplecontent input[type=reset]:focus,.simplecontent input[type=reset]:hover,.simplecontent input[type=submit]:focus,.simplecontent input[type=submit]:hover{background:var(--nc-lk-2)}.simplecontent code,.simplecontent kbd,.simplecontent pre,.simplecontent samp{font-family:var(--nc-font-mono)}.simplecontent code,.simplecontent kbd,.simplecontent pre,.simplecontent samp{background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}.simplecontent kbd{border-bottom:3px solid var(--nc-bg-3)}.simplecontent pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}.simplecontent pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.simplecontent code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.simplecontent details{padding:.6rem 1rem;background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px}.simplecontent summary{cursor:pointer;font-weight:700}.simplecontent details[open]{padding-bottom:.75rem}.simplecontent details[open] summary{margin-bottom:6px}.simplecontent details[open]>:last-child{margin-bottom:0}.simplecontent dt{font-weight:700}.simplecontent dd::before{content:"→ "}.simplecontent hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}.simplecontent fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}.simplecontent legend{padding:auto .5rem}.simplecontent table{border-collapse:collapse;width:100%}.simplecontent td,.simplecontent th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}.simplecontent th{background:#ddd}.simplecontent tr:nth-child(even){background:#ddd}.simplecontent table caption{font-weight:700;margin-bottom:.5rem}.simplecontent textarea{max-width:100%}.simplecontent ol,.simplecontent ul{padding-left:2rem}.simplecontent li{margin-top:.4rem}.simplecontent ol ol,.simplecontent ol ul,.simplecontent ul ol,.simplecontent ul ul{margin-bottom:0}.simplecontent mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}.simplecontent input,.simplecontent select,.simplecontent textarea{padding:6px 12px;margin-bottom:.5rem;background:#ddd;color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}.simplecontent img{max-width:100%}.simplecontent blockquote{background:#ececec;}.simplecontent ol{list-style-type: decimal;} .simplecontent ul{list-style-type: circle;}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index d4ae21c3..215fa57a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -128,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",