Add Base site

2024-11-14 15:59:17 +02:00
parent d1d1dd13d1
commit af15269a37
18 changed files with 632 additions and 19 deletions
@@ -1,3 +1,39 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
+@import url('https://fonts.cdnfonts.com/css/chewy');
+@import url('https://fonts.cdnfonts.com/css/raleway-5');
+@import url('https://fonts.cdnfonts.com/css/nunito');
+@import url('https://fonts.cdnfonts.com/css/mountains-of-christmas');
+
+body {
+    @apply bg-primary-FestiveRed text-primary-SnowyWhite;
+
+}
+
+* {
+    font-family: 'raleway', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'mountains of christmas', cursive;
+}
+
+.input-text {
+    @apply border-2 rounded-md p-2 bg-primary-FestiveRed border-primary-SantaSuitBlack-light;
+}
+
+.button {
+    @apply border-2 rounded-md p-2;
+}
+
+.button-primary {
+    @apply border-primary-GoldTinsel bg-primary-GoldTinsel-dark text-primary-SantaSuitBlack font-bold mx-auto px-6 hover:bg-primary-GoldTinsel-light
+}
+
+.movie-poster {
+    @apply rounded-md mx-2 w-[60rem]
+    /* aspect-ratio: auto; */
+    /* width: 100%; */
+    
+}
@@ -1,12 +1,16 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+	<link rel="icon" href="%sveltekit.assets%/favicon-192x192.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
@@ -0,0 +1,34 @@
+<script lang="ts">
+	let { id, title, description, points }: Cliche = $props();
+
+	type Cliche = {
+		id: number;
+		title: string;
+		description: string;
+		points: number;
+	};
+</script>
+
+<div class="card">
+	<div class="relative">
+		<input class="left-0 top-0" type="checkbox" name="" id="card-{id}" />
+		<input type="checkbox" class="peer hidden" name="cardDetails-{id}" id="cardDetails-{id}" />
+		<label for="cardDetails-{id}">{title}</label>
+		<!-- <button class="text-center text-xl font-semibold">{title}</button> -->
+
+		<div class="hidden flex-col gap-4 peer-checked:flex">
+			<!-- <img src="https://placehold.co/150x200" class="mx-auto" alt="Descriptive" /> -->
+			<p>{description}</p>
+			<p>Points: {points}</p>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.card {
+		@apply mx-auto my-6 flex max-w-sm flex-col gap-4 rounded-xl border-2 border-primary-FestiveRed-dark p-6 text-center;
+	}
+	.card input {
+		@apply absolute left-0 top-0 m-0 appearance-none rounded-lg p-0 accent-black;
+	}
+</style>
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Card from './Card.svelte';
+
+	type Cliche = {
+		id: number;
+		title: string;
+		description: string;
+		points: number;
+	};
+
+	const cards: Cliche[] = [
+		{
+			id: 1,
+			title: 'Punainen villakangastakki',
+			description: 'Päähenkilöllä on aina kirkkaanpunainen, täydellisesti istuva talvitakki.',
+			points: 1
+		},
+		{
+			id: 2,
+			title: 'Keskeytetty suudelma',
+			description: 'Juuri, kun romanttinen hetki on käsillä, jokin keskeyttää ensisuudelman.',
+			points: 1
+		},
+		{
+			id: 3,
+			title: 'Miespääosa yh',
+			description:
+				'Miespäähenkilö on yksinhuoltaja, joka tasapainoilee uran ja lapsenhoidon välillä.',
+			points: 2
+		},
+		{
+			id: 4,
+			title: 'Leskimies',
+			description: 'Päähenkilö on menettänyt puolisonsa ja yrittää nyt toipua elämässään.',
+			points: 2
+		},
+		{
+			id: 5,
+			title: 'Jouluoksennus',
+			description:
+				'Koti, työpaikka tai jokin muu koristeltu liioitellusti jouluteemalla, ilman mitään hillittyä tyylitajua.',
+			points: 1
+		},
+		{
+			id: 6,
+			title: 'Evergreen',
+			description:
+				"Tarinan kylä tai kaupunki on idyllinen paikka, nimeltään jotain jouluista, kuten 'Evergreen' tai 'Snowville'.",
+			points: 3
+		},
+		{
+			id: 7,
+			title: 'Yritys pulassa',
+			description: 'Päähenkilön yritys on konkurssin partaalla tai vaarassa tulla ostetuksi.',
+			points: 2
+		},
+		{
+			id: 8,
+			title: 'Naispääosa pitkä blondi',
+			description: 'Naispääosalla pitkät blondit hiukset.',
+			points: 1
+		}
+	];
+	let selected_cliches: Cliche[] = [];
+</script>
+
+<form action="">
+	{#each cards as card}
+		<Card id={card.id} title={card.title} description={card.description} points={card.points} />
+	{/each}
+	<button class="button button-primary mx-auto">Valitse kortit</button>
+</form>
+<div></div>
@@ -0,0 +1,3 @@
+<footer class="footer bg-primary-FestiveRed-dark text-primarySnowyWhite-dark mt-4 p-6 text-center">
+	<p>Paska Joululeffa 2024&copy; Kessinen</p>
+</footer>
@@ -0,0 +1,21 @@
+<script>
+</script>
+
+<header
+	class="header bg-primary-FestiveRed-dark mb-10 flex w-full items-center justify-between p-6 drop-shadow-lg"
+>
+	<a href="/" aria-label="Paska joululeffa 2024"
+		><enhanced:img
+			class="rounded-lg"
+			src="../../../static/favicon-192x192.png?w=50"
+			alt="Paska joululeffa 2024"
+		/></a
+	>
+	<a href="/" aria-label="Shitty Christmas Movie"
+		><h1 class="text-primarySnowyWhite-dark text-2xl font-extrabold">Paska Joululeffa 2024</h1>
+	</a>
+	<span>
+		<a href="/login">Sisään</a>
+		<!-- <button>Ulos</button> -->
+	</span>
+</header>
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	const backend = import.meta.env.VITE_API_URL;
+</script>
+
+<div
+	class="black border-primary-FestiveRed-dark bg-primary-FestiveRed-dark mx-auto flex max-w-sm flex-col gap-8 rounded-xl border-2 p-6 text-center drop-shadow-lg backdrop-blur-md"
+>
+	<h1 class="text-2xl">Kirjaudu sisään</h1>
+	<form method="POST" action="?/login" class="flex flex-col gap-6" use:enhance>
+		<label for="username">Käyttäjä</label>
+		<input type="text" name="username" id="username" class="input-text" required minlength="3" />
+		<label for="password">Salasana</label>
+		<input
+			type="password"
+			name="password"
+			id="password"
+			class="input-text"
+			required
+			minlength="5"
+		/>
+		<hr class="my-4 border-0" />
+		<button type="submit" class="button button-primary">Sisään</button>
+	</form>
+</div>
@@ -0,0 +1,30 @@
+<div>
+	<h2 class="mb-4 text-center text-xl font-semibold">Maple Valley Christmas</h2>
+	<div class="mx-auto flex gap-2 px-3">
+		<div class="movie-poster">
+			<img
+				class="rounded-2xl"
+				src="https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_.jpg"
+				alt="Poster"
+			/>
+		</div>
+		<div>
+			<div class="grid grid-cols-2">
+				<p class="font-semibold">Vuosi:</p>
+				<p>2022</p>
+				<p class="font-semibold">Näyttelijät:</p>
+				<p>Peyton List, Andrew W. Walker, Frances Flanagan</p>
+			</div>
+			<div class="mt-2">
+				<p class="font-semibold">Juoni:</p>
+				<div>
+					<p>
+						Erica on karjatilan omistaja, joka on viettänyt koko elämänsä työskennellen perheensä
+						tilalla äitinsä ja siskonsa kanssa. Kun Aaron saapuu ja sotkee hänen suunnitelmansa,
+						Erica alkaa pohtia, mitä hän oikeastaan haluaa elämältään.
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -1,6 +1,18 @@
 <script lang="ts">
 	import '../app.css';
+	import Header from '$lib/components/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 	let { children } = $props();
 </script>

-{@render children()}
+<svelte:head>
+	<title>Paska joululeffa 2024</title>
+</svelte:head>
+
+<div class="flex min-h-[100dvh] flex-col">
+	<Header />
+	<main class="container mx-auto max-w-4xl flex-grow overflow-hidden">
+		{@render children()}
+	</main>
+	<Footer />
+</div>
@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
@@ -0,0 +1,5 @@
+<script>
+	import Login from '$lib/components/Login.svelte';
+</script>
+
+<Login />