layout-window.svelte (1780B)
1 <script lang="ts"> 2 import { 3 app_lo, 4 app_tilt, 5 envelope_tilt, 6 envelope_visible, 7 } from "$lib/stores/app"; 8 import { handle_err, window_set } from "@radroots/apps-lib"; 9 import { onMount } from "svelte"; 10 import LogoCircle from "../lib/logo-circle.svelte"; 11 12 let { children } = $props(); 13 14 onMount(async () => { 15 try { 16 window_set(); 17 } catch (e) { 18 handle_err(e, `on_mount`); 19 } 20 }); 21 22 envelope_visible.subscribe(async (_envelope_visible) => { 23 if (_envelope_visible && $envelope_tilt) app_tilt.set(true); 24 else app_tilt.set(false); 25 }); 26 </script> 27 28 <div 29 class={`relative lg:hidden flex flex-col h-[100vh] w-full bg-ly0 ${ 30 $app_tilt ? `scale-y-[96%] translate-y-4 rounded-t-[3rem]` : `` 31 } overflow-x-hidden overflow-y-scroll scroll-hide delay-75 duration-200 el-re cursor-default`} 32 > 33 {#if $app_lo} 34 <div class={`flex flex-col h-full w-full`}> 35 {@render children()} 36 </div> 37 {/if} 38 </div> 39 <div 40 class={`max-lg:hidden flex flex-col h-[100vh] w-full justify-center items-center bg-ly0 cursor-default el-re`} 41 > 42 <div class={`flex flex-col justify-center items-center`}> 43 <LogoCircle /> 44 <div class={`flex flex-col w-full gap-1 justify-center items-center`}> 45 <p class={`font-sans font-[400] text-base text-ly0-gl italic`}> 46 {`Welcome to the`} 47 <span class={`font-[600]`}> 48 {`Rad Roots`} 49 </span> 50 {`app!`} 51 </p> 52 <p class={`font-sans font-[400] text-base text-ly0-gl`}> 53 {`Please view this application on mobile device`} 54 </p> 55 </div> 56 </div> 57 </div>