mirror of
https://github.com/MercuryWorkshop/adrift.git
synced 2025-05-12 22:00:02 -04:00
cssify landing page
This commit is contained in:
CoolElectronics
parent
8bd24c107f
commit
98c25278d6
5 changed files with 149 additions and 77 deletions
|
|
@ -13,6 +13,7 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fontsource/cabin": "^5.0.8",
|
||||||
"@iconify-icons/bi": "^1.2.17",
|
"@iconify-icons/bi": "^1.2.17",
|
||||||
"@iconify-icons/ic": "^1.2.13",
|
"@iconify-icons/ic": "^1.2.13",
|
||||||
"@iconify-icons/maki": "^1.2.18",
|
"@iconify-icons/maki": "^1.2.18",
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
|
|
||||||
import iconDiscord from "@iconify-icons/ic/outline-discord";
|
import iconDiscord from "@iconify-icons/ic/outline-discord";
|
||||||
import iconGithub from "@iconify-icons/bi/github";
|
import iconGithub from "@iconify-icons/bi/github";
|
||||||
import iconArrow from "@iconify-icons/maki/arrow";
|
|
||||||
import Icon from "@iconify/svelte";
|
import Icon from "@iconify/svelte";
|
||||||
|
|
||||||
import type { Transport } from "protocol";
|
import type { Transport } from "protocol";
|
||||||
|
|
@ -50,6 +50,8 @@
|
||||||
let showLogin = false;
|
let showLogin = false;
|
||||||
let chosenTracker: keyof typeof TrackerList | undefined;
|
let chosenTracker: keyof typeof TrackerList | undefined;
|
||||||
|
|
||||||
|
let showTrackerList = false;
|
||||||
|
|
||||||
function onTransportOpen() {
|
function onTransportOpen() {
|
||||||
console.log("Transport opened");
|
console.log("Transport opened");
|
||||||
|
|
||||||
|
|
@ -180,14 +182,15 @@
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
{:else if !import.meta.env.VITE_ADRIFT_DEV}
|
{:else if !import.meta.env.VITE_ADRIFT_DEV}
|
||||||
<div id="topbar" class="flex justify-between items-center p-4">
|
<div class="flex flex-col h-full">
|
||||||
<div id="logo">
|
<div id="topbar" class="flex justify-between items-center p-4">
|
||||||
<Card type="">
|
<div id="logo">
|
||||||
<h3 class="text-xl">Adrift</h3>
|
<Card type="">
|
||||||
</Card>
|
<h3 class="text-xl">(logo goes here)</h3>
|
||||||
</div>
|
</Card>
|
||||||
<div id="nav">
|
</div>
|
||||||
<!-- <Card type="outlined">
|
<div id="nav">
|
||||||
|
<!-- <Card type="outlined">
|
||||||
<div id="quickmenu">
|
<div id="quickmenu">
|
||||||
<a href="httsp" class="text-med m-2">About</a>
|
<a href="httsp" class="text-med m-2">About</a>
|
||||||
<a
|
<a
|
||||||
|
|
@ -196,77 +199,133 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</Card> -->
|
</Card> -->
|
||||||
</div>
|
</div>
|
||||||
<div id="links">
|
<div id="links">
|
||||||
<Card type="elevated">
|
<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 class="flex">
|
<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
|
>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>
|
</div>
|
||||||
</Dialog>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
import { registerRemoteListener } from "bare-client-custom";
|
import { registerRemoteListener } from "bare-client-custom";
|
||||||
import App from "./App.svelte";
|
import App from "./App.svelte";
|
||||||
|
import "@fontsource/cabin";
|
||||||
|
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
if (import.meta.env.VITE_ADRIFT_DEV) {
|
if (import.meta.env.VITE_ADRIFT_DEV) {
|
||||||
console.log(
|
console.log(
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
*{
|
||||||
|
font-family: "Cabin";
|
||||||
|
}
|
||||||
7
pnpm-lock.yaml
generated
7
pnpm-lock.yaml
generated
|
|
@ -288,6 +288,9 @@ importers:
|
||||||
|
|
||||||
frontend:
|
frontend:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@fontsource/cabin':
|
||||||
|
specifier: ^5.0.8
|
||||||
|
version: 5.0.8
|
||||||
'@iconify-icons/bi':
|
'@iconify-icons/bi':
|
||||||
specifier: ^1.2.17
|
specifier: ^1.2.17
|
||||||
version: 1.2.17
|
version: 1.2.17
|
||||||
|
|
@ -3186,6 +3189,10 @@ packages:
|
||||||
resolution: {integrity: sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==}
|
resolution: {integrity: sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@fontsource/cabin@5.0.8:
|
||||||
|
resolution: {integrity: sha512-dKUwEkLe8ix9h/gntEILkSFJTa5IDtHKerQl3QXSsMELKYCxELblHuh5itwDA/sJz3O1rJDNybheBsWt59MlCg==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@google-cloud/firestore@6.7.0:
|
/@google-cloud/firestore@6.7.0:
|
||||||
resolution: {integrity: sha512-bkH2jb5KkQSUa+NAvpip9HQ+rpYhi77IaqHovWuN07adVmvNXX08gPpvPWEzoXYa/wDjEVI7LiAtCWkJJEYTNg==}
|
resolution: {integrity: sha512-bkH2jb5KkQSUa+NAvpip9HQ+rpYhi77IaqHovWuN07adVmvNXX08gPpvPWEzoXYa/wDjEVI7LiAtCWkJJEYTNg==}
|
||||||
engines: {node: '>=12.0.0'}
|
engines: {node: '>=12.0.0'}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue