From 2ae6e901f2545d3e88600b5857abc4598452e1ea Mon Sep 17 00:00:00 2001
From: SamuNatsu <samunatsu@qq.com>
Date: Sat, 26 Aug 2023 18:09:43 +0800
Subject: [PATCH] Update 0.2.0

---
 README.md                              |   2 +
 build.sh                               |  17 +
 frontend/@.vue                         | 210 --------
 frontend/README.md                     |   6 +-
 frontend/app.vue                       |  20 +-
 frontend/assets/icons/logo.svg         |   1 +
 frontend/components/DLModeSelector.vue |  33 ++
 frontend/components/FileSelector.vue   |   3 -
 frontend/components/LangSwitch.vue     |  10 +-
 frontend/components/ProgressBar.vue    |  21 +
 frontend/components/Receiver.vue       |  80 +--
 frontend/components/Sender.vue         | 141 +++--
 frontend/components/app/Footer.vue     |   2 +-
 frontend/components/app/Header.vue     |  10 +-
 frontend/i18n.config.ts                |   9 +
 frontend/i18n/en.json                  |   6 +-
 frontend/i18n/zh.json                  |   6 +-
 frontend/layouts/default.vue           |   7 +-
 frontend/nuxt.config.ts                |  15 +-
 frontend/package.json                  |   8 +-
 frontend/pages/index.vue               |  29 +-
 frontend/pnpm-lock.yaml                | 686 ++++++++++++++-----------
 frontend/server.js                     |   7 -
 frontend/tailwind.config.ts            |   2 +
 frontend/utils/dl.ts                   |  64 +++
 frontend/utils/p2p_recv.ts             |  91 ++--
 frontend/utils/p2p_send.ts             |  45 +-
 27 files changed, 813 insertions(+), 718 deletions(-)
 create mode 100755 build.sh
 delete mode 100644 frontend/@.vue
 create mode 100755 frontend/assets/icons/logo.svg
 create mode 100644 frontend/components/DLModeSelector.vue
 create mode 100644 frontend/components/ProgressBar.vue
 create mode 100644 frontend/i18n.config.ts
 delete mode 100644 frontend/server.js
 create mode 100644 frontend/utils/dl.ts

diff --git a/README.md b/README.md
index 1092785..c0af61d 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,4 @@
 # P2P-Transfer
+
 A P2P File Transfer Web App
+
diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..8283e1f
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+rm -rf ./build
+mkdir ./build
+
+cd ./frontend
+pnpm install
+pnpm generate
+cp -r ./dist ../build/www
+cd ..
+
+cd ./backend
+pnpm install
+pnpm build
+cp ./dist/server.min.mjs ./package.json ../build
+cd ..
+
diff --git a/frontend/@.vue b/frontend/@.vue
deleted file mode 100644
index b7248f8..0000000
--- a/frontend/@.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script lang="ts" setup>
-import { Socket } from 'socket.io-client';
-import { P2PErrorType } from '../utils/p2p';
-import { isInternalBrowser } from '../utils/user_agent.';
-
-/* Types */
-enum Status {
-  Idle,
-  Requesting,
-  Waiting,
-  Connecting,
-  Transfering,
-  Finished,
-  Error
-}
-
-/* Inject */
-const route = useRoute();
-const router = useRouter();
-const { t, locale } = useI18n();
-
-/* Seo */
-useSeoMeta({
-  title: t('seo.title'),
-  description: t('seo.description'),
-  ogTitle: t('seo.title'),
-  ogDescription: t('seo.description')
-});
-useHeadSafe({
-  htmlAttrs: {
-    lang: locale.value
-  }
-});
-
-/* Reactive */
-const refs = reactive({
-  showLayer: false,
-  status: Status.Idle,
-  selfId: '',
-  peerId: '',
-  fileName: null as null | string,
-  fileSize: 0,
-  recvSize: 0,
-  avgSpeed: 0,
-  insSpeed: 0,
-  error: ''
-});
-
-/* Computed */
-const sizeTxt = computed((): string => convert(refs.fileSize, 'B'));
-const avgSpeedTxt = computed((): string => convert(refs.avgSpeed, 'B/s'));
-const insSpeedTxt = computed((): string => convert(refs.insSpeed, 'B/s'));
-
-/* Functions */
-let start: () => void;
-
-/* Life cycle */
-onMounted(async (): Promise<void> => {
-  if (Object.keys(route.query).length === 0) {
-    router.push('/');
-    return;
-  }
-
-  if (isInternalBrowser()) {
-    refs.showLayer = true;
-    return;
-  }
-
-  const streamSaver = (await import('streamsaver')).default;
-  streamSaver.mitm = '/mitm.html';
-
-  refs.peerId = Object.keys(route.query)[0];
-
-  let startTime: number;
-  let lastRecvSize: number = 0;
-  let handle: number;
-  let order: number = 0;
-
-  const blobMap: Map<number, Uint8Array> = new Map();
-  let stream: WritableStream;
-  let writer: WritableStreamDefaultWriter;
-
-  const cb: () => void = startRecvFile(
-    refs.peerId,
-    (err: P2PErrorType): void => {
-      window.clearInterval(handle);
-      window.onbeforeunload = null;
-
-      if (refs.status === Status.Error) {
-        return;
-      }
-
-      refs.status = Status.Error;
-      switch (err) {
-        case P2PErrorType.WebRTCDisabled:
-          refs.error = t('error.webrtc_disabled');
-          break;
-        case P2PErrorType.SignalServerConnectError:
-          refs.error = t('error.signal_conn');
-          break;
-        case P2PErrorType.SignalServerDisconnectError:
-          refs.error = t('error.signal_disconn');
-          break;
-        case P2PErrorType.WebRTCConnectError:
-          refs.error = t('error.webrtc_conn');
-          break;
-        case P2PErrorType.DataChannelError:
-          refs.error = t('error.data_ch');
-          break;
-      }
-    },
-    (): void => {
-      refs.status = Status.Requesting;
-    },
-    (selfId: string, socket: Socket, peerConn: RTCPeerConnection): void => {
-      refs.selfId = selfId;
-      window.onbeforeunload = (): string => {
-        return 'Sure to exit?';
-      };
-      window.onunload = (): void => {
-        socket.disconnect();
-        peerConn.close();
-      };
-    },
-    (name: string, size: number): void => {
-      refs.fileName = name;
-      refs.fileSize = size;
-
-      stream = streamSaver.createWriteStream(refs.fileName, {
-        size: refs.fileSize
-      });
-      writer = stream.getWriter();
-      refs.status = Status.Waiting;
-    },
-    () => {
-      refs.status = Status.Transfering;
-      startTime = new Date().getTime();
-      handle = window.setInterval((): void => {
-        refs.avgSpeed =
-          (refs.recvSize / (new Date().getTime() - startTime)) * 1000;
-        refs.insSpeed = (refs.recvSize - lastRecvSize) * 2;
-        lastRecvSize = refs.recvSize;
-      }, 500);
-    },
-    (data: ArrayBuffer): number => {
-      const view: DataView = new DataView(data);
-
-      blobMap.set(view.getUint32(0), new Uint8Array(data.slice(4)));
-
-      while (blobMap.has(order)) {
-        const blob: Uint8Array = blobMap.get(order) as Uint8Array;
-
-        refs.recvSize += blob.byteLength;
-        writer.write(blobMap.get(order) as Uint8Array);
-        blobMap.delete(order);
-        order++;
-      }
-
-      return refs.recvSize;
-    },
-    (): void => {
-      window.clearInterval(handle);
-      refs.status = Status.Finished;
-      writer.close();
-      window.onbeforeunload = null;
-      refs.avgSpeed =
-        (refs.recvSize / (new Date().getTime() - startTime)) * 1000;
-    }
-  );
-
-  start = (): void => {
-    refs.status = Status.Connecting;
-    cb();
-  };
-});
-</script>
-
-<template>
-  <div class="bg-gray-50 fixed flex flex-col gap-12 items-center inset-0 justify-center">
-    <AppHeader/>
-    <ClientOnly>
-      <BlockLayer v-if="refs.showLayer"/>
-      <main class="flex flex-col">
-        <p><strong>{{ $t('recv.self_id') }}</strong>{{ refs.selfId }}</p>
-        <p><strong>{{ $t('recv.peer_id') }}</strong>{{ refs.peerId }}</p>
-        <p><strong>{{ $t('recv.file_name') }}</strong>{{ refs.fileName }}</p>
-        <p>
-          <strong>{{ $t('recv.file_size') }}</strong>
-          <span :title="`${refs.fileSize} Byte(s)`">{{ sizeTxt }}</span>
-        </p>
-        <p>
-          <strong>{{ $t('recv.status._') }}</strong>
-          <span v-if="refs.status === Status.Requesting" class="text-gray-400">{{ $t('recv.status.requesting') }}</span>
-          <span v-else-if="refs.status === Status.Waiting" class="text-purple-500">{{ $t('recv.status.waiting') }}</span>
-          <span v-else-if="refs.status === Status.Connecting" class="text-yellow-500">{{ $t('recv.status.connecting') }}</span>
-          <span v-else-if="refs.status === Status.Transfering" class="text-blue-500">{{ $t('recv.status.transfering') }}</span>
-          <span v-else-if="refs.status === Status.Finished" class="text-green-500">{{ $t('recv.status.finished') }}</span>
-          <span v-else class="text-red-500">{{ $t('recv.status.error') }}</span>
-        </p>
-        <template v-if="refs.status === Status.Transfering || refs.status === Status.Finished">
-          <p><strong>{{ $t('recv.progress') }}</strong>{{ (refs.recvSize / refs.fileSize * 100).toFixed(1) }}%</p>
-          <p><strong>{{ $t('recv.avg_speed') }}</strong>{{ avgSpeedTxt }}</p>
-          <p><strong>{{ $t('recv.ins_speed') }}</strong>{{ insSpeedTxt }}</p>
-        </template>
-        <button v-if="refs.fileName" @click="start" class="bg-white border-2 border-green-500 font-bold mt-4 px-4 py-1 rounded-3xl select-none self-center transition-colors disabled:bg-white disabled:cursor-not-allowed disabled:opacity-50 disabled:text-black hover:bg-green-500 hover:text-white" :disabled="refs.status >= Status.Connecting">{{ $t('recv.start_download') }}</button>
-      </main>
-      <div class="max-w-sm text-red-500 break-all">{{ refs.error }}</div>
-    </ClientOnly>
-  </div>
-</template>
diff --git a/frontend/README.md b/frontend/README.md
index 595dda9..e0719a5 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,6 +1,6 @@
-# Nuxt 3 Minimal Starter
+# Frontend
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Frontend for P2P Transfer
 
 ## Setup
 
