ed

2025-08-04 04:28:47 +02:00 · 2025-08-04 04:28:47 +02:00 · c81ae4bb6d
commit c81ae4bb6d
parent 875c8448e1
219 changed files with 8036 additions and 7 deletions
--- a/resources/[tools]/bl_idcard/web/.gitignore
+++ b/resources/[tools]/bl_idcard/web/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/resources/[tools]/bl_idcard/web/.prettierrc
+++ b/resources/[tools]/bl_idcard/web/.prettierrc
@ -0,0 +1,13 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "always",
+    "semi": true,
+    "printWidth": 80,
+    "endOfLine": "auto"
+}
--- a/resources/[tools]/bl_idcard/web/README.md
+++ b/resources/[tools]/bl_idcard/web/README.md
@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```
--- a/resources/[tools]/bl_idcard/web/index.html
+++ b/resources/[tools]/bl_idcard/web/index.html
@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.cdnfonts.com/css/acterumsignaturepersonaluse" rel="stylesheet">
+                
+                
+
+    
+    <title>Byte Labs Template</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/resources/[tools]/bl_idcard/web/mugshots/_.png
+++ b/resources/[tools]/bl_idcard/web/mugshots/_.png
--- a/resources/[tools]/bl_idcard/web/package.json
+++ b/resources/[tools]/bl_idcard/web/package.json
@ -0,0 +1,27 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@tsconfig/svelte": "^5.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.30",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.6",
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.6.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.9"
+  },
+  "dependencies": {
+    "path": "^0.12.7"
+  }
+}
--- a/resources/[tools]/bl_idcard/web/pnpm-lock.yaml
+++ b/resources/[tools]/bl_idcard/web/pnpm-lock.yaml
--- a/resources/[tools]/bl_idcard/web/postcss.config.js
+++ b/resources/[tools]/bl_idcard/web/postcss.config.js
@ -0,0 +1,7 @@
+import tailwind from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import tailwindConfig from './tailwind.config.js';
+
+export default {
+  plugins: [tailwind(tailwindConfig), autoprefixer],
+}
--- a/resources/[tools]/bl_idcard/web/public/profileGradient.png
+++ b/resources/[tools]/bl_idcard/web/public/profileGradient.png
--- a/resources/[tools]/bl_idcard/web/src/App.svelte
+++ b/resources/[tools]/bl_idcard/web/src/App.svelte
@ -0,0 +1,49 @@
+<script lang="ts">
+    import { CONFIG, ID_INFO, IS_BROWSER } from './stores/stores';
+    import { InitialiseListen } from '@utils/listeners';
+    import Card from '@components/Card.svelte';
+    import { onMount } from 'svelte';
+    import { SendEvent } from '@utils/eventsHandlers';
+    import { Send } from '@enums/events';
+
+    CONFIG.set({
+        fallbackResourceName: 'bl_idcard',
+        allowEscapeKey: false,
+    });
+
+    InitialiseListen();
+
+    onMount(() => {
+        SendEvent(Send.loaded);
+    });
+</script>
+
+{#if $ID_INFO}
+    <main>
+        <Card />
+    </main>
+{/if}
+
+{#if import.meta.env.DEV}
+    {#if $IS_BROWSER}
+        {#await import('./providers/Debug.svelte') then { default: Debug }}
+            <Debug />
+        {/await}
+    {/if}
+{/if}
+
+
+<style>
+    main {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 100;
+        user-select: none;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        height: 100vh;
+        width: 100vw;
+    }
+</style>
--- a/resources/[tools]/bl_idcard/web/src/app.css
+++ b/resources/[tools]/bl_idcard/web/src/app.css
@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+    margin: 0;
+    padding: 0;
+    font-smooth: auto;
+}
+
+*:focus {
+    outline: none;
+}
+
+:root {
+    font-size: 62.5%;
+
+    --text: '#323443';
+    --title: '#F97C81';
+
+    --bg: '#8685ef';
+    --bg-secondary: '#8685ef';
+
+    color: var(--text);
+}
+
+html, body {
+    height: 100vh;
+    width: 100vw;
+    font-size: 1.6rem;
+    overflow: hidden;
+}
+.signature {
+    font-family: 'ActerumSignaturePersonalUse', sans-serif;
+}
+  
+.roboto-condensed-bold {
+    font-family: "Roboto Condensed", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
+    font-style: normal;
+}
--- a/resources/[tools]/bl_idcard/web/src/assets/.gitkeep
+++ b/resources/[tools]/bl_idcard/web/src/assets/.gitkeep
--- a/resources/[tools]/bl_idcard/web/src/components/Card.svelte
+++ b/resources/[tools]/bl_idcard/web/src/components/Card.svelte
@ -0,0 +1,173 @@
+<script lang="ts">
+    import { ID_INFO, ID_TYPE } from '@stores/stores';
+    import Pattern from './svgs/Pattern.svelte';
+    import PfpOverlay from './svgs/PfpOverlay.svelte';
+    import Stamp from './svgs/Stamp.svelte';
+    import Backdrop from './svgs/Backdrop.svelte';
+
+    let { id, firstName, lastName, dob, sex, imageURL } = $ID_INFO;
+
+    let { title, label, stamp, profileStamp, signature } = $ID_TYPE;
+</script>
+
+<div
+    class="aspect-ratio h-[20vh] bg absolute top-1/4 right-1/4 rounded-[2vh] overflow-hidden grid place-items-center py-[0vh]"
+>
+<Backdrop />
+    <Pattern />
+
+    <div class="w-full h-full flex flex-col z-10">
+        <span class="flex flex-col items-center justify-between gap-0">
+            <h1
+                class="uppercase text-txt-secondary font-bold tracking-[0.25vh] text-[2.5vh] grid place-items-center whitespace-nowrap"
+            >
+                {title}
+                <h1
+                    class="absolute text-txt-secondary text brightness-75 -z-10 whitespace-nowrap"
+                >
+                    {title}
+                </h1>
+            </h1>
+            <h1
+                class="uppercase txt-primary opacity-80 font-bold text-[1.5vh] whitespace-nowrap leading-[1vh]"
+            >
+                {label}
+            </h1>
+        </span>
+
+        <!-- <div class="w-full h-[0.2vh] bg-black/20" /> -->
+        <PfpOverlay />
+        <div
+            class="grid place-items-center w-[10vh] h-[10vh] left-[0.5vw] rounded-full overflow-hidden absolute top-1/2 -translate-y-1/2"
+        >
+
+            <div
+                style="background-image: url({imageURL});"
+                class="w-full h-full bg-center bg-contain bg-no-repeat grid place-items-center z-10"
+            />
+
+            <div
+                style="background-image: url({imageURL});"
+                class="w-1/2 h-1/2 rounded-full bg-center bg-contain bg-no-repeat grid place-items-center z-0 absolute blur-[1vh]"
+            />
+        </div>
+
+        <div
+            class="flex flex-row w-[18vh] h-full items-start justify-between uppercase roboto-condensed-bold overflow-visible absolute right-[2vh] top-[5.5vh]"
+        >
+            <div class="flex flex-col items-start justify-center gap-[1vh]">
+                <span class="flex flex-col gap-0 items-start justify-center">
+                    <h1 class="text-[1.2vh] text-txt-primary opacity-80">ID</h1>
+                    <h1 class="text-[1.5vh] text-txt-primary leading-[1vh]">
+                        {id}
+                    </h1>
+                </span>
+
+                <span class="flex flex-col gap-0 items-start justify-center">
+                    <h1 class="text-[1.2vh] text-txt-primary opacity-80">
+                        LASTNAME
+                    </h1>
+                    <h1 class="text-[1.75vh] text-txt-primary leading-[1vh]">
+                        {lastName}
+                    </h1>
+                </span>
+
+                <span class="flex flex-col gap-0 items-start justify-center">
+                    <h1 class="text-[1.2vh] text-txt-primary opacity-80">
+                        FIRSTNAME
+                    </h1>
+                    <h1 class="text-[1.75vh] text-txt-primary leading-[1vh]">
+                        {firstName}
+                    </h1>
+                </span>
+            </div>
+
+            <div class="flex flex-col items-start justify-center gap-[1vh]">
+
+                <span class="flex flex-col gap-0 items-start justify-center">
+                    <h1 class="text-[1.2vh] text-txt-primary opacity-80">
+                        EXP
+                    </h1>
+                    <h1 class="text-[1.5vh] text-txt-primary leading-[1vh]">
+                        12/12/2030
+                    </h1>
+                </span>
+
+                <span class="flex flex-col gap-0 items-start justify-center">
+                    <h1 class="text-[1.2vh] text-txt-primary opacity-80">DOB</h1>
+                    <h1 class="text-[1.5vh] text-txt-primary leading-[1vh]">
+                        {dob}
+                    </h1>
+                </span>
+
+                <span class="flex flex-col gap-0 items-start justify-center">
+                    <h1 class="text-[1.2vh] text-txt-primary opacity-80">
+                        SEX
+                    </h1>
+                    <h1 class="text-[1.5vh] text-txt-primary leading-[1vh]">
+                        {sex.split('')[0]}
+                    </h1>
+                </span>
+
+
+            </div>
+        </div>
+
+        {#if profileStamp}
+            <div
+                class="absolute grid place-items-center w-[4vh] h-[4vh] right-[0.75vh] bottom-[0.75vh] rounded-full overflow-hidden"
+            >
+                <img
+                    src={imageURL}
+                    class="w-full h-full object-cover z-10 absolute opacity-60 hue-rotate-[210deg]"
+                    alt={firstName + lastName}
+                />
+
+                <img
+                    src="./profileGradient.png"
+                    class="w-full h-full object-cover z-0 absolute"
+                    alt={firstName + lastName}
+                />
+            </div>
+        {/if}
+
+        {#if stamp}
+            <div
+                class="absolute w-[12.5vh] h-[12.5vh] right-[5vh] bottom-[2vh]"
+            >
+                <Stamp />
+            </div>
+        {/if}
+
+        {#if signature}
+            <h1
+                class="text-[4vh] left-[1vh] signature text-txt-primary underline decoration-[0.135vh] underline-offset-[-0.5vh] absolute translate-y-[20%] bottom-[0.5vh] opacity-80 z-50"
+            >
+                {firstName}
+                {lastName}
+            </h1>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .aspect-ratio {
+        aspect-ratio: 1.59259259259;
+    }
+
+    .bg {
+        background: var(--bg);
+        background: linear-gradient(
+            120deg,
+            var(--bg) 0%,
+            var(--bg-secondary) 100%
+        );
+    }
+
+    .text {
+        text-shadow:
+            0.1vh 0.1vh 0.1vh var(--title),
+            0.2vh 0.2vh 0.1vh var(--title),
+            0.15vh 0.15vh 0.1vh var(--title);
+    }
+</style>
--- a/resources/[tools]/bl_idcard/web/src/components/svgs/Backdrop.svelte
+++ b/resources/[tools]/bl_idcard/web/src/components/svgs/Backdrop.svelte
--- a/resources/[tools]/bl_idcard/web/src/components/svgs/Pattern.svelte
+++ b/resources/[tools]/bl_idcard/web/src/components/svgs/Pattern.svelte
@ -0,0 +1,38 @@
+<svg viewBox="0 0 600 375" class="w-full h-full fill-none absolute opacity-50" xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.05" d="M805.914 295.313L233.835 -355.644L-14.9988 573.018L805.914 295.313Z" stroke="white"/>
+    <path opacity="0.08" d="M800.244 274.817L212.177 -327.589L17.9975 585.953L800.244 274.817Z" stroke="white"/>
+    <path opacity="0.11" d="M793.41 255.176L192.821 -298.839L51.0157 596.483L793.41 255.176Z" stroke="white"/>
+    <path opacity="0.13" d="M785.489 236.455L175.781 -269.555L83.8992 604.643L785.489 236.455Z" stroke="white"/>
+    <path opacity="0.16" d="M776.557 218.713L161.057 -239.9L116.491 610.477L776.557 218.713Z" stroke="white"/>
+    <path opacity="0.19" d="M766.694 202L148.638 -210.038V614.037L766.694 202Z" stroke="white"/>
+    <path opacity="0.22" d="M755.983 186.365L138.502 -180.123L180.193 615.391L755.983 186.365Z" stroke="white"/>
+    <path opacity="0.25" d="M744.511 171.851L130.62 -150.313L211.017 614.61L744.511 171.851Z" stroke="white"/>
+    <path opacity="0.27" d="M732.366 158.492L124.952 -120.759L240.975 611.777L732.366 158.492Z" stroke="white"/>
+    <path opacity="0.3" d="M719.638 146.316L121.449 -91.6119L269.939 606.98L719.638 146.316Z" stroke="white"/>
+    <path opacity="0.33" d="M706.412 135.348L120.046 -63.013L297.784 600.316L706.412 135.348Z" stroke="white"/>
+    <path opacity="0.36" d="M692.787 125.604L120.681 -35.1007L324.403 591.893L692.787 125.604Z" stroke="white"/>
+    <path opacity="0.39" d="M678.851 117.095L123.274 -8.00867L349.687 581.819L678.851 117.095Z" stroke="white"/>
+    <path opacity="0.41" d="M664.692 109.825L127.736 18.1369L373.535 570.212L664.692 109.825Z" stroke="white"/>
+    <path opacity="0.44" d="M650.408 103.793L133.98 43.2179L395.866 557.197L650.408 103.793Z" stroke="white"/>
+    <path opacity="0.47" d="M636.081 98.991L141.9 67.1198L416.592 542.9L636.081 98.991Z" stroke="white"/>
+    <path opacity="0.5" d="M621.807 95.4044L151.394 89.7385L435.649 527.452L621.807 95.4044Z" stroke="white"/>
+    <path opacity="0.53" d="M607.669 93.015L162.345 110.978L452.972 510.993L607.669 93.015Z" stroke="white"/>
+    <path opacity="0.55" d="M593.755 91.796L174.635 130.75L468.513 493.658L593.755 91.796Z" stroke="white"/>
+    <path opacity="0.58" d="M580.148 91.7167L188.142 148.974L482.229 475.591L580.148 91.7167Z" stroke="white"/>
+    <path opacity="0.61" d="M566.923 92.7422L202.73 165.581L494.085 456.935L566.923 92.7422Z" stroke="white"/>
+    <path opacity="0.64" d="M554.163 94.8292L218.273 180.508L504.063 437.835L554.163 94.8292Z" stroke="white"/>
+    <path opacity="0.66" d="M541.939 97.9313L234.632 193.705L512.151 418.435L541.939 97.9313Z" stroke="white"/>
+    <path opacity="0.69" d="M530.323 101.995L251.671 205.127L518.347 398.878L530.323 101.995Z" stroke="white"/>
+    <path opacity="0.72" d="M519.38 106.97L269.246 214.746L522.66 379.314L519.38 106.97Z" stroke="white"/>
+    <path opacity="0.75" d="M509.171 112.791L287.216 222.536L525.106 359.881L509.171 112.791Z" stroke="white"/>
+    <path opacity="0.78" d="M499.755 119.396L305.439 228.485L525.716 340.722L499.755 119.396Z" stroke="white"/>
+    <path opacity="0.8" d="M491.183 126.717L323.769 232.592L524.524 321.974L491.183 126.717Z" stroke="white"/>
+    <path opacity="0.83" d="M483.506 134.683L342.069 234.864L521.581 303.772L483.506 134.683Z" stroke="white"/>
+    <path opacity="0.86" d="M476.764 143.22L360.192 235.316L516.94 286.246L476.764 143.22Z" stroke="white"/>
+    <path opacity="0.89" d="M470.995 152.25L378.001 233.975L510.667 269.523L470.995 152.25Z" stroke="white"/>
+    <path opacity="0.92" d="M466.233 161.697L395.362 230.881L502.837 253.726L466.233 161.697Z" stroke="white"/>
+    <path opacity="0.94" d="M462.5 171.478L412.135 226.077L493.528 238.968L462.5 171.478Z" stroke="white"/>
+    <path opacity="0.97" d="M459.819 181.511L428.193 219.618L482.83 225.36L459.819 181.511Z" stroke="white"/>
+    <path d="M458.205 191.714L443.411 211.569L470.843 213.006L458.205 191.714Z" stroke="white"/>
+    </svg>
+    
--- a/resources/[tools]/bl_idcard/web/src/components/svgs/PfpOverlay.svelte
+++ b/resources/[tools]/bl_idcard/web/src/components/svgs/PfpOverlay.svelte
@ -0,0 +1,115 @@
+<svg viewBox="0 0 423 375" class="w-[25vh] absolute" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.05" d="M270.311 -10.4165L337.473 223.804L168.213 399.077L-68.2084 340.131L-135.37 105.91L33.8896 -69.3632L270.311 -10.4165Z" stroke="url(#paint0_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.1" d="M256.68 -7.98644L328.553 213.214L172.924 386.057L-54.5775 337.7L-126.45 116.5L29.1788 -56.3435L256.68 -7.98644Z" stroke="url(#paint1_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.14" d="M243.433 -4.82802L319.194 203.322L176.811 373.007L-41.3322 334.542L-117.093 126.392L25.2901 -43.2927L243.433 -4.82802Z" stroke="url(#paint2_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.19" d="M230.605 -0.966155L309.435 194.144L179.88 359.967L-28.5053 330.68L-107.335 135.57L22.2204 -30.2529L230.605 -0.966155Z" stroke="url(#paint3_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.23" d="M218.23 3.57367L299.317 185.696L182.137 346.979L-16.1281 326.141L-97.2143 144.018L19.965 -17.265L218.23 3.57367Z" stroke="url(#paint4_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.28" d="M206.337 8.7644L288.874 177.991L183.588 334.084L-4.2351 320.95L-86.7726 151.723L18.5133 -4.36962L206.337 8.7644Z" stroke="url(#paint5_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.32" d="M194.956 14.5773L278.149 171.042L184.244 321.321L7.14546 315.137L-76.0482 158.672L17.857 8.39276L194.956 14.5773Z" stroke="url(#paint6_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.37" d="M184.117 20.9834L267.183 164.857L184.117 308.731L17.9859 308.731L-65.0798 164.857L17.9858 20.9833L184.117 20.9834Z" stroke="url(#paint7_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.41" d="M173.846 27.9509L256.013 159.446L183.218 296.352L28.257 301.763L-53.9101 170.268L18.8841 33.3622L173.846 27.9509Z" stroke="url(#paint8_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.46" d="M164.168 35.448L244.681 154.813L181.564 284.222L37.9344 294.265L-42.5785 174.9L20.5383 45.4914L164.168 35.448Z" stroke="url(#paint9_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.5" d="M155.107 43.4425L233.227 150.965L179.17 272.38L46.9927 286.272L-31.127 178.749L22.9303 57.3348L155.107 43.4425Z" stroke="url(#paint10_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.55" d="M146.689 51.8993L221.695 147.902L176.057 260.861L55.4129 277.816L-19.5929 181.813L26.0452 68.8547L146.689 51.8993Z" stroke="url(#paint11_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.59" d="M138.93 60.7823L210.122 145.625L172.242 249.7L63.1701 268.932L-8.02137 184.089L29.8588 80.0145L138.93 60.7823Z" stroke="url(#paint12_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.64" d="M131.853 70.0571L198.551 144.133L167.749 238.933L70.2485 259.657L3.55029 185.581L34.3527 90.7814L131.853 70.0571Z" stroke="url(#paint13_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.68" d="M125.473 79.6856L187.022 143.421L162.6 228.592L76.6284 250.027L15.0793 186.292L39.5017 101.121L125.473 79.6856Z" stroke="url(#paint14_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.73" d="M119.807 89.6321L175.576 143.487L156.82 218.712L82.2956 240.082L26.5266 186.227L45.2823 111.002L119.807 89.6321Z" stroke="url(#paint15_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.77" d="M114.867 99.8563L164.251 144.322L150.435 209.322L87.2347 229.857L37.8508 185.392L51.6671 120.391L114.867 99.8563Z" stroke="url(#paint16_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.82" d="M110.667 110.321L153.088 145.917L143.472 200.452L91.4347 219.392L49.0133 183.797L58.6294 129.261L110.667 110.321Z" stroke="url(#paint17_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.86" d="M107.216 120.987L142.126 148.261L135.96 192.132L94.8845 208.728L59.9743 181.453L66.1399 137.582L107.216 120.987Z" stroke="url(#paint18_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.91" d="M104.523 131.813L131.404 151.343L127.931 184.387L97.5772 197.901L70.6966 178.371L74.1697 145.327L104.523 131.813Z" stroke="url(#paint19_linear_2381_81)" stroke-opacity="0.5"/>
+    <path opacity="0.95" d="M102.596 142.761L120.96 155.147L119.415 177.244L99.5061 186.954L81.1422 174.568L82.6874 152.471L102.596 142.761Z" stroke="url(#paint20_linear_2381_81)" stroke-opacity="0.5"/>
+    <path d="M101.437 153.788L110.83 159.657L110.443 170.726L100.664 175.925L91.2718 170.056L91.6583 158.987L101.437 153.788Z" stroke="url(#paint21_linear_2381_81)" stroke-opacity="0.5"/>
+    <defs>
+    <linearGradient id="paint0_linear_2381_81" x1="270.311" y1="-10.4165" x2="-68.2084" y2="340.131" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_2381_81" x1="256.68" y1="-7.98645" x2="-54.5775" y2="337.7" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_2381_81" x1="243.433" y1="-4.82803" x2="-41.3322" y2="334.542" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_2381_81" x1="230.605" y1="-0.966151" x2="-28.5053" y2="330.68" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_2381_81" x1="218.23" y1="3.57367" x2="-16.1281" y2="326.141" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_2381_81" x1="206.337" y1="8.76441" x2="-4.23508" y2="320.95" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_2381_81" x1="194.956" y1="14.5773" x2="7.14548" y2="315.137" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_2381_81" x1="184.117" y1="20.9834" x2="17.986" y2="308.731" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_2381_81" x1="173.846" y1="27.9509" x2="28.257" y2="301.763" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint9_linear_2381_81" x1="164.168" y1="35.448" x2="37.9344" y2="294.265" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint10_linear_2381_81" x1="155.107" y1="43.4425" x2="46.9927" y2="286.272" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint11_linear_2381_81" x1="146.689" y1="51.8993" x2="55.4129" y2="277.816" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint12_linear_2381_81" x1="138.93" y1="60.7823" x2="63.1701" y2="268.932" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint13_linear_2381_81" x1="131.853" y1="70.0571" x2="70.2485" y2="259.657" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint14_linear_2381_81" x1="125.473" y1="79.6856" x2="76.6284" y2="250.027" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint15_linear_2381_81" x1="119.807" y1="89.6321" x2="82.2956" y2="240.082" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint16_linear_2381_81" x1="114.867" y1="99.8563" x2="87.2347" y2="229.857" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint17_linear_2381_81" x1="110.667" y1="110.321" x2="91.4347" y2="219.392" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint18_linear_2381_81" x1="107.216" y1="120.987" x2="94.8845" y2="208.728" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint19_linear_2381_81" x1="104.523" y1="131.813" x2="97.5772" y2="197.901" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint20_linear_2381_81" x1="102.596" y1="142.761" x2="99.5061" y2="186.954" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    <linearGradient id="paint21_linear_2381_81" x1="101.437" y1="153.788" x2="100.664" y2="175.925" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#1F89DB"/>
+    <stop offset="1" stop-color="#F42A8B"/>
+    </linearGradient>
+    </defs>
+    </svg>
+    
--- a/resources/[tools]/bl_idcard/web/src/components/svgs/PfpStamp.svelte
+++ b/resources/[tools]/bl_idcard/web/src/components/svgs/PfpStamp.svelte
--- a/resources/[tools]/bl_idcard/web/src/components/svgs/Stamp.svelte
+++ b/resources/[tools]/bl_idcard/web/src/components/svgs/Stamp.svelte
--- a/resources/[tools]/bl_idcard/web/src/enums/events.ts
+++ b/resources/[tools]/bl_idcard/web/src/enums/events.ts
@ -0,0 +1,11 @@
+export enum Receive {
+    cardData = 'idcard:data',
+    config = 'idcard:config',
+    requestBaseUrl = 'idcard:requestBaseUrl',
+}
+
+export enum Send {
+    resolveBaseUrl = 'idcard:resolveBaseUrl',
+    close = 'idcard:close',
+    loaded = 'idcard:loaded',
+}
--- a/resources/[tools]/bl_idcard/web/src/lib/.gitkeep
+++ b/resources/[tools]/bl_idcard/web/src/lib/.gitkeep
--- a/resources/[tools]/bl_idcard/web/src/main.ts
+++ b/resources/[tools]/bl_idcard/web/src/main.ts
@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
--- a/resources/[tools]/bl_idcard/web/src/providers/Debug.svelte
+++ b/resources/[tools]/bl_idcard/web/src/providers/Debug.svelte
@ -0,0 +1,115 @@
+<script lang="ts">
+    import DebugImage from '@utils/debug/DebugImage.svelte';
+    import { InitialiseDebugSenders } from '@utils/debug/init';
+    import { InitialiseDebugReceivers } from '@utils/debug/receivers';
+    import SendDebuggers from '@utils/debug/senders';
+    import { onMount } from 'svelte';
+
+    onMount(() => {
+        InitialiseDebugSenders();
+        InitialiseDebugReceivers();
+    });
+
+    let menuOpen: boolean = false;
+</script>
+
+<div class="w-fit h-fit flex flex-col z-[9999999]">
+    <button
+        class="px-[1vw] py-[0.5vw] w-fit h-fit z-[9999999] bg-accent"
+        on:click={() => (menuOpen = !menuOpen)}
+    >
+        Debug
+    </button>
+
+    {#if menuOpen}
+        <ol
+            class="flex flex-col gap-2 bg-primary z-[9999999] max-w-[25vw] h-full px-[0.5vw] py-[0.5vw]"
+        >
+            {#each SendDebuggers as { label, actions }}
+                <li
+                    class="flex flex-col gap-1 border-l-[2px] border-[color:var(--accent)] px-[0.25vw]"
+                >
+                    <span class="w-full">{label}</span>
+
+                    {#each actions as action}
+                        <div class="flex flex-row flex-wrap gap-[0.5vw]">
+                            {#if action.type === 'text'}
+                                <span
+                                    class="w-full px-[0.5vw] py-[0.25vw] flex flex-col gap-[0.2vw] bg-accent items-start"
+                                >
+                                    <p class="">{action.label}</p>
+
+                                    <input
+                                        type="text"
+                                        class="h-full w-full text-[color:var(--text-secondary)] px-[0.25vw]"
+                                        bind:value={action.value}
+                                    />
+                                    <button
+                                        class="px-[0.5vw] py-[0.25vw] w-[5vw] bg-primary"
+                                        on:click={() => {
+                                            // @ts-ignore
+                                            action.action(action.value);
+                                        }}
+                                    >
+                                        Apply
+                                    </button>
+                                </span>
+                            {:else if action.type === 'checkbox'}
+                                <span
+                                    class="w-full px-[0.5vw] py-[0.25vw] flex flex-row gap-[0.2vw] bg-accent items-center"
+                                >
+                                    <p>{action.label}</p>
+
+                                    <input
+                                        type="checkbox"
+                                        class="h-full aspect-square"
+                                        bind:checked={action.value}
+                                        on:input={(e) => {
+                                            // @ts-ignore
+                                            action.action(action.value);
+                                        }}
+                                    />
+                                </span>
+                            {:else if action.type === 'slider'}
+                                <span
+                                    class="w-full px-[0.5vw] py-[0.25vw] flex flex-col gap-[0.2vw] bg-accent items-start"
+                                >
+                                    <p>{action.label}</p>
+
+                                    <input
+                                        type="range"
+                                        class="w-full"
+                                        min={action.min || 0}
+                                        max={action.max || 100}
+                                        step={action.step || 1}
+                                        bind:value={action.value}
+                                        on:input={() => {
+                                            // @ts-ignore
+                                            action.action(action.value);
+                                        }}
+                                    />
+                                </span>
+                            {:else}
+                                <button
+                                    on:click={() => {
+                                        // @ts-ignore
+                                        action.action();
+                                    }}
+                                    class="w-full px-[0.5vw] py-[0.25vw] bg-accent"
+                                >
+                                    {action.label}
+                                </button>
+                            {/if}
+                        </div>
+                    {/each}
+                </li>
+            {/each}
+        </ol>
+    {/if}
+
+    <div
+        class="absolute w-screen bg-cover bg-no-repeat bg-center h-screen top-0 left-0 dev-image grid place-items-center"
+    >
+        <DebugImage />
+    </div>
+</div>
--- a/resources/[tools]/bl_idcard/web/src/providers/Visibility.svelte
+++ b/resources/[tools]/bl_idcard/web/src/providers/Visibility.svelte
@ -0,0 +1,37 @@
+<script lang="ts">
+    import { Receive, Send } from '@enums/events';
+    import { VISIBLE, CONFIG } from '@stores/stores';
+    import { ReceiveEvent, SendEvent } from '@utils/eventsHandlers';
+    import { onMount } from 'svelte';
+
+    onMount(() => {
+        if (!$CONFIG.allowEscapeKey) return;
+
+        const keyHandler = (e: KeyboardEvent) => {
+            if ($VISIBLE && ['Escape'].includes(e.code)) {
+                SendEvent(Send.close);
+            }
+        };
+        window.addEventListener('keydown', keyHandler);
+        return () => window.removeEventListener('keydown', keyHandler);
+    });
+</script>
+
+<main>
+    <slot />
+</main>
+
+<style>
+    main {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 100;
+        user-select: none;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        height: 100vh;
+        width: 100vw;
+    }
+</style>
--- a/resources/[tools]/bl_idcard/web/src/stores/stores.ts
+++ b/resources/[tools]/bl_idcard/web/src/stores/stores.ts
@ -0,0 +1,42 @@
+import { TIDInfo, TIDType, TIDTypes } from '@typings/id';
+import { IsEnvBrowser } from '@utils/eventsHandlers';
+import { get, writable } from 'svelte/store';
+
+
+export const CONFIG = writable<any>({
+
+    /** Fallback resource name for when the resource name cannot be found. */
+    fallbackResourceName: 'debug',
+
+    /** Whether the escape key should make visibility false. */
+    allowEscapeKey: true,
+});
+
+/**
+ * The name of the resource. This is used for the resource manifest.
+ * @type {Writable<string>}
+ */
+export const RESOURCE_NAME = writable<string>(
+    (window as any).GetParentResourceName
+        ? (window as any).GetParentResourceName()
+        : get(CONFIG).DEBUG_RESOURCE_NAME,
+);
+
+/**
+ * Whether the current environment is the browser or the client.
+ * @type {Writable<boolean>}
+ */
+export const IS_BROWSER = writable<boolean>(!(window as any).invokeNative);
+
+/**
+ * Whether the debug menu is visible or not.
+ * @type {Writable<boolean>}
+ */
+export const VISIBLE = writable<boolean>(false);
+
+
+export const ID_INFO = writable<TIDInfo>(null);
+
+export const ID_TYPES = writable<TIDTypes>(null);
+
+export const ID_TYPE = writable<TIDType>(null);
--- a/resources/[tools]/bl_idcard/web/src/typings/.gitkeep
+++ b/resources/[tools]/bl_idcard/web/src/typings/.gitkeep
--- a/resources/[tools]/bl_idcard/web/src/typings/events.ts
+++ b/resources/[tools]/bl_idcard/web/src/typings/events.ts
@ -0,0 +1,54 @@
+export interface NuiMessage<T = any> {
+    action: string
+    data: T
+}
+
+export interface DebugEvent<T = any> {
+    action: string
+    data: T
+}
+
+export interface DebugEventCallback<T = any> {
+    action: string
+    handler?: (data: T) => unknown
+}
+
+export interface CommonActionProperties {
+    label: string
+    action: (...args: any[]) => any
+    delay?: number
+}
+
+export type ButtonAction = CommonActionProperties & {
+    type?: 'button'
+}
+
+export type CheckboxAction = CommonActionProperties & {
+    type: 'checkbox'
+    value?: boolean
+}
+
+export type SliderAction = CommonActionProperties & {
+    type: 'slider'
+    max?: number
+    min?: number
+    step?: number
+    value?: number
+}
+
+export type TextAction = CommonActionProperties & {
+    type: 'text'
+    placeholder?: string
+    value?: any
+}
+
+export type DebugAction =
+    | ButtonAction
+    | CheckboxAction
+    | SliderAction
+    | TextAction
+
+export interface DebugItem {
+    label: string
+    actions?: DebugAction[]
+}
--- a/resources/[tools]/bl_idcard/web/src/typings/id.ts
+++ b/resources/[tools]/bl_idcard/web/src/typings/id.ts
@ -0,0 +1,30 @@
+export type TIDInfo = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    dob: string;
+    sex: string;
+    idType: string;
+    imageURL: string;
+}
+
+export type TIDType = {
+    type : string;
+    title: string;
+    label: string;
+    titleColour: string;
+
+    stamp: boolean;
+    profileStamp: boolean;
+
+    signature: boolean;
+
+    bgColour: string;
+    bgColourSecondary: string;
+
+    textColour: string;
+}
+
+export type TIDTypes = {
+    [key: string]: TIDType;
+}
--- a/resources/[tools]/bl_idcard/web/src/typings/misc.ts
+++ b/resources/[tools]/bl_idcard/web/src/typings/misc.ts
@ -0,0 +1,4 @@
+export interface Config {
+    fallbackResourceName: string;
+    allowEscapeKey: boolean;
+}
--- a/resources/[tools]/bl_idcard/web/src/utils/.gitkeep
+++ b/resources/[tools]/bl_idcard/web/src/utils/.gitkeep
--- a/resources/[tools]/bl_idcard/web/src/utils/debug/DebugImage.svelte
+++ b/resources/[tools]/bl_idcard/web/src/utils/debug/DebugImage.svelte
--- a/resources/[tools]/bl_idcard/web/src/utils/debug/init.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/debug/init.ts
@ -0,0 +1,124 @@
+import { DebugAction } from '@typings/events'
+import { toggleVisible } from './visibility'
+import { ID_INFO, ID_TYPES } from '@stores/stores'
+import { DebugEventSend } from '@utils/eventsHandlers'
+import { Receive } from '@enums/events'
+import { TIDTypes } from '@typings/id'
+
+/**
+ * The initial debug actions to run on startup
+ */
+const InitDebug: DebugAction[] = [
+    {
+        label: 'Visible',
+        action: ()=> toggleVisible(true),
+        delay: 500,
+    },
+    {
+        label: 'Init Info',
+        action: ()=> {
+            DebugEventSend(Receive.cardData, {
+                id: '123456',
+                dob: '01/01/1970',
+                firstName: 'John',
+                lastName: 'Doe',
+                sex: 'M',
+                idType: 'weapon_license',
+                imageURL: 'https://imgur.com/2nL5VV8.png'
+            })
+        },
+        delay: 1,
+    },
+    {
+        label: 'ID Configs',
+        action: () => {
+
+            const types: TIDTypes = {
+                driver_license: {
+                    type: 'driver_license',
+                    title: 'SAN ANDREAS',
+                    titleColour: '#bdbdbd',
+        
+                    label: 'DRIVER LICENSE',
+                
+                    stamp: true,
+                    profileStamp: false,
+                
+                    signature: true,
+                
+                    bgColour: '#000',
+                    bgColourSecondary: '#000',
+                
+                    textColour: '#FFF',
+                },
+        
+                weapon_license: {
+                    type: 'weapon_license',
+                    title: 'SAN ANDREAS',
+                    titleColour: '#ff4538',
+        
+                    label: 'WEAPON LICENSE',
+                
+                    stamp: true,
+                    profileStamp: false,
+                
+                    signature: true,
+                
+                    bgColour: '#460000',
+                    bgColourSecondary: '#E90000',
+                
+                    textColour: '#FFF',
+                },
+        
+                female_id: {
+                    type: 'female_id',
+                    title: 'SAN ANDREAS',
+                    titleColour: '#F97C81',
+        
+                    label: 'ID CARD',
+                
+                    stamp: true,
+                    profileStamp: true,
+                
+                    signature: true,
+                
+                    bgColour: '#f1e6db',
+                    bgColourSecondary: '#ff75bc',
+                
+                    textColour: '#323443',
+                },
+                
+                male_id: {
+                    type: 'male_id',
+                    title: 'SAN ANDREAS',
+                    titleColour: '#89B1FF',
+        
+                    label: 'ID CARD',
+                
+                    stamp: true,
+                    profileStamp: true,
+                
+                    signature: true,
+                
+                    bgColour: '#E5FCFF',
+                    bgColourSecondary: '#6FCBE9',
+                
+                    textColour: '#323443',
+                },
+            }
+
+            DebugEventSend<TIDTypes>(Receive.config, types)
+        }
+    }
+]
+
+export default InitDebug
+
+
+export function InitialiseDebugSenders(): void {
+    for (const debug of InitDebug) {
+        setTimeout(() => {
+            debug.action()
+        }, debug.delay || 0)
+    }
+}
--- a/resources/[tools]/bl_idcard/web/src/utils/debug/receivers.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/debug/receivers.ts
@ -0,0 +1,44 @@
+import { Send } from "@enums/events"
+import { DebugEventCallback } from "@typings/events"
+import { DebugEventReceive } from "@utils/eventsHandlers"
+
+/**
+ * These Receivers will emulate what the client receives from the UI.
+ * The purpose of this is to test the UI without having to run the client.
+ * You are supposed to pretend to process the data you receive here and return.
+ */
+const ReceiveDebuggers: DebugEventCallback[] = [
+    {
+        action: Send.close,
+        handler: () => {
+            console.log('closed')
+        },
+    },
+    {
+        action: 'debug',
+        handler: (data: string) => {
+            const init = 'Emulates an NUICallback times. Process the data here.'
+
+            if (typeof data !== 'string') {
+                return `${init} \n The data is not a string.`
+            }
+
+            const reverse = data.split('').reverse().join('')
+
+            const message = `${init} \n The reverse of %c${data} %cis %c${reverse}`
+
+            return message
+        },
+    },
+]
+
+export default ReceiveDebuggers
+
+/**
+ * Initialise the debug receivers
+ */
+export function InitialiseDebugReceivers(): void {
+    for (const debug of ReceiveDebuggers) {
+        DebugEventReceive(debug.action, debug.handler)
+    }
+}
--- a/resources/[tools]/bl_idcard/web/src/utils/debug/senders.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/debug/senders.ts
@ -0,0 +1,25 @@
+import { DebugItem } from '@typings/events'
+import { toggleVisible } from './visibility'
+import { Send } from '@enums/events'
+import { DebugEventSend, SendEvent } from '@utils/eventsHandlers'
+
+/**
+ * The debug actions that will show up in the debug menu.
+ */
+const SendDebuggers: DebugItem[] = [
+    {
+        label: 'Visibility',
+        actions: [
+            {
+                label: 'True',
+                action: () => toggleVisible(true),
+            },
+            {
+                label: 'False',
+                action: () => toggleVisible(false),
+            },
+        ],
+    },
+]
+
+export default SendDebuggers
--- a/resources/[tools]/bl_idcard/web/src/utils/debug/visibility.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/debug/visibility.ts
@ -0,0 +1,8 @@
+import { Receive } from '@enums/events'
+import { DebugEventSend } from '@utils/eventsHandlers'
+/**
+ * The debug response for the visibility debug action.
+ */
+export function toggleVisible(visible: boolean): void {
+    DebugEventSend(Receive.visible, visible)
+}
--- a/resources/[tools]/bl_idcard/web/src/utils/eventsHandlers.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/eventsHandlers.ts
@ -0,0 +1,153 @@
+import { get } from 'svelte/store';
+import { IS_BROWSER, RESOURCE_NAME } from '../stores/stores';
+import type { DebugEvent, NuiMessage } from '../typings/events';
+import { onDestroy, onMount } from 'svelte';
+
+const isBrower = get(IS_BROWSER);
+const resourceName = get(RESOURCE_NAME);
+
+const debugEventListeners: DebugEvent[] = [];
+
+/**
+ * Get the current environment. Whether it's the browser or the client
+ */
+export const IsEnvBrowser = (): boolean => !(window as any).invokeNative;
+
+/**
+ * Send an event to the Client
+ * @param eventName The name of the event to send
+ * @param data The data to send with the event
+ * @returns {Promise<T>} The callback response from the Client
+ **/
+export async function SendEvent<T = any, P = any>(
+    eventName: string,
+    data: T = {} as T,
+): Promise<P> {
+    if (isBrower == true) {
+        const debugReturn = await DebugEventCallback<T>(eventName, data);
+        return Promise.resolve(debugReturn);
+    }
+    const options = {
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/json; charset=UTF-8',
+        },
+        body: JSON.stringify(data),
+    };
+
+    const resp: Response = await fetch(
+        `https://${resourceName}/${eventName}`,
+        options,
+    );
+    return await resp.json();
+}
+
+/**
+ * Listen for an event from the Client
+ * @param action The name of the event to listen for
+ * @param handler The callback to run when the event is received
+ * @returns {void}
+ **/
+export function ReceiveEvent<T = unknown>(
+    action: string,
+    handler: (data: T) => void,
+) {
+    const eventListener = (event: MessageEvent<NuiMessage<T>>) => {
+        const { action: eventAction, data } = event.data;
+
+        eventAction === action && handler(data);
+    };
+
+    // Add the event listener on mount and remove it on unmount
+    onMount(() => window.addEventListener('message', eventListener));
+    onDestroy(() => window.removeEventListener('message', eventListener));
+}
+
+/**
+ * Listen for an event from the Client
+ * YOU NEED TO BE SURE TO REMOVE THE LISTENER WHEN YOU'RE DONE WITH IT
+ * @param action The name of the event to listen for
+ * @param handler The callback to run when the event is received
+ * @returns {function}
+ **/
+export function TempReceiveEvent<T = unknown>(
+    action: string,
+    handler: (data: T) => void,
+): {removeListener: () => void} {
+    const eventListener = (event: MessageEvent<NuiMessage<T>>) => {
+        const { action: eventAction, data } = event.data;
+
+        eventAction === action && handler(data);
+    };
+
+    function removeListener() {
+        window.removeEventListener('message', eventListener);
+    }
+
+    // Add the event listener on mount and remove it on unmount
+    window.addEventListener('message', eventListener)
+    return {removeListener};
+}
+
+
+/**
+ * Emulate an event sent from the Client
+ * @param action The name of the event to send
+ * @param data The data to send with the event
+ * @param timer The time to wait before sending the event (in ms)
+ * @returns {void}
+ **/
+export async function DebugEventSend<P>(action: string, data?: P, timer = 0) {
+    if (!isBrower) return;
+    setTimeout(() => {
+        const event = new MessageEvent('message', {
+            data: { action, data },
+        });
+        window.dispatchEvent(event);
+    }, timer);
+}
+
+/**
+ * Emulate an NUICallback in the Client
+ * @param action The name of the event to listen for
+ * @param handler The callback to run when the event is received
+ * @returns {void}
+ **/
+export async function DebugEventReceive<T>(
+    action: string,
+    handler?: (data: T) => unknown,
+) {
+    if (!isBrower) return;
+
+    if (debugEventListeners[action] !== undefined) {
+        console.log(
+            `%c[DEBUG] %c${action} %cevent already has a debug receiver.`,
+            'color: red; font-weight: bold;',
+            'color: green',
+            '', // Empty CSS style string to reset the color
+        );
+        return;
+    }
+
+    debugEventListeners[action] = handler;
+}
+
+/**
+ * Emulate an NUICallback in the Client
+ * @private
+ * @param action The name of the event to listen for
+ * @param data The data to send with the event
+ * @returns {Promise<T>} The callback response from the Client
+ */
+export async function DebugEventCallback<T>(action: string, data?: T) {
+    if (!isBrower) return;
+
+    const handler = debugEventListeners[action];
+    if (handler === undefined) {
+        console.log(`[DEBUG] ${action} event does not have a debugger.`);
+        return {};
+    }
+
+    const result = await handler(data);
+    return result;
+}
--- a/resources/[tools]/bl_idcard/web/src/utils/listeners.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/listeners.ts
@ -0,0 +1,77 @@
+import { Receive, Send } from "@enums/events"
+import { DebugEventCallback } from "@typings/events"
+import { ReceiveEvent, SendEvent } from "./eventsHandlers"
+import { convertImage } from "./txdToBase64"
+import { TIDInfo, TIDTypes } from "@typings/id"
+import { ID_INFO, ID_TYPE, ID_TYPES } from "@stores/stores"
+import { get } from "svelte/store"
+
+const AlwaysListened: DebugEventCallback[] = [
+    {
+        action: Receive.cardData,
+        handler: (data: TIDInfo) => {
+
+            if (!data) {
+                ID_INFO.set(null);
+                return;
+            }
+
+            const idType = data.idType
+            if (!idType) {
+                console.error('No ID Type found in card types config.');
+                return;
+            };
+
+            const idTypes = get(ID_TYPES);
+
+            data.imageURL = data.imageURL.includes("data:image/png;base64") ? data.imageURL : 'nui://bl_idcard/web/mugshots/' + data.imageURL + '.png'
+
+            if (!idTypes) {
+                console.error('No ID Types config.');
+                return;
+            }
+
+            const idTypeConfig = idTypes[idType];
+
+            if (!idTypeConfig) {
+                console.error(`No ID Type config for ${idType}.`);
+                return;
+            }
+
+            const docStyles = document.documentElement.style;
+
+            // set css variables
+            docStyles.setProperty('--text', idTypeConfig.textColour);
+            docStyles.setProperty('--title', idTypeConfig.titleColour);
+            docStyles.setProperty('--bg', idTypeConfig.bgColour);
+            docStyles.setProperty('--bg-secondary', idTypeConfig.bgColourSecondary);
+
+            ID_TYPE.set(idTypeConfig);
+
+            ID_INFO.set(data);
+        }
+    },
+    {
+        action: Receive.requestBaseUrl,
+        handler: async (txd: string) => {
+            const baseUrl = await convertImage(txd);
+            SendEvent(Send.resolveBaseUrl, baseUrl);
+        }
+    },
+    {
+        action: Receive.config,
+        handler: (data: TIDTypes) => {
+            ID_TYPES.set(data);
+        }
+    }
+]
+
+export default AlwaysListened
+
+
+
+export function InitialiseListen() {
+    for (const debug of AlwaysListened) {
+        ReceiveEvent(debug.action, debug.handler);
+    }
+}
--- a/resources/[tools]/bl_idcard/web/src/utils/txdToBase64.ts
+++ b/resources/[tools]/bl_idcard/web/src/utils/txdToBase64.ts
@ -0,0 +1,29 @@
+export async function convertImage( //https://github.com/BaziForYou/MugShotBase64
+    txd: string,
+    outputFormat: string = 'image/png'
+): Promise<string> {
+    return new Promise<string>((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        img.onload = async () => {
+            try {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    throw new Error('Failed to get 2D context.');
+                }
+                canvas.height = img.naturalHeight;
+                canvas.width = img.naturalWidth;
+                ctx.drawImage(img, 0, 0);
+                resolve(canvas.toDataURL(outputFormat));
+                canvas.remove();
+            } catch (error) {
+                reject(error);
+            } finally {
+                img.remove();
+            }
+        };
+        img.onerror = () => reject(new Error('Failed to load image.'));
+        img.src = `https://nui-img/${txd}/${txd}`;
+    });
+}
--- a/resources/[tools]/bl_idcard/web/src/vite-env.d.ts
+++ b/resources/[tools]/bl_idcard/web/src/vite-env.d.ts
@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/resources/[tools]/bl_idcard/web/svelte.config.js
+++ b/resources/[tools]/bl_idcard/web/svelte.config.js
@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
--- a/resources/[tools]/bl_idcard/web/tailwind.config.js
+++ b/resources/[tools]/bl_idcard/web/tailwind.config.js
@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+
+
+
+// --primary: #2c2c2c;
+// --secondary: #424050;
+// --accent: #8685ef;
+
+// --text-primary: #faf7ff;
+// --text-secondary: #2b2b2b;
+
+
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{svelte,js,ts,jsx,tsx}",
+      ],
+  theme: {
+    extend: {
+        colors: {
+            'txt-primary': 'var(--text)',
+            'txt-secondary': 'var(--title)',
+
+            'primary': 'var(--bg)',
+            'secondary': 'var(--bg-secondary)',
+            'accent': '#8685ef'
+        },
+    },
+  },
+  plugins: [],
+}
+
--- a/resources/[tools]/bl_idcard/web/tsconfig.json
+++ b/resources/[tools]/bl_idcard/web/tsconfig.json
@ -0,0 +1,32 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": false,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": {
+        "@assets/*": ["src/assets/*"],
+        "@components/*": ["src/components/*"],
+        "@providers/*": ["src/providers/*"],
+        "@stores/*": ["src/stores/*"],
+        "@utils/*": ["src/utils/*"],
+        "@typings/*": ["src/typings/*"],
+        "@enums/*": ["src/enums/*"],
+        "@lib/*": ["src/lib/*"]
+    }
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/resources/[tools]/bl_idcard/web/tsconfig.node.json
+++ b/resources/[tools]/bl_idcard/web/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/resources/[tools]/bl_idcard/web/vite.config.ts
+++ b/resources/[tools]/bl_idcard/web/vite.config.ts
@ -0,0 +1,45 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import postcss from './postcss.config.js';
+import { resolve } from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    css: {
+      postcss,
+    },
+    plugins: [svelte({
+      /* plugin options */
+    })],
+    base: './', // fivem nui needs to have local dir reference
+    resolve: {
+      alias: {
+        '@assets': resolve("./src/assets"),
+        '@components': resolve("./src/components"),
+        '@providers': resolve("./src/providers"),
+        '@stores': resolve("./src/stores"),
+        '@utils': resolve("./src/utils"),
+        '@typings': resolve("./src/typings"),
+        '@enums': resolve('./src/enums'),
+        '@lib': resolve('./src/lib'),
+      },
+    },
+    server: {
+        port: 3000,
+      },
+    build: {
+      emptyOutDir: true,
+      outDir: './build',
+      assetsDir: './',
+      rollupOptions: {
+        output: {
+          // By not having hashes in the name, you don't have to update the manifest, yay!
+          entryFileNames: `[name].js`,
+          chunkFileNames: `[name].js`,
+          assetFileNames: `[name].[ext]`
+        }
+      }
+    }
+    
+  })
+