From f54225698f9dc3455ca98fea96376c81d1519a61 Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Sat, 6 Aug 2022 12:18:12 +0300
Subject: [PATCH] Add home page content

---
 src/components/Page/Page.tsx    |   3 +-
 src/styles/components.css       |  12 +++-
 src/views/HomeView/HomeView.tsx | 123 ++++++++++++++++++++++++++++++++
 src/views/HomeView/index.ts     |   1 +
 4 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 src/views/HomeView/HomeView.tsx
 create mode 100644 src/views/HomeView/index.ts

diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index a079111..a0c01f6 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -6,6 +6,7 @@ import {
   ExpressionSetListView,
 } from "../../views";
 import { AddExpressionView } from "../../views/AddExpressionView";
+import { HomeView } from "../../views/HomeView";
 
 export function Page() {
   const { route } = useContext(AppRouting);
@@ -13,7 +14,7 @@ export function Page() {
 
   switch (route.path) {
     case AppPath.Home:
-      return <p>TODO home</p>;
+      return <HomeView />;
     case AppPath.ExpressionSets:
       return <ExpressionSetListView />;
     case AppPath.ExpressionSetsDetails:
diff --git a/src/styles/components.css b/src/styles/components.css
index 4fd85aa..80f9b65 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -73,8 +73,12 @@ i {
   text-decoration: underline;
 }
 
+.link:visited {
+  color: purple;
+}
+
 .link:hover {
-  color: lightblue;
+  color: darkblue;
 }
 
 /* Page */
@@ -207,6 +211,12 @@ i {
   margin-top: var(--gap-medium);
 }
 
+.content-text {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .content-query {
   display: flex;
   flex-direction: column;
diff --git a/src/views/HomeView/HomeView.tsx b/src/views/HomeView/HomeView.tsx
new file mode 100644
index 0000000..474d771
--- /dev/null
+++ b/src/views/HomeView/HomeView.tsx
@@ -0,0 +1,123 @@
+export function HomeView() {
+  return (
+    <div className="page-with-padding content-text scroll">
+      <h1 className="text-title margin-title">Flash Card App</h1>
+      <p className="text-details margin-paragraph">
+        A handy tool for vocabulary practice through repetition. Go to{" "}
+        <i>settings -&gt; create card</i> to start adding words for practicing.
+        Once you have a few go to practice and start from your daily words.
+      </p>
+      <h2 className="text-title margin-title">Privacy</h2>
+      <p className="text-details margin-paragraph">
+        The app requests data from Wiktionary when you create study cards. Their
+        privacy policy can be found{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://foundation.wikimedia.org/wiki/Privacy_policy"
+        >
+          on this link
+        </a>
+        . Apart from the initial page load, this should be the only time any
+        data transfer happens during the usage of the app.
+      </p>
+      <p className="text-details margin-paragraph">
+        Once you save a card, it is stored on your own device and never
+        transmitted anywhere else.
+      </p>
+      <h2 className="text-title margin-title">Licensing</h2>
+      <p className="text-details margin-paragraph">
+        Human-readable summary:{" "}
+        <strong>
+          You are free to use the app for any purposes. You are free to modify
+          and redistribute the app as long as you grant your users access to the
+          source-code, content and assets you modify and redistribute under the
+          same terms listed below.{" "}
+        </strong>{" "}
+        As long as you follow those rules, you don't need to contact the
+        author(s) about it.
+      </p>
+      <p className="text-details margin-paragraph">
+        The user-interface icons are licensed under the{" "}
+        <a className="link" target="_blank" href="/icons/icons-license.txt">
+          MIT license
+        </a>
+        .
+      </p>
+      <p className="text-details margin-paragraph">
+        The content for the flash cards generated is dual-licensed under{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://en.wiktionary.org/wiki/Wiktionary:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License"
+        >
+          Creative Commons Attribution-ShareAlike 3.0 Unported License
+        </a>{" "}
+        and the{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://en.wiktionary.org/wiki/Wiktionary:GNU_Free_Documentation_License"
+        >
+          GNU Free Documentation License
+        </a>
+        .
+      </p>
+      <p className="text-details margin-paragraph">
+        The rest of the application and its assets are licensed under the{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://www.gnu.org/licenses/agpl-3.0.en.html"
+        >
+          GNU Affero General Public License version 3
+        </a>
+        .
+      </p>
+      <p className="text-details margin-paragraph">
+        The official source code repository for this application can be found at{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://git.studycardtool.org/tcoh/app"
+        >
+          git.studycardtool.org/tcoh/app
+        </a>
+        .
+      </p>
+      <h2 className="text-title margin-title">Support the app</h2>
+      <p className="text-details margin-paragraph">
+        This app would not exist if it was not for Wiktionary and the Wikimedia
+        foundation. If you want to support anyone, consider donating to the{" "}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          href="https://wikimediafoundation.org/"
+        >
+          Wikimedia Foundation
+        </a>
+        . This app or its author is in no way affiliated with the Wikimedia
+        Foundation, it just makes use of its data.
+      </p>
+      <h2 className="text-title margin-title">Contributing</h2>
+      <p className="text-details margin-paragraph">
+        The main thing on the roadmap is improved language support for
+        vocabulary practice. The app still needs bugfixes, code and style
+        cleanup and potentially rethinking of some existing features.
+        Contributions introducing a need for smarter backend functionality than
+        a static file server are in principle unwelcome in this project.
+      </p>
+      <p className="text-details margin-paragraph">
+        There are a few pending tasks in server configuration and testing, but
+        once those are done local gitea registrations for contributors should
+        open and potentially federated accounts as well.
+      </p>
+    </div>
+  );
+}
diff --git a/src/views/HomeView/index.ts b/src/views/HomeView/index.ts
new file mode 100644
index 0000000..fdb4e69
--- /dev/null
+++ b/src/views/HomeView/index.ts
@@ -0,0 +1 @@
+export * from "./HomeView";