69 lines
1.7 KiB
Svelte
69 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { env } from '$env/dynamic/public';
|
|
import Countdown from '$lib/components/Countdown/Countdown.svelte';
|
|
import { IconOutline } from 'svelte-heros-v2';
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Craftattack</title>
|
|
</svelte:head>
|
|
|
|
<div class="absolute top-0 left-0 h-screen w-full overflow-hidden">
|
|
<!-- svelte-ignore a11y-media-has-caption -->
|
|
<video
|
|
class="h-full w-full blur-sm object-cover"
|
|
autoplay
|
|
loop
|
|
src="{env.PUBLIC_BASE_PATH}/vid/background.mp4"
|
|
/>
|
|
<div class="absolute top-0 left-0 w-full h-full bg-black opacity-70" />
|
|
</div>
|
|
<div class="absolute top-0 w-full">
|
|
<div class="relative h-screen">
|
|
<div class="flex flex-col items-center w-full pt-36">
|
|
<img
|
|
class="w-11/12 sm:w-3/4 pointer-events-none"
|
|
src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp"
|
|
alt="Craftattack 6"
|
|
width="1905"
|
|
height="188"
|
|
/>
|
|
<div class="mt-4 sm:mt-10 lg:mt-16">
|
|
<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 sm:bottom-6 lg:bottom-10 w-full flex justify-center">
|
|
<button
|
|
on:click={() => {
|
|
window.scrollTo(0, window.innerHeight);
|
|
}}
|
|
>
|
|
<div class="border-2 border-white rounded-full w-10 h-16 flex justify-center items-center">
|
|
<div class="animate-[pleaseINeedAttention_1.5s_ease-in-out_infinite]">
|
|
<IconOutline name="chevron-double-down-outline" width="34" height="34" />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes -global-pleaseINeedAttention {
|
|
0% {
|
|
margin-bottom: 15px;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
margin-bottom: -15px;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|