Rework menu and integrate splash screen

2024-10-28 13:54:22 +01:00
parent d6abdb252d
commit d4af25ee5d
17 changed files with 230 additions and 74 deletions
--- a/front/src/lib/components/SplashScreen.svelte
+++ b/front/src/lib/components/SplashScreen.svelte
@@ -0,0 +1,47 @@
+<script>
+    import logo from '$lib/assets/logo.png'
+
+</script>
+
+    <div class="splash" >
+        <img class="logo" src={logo} alt="De Charybde en Scylla">
+    </div>
+
+<style>
+
+    .splash
+    {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        z-index: 2;
+        width: 100vw;
+        height: 100vh;
+        background-color: #4b0611;
+        animation: fadeout 2.5s forwards;
+    }
+
+    .logo
+    {
+        width: auto;
+        height: 25%;
+    }
+
+    @keyframes fadeout {
+        0%, 45%  { opacity: 1; }
+        100% {
+            opacity: 0;
+            display: none;
+        }
+    }
+
+    @keyframes slide {
+        0%  { translate: 0; }
+        100% {
+            translate: 100%;
+            display: none;
+        }
+    }
+
+</style>