From cd495ecc588dce810683c04e051c4f4286a061f0 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Mon, 9 Jun 2025 18:08:46 +0530
Subject: [PATCH] make the card flip!

---
 src/routes/flashcards/+page.svelte |  4 +--
 src/routes/flashcards/card.svelte  | 40 +++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/routes/flashcards/+page.svelte b/src/routes/flashcards/+page.svelte
index e0e46a9..c372850 100644
--- a/src/routes/flashcards/+page.svelte
+++ b/src/routes/flashcards/+page.svelte
@@ -6,8 +6,8 @@
 
 <div class="flex h-full flex-col">
 	<div class="flex flex-1 flex-col items-center justify-center gap-5">
-		<Card />
-		<div class="flex gap-3">
+		<div class="flex flex-col text-center gap-1"><Card /></div>
+		<div class="flex gap-4">
 			<Buttons />
 		</div>
 	</div>
diff --git a/src/routes/flashcards/card.svelte b/src/routes/flashcards/card.svelte
index dcae684..bfa89ba 100644
--- a/src/routes/flashcards/card.svelte
+++ b/src/routes/flashcards/card.svelte
@@ -1 +1,39 @@
-<div class="w-2/5 min-w-[600px] aspect-video rounded border-2"></div>
+<script>
+	let card = {
+		Q: "What is the capital of France?",
+		a: "Paris",
+	};
+
+	let flipped = false;
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="peer aspect-video w-[600px] cursor-pointer transition perspective-[1000px] hover:scale-105"
+	on:click={() => (flipped = !flipped)}
+>
+	<div
+		class={`relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] ${flipped ? "rotate-y-180" : ""}`}
+	>
+		<div
+			class="absolute flex h-full w-full flex-col items-center justify-center gap-5 rounded border-2 bg-blue-800 text-5xl text-white [backface-visibility:hidden]"
+		>
+			<span class="text-3xl text-blue-600">Question</span>
+			{card.Q}
+		</div>
+
+		<div
+			class="absolute flex h-full w-full rotate-y-180 flex-col items-center justify-center gap-5 rounded border-2 bg-green-800 text-5xl text-white [backface-visibility:hidden]"
+		>
+			<span class="text-3xl text-green-600">Answer</span>
+			{card.a}
+		</div>
+	</div>
+</div>
+
+<p
+	class="invisible mt-4 text-center text-gray-500 opacity-0 transition peer-hover:visible peer-hover:opacity-100"
+>
+	Click to flip the card and see the answer ☝️
+</p>