updates readme

web/src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import { beforeNavigate, goto } from "$app/navigation";
+    import { PUBLIC_IS_DEMO } from "$env/static/public";
     import Toast from "$lib/components/base/toast.svelte";
     import Footer from "$lib/components/footer.svelte";
     import NavBar from "$lib/components/nav_bar.svelte";
     import { currentUser } from "$lib/stores/user_store";
     import { isRouteProtected } from "$lib/util/authorization_util";
     import "@fortawesome/fontawesome-free/css/all.min.css";
+    import { fade, slide } from "svelte/transition";
     import "../css/app.css";
     import "../css/components.css";
     import "../css/theme.css";
@@ -16,8 +18,26 @@
             goto("/login?r=" + n.to?.url?.pathname);
         }
     });
+
+    let hideDemoHint = false;
 </script>
 
+{#if PUBLIC_IS_DEMO && !hideDemoHint}
+    <div
+        class="flex items-center justify-between bg-amber-200 text-center p-4 text-sm"
+        out:slide
+    >
+        <div></div>
+        <span
+            >This is a demo instance. Do not store any relevant data here. You
+            can use the user 'demo' and password 'password' to login.
+        </span>
+        <button class="btn-icon self-end" on:click={() => (hideDemoHint = true)}
+            ><i class="fa fa-close"></i></button
+        >
+    </div>
+{/if}
+
 <NavBar></NavBar>
 <Toast></Toast>
 <slot />