@@ -59,5 +59,3 @@ pnpm run preview
 # yarn
 yarn preview
 ```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/frontend/app.vue b/frontend/app.vue
index 0347ee7..19589e8 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -8,20 +8,12 @@ async function onBeforeEnter(): Promise<void> {
 
 <template>
   <NuxtLayout>
-    <ClientOnly>
-      <notifications position="top center"/>
-    </ClientOnly>
-    <div
-      class="bg-gray-50 fixed flex flex-col gap-12 inset-0 items-center justify-center">
-      <AppHeader/>
-      <NuxtPage
-        :transition="{
-          name: 'page',
-          mode: 'out-in',
-          onBeforeEnter
-        }"/>
-    </div>
-    <AppFooter/>
+    <NuxtPage
+      :transition="{
+        name: 'page',
+        mode: 'out-in',
+        onBeforeEnter
+      }"/>
   </NuxtLayout>
 </template>
 
diff --git a/frontend/assets/icons/logo.svg b/frontend/assets/icons/logo.svg
new file mode 100755
index 0000000..9ecc12f
--- /dev/null
+++ b/frontend/assets/icons/logo.svg
@@ -0,0 +1 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(90)"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><path d="M7 4V20M7 20L3 16M7 20L11 16M17 4V20M17 4L21 8M17 4L13 8" stroke="#0077FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
diff --git a/frontend/components/DLModeSelector.vue b/frontend/components/DLModeSelector.vue
new file mode 100644
index 0000000..419871c
--- /dev/null
+++ b/frontend/components/DLModeSelector.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+/* Properties */
+defineProps<{
+  input: boolean;
+}>();
+
+/* Emits */
+defineEmits<{
+  'update:input': [value: boolean]
+}>();
+</script>
+
+<template>
+  <div class="flex flex-col items-center overflow-hidden rounded-lg">
+    <div class="flex font-bold items-center w-full">
+      <button
+        @click="$emit('update:input', true)"
+        class="py-2 w-1/2"
+        :class="input ? 'bg-green-300' : 'bg-gray-200'">
+        {{ $t('button.blob_mode') }}
+      </button>
+      <button
+        @click="$emit('update:input', false)"
+        class="py-2 w-1/2"
+        :class="input ? 'bg-gray-200' : 'bg-green-300'">
+        {{ $t('button.stream_mode') }}
+      </button>
+    </div>
+    <div class="bg-green-300 px-4 py-4 w-80">
+      {{ $t(input ? 'ui.blob_mode' : 'ui.stream_mode') }}
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/FileSelector.vue b/frontend/components/FileSelector.vue
index b55d7eb..cd38578 100644
--- a/frontend/components/FileSelector.vue
+++ b/frontend/components/FileSelector.vue
@@ -2,7 +2,6 @@
 /* Properties */
 defineProps<{
   id: string;
-  disabled: boolean;
 }>();
 
 /* Emits */
@@ -14,13 +13,11 @@ defineEmits<{
 <template>
   <label
     class="bg-white border-2 cursor-pointer font-bold px-4 rounded-3xl select-none transition-colors hover:text-white"
-    :class="disabled ? '!bg-white !cursor-not-allowed !opacity-50 !text-black' : ''"
     :for="id">
     <slot></slot>
     <input
       @change="$emit('select', $event)"
       class="hidden"
-      :disabled="disabled"
       :id="id"
       multiple="false"
       type="file"/>
diff --git a/frontend/components/LangSwitch.vue b/frontend/components/LangSwitch.vue
index c7b5d47..ed96b52 100644
--- a/frontend/components/LangSwitch.vue
+++ b/frontend/components/LangSwitch.vue
@@ -18,12 +18,10 @@ const availableLocales = computed(() => {
 <template>
   <div class="flex font-smiley items-center justify-center">
     <NuxtLink
-      v-for="locale in availableLocales"
-      :key="locale.code"
-      :to="switchLocalePath(locale.code)">
-      <span class="transition-colors hover:text-blue-500">
-        {{ locale.name }}
-      </span>
+      v-for="i in availableLocales"
+      class="transition-colors hover:text-blue-500"
+      :to="switchLocalePath(i.code)">
+      {{ i.name }}
     </NuxtLink>
   </div>
 </template>
diff --git a/frontend/components/ProgressBar.vue b/frontend/components/ProgressBar.vue
new file mode 100644
index 0000000..b2ed662
--- /dev/null
+++ b/frontend/components/ProgressBar.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+/* Properties */
+defineProps<{
+  progress: number;
+  color?: string;
+}>();
+</script>
+
+<template>
+  <div class="border-2 border-gray-400 h-5 overflow-hidden relative rounded-xl">
+    <div
+      class="h-full text-base"
+      :class="color"
+      :style="{ width: `${progress}%` }">
+    </div>
+    <div
+      class="absolute flex inset-0 items-center justify-center text-sm">
+      {{ progress.toFixed(1) }}%
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/Receiver.vue b/frontend/components/Receiver.vue
index 44f0f45..99b2318 100644
--- a/frontend/components/Receiver.vue
+++ b/frontend/components/Receiver.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Socket } from 'socket.io-client';
+import { DLStream } from '~/utils/dl';
 import { RecvServiceError } from '~/utils/p2p_recv';
 
 /* Types */
@@ -27,6 +28,7 @@ const refs = reactive({
   fileName: null as null | string,
   fileSize: 0,
   fileRecvSize: 0,
+  dlMode: false,
   status: Status.Idle,
   selfId: null as null | string,
   avgSpeed: 0,
@@ -40,9 +42,8 @@ const avgSpeedTxt = computed((): string => convert(refs.avgSpeed, 'B/s'));
 const insSpeedTxt = computed((): string => convert(refs.insSpeed, 'B/s'));
 
 /* Variables */
-const blobMap: Map<number, Uint8Array> = new Map();
-let stream: WritableStream;
-let writer: WritableStreamDefaultWriter;
+const blobMap: Map<number, ArrayBuffer> = new Map();
+let dlStream: null | DLStream = null;
 let socket: Socket;
 let peerConn: RTCPeerConnection;
 let handle: number;
@@ -55,7 +56,9 @@ function abort(): void {
   peerConn.close();
   clearInterval(handle);
   window.onbeforeunload = null;
-  writer.abort();
+  if (dlStream !== null) {
+    dlStream.abort();
+  }
 }
 let startDownload: () => void;
 
@@ -82,6 +85,9 @@ async function init(): Promise<void> {
       peerConn.close();
       clearInterval(handle);
       window.onbeforeunload = null;
+      if (dlStream !== null) {
+        dlStream.abort();
+      }
 
       switch (err) {
         case RecvServiceError.WebRTCDisabled:
@@ -124,13 +130,9 @@ async function init(): Promise<void> {
     (name: string, size: number): void => {
       refs.fileName = name;
       refs.fileSize = size;
-      stream = streamSaver.createWriteStream(refs.fileName, {
-        size: refs.fileSize
-      });
-      writer = stream.getWriter();
       refs.status = Status.WaitingAccept;
     },
-    (): void => {
+    async (): Promise<void> => {
       refs.fileRecvSize = 0;
       refs.avgSpeed = 0;
       refs.insSpeed = 0;
@@ -141,17 +143,18 @@ async function init(): Promise<void> {
         refs.insSpeed = (refs.fileRecvSize - lastRecvSize) * 2;
         lastRecvSize = refs.fileRecvSize;
       }, 500);
+      dlStream = await createDlStream(refs.fileName as string, refs.fileSize, refs.dlMode);
       refs.status = Status.Transfering;
     },
-    (data: ArrayBuffer): number => {
-      const view: DataView = new DataView(data);
-
-      blobMap.set(view.getUint32(0), new Uint8Array(data.slice(4)));
+    (_order: number, data: ArrayBuffer): number => {
+      blobMap.set(_order, data);
       while (blobMap.has(order)) {
-        const blob: Uint8Array = blobMap.get(order) as Uint8Array;
+        const blob: ArrayBuffer = blobMap.get(order) as ArrayBuffer;
 
         refs.fileRecvSize += blob.byteLength;
-        writer.write(blobMap.get(order) as Uint8Array);
+        if (dlStream !== null) {
+          dlStream.write(blob);
+        }
         blobMap.delete(order);
         order++;
       }
@@ -160,7 +163,9 @@ async function init(): Promise<void> {
     },
     (): void => {
       refs.status = Status.Finished;
-      writer.close();
+      if (dlStream !== null) {
+        dlStream.close();
+      }
       clearInterval(handle);
       window.onbeforeunload = null;
       setTimeout((): void => {
@@ -184,22 +189,6 @@ defineExpose({
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex gap-4">
-      <AppButton
-        v-if="refs.status < Status.Transfering"
-        @click="startDownload"
-        class="border-green-500 hover:bg-green-500"
-        :disabled="refs.status < Status.WaitingAccept">
-        {{ $t('button.start_download') }}
-      </AppButton>
-      <AppButton
-        v-else
-        @click="abort"
-        class="border-red-500 hover:bg-red-500"
-        :disabled="refs.status === Status.Finished">
-        {{ $t('button.abort') }}
-      </AppButton>
-    </div>
     <div class="flex flex-col">
       <p>
         <b>{{ $t('status._') }}</b>
@@ -225,7 +214,7 @@ defineExpose({
         </span>
         <span
           v-else-if="refs.status === Status.WaitingAccept"
-          class="text-purple-500">{{ $t('status.wait_accept') }}
+          class="text-purple-500">{{ $t('status.wait_accept_recv') }}
         </span>
         <span
           v-else-if="refs.status === Status.Negotiating"
@@ -258,14 +247,31 @@ defineExpose({
         </p>
       </template>
       <template v-if="refs.status >= Status.Transfering">
-        <p>
-          <b>{{ $t('ui.progress') }}</b>
-          {{ (refs.fileRecvSize / refs.fileSize * 100).toFixed(1) }}%
-        </p>
         <p><b>{{ $t('ui.avg_speed') }}</b>{{ avgSpeedTxt }}</p>
         <p><b>{{ $t('ui.ins_speed') }}</b>{{ insSpeedTxt }}</p>
+        <ProgressBar
+            class="my-1"
+            color="bg-green-400"
+            :progress="refs.fileRecvSize / refs.fileSize * 100"/>
       </template>
     </div>
+    <DLModeSelector
+      v-if="refs.status === Status.WaitingAccept"
+      v-model:input="refs.dlMode"/>
+    <div class="flex gap-4">
+      <AppButton
+        v-if="refs.status === Status.WaitingAccept"
+        @click="startDownload"
+        class="border-green-500 hover:bg-green-500">
+        {{ $t('button.start_download') }}
+      </AppButton>
+      <AppButton
+        v-if="Status.Negotiating <= refs.status && refs.status < Status.Finished"
+        @click="abort"
+        class="border-red-500 hover:bg-red-500">
+        {{ $t('button.abort') }}
+      </AppButton>
+    </div>
     <p v-if="refs.error.length !== 0" class="font-bold max-w-[15rem] text-red-500">{{ refs.error }}</p>
   </div>
 </template>
diff --git a/frontend/components/Sender.vue b/frontend/components/Sender.vue
index 206a847..5b06d6b 100644
--- a/frontend/components/Sender.vue
+++ b/frontend/components/Sender.vue
@@ -165,26 +165,27 @@ function sendFile(): void {
   <div class="flex flex-col items-center gap-4">
     <div class="flex gap-4">
       <FileSelector
+        v-if="refs.status <= Status.Idle || refs.status === Status.Finished"
         @select="selectFile"
         class="border-green-500 hover:bg-green-500"
-        id="file-input"
-        :disabled="refs.status > Status.Idle">
+        id="file-input">
         {{ $t('button.select_file') }}
       </FileSelector>
-      <AppButton
-        v-if="refs.status === Status.Idle"
-        @click="sendFile"
-        class="border-blue-500 hover:bg-blue-500"
-        :disabled="refs.fileName === null">
-        {{ $t('button.send') }}
-      </AppButton>
-      <AppButton
-        v-else
-        @click="abort"
-        class="border-red-500 hover:bg-red-500"
-        :disabled="refs.status === Status.Error || refs.status === Status.Finished">
-        {{ $t('button.abort') }}
-      </AppButton>
+      <template v-if="refs.fileName !== null">
+        <AppButton
+          v-if="refs.status === Status.Idle"
+          @click="sendFile"
+          class="border-blue-500 hover:bg-blue-500"
+          :disabled="refs.fileName === null">
+          {{ $t('button.send') }}
+        </AppButton>
+        <AppButton
+          v-if="Status.Idle < refs.status && refs.status < Status.Finished"
+          @click="abort"
+          class="border-red-500 hover:bg-red-500">
+          {{ $t('button.abort') }}
+        </AppButton>
+      </template>
     </div>
     <div v-if="refs.fileName !== null" class="flex flex-col gap-2 items-center md:flex-row md:gap-4">
       <AppQRCode
@@ -192,58 +193,56 @@ function sendFile(): void {
         :data-url="refs.qrDataUrl"
         :share-link="refs.shareLink"/>
       <div class="flex flex-col">
-        <template v-if="refs.fileName !== null">
-          <div class="flex">
-            <b class="whitespace-pre-wrap">{{ $t('ui.file_name') }}</b>
-            <div
-              class="max-w-[10rem] overflow-hidden text-ellipsis whitespace-nowrap"
-              :title="refs.fileName">
-              {{ refs.fileName }}
-            </div>
+        <div class="flex">
+          <b class="whitespace-pre-wrap">{{ $t('ui.file_name') }}</b>
+          <div
+            class="max-w-[10rem] overflow-hidden text-ellipsis whitespace-nowrap"
+            :title="refs.fileName">
+            {{ refs.fileName }}
           </div>
-          <p>
-            <b>{{ $t('ui.file_size') }}</b>
-            <span :title="`${refs.fileSize} Byte(s)`">{{ fileSizeTxt }}</span>
-          </p>
-          <p>
-            <b>{{ $t('status._') }}</b>
-            <span
-              v-if="refs.status === Status.Error"
-              class="text-red-500">
-              {{ $t('status.error') }}
-            </span>
-            <span
-              v-else-if="refs.status === Status.Idle"
-              class="text-gray-400">
-              {{ $t('status.idle') }}
-            </span>
-            <span
-              v-else-if="refs.status === Status.ConnectSignal"
-              class="text-orange-500">
-              {{ $t('status.conn_signal') }}
-            </span>
-            <span
-              v-else-if="refs.status === Status.WaitingPeer"
-              class="text-cyan-500">
-              {{ $t('status.wait_peer') }}
-            </span>
-            <span
-              v-else-if="refs.status === Status.WaitingAccept"
-              class="text-purple-500">{{ $t('status.wait_accept') }}
-            </span>
-            <span
-              v-else-if="refs.status === Status.Negotiating"
-              class="text-yellow-500">
-              {{ $t('status.negotiate') }}
-            </span>
-            <span
-              v-else-if="refs.status === Status.Transfering"
-              class="text-blue-500">
-              {{ $t('status.transfer') }}
-            </span>
-            <span v-else class="text-green-500">{{ $t('status.finish') }}</span>
-          </p>
-        </template>
+        </div>
+        <p>
+          <b>{{ $t('ui.file_size') }}</b>
+          <span :title="`${refs.fileSize} Byte(s)`">{{ fileSizeTxt }}</span>
+        </p>
+        <p>
+          <b>{{ $t('status._') }}</b>
+          <span
+            v-if="refs.status === Status.Error"
+            class="text-red-500">
+            {{ $t('status.error') }}
+          </span>
+          <span
+            v-else-if="refs.status === Status.Idle"
+            class="text-gray-400">
+            {{ $t('status.idle') }}
+          </span>
+          <span
+            v-else-if="refs.status === Status.ConnectSignal"
+            class="text-orange-500">
+            {{ $t('status.conn_signal') }}
+          </span>
+          <span
+            v-else-if="refs.status === Status.WaitingPeer"
+            class="text-cyan-500">
+            {{ $t('status.wait_peer') }}
+          </span>
+          <span
+            v-else-if="refs.status === Status.WaitingAccept"
+            class="text-purple-500">{{ $t('status.wait_accept') }}
+          </span>
+          <span
+            v-else-if="refs.status === Status.Negotiating"
+            class="text-yellow-500">
+            {{ $t('status.negotiate') }}
+          </span>
+          <span
+            v-else-if="refs.status === Status.Transfering"
+            class="text-blue-500">
+            {{ $t('status.transfer') }}
+          </span>
+          <span v-else class="text-green-500">{{ $t('status.finish') }}</span>
+        </p>
         <p v-if="refs.selfId !== null">
           <b>{{ $t('ui.self_id') }}</b>{{ refs.selfId }}
         </p>
@@ -251,12 +250,12 @@ function sendFile(): void {
           <b>{{ $t('ui.peer_id') }}</b>{{ refs.peerId }}
         </p>
         <template v-if="refs.status >= Status.Transfering">
-          <p>
-            <b>{{ $t('ui.progress') }}</b>
-            {{ (refs.fileRecvSize / refs.fileSize * 100).toFixed(1) }}%
-          </p>
           <p><b>{{ $t('ui.avg_speed') }}</b>{{ avgSpeedTxt }}</p>
           <p><b>{{ $t('ui.ins_speed') }}</b>{{ insSpeedTxt }}</p>
+          <ProgressBar
+            class="my-1"
+            color="bg-green-400"
+            :progress="refs.fileRecvSize / refs.fileSize * 100"/>
         </template>
       </div>
     </div>
diff --git a/frontend/components/app/Footer.vue b/frontend/components/app/Footer.vue
index 9544e7a..ad18cc8 100644
--- a/frontend/components/app/Footer.vue
+++ b/frontend/components/app/Footer.vue
@@ -5,7 +5,7 @@ const localePath = useLocalePath();
 
 <template>
   <footer
-    class="absolute bottom-2 flex font-smiley gap-4 items-center justify-center w-full">
+    class="bottom-2 fixed flex font-smiley gap-4 items-center justify-center w-full">
     <NuxtLink
       class="transition-colors hover:text-blue-500"
       :to="localePath('/')">
diff --git a/frontend/components/app/Header.vue b/frontend/components/app/Header.vue
index 37df527..55d1a7c 100644
--- a/frontend/components/app/Header.vue
+++ b/frontend/components/app/Header.vue
@@ -4,9 +4,11 @@ const runtimeConfig = useRuntimeConfig();
 </script>
 
 <template>
-  <header class="absolute flex font-smiley gap-4 items-center select-none top-24">
-    <img class="h-16 w-16" draggable="false" src="/favicon.svg" />
-    <h1 class="font-bold text-4xl">P2P Transfer</h1>
-    <span class="absolute -bottom-2 right-2">{{ runtimeConfig.public.version }}</span>
+  <header class="flex font-smiley gap-4 items-center justify-center select-none">
+    <SvgoLogo class="h-16 w-16"/>
+    <h1 class="font-bold relative">
+      <span class="text-4xl">P2P Transfer</span>
+      <span class="absolute -bottom-5 right-2">{{ runtimeConfig.public.version }}</span>
+    </h1>
   </header>
 </template>
diff --git a/frontend/i18n.config.ts b/frontend/i18n.config.ts
new file mode 100644
index 0000000..356995e
--- /dev/null
+++ b/frontend/i18n.config.ts
@@ -0,0 +1,9 @@
+/// I18n config
+import type { I18nOptions } from '@nuxtjs/i18n';
+
+/* Export config */
+export default {
+  fallbackLocale: 'en',
+  legacy: false,
+  locale: 'en'
+} as I18nOptions;
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index eafbc25..eb1400f 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -9,6 +9,8 @@
     "send": "Send",
     "abort": "Abort",
     "click_to_copy": "Click to Copy Link",
+    "blob_mode": "Blob Mode",
+    "stream_mode": "Stream Mode",
     "start_download": "Start Download"
   },
   "ui": {
@@ -16,12 +18,13 @@
     "file_size": "File Size: ",
     "self_id": "Host ID: ",
     "peer_id": "Peer ID: ",
-    "progress": "Progress: ",
     "avg_speed": "Avg Speed: ",
     "ins_speed": "Ins Speed: ",
     "open_outside": "Please use external browser",
     "copy_ok": "Copied",
     "copy_fail": "Copy failed",
+    "blob_mode": "Better compatibility, temporarily store file in memory while transfering",
+    "stream_mode": "Best experience, some device not support",
     "home": "Home",
     "about": "About"
   },
@@ -31,6 +34,7 @@
     "conn_signal": "Connecting signal server",
     "wait_peer": "Waiting peer",
     "wait_accept": "Waiting accept",
+    "wait_accept_recv": "Waiting start to download",
     "negotiate": "Negotiating",
     "transfer": "Transfering",
     "finish": "Finished",
diff --git a/frontend/i18n/zh.json b/frontend/i18n/zh.json
index 61ffb80..5a992bd 100644
--- a/frontend/i18n/zh.json
+++ b/frontend/i18n/zh.json
@@ -9,6 +9,8 @@
     "send": "发送",
     "abort": "中止",
     "click_to_copy": "点击复制链接",
+    "blob_mode": "Blob 下载",
+    "stream_mode": "流式下载",
     "start_download": "开始下载"
   },
   "ui": {
@@ -16,12 +18,13 @@
     "file_size": "文件大小：",
     "self_id": "本机 ID：",
     "peer_id": "对等端 ID：",
-    "progress": "进度：",
     "avg_speed": "平均速度：",
     "ins_speed": "瞬时速度：",
     "open_outside": "请使用外置浏览器打开",
     "copy_ok": "已复制",
     "copy_fail": "复制失败",
+    "blob_mode": "兼容性好，传输时需要将文件临时存储在运行内存中",
+    "stream_mode": "体验最佳，部分设备不支持",
     "home": "主页",
     "about": "关于"
   },
@@ -31,6 +34,7 @@
     "conn_signal": "正在连接信令服务器",
     "wait_peer": "等待对等端连接",
     "wait_accept": "等待对等端同意下载",
+    "wait_accept_recv": "等待开始下载",
     "negotiate": "正在协商 P2P 连接",
     "transfer": "传输中",
     "finish": "完成",
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index ec7331b..d10d844 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -21,8 +21,13 @@ const { locale } = useI18n();
       <Meta content="/favicon.svg" property="og:image"/>
       <Link href="/favicon.svg" rel="icon" type="image/svg+xml"/>
     </Head>
-    <Body>
+    <Body class="bg-gray-50">
+      <ClientOnly>
+        <notifications position="top center"/>
+        <BlockLayer v-if="isInternalBrowser()"/>
+      </ClientOnly>
       <slot></slot>
+      <AppFooter/>
     </Body>
   </Html>
 </template>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index c089d07..f133f33 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -4,23 +4,27 @@ import pkg from './package.json';
 /* Export config */
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/i18n', '@nuxtjs/tailwindcss'],
+  modules: ['@nuxtjs/i18n', '@nuxtjs/tailwindcss', 'nuxt-svgo'],
   i18n: {
     defaultLocale: 'en',
-    detectBrowserLanguage: {},
+    detectBrowserLanguage: {
+      cookieKey: 'language',
+      redirectOn: 'all',
+      useCookie: true
+    },
     lazy: true,
     langDir: './i18n',
     locales: [
       {
         code: 'en',
-        iso: 'en-US',
         file: './en.json',
+        iso: 'en-US',
         name: 'English'
       },
       {
         code: 'zh',
-        iso: 'zh-CN',
         file: './zh.json',
+        iso: 'zh-CN',
         name: '中文'
       }
     ],
@@ -34,6 +38,9 @@ export default defineNuxtConfig({
       version: pkg.version
     }
   },
+  svgo: {
+    defaultImport: 'component'
+  },
   vite: {
     server: {
       proxy: {
diff --git a/frontend/package.json b/frontend/package.json
index da4f24a..e08c9c4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nuxt-app",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.2.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -16,11 +16,13 @@
     "@types/node": "^18.17.11",
     "@types/qrcode": "^1.5.1",
     "@types/streamsaver": "^2.0.1",
-    "express": "^4.18.2",
-    "nuxt": "^3.6.5"
+    "nuxt": "^3.7.0",
+    "nuxt-svgo": "^3.4.1",
+    "serve": "^14.2.1"
   },
   "dependencies": {
     "@kyvg/vue3-notification": "^3.0.1",
+    "js-base64": "^3.7.5",
     "qrcode": "^1.5.3",
     "socket.io-client": "^4.7.2",
     "streamsaver": "^2.0.6"
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 1e7ef15..505a75c 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -21,6 +21,7 @@ const refs = reactive({
 });
 const recvRef: Ref = ref();
 
+/* Functions */
 function init() {
   if (recvRef.value === undefined) {
     return;
@@ -42,17 +43,23 @@ onMounted((): void => {
 </script>
 
 <template>
-  <main class="flex flex-col items-center gap-4">
-    <BlockLayer v-if="refs.mode === Mode.Receive && isInternalBrowser()"/>
-    <Transition mode="out-in" @after-enter="init">
-      <LazyReceiver v-if="refs.mode === Mode.Receive" :peer-id="refs.peerId" ref="recvRef"/>
-      <LazySender v-else-if="refs.mode === Mode.Send"/>
-      <div
-        v-else
-        class="absolute animate-spin border-4 border-blue-500 border-r-transparent h-12 w-12 rounded-full">
-      </div>
-    </Transition>
-  </main>
+  <div
+    class="fixed flex flex-col gap-12 inset-0 items-center justify-center">
+    <AppHeader/>
+    <main class="flex flex-col items-center gap-4">
+      <Transition mode="out-in" @after-enter="init">
+        <LazyReceiver
+          v-if="refs.mode === Mode.Receive"
+          :peer-id="refs.peerId"
+          ref="recvRef"/>
+        <LazySender v-else-if="refs.mode === Mode.Send"/>
+        <div
+          v-else
+          class="absolute animate-spin border-4 border-blue-500 border-r-transparent h-12 w-12 rounded-full">
+        </div>
+      </Transition>
+    </main>
+  </div>
 </template>
 
 <style scoped>
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 6e1a9c3..f36ae0f 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   '@kyvg/vue3-notification':
     specifier: ^3.0.1
     version: 3.0.1(vue@3.3.4)
+  js-base64:
+    specifier: ^3.7.5
+    version: 3.7.5
   qrcode:
     specifier: ^1.5.3
     version: 1.5.3
@@ -21,7 +24,7 @@ dependencies:
 devDependencies:
   '@nuxt/devtools':
     specifier: latest
-    version: 0.8.0(nuxt@3.6.5)(vite@4.4.9)
+    version: 0.8.0(nuxt@3.7.0)(vite@4.4.9)
   '@nuxtjs/i18n':
     specifier: 8.0.0-rc.3
     version: 8.0.0-rc.3(vue@3.3.4)
@@ -37,12 +40,15 @@ devDependencies:
   '@types/streamsaver':
     specifier: ^2.0.1
     version: 2.0.1
-  express:
-    specifier: ^4.18.2
-    version: 4.18.2
   nuxt:
-    specifier: ^3.6.5
-    version: 3.6.5(@types/node@18.17.11)
+    specifier: ^3.7.0
+    version: 3.7.0(@types/node@18.17.11)
+  nuxt-svgo:
+    specifier: ^3.4.1
+    version: 3.4.1
+  serve:
+    specifier: ^14.2.1
+    version: 14.2.1
 
 packages:
 
@@ -320,8 +326,8 @@ packages:
       '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.11)
     dev: true
 
-  /@babel/standalone@7.22.11:
-    resolution: {integrity: sha512-PmHtNlX7ybzPKO5b5r+WSa8pEbntAaRR11FHs15pTkcKx3qFfjSwNFe0e1f7ewlEDVXtGjdPYBJTrrY2RLDzVA==}
+  /@babel/standalone@7.22.12:
+    resolution: {integrity: sha512-Od5EnOR/gvwwvLCaJCypkVW6C9PitK2tu/aHb+ZpPnwkVidmlJ+7jUf8YLm9BrNILfT9P8etZq/t6r1IrFauQw==}
     engines: {node: '>=6.9.0'}
     dev: true
 
@@ -1044,7 +1050,7 @@ packages:
       estree-walker: 2.0.2
       jsonc-eslint-parser: 1.4.1
       magic-string: 0.30.3
-      mlly: 1.4.0
+      mlly: 1.4.1
       source-map-js: 1.0.2
       vue-i18n: 9.3.0-beta.26(vue@3.3.4)
       yaml-eslint-parser: 0.3.2
@@ -1271,11 +1277,11 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
-  /@netlify/functions@2.0.1:
-    resolution: {integrity: sha512-YrgCmz078II0LKknXKj5NbtGBuzek1JC+ZYi4xHcLhZD+HIGlerlmkhnVydWVPoA7fdd2IeSUd9CFFL7bY+y5Q==}
+  /@netlify/functions@2.0.2:
+    resolution: {integrity: sha512-goWRtaIPUK/q47qLYtfGGj7HgJIRaT0snw7zZ0yeoNTfQfCRwQwvRrMAsXkCsCtq2N2Oo81L26SpkMxEQMk9hg==}
     engines: {node: '>=14.0.0'}
     dependencies:
-      '@netlify/serverless-functions-api': 1.7.1
+      '@netlify/serverless-functions-api': 1.7.3
       is-promise: 4.0.0
     dev: true
 
@@ -1284,8 +1290,8 @@ packages:
     engines: {node: ^14.16.0 || >=16.0.0}
     dev: true
 
-  /@netlify/serverless-functions-api@1.7.1:
-    resolution: {integrity: sha512-vF9g62n+BFfBXtWtmVBJ5debyMERVDtuLlMlKDPYBp6QjEuJnaggxczLlRofZ2mtsBXs7mAlna6gIcBswFLJJQ==}
+  /@netlify/serverless-functions-api@1.7.3:
+    resolution: {integrity: sha512-n6/7cJlSWvvbBlUOEAbkGyEld80S6KbG/ldQI9OhLfe1lTatgKmrTNIgqVNpaWpUdTgP2OHWFjmFBzkxxBWs5w==}
     engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
       '@netlify/node-cookies': 0.1.0
@@ -1374,16 +1380,16 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: true
 
-  /@nuxt/devtools-kit@0.8.0(nuxt@3.6.5)(vite@4.4.9):
+  /@nuxt/devtools-kit@0.8.0(nuxt@3.7.0)(vite@4.4.9):
     resolution: {integrity: sha512-zHwotLFwmYPFDg0JHyInn0L3i2gZK24JYDfgOzqBuvCD/Q3ytQVyAMrX2Mp4iIrHjwToZBJ0dlyV+UYXCiWwSg==}
     peerDependencies:
       nuxt: ^3.6.5
       vite: '*'
     dependencies:
-      '@nuxt/kit': 3.6.5
-      '@nuxt/schema': 3.6.5
+      '@nuxt/kit': 3.7.0
+      '@nuxt/schema': 3.7.0
       execa: 7.2.0
-      nuxt: 3.6.5(@types/node@18.17.11)
+      nuxt: 3.7.0(@types/node@18.17.11)
       vite: 4.4.9(@types/node@18.17.11)
     transitivePeerDependencies:
       - rollup
@@ -1407,16 +1413,16 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@nuxt/devtools@0.8.0(nuxt@3.6.5)(vite@4.4.9):
+  /@nuxt/devtools@0.8.0(nuxt@3.7.0)(vite@4.4.9):
     resolution: {integrity: sha512-w48eqZ52NLVB8C0Q1E/eY0xsokMr9diOaxUptO08UYNhyj+MKKBrhIBTePYO7GlxabXOaHM62zi+iN8AT1qXoA==}
     hasBin: true
     peerDependencies:
       nuxt: ^3.6.5
       vite: '*'
     dependencies:
-      '@nuxt/devtools-kit': 0.8.0(nuxt@3.6.5)(vite@4.4.9)
+      '@nuxt/devtools-kit': 0.8.0(nuxt@3.7.0)(vite@4.4.9)
       '@nuxt/devtools-wizard': 0.8.0
-      '@nuxt/kit': 3.6.5
+      '@nuxt/kit': 3.7.0
       birpc: 0.2.13
       boxen: 7.1.1
       consola: 3.2.3
@@ -1433,7 +1439,7 @@ packages:
       launch-editor: 2.6.0
       local-pkg: 0.4.3
       magicast: 0.2.10
-      nuxt: 3.6.5(@types/node@18.17.11)
+      nuxt: 3.7.0(@types/node@18.17.11)
       nypm: 0.2.2
       pacote: 15.2.0
       pathe: 1.1.1
@@ -1445,7 +1451,7 @@ packages:
       sirv: 2.0.3
       unimport: 3.2.0(rollup@3.28.1)
       vite: 4.4.9(@types/node@18.17.11)
-      vite-plugin-inspect: 0.7.38(@nuxt/kit@3.6.5)(vite@4.4.9)
+      vite-plugin-inspect: 0.7.38(@nuxt/kit@3.7.0)(vite@4.4.9)
       vite-plugin-vue-inspector: 3.6.0(vite@4.4.9)
       wait-on: 7.0.1
       which: 3.0.1
@@ -1459,11 +1465,11 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@nuxt/kit@3.6.5:
-    resolution: {integrity: sha512-uBI5I2Zx6sk+vRHU+nBmifwxg/nyXCGZ1g5hUKrUfgv1ZfiKB8JkN5T9iRoduDOaqbwM6XSnEl1ja73iloDcrw==}
+  /@nuxt/kit@3.7.0:
+    resolution: {integrity: sha512-bsPRb2NTLHRacjyybhhA3pZFIqo2pxB6bcP4FQDuzlGzVTI5PtJzbfNpkmQC7q+LZt8K0pNlxKVGisDvZctk6w==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
-      '@nuxt/schema': 3.6.5
+      '@nuxt/schema': 3.7.0
       c12: 1.4.2
       consola: 3.2.3
       defu: 6.1.2
@@ -1472,11 +1478,12 @@ packages:
       ignore: 5.2.4
       jiti: 1.19.3
       knitwork: 1.0.0
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
       pkg-types: 1.0.3
       scule: 1.0.0
       semver: 7.5.4
+      ufo: 1.3.0
       unctx: 2.3.1
       unimport: 3.2.0(rollup@3.28.1)
       untyped: 1.4.0
@@ -1500,10 +1507,11 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/schema@3.6.5:
-    resolution: {integrity: sha512-UPUnMB0W5TZ/Pi1fiF71EqIsPlj8LGZqzhSf8wOeh538KHwxbA9r7cuvEUU92eXRksOZaylbea3fJxZWhOITVw==}
+  /@nuxt/schema@3.7.0:
+    resolution: {integrity: sha512-fNRAubny1x6rIibm/HcacnEGeAQri/FkJ5ei24aY4YjQ12+xDfi7bljfFr6C2+CrEGc1beYd4OQcUqXqEpz5+g==}
     engines: {node: ^14.18.0 || >=16.10.0}
     dependencies:
+      '@nuxt/ui-templates': 1.3.1
       defu: 6.1.2
       hookable: 5.5.3
       pathe: 1.1.1
@@ -1522,7 +1530,7 @@ packages:
     resolution: {integrity: sha512-Cj+4sXjO5pZNW2sX7Y+djYpf4pZwgYF3rV/YHLWIOq9nAjo2UcDXjh1z7qnhkoUkvJN3lHnvhnCNhfAioe6k/A==}
     hasBin: true
     dependencies:
-      '@nuxt/kit': 3.6.5
+      '@nuxt/kit': 3.7.0
       chalk: 5.3.0
       ci-info: 3.8.0
       consola: 3.2.3
@@ -1537,7 +1545,7 @@ packages:
       mri: 1.2.0
       nanoid: 4.0.2
       node-fetch: 3.3.2
-      ofetch: 1.3.2
+      ofetch: 1.3.3
       parse-git-config: 3.0.0
       pathe: 1.1.1
       rc9: 2.1.1
@@ -1551,22 +1559,22 @@ packages:
     resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
     dev: true
 
-  /@nuxt/vite-builder@3.6.5(@types/node@18.17.11)(vue@3.3.4):
-    resolution: {integrity: sha512-pwSpt257ApCp3XWUs8vrC7X9QHeHUv5PbbIR3+5w0n5f95XPNOQWDJa2fTPX/H6oaRJCPYAsBPqiQhQ7qW/NZQ==}
+  /@nuxt/vite-builder@3.7.0(@types/node@18.17.11)(vue@3.3.4):
+    resolution: {integrity: sha512-bRJy3KarHrFm/xLGHoHeZyqI/h6c4UFRCF5ngRZ/R9uebJEHuL4UhAioxDLTFu7D0vEeK7XaDgx6+NPLhBg51g==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
       vue: ^3.3.4
     dependencies:
-      '@nuxt/kit': 3.6.5
+      '@nuxt/kit': 3.7.0
       '@rollup/plugin-replace': 5.0.2(rollup@3.28.1)
-      '@vitejs/plugin-vue': 4.3.3(vite@4.3.9)(vue@3.3.4)
-      '@vitejs/plugin-vue-jsx': 3.0.2(vite@4.3.9)(vue@3.3.4)
+      '@vitejs/plugin-vue': 4.3.3(vite@4.4.9)(vue@3.3.4)
+      '@vitejs/plugin-vue-jsx': 3.0.2(vite@4.4.9)(vue@3.3.4)
       autoprefixer: 10.4.15(postcss@8.4.28)
       clear: 0.1.0
       consola: 3.2.3
       cssnano: 6.0.1(postcss@8.4.28)
       defu: 6.1.2
-      esbuild: 0.18.20
+      esbuild: 0.19.2
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       externality: 1.0.2
@@ -1575,7 +1583,7 @@ packages:
       h3: 1.8.0
       knitwork: 1.0.0
       magic-string: 0.30.3
-      mlly: 1.4.0
+      mlly: 1.4.1
       ohash: 1.1.3
       pathe: 1.1.1
       perfect-debounce: 1.0.0
@@ -1588,15 +1596,16 @@ packages:
       strip-literal: 1.3.0
       ufo: 1.3.0
       unplugin: 1.4.0
-      vite: 4.3.9(@types/node@18.17.11)
+      vite: 4.4.9(@types/node@18.17.11)
       vite-node: 0.33.0(@types/node@18.17.11)
-      vite-plugin-checker: 0.6.2(vite@4.3.9)
+      vite-plugin-checker: 0.6.2(vite@4.4.9)
       vue: 3.3.4
-      vue-bundle-renderer: 1.0.3
+      vue-bundle-renderer: 2.0.0
     transitivePeerDependencies:
       - '@types/node'
       - eslint
       - less
+      - lightningcss
       - meow
       - optionator
       - rollup
@@ -1619,7 +1628,7 @@ packages:
       '@intlify/shared': 9.3.0-beta.26
       '@intlify/unplugin-vue-i18n': 0.12.3(vue-i18n@9.3.0-beta.26)
       '@mizchi/sucrase': 4.1.0
-      '@nuxt/kit': 3.6.5
+      '@nuxt/kit': 3.7.0
       '@vue/compiler-sfc': 3.3.4
       cookie-es: 1.0.0
       debug: 4.3.4
@@ -1629,7 +1638,7 @@ packages:
       js-cookie: 3.0.5
       knitwork: 1.0.0
       magic-string: 0.27.0
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
       pkg-types: 1.0.3
       ufo: 1.3.0
@@ -1661,7 +1670,7 @@ packages:
   /@nuxtjs/tailwindcss@6.8.0(webpack@5.88.2):
     resolution: {integrity: sha512-jzuvD1nfA2BPnSbHtKK0aiI51ndMa7lNGL1iDEFuEPsltzilZ9ED7zOP6niGTrImg0n5Yt4GEJpixi6yWwp9Hw==}
     dependencies:
-      '@nuxt/kit': 3.6.5
+      '@nuxt/kit': 3.7.0
       '@nuxt/postcss8': 1.1.3(webpack@5.88.2)
       autoprefixer: 10.4.15(postcss@8.4.28)
       chokidar: 3.5.3
@@ -1776,6 +1785,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
+      napi-wasm: 1.1.0
     dev: true
     bundledDependencies:
       - napi-wasm
@@ -2159,14 +2169,14 @@ packages:
       glob: 7.2.3
       graceful-fs: 4.2.11
       micromatch: 4.0.5
-      node-gyp-build: 4.6.0
+      node-gyp-build: 4.6.1
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.0.2(vite@4.3.9)(vue@3.3.4):
+  /@vitejs/plugin-vue-jsx@3.0.2(vite@4.4.9)(vue@3.3.4):
     resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -2176,20 +2186,20 @@ packages:
       '@babel/core': 7.22.11
       '@babel/plugin-transform-typescript': 7.22.11(@babel/core@7.22.11)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.22.11)
-      vite: 4.3.9(@types/node@18.17.11)
+      vite: 4.4.9(@types/node@18.17.11)
       vue: 3.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@4.3.3(vite@4.3.9)(vue@3.3.4):
+  /@vitejs/plugin-vue@4.3.3(vite@4.4.9)(vue@3.3.4):
     resolution: {integrity: sha512-ssxyhIAZqB0TrpUg6R0cBpCuMk9jTIlO1GNSKKQD6S8VjnXi6JXKfUXjSsxey9IwQiaRGsO1WnW9Rkl1L6AJVw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9(@types/node@18.17.11)
+      vite: 4.4.9(@types/node@18.17.11)
       vue: 3.3.4
     dev: true
 
@@ -2427,6 +2437,10 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
+  /@zeit/schemas@2.29.0:
+    resolution: {integrity: sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==}
+    dev: true
+
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
@@ -2517,6 +2531,15 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ajv@8.11.0:
+    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
   /ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
     dependencies:
@@ -2651,10 +2674,6 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
-  /array-flatten@1.1.1:
-    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
-    dev: true
-
   /assert@2.0.0:
     resolution: {integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==}
     dependencies:
@@ -2721,7 +2740,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.10
-      caniuse-lite: 1.0.30001522
+      caniuse-lite: 1.0.30001523
       fraction.js: 4.2.1
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -2790,30 +2809,24 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
-  /body-parser@1.20.1:
-    resolution: {integrity: sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
-      http-errors: 2.0.0
-      iconv-lite: 0.4.24
-      on-finished: 2.4.1
-      qs: 6.11.0
-      raw-body: 2.5.1
-      type-is: 1.6.18
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
 
+  /boxen@7.0.0:
+    resolution: {integrity: sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 7.0.1
+      chalk: 5.3.0
+      cli-boxes: 3.0.0
+      string-width: 5.1.2
+      type-fest: 2.19.0
+      widest-line: 4.0.1
+      wrap-ansi: 8.1.0
+    dev: true
+
   /boxen@7.1.1:
     resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
     engines: {node: '>=14.16'}
@@ -2860,8 +2873,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001522
-      electron-to-chromium: 1.4.502
+      caniuse-lite: 1.0.30001523
+      electron-to-chromium: 1.4.503
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
     dev: true
@@ -2921,8 +2934,8 @@ packages:
       streamsearch: 1.1.0
     dev: true
 
-  /bytes@3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+  /bytes@3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
     dev: true
 
@@ -2934,7 +2947,7 @@ packages:
       dotenv: 16.3.1
       giget: 1.1.2
       jiti: 1.19.3
-      mlly: 1.4.0
+      mlly: 1.4.1
       ohash: 1.1.3
       pathe: 1.1.1
       perfect-debounce: 1.0.0
@@ -3011,13 +3024,20 @@ packages:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
       browserslist: 4.21.10
-      caniuse-lite: 1.0.30001522
+      caniuse-lite: 1.0.30001523
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
 
-  /caniuse-lite@1.0.30001522:
-    resolution: {integrity: sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==}
+  /caniuse-lite@1.0.30001523:
+    resolution: {integrity: sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==}
+    dev: true
+
+  /chalk-template@0.4.0:
+    resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      chalk: 4.1.2
     dev: true
 
   /chalk@2.4.2:
@@ -3037,6 +3057,11 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chalk@5.0.1:
+    resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: true
+
   /chalk@5.3.0:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
@@ -3213,6 +3238,28 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  /compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
+  /compression@1.7.4:
+    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -3226,6 +3273,11 @@ packages:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
     dev: true
 
+  /content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -3246,15 +3298,6 @@ packages:
     resolution: {integrity: sha512-mWYvfOLrfEc996hlKcdABeIiPHUPC6DM2QYZdGGOvhOTbA3tjm2eBwqlJpoFdjC89NI4Qt6h0Pu06Mp+1Pj5OQ==}
     dev: true
 
-  /cookie-signature@1.0.6:
-    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
-    dev: true
-
-  /cookie@0.5.0:
-    resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
-    engines: {node: '>= 0.6'}
-    dev: true
-
   /cookies@0.8.0:
     resolution: {integrity: sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==}
     engines: {node: '>= 0.8'}
@@ -3542,6 +3585,11 @@ packages:
     resolution: {integrity: sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==}
     dev: true
 
+  /deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+    dev: true
+
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -3714,8 +3762,8 @@ packages:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
 
-  /electron-to-chromium@1.4.502:
-    resolution: {integrity: sha512-xqeGw3Gr6o3uyHy/yKjdnDQHY2RQvXcGC2cfHjccK1IGkH6cX1WQBN8EeC/YpwPhGkBaikDTecJ8+ssxSVRQlw==}
+  /electron-to-chromium@1.4.503:
+    resolution: {integrity: sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA==}
     dev: true
 
   /emoji-regex@8.0.0:
@@ -4062,54 +4110,30 @@ packages:
       strip-final-newline: 3.0.0
     dev: true
 
-  /exponential-backoff@3.1.1:
-    resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
+  /execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.1.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
     dev: true
 
-  /express@4.18.2:
-    resolution: {integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==}
-    engines: {node: '>= 0.10.0'}
-    dependencies:
-      accepts: 1.3.8
-      array-flatten: 1.1.1
-      body-parser: 1.20.1
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookie: 0.5.0
-      cookie-signature: 1.0.6
-      debug: 2.6.9
-      depd: 2.0.0
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 1.2.0
-      fresh: 0.5.2
-      http-errors: 2.0.0
-      merge-descriptors: 1.0.1
-      methods: 1.1.2
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      path-to-regexp: 0.1.7
-      proxy-addr: 2.0.7
-      qs: 6.11.0
-      range-parser: 1.2.1
-      safe-buffer: 5.2.1
-      send: 0.18.0
-      serve-static: 1.15.0
-      setprototypeof: 1.2.0
-      statuses: 2.0.1
-      type-is: 1.6.18
-      utils-merge: 1.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
+  /exponential-backoff@3.1.1:
+    resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
     dev: true
 
   /externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
     dependencies:
       enhanced-resolve: 5.15.0
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
       ufo: 1.3.0
     dev: true
@@ -4144,6 +4168,12 @@ packages:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
     dev: true
 
+  /fast-url-parser@1.1.3:
+    resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
+    dependencies:
+      punycode: 1.4.1
+    dev: true
+
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -4190,21 +4220,6 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
-  /finalhandler@1.2.0:
-    resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      debug: 2.6.9
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.1
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -4258,11 +4273,6 @@ packages:
       fetch-blob: 3.2.0
     dev: true
 
-  /forwarded@0.2.0:
-    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
-    engines: {node: '>= 0.6'}
-    dev: true
-
   /fraction.js@4.2.1:
     resolution: {integrity: sha512-/KxoyCnPM0GwYI4NN0Iag38Tqt+od3/mLuguepLgCAKPn0ZhC544nssAW0tG2/00zXEYl9W+7hwAIpLHo6Oc7Q==}
     dev: true
@@ -4389,6 +4399,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+    dev: true
+
   /get-tsconfig@4.7.0:
     resolution: {integrity: sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==}
     dependencies:
@@ -4541,7 +4556,7 @@ packages:
       radix3: 1.1.0
       ufo: 1.3.0
       uncrypto: 0.1.3
-      unenv: 1.7.3
+      unenv: 1.7.4
     dev: true
 
   /has-flag@3.0.0:
@@ -4702,19 +4717,17 @@ packages:
     engines: {node: '>=14.18.0'}
     dev: true
 
+  /human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+    dev: true
+
   /humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
     dependencies:
       ms: 2.1.3
     dev: true
 
-  /iconv-lite@0.4.24:
-    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      safer-buffer: 2.1.2
-    dev: true
-
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -4817,11 +4830,6 @@ packages:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: true
 
-  /ipaddr.js@1.9.1:
-    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
-    engines: {node: '>= 0.10'}
-    dev: true
-
   /iron-webcrypto@0.7.1:
     resolution: {integrity: sha512-K/UmlEhPCPXEHV5hAtH5C0tI5JnFuOrv4yO/j7ODPl3HaiiHBLbOLTde+ieUaAyfCATe4LoAnclyF+hmSCOVmQ==}
     dev: true
@@ -4952,6 +4960,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-port-reachable@4.0.0:
+    resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
   /is-primitive@3.0.1:
     resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
     engines: {node: '>=0.10.0'}
@@ -5043,6 +5056,10 @@ packages:
       '@sideway/pinpoint': 2.0.0
     dev: true
 
+  /js-base64@3.7.5:
+    resolution: {integrity: sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==}
+    dev: false
+
   /js-cookie@3.0.5:
     resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
     engines: {node: '>=14'}
@@ -5078,6 +5095,10 @@ packages:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
+  /json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -5238,11 +5259,11 @@ packages:
       h3: 1.8.0
       http-shutdown: 1.2.2
       jiti: 1.19.3
-      mlly: 1.4.0
+      mlly: 1.4.1
       node-forge: 1.3.1
       pathe: 1.1.1
       ufo: 1.3.0
-      untun: 0.1.1
+      untun: 0.1.2
       uqr: 0.1.2
     dev: true
 
@@ -5425,10 +5446,6 @@ packages:
       readable-stream: 2.3.8
     dev: true
 
-  /merge-descriptors@1.0.1:
-    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
-    dev: true
-
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
@@ -5451,11 +5468,23 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime-db@1.33.0:
+    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
     dev: true
 
+  /mime-types@2.1.18:
+    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.33.0
+    dev: true
+
   /mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -5491,6 +5520,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
   /minimatch@3.0.8:
     resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
     dependencies:
@@ -5605,8 +5639,8 @@ packages:
     hasBin: true
     dev: true
 
-  /mlly@1.4.0:
-    resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
+  /mlly@1.4.1:
+    resolution: {integrity: sha512-SCDs78Q2o09jiZiE2WziwVBEqXQ02XkGdUy45cbJf+BpYRIjArXRJ1Wbowxkb+NaM9DWvS3UC9GiO/6eqvQ/pg==}
     dependencies:
       acorn: 8.10.0
       pathe: 1.1.1
@@ -5654,6 +5688,10 @@ packages:
     hasBin: true
     dev: true
 
+  /napi-wasm@1.1.0:
+    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+    dev: true
+
   /negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -5663,13 +5701,13 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
-  /nitropack@2.6.0:
-    resolution: {integrity: sha512-swhwjrNz0Zc5pBBrL3jdd4v1aJKNv0XbjCk1OreOm0zRbP8WxreGP5sAGpwDVpMH9mpIxyz5A5OSBzKa2lkkuQ==}
+  /nitropack@2.6.1:
+    resolution: {integrity: sha512-BoVM7nWx/S5S7TUU3z0DqiY/VVIHu6zng3vJyGMjESIW/FDhc3ecPDJRkNzdUXG5zZ3Ex7ZNll2AsdNHZImcpA==}
     engines: {node: ^16.11.0 || >=17.0.0}
     hasBin: true
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.0
-      '@netlify/functions': 2.0.1
+      '@netlify/functions': 2.0.2
       '@rollup/plugin-alias': 5.0.0(rollup@3.28.1)
       '@rollup/plugin-commonjs': 25.0.4(rollup@3.28.1)
       '@rollup/plugin-inject': 5.0.3(rollup@3.28.1)
@@ -5707,10 +5745,10 @@ packages:
       listhen: 1.4.0
       magic-string: 0.30.3
       mime: 3.0.0
-      mlly: 1.4.0
+      mlly: 1.4.1
       mri: 1.2.0
       node-fetch-native: 1.4.0
-      ofetch: 1.3.2
+      ofetch: 1.3.3
       ohash: 1.1.3
       openapi-typescript: 6.5.3
       pathe: 1.1.1
@@ -5728,7 +5766,7 @@ packages:
       ufo: 1.3.0
       uncrypto: 0.1.3
       unctx: 2.3.1
-      unenv: 1.7.3
+      unenv: 1.7.4
       unimport: 3.2.0(rollup@3.28.1)
       unstorage: 1.9.0
     transitivePeerDependencies:
@@ -5786,8 +5824,8 @@ packages:
     engines: {node: '>= 6.13.0'}
     dev: true
 
-  /node-gyp-build@4.6.0:
-    resolution: {integrity: sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==}
+  /node-gyp-build@4.6.1:
+    resolution: {integrity: sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ==}
     hasBin: true
     dev: true
 
@@ -5951,16 +5989,39 @@ packages:
       boolbase: 1.0.0
     dev: true
 
-  /nuxi@3.6.5:
-    resolution: {integrity: sha512-4XEXYz71UiWWiKC1/cJCzqRSUEImYRmjcvKpSsBKMU58ALYVSx5KIoas5SwLO8tEKO5BS4DAe4u7MYix7hfuHQ==}
+  /nuxi@3.7.0:
+    resolution: {integrity: sha512-FZEwNCGeEdE+CyKCoThZm+Lv+u4TnbClTyYvvby3a2joK5t8nc7upNiZ7hsd+xoOeNuZW7CZHsQp9szJm2ev9Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /nuxt@3.6.5(@types/node@18.17.11):
-    resolution: {integrity: sha512-0A7V8B1HrIXX9IlqPc2w+5ZPXi+7MYa9QVhtuGYuLvjRKoSFANhCoMPRP6pKdoxigM1MBxhLue2VmHA/VbtJCw==}
+  /nuxt-svgo@3.4.1:
+    resolution: {integrity: sha512-wIxSfHVzmFN6+Vp4n3CVJAmxYRIbZlFDjg4K3M8LQ+RPIeNV2mAIBADnAx6JB2NrJy1Jwrt9xBNqXHHsS6qjkw==}
+    peerDependencies:
+      svgo-loader: ^4.0.0
+      vue-loader: ^17.0.0
+      vue-svg-loader: 0.17.0-beta.2
+    peerDependenciesMeta:
+      svgo-loader:
+        optional: true
+      vue-loader:
+        optional: true
+      vue-svg-loader:
+        optional: true
+    dependencies:
+      '@nuxt/kit': 3.7.0
+      '@vue/compiler-sfc': 3.3.4
+      mini-svg-data-uri: 1.4.4
+      svgo: 3.0.2
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
+  /nuxt@3.7.0(@types/node@18.17.11):
+    resolution: {integrity: sha512-y0/xHYqwuJt20r26xezjpr74FLWR144dMpwSxZ/O2XXUrQUnyO7vHm3fEY4vi+miKbf343YMH5B78GXAELO/Vw==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
     peerDependencies:
@@ -5969,14 +6030,17 @@ packages:
     peerDependenciesMeta:
       '@parcel/watcher':
         optional: true
+      '@types/node':
+        optional: true
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/kit': 3.6.5
-      '@nuxt/schema': 3.6.5
+      '@nuxt/kit': 3.7.0
+      '@nuxt/schema': 3.7.0
       '@nuxt/telemetry': 2.4.1
       '@nuxt/ui-templates': 1.3.1
-      '@nuxt/vite-builder': 3.6.5(@types/node@18.17.11)(vue@3.3.4)
+      '@nuxt/vite-builder': 3.7.0(@types/node@18.17.11)(vue@3.3.4)
       '@types/node': 18.17.11
+      '@unhead/dom': 1.3.7
       '@unhead/ssr': 1.3.7
       '@unhead/vue': 1.3.7(vue@3.3.4)
       '@vue/shared': 3.3.4
@@ -5987,7 +6051,7 @@ packages:
       defu: 6.1.2
       destr: 2.0.1
       devalue: 4.3.2
-      esbuild: 0.18.20
+      esbuild: 0.19.2
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fs-extra: 11.1.1
@@ -5997,30 +6061,31 @@ packages:
       jiti: 1.19.3
       klona: 2.0.6
       knitwork: 1.0.0
-      local-pkg: 0.4.3
       magic-string: 0.30.3
-      mlly: 1.4.0
-      nitropack: 2.6.0
-      nuxi: 3.6.5
-      nypm: 0.2.2
-      ofetch: 1.3.2
+      mlly: 1.4.1
+      nitropack: 2.6.1
+      nuxi: 3.7.0
+      nypm: 0.3.1
+      ofetch: 1.3.3
       ohash: 1.1.3
       pathe: 1.1.1
       perfect-debounce: 1.0.0
+      pkg-types: 1.0.3
       prompts: 2.4.2
       scule: 1.0.0
+      std-env: 3.4.3
       strip-literal: 1.3.0
       ufo: 1.3.0
       ultrahtml: 1.3.0
       uncrypto: 0.1.3
       unctx: 2.3.1
-      unenv: 1.7.3
+      unenv: 1.7.4
       unimport: 3.2.0(rollup@3.28.1)
       unplugin: 1.4.0
       unplugin-vue-router: 0.6.4(vue-router@4.2.4)(vue@3.3.4)
       untyped: 1.4.0
       vue: 3.3.4
-      vue-bundle-renderer: 1.0.3
+      vue-bundle-renderer: 2.0.0
       vue-devtools-stub: 0.1.0
       vue-router: 4.2.4(vue@3.3.4)
     transitivePeerDependencies:
@@ -6038,6 +6103,7 @@ packages:
       - eslint
       - idb-keyval
       - less
+      - lightningcss
       - meow
       - optionator
       - rollup
@@ -6060,6 +6126,14 @@ packages:
       execa: 7.2.0
     dev: true
 
+  /nypm@0.3.1:
+    resolution: {integrity: sha512-WbyW4kp5TEIchdfdAUW4PdFlxl508nPAJsZml0ONk+A29vNHSW+3HEq3OmLvbDWYZrSVZ+Ios++7D/ENnv1YlA==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    dependencies:
+      execa: 8.0.1
+      ufo: 1.3.0
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -6070,10 +6144,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: true
-
   /object-is@1.1.5:
     resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
     engines: {node: '>= 0.4'}
@@ -6087,8 +6157,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /ofetch@1.3.2:
-    resolution: {integrity: sha512-XphiqMCUugscBfS7EjEfe8s3Hb5kfrTqdk9QAYl9z/wvhI3g97EpQdldqd0zAWqQXInHEqkRBQ08reMFHQwjDA==}
+  /ofetch@1.3.3:
+    resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
     dependencies:
       destr: 2.0.1
       node-fetch-native: 1.4.0
@@ -6106,6 +6176,11 @@ packages:
       ee-first: 1.1.1
     dev: true
 
+  /on-headers@1.0.2:
+    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -6282,6 +6357,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /path-is-inside@1.0.2:
+    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
+    dev: true
+
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -6304,8 +6383,8 @@ packages:
       minipass: 7.0.3
     dev: true
 
-  /path-to-regexp@0.1.7:
-    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
+  /path-to-regexp@2.2.1:
+    resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
     dev: true
 
   /path-to-regexp@6.2.1:
@@ -6368,7 +6447,7 @@ packages:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
       jsonc-parser: 3.2.0
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
     dev: true
 
@@ -6894,18 +6973,14 @@ packages:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
     dev: true
 
-  /proxy-addr@2.0.7:
-    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
-    engines: {node: '>= 0.10'}
-    dependencies:
-      forwarded: 0.2.0
-      ipaddr.js: 1.9.1
-    dev: true
-
   /prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     dev: true
 
+  /punycode@1.4.1:
+    resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
+    dev: true
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -6922,13 +6997,6 @@ packages:
       yargs: 15.4.1
     dev: false
 
-  /qs@6.11.0:
-    resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
-    engines: {node: '>=0.6'}
-    dependencies:
-      side-channel: 1.0.4
-    dev: true
-
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -6943,19 +7011,14 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+  /range-parser@1.2.0:
+    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
     engines: {node: '>= 0.6'}
     dev: true
 
-  /raw-body@2.5.1:
-    resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.0
-      iconv-lite: 0.4.24
-      unpipe: 1.0.0
+  /range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
     dev: true
 
   /rc9@2.1.1:
@@ -6966,6 +7029,16 @@ packages:
       flat: 5.0.2
     dev: true
 
+  /rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+    dev: true
+
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
@@ -7047,6 +7120,20 @@ packages:
       redis-errors: 1.2.0
     dev: true
 
+  /registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+    dev: true
+
+  /registry-url@3.1.0:
+    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      rc: 1.2.8
+    dev: true
+
   /replace-in-file@6.3.5:
     resolution: {integrity: sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==}
     engines: {node: '>=10'}
@@ -7061,6 +7148,11 @@ packages:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
 
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
     dev: false
@@ -7169,6 +7261,7 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     requiresBuild: true
     dev: true
+    optional: true
 
   /schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
@@ -7230,6 +7323,19 @@ packages:
       randombytes: 2.1.0
     dev: true
 
+  /serve-handler@6.1.5:
+    resolution: {integrity: sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==}
+    dependencies:
+      bytes: 3.0.0
+      content-disposition: 0.5.2
+      fast-url-parser: 1.1.3
+      mime-types: 2.1.18
+      minimatch: 3.1.2
+      path-is-inside: 1.0.2
+      path-to-regexp: 2.2.1
+      range-parser: 1.2.0
+    dev: true
+
   /serve-placeholder@2.0.1:
     resolution: {integrity: sha512-rUzLlXk4uPFnbEaIz3SW8VISTxMuONas88nYWjAWaM2W9VDbt9tyFOr3lq8RhVOFrT3XISoBw8vni5una8qMnQ==}
     dependencies:
@@ -7248,6 +7354,26 @@ packages:
       - supports-color
     dev: true
 
+  /serve@14.2.1:
+    resolution: {integrity: sha512-48er5fzHh7GCShLnNyPBRPEjs2I6QBozeGr02gaacROiyS/8ARADlj595j39iZXAqBbJHH/ivJJyPRWY9sQWZA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+    dependencies:
+      '@zeit/schemas': 2.29.0
+      ajv: 8.11.0
+      arg: 5.0.2
+      boxen: 7.0.0
+      chalk: 5.0.1
+      chalk-template: 0.4.0
+      clipboardy: 3.0.0
+      compression: 1.7.4
+      is-port-reachable: 4.0.0
+      serve-handler: 6.1.5
+      update-check: 1.5.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -7275,14 +7401,6 @@ packages:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
     dev: true
 
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
-    dev: true
-
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
@@ -7511,6 +7629,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /strip-literal@1.3.0:
     resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
     dependencies:
@@ -7870,8 +7993,8 @@ packages:
       busboy: 1.6.0
     dev: true
 
-  /unenv@1.7.3:
-    resolution: {integrity: sha512-5NGaBSP0acq5FAnjw9m6sA/QaImYkEjpYXPc99l/KUIb1qbxki1PSvX3ZNnK3pWIC2XwIHrOul2P7FiHyWgeXA==}
+  /unenv@1.7.4:
+    resolution: {integrity: sha512-fjYsXYi30It0YCQYqLOcT6fHfMXsBr2hw9XC7ycf8rTG7Xxpe3ZssiqUnD0khrjiZEmkBXWLwm42yCSCH46fMw==}
     dependencies:
       consola: 3.2.3
       defu: 6.1.2
@@ -7897,7 +8020,7 @@ packages:
       fast-glob: 3.3.1
       local-pkg: 0.4.3
       magic-string: 0.30.3
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
       pkg-types: 1.0.3
       scule: 1.0.0
@@ -7926,11 +8049,6 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unpipe@1.0.0:
-    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
-    engines: {node: '>= 0.8'}
-    dev: true
-
   /unplugin-vue-router@0.6.4(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-9THVhhtbVFxbsIibjK59oPwMI1UCxRWRPX7azSkTUABsxovlOXJys5SJx0kd/0oKIqNJuYgkRfAgPuO77SqCOg==}
     peerDependencies:
@@ -7947,7 +8065,7 @@ packages:
       fast-glob: 3.3.1
       json5: 2.2.3
       local-pkg: 0.4.3
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
       scule: 1.0.0
       unplugin: 1.4.0
@@ -8014,7 +8132,7 @@ packages:
       lru-cache: 10.0.1
       mri: 1.2.0
       node-fetch-native: 1.4.0
-      ofetch: 1.3.2
+      ofetch: 1.3.3
       ufo: 1.3.0
     transitivePeerDependencies:
       - supports-color
@@ -8025,8 +8143,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /untun@0.1.1:
-    resolution: {integrity: sha512-Xyo/3TLi2pMLr8SFSXAHVTEpEtVrqXZTzXkZAglRIairiO+utD6y7bCemYejj7GazEwomMwpNB1Gg3hoehY+zA==}
+  /untun@0.1.2:
+    resolution: {integrity: sha512-wLAMWvxfqyTiBODA1lg3IXHQtjggYLeTK7RnSfqtOXixWJ3bAa2kK/HHmOOg19upteqO3muLvN6O/icbyQY33Q==}
     hasBin: true
     dependencies:
       citty: 0.1.3
@@ -8039,7 +8157,7 @@ packages:
     hasBin: true
     dependencies:
       '@babel/core': 7.22.11
-      '@babel/standalone': 7.22.11
+      '@babel/standalone': 7.22.12
       '@babel/types': 7.22.11
       defu: 6.1.2
       jiti: 1.19.3
@@ -8060,6 +8178,13 @@ packages:
       picocolors: 1.0.0
     dev: true
 
+  /update-check@1.5.4:
+    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+    dev: true
+
   /uqr@0.1.2:
     resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
     dev: true
@@ -8088,11 +8213,6 @@ packages:
       which-typed-array: 1.1.11
     dev: true
 
-  /utils-merge@1.0.1:
-    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
-    engines: {node: '>= 0.4.0'}
-    dev: true
-
   /validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
     dependencies:
@@ -8119,13 +8239,14 @@ packages:
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.0
+      mlly: 1.4.1
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.3.9(@types/node@18.17.11)
+      vite: 4.4.9(@types/node@18.17.11)
     transitivePeerDependencies:
       - '@types/node'
       - less
+      - lightningcss
       - sass
       - stylus
       - sugarss
@@ -8133,7 +8254,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker@0.6.2(vite@4.3.9):
+  /vite-plugin-checker@0.6.2(vite@4.4.9):
     resolution: {integrity: sha512-YvvvQ+IjY09BX7Ab+1pjxkELQsBd4rPhWNw8WLBeFVxu/E7O+n6VYAqNsKdK/a2luFlX/sMpoWdGFfg4HvwdJQ==}
     engines: {node: '>=14.16'}
     peerDependencies:
@@ -8177,14 +8298,14 @@ packages:
       semver: 7.5.4
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
-      vite: 4.3.9(@types/node@18.17.11)
+      vite: 4.4.9(@types/node@18.17.11)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.8
       vscode-uri: 3.0.7
     dev: true
 
-  /vite-plugin-inspect@0.7.38(@nuxt/kit@3.6.5)(vite@4.4.9):
+  /vite-plugin-inspect@0.7.38(@nuxt/kit@3.7.0)(vite@4.4.9):
     resolution: {integrity: sha512-+p6pJVtBOLGv+RBrcKAFUdx+euizg0bjL35HhPyM0MjtKlqoC5V9xkCmO9Ctc8JrTyXqODbHqiLWJKumu5zJ7g==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -8195,7 +8316,7 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.7.6
-      '@nuxt/kit': 3.6.5
+      '@nuxt/kit': 3.7.0
       '@rollup/pluginutils': 5.0.3(rollup@3.28.1)
       debug: 4.3.4
       error-stack-parser-es: 0.1.1
@@ -8228,39 +8349,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite@4.3.9(@types/node@18.17.11):
-    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 18.17.11
-      esbuild: 0.17.19
-      postcss: 8.4.28
-      rollup: 3.28.1
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
   /vite@4.4.9(@types/node@18.17.11):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -8337,8 +8425,8 @@ packages:
     resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
     dev: true
 
-  /vue-bundle-renderer@1.0.3:
-    resolution: {integrity: sha512-EfjX+5TTUl70bki9hPuVp+54JiZOvFIfoWBcfXsSwLzKEiDYyHNi5iX8srnqLIv3YRnvxgbntdcG1WPq0MvffQ==}
+  /vue-bundle-renderer@2.0.0:
+    resolution: {integrity: sha512-oYATTQyh8XVkUWe2kaKxhxKVuuzK2Qcehe+yr3bGiaQAhK3ry2kYE4FWOfL+KO3hVFwCdLmzDQTzYhTi9C+R2A==}
     dependencies:
       ufo: 1.3.0
     dev: true
diff --git a/frontend/server.js b/frontend/server.js
deleted file mode 100644
index 8546d98..0000000
--- a/frontend/server.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const express = require('express');
-
-const app = express();
-
-app.use('/', express.static('./dist'));
-
-app.listen(3000);
\ No newline at end of file
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 7c2eb61..4dc1cba 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,6 +1,8 @@
+/// Tailwind CSS config
 import type { Config } from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
 
+/* Export config */
 export default <Partial<Config>>{
   theme: {
     fontFamily: {
diff --git a/frontend/utils/dl.ts b/frontend/utils/dl.ts
new file mode 100644
index 0000000..f3c8565
--- /dev/null
+++ b/frontend/utils/dl.ts
@@ -0,0 +1,64 @@
+/// Download utils
+
+/* Types */
+export interface DLStream {
+  readonly fileName: string;
+  readonly fileSize: number;
+  readonly write: (data: ArrayBuffer) => void;
+  readonly abort: () => void;
+  readonly close: () => void;
+}
+
+/* Create download stream */
+export async function createDlStream(
+  fileName: string,
+  fileSize: number,
+  blobMode: boolean
+): Promise<DLStream> {
+  if (blobMode) {
+    let blobs: Blob[] = [];
+
+    return {
+      fileName,
+      fileSize,
+      write(data: ArrayBuffer): void {
+        blobs.push(new Blob([data]));
+      },
+      abort(): void {
+        blobs = [];
+      },
+      close(): void {
+        const fileBlob: Blob = new Blob(blobs);
+        const el: HTMLAnchorElement = document.createElement('a');
+
+        el.href = URL.createObjectURL(fileBlob);
+        el.setAttribute('download', fileName);
+        document.body.appendChild(el);
+        el.click();
+        document.body.removeChild(el);
+      }
+    };
+  } else {
+    const streamSaver = (await import('streamsaver')).default;
+    streamSaver.mitm = '/mitm.html';
+
+    const stream: WritableStream = streamSaver.createWriteStream(fileName, {
+      size: fileSize
+    });
+    const writer: WritableStreamDefaultWriter = stream.getWriter();
+
+    return {
+      fileName,
+      fileSize,
+      write(data: ArrayBuffer): void {
+        writer.write(new Uint8Array(data));
+      },
+      abort(): void {
+        writer.abort();
+      },
+      close(): void {
+        writer.close();
+      }
+    };
+  }
+}
diff --git a/frontend/utils/p2p_recv.ts b/frontend/utils/p2p_recv.ts
index 51b61c8..9e8eabc 100644
--- a/frontend/utils/p2p_recv.ts
+++ b/frontend/utils/p2p_recv.ts
@@ -2,6 +2,7 @@
 import { Socket, io } from 'socket.io-client';
 import serverList from '~/assets/ice_servers.json';
 import { PACK_SIZE } from './p2p';
+import { Base64 } from 'js-base64';
 
 /* Types */
 export enum RecvServiceError {
@@ -23,7 +24,7 @@ export function startRecvService(
   cbAssign: (selfId: string) => void,
   cbResponse: (name: string, size: number) => void,
   cbDataOpen: () => void,
-  cbMessage: (data: ArrayBuffer) => number,
+  cbMessage: (order: number, data: ArrayBuffer) => number,
   cbDone: () => void
 ): () => Promise<void> {
   if (typeof RTCPeerConnection === 'undefined') {
@@ -41,6 +42,7 @@ export function startRecvService(
 
   let selfId: null | string = null;
   let totSize: number = 0;
+  let key: CryptoKey;
   let tPerNum: number = 1;
   let tNum: number = 0;
   let retry: number = 0;
@@ -71,12 +73,19 @@ export function startRecvService(
       selfId = inSelfId;
     }
   });
-  socket.on('response', (inPeerId: string, data: any): void => {
+  socket.on('response', async (inPeerId: string, data: any): Promise<void> => {
     if (peerId !== inPeerId) {
       return;
     }
     totSize = data.size;
     tPerNum = Math.ceil(totSize / PACK_SIZE / 1000);
+    key = await window.crypto.subtle.importKey(
+      'raw',
+      Base64.toUint8Array(data.key),
+      { name: 'AES-GCM' },
+      true,
+      ['encrypt', 'decrypt']
+    );
     cbResponse(data.name, data.size);
   });
 
@@ -109,21 +118,24 @@ export function startRecvService(
       socket.emit('candidate', peerId, ev.candidate);
     }
   });
-  peerConn.addEventListener('connectionstatechange', async (): Promise<void> => {
-    if (peerConn.connectionState === 'failed') {
-      if (retry < 5) {
-        const offer: RTCSessionDescriptionInit = await peerConn.createOffer({
-          iceRestart: true
-        });
-        await peerConn.setLocalDescription(offer);
-        socket.emit('offer', peerId, offer);
-        retry++;
-        return;
+  peerConn.addEventListener(
+    'connectionstatechange',
+    async (): Promise<void> => {
+      if (peerConn.connectionState === 'failed') {
+        if (retry < 5) {
+          const offer: RTCSessionDescriptionInit = await peerConn.createOffer({
+            iceRestart: true
+          });
+          await peerConn.setLocalDescription(offer);
+          socket.emit('offer', peerId, offer);
+          retry++;
+          return;
+        }
+        cbError(RecvServiceError.WebRTCConnectFail);
+        socket.disconnect();
       }
-      cbError(RecvServiceError.WebRTCConnectFail);
-      socket.disconnect();
     }
-  });
+  );
 
   dataCh.binaryType = 'arraybuffer';
   dataCh.addEventListener('error', (): void => {
@@ -131,27 +143,40 @@ export function startRecvService(
   });
   dataCh.addEventListener('open', cbDataOpen);
 
-  dataCh.addEventListener('message', (ev: MessageEvent<ArrayBuffer>): void => {
-    const recvBytes: number = cbMessage(ev.data);
-
-    tNum++;
-    if (tNum % tPerNum === 0) {
-      const buffer: Uint8Array = new Uint8Array(8);
-      const view: DataView = new DataView(buffer.buffer);
-
-      view.setBigUint64(0, BigInt(recvBytes));
-      dataCh.send(buffer);
-    }
-    if (recvBytes >= totSize) {
-      const buffer: Uint8Array = new Uint8Array(8);
-      const view: DataView = new DataView(buffer.buffer);
+  dataCh.addEventListener(
+    'message',
+    async (ev: MessageEvent<ArrayBuffer>): Promise<void> => {
+      const ivv: DataView = new DataView(ev.data);
+      const dePack = await window.crypto.subtle.decrypt(
+        {
+          name: 'AES-GCM',
+          iv: ev.data.slice(0, 8)
+        },
+        key,
+        ev.data.slice(8)
+      );
+
+      const recvBytes: number = cbMessage(Number(ivv.getBigUint64(0)), dePack);
+
+      tNum++;
+      if (tNum % tPerNum === 0) {
+        const buffer: Uint8Array = new Uint8Array(8);
+        const view: DataView = new DataView(buffer.buffer);
+
+        view.setBigUint64(0, BigInt(recvBytes));
+        dataCh.send(buffer);
+      }
+      if (recvBytes >= totSize) {
+        const buffer: Uint8Array = new Uint8Array(8);
+        const view: DataView = new DataView(buffer.buffer);
 
-      view.setBigUint64(0, BigInt(recvBytes));
-      dataCh.send(buffer);
+        view.setBigUint64(0, BigInt(recvBytes));
+        dataCh.send(buffer);
 
-      cbDone();
+        cbDone();
+      }
     }
-  });
+  );
 
   socket.emit('request', peerId);
 
diff --git a/frontend/utils/p2p_send.ts b/frontend/utils/p2p_send.ts
index 85c71f0..15122b5 100644
--- a/frontend/utils/p2p_send.ts
+++ b/frontend/utils/p2p_send.ts
@@ -2,6 +2,8 @@
 import { Socket, io } from 'socket.io-client';
 import serverList from '~/assets/ice_servers.json';
 import { BUFF_SIZE, PACK_SIZE } from './p2p';
+import { Base64 } from 'js-base64';
+import { wrap } from 'module';
 
 /* Types */
 export enum SendServiceError {
@@ -13,7 +15,7 @@ export enum SendServiceError {
 }
 
 /* Start service */
-export function startSendService(
+export async function startSendService(
   file: File,
   cbError: (err: SendServiceError) => void,
   cbReady: (socket: Socket, peerConn: RTCPeerConnection) => void,
@@ -23,7 +25,7 @@ export function startSendService(
   cbOffer: () => void,
   cbStart: () => void,
   cbProgress: (recvBytes: number) => void
-): void {
+): Promise<void> {
   if (typeof RTCPeerConnection === 'undefined') {
     cbError(SendServiceError.WebRTCDisabled);
     return;
@@ -35,6 +37,14 @@ export function startSendService(
       (value: string): RTCIceServer => ({ urls: value })
     )
   });
+  const key: CryptoKey = await window.crypto.subtle.generateKey(
+    {
+      name: 'AES-GCM',
+      length: 256
+    },
+    true,
+    ['encrypt', 'decrypt']
+  );
 
   let selfId: null | string = null;
   let peerId: null | string = null;
@@ -58,7 +68,7 @@ export function startSendService(
       selfId = inSelfId;
     }
   });
-  socket.on('request', (inPeerId: string): void => {
+  socket.on('request', async (inPeerId: string): Promise<void> => {
     if (peerId === null) {
       cbPeer(inPeerId);
       peerId = inPeerId;
@@ -66,9 +76,14 @@ export function startSendService(
     if (peerId !== inPeerId) {
       return;
     }
+    const rawKey: ArrayBuffer = await window.crypto.subtle.exportKey(
+      'raw',
+      key
+    );
     socket.emit('response', peerId, {
       name: file.name,
-      size: file.size
+      size: file.size,
+      key: Base64.fromUint8Array(new Uint8Array(rawKey))
     });
   });
 
@@ -146,13 +161,27 @@ export function startSendService(
       }
     );
 
-    reader.addEventListener('load', (): void => {
+    reader.addEventListener('load', async (): Promise<void> => {
       const result: ArrayBuffer = reader.result as ArrayBuffer;
-      const wrapper: Uint8Array = new Uint8Array(result.byteLength + 4);
+
+      const iv: ArrayBuffer = new ArrayBuffer(8);
+      const ivv: DataView = new DataView(iv);
+      ivv.setBigUint64(0, BigInt(order));
+
+      const enResult: ArrayBuffer = await window.crypto.subtle.encrypt(
+        {
+          name: 'AES-GCM',
+          iv
+        },
+        key,
+        result
+      );
+
+      const wrapper: Uint8Array = new Uint8Array(enResult.byteLength + 8);
       const view: DataView = new DataView(wrapper.buffer);
 
-      view.setUint32(0, order);
-      wrapper.set(new Uint8Array(result), 4);
+      view.setBigUint64(0, BigInt(order));
+      wrapper.set(new Uint8Array(enResult), 8);
       dataCh.send(wrapper);
 
       order++;