style: reformat
This commit is contained in:
parent
f3f0a8374a
commit
929dc772df
GPG Key ID:
C997C339BE476FF2
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import * as bip39 from '@scure/bip39';
|
||||
import { wordlist } from '@scure/bip39/wordlists/english';
|
||||
|
|
@ -29,20 +29,22 @@
|
|||
let copyKeyCallback;
|
||||
let copyKeySuccess;
|
||||
let copyKeyError;
|
||||
const copyKeyButtonTextDefault = 'Copy Account Key';
|
||||
const copyKeyButtonTextSuccess = 'Account Key Copied';
|
||||
const copyKeyButtonTextError = 'Account Key Copy Failed';
|
||||
const copyKeyButtonTextDefault = "Copy Account Key";
|
||||
const copyKeyButtonTextSuccess = "Account Key Copied";
|
||||
const copyKeyButtonTextError = "Account Key Copy Failed";
|
||||
let copyKeyButtonText = copyKeyButtonTextDefault;
|
||||
|
||||
onMount(() => {
|
||||
elContentTextWrapper = document.getElementById('content-text-wrapper');
|
||||
elContentTextDefault = document.getElementById('content-text-default');
|
||||
elContentTextCreateAccount = document.getElementById('content-text-create-account');
|
||||
elContentTextShowKey = document.getElementById('content-text-show-key');
|
||||
elContentTextWrapper = document.getElementById("content-text-wrapper");
|
||||
elContentTextDefault = document.getElementById("content-text-default");
|
||||
elContentTextCreateAccount = document.getElementById(
|
||||
"content-text-create-account",
|
||||
);
|
||||
elContentTextShowKey = document.getElementById("content-text-show-key");
|
||||
|
||||
elSwitch = document.getElementById('switch');
|
||||
elSwitchDefault = document.getElementById('switch-default');
|
||||
elSwitchShowKey = document.getElementById('switch-show-key');
|
||||
elSwitch = document.getElementById("switch");
|
||||
elSwitchDefault = document.getElementById("switch-default");
|
||||
elSwitchShowKey = document.getElementById("switch-show-key");
|
||||
|
||||
let resizeTimeout;
|
||||
|
||||
|
|
@ -54,40 +56,46 @@
|
|||
}, 25);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', onResize);
|
||||
window.addEventListener("resize", onResize);
|
||||
});
|
||||
|
||||
const setContentTextHeight = element => {
|
||||
const setContentTextHeight = (element) => {
|
||||
elContentTextActive = element;
|
||||
elContentTextWrapper.style.height = element.offsetHeight + 'px';
|
||||
elContentTextWrapper.style.height = element.offsetHeight + "px";
|
||||
};
|
||||
|
||||
const setAction = value => {
|
||||
const setAction = (value) => {
|
||||
action = value;
|
||||
|
||||
if (!elContentTextActive) {
|
||||
elContentTextDefault.style.position = 'absolute';
|
||||
elContentTextDefault.style.position = "absolute";
|
||||
setContentTextHeight(elContentTextDefault);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if((!value || value === 'sign-in') && elContentTextActive !== elContentTextDefault) {
|
||||
if (
|
||||
(!value || value === "sign-in") &&
|
||||
elContentTextActive !== elContentTextDefault
|
||||
) {
|
||||
setContentTextHeight(elContentTextDefault);
|
||||
} else if(value === 'create-account' && elContentTextActive !== elContentTextCreateAccount) {
|
||||
} else if (
|
||||
value === "create-account" &&
|
||||
elContentTextActive !== elContentTextCreateAccount
|
||||
) {
|
||||
setContentTextHeight(elContentTextCreateAccount);
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const signIn = () => {
|
||||
setAction('sign-in');
|
||||
setAction("sign-in");
|
||||
|
||||
inputKeyRef.focus();
|
||||
};
|
||||
|
||||
const inputKeySignIn = () => {
|
||||
if (!bip39.validateMnemonic(inputKey, wordlist)) {
|
||||
alert('invalid key');
|
||||
alert("invalid key");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +103,7 @@
|
|||
};
|
||||
|
||||
const createAccount = () => {
|
||||
setAction('create-account');
|
||||
setAction("create-account");
|
||||
createAccountStep = 1;
|
||||
};
|
||||
|
||||
|
|
@ -122,23 +130,23 @@
|
|||
}
|
||||
|
||||
// generate key
|
||||
generatedKey = bip39.generateMnemonic(wordlist).split(' ');
|
||||
generatedKey = bip39.generateMnemonic(wordlist).split(" ");
|
||||
|
||||
createAccountStep = 3;
|
||||
elSwitch.style.height = elSwitchDefault.offsetHeight + 'px';
|
||||
elSwitchDefault.style.position = 'absolute';
|
||||
elSwitch.style.height = elSwitchDefault.offsetHeight + "px";
|
||||
elSwitchDefault.style.position = "absolute";
|
||||
|
||||
setTimeout(() => {
|
||||
setContentTextHeight(elContentTextShowKey);
|
||||
elSwitch.style.height = elSwitchShowKey.offsetHeight + 'px';
|
||||
elSwitch.style.height = elSwitchShowKey.offsetHeight + "px";
|
||||
|
||||
elSwitch.addEventListener('transitionend', event => {
|
||||
elSwitch.addEventListener("transitionend", (event) => {
|
||||
if (event.target !== elSwitch) {
|
||||
return;
|
||||
}
|
||||
|
||||
elSwitchShowKey.style.position = 'static';
|
||||
elSwitch.style.height = '';
|
||||
elSwitchShowKey.style.position = "static";
|
||||
elSwitch.style.height = "";
|
||||
});
|
||||
}, 0);
|
||||
};
|
||||
|
|
@ -154,7 +162,9 @@
|
|||
const copyKey = () => {
|
||||
clearTimeout(copyKeyTimeout);
|
||||
|
||||
navigator.clipboard.writeText(generatedKey.join(' ')).then(() => {
|
||||
navigator.clipboard
|
||||
.writeText(generatedKey.join(" "))
|
||||
.then(() => {
|
||||
if (copyKeyCallback) {
|
||||
copyKeyCallback();
|
||||
}
|
||||
|
|
@ -169,7 +179,8 @@
|
|||
};
|
||||
|
||||
copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
|
||||
if (copyKeyCallback) {
|
||||
|
|
@ -214,11 +225,17 @@
|
|||
<header>
|
||||
<img src={lumeLogo} alt="Lume" />
|
||||
</header>
|
||||
<main class:sign-in={action === 'sign-in'} class:create-account={action === 'create-account'} class:create-account-step-2={createAccountStep === 2} class:create-account-step-3={createAccountStep === 3} class:create-account-step-4={createAccountStep === 4} class:fade-out={fadeOut}>
|
||||
<main
|
||||
class:sign-in={action === "sign-in"}
|
||||
class:create-account={action === "create-account"}
|
||||
class:create-account-step-2={createAccountStep === 2}
|
||||
class:create-account-step-3={createAccountStep === 3}
|
||||
class:create-account-step-4={createAccountStep === 4}
|
||||
class:fade-out={fadeOut}>
|
||||
<div class="art">
|
||||
<div class="gradient-1"></div>
|
||||
<div class="gradient-2"></div>
|
||||
<div class="gradient-3"></div>
|
||||
<div class="gradient-1" />
|
||||
<div class="gradient-2" />
|
||||
<div class="gradient-3" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
|
|
@ -226,11 +243,18 @@
|
|||
<div id="content-text-wrapper">
|
||||
<div id="content-text-default">
|
||||
<h1>Access the open web with ease</h1>
|
||||
<p>Seamless access to the open web with Lume, integrated Handshake (HNS) and Ethereum (ENS) Support.</p>
|
||||
<p>
|
||||
Seamless access to the open web with Lume, integrated Handshake
|
||||
(HNS) and Ethereum (ENS) Support.
|
||||
</p>
|
||||
</div>
|
||||
<div id="content-text-create-account">
|
||||
<h1>Set up your account key</h1>
|
||||
<p>Let’s create your account key or seed phrase. This phrase will be used to access your Lume account. Make sure to keep it safe at all times.</p>
|
||||
<p>
|
||||
Let’s create your account key or seed phrase. This phrase will be
|
||||
used to access your Lume account. Make sure to keep it safe at all
|
||||
times.
|
||||
</p>
|
||||
</div>
|
||||
<div id="content-text-show-key">
|
||||
<h1>Here’s your account key</h1>
|
||||
|
|
@ -243,14 +267,24 @@
|
|||
<div class="content-action-sign-in">
|
||||
<div class="content-action-inner">
|
||||
<div class="btn-wrapper sign-in-btn">
|
||||
<button class="btn-main btn-black" on:click={() => signIn()}>Sign in with Account Key</button>
|
||||
<button class="btn-main btn-black" on:click={() => signIn()}
|
||||
>Sign in with Account Key
|
||||
</button>
|
||||
</div>
|
||||
<div class="sign-in-form">
|
||||
<div class="input-wrapper">
|
||||
<input bind:this={inputKeyRef} type="text" bind:value={inputKey} placeholder="Insert your 12-word account key here" />
|
||||
<input
|
||||
bind:this={inputKeyRef}
|
||||
type="text"
|
||||
bind:value={inputKey}
|
||||
placeholder="Insert your 12-word account key here" />
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-green" on:click={() => inputKeySignIn()}>Login</button>
|
||||
<button
|
||||
class="btn-main btn-green"
|
||||
on:click={() => inputKeySignIn()}
|
||||
>Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -258,17 +292,34 @@
|
|||
<div class="content-action-create-account">
|
||||
<div class="content-action-inner">
|
||||
<div class="btn-wrapper create-account-ready-btn">
|
||||
<button class="btn-main btn-green" on:click={() => createAccountReady()}>I get it, I’ll keep it safe. Let’s see the key.</button>
|
||||
<button
|
||||
class="btn-main btn-green"
|
||||
on:click={() => createAccountReady()}
|
||||
>I get it, I’ll keep it safe. Let’s see the key.
|
||||
</button>
|
||||
</div>
|
||||
<div class="create-account-ready">
|
||||
<div class="warning">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<div>Should you lose this key, you will be forced to create a new account.</div>
|
||||
<div>
|
||||
Should you lose this key, you will be forced to create a
|
||||
new account.
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-wrapper create-account-show-key-btn">
|
||||
<button class="btn-main" on:click={() => showKey()}>I’m ready, show me the key</button>
|
||||
<button class="btn-main" on:click={() => showKey()}
|
||||
>I’m ready, show me the key
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-wrapper create-account-back-btn">
|
||||
<button on:click={() => createAccountBack()}>
|
||||
|
|
@ -284,13 +335,25 @@
|
|||
</div>
|
||||
<div class="btn-stack">
|
||||
<div class="btn-wrapper create-account-btn">
|
||||
<button class="btn-main btn-green" on:click={() => createAccount()}>Create an Account</button>
|
||||
<button
|
||||
class="btn-main btn-green"
|
||||
on:click={() => createAccount()}
|
||||
>Create an Account
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-wrapper create-account-gray-btn">
|
||||
<button class="btn-main btn-black gray-text" on:click={() => createAccount()}>Create an Account</button>
|
||||
<button
|
||||
class="btn-main btn-black gray-text"
|
||||
on:click={() => createAccount()}
|
||||
>Create an Account
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-wrapper create-account-cancel-btn">
|
||||
<button class="btn-main btn-black gray-text" on:click={() => createAccountCancel()}>Go back</button>
|
||||
<button
|
||||
class="btn-main btn-black gray-text"
|
||||
on:click={() => createAccountCancel()}
|
||||
>Go back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -306,25 +369,51 @@
|
|||
{/each}
|
||||
</div>
|
||||
<div class="warning">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<div>Make sure to write this key down for safe keeping.</div>
|
||||
</div>
|
||||
<div class="btn-wrapper show-key-copy-btn">
|
||||
<button class="btn-main btn-black" on:click={() => copyKey()} class:success={copyKeySuccess} class:error={copyKeyError}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
|
||||
<button
|
||||
class="btn-main btn-black"
|
||||
on:click={() => copyKey()}
|
||||
class:success={copyKeySuccess}
|
||||
class:error={copyKeyError}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
|
||||
</svg>
|
||||
{copyKeyButtonText}
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-stack">
|
||||
<div class="btn-wrapper show-key-continue-btn">
|
||||
<button class="btn-main" on:click={() => showKeyWarning()}>Continue</button>
|
||||
<button class="btn-main" on:click={() => showKeyWarning()}
|
||||
>Continue
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-wrapper show-key-login-btn">
|
||||
<button class="btn-main btn-green" on:click={() => generatedKeySignIn()}>Login</button>
|
||||
<button
|
||||
class="btn-main btn-green"
|
||||
on:click={() => generatedKeySignIn()}
|
||||
>Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -334,7 +423,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="grant-info">
|
||||
Lume is a 503c Grant recepient, <a href="https://lumeweb.com">learn more</a> about the work we’re doing to provide accessible access to the open web for everyone.
|
||||
Lume is a 503c Grant recepient, <a href="https://lumeweb.com"
|
||||
>learn more</a> about the work we’re doing to provide accessible access to
|
||||
the open web for everyone.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -354,7 +445,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.art, .content {
|
||||
.art,
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -375,24 +467,42 @@
|
|||
}
|
||||
|
||||
.gradient-1 {
|
||||
background: linear-gradient(272.67deg, #1FC3F7 -27.49%, #33A653 49.4%, #62C554 87.63%);
|
||||
background: linear-gradient(
|
||||
272.67deg,
|
||||
#1fc3f7 -27.49%,
|
||||
#33a653 49.4%,
|
||||
#62c554 87.63%
|
||||
);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.gradient-2 {
|
||||
background: conic-gradient(from 180deg at 50% 50%, #33A653 -15.8deg, #080808 222.32deg, #33A653 344.2deg, #080808 582.32deg);
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#33a653 -15.8deg,
|
||||
#080808 222.32deg,
|
||||
#33a653 344.2deg,
|
||||
#080808 582.32deg
|
||||
);
|
||||
opacity: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.gradient-3 {
|
||||
background: linear-gradient(272.67deg, #ED6A5E -27.49%, #0C0C0D 26.91%, #33A653 49.4%, #ED6A5E 99.62%);
|
||||
background: linear-gradient(
|
||||
272.67deg,
|
||||
#ed6a5e -27.49%,
|
||||
#0c0c0d 26.91%,
|
||||
#33a653 49.4%,
|
||||
#ed6a5e 99.62%
|
||||
);
|
||||
opacity: 0;
|
||||
z-index: -3;
|
||||
}
|
||||
}
|
||||
|
||||
main.sign-in, main.create-account {
|
||||
main.sign-in,
|
||||
main.create-account {
|
||||
.art {
|
||||
.gradient-1 {
|
||||
opacity: 0;
|
||||
|
|
@ -486,7 +596,8 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
#content-text-create-account, #content-text-show-key {
|
||||
#content-text-create-account,
|
||||
#content-text-show-key {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
|
@ -709,7 +820,8 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.create-account-gray-btn, .create-account-cancel-btn {
|
||||
.create-account-gray-btn,
|
||||
.create-account-cancel-btn {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -870,8 +982,12 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
&.create-account-step-2, &.create-account-step-3 {
|
||||
#content-text-wrapper, .separator, #switch-default .btn-stack, .grant-info {
|
||||
&.create-account-step-2,
|
||||
&.create-account-step-3 {
|
||||
#content-text-wrapper,
|
||||
.separator,
|
||||
#switch-default .btn-stack,
|
||||
.grant-info {
|
||||
transition-delay: 2s;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
|
|
@ -898,8 +1014,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.create-account-step-3, &.create-account-step-4 {
|
||||
#content-text-wrapper, .separator, #switch-default .btn-stack, .grant-info {
|
||||
&.create-account-step-3,
|
||||
&.create-account-step-4 {
|
||||
#content-text-wrapper,
|
||||
.separator,
|
||||
#switch-default .btn-stack,
|
||||
.grant-info {
|
||||
transition-delay: 0s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -936,7 +1056,10 @@
|
|||
}
|
||||
|
||||
&.create-account-step-4 {
|
||||
#content-text-wrapper, .show-key-copy-btn, #switch-show-key .btn-stack, .grant-info {
|
||||
#content-text-wrapper,
|
||||
.show-key-copy-btn,
|
||||
#switch-show-key .btn-stack,
|
||||
.grant-info {
|
||||
animation: 5000ms save-key-warning;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<script>
|
||||
import '../../styles/global.scss';
|
||||
import lumeLogo from '../../assets/lume-logo.png';
|
||||
import "../../styles/global.scss";
|
||||
import lumeLogo from "../../assets/lume-logo.png";
|
||||
|
||||
import svgGithub from '../../assets/icon/github.svg?raw';
|
||||
import svgDiscord from '../../assets/icon/discord.svg?raw';
|
||||
import svgTwitter from '../../assets/icon/twitter.svg?raw';
|
||||
import svgFacebook from '../../assets/icon/facebook.svg?raw';
|
||||
import svgGithub from "../../assets/icon/github.svg?raw";
|
||||
import svgDiscord from "../../assets/icon/discord.svg?raw";
|
||||
import svgTwitter from "../../assets/icon/twitter.svg?raw";
|
||||
import svgFacebook from "../../assets/icon/facebook.svg?raw";
|
||||
|
||||
let step = 1;
|
||||
let userCount;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
setTimeout(() => {
|
||||
step = 3;
|
||||
userCount = '23k';
|
||||
userCount = "23k";
|
||||
}, 6000);
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -26,33 +26,48 @@
|
|||
|
||||
<header>
|
||||
<img src={lumeLogo} alt="Lume" />
|
||||
<div class="status" class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
|
||||
<div
|
||||
class="status"
|
||||
class:step-2={step === 2}
|
||||
class:step-3={step === 3}
|
||||
class:step-4={step === 4}>
|
||||
<div class="network">
|
||||
<div class="connected">
|
||||
<span class="icon icon-success"></span>
|
||||
<span class="icon icon-success" />
|
||||
Lume Network
|
||||
</div>
|
||||
<div class="connecting">
|
||||
<span class="icon icon-wait icon-wait-yellow"></span>
|
||||
<span class="icon icon-wait icon-wait-yellow" />
|
||||
Lume Network
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-count" class:user-count-hidden={!userCount}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
</svg>
|
||||
{userCount}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
|
||||
<main
|
||||
class:step-2={step === 2}
|
||||
class:step-3={step === 3}
|
||||
class:step-4={step === 4}>
|
||||
<div class="art-wrapper">
|
||||
<div class="art-rotate">
|
||||
<div class="art">
|
||||
<div class="gradient-1"></div>
|
||||
<div class="gradient-2"></div>
|
||||
<div class="gradient-3"></div>
|
||||
<div class="gradient-4"></div>
|
||||
<div class="gradient-1" />
|
||||
<div class="gradient-2" />
|
||||
<div class="gradient-3" />
|
||||
<div class="gradient-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,30 +85,24 @@
|
|||
<ul>
|
||||
<li class="success">
|
||||
<div class="network">
|
||||
<span class="icon icon-success"></span>
|
||||
<span class="icon icon-success" />
|
||||
HNS
|
||||
</div>
|
||||
<div class="status">
|
||||
Synced
|
||||
</div>
|
||||
<div class="status">Synced</div>
|
||||
</li>
|
||||
<li class="loading">
|
||||
<div class="network">
|
||||
<span class="icon icon-wait"></span>
|
||||
<span class="icon icon-wait" />
|
||||
ENS
|
||||
</div>
|
||||
<div class="status">
|
||||
Syncing
|
||||
</div>
|
||||
<div class="status">Syncing</div>
|
||||
</li>
|
||||
<li class="error">
|
||||
<div class="network">
|
||||
<span class="icon icon-error"></span>
|
||||
<span class="icon icon-error" />
|
||||
Arweave
|
||||
</div>
|
||||
<div class="status">
|
||||
Issue
|
||||
</div>
|
||||
<div class="status">Issue</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -102,14 +111,22 @@
|
|||
<ul>
|
||||
<li class="success">
|
||||
<div class="network">
|
||||
<span class="icon icon-success"></span>
|
||||
<span class="icon icon-success" />
|
||||
IPFS
|
||||
</div>
|
||||
<div class="status">
|
||||
Connected
|
||||
<div class="user-count">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
</svg>
|
||||
{userCount}
|
||||
</div>
|
||||
|
|
@ -117,14 +134,22 @@
|
|||
</li>
|
||||
<li class="loading">
|
||||
<div class="network">
|
||||
<span class="icon icon-wait"></span>
|
||||
<span class="icon icon-wait" />
|
||||
Arweave
|
||||
</div>
|
||||
<div class="status">
|
||||
Connecting
|
||||
<div class="user-count">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
</svg>
|
||||
{userCount}
|
||||
</div>
|
||||
|
|
@ -259,7 +284,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.step-3, &.step-4 {
|
||||
&.step-3,
|
||||
&.step-4 {
|
||||
.network {
|
||||
.connecting {
|
||||
z-index: 1;
|
||||
|
|
@ -312,24 +338,48 @@
|
|||
}
|
||||
|
||||
.gradient-1 {
|
||||
background: linear-gradient(272.67deg, #FF005C -27.49%, #0C0C0D 26.91%, #FF005C 49.4%, #ED6A5E 99.62%);
|
||||
background: linear-gradient(
|
||||
272.67deg,
|
||||
#ff005c -27.49%,
|
||||
#0c0c0d 26.91%,
|
||||
#ff005c 49.4%,
|
||||
#ed6a5e 99.62%
|
||||
);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.gradient-2 {
|
||||
background: conic-gradient(from 180deg at 50% 50%, #A67833 -15.8deg, #E91F1F 222.32deg, #A67833 344.2deg, #E91F1F 582.32deg);
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#a67833 -15.8deg,
|
||||
#e91f1f 222.32deg,
|
||||
#a67833 344.2deg,
|
||||
#e91f1f 582.32deg
|
||||
);
|
||||
opacity: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.gradient-3 {
|
||||
background: conic-gradient(from -89.79deg at 50% 50%, #33A653 -15.8deg, #080808 222.32deg, #33A653 344.2deg, #080808 582.32deg);
|
||||
background: conic-gradient(
|
||||
from -89.79deg at 50% 50%,
|
||||
#33a653 -15.8deg,
|
||||
#080808 222.32deg,
|
||||
#33a653 344.2deg,
|
||||
#080808 582.32deg
|
||||
);
|
||||
opacity: 0;
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
.gradient-4 {
|
||||
background: conic-gradient(from 180deg at 50% 50%, #2F2F2F -15.8deg, #66D155 222.32deg, #2F2F2F 344.2deg, #66D155 582.32deg);
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#2f2f2f -15.8deg,
|
||||
#66d155 222.32deg,
|
||||
#2f2f2f 344.2deg,
|
||||
#66d155 582.32deg
|
||||
);
|
||||
opacity: 0;
|
||||
z-index: -4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import '../../styles/global.scss';
|
||||
import lumeLogo from '../../assets/lume-logo.png';
|
||||
import "../../styles/global.scss";
|
||||
import lumeLogo from "../../assets/lume-logo.png";
|
||||
|
||||
let started = false;
|
||||
let step = 1;
|
||||
|
|
@ -19,54 +19,79 @@
|
|||
};
|
||||
|
||||
const redirect = () => {
|
||||
window.location.href = '/account.html';
|
||||
window.location.href = "/account.html";
|
||||
};
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<img src={lumeLogo} alt="Lume" />
|
||||
</header>
|
||||
<main class:started={started} class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
|
||||
<div class="art art-1"></div>
|
||||
<div class="art art-2"></div>
|
||||
<div class="art art-3"></div>
|
||||
<div class="art art-4"></div>
|
||||
<main
|
||||
class:started
|
||||
class:step-2={step === 2}
|
||||
class:step-3={step === 3}
|
||||
class:step-4={step === 4}>
|
||||
<div class="art art-1" />
|
||||
<div class="art art-2" />
|
||||
<div class="art art-3" />
|
||||
<div class="art art-4" />
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="page content-1">
|
||||
<h1>Thank you for supporting an open web.</h1>
|
||||
<p>We are an independent, pure organization. We have decided not to take money from venture capitalists. Nor do we have a large treasury funding our work.</p>
|
||||
<p>
|
||||
We are an independent, pure organization. We have decided not to take
|
||||
money from venture capitalists. Nor do we have a large treasury
|
||||
funding our work.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main" on:click={() => start()}>Begin</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-2">
|
||||
<h1>Gateway for easy access to the open web.</h1>
|
||||
<p>Easy Access to Web3. With native Handshake (HNS) and Ethereum (ENS) support, you can forget eth.link and hns.is. This is your gateway.</p>
|
||||
<p>
|
||||
Easy Access to Web3. With native Handshake (HNS) and Ethereum (ENS)
|
||||
support, you can forget eth.link and hns.is. This is your gateway.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => redirect()}>Skip</button>
|
||||
<button class="btn-main btn-black" on:click={() => redirect()}
|
||||
>Skip</button>
|
||||
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-3">
|
||||
<h1>Universal storage drive slide.</h1>
|
||||
<p>Stop worrying about being vendor-locked. Remain flexible and reduce your storage costs by 50% or more. Lume is affordable storage on-demand.</p>
|
||||
<p>
|
||||
Stop worrying about being vendor-locked. Remain flexible and reduce
|
||||
your storage costs by 50% or more. Lume is affordable storage
|
||||
on-demand.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => prev()}>Back</button>
|
||||
<button class="btn-main btn-black" on:click={() => prev()}
|
||||
>Back</button>
|
||||
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page content-4">
|
||||
<h1>Create decentralized websites.</h1>
|
||||
<p>Stop worrying about being vendor-locked. Remain flexible and reduce your storage costs by 50% or more. Lume is affordable storage on-demand. Stop worrying about being vendor-locked.</p>
|
||||
<p>
|
||||
Stop worrying about being vendor-locked. Remain flexible and reduce
|
||||
your storage costs by 50% or more. Lume is affordable storage
|
||||
on-demand. Stop worrying about being vendor-locked.
|
||||
</p>
|
||||
<div class="btn-wrapper">
|
||||
<button class="btn-main btn-black" on:click={() => prev()}>Back</button>
|
||||
<button class="btn-main btn-green" on:click={() => redirect()}>Get started</button>
|
||||
<button class="btn-main btn-black" on:click={() => prev()}
|
||||
>Back</button>
|
||||
<button class="btn-main btn-green" on:click={() => redirect()}
|
||||
>Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grant-info">
|
||||
Lume is a 503c Grant recepient, <a href="https://lumeweb.com">learn more</a> about the work we’re doing to provide accessible access to the open web for everyone.
|
||||
Lume is a 503c Grant recepient, <a href="https://lumeweb.com"
|
||||
>learn more</a> about the work we’re doing to provide accessible access to
|
||||
the open web for everyone.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -80,7 +105,8 @@
|
|||
background: #080808;
|
||||
}
|
||||
|
||||
.art, .content {
|
||||
.art,
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -180,7 +206,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content-2, .content-3, .content-4 {
|
||||
.content-2,
|
||||
.content-3,
|
||||
.content-4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in New Issue