add buttons to welcome screen

This commit is contained in:
b1ek 2023-08-13 21:07:33 +10:00
parent f91dcc4290
commit c671559427
Signed by: blek
GPG Key ID: 14546221E3595D0C
5 changed files with 78 additions and 8 deletions

View File

@ -12,6 +12,7 @@
}, },
"dependencies": { "dependencies": {
"@fontsource-variable/red-hat-display": "^5.0.9", "@fontsource-variable/red-hat-display": "^5.0.9",
"@formkit/auto-animate": "^0.7.0",
"@reduxjs/toolkit": "^1.9.5", "@reduxjs/toolkit": "^1.9.5",
"@tauri-apps/api": "^1.4.0", "@tauri-apps/api": "^1.4.0",
"redux": "^4.2.1", "redux": "^4.2.1",

View File

@ -1,12 +1,16 @@
<script lang="ts"> <script lang="ts">
import autoAnimate from '@formkit/auto-animate';
import Matrix from '../../shared/matrix.svelte'; import Matrix from '../../shared/matrix.svelte';
import Blek from '../../shared/blek.svelte'; import Blek from '../../shared/blek.svelte';
import style from './style.module.scss'; import style from './style.module.scss';
import Link from '../../shared/Link.svelte';
let header_opacity = 0; let header_opacity = 0;
setTimeout(() => { setTimeout(() => {
header_opacity = 1 header_opacity = 1
}, 950); }, 1500);
</script> </script>
<div class={style.root}> <div class={style.root}>
@ -19,4 +23,27 @@
<Matrix height='24pt' style='transform:translateY(10px)' /> <Matrix height='24pt' style='transform:translateY(10px)' />
</a> </a>
</h3> </h3>
<div class={style.buttons} style={`opacity: ${header_opacity}`}>
<Link href='/sign-in'>
<button>
Sign In
</button>
</Link>
<Link href='/homeserver_list'>
<button>
Create account
</button>
</Link>
<br/>
<Link href='/homeserver_list'>
<button>
Explore servers
</button>
</Link>
</div>
<h1 class={style.made_in + ' ' + style.h2} style={`opacity: ${header_opacity}`}>
Made in blek! Lab
</h1>
</div> </div>

View File

@ -19,14 +19,39 @@
h1, h3 { h1, h3 {
font-weight: 400; font-weight: 400;
} }
.header_opacity { .h1, .h2, .buttons {
opacity: 0; animation: appear 1.5s ease;
} }
.h1, .h2 { .h1 { margin-top: 10% }
animation: appear 1s ease; .h2 { animation-delay: 750ms }
&::before { .buttons {
opacity: 0; animation-delay: 1450ms;
button {
background: #0001;
border: 1px solid #767876;
border-radius: 6px;
padding: 6px 12px;
margin: 3px 2px;
color: #c2c4c2;
transition: 150ms ease;
&:hover {
transform: translateY(-1px);
}
&:active {
transform: scale(0.98);
background: #0008;
}
} }
} }
.h2 { animation-delay: 940ms; }
.made_in {
position: fixed;
bottom: 16px; left: 0%;
width: 100%;
text-align: center;
margin: 0;
font-size: 12pt;
color: #ffffff40
}
} }

12
src/shared/Link.svelte Normal file
View File

@ -0,0 +1,12 @@
<script lang="ts">
import RouteState from "../store/RouteStore";
export let href = '#';
function setUrl() {
RouteState.dispatch({ type: 'setPath', path: href });
}
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<a on:click={setUrl}><slot/></a>

View File

@ -124,6 +124,11 @@
resolved "https://registry.yarnpkg.com/@fontsource-variable/red-hat-display/-/red-hat-display-5.0.9.tgz#429f7526aec5f4cbc623e3b434d6dc1d73cf9a9a" resolved "https://registry.yarnpkg.com/@fontsource-variable/red-hat-display/-/red-hat-display-5.0.9.tgz#429f7526aec5f4cbc623e3b434d6dc1d73cf9a9a"
integrity sha512-REiFby1Q+TA2ndQoaOInVBV7hYWleEYj1Vf0bDC4CoahIuEsO0+73bqy40jaJNLOqMXTfK3NXGJrcJmRA/WC8Q== integrity sha512-REiFby1Q+TA2ndQoaOInVBV7hYWleEYj1Vf0bDC4CoahIuEsO0+73bqy40jaJNLOqMXTfK3NXGJrcJmRA/WC8Q==
"@formkit/auto-animate@^0.7.0":
version "0.7.0"
resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-0.7.0.tgz#7a68df578e972d63d999378571ce6e012d9059ae"
integrity sha512-RczHUr0AhRPssREoNdRjLfk2b/id9/DFnbIq18QM8L7E4zNV3XH+WO480EZ46BQHDEsv76YPJ0JbG2Y2i3GfXw==
"@jridgewell/resolve-uri@^3.1.0": "@jridgewell/resolve-uri@^3.1.0":
version "3.1.1" version "3.1.1"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"