add info page

index.js

@@ -1,7 +1,8 @@
 "use strict";
 
-import Layout from "/ui/layout.js";
 import BaseView from "/ui/base_view.js";
+import InfoView from "/ui/info_view.js";
+import Layout from "/ui/layout.js";
 
 m.route.prefix = "";
 m.route(document.body, "/", {
@@ -18,4 +19,9 @@ m.route(document.body, "/", {
       );
     },
   },
+  "/info": {
+    render: function() {
+      return m(Layout, { backHref: "/" }, m(InfoView));
+    }
+  }
 });

style.css

@@ -142,6 +142,10 @@ body {
   flex-direction: column;
 }
 
+a {
+  color: var(--color-accent);
+}
+
 h1 {
   font-size: 2em;
   margin-top: 0.75em;

ui/box.css

@@ -1,7 +1,7 @@
 .wb-box {
   padding: 1em;
 
-  >* {
+  &:not(.-no-width)>* {
     width: 100%;
   }
 }

ui/info_view.js

@@ -0,0 +1,52 @@
+const GH_PRIV_URL =
+  "https://docs.github.com/de/site-policy/privacy-policies" +
+  "/github-general-privacy-statement";
+const REPO_GITEA = "https://git.tfld.dev/tfld/watterblock";
+const REPO_GH = "https://github.com/TeFiLeDo/watterblock";
+
+export default class InfoView {
+  view() {
+    return m(".wb-box.-no-width", [
+      m("h2._positioned-top", "Infos"),
+      m("p",
+        "Des is a Webseitn, auf dea du ganz oanfach deine Watta-Spiele ",
+        "mitschreim kannst. Und hier kannst a paar Infos dazu nachlesn."
+      ),
+      m("p",
+        "Zerst'amal isses so, dass de Datn was du eingibsch nur direkt in ",
+        "deim Browser gspeichert wern. Beim Aufmachn von da Seitn muas se ",
+        "aba east vom Serva gladn werdn. Dea is von GitHub, und da findest ",
+        "eanare ", m("a", { href: GH_PRIV_URL}, "Datnschut-Erklärung"), "."
+      ),
+      m("p",
+        "Den Kod fia de Seitn findest ",
+        m("a", { href: REPO_GITEA }, "oamal da"), " und weils so schean war a ",
+        m("a", { href: REPO_GH }, "noamal da"), ". Dea ganze Spaß steht unta",
+        "da MIT-Lizenz, daher kannst damit sogar fast alles machn was ",
+        "willst, unta a boa minimale Bedingungen."
+      ),
+      m("h3", "Fragn"),
+      m("ol._unpadded", [
+        m("li", { lang: "de-AT" }, [
+          m("strong",
+            "Warum ist diese Webseite in solch seltsamer Schrift verfasst?"),
+          m("br"),
+          "Das ist ganz einfach eine schriftliche Annäherung an den ",
+          m("em", "Tiroler Dialekt"), ", den ich spreche",
+        ]),
+        m("li", [
+          m("strong", "Wo find i denn die Lizenzn von die verwendetn Sachn?"),
+          m("br"),
+          "In da ", m("a", { href: "/README.md" }, "README-Datei"), ", de du ",
+          "a in scheanara Variante ", m("a", { href: REPO_GITEA }, "da"), " ",
+          "oda ", m("a", { href: REPO_GH }, "da"), " anschaugn kannst.",
+        ]),
+        m("li", [
+          m("strong", "Fridattn- oda Kasspressknedlsuppn?"), m("br"),
+          "Kimmt drauf un. Wenn di Fridattn kloan gnuag gschnittn sen, dass ",
+          "se ganz aufm Löffl platz habn, dann de. Ansonstn liaba nit.",
+        ]),
+      ]),
+    ]);
+  }
+}

ui/layout.css

@@ -3,11 +3,14 @@
     display: flex;
     align-items: center;
 
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
     >* {
       padding: 0.5em 0.25em;
       font-size: 2em;
-      color: inherit;
-      text-decoration: none;
       margin: 0;
 
       &:first-child {
@@ -22,6 +25,10 @@
       &:last-child {
         padding-right: 0.5em;
       }
+
+      &.spacer {
+        flex-grow: 1;
+      }
     }
   }
 

ui/layout.js

@@ -48,7 +48,8 @@ export default class Layout {
     return m.fragment([
       m("header.header._alternate._apply", [
         backHref ? m(m.route.Link, { href: backHref }, "←") : null,
-        m("h1", "Watterblock"),
+        m("h1.spacer", m(m.route.Link, { href: "/" }, "Watterblock")),
+        m(m.route.Link, { href: "/info" }, "🛈"),
       ]),
       m("main.main", children),
     ]);