minor changs here and there, and tried to make aunser work, not working in chrome working in rest!

src/announcer/main.svelte

@@ -1 +1,122 @@
-yo chat
+<script>
+	import ActualAnnouncer from "./ActualAnnouncer.svelte";
+</script>
+
+<div id="wrap">
+	<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>Announcer</h1>
+	</div>
+	<div id="root">
+		<ActualAnnouncer />
+	</div>
+</div>
+
+<style>
+	#wrap {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	#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 {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	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;
+	}
+	#UperLayer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		backdrop-filter: blur(5px);
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.close {
+		background-color: #2b2b2b;
+		color: #888;
+		border: none;
+		padding: 10px 20px;
+		border-radius: 5px;
+		cursor: pointer;
+		align-self: center;
+	}
+</style>