Add MsgBox Lib & Try out custom error pages

src/app.scss

@@ -4,7 +4,7 @@
 
 /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
 
-body {
+h1, h2, body {
     font-family: 'IBM Plex Mono', monospace;
     // background-color: #ffffff;
     // color: #000000;

src/lib/modules/Modal.svelte

@@ -0,0 +1 @@
+<!-- WIP -->

src/lib/modules/MsgBox.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { onMount } from 'svelte';
+
+  export let type, message, prefix;
+
+  const colors = {
+    info: ['rgba(0, 123, 255, 0.2)', '#004690', '#007bff', '#b7d7ff'],
+    warning: ['rgba(255, 193, 7, 0.2)', '#644c03', '#ffc107', '#ffd067'],
+    error: ['rgba(220, 53, 69, 0.2)', '#691a22', '#dc3545', '#ff818d'],
+    default: ['rgba(0, 0, 0, 0.1)', '#333', '#929292', '#d3d3d3']
+  };
+
+  let [backgroundColor, fontColor, borderColor, darkFontColor] = colors[type] || colors.default;
+  prefix = prefix || (type === 'info' ? 'Info:' : type === 'warning' ? 'Warning:' : type === 'error' ? 'Error:' : '');
+
+  let bgStyle = `background-color: ${backgroundColor}; color: ${fontColor}; border-color: ${borderColor}`;
+
+  const changeColorScheme = (event) => {
+    fontColor = event.matches ? darkFontColor : colors[type][1];
+    bgStyle = `background-color: ${backgroundColor}; color: ${fontColor}; border-color: ${borderColor}`;
+  };
+
+  onMount(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', changeColorScheme);
+    changeColorScheme(mediaQuery);
+  });
+
+</script>
+
+<div class="msg-box {type}" style="{bgStyle}">
+  <p>
+    {#if prefix}<b>{prefix}</b>{/if}
+    {@html message}
+  </p>
+</div>
+
+<style>
+  .msg-box {
+    display: inline-block;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    font-weight: normal;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .msg-box p {
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .msg-box.bright {
+    background-color: var(--backgroundColor);
+    color: var(--fontColor);
+    border-color: var(--borderColor);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .msg-box.bright {
+      color: var(--darkFontColor);
+    }
+  }
+</style>

src/routes/+error.svelte

@@ -0,0 +1,6 @@
+<script>
+    import { page } from '$app/stores';
+</script>
+  
+<h1>{$page.status}: {$page.error.message}</h1>
+<p>AHDJIUASHDILAUHSDIUSHD ERRORRRRS</p>

src/routes/examples/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Modal from "$lib/modules/Modal.svelte";
+    let showModal = false;
+    const openModal = () => {
+      showModal = true;
+    };
+  </script>
+  
+  <button on:click={openModal}>Open Modal</button>
+  {#if showModal}
+    <Modal title="Modal Title" msg="Modal Message" submit="https://example.com" bind:isOpen={showModal} />
+  {/if}
+