CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

add basic index site
All checks were successful
delpoy / build-and-deploy (push) Successful in 37s
Details

Browse Source
This commit is contained in:
bytedream
2023-08-11 22:36:09 +02:00
parent a6069d4c74
commit 84c61e2f72
10 changed files with 87 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/routes/+layout.svelte
View File

@ -1,26 +1,5 @@
<script lang="ts">
import '../app.css';
import { env } from '$env/dynamic/public';
</script>
<nav class="navbar fixed top-0 bg-base-100 h-12 z-40">
<div class="navbar-start h-full">
<a class="h-full" href="{env.PUBLIC_BASE_PATH}/">
<img
class="rounded h-full"
src="{env.PUBLIC_BASE_PATH}/img/craftattack-logo.webp"
alt="Logo"
/>
</a>
</div>
<div class="navbar-center flex space-x-20">
<a class="link" href="{env.PUBLIC_BASE_PATH}/register">Anmelden</a>
<a class="link" href="{env.PUBLIC_BASE_PATH}/rules">Regeln</a>
</div>
<div class="navbar-end" />
</nav>
<main class="flex min-h-[calc(100vh-64px-16px)] mt-16 mb-4">
<slot />
</main>
<slot />

58
src/routes/+page.svelte
View File

@ -1,6 +1,7 @@
<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>
@ -10,3 +11,60 @@
<div class="w-full flex justify-center items-center">
<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
</div>
<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"
/>
<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>