2024-01-10 15:26:45 +00:00
|
|
|
<script lang="ts">
|
2024-01-11 11:59:52 +00:00
|
|
|
import { Button, Checkbox } from "flowbite-svelte";
|
2024-01-10 15:26:45 +00:00
|
|
|
import Progressbar from "../lib/Progressbar.svelte";
|
2024-01-11 11:59:52 +00:00
|
|
|
let progressbarFix = true;
|
|
|
|
let launching = false;
|
|
|
|
let patch = true;
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
progressbarFix = false;
|
|
|
|
}, 1000);
|
2024-01-10 15:26:45 +00:00
|
|
|
</script>
|
|
|
|
|
2024-01-11 11:59:52 +00:00
|
|
|
<main
|
|
|
|
class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn"
|
|
|
|
>
|
2024-01-10 15:26:45 +00:00
|
|
|
<div
|
2024-01-11 11:59:52 +00:00
|
|
|
class="container flex flex-col items-center justify-center gap-3 rounded-lg p-3"
|
2024-01-10 15:26:45 +00:00
|
|
|
>
|
2024-01-11 11:59:52 +00:00
|
|
|
<Button
|
|
|
|
color="light"
|
|
|
|
size="xl"
|
|
|
|
class="dark:active:!bg-gray-900 {launching
|
|
|
|
? ''
|
|
|
|
: 'active:scale-95 '}transition-transform duration-75"
|
|
|
|
disabled={launching}
|
|
|
|
on:click={() => (launching = !launching)}>Launch</Button
|
|
|
|
>
|
|
|
|
<Checkbox disabled={launching} bind:checked={patch}>Patch</Checkbox>
|
|
|
|
<div
|
|
|
|
class="w-full flex flex-col justify-center items-center gap-2 mt-2 {launching
|
|
|
|
? 'animate-fadeIn '
|
|
|
|
: 'animate-fadeOut '}{progressbarFix ? '!opacity-0' : 'opacity-0'}"
|
2024-01-10 15:26:45 +00:00
|
|
|
>
|
|
|
|
<Progressbar
|
|
|
|
animate={true}
|
|
|
|
progress={null}
|
|
|
|
labelInside={true}
|
2024-01-11 11:59:52 +00:00
|
|
|
size="h-3"
|
2024-01-10 15:26:45 +00:00
|
|
|
labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
|
|
|
|
/>
|
2024-01-11 11:59:52 +00:00
|
|
|
<p class="m-0 p-0 dark:text-gray-400 font-light">Waiting...</p>
|
2024-01-10 15:26:45 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|