rework index page

2023-11-28 21:52:09 +01:00 · 2023-11-28 21:52:09 +01:00 · dc21366f7a
commit dc21366f7a
parent 245d980b9a
6 changed files with 122 additions and 54 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -24,7 +24,7 @@
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
 				"autoprefixer": "^10.4.14",
-				"daisyui": "^3.6.3",
+				"daisyui": "^4.4.10",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte": "^2.30.0",
@ -1895,12 +1895,6 @@
 				"color-support": "bin.js"
 			}
 		},
-		"node_modules/colord": {
-			"version": "2.9.3",
-			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
-			"dev": true
-		},
 		"node_modules/commander": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -1984,17 +1978,25 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/culori": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+			"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
 		"node_modules/daisyui": {
-			"version": "3.6.3",
-			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.6.3.tgz",
-			"integrity": "sha512-VNWogAjx37H8kNYd2E/+r1OXc6dOvJTKlKltqIKAlNMFVfx2BIKPcmnVxaHQLfj2vhv1mYDBjgWj+1enQ+4yZA==",
+			"version": "4.4.10",
+			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.4.10.tgz",
+			"integrity": "sha512-NGDsOLtCQ9UzfeOUlKn1lwneQte4UoINmAaDBcrMAbZviu/jWm7PSR9DqH3eE/AY/TpkImdAPVK+kGsZlpEFkQ==",
 			"dev": true,
 			"dependencies": {
-				"colord": "^2.9",
 				"css-selector-tokenizer": "^0.8",
-				"postcss": "^8",
-				"postcss-js": "^4",
-				"tailwindcss": "^3"
+				"culori": "^3",
+				"picocolors": "^1",
+				"postcss-js": "^4"
 			},
 			"engines": {
 				"node": ">=16.9.0"
--- a/package.json
+++ b/package.json
@ -21,7 +21,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.14",
-		"daisyui": "^3.6.3",
+		"daisyui": "^4.4.10",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
--- a/src/lib/components/Countdown/Countdown.svelte
+++ b/src/lib/components/Countdown/Countdown.svelte
@ -26,26 +26,26 @@
 	onDestroy(() => clearInterval(intervalId));
 </script>

-<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
-	<div class="flex flex-col">
+<div class="grid grid-flow-col gap-5 text-center auto-cols-max text-white">
+	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm">
 		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{days};" />
 		</span>
 		Tage
 	</div>
-	<div class="flex flex-col">
+	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm">
 		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{hours};" />
 		</span>
 		Stunden
 	</div>
-	<div class="flex flex-col">
+	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm">
 		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{minutes};" />
 		</span>
 		Minuten
 	</div>
-	<div class="flex flex-col">
+	<div class="flex flex-col p-2 bg-gray-200 rounded-box bg-opacity-5 backdrop-blur-sm">
 		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{seconds};" />
 		</span>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -25,6 +25,13 @@
 			active: false
 		}
 	];
+	let footerLinks = [
+		{
+			name: 'Teamspeak',
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M152.8 37.2c-32.2 38.1-56.1 82.6-69.9 130.5c0 .2-.1 .3-.1 .5C43.5 184.4 16 223 16 268c0 59.6 48.4 108 108 108s108-48.4 108-108c0-53.5-38.9-97.9-90-106.5c15.7-41.8 40.4-79.6 72.3-110.7c1.8-1.6 4-2.6 6.3-3.1c37.2-11.5 76.7-13.3 114.8-5.2C454.7 67.6 534 180.7 517.1 301.3c-8.4 62.6-38.6 112.7-87.7 151.4c-50.1 39.7-107.5 54.3-170.2 52.2l-24-1c12.4 2.8 25 4.9 37.6 6.3c40.7 4.2 81.4 2.1 120.1-12.5c94-35.5 149.3-102.3 162.9-202.5c4.8-52.6-5.8-105.4-30.8-152C454.6 11.3 290.8-38.4 159 32c-2.4 1.4-4.5 3.1-6.3 5.2zM309.4 433.9c-2.1 11.5-4.2 21.9-14.6 31.3c53.2-1 123.2-29.2 161.8-97.1c39.7-69.9 37.6-139.9-6.3-207.8C413.8 105 360.5 77.9 293.7 73.7c1.5 2.3 3.2 4.4 5.2 6.3l5.2 6.3c25.1 31.3 37.6 67.9 42.8 107.5c2.1 15.7-1 30.3-13.6 41.8c-4.2 3.1-5.2 6.3-4.2 10.4l7.3 17.7L365.7 318c5.2 11.5 4.2 19.8-6.3 28.2c-3.2 2.5-6.7 4.6-10.4 6.3l-18.8 8.4 3.1 13.6c3.1 6.3 1 12.5-3.1 17.7c-2.5 2.4-3.8 5.9-3.1 9.4c2.1 11.5-2.1 19.8-12.5 25.1c-2.1 1-4.2 5.2-5.2 7.3zm-133.6-3.1c16.7 11.5 34.5 20.9 53.2 26.1c24 5.2 41.8-6.3 44.9-30.3c1-8.4 5.2-14.6 12.5-17.7c7.3-4.2 8.4-7.3 2.1-13.6l-9.4-8.4 13.6-4.2c6.3-2.1 7.3-5.2 5.2-11.5c-1.4-3-2.4-6.2-3.1-9.4c-3.1-14.6-2.1-15.7 11.5-18.8c8.4-3.1 15.7-6.3 21.9-12.5c3.1-2.1 3.1-4.2 1-8.4l-16.7-30.3c-1-1.9-2.1-3.8-3.1-5.7c-6.4-11.7-13-23.6-15.7-37.1c-2.1-9.4-1-17.7 8.4-24c5.2-4.2 8.4-9.4 8.4-16.7c-.4-10.1-1.5-20.3-3.1-30.3c-6.3-37.6-23-68.9-51.2-95c-5.2-4.2-9.4-6.3-16.7-4.2L203.9 91.5c2 1.2 4 2.4 6 3.6l0 0c6.3 3.7 12.2 7.3 17 12.1c30.3 26.1 41.8 61.6 45.9 100.2c1 8.4 0 16.7-7.3 21.9c-8.4 5.2-10.4 12.5-7.3 20.9c4.9 13.2 10.4 26 16.7 38.6L291.6 318c-6.3 8.4-13.6 11.5-21.9 14.6c-12.5 3.1-14.6 7.3-10.4 20.9c.6 1.5 1.4 2.8 2.1 4.2c2.1 5.2 1 8.4-4.2 10.4l-12.5 3.1 5.2 4.2 4.2 4.2c4.2 5.2 4.2 8.4-2.1 10.4c-7.3 4.2-11.5 9.4-11.5 17.7c0 12.5-7.3 19.8-18.8 24c-3.8 1-7.6 1.5-11.5 1l-34.5-2.1z"/></svg>',
+			href: 'ts3server://mhsl.eu'
+		}
+	];

 	let showMenuPermanent = false;
 	let menuButtonScrollIndex: number | null = null;
