From e92dbd9be7e20d072ea3ae2172278c70f4308d72 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Mon, 9 Jun 2025 13:45:15 +0530
Subject: [PATCH] made mock ui for new tool

---
 src/routes/flashcards/+page.svelte           | 17 +++++++++++++++++
 src/routes/flashcards/StatsAndButtons.svelte | 11 +++++++++++
 src/routes/flashcards/buttons.svelte         |  2 ++
 src/routes/flashcards/card.svelte            |  1 +
 src/routes/tailwind.css                      |  3 +++
 5 files changed, 34 insertions(+)
 create mode 100644 src/routes/flashcards/StatsAndButtons.svelte
 create mode 100644 src/routes/flashcards/buttons.svelte
 create mode 100644 src/routes/flashcards/card.svelte

diff --git a/src/routes/flashcards/+page.svelte b/src/routes/flashcards/+page.svelte
index e69de29..e0e46a9 100644
--- a/src/routes/flashcards/+page.svelte
+++ b/src/routes/flashcards/+page.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Buttons from "./buttons.svelte";
+	import Card from "./card.svelte";
+	import StatsAndButtons from "./StatsAndButtons.svelte";
+</script>
+
+<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">
+			<Buttons />
+		</div>
+	</div>
+	<div class="flex items-center justify-between p-2 text-gray-700">
+		<StatsAndButtons />
+	</div>
+</div>
diff --git a/src/routes/flashcards/StatsAndButtons.svelte b/src/routes/flashcards/StatsAndButtons.svelte
new file mode 100644
index 0000000..6cb69f0
--- /dev/null
+++ b/src/routes/flashcards/StatsAndButtons.svelte
@@ -0,0 +1,11 @@
+<div class="invisible">
+	<button class="btn mini"> Reset Deck </button>
+</div>
+<div class="flex gap-5">
+	<span class="text-green-500"><i class="nf nf-md-check"></i>: 20</span>
+	<span class="text-red-500"><i class="nf nf-md-close"></i>: 20</span>
+	<span class="text-blue-500"><i class="nf nf-md-help"></i>: 20</span>
+</div>
+<div>
+	<button class="btn mini"> Reset Deck </button>
+</div>
diff --git a/src/routes/flashcards/buttons.svelte b/src/routes/flashcards/buttons.svelte
new file mode 100644
index 0000000..b0472d6
--- /dev/null
+++ b/src/routes/flashcards/buttons.svelte
@@ -0,0 +1,2 @@
+<button aria-label="i don't know it" class="btn big red"> <i class="nf nf-md-close"></i></button>
+<button aria-label="i know the it" class="btn big green"><i class="nf nf-md-check"></i></button>
diff --git a/src/routes/flashcards/card.svelte b/src/routes/flashcards/card.svelte
new file mode 100644
index 0000000..dcae684
--- /dev/null
+++ b/src/routes/flashcards/card.svelte
@@ -0,0 +1 @@
+<div class="w-2/5 min-w-[600px] aspect-video rounded border-2"></div>
diff --git a/src/routes/tailwind.css b/src/routes/tailwind.css
index 7845513..64ae1fd 100644
--- a/src/routes/tailwind.css
+++ b/src/routes/tailwind.css
@@ -20,6 +20,9 @@
 	&.mini {
 		@apply px-0.5 py-0.5;
 	}
+	&.big {
+		@apply text-3xl;
+	}
 
 	&.green {
 		@apply bg-green-600 hover:bg-green-500;