Improved wordle Ui even more

src/wordle/InfoAndSetings/main.svelte

@@ -1,45 +1,58 @@
-<script>
+<script module>
 	import { newGame, WordLegnth } from "../logic.svelte.js";
 	import WordLegnthSetings from "./WordLegnthSetings.svelte";
 	import Stats from "./stats.svelte";
 
-	let LetersSelected = WordLegnth.v;
+	export let TabOpen = $state({ v: "none" });
+
+	export function OpenTab(type) {
+		TabOpen.v = type;
+	}
 </script>
 
-<div id="root">
-	<div>
-		<h1>A Wordle clone designed for classrooms!</h1>
-		<h3>
-			Unlimited guesses, Unlimited words, and choose your own word length!
-		</h3>
+{#if TabOpen.v !== "none"}
+	<div id="UperLayer">
+		<div id="wrap">
+			{#if TabOpen.v == "WordLength"}
+				<WordLegnthSetings />
+			{:else if TabOpen.v == "Stats"}
+				<Stats />
+			{/if}
+			<button
+				class="close"
+				onclick={() => (TabOpen.v = "none")}
+				aria-label="close">CLOSE</button
+			>
+		</div>
 	</div>
-	<WordLegnthSetings />
-
-	<Stats />
-</div>
+{/if}
 
 <style>
-	#root {
+	#UperLayer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
 		height: 100%;
-		width: 35%;
-		border-radius: 20px;
-		margin: 20px;
-		margin-top: 5px;
-		border: 2px solid #444;
+		backdrop-filter: blur(5px);
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1;
+		display: grid;
+		place-items: center;
+	}
+
+	#wrap {
 		display: flex;
 		flex-direction: column;
-		justify-content: space-between;
 	}
 
-	h1 {
-		text-align: center;
-		margin: 5px 0px;
-		text-decoration: underline #444;
-	}
-
-	h3 {
-		text-align: center;
-		margin: 5px 0px;
-		text-decoration: underline #444;
+	.close {
+		background-color: #2b2b2b;
+		color: #888;
+		border: none;
+		padding: 10px 20px;
+		border-radius: 5px;
+		cursor: pointer;
+		align-self: center;
 	}
 </style>