added a buton in home for random name picker!

src/RandomName/main.svelte

@@ -0,0 +1,122 @@
+<script>
+
+function EditList() {
+        console.log("Edit list of names");
+    }
+</script>
+
+<div id="nav">
+	<a href="#/" aria-label="Back to main menu"
+		><button aria-label="Back to main menu"
+			><span class="front"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"
+					><path
+						d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
+					/></svg
+				> GO BACK
+			</span></button
+		></a
+	>
+	<h1>Random Name</h1>
+	<div>
+		<button
+			aria-label="Back to main menu"
+			onclick={() => EditList()}
+			><span class="front"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"
+					><path
+						d="M400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18h14q6 0 12 2-8 18-13.5 37.5T404-360h-4q-71 0-127.5 18T180-306q-9 5-14.5 14t-5.5 20v32h252q6 21 16 41.5t22 38.5H80Zm560 40-12-60q-12-5-22.5-10.5T584-204l-58 18-40-68 46-40q-2-14-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T628-460l12-60h80l12 60q12 5 22.5 11t21.5 15l58-20 40 70-46 40q2 12 2 25t-2 25l46 40-40 68-58-18q-11 8-21.5 13.5T732-180l-12 60h-80Zm40-120q33 0 56.5-23.5T760-320q0-33-23.5-56.5T680-400q-33 0-56.5 23.5T600-320q0 33 23.5 56.5T680-240ZM400-560q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Zm12 400Z"
+					/></svg
+				> Edit list of names
+			</span></button
+		>
+	</div>
+</div>
+<div id="root"></div>
+
+<style>
+	#nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #121212;
+		color: white;
+	}
+
+	button {
+		background: #292929;
+		border-radius: 12px;
+		border: none;
+		margin: 10px;
+		padding: 2px 0px;
+		cursor: pointer;
+		outline-offset: 4px;
+		max-width: 400px;
+	}
+	button:hover .front {
+		transform: translateY(-7px);
+	}
+
+	button:active .front {
+		transform: translateY(-2px);
+	}
+
+	.front {
+		display: flex;
+		text-align: center;
+		align-items: center;
+		padding: 5px;
+		border-radius: 12px;
+
+		background: #4d4d4d;
+		color: white;
+		transform: translateY(-4px);
+		transition: all 0.1s ease-in-out;
+		font-family: "JetBrains Mono", monospace;
+		font-size: 25px;
+	}
+
+	#root {
+		height: 90%;
+		display: flex;
+		margin: 0;
+		font-family: "Sour Gummy", sans-serif;
+		background-color: #121212;
+		color: white;
+	}
+
+	#left {
+		width: 100%;
+		height: 100%;
+		border-radius: 20px;
+		margin: 20px;
+		margin-top: 5px;
+		border: 2px solid #444;
+		font-family: "JetBrains Mono", monospace;
+	}
+	h1 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+		position: fixed;
+		top: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+	}
+
+	span {
+		font-size: 0.5em;
+		text-decoration: none;
+		color: #444;
+	}
+</style>

src/SelectionMenue/TypeSelector.svelte

@@ -2,7 +2,7 @@
 	<h1>ClassRoomStuff</h1>
 	<h2>
 		A collection of awesome tools, games, and more — made to be used in any
-		kind of classroom!
+		classroom!
 	</h2>
 	<div id="items">
 		<a href="#/IdleScreen">
@@ -19,7 +19,25 @@
 						/></svg
 					>
 					Idle Screen
-					<p>A Clock and Timetable; thats all!</p></span
+					<p>A Clock and a Timetable!</p></span
+				>
+			</button></a
+		>
+		<a href="#/RandomName">
+			<button>
+				<span class="front">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="50px"
+						viewBox="0 -960 960 960"
+						width="50px"
+						fill="#FFFFFF"
+						><path
+							d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
+						/></svg
+					>
+					Random Name
+					<p>for quizs or anything else!</p></span
 				>
 			</button></a
 		>
@@ -36,8 +54,8 @@
 							d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm16-86 114-114h336l114 114q2 2 16 6 11 0 17.5-6.5T800-304l-44-308q-4-29-26-48.5T678-680H282q-30 0-52 19.5T204-612l-44 308q-2 11 4.5 17.5T182-280q2 0 16-6Zm482-154q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-80-120q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640q-17 0-28.5 11.5T560-600q0 17 11.5 28.5T600-560ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Zm170-40Z"
 						/></svg
 					>
-					GAMES (Wordle)
+					Wordle
-					<p>A Wordle clone with extra features!</p></span
+					<p>with infinite attempts and more!</p></span
 				>
 			</button></a
 		>

src/app.svelte

@@ -3,11 +3,13 @@
 	import Wordle from "./wordle/game.svelte";
 	import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
 	import IdleScreen from "./IdleScreen/main.svelte";
+	import RandomName from "./RandomName/main.svelte";
 
 	let routes = {
 		"/": TypeSelector,
 		"/Wordle": Wordle,
 		"/IdleScreen": IdleScreen,
+		"/RandomName": RandomName,
 	};
 </script>
 

src/wordle/game.svelte

@@ -136,6 +136,10 @@
 		text-align: center;
 		margin: 5px 0px;
 		text-decoration: underline #444;
+		position: fixed;
+		top: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
 	}
 
 	span {