feat: init

src/routes/+layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+</script>
+
+<slot />
+
+<style global>
+	:global(html) {
+		background-color: black;
+		/* background-image: url(/confetti.png); */
+		background-size: 80%;
+		backdrop-filter: brightness(0.5);
+	}
+</style>

src/routes/+page.svelte

@@ -1,5 +1,69 @@
 <script lang="ts">
+	import Button from '$lib/components/button.svelte';
+	import Confetti from '$lib/components/confetti.svelte';
 	import Mask from '$lib/components/mask.svelte';
+	import Maskenball from '$lib/components/maskenball.svelte';
 </script>
 
+<img class="curtain-right" src="/curtain.png" />
+<img class="curtain-left" src="/curtain.png" />
+<Confetti />
 <Mask />
+<Maskenball />
+<div class="center">
+	<Button>Eintreten</Button>
+</div>
+
+<style>
+	.center {
+		display: flex;
+		justify-content: center;
+		margin-top: 50px;
+	}
+	img.curtain-right {
+		position: fixed;
+		top: -30px;
+		right: 0px;
+		width: 400px;
+		z-index: 2;
+		filter: brightness(0.8) contrast(1.1) saturate(0.6);
+		animation: moveInRight 2s ease forwards;
+		animation-delay: 0.5s;
+		transform: translateX(100%);
+	}
+	@keyframes moveInRight {
+		from {
+			transform: translateX(100%) rotate(-10deg);
+		}
+		to {
+			transform: translateX(15%) rotate(0deg);
+		}
+	}
+	img.curtain-left {
+		transform: scaleX(-1);
+		position: fixed;
+		top: -30px;
+		left: 0px;
+		width: 400px;
+		z-index: 2;
+		filter: brightness(0.8) contrast(1.1) saturate(0.6);
+
+		animation: moveInLeft 2s ease forwards;
+		animation-delay: 0.5s;
+		transform: translateX(-100%);
+	}
+
+	@keyframes moveInLeft {
+		from {
+			transform: translateX(-100%) rotate(10deg) scaleX(-1);
+		}
+		to {
+			transform: translateX(-15%) rotate(0deg) scaleX(-1);
+		}
+	}
+
+	:global(#confetti) {
+		position: relative;
+		z-index: -1;
+	}
+</style>