From 98c25278d6343388bb0c6a8718787c7da174ca9c Mon Sep 17 00:00:00 2001
From: CoolElectronics <me@coolelectronics.me>
Date: Thu, 17 Aug 2023 14:11:38 -0400
Subject: [PATCH] cssify landing page

---
 frontend/package.json   |   1 +
 frontend/src/App.svelte | 211 +++++++++++++++++++++++++---------------
 frontend/src/entry.ts   |   2 +
 frontend/src/index.css  |   5 +-
 pnpm-lock.yaml          |   7 ++
 5 files changed, 149 insertions(+), 77 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 31af16f..6cd3351 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fontsource/cabin": "^5.0.8",
     "@iconify-icons/bi": "^1.2.17",
     "@iconify-icons/ic": "^1.2.13",
     "@iconify-icons/maki": "^1.2.18",
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 23d7bd7..857aed7 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -20,7 +20,7 @@
 
   import iconDiscord from "@iconify-icons/ic/outline-discord";
   import iconGithub from "@iconify-icons/bi/github";
-  import iconArrow from "@iconify-icons/maki/arrow";
+
   import Icon from "@iconify/svelte";
 
   import type { Transport } from "protocol";
@@ -50,6 +50,8 @@
   let showLogin = false;
   let chosenTracker: keyof typeof TrackerList | undefined;
 
+  let showTrackerList = false;
+
   function onTransportOpen() {
     console.log("Transport opened");
 
@@ -180,14 +182,15 @@
     </Card>
   </div>
 {:else if !import.meta.env.VITE_ADRIFT_DEV}
-  <div id="topbar" class="flex justify-between items-center p-4">
-    <div id="logo">
-      <Card type="">
-        <h3 class="text-xl">Adrift</h3>
-      </Card>
-    </div>
-    <div id="nav">
-      <!-- <Card type="outlined">
+  <div class="flex flex-col h-full">
+    <div id="topbar" class="flex justify-between items-center p-4">
+      <div id="logo">
+        <Card type="">
+          <h3 class="text-xl">(logo goes here)</h3>
+        </Card>
+      </div>
+      <div id="nav">
+        <!-- <Card type="outlined">
         <div id="quickmenu">
           <a href="httsp" class="text-med m-2">About</a>
           <a
@@ -196,77 +199,133 @@
           >
         </div>
       </Card> -->
-    </div>
-    <div id="links">
-      <Card type="elevated">
-        <div class="flex">
-          <a href="https://discord.gg/bAgNyGpXSx">
-            <Icon icon={iconDiscord} class="icon" />
-          </a>
-          <spacer />
-          <a href="https://github.com/MercuryWorkshop/adrift">
-            <Icon icon={iconGithub} class="icon" />
-          </a>
-        </div>
-      </Card>
-    </div>
-  </div>
-  <div id="loginpage">
-    <div class="flex justify-evenly">
-      <Card type="filled">
-        <SegmentedButtonContainer>
-          {#each Object.keys(TrackerList) as tracker}
-            <input
-              type="radio"
-              id={tracker}
-              name="tabs"
-              value={tracker}
-              bind:group={chosenTracker}
-            />
-            <SegmentedButtonItem input={tracker}>{tracker}</SegmentedButtonItem>
-          {/each}
-        </SegmentedButtonContainer>
-
-        {#if chosenTracker}
-          <Button type="elevated" on:click={() => (showSwarmWarning = true)}
-            >Connect to the swarm</Button
-          >
-          <Button type="filled" on:click={() => (showLogin = true)}
-            >Connect with login</Button
-          >
-        {/if}
-
-        <Dialog headline="WARNING" open={showSwarmWarning}>
-          <h2 class="text-2xl">
-            TLS has not currently been implemented for the Adrift Swarm. Your
-            data will not be private, and you should not sign into any accounts
-            that you care much about
-          </h2>
-          <br />
-          <Button type="filled" on:click={() => (showLogin = false)}
-            >Cancel</Button
-          >
-          <Button type="outlined" on:click={connectSwarm}
-            >I understand, Connect</Button
-          >
-        </Dialog>
-
-        <Dialog headline="Log in to Connect" open={showLogin}>
-          <TextField name="email" bind:value={email} />
-          <TextField
-            name="password"
-            bind:value={password}
-            extraOptions={{ type: "password" }}
-          />
-
+      </div>
+      <div id="links">
+        <Card type="elevated">
           <div class="flex">
-            <Button type="outlined" on:click={() => (showLogin = false)}
+            <a href="https://discord.gg/bAgNyGpXSx">
+              <Icon icon={iconDiscord} class="icon" />
+            </a>
+            <spacer />
+            <a href="https://github.com/MercuryWorkshop/adrift">
+              <Icon icon={iconGithub} class="icon" />
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+    <div class="flex flex-col flex-1">
+      <div class="flex m-4">
+        <Card
+          type="elevated"
+          extraOptions={{ class: "m3-container type-elevated w-9/12" }}
+        >
+          <div class="w-full">
+            <h2 class="text-6xl">Surf the web, Adrift</h2>
+            <h2 class="text-2xl">
+              A fast and modern decentralized proxy network
+            </h2>
+          </div>
+          <div class="mt-5">
+            <Button type="filled" on:click={() => (showTrackerList = true)}
+              >Start Browsing</Button
+            >
+          </div>
+        </Card>
+      </div>
+      <div
+        class="flex h-full justify-end m-4 transition-all"
+        class:opacity-0={!showTrackerList}
+      >
+        <Card
+          type="elevated"
+          extraOptions={{
+            class: "m3-container type-elevated w-9/12 flex flex-col",
+          }}
+        >
+          <h2 class="text-4xl">Select a Tracker</h2>
+          <h2 class="text-1xl">Trackers allow you to connect to Adrift</h2>
+          <div class="mt-5">
+            <SegmentedButtonContainer>
+              {#each Object.keys(TrackerList) as tracker}
+                <input
+                  type="radio"
+                  id={tracker}
+                  name="tabs"
+                  value={tracker}
+                  bind:group={chosenTracker}
+                />
+                <SegmentedButtonItem input={tracker}
+                  >{tracker}</SegmentedButtonItem
+                >
+              {/each}
+            </SegmentedButtonContainer>
+          </div>
+          <div class="flex-1" />
+          <div class="mt-5 flex">
+            {#if chosenTracker}
+              <Button type="elevated" on:click={() => (showSwarmWarning = true)}
+                >Connect to the swarm</Button
+              >
+              <Button type="filled" on:click={() => (showLogin = true)}
+                >Connect with login</Button
+              >
+            {/if}
+          </div>
+
+          <Dialog headline="WARNING" open={showSwarmWarning}>
+            <h2 class="text-2xl">
+              TLS has not currently been implemented for the Adrift Swarm. Your
+              data will not be private, and you should not sign into any
+              accounts that you care much about
+            </h2>
+            <br />
+            <Button type="filled" on:click={() => (showLogin = false)}
               >Cancel</Button
             >
-            <Button type="filled" on:click={connectAccount}>Connect</Button>
+            <Button type="outlined" on:click={connectSwarm}
+              >I understand, Connect</Button
+            >
+          </Dialog>
+
+          <Dialog headline="Log in to Connect" open={showLogin}>
+            <TextField name="email" bind:value={email} />
+            <TextField
+              name="password"
+              bind:value={password}
+              extraOptions={{ type: "password" }}
+            />
+
+            <div class="flex">
+              <Button type="outlined" on:click={() => (showLogin = false)}
+                >Cancel</Button
+              >
+              <Button type="filled" on:click={connectAccount}>Connect</Button>
+            </div>
+          </Dialog>
+        </Card>
+      </div>
+      <div class="flex m-4">
+        <Card
+          type="elevated"
+          extraOptions={{ class: "m3-container type-elevated w-full" }}
+        >
+          <div class="flex space-x-10">
+            <a class="text-1xl" href="https://mercurywork.shop"
+              >© 2023 Mercury Workshop</a
+            >
+
+            <div class="space-x-3">
+              <a class="text-1xl" href="https://discord.gg/bAgNyGpXSx"
+                >discord</a
+              >
+              <a class="text-1xl" href="https://discord.gg/bAgNyGpXSx">github</a
+              >
+            </div>
+            <div />
           </div>
-        </Dialog>
-      </Card>
+        </Card>
+      </div>
     </div>
   </div>
 {:else}
diff --git a/frontend/src/entry.ts b/frontend/src/entry.ts
index 9e604f1..1f29919 100644
--- a/frontend/src/entry.ts
+++ b/frontend/src/entry.ts
@@ -1,5 +1,7 @@
 import { registerRemoteListener } from "bare-client-custom";
 import App from "./App.svelte";
+import "@fontsource/cabin";
+
 import "./index.css";
 if (import.meta.env.VITE_ADRIFT_DEV) {
   console.log(
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bd6213e..2864ebc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,6 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+*{
+    font-family: "Cabin";
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7244a7f..2f2d769 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -288,6 +288,9 @@ importers:
 
   frontend:
     dependencies:
+      '@fontsource/cabin':
+        specifier: ^5.0.8
+        version: 5.0.8
       '@iconify-icons/bi':
         specifier: ^1.2.17
         version: 1.2.17
@@ -3186,6 +3189,10 @@ packages:
     resolution: {integrity: sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==}
     dev: false
 
+  /@fontsource/cabin@5.0.8:
+    resolution: {integrity: sha512-dKUwEkLe8ix9h/gntEILkSFJTa5IDtHKerQl3QXSsMELKYCxELblHuh5itwDA/sJz3O1rJDNybheBsWt59MlCg==}
+    dev: false
+
   /@google-cloud/firestore@6.7.0:
     resolution: {integrity: sha512-bkH2jb5KkQSUa+NAvpip9HQ+rpYhi77IaqHovWuN07adVmvNXX08gPpvPWEzoXYa/wDjEVI7LiAtCWkJJEYTNg==}
     engines: {node: '>=12.0.0'}