style: reformat
This commit is contained in:
parent
f3f0a8374a
commit
929dc772df
GPG Key ID:
C997C339BE476FF2
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
import * as bip39 from '@scure/bip39';
|
import * as bip39 from '@scure/bip39';
|
||||||
import { wordlist } from '@scure/bip39/wordlists/english';
|
import { wordlist } from '@scure/bip39/wordlists/english';
|
||||||
|
|
@ -29,20 +29,22 @@
|
||||||
let copyKeyCallback;
|
let copyKeyCallback;
|
||||||
let copyKeySuccess;
|
let copyKeySuccess;
|
||||||
let copyKeyError;
|
let copyKeyError;
|
||||||
const copyKeyButtonTextDefault = 'Copy Account Key';
|
const copyKeyButtonTextDefault = "Copy Account Key";
|
||||||
const copyKeyButtonTextSuccess = 'Account Key Copied';
|
const copyKeyButtonTextSuccess = "Account Key Copied";
|
||||||
const copyKeyButtonTextError = 'Account Key Copy Failed';
|
const copyKeyButtonTextError = "Account Key Copy Failed";
|
||||||
let copyKeyButtonText = copyKeyButtonTextDefault;
|
let copyKeyButtonText = copyKeyButtonTextDefault;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
elContentTextWrapper = document.getElementById('content-text-wrapper');
|
elContentTextWrapper = document.getElementById("content-text-wrapper");
|
||||||
elContentTextDefault = document.getElementById('content-text-default');
|
elContentTextDefault = document.getElementById("content-text-default");
|
||||||
elContentTextCreateAccount = document.getElementById('content-text-create-account');
|
elContentTextCreateAccount = document.getElementById(
|
||||||
elContentTextShowKey = document.getElementById('content-text-show-key');
|
"content-text-create-account",
|
||||||
|
);
|
||||||
|
elContentTextShowKey = document.getElementById("content-text-show-key");
|
||||||
|
|
||||||
elSwitch = document.getElementById('switch');
|
elSwitch = document.getElementById("switch");
|
||||||
elSwitchDefault = document.getElementById('switch-default');
|
elSwitchDefault = document.getElementById("switch-default");
|
||||||
elSwitchShowKey = document.getElementById('switch-show-key');
|
elSwitchShowKey = document.getElementById("switch-show-key");
|
||||||
|
|
||||||
let resizeTimeout;
|
let resizeTimeout;
|
||||||
|
|
||||||
|
|
@ -54,40 +56,46 @@
|
||||||
}, 25);
|
}, 25);
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener('resize', onResize);
|
window.addEventListener("resize", onResize);
|
||||||
});
|
});
|
||||||
|
|
||||||
const setContentTextHeight = element => {
|
const setContentTextHeight = (element) => {
|
||||||
elContentTextActive = element;
|
elContentTextActive = element;
|
||||||
elContentTextWrapper.style.height = element.offsetHeight + 'px';
|
elContentTextWrapper.style.height = element.offsetHeight + "px";
|
||||||
};
|
};
|
||||||
|
|
||||||
const setAction = value => {
|
const setAction = (value) => {
|
||||||
action = value;
|
action = value;
|
||||||
|
|
||||||
if(!elContentTextActive) {
|
if (!elContentTextActive) {
|
||||||
elContentTextDefault.style.position = 'absolute';
|
elContentTextDefault.style.position = "absolute";
|
||||||
setContentTextHeight(elContentTextDefault);
|
setContentTextHeight(elContentTextDefault);
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if((!value || value === 'sign-in') && elContentTextActive !== elContentTextDefault) {
|
if (
|
||||||
|
(!value || value === "sign-in") &&
|
||||||
|
elContentTextActive !== elContentTextDefault
|
||||||
|
) {
|
||||||
setContentTextHeight(elContentTextDefault);
|
setContentTextHeight(elContentTextDefault);
|
||||||
} else if(value === 'create-account' && elContentTextActive !== elContentTextCreateAccount) {
|
} else if (
|
||||||
|
value === "create-account" &&
|
||||||
|
elContentTextActive !== elContentTextCreateAccount
|
||||||
|
) {
|
||||||
setContentTextHeight(elContentTextCreateAccount);
|
setContentTextHeight(elContentTextCreateAccount);
|
||||||
}
|
}
|
||||||
}, 0);
|
}, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const signIn = () => {
|
const signIn = () => {
|
||||||
setAction('sign-in');
|
setAction("sign-in");
|
||||||
|
|
||||||
inputKeyRef.focus();
|
inputKeyRef.focus();
|
||||||
};
|
};
|
||||||
|
|
||||||
const inputKeySignIn = () => {
|
const inputKeySignIn = () => {
|
||||||
if(!bip39.validateMnemonic(inputKey, wordlist)) {
|
if (!bip39.validateMnemonic(inputKey, wordlist)) {
|
||||||
alert('invalid key');
|
alert("invalid key");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -95,7 +103,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const createAccount = () => {
|
const createAccount = () => {
|
||||||
setAction('create-account');
|
setAction("create-account");
|
||||||
createAccountStep = 1;
|
createAccountStep = 1;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -109,7 +117,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const createAccountReady = () => {
|
const createAccountReady = () => {
|
||||||
if(createAccountStep !== 1) {
|
if (createAccountStep !== 1) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,34 +125,34 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const showKey = () => {
|
const showKey = () => {
|
||||||
if(createAccountStep !== 2) {
|
if (createAccountStep !== 2) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// generate key
|
// generate key
|
||||||
generatedKey = bip39.generateMnemonic(wordlist).split(' ');
|
generatedKey = bip39.generateMnemonic(wordlist).split(" ");
|
||||||
|
|
||||||
createAccountStep = 3;
|
createAccountStep = 3;
|
||||||
elSwitch.style.height = elSwitchDefault.offsetHeight + 'px';
|
elSwitch.style.height = elSwitchDefault.offsetHeight + "px";
|
||||||
elSwitchDefault.style.position = 'absolute';
|
elSwitchDefault.style.position = "absolute";
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setContentTextHeight(elContentTextShowKey);
|
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) {
|
if (event.target !== elSwitch) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
elSwitchShowKey.style.position = 'static';
|
elSwitchShowKey.style.position = "static";
|
||||||
elSwitch.style.height = '';
|
elSwitch.style.height = "";
|
||||||
});
|
});
|
||||||
}, 0);
|
}, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const showKeyWarning = () => {
|
const showKeyWarning = () => {
|
||||||
if(createAccountStep !== 3) {
|
if (createAccountStep !== 3) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,8 +162,10 @@
|
||||||
const copyKey = () => {
|
const copyKey = () => {
|
||||||
clearTimeout(copyKeyTimeout);
|
clearTimeout(copyKeyTimeout);
|
||||||
|
|
||||||
navigator.clipboard.writeText(generatedKey.join(' ')).then(() => {
|
navigator.clipboard
|
||||||
if(copyKeyCallback) {
|
.writeText(generatedKey.join(" "))
|
||||||
|
.then(() => {
|
||||||
|
if (copyKeyCallback) {
|
||||||
copyKeyCallback();
|
copyKeyCallback();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -169,10 +179,11 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
|
copyKeyTimeout = setTimeout(copyKeyCallback, 5000);
|
||||||
}).catch(error => {
|
})
|
||||||
|
.catch((error) => {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
|
|
||||||
if(copyKeyCallback) {
|
if (copyKeyCallback) {
|
||||||
copyKeyCallback();
|
copyKeyCallback();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -212,13 +223,19 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<img src={lumeLogo} alt="Lume"/>
|
<img src={lumeLogo} alt="Lume" />
|
||||||
</header>
|
</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="art">
|
||||||
<div class="gradient-1"></div>
|
<div class="gradient-1" />
|
||||||
<div class="gradient-2"></div>
|
<div class="gradient-2" />
|
||||||
<div class="gradient-3"></div>
|
<div class="gradient-3" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -226,11 +243,18 @@
|
||||||
<div id="content-text-wrapper">
|
<div id="content-text-wrapper">
|
||||||
<div id="content-text-default">
|
<div id="content-text-default">
|
||||||
<h1>Access the open web with ease</h1>
|
<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>
|
||||||
<div id="content-text-create-account">
|
<div id="content-text-create-account">
|
||||||
<h1>Set up your account key</h1>
|
<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>
|
||||||
<div id="content-text-show-key">
|
<div id="content-text-show-key">
|
||||||
<h1>Here’s your account key</h1>
|
<h1>Here’s your account key</h1>
|
||||||
|
|
@ -243,14 +267,24 @@
|
||||||
<div class="content-action-sign-in">
|
<div class="content-action-sign-in">
|
||||||
<div class="content-action-inner">
|
<div class="content-action-inner">
|
||||||
<div class="btn-wrapper sign-in-btn">
|
<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>
|
||||||
<div class="sign-in-form">
|
<div class="sign-in-form">
|
||||||
<div class="input-wrapper">
|
<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>
|
||||||
<div class="btn-wrapper">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -258,17 +292,34 @@
|
||||||
<div class="content-action-create-account">
|
<div class="content-action-create-account">
|
||||||
<div class="content-action-inner">
|
<div class="content-action-inner">
|
||||||
<div class="btn-wrapper create-account-ready-btn">
|
<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>
|
||||||
<div class="create-account-ready">
|
<div class="create-account-ready">
|
||||||
<div class="warning">
|
<div class="warning">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
<svg
|
||||||
<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" />
|
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>
|
</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>
|
||||||
<div class="btn-wrapper create-account-show-key-btn">
|
<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>
|
||||||
<div class="btn-wrapper create-account-back-btn">
|
<div class="btn-wrapper create-account-back-btn">
|
||||||
<button on:click={() => createAccountBack()}>
|
<button on:click={() => createAccountBack()}>
|
||||||
|
|
@ -284,13 +335,25 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-stack">
|
<div class="btn-stack">
|
||||||
<div class="btn-wrapper create-account-btn">
|
<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>
|
||||||
<div class="btn-wrapper create-account-gray-btn">
|
<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>
|
||||||
<div class="btn-wrapper create-account-cancel-btn">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -306,25 +369,51 @@
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<div class="warning">
|
<div class="warning">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
<div>Make sure to write this key down for safe keeping.</div>
|
<div>Make sure to write this key down for safe keeping.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-wrapper show-key-copy-btn">
|
<div class="btn-wrapper show-key-copy-btn">
|
||||||
<button class="btn-main btn-black" on:click={() => copyKey()} class:success={copyKeySuccess} class:error={copyKeyError}>
|
<button
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
class="btn-main btn-black"
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
{copyKeyButtonText}
|
{copyKeyButtonText}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-stack">
|
<div class="btn-stack">
|
||||||
<div class="btn-wrapper show-key-continue-btn">
|
<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>
|
||||||
<div class="btn-wrapper show-key-login-btn">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -334,7 +423,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grant-info">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -354,7 +445,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.art, .content {
|
.art,
|
||||||
|
.content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -375,24 +467,42 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-1 {
|
.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;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-2 {
|
.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;
|
opacity: 0;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-3 {
|
.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;
|
opacity: 0;
|
||||||
z-index: -3;
|
z-index: -3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main.sign-in, main.create-account {
|
main.sign-in,
|
||||||
|
main.create-account {
|
||||||
.art {
|
.art {
|
||||||
.gradient-1 {
|
.gradient-1 {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -486,7 +596,8 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-text-create-account, #content-text-show-key {
|
#content-text-create-account,
|
||||||
|
#content-text-show-key {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -709,7 +820,8 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-account-gray-btn, .create-account-cancel-btn {
|
.create-account-gray-btn,
|
||||||
|
.create-account-cancel-btn {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -870,8 +982,12 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.create-account-step-2, &.create-account-step-3 {
|
&.create-account-step-2,
|
||||||
#content-text-wrapper, .separator, #switch-default .btn-stack, .grant-info {
|
&.create-account-step-3 {
|
||||||
|
#content-text-wrapper,
|
||||||
|
.separator,
|
||||||
|
#switch-default .btn-stack,
|
||||||
|
.grant-info {
|
||||||
transition-delay: 2s;
|
transition-delay: 2s;
|
||||||
opacity: 0.15;
|
opacity: 0.15;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
@ -898,8 +1014,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.create-account-step-3, &.create-account-step-4 {
|
&.create-account-step-3,
|
||||||
#content-text-wrapper, .separator, #switch-default .btn-stack, .grant-info {
|
&.create-account-step-4 {
|
||||||
|
#content-text-wrapper,
|
||||||
|
.separator,
|
||||||
|
#switch-default .btn-stack,
|
||||||
|
.grant-info {
|
||||||
transition-delay: 0s;
|
transition-delay: 0s;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -936,7 +1056,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.create-account-step-4 {
|
&.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;
|
animation: 5000ms save-key-warning;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import '../../styles/global.scss';
|
import "../../styles/global.scss";
|
||||||
import lumeLogo from '../../assets/lume-logo.png';
|
import lumeLogo from "../../assets/lume-logo.png";
|
||||||
|
|
||||||
import svgGithub from '../../assets/icon/github.svg?raw';
|
import svgGithub from "../../assets/icon/github.svg?raw";
|
||||||
import svgDiscord from '../../assets/icon/discord.svg?raw';
|
import svgDiscord from "../../assets/icon/discord.svg?raw";
|
||||||
import svgTwitter from '../../assets/icon/twitter.svg?raw';
|
import svgTwitter from "../../assets/icon/twitter.svg?raw";
|
||||||
import svgFacebook from '../../assets/icon/facebook.svg?raw';
|
import svgFacebook from "../../assets/icon/facebook.svg?raw";
|
||||||
|
|
||||||
let step = 1;
|
let step = 1;
|
||||||
let userCount;
|
let userCount;
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
step = 3;
|
step = 3;
|
||||||
userCount = '23k';
|
userCount = "23k";
|
||||||
}, 6000);
|
}, 6000);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
@ -25,34 +25,49 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<img src={lumeLogo} alt="Lume"/>
|
<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="network">
|
||||||
<div class="connected">
|
<div class="connected">
|
||||||
<span class="icon icon-success"></span>
|
<span class="icon icon-success" />
|
||||||
Lume Network
|
Lume Network
|
||||||
</div>
|
</div>
|
||||||
<div class="connecting">
|
<div class="connecting">
|
||||||
<span class="icon icon-wait icon-wait-yellow"></span>
|
<span class="icon icon-wait icon-wait-yellow" />
|
||||||
Lume Network
|
Lume Network
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-count" class:user-count-hidden={!userCount}>
|
<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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
{userCount}
|
{userCount}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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-wrapper">
|
||||||
<div class="art-rotate">
|
<div class="art-rotate">
|
||||||
<div class="art">
|
<div class="art">
|
||||||
<div class="gradient-1"></div>
|
<div class="gradient-1" />
|
||||||
<div class="gradient-2"></div>
|
<div class="gradient-2" />
|
||||||
<div class="gradient-3"></div>
|
<div class="gradient-3" />
|
||||||
<div class="gradient-4"></div>
|
<div class="gradient-4" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -70,30 +85,24 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li class="success">
|
<li class="success">
|
||||||
<div class="network">
|
<div class="network">
|
||||||
<span class="icon icon-success"></span>
|
<span class="icon icon-success" />
|
||||||
HNS
|
HNS
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">Synced</div>
|
||||||
Synced
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="loading">
|
<li class="loading">
|
||||||
<div class="network">
|
<div class="network">
|
||||||
<span class="icon icon-wait"></span>
|
<span class="icon icon-wait" />
|
||||||
ENS
|
ENS
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">Syncing</div>
|
||||||
Syncing
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="error">
|
<li class="error">
|
||||||
<div class="network">
|
<div class="network">
|
||||||
<span class="icon icon-error"></span>
|
<span class="icon icon-error" />
|
||||||
Arweave
|
Arweave
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">Issue</div>
|
||||||
Issue
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -102,14 +111,22 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li class="success">
|
<li class="success">
|
||||||
<div class="network">
|
<div class="network">
|
||||||
<span class="icon icon-success"></span>
|
<span class="icon icon-success" />
|
||||||
IPFS
|
IPFS
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">
|
||||||
Connected
|
Connected
|
||||||
<div class="user-count">
|
<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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
{userCount}
|
{userCount}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -117,14 +134,22 @@
|
||||||
</li>
|
</li>
|
||||||
<li class="loading">
|
<li class="loading">
|
||||||
<div class="network">
|
<div class="network">
|
||||||
<span class="icon icon-wait"></span>
|
<span class="icon icon-wait" />
|
||||||
Arweave
|
Arweave
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">
|
||||||
Connecting
|
Connecting
|
||||||
<div class="user-count">
|
<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">
|
<svg
|
||||||
<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" />
|
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>
|
</svg>
|
||||||
{userCount}
|
{userCount}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -259,7 +284,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.step-3, &.step-4 {
|
&.step-3,
|
||||||
|
&.step-4 {
|
||||||
.network {
|
.network {
|
||||||
.connecting {
|
.connecting {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -312,24 +338,48 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-1 {
|
.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;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-2 {
|
.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;
|
opacity: 0;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-3 {
|
.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;
|
opacity: 0;
|
||||||
z-index: -3;
|
z-index: -3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-4 {
|
.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;
|
opacity: 0;
|
||||||
z-index: -4;
|
z-index: -4;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import '../../styles/global.scss';
|
import "../../styles/global.scss";
|
||||||
import lumeLogo from '../../assets/lume-logo.png';
|
import lumeLogo from "../../assets/lume-logo.png";
|
||||||
|
|
||||||
let started = false;
|
let started = false;
|
||||||
let step = 1;
|
let step = 1;
|
||||||
|
|
@ -19,54 +19,79 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const redirect = () => {
|
const redirect = () => {
|
||||||
window.location.href = '/account.html';
|
window.location.href = "/account.html";
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<img src={lumeLogo} alt="Lume"/>
|
<img src={lumeLogo} alt="Lume" />
|
||||||
</header>
|
</header>
|
||||||
<main class:started={started} class:step-2={step === 2} class:step-3={step === 3} class:step-4={step === 4}>
|
<main
|
||||||
<div class="art art-1"></div>
|
class:started
|
||||||
<div class="art art-2"></div>
|
class:step-2={step === 2}
|
||||||
<div class="art art-3"></div>
|
class:step-3={step === 3}
|
||||||
<div class="art art-4"></div>
|
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 class="content">
|
||||||
<div>
|
<div>
|
||||||
<div class="page content-1">
|
<div class="page content-1">
|
||||||
<h1>Thank you for supporting an open web.</h1>
|
<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">
|
<div class="btn-wrapper">
|
||||||
<button class="btn-main" on:click={() => start()}>Begin</button>
|
<button class="btn-main" on:click={() => start()}>Begin</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page content-2">
|
<div class="page content-2">
|
||||||
<h1>Gateway for easy access to the open web.</h1>
|
<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">
|
<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>
|
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page content-3">
|
<div class="page content-3">
|
||||||
<h1>Universal storage drive slide.</h1>
|
<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">
|
<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>
|
<button class="btn-main" on:click={() => next()}>Next</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page content-4">
|
<div class="page content-4">
|
||||||
<h1>Create decentralized websites.</h1>
|
<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">
|
<div class="btn-wrapper">
|
||||||
<button class="btn-main btn-black" on:click={() => prev()}>Back</button>
|
<button class="btn-main btn-black" on:click={() => prev()}
|
||||||
<button class="btn-main btn-green" on:click={() => redirect()}>Get started</button>
|
>Back</button>
|
||||||
|
<button class="btn-main btn-green" on:click={() => redirect()}
|
||||||
|
>Get started</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grant-info">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -80,9 +105,10 @@
|
||||||
background: #080808;
|
background: #080808;
|
||||||
}
|
}
|
||||||
|
|
||||||
.art, .content {
|
.art,
|
||||||
|
.content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
@ -180,7 +206,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-2, .content-3, .content-4 {
|
.content-2,
|
||||||
|
.content-3,
|
||||||
|
.content-4 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Reference in New Issue