@ -74,7 +81,7 @@
 />

 <main>
-	<div class="h-screen w-full">
+	<div class="min-h-screen w-full">
 		<slot />
 	</div>
 </main>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -2,48 +2,107 @@
 	import { env } from '$env/dynamic/public';
 	import Countdown from '$lib/components/Countdown/Countdown.svelte';
 	import { IconOutline } from 'svelte-heros-v2';
+
+	let information = [
+		{
+			title: 'Das Projekt',
+			description:
+				'CraftAttack ist ein Vanilla-Minecraft-Projekt, bei dem zahlreiche Spieler im friedlichen Miteinander spielen. Von gemeinsamen Bauvorhaben bis hin zum kollektiven Kampf gegen den Enderdrachen können die vielfältigen Aspekte von Minecraft erkundet werden.'
+		},
+		{
+			title: 'Events',
+			description:
+				'Abwechslungsreiche Events und verschiedene Minispiele sorgen dafür, dass es nie langweilig wird und garantieren somit jede Menge Spielspaß.'
+		},
+		{
+			title: 'Voraussetzungen',
+			description:
+				'Jeder ist willkommen und kann mitspielen. Dazu benötigst Du nur einen Minecraft-Account und schon bist Du Teil unser Community :)'
+		}
+	];
 </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 class="flex flex-col min-h-screen h-screen relative">
+	<div class="sm:absolute top-0 left-0 flex items-center xl:w-1/2 px-6 sm:px-10 h-full">
+		<div class="flex flex-col items-center xl:items-start w-full xl:h-3/4">
+			<img src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp" alt="Craftattack 6" />
+			<div class="flex flex-col justify-around w-full lg:w-10/12 h-full">
+				<div>
+					<div class="divider" />
+					<div class="flex flex-col md:flex-row xl:flex-col gap-5">
+						{#each information as info}
+							<div>
+								<h4 class="text-white mb-1">{info.title}</h4>
+								<p>{info.description}</p>
 							</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">
+						{/each}
+					</div>
+					<div class="divider" />
+				</div>
+				<div class="flex justify-center">
+					<a
+						class="btn btn-outline btn-accent hover:bg-white"
+						href="{env.PUBLIC_BASE_PATH}/register">Jetzt registrieren</a
+					>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div
+		class="hidden xl:block absolute top-0 left-0 h-full w-full"
+		style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"
+	>
+		<img src="{env.PUBLIC_BASE_PATH}/img/bg.webp" alt="" />
+	</div>
+	<div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
 		<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 class="flex justify-center py-20 bg-base-200">
+	<div class="card bg-base-100 shadow-lg w-11/12 xl:w-5/12 p-10">
+		<div>
+			<h2 class="text-3xl text-white mb-8">Über uns</h2>
+			<p>
+				Wir sind ein kleines Team von Minecraft-Enthusiasten, das bereits im 6. Jahr in Folge
+				Minecraft CraftAttack organisiert. Jahr für Jahr arbeiten wir daran, das Spielerlebnis zu
+				verbessern und steigeren die Teilnehmerzahl.
+			</p>
+			<p>
+				Unser Ziel bei diesem ab dem <span class="underline">27.12.2023</span>
+				stattfindenden Projekts ist es, sicherzustellen, dass alle Spieler eine großartige Erfahrung
+				haben und alles reibungslos abläuft. Wir freuen uns immer über Anregungen und stehen Dir jederzeit
+				zur Verfügung.
+			</p>
 		</div>
 	</div>
-			</button>
+</div>
+<div class="flex flex-col xl:flex-row justify-center items-center py-20 bg-base-100">
+	<div>
+		<h3 class="text-center text-2xl mb-6">2022 in Zahlen</h3>
+		<div class="stats stats-vertical sm:stats-horizontal shadow">
+			<div class="stat">
+				<div class="stat-figure">
+					<img
+						class="w-8 h-8"
+						src="{env.PUBLIC_BASE_PATH}/img/netherrack.webp"
+						alt=""
+						title="Netherrack"
+					/>
+				</div>
+				<div class="stat-title">Meistabgebauter Block</div>
+				<div class="stat-value">2.3M</div>
+			</div>
+			<div class="stat">
+				<div class="stat-figure">
+					<IconOutline name="user-outline" />
+				</div>
+				<div class="stat-title">Angemeldete Spieler</div>
+				<div class="stat-value">156</div>
+			</div>
 		</div>
 	</div>
 </div>
--- a/static/img/bg.webp
+++ b/static/img/bg.webp