First commit

src/lib/notLoggedIn.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import Login from "./buttons/Login.svelte";
+</script>
+
+<div id="content-container">
+<img id="large-logo" src="/logo/logo-colour.svg" width=125 height=125 alt="Logo">
+
+<div id="bounding-box">
+    <header>You are not signed in</header>
+    <Login />
+
+    <p>When you login for the first time, you will have to verify your email address and register a passkey to enable your account, <a href="passkey">click here</a> for help.</p>
+    <p><a href="https://sso.fjla.uk/realms/FJLA.net/login-actions/reset-credentials" target="_blank">Forgot your password?</a></p>
+</div>
+</div>
+<style>
+    #content-container {
+        width: 100%;
+        text-align: center;
+        margin: 10 auto;
+        padding: 25px;
+        box-sizing: border-box;
+    }
+    #large-logo {
+        margin: 0 auto;
+    }
+    #bounding-box {
+        margin: auto;
+        text-align: center;
+        background-color: lightgrey;
+        width: 75%;
+        min-width: 200px;
+        max-width: 800px;
+        border-radius: 25px;
+        margin-top: 25px;
+    }
+
+    header {
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        font-size: large;
+        padding: 15px;
+    }
+
+    p {
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        padding: 15px;
+    }
+</style>