Grafik Design

website/src/lib/client/components/AnnouncementPopup.css

@@ -0,0 +1,38 @@
+#background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.7);
+}
+
+#window {
+    background: linear-gradient(to right bottom, rgb(209 213 219), rgb(156 163 175));
+    margin: auto;
+    width: 30vw;
+    height: 20vh;
+    padding: 3vh 3vw;
+    border-radius: 4rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#title, #time {
+    font-size: 2.5rem;
+    font-weight: bold;
+    padding: 0 1rem;
+    text-align: center;
+    height: fit-content;
+}
+
+#time {
+    width: 20%
+}
+
+#title {
+    width:65%
+}
+
+#content {
+    width:100%;
+    font-size:1.5rem
+}

website/src/lib/client/components/CurrentTurnier.svelte

@@ -12,13 +12,13 @@
 	});
 </script>
 
-<h2>Aktuelles Turnier</h2>
-<h3>Diese Spiele werden Gespielt:</h3>
+<h3>Aktuelles Turnier</h3>
+<h4>Diese Spiele werden Gespielt:</h4>
 {#each games as game}
 	<p>{game}</p>
 {/each}
 
-<h3>Die Teilnehmer lauten:</h3>
+<h4>Die Teilnehmer lauten:</h4>
 {#each player as singlePlayer}
 	<p>Spieler: {singlePlayer.split('|')[0]}</p>
 	<p>Punktzahl: {singlePlayer.split('|')[1]}</p>

website/src/lib/client/components/Serverlist.svelte

@@ -15,7 +15,7 @@
 	setInterval(allServers, 1000);
 </script>
 
-<h1>Lokale Serverliste</h1>
+<h3>Lokale Serverliste</h3>
 <div>
 	{#each servers as serverdata}
 		<ServerlistItem server={serverdata} />

website/src/lib/client/components/ServerlistItem.css

@@ -0,0 +1,7 @@
+#server-table>tr:nth-child(even) {
+    background-color: #7dd3fc;
+}
+
+#server-table>tr {
+    background-color: #d1d5db;
+}

website/src/lib/client/components/ServerlistItem.svelte

@@ -1,9 +1,10 @@
 <script>
 	export let server;
+	import './ServerlistItem.css'
 </script>
 
 <div>
-	<table>
+	<table id="server-table">
 		<tbody>
 			<tr>
 				<td>{server.game}</td>

website/src/routes/+layout.svelte

@@ -13,14 +13,16 @@
 		const response = await fetch('api/announcements');
 		const savedAnnouncements = await response.json();
 		let date = new Date();
+		let temp;
 		let time = date.getHours() + ':' + date.getMinutes();
 		for (let object of savedAnnouncements) {
 			if (object['time'] === time) {
-				announcement = object;
+				temp = object;
 			} else {
-				announcement = undefined;
+				temp = undefined;
 			}
 		}
+		announcement = temp;
 	}
 
 	function checkForSavedFile() {
@@ -29,7 +31,7 @@
 				readSavedFile();
 				checkForSavedFile();
 			},
-			announcement ? 3000000 : 10000
+			announcement ? 3000000 : 1000
 		);
 	}
 

website/src/routes/+page.svelte

@@ -2,22 +2,27 @@
 	import Serverlist from '$lib/client/components/Serverlist.svelte';
 	import CurrentTurnier from '$lib/client/components/CurrentTurnier.svelte';
 	let year = new Date().getFullYear();
+	import './main.css'
 </script>
 
-<h1>Willkommen zur Weihnachtslan {year}</h1>
-<table>
-	<tr>
-		<td>
-			<h2>Aktive Server</h2>
-			<Serverlist />
-		</td>
-		<td>|</td>
-		<td>-----</td>
-		<td>|</td>
-		<td>
-			<h2>LAN Turnier</h2>
-			<CurrentTurnier />
-		</td>
-	</tr>
-</table>
-<a href="/Announcement">Ankündigung erstellen</a>
+<div id="pad-body">
+	<h1>Willkommen zur Weihnachtslan {year}</h1>
+	<table>
+		<tr>
+			<td class="table-content">
+				<h2>Aktive Server</h2>
+				<Serverlist />
+			</td>
+			<td class="vertical-seperator">|</td>
+			<td id="horizontal-bars">
+			</td>
+			<td class="vertical-seperator">|</td>
+			<td class="table-content">
+				<h2>LAN Turnier</h2>
+				<CurrentTurnier />
+			</td>
+		</tr>
+	</table>
+
+
+</div>

website/src/routes/main.css

@@ -0,0 +1,67 @@
+body {
+    margin: 0;
+}
+#pad-body {
+    padding: 10vh 10vw;
+    height: fit-content;
+    min-height: 80vh;
+    width: 80vw;
+    background: linear-gradient(to right bottom, rgb(209 213 219), rgb(156 163 175));
+    display:flex;
+    align-content: center;
+    flex-direction: column;
+    margin: 0;
+}
+
+h1 {
+    margin: 0;
+    align-self: center;
+    font-weight: bold;
+    font-size: 4rem;
+}
+
+h2 {
+    margin: 1rem 0;
+    align-self: center;
+    font-weight: bold;
+    font-size: 3.5rem;
+}
+
+h3 {
+    margin: 1rem 0;
+    align-self: center;
+    font-weight: bold;
+    font-size: 2.5rem;
+}
+
+h4 {
+    margin: 1rem 0;
+    align-self: center;
+    font-weight: bold;
+    font-size: 1.5rem;
+}
+
+.vertical-seperator {
+    width: 0.5vw;
+    margin: 0 1rem;
+    height: 100%;
+    background-color: black;
+}
+
+
+#horizontal-bars {
+    width: 10vw;
+}
+
+#pad-body > table {
+    border-radius: 20px;
+    border: 10px solid black;
+}
+
+.table-content {
+    padding: 2rem;
+}
+
+a {
+    width: fit-content;
+}