[TASK] adapt demo project

rot_app/src/routes/+layout.svelte

@@ -1,53 +1,39 @@
-<script>
+<script lang="ts">
+  import { loggedin } from '../store.js';
 	import Header from './Header.svelte';
-	import './styles.css';
+	import '../app.css';
+
+  const date = new Date();
+
+  let isLoggedIn: Boolean;
+
+	loggedin.subscribe(value => {
+		isLoggedIn = value;
+	});
 </script>
+	
 
-<div class="app">
-	<Header />
+<div class="bg-gray-100">
+  {#if isLoggedIn}
+    <Header />
+  {/if}
 
-	<main>
+	<main class="flex min-h-screen {isLoggedIn ? 'items-center' : 'items-start'} justify-center px-4 py-12 sm:px-6 lg:px-8">
 		<slot />
 	</main>
 
-	<footer>
-		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
-	</footer>
+  {#if isLoggedIn}
+    <footer class="bg-primary-950 text-white w-full flex justify-center p-3">
+      <div class="max-w-screen-xl w-full flex justify-between">
+        <div>
+          <span class="text-[#ff0000]">&hearts;</span> ASKÖ Ruderverein Donau Linz
+        </div>
+        <div>
+          &copy; {date.getFullYear()}
+        </div>
+      </div>
+    </footer>
+  {/if}
 </div>
 
-<style>
-	.app {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
 
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		width: 100%;
-		max-width: 64rem;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
-
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 12px;
-	}
-
-	footer a {
-		font-weight: bold;
-	}
-
-	@media (min-width: 480px) {
-		footer {
-			padding: 12px 0;
-		}
-	}
-</style>