ADD Review form component and layout

src/lib/components/ReviewForm.svelte

@@ -0,0 +1,130 @@
+<script>
+	import ScoreSlider from './ScoreSlider.svelte';
+</script>
+
+<div class="mx-auto lg:w-1/2 space-y-4 bg-gray-200 p-8">
+	<h1 class="text-2xl font-bold text-center">Joku maa</h1>
+	<img
+		src="https://upload.wikimedia.org/wikipedia/commons/8/81/Metallica_March_2024.jpg"
+		alt="Artist"
+		class="rounded-lg mx-auto drop-shadow-md border-2 border-gray-300"
+	/>
+	<div class="text-center">
+		<p>Metallica</p>
+		<p>-</p>
+		<p>Unforgiven</p>
+	</div>
+	<div class="space-y-4">
+		<section class="space-y-2">
+			<input
+				type="checkbox"
+				name="kuvaus_toggle"
+				id="kuvaus_toggle"
+				class="kuvaus_toggle"
+				checked
+			/>
+			<label for="kuvaus_toggle">Kuvaus</label>
+			<div class="kuvaus space-y-2">
+				<p>
+					Kappale kertoo yksilön elämänkaaresta, jossa hän kokee jatkuvaa alistamista ja
+					epäoikeudenmukaisuutta. Kappale kuvaa lapsuutta, jossa hánet pakotetaan muiden sääntöihin,
+					ja aikuisuutta, jossa hän yrittää turhaan miellyttää muita. Lopulta hänestä tulee katkera
+					ja väsynyt vanhus, joka katsoo elämänkaaresta katumuksen täyttämiän. Kappaleen keskiössä
+					on taistelu oman vapauden ja identiteetin puolesta sekä pettymysten ja katkeruuden
+					tunteet.
+				</p>
+				<div>
+					<span class="review-tag">Identiteetti ja kamppailu</span>
+					<span class="review-tag">sopeutuminen vs. vapaus</span>
+					<span class="review-tag">katumus ja katkeruus</span>
+					<span class="review-tag">tunteellinen kipu</span>
+					<span class="review-tag">elämänkaari</span>
+					<span class="review-tag">itsereflektio</span>
+					<span class="review-tag">sisäinen konflikti.</span>
+				</div>
+			</div>
+		</section>
+		<section>
+			<input type="checkbox" name="sanat_toggle" id="sanat_toggle" class="sanat_toggle" />
+			<label for="sanat_toggle">Sanat</label>
+
+			<div class="sanat space-y-4 text-center">
+				<p>
+					[Verse 1]<br />
+					New blood joins this earth<br />
+					And quickly he's subdued<br />
+					Through constant pained disgrace<br />
+					The young boy learns their rules<br />
+					With time, the child draws in<br />
+					This whipping boy done wrong<br />
+					Deprived of all his thoughts<br />
+					The young man struggles on and on, he's known<br />
+					Ooh, a vow onto his own, that never from this day<br />
+					His will they'll take away, yeah
+				</p>
+				<p>
+					[Chorus]<br />
+					What I've felt, what I've known<br />
+					Never shined through in what I've shown<br />
+					Never be, never see<br />
+					Won't see what might have been<br />
+					What I've felt, what I've known<br />
+					Never shined through in what I've shown<br />
+					Never free, never me<br />
+					So I dub thee unforgiven
+				</p>
+				<p>
+					[Verse 2]<br />
+					They dedicate their lives<br />
+					To running all of his<br />
+					He tries to please them all<br />
+					This bitter man he is<br />
+					Throughout his life the same<br />
+					He's battled constantly<br />
+					This fight he cannot win<br />
+					A tired man they see no longer cares<br />
+					The old man then prepares to die regretfully<br />
+					That old man here is me, yeah
+				</p>
+				<p>[Chorus]</p>
+				<p>[Guitar Solo]</p>
+				<p>[Chorus]</p>
+				<p>
+					[Outro]<br />
+					Never free, never me<br />
+					So I dub thee unforgiven<br />
+					You labeled me, I'll label you<br />
+					So I dub thee unforgiven<br />
+					Never free, never me<br />
+					So I dub thee unforgiven<br />
+					You labeled me, I'll label you<br />
+					So I dub thee unforgiven<br />
+					Never free, never me<br />
+					So I dub thee unforgiven
+				</p>
+			</div>
+		</section>
+	</div>
+	<div class="space-y-8">
+		<ScoreSlider title="Kappale" currentRating={50} />
+		<ScoreSlider title="Asuste" currentRating={50} />
+		<ScoreSlider title="Lava show" currentRating={50} />
+		<input type="submit" value="Tallenna" class="btn btn-primary" />
+		<button class="btn">Peruuta</button>
+	</div>
+</div>
+
+<style>
+	.sanat,
+	.kuvaus {
+		display: none;
+	}
+
+	.sanat_toggle:checked ~ .sanat {
+		display: block;
+	}
+
+	.kuvaus_toggle:checked ~ .kuvaus {
+		display: block;
+	}
+</style>

src/routes/+layout.svelte

@@ -3,4 +3,10 @@
 	import '../app.css';
 </script>
 
-{@render children()}
+<div class="container mx-auto">
+	{@render children()}
+</div>
+
+<svelte:head>
+	<title>Euroviisu Kotiraati 25</title>
+</svelte:head>