feat(new-tool): device information

src/tools/device-information/device-information.vue

@@ -0,0 +1,114 @@
+<template>
+  <n-card
+    v-for="{name, information} in sections"
+    :key="name"
+    :title="name"
+    style="margin-bottom: 15px;"
+  >
+    <n-grid
+      cols="1 400:2"
+      x-gap="12"
+      y-gap="12"
+    >
+      <n-gi
+        v-for="{label, value} in information"
+        :key="label"
+        class="information"
+      >
+        <n-card
+          :bordered="false"
+          embedded
+        >
+          <div class="label">
+            {{ label }}
+          </div>
+
+          <div class="value">
+            <n-ellipsis>
+              {{ value.value }}
+            </n-ellipsis>
+          </div>
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue';
+
+const { width, height } = useWindowSize()
+
+const sections = [
+  {
+    name: 'Screen',
+    information: [
+      {
+        label: 'Screen size',
+        value: computed(() => `${window.screen.availWidth} x ${window.screen.availHeight}`)
+      },
+      {
+        label: 'Orientation',
+        value:  computed(() => window.screen.orientation.type)
+      },
+      {
+        label: 'Orientation angle',
+        value:  computed(() => `${window.screen.orientation.angle}°`)
+      },
+      {
+        label: 'Color depth',
+        value:  computed(() => `${window.screen.colorDepth} bits`)
+      },
+      {
+        label: 'Pixel ratio',
+        value:  computed(() => `${window.devicePixelRatio} dppx`)
+      },
+      {
+        label: 'Window size',
+        value: computed(() => `${width.value} x ${height.value}`)
+      }
+    ]
+  },
+  {
+    name: 'Device',
+    information: [
+      {
+        label: 'Browser vendor',
+        value: computed(() => navigator.vendor)
+      },
+            {
+        label: 'Languages',
+        value: computed(() => navigator.languages.join(', '))
+      },
+            {
+        label: 'Plateform',
+        value: computed(() => navigator.platform)
+      },
+      {
+        label: 'User agent',
+        value: computed(() => navigator.userAgent)
+      }
+    ]
+  }
+]
+
+
+</script>
+
+<style lang="less" scoped>
+.information {
+
+  .label {  
+    font-size: 14px;
+    opacity: 0.8;
+    line-height: 1;
+    margin-bottom: 5px;
+  }
+  .value {
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 1;
+  }
+}
+</style>

src/tools/device-information/index.ts

@@ -0,0 +1,11 @@
+import { DeviceDesktop } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Device information',
+  path: '/device-information',
+  description: 'Get information about your current device (screen size, pixel-ratio, user agent, ...)',
+  keywords: ['device', 'information', 'screen', 'pixel', 'ratio', 'status', 'data', 'computer', 'size', 'user', 'agent'],
+  component: () => import('./device-information.vue'),
+  icon: DeviceDesktop,
+};

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as deviceInformation } from './device-information';
 import { tool as bcrypt } from './bcrypt';
 import { tool as caseConverter } from './case-converter';
 import { tool as colorConverter } from './color-converter';
@@ -35,7 +36,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Web',
     icon: LockOpen,
-    components: [urlEncoder, qrCodeGenerator],
+    components: [urlEncoder, qrCodeGenerator, deviceInformation],
   },
   {
     name: 'Development',