made mock ui for new tool

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>

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>

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>

src/routes/flashcards/card.svelte

@@ -0,0 +1 @@
+<div class="w-2/5 min-w-[600px] aspect-video rounded border-2"></div>

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;