From dab6947796ecd80bf1607fa4d99bfbfee105f1d8 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 28 Jun 2020 01:39:47 +0200
Subject: [PATCH] Start working on welcome page

---
 assets/images/outline.svg |  1 +
 assets/images/type.svg    | 64 +++++++++++++++++++++++++++++++++++++++
 index.html                |  9 +++++-
 src/index.ts              |  9 +++---
 style/main.scss           |  1 +
 style/pages/welcome.scss  | 21 +++++++++++++
 style/ui.scss             |  2 +-
 7 files changed, 101 insertions(+), 6 deletions(-)
 create mode 100644 assets/images/outline.svg
 create mode 100644 assets/images/type.svg
 create mode 100644 style/pages/welcome.scss

diff --git a/assets/images/outline.svg b/assets/images/outline.svg
new file mode 100644
index 0000000..b21da04
--- /dev/null
+++ b/assets/images/outline.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 257 256" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M.452 0h256v256h-256z"/><path d="M129.014 47.901c14.483-8.061 24.58-16.488 38.561-22.21 11.701-4.787 26.042-7.773 47.622-7.098l4.953.191.387 38.629c3.103-.006 6.211.039 9.325.125 4.938.135 9.889.377 14.854.714l5.498.445v5.516s.828 52.078 1.2 97.18c.287 34.428.274 64.787.274 64.787v8.059l-8.035-.627c-24.152-2.097-45.98-2.69-65.405-1.783-15.888.744-30.153 2.465-42.637 5.293l-5.597 1.36-1.562.402s-7.123-1.904-7.022-1.88c-12.547-3.165-26.793-5.311-42.704-6.393-19.473-1.324-41.39-1.078-65.663.59l-5.428.423.98-167.41V60.47l3.73-.302a365.634 365.634 0 0115.366-.843c3.83-.126 7.651-.188 11.465-.179l-.17-35.405V19.82l3.92-.152c21.43-.935 35.714 1.868 47.393 6.49 14.013 5.545 24.171 13.856 38.695 21.743zM47.14 27.724l-.17 35.345v3.927l-3.926-.039a309.957 309.957 0 00-15.027.31c-3.749.166-7.504.395-11.266.685l.923 152.758c22.638-1.796 43.225-2.242 61.695-1.39 16.71.77 31.707 2.619 44.997 5.622l4.004.974 4.183-1.13c13.195-3.32 28.18-5.559 44.911-6.685 17.804-1.198 37.6-1.116 59.32.14.013-11.236.069-33.072.265-56.847.302-36.326.897-77.176 1.118-91.7a320.475 320.475 0 00-8.775-.593c-4.8-.257-9.589-.413-14.365-.45l-5.626.03.394-39.953c-16.988-.321-28.824 2.01-38.643 5.876-14.403 5.673-24.606 14.425-39.985 22.47l-2.127 1.129-2.128-1.129c-15.313-8.223-25.44-17.087-39.798-22.934-10.059-4.098-22.25-6.643-39.974-6.416z" fill="#fff"/><path d="M124.388 234.209c-5.347-2.704-9.458-6.503-13.936-10.57-5.455-4.954-11.563-10.32-22.261-13.926-10.026-3.38-23.97-5.198-44.87-3.961l-4.9.25v-4.908s-.552-44.336-.426-88.676c.127-44.342.931-88.676.931-88.676v-3.997l3.995-.157c16.103-.402 28.11 1.236 38 4.113 19.276 5.607 30.377 16.066 48.121 25.984 17.751-9.894 28.863-20.327 48.135-25.92 9.887-2.868 21.887-4.508 37.98-4.104l3.925.153v3.928s.906 44.332 1.074 88.676c.169 44.338-.401 88.676-.401 88.676v5.006l-5-.255c-20.885-1.243-34.818.57-44.84 3.94-10.691 3.594-16.8 8.944-22.255 13.888-4.482 4.063-8.597 7.859-13.947 10.56v4.187l-4.685-2.092-4.645 2.068.005-4.187zm86.45-206.553c-17.768-.558-30.052 1.75-40.21 5.728-14.457 5.663-24.699 14.486-40.131 22.568l-1.456.776-1.457-.776c-15.441-8.058-25.697-16.856-40.157-22.506-10.14-3.962-22.397-6.271-40.12-5.72.198 11.843.76 48.264.864 84.692.101 35.61-.234 71.216-.371 83.859 19.759-.445 33.283 1.82 43.194 5.342 12.023 4.274 18.879 10.372 24.95 16.074 4.153 3.901 7.855 7.63 13.062 10.088 5.232-2.462 8.938-6.204 13.1-10.122 6.07-5.714 12.925-11.825 24.957-16.112 9.898-3.526 23.403-5.793 43.122-5.364-.142-12.727-.48-48.245-.346-83.765.138-36.504.777-73 1-84.762z" fill="#fff"/><path d="M131.84 227.74a2.942 2.942 0 01-5.415.025l-8.456-1.162s8.838-1.436 9.259-13.965c.047-1.4.121-1.6.206-1.03l.24-3.427c.855-12.83 1.453-27.634 1.453-27.634s.598 14.804 1.453 27.634c.169 2.522.349 4.962.524 7.197 1.498 10.005 9.008 11.225 9.008 11.225l-8.271 1.138zM129.727 49.702l-.01-.272 10.394 1.451s-8.837 1.458-9.258 14.178c-.047 1.421-.121 1.625-.206 1.045l-.24 3.48c-.856 13.026-1.453 28.054-1.453 28.054s-.598-15.028-1.454-28.054c-.168-2.56-.348-5.037-.523-7.307-1.498-10.156-9.008-11.396-9.008-11.396l10.396-1.45-.01.256c.453-.035.926-.03 1.372.015zM82.887 178.83V76.855H65.036V63.048h47.752v13.806l-17.851.001V178.83h-12.05zM179.476 63.122c9.006.741 13.57 7.034 13.57 18.736v15.147h-10.893V86.132c0-5.723-3.111-9.277-8.12-9.277h-9.215c-5.084 0-8.121 3.468-8.121 9.277v69.612c0 5.81 3.037 9.277 8.12 9.277h9.215c5.085 0 8.12-3.468 8.12-9.277v-23.627h-8.703v-13.809h19.596v41.711c0 12.482-5.192 18.81-15.43 18.81h-16.892c-5.092 0-8.954-1.528-11.48-4.542-2.622-3.125-3.95-7.925-3.95-14.27V81.859c0-6.343 1.328-11.144 3.95-14.27 2.525-3.012 6.388-4.54 11.479-4.54h16.894l1.86.074z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/assets/images/type.svg b/assets/images/type.svg
new file mode 100644
index 0000000..4a43abb
--- /dev/null
+++ b/assets/images/type.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 580 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-551,0)">
+        <g id="type" transform="matrix(1.08584,0,0,1.04219,551.714,-303.717)">
+            <rect x="0" y="291.618" width="533.452" height="248.494" style="fill:none;"/>
+            <g transform="matrix(0.698871,0,0,0.728145,5.21739,54.2528)">
+                <g transform="matrix(158.131,0,0,158.131,24.7618,449.92)">
+                    <path d="M0.008,-0.6L0.123,-0.6L0.123,0L0.233,0L0.233,-0.6L0.348,-0.6L0.348,-0.7L0.008,-0.7L0.008,-0.6Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,81.0564,449.92)">
+                    <path d="M0.205,-0.29L0.255,-0.29L0.255,-0.161C0.255,-0.111 0.233,-0.093 0.198,-0.093C0.163,-0.093 0.141,-0.111 0.141,-0.161L0.141,-0.539C0.141,-0.589 0.163,-0.608 0.198,-0.608C0.233,-0.608 0.255,-0.589 0.255,-0.539L0.255,-0.464L0.359,-0.464L0.359,-0.532C0.359,-0.644 0.303,-0.708 0.195,-0.708C0.087,-0.708 0.031,-0.644 0.031,-0.532L0.031,-0.168C0.031,-0.056 0.087,0.008 0.195,0.008C0.303,0.008 0.359,-0.056 0.359,-0.168L0.359,-0.39L0.205,-0.39L0.205,-0.29Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,142.727,449.92)">
+                    <path d="M0.185,-0.705C0.084,-0.704 0.041,-0.634 0.041,-0.532C0.041,-0.339 0.309,-0.345 0.309,-0.168C0.309,-0.083 0.276,-0.016 0.184,-0.016C0.092,-0.016 0.059,-0.083 0.059,-0.168L0.059,-0.203L0.038,-0.203L0.038,-0.169C0.038,-0.072 0.078,0.005 0.184,0.005C0.291,0.005 0.331,-0.072 0.331,-0.169C0.331,-0.359 0.063,-0.354 0.063,-0.533C0.063,-0.616 0.094,-0.685 0.186,-0.685C0.277,-0.685 0.308,-0.615 0.308,-0.532L0.308,-0.518L0.33,-0.518L0.33,-0.531C0.33,-0.627 0.291,-0.705 0.185,-0.705Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,201.078,449.92)">
+                    <path d="M0.193,0L0.193,-0.679L0.346,-0.679L0.346,-0.7L0.019,-0.7L0.019,-0.679L0.171,-0.679L0.171,0L0.193,0Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,253.103,449.92)">
+                    <path d="M0.347,-0.165L0.388,0L0.41,0L0.237,-0.701L0.206,-0.701L0.037,0L0.057,0L0.098,-0.165L0.347,-0.165ZM0.221,-0.675L0.343,-0.185L0.102,-0.185L0.221,-0.675Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,317.778,449.92)">
+                    <path d="M0.193,0L0.193,-0.679L0.346,-0.679L0.346,-0.7L0.019,-0.7L0.019,-0.679L0.171,-0.679L0.171,0L0.193,0Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,375.812,449.92)">
+                    <rect x="0.04" y="-0.7" width="0.022" height="0.7" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,391.941,449.92)">
+                    <path d="M0.039,-0.172C0.039,-0.074 0.081,0.005 0.187,0.005C0.295,0.005 0.337,-0.074 0.337,-0.172L0.337,-0.528C0.337,-0.626 0.295,-0.705 0.187,-0.705C0.081,-0.705 0.039,-0.626 0.039,-0.528L0.039,-0.172ZM0.061,-0.529C0.061,-0.615 0.094,-0.685 0.187,-0.685C0.281,-0.685 0.315,-0.615 0.315,-0.529L0.315,-0.171C0.315,-0.085 0.281,-0.015 0.187,-0.015C0.094,-0.015 0.061,-0.085 0.061,-0.171L0.061,-0.529Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(158.131,0,0,158.131,451.398,449.92)">
+                    <path d="M0.061,-0.668L0.311,0L0.338,0L0.338,-0.7L0.317,-0.7L0.317,-0.045L0.071,-0.7L0.04,-0.7L0.04,0L0.061,0L0.061,-0.668Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+            </g>
+            <g transform="matrix(1.5056,0,0,1.56867,-81.8441,-250.157)">
+                <g transform="matrix(97.8684,0,0,97.8684,65.99,495.372)">
+                    <path d="M0.15,-0.3L0.275,-0.3L0.275,0L0.387,0L0.387,-0.7L0.275,-0.7L0.275,-0.4L0.15,-0.4L0.15,-0.7L0.04,-0.7L0.04,0L0.15,0L0.15,-0.3Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,107.78,495.372)">
+                    <path d="M0.284,-0.7L0.123,-0.7L0.011,0L0.112,0L0.131,-0.127L0.266,-0.127L0.285,0L0.396,0L0.284,-0.7ZM0.198,-0.576L0.251,-0.222L0.145,-0.222L0.198,-0.576Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,147.612,495.372)">
+                    <path d="M0.275,0L0.388,0L0.388,-0.7L0.29,-0.7L0.29,-0.281L0.177,-0.7L0.039,-0.7L0.039,0L0.138,0L0.138,-0.507L0.275,0Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,189.402,495.372)">
+                    <path d="M0.04,0L0.214,0C0.324,0 0.378,-0.061 0.378,-0.173L0.378,-0.527C0.378,-0.639 0.324,-0.7 0.214,-0.7L0.04,-0.7L0.04,0ZM0.212,-0.6C0.247,-0.6 0.268,-0.582 0.268,-0.532L0.268,-0.168C0.268,-0.118 0.247,-0.1 0.212,-0.1L0.15,-0.1L0.15,-0.6L0.212,-0.6Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,229.332,495.372)">
+                    <path d="M0.206,-0.7L0.04,-0.7L0.04,0L0.213,0C0.323,0 0.38,-0.058 0.38,-0.166L0.38,-0.223C0.38,-0.297 0.357,-0.35 0.298,-0.373C0.347,-0.396 0.369,-0.442 0.369,-0.514L0.369,-0.539C0.369,-0.647 0.32,-0.7 0.206,-0.7L0.206,-0.7ZM0.199,-0.315C0.249,-0.315 0.27,-0.295 0.27,-0.23L0.27,-0.169C0.27,-0.117 0.25,-0.1 0.213,-0.1L0.15,-0.1L0.15,-0.315L0.199,-0.315ZM0.203,-0.6C0.242,-0.6 0.259,-0.578 0.259,-0.528L0.259,-0.489C0.259,-0.433 0.234,-0.415 0.193,-0.415L0.15,-0.415L0.15,-0.6L0.203,-0.6Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,269.067,495.372)">
+                    <path d="M0.141,-0.539C0.141,-0.589 0.163,-0.608 0.198,-0.608C0.233,-0.608 0.255,-0.589 0.255,-0.539L0.255,-0.161C0.255,-0.111 0.233,-0.092 0.198,-0.092C0.163,-0.092 0.141,-0.111 0.141,-0.161L0.141,-0.539ZM0.031,-0.168C0.031,-0.056 0.09,0.008 0.198,0.008C0.306,0.008 0.365,-0.056 0.365,-0.168L0.365,-0.532C0.365,-0.644 0.306,-0.708 0.198,-0.708C0.09,-0.708 0.031,-0.644 0.031,-0.532L0.031,-0.168Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,307.823,495.372)">
+                    <path d="M0.141,-0.539C0.141,-0.589 0.163,-0.608 0.198,-0.608C0.233,-0.608 0.255,-0.589 0.255,-0.539L0.255,-0.161C0.255,-0.111 0.233,-0.092 0.198,-0.092C0.163,-0.092 0.141,-0.111 0.141,-0.161L0.141,-0.539ZM0.031,-0.168C0.031,-0.056 0.09,0.008 0.198,0.008C0.306,0.008 0.365,-0.056 0.365,-0.168L0.365,-0.532C0.365,-0.644 0.306,-0.708 0.198,-0.708C0.09,-0.708 0.031,-0.644 0.031,-0.532L0.031,-0.168Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(97.8684,0,0,97.8684,346.579,495.372)">
+                    <path d="M0.291,0L0.404,0L0.251,-0.388L0.404,-0.7L0.294,-0.7L0.15,-0.395L0.15,-0.7L0.04,-0.7L0.04,0L0.15,0L0.15,-0.215L0.184,-0.279L0.291,0Z" style="fill:white;fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/index.html b/index.html
index 7afb973..9960c60 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,14 @@
     <main id="app">
       <nav id="section-list"></nav>
       <nav id="tab-list"></nav>
-      <section id="tabs"></section>
+      <section id="tabs">
+        <div class="page active" id="Welcome" data-tab="$Welcome">
+          <header>
+            <img class="icon" src="assets/images/outline.svg" />
+            <img class="type" src="assets/images/type.svg" />
+          </header>
+        </div>
+      </section>
     </main>
     <noscript>
       <h1>NO JS NO PARTY</h1>
diff --git a/src/index.ts b/src/index.ts
index 520f654..c1d2a10 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,8 +34,10 @@ async function load() {
   );
   spinnerContainer.appendChild(icons);
 
-  const promises = sections.flatMap((section) => {
+  const promises = sections.flatMap(async (section) => {
     manager.createSection(section.name);
+    return null;
+    /*
     return section.tabs.map(async (tab) => {
       // Load page
       await manager.openTab(section.name, tab.page, {
@@ -45,8 +47,10 @@ async function load() {
       // Remove icon from loading
       icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
     });
+    */
   });
 
+  manager.showSection("Medical");
   // DEV: If you only need one page just comment the block above and uncomment this:
   // manager.createSection("Medical");
   // const promises = [manager.openTab("Medical", "Infections", {})];
@@ -54,9 +58,6 @@ async function load() {
   Promise.all(promises).then(() => {
     // Remove app-wide loading
     manager.setLoading(false);
-
-    // Set first page as active
-    manager.setActive("Infections");
   });
 }
 if ("serviceWorker" in navigator) {
diff --git a/style/main.scss b/style/main.scss
index 531a7a6..45a581b 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -5,3 +5,4 @@ $nanotrasen: #384e68;
 @import "pages/global.scss";
 @import "pages/chemistry.scss";
 @import "pages/virology.scss";
+@import "pages/welcome.scss";
diff --git a/style/pages/welcome.scss b/style/pages/welcome.scss
new file mode 100644
index 0000000..7b2793e
--- /dev/null
+++ b/style/pages/welcome.scss
@@ -0,0 +1,21 @@
+#Welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    header {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .icon {
+            max-width: 30vw;
+            width: 200px;
+            margin-right: 20px;
+        }
+        .type {
+            max-width: 50vw;
+            width: 400px;
+        }
+    }
+}
diff --git a/style/ui.scss b/style/ui.scss
index 662fa05..bfbac12 100644
--- a/style/ui.scss
+++ b/style/ui.scss
@@ -89,7 +89,7 @@ body {
         //visibility: hidden;
         will-change: display;
         display: none;
-        overflow-y: scroll;
+        overflow-y: auto;
         grid-row: 1;
         grid-column: 1;
         &.active {