FCLauncher/fclauncher/frontend/src/App.svelte

87 lines
1.6 KiB
Svelte

<script lang="ts">
import logo from './assets/images/fc-logo.png'
import Instances from './Instances.svelte'
import Loading from './Loading.svelte'
import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
import { onMount } from 'svelte'
import { loading, testPage } from './global'
import { slide } from 'svelte/transition'
import Navbar from './Navbar.svelte'
import Testpage from './Testpage.svelte'
let width: int = 10
onMount(() => {
CheckPrerequisites().then(() => $loading = false)
})
</script>
<main>
<div class="navbar">
<Navbar />
</div>
<body>
<!--<img alt="Wails logo" id="logo" src="{logo}">-->
{#if $testPage}
<div>
<Testpage />
</div>
{:else}
{#if $loading}
<div transition:slide="{{duration:100}}" class="central">
<Loading />
</div>
{:else}
<div transition:slide="{{duration:100}}" class="central">
<Instances />
</div>
{/if}
{/if}
</body>
</main>
<style>
:root{
font-size: 16px;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
background-color: var(--bg-secondary);
}
.navbar{
z-index: 5;
}
#logo {
display: flex;
width: 70%;
height: 70%;
margin: auto;
padding: 10% 0 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
body{
display: flex;
flex-direction: column;
margin-left: 5rem;
}
main{
background-color: var(--bg-secondary);
}
.central{
background-color: var(--bg-secondary);
}
</style>