Add home page content WIP

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:

src/styles/components.css

@@ -207,6 +207,12 @@ i {
   margin-top: var(--gap-medium);
 }
 
+.content-text {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .content-query {
   display: flex;
   flex-direction: column;

src/views/HomeView/HomeView.tsx

@@ -0,0 +1,98 @@
+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 helping build vocabulary. 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">
+        HTTPS requests are made to Wiktionary during the card creation process.
+        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>
+        .
+      </p>
+      <p className="text-details margin-paragraph">
+        The cards that you save are locally stored and never transmitted
+        anywhere else.
+      </p>
+      <h2 className="text-title margin-title">Licenses</h2>
+      <p className="text-details margin-paragraph">
+        Human-readable summary: You are free to use the app for any purposes.
+        You are free to modify and redistribute the app{" "}
+        <strong>
+          as long as you grant your users access to reused or modified
+          source-code, content and assets 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>
+      <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>
+      <p className="text-details margin-paragraph">TODO contact info</p>
+    </div>
+  );
+}

src/views/HomeView/index.ts

@@ -0,0 +1 @@
+export * from "./HomeView";