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": {
"@fontsource-variable/red-hat-display": "^5.0.9",
"@formkit/auto-animate": "^0.7.0",
"@reduxjs/toolkit": "^1.9.5",
"@tauri-apps/api": "^1.4.0",
"redux": "^4.2.1",

View File

@ -1,12 +1,16 @@
<script lang="ts">
import autoAnimate from '@formkit/auto-animate';
import Matrix from '../../shared/matrix.svelte';
import Blek from '../../shared/blek.svelte';
import style from './style.module.scss';
import Link from '../../shared/Link.svelte';
let header_opacity = 0;
setTimeout(() => {
header_opacity = 1
}, 950);
}, 1500);
</script>
<div class={style.root}>
@ -19,4 +23,27 @@
<Matrix height='24pt' style='transform:translateY(10px)' />
</a>
</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>

View File

@ -19,14 +19,39 @@
h1, h3 {
font-weight: 400;
}
.header_opacity {
opacity: 0;
.h1, .h2, .buttons {
animation: appear 1.5s ease;
}
.h1, .h2 {
animation: appear 1s ease;
&::before {
opacity: 0;
.h1 { margin-top: 10% }
.h2 { animation-delay: 750ms }
.buttons {
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"
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":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"