add: new design (wip)

New design as WIP, swipe controls
2025-05-10 11:07:06 +02:00 · 2025-05-10 11:07:06 +02:00 · 7af148058e
commit 7af148058e
parent 259adf53f6
15 changed files with 354 additions and 142 deletions
--- a/app/assets/styles/button.css
+++ b/app/assets/styles/button.css
@ -1,7 +1,7 @@
 .Button {
    --padding: .2rem;
-    --background: var(--color-main);
-    --color: var(--color-white);
+    --background: var(--color-gradient-main-dark);
+    --color: var(--color-lightest);
    --background-hover: var(--color-main-dark);

    position: relative;
@ -16,20 +16,27 @@
    background: var(--background);
    color: var(--color);

+    &.transparent {
+        --background: transparent;
+        box-shadow: none;
+        padding: .5em 1.5em;
+        border-radius: var(--radius-default);
+    }
+
    &.raised {
        box-shadow: var(--box-shadow-z2);
        padding: .5em 1.5em;
        border-radius: var(--radius-default);

        &.danger {
-            --background: var(--color-red);
-            --color: var(--color-white);
+            --background: var(--color-gradient-error);
+            --color: var(--color-lightest);
        }
    }

    &.text {
        --background: transparent;
-        --color: var(--color-black);
+        --color: var(--color-darkest);
        padding: .5em 1.5em;
        border-radius: var(--radius-default);

@ -38,11 +45,11 @@
        }

        &.white {
-            --color: var(--color-white);
+            --color: var(--color-lightest);
        }

        &.danger {
-            --color: var(--color-red);
+            --color: var(--color-error);

            &:hover {
                --background: rgba(255, 0, 0, 0.1);
@ -71,9 +78,9 @@
    }

    &.cta.white {
-        --background: var(--color-white);
+        --background: var(--color-lightest);
        --color: var(--color-main);
-        --background-hover: var(--color-grey);
+        --background-hover: var(--color-light);
    }

    &.icon-button {
--- a/app/assets/styles/buttonGroup.css
+++ b/app/assets/styles/buttonGroup.css
@ -1,9 +1,13 @@
 .ButtonGroup {
    display: flex;
+    background: var(--color-main);
+    border-radius: var(--radius-default);
+    overflow: hidden;
+    box-shadow: var(--box-shadow-z2);

    & button {
-        --color: var(--color-white-transparent);
-        --background: var(--color-main);
+        --color: var(--color-light);
+        --background: var(--color-main-darkest);
        all: unset;
        display: flex;
        align-items: center;
@ -17,8 +21,8 @@
        transition: var(--transition-default);

        &.active {
-            --color: var(--color-white);
-            --background: var(--color-main-dark);
+            --color: var(--color-darkest);
+            --background: var(--color-gradient-main);
        }

        &:first-child {
--- a/app/assets/styles/footer.css
+++ b/app/assets/styles/footer.css
@ -1,9 +1,9 @@
 .Footer {
-    background: var(--color-main-dark);
+    background: var(--color-main-darkest);
    padding: 1rem;

    & h4 {
-        color: var(--color-white);
+        color: var(--color-lightest);
        text-align: center;
        margin-bottom: 1rem;
    }
@ -12,7 +12,7 @@
        display: flex;
        gap: 1rem;
        justify-content: space-between;
-        color: var(--color-white-transparent);
+        color: var(--color-light);
    }

    & .socials {
@ -33,7 +33,7 @@
        gap: 1rem;

        & a {
-            color: var(--color-white);
+            color: var(--color-lightest);
            text-decoration: none;
        }
    }
--- a/app/assets/styles/formInput.css
+++ b/app/assets/styles/formInput.css
@ -1,12 +1,12 @@
 .Input {
    &.error {
        & .input-wrapper {
-            border-color: var(--color-red);
+            border-color: var(--color-error);
            outline-width: 2px;
        }

        & span {
-            color: var(--color-red);
+            color: var(--color-error);
        }
    }

@ -17,11 +17,11 @@
    & .input-wrapper {
        position: relative;
        flex: 25% 1 0;
-        border: 2px solid var(--color-blue);
+        border: 2px solid var(--color-main-dark);
        border-radius: var(--radius-default);
        overflow: hidden;
        transition: var(--transition-default);
-        outline: 0 solid var(--color-white);
+        outline: 0 solid var(--color-lightest);

        & label {
            position: absolute;
@ -35,7 +35,7 @@
            all: unset;
            width: calc(100% - 1rem);
            padding: 1.3rem .5rem .5rem .5rem;
-            background: var(--color-white);
+            background: var(--color-lightest);

            &[type="number"] {
                text-align: right;
@ -45,7 +45,7 @@
        & input:focus,
        & input:not(:placeholder-shown) {
            & + label {
-                color: var(--color-main);
+                color: var(--color-main-dark);
            }
        }
    }
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@ -1,29 +1,50 @@
 :root {
    --padding-default: 1rem;
    --padding-small: .5rem;
-    --radius-default: 5px;
+    --radius-default: 3px;
    --transition-default: 150ms;

-    --color-white: white;
-    --color-white-transparent: rgba(255, 255, 255, 0.67);
-    --color-red: #cc0001;
-    --color-blue-light: #61a7fd;
-    --color-blue: #2e86de;
-    --color-blue-dark: #1b4b7f;
-    --color-grey: #c7c7c7;
-    --color-black: #333;
+    --color-success: #328104;
+    --color-error: #A20606;
+    --color-blue-light: #0DDCE7;
+    --color-blue: #05B0FF;
+    --color-blue-dark: #0266F2;
+    --color-blue-darkest: #013174;
+
+    --color-darkest: #292929;
+    --color-dark: #404040;
+    --color-middle: #707070;
+    --color-light: #E0E0E6;
+    --color-lightest: #FAFAFF;
+
+    --color-green-light: #05FFC5;
+    --color-green: #02F276;
+    --color-green-dark: #09DC33;
+    --color-green-darkest: #07B029;
+    --color-green-darkest-most: #157C2A;

-    --color-orange: #DE9C2F;

    --color-main: var(--color-blue);
    --color-main-light: var(--color-blue-light);
    --color-main-dark: var(--color-blue-dark);
+    --color-main-darkest: var(--color-blue-darkest);

-    --color-accent: var(--color-orange);
+    --color-accent: var(--color-green);
+    --color-accent-light: var(--color-green-light);
+    --color-accent-dark: var(--color-green-dark);
+    --color-accent-darkest: var(--color-green-darkest);
+
+    --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
+    --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
+    --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
+    --color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
+    --color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909);
+    --color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909);

    --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
    --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
+
 }

 * {
@ -79,7 +100,6 @@ body {
 .card {
    overflow: hidden;
    border-radius: var(--radius-default);
-    border: 1px solid var(--color-main);
    box-shadow: var(--box-shadow-z2);
 }

@ -108,7 +128,7 @@ body {
 }

 .text-white {
-    color: var(--color-white);
+    color: var(--color-lightest);
 }

 .bg-main {
@ -136,7 +156,7 @@ body {
 }

 .bg-white {
-    background: var(--color-white);
+    background: var(--color-lightest);
 }

 .padding {
--- a/app/assets/styles/header.css
+++ b/app/assets/styles/header.css
@ -3,16 +3,18 @@
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-default);
-    background-color: var(--color-white);
+    background-color: var(--color-lightest);
    box-shadow: var(--box-shadow-z2);
+    color: var(--color-darkest);
    position: sticky;
    top: 0;
    z-index: 1;

    & strong {
        font-size: 2em;
+
        & span {
-            color: var(--color-main);
+            color: var(--color-main-dark);
        }
    }

@ -38,7 +40,7 @@
        top: 0;
        height: 100dvh;
        transition: 150ms ease-in-out;
-        background: var(--color-white);
+        background: var(--color-lightest);
        font-size: 2em;
        align-items: end;
        z-index: 100;
--- a/app/assets/styles/priceCard.css
+++ b/app/assets/styles/priceCard.css
@ -1,72 +1,108 @@
 .PriceCard {
+    position: relative;
+    overflow: hidden;
    width: 100%;
    transition: 150ms;
    opacity: 1;
-    color: var(--color-white);
-    gap: 1rem;
-    padding: 1rem;
+    color: var(--color-main-dark);
+    background: black;

-    &.deleting {
-        max-height: 0;
-        opacity: 0;
-    }
-
-    & > header {
+    .bottom {
+        position: absolute;
+        z-index: 1;
        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        & .icon {
-            font-size: 1rem;
-            cursor: pointer;
-        }
-    }
-
-    & .name-price {
-        display: flex;
-        gap: .5rem;
-
-        & > span:nth-child(1) {
-            font-weight: bold;
-            max-width: 150px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        & > span:nth-child(2)::before {
-            content: '•';
-            margin-right: .5rem;
-            opacity: .5;
-        }
-    }
-
-    & .wrapper {
-        display: flex;
-        flex-direction: row;
+        align-items: stretch;
        width: 100%;
-        gap: 1rem;
-        justify-content: space-between;
+        height: 100%;

-        & > .info {
-            flex-grow: 0;
+        & > * {
+            flex-grow: 1;
+            color: var(--color-lightest);
+            font-size: 2rem;
+            display: flex;
            align-items: center;
-            gap: .25rem;

-            & > .icon {
-                font-size: 2rem;
-                padding: .2rem;
+            & .icon {
+                filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4));
            }
+        }

-            & > .price {
-                display: flex;
-                align-items: center;
-                gap: .5rem;
+        & .bg-edit {
+            background: var(--color-gradient-main-dark);
+            padding: 2rem;
+            text-align: left;
+        }
+
+        & .bg-delete {
+            background: var(--color-gradient-error-reverse);
+            padding: 2rem;
+            text-align: right;
+            justify-content: flex-end;
+        }
+    }
+
+    .top {
+        position: relative;
+        background: var(--color-lightest);
+        z-index: 2;
+        gap: 1rem;
+        padding: 1rem;
+        border-radius: var(--radius-default);
+
+        & > header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: var(--color-darkest);
+
+            & .icon {
+                font-size: 1rem;
+                cursor: pointer;
            }
+        }

-            & > .pro {
-                font-size: .6rem;
+        & .name-price {
+            display: flex;
+            gap: .5rem;
+
+            & > span:nth-child(1) {
                font-weight: bold;
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            & > span:nth-child(2)::before {
+                content: '•';
+                margin-right: .5rem;
+                opacity: .5;
+            }
+        }
+
+        & .wrapper {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            gap: 1rem;
+            justify-content: space-between;
+
+            & > .info {
+                flex-grow: 0;
+                align-items: center;
+                gap: .25rem;
+
+                & > .price {
+                    display: flex;
+                    align-items: center;
+                    gap: .5rem;
+                }
+
+                & > .pro {
+                    font-size: .6rem;
+                    font-weight: bold;
+                    opacity: .7;
+                }
            }
        }
    }
--- a/app/assets/styles/toolbar.css
+++ b/app/assets/styles/toolbar.css
@ -1,7 +1,7 @@
 .Toolbar {
    display: flex;
    justify-content: space-evenly;
-    background: var(--color-main);
+    background: var(--color-gradient-main-dark);
    position: sticky;
    bottom: 0;
    box-shadow: var(--box-shadow-upper);
--- a/app/components/Pp/ButtonGroup.vue
+++ b/app/components/Pp/ButtonGroup.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="ButtonGroup">
+  <div class="ButtonGroup z-2">
    <button
      v-for="(button, index) in buttons"
      @click="click(index)"
--- a/app/components/Pp/PriceCard.vue
+++ b/app/components/Pp/PriceCard.vue
@ -1,47 +1,57 @@
 <template>
-  <article
-    ref="root"
-    class="PriceCard card bg-blue flex-col"
-    :class="{ deleting }"
-  >
-    <header>
-      <div class="name-price">
-        <span>{{ card.name || 'Kein Name' }}</span>
-        <span>{{ intl.format(+replaceComma(card.price))}}</span>
+  <article class="PriceCard card">
+    <div class="bottom">
+      <div class="bg-edit">
+        <Icon class="icon" name="uil:pen" mode="svg" />
      </div>
-      <div class="flex-row gap-default">
-        <PpButton class="icon-button" @click="update()">
-          <Icon class="icon" name="uil:pen" mode="svg" />
-        </PpButton>
-        <PpButton class="icon-button" @click="deleteCard()">
-          <Icon class="icon" name="uil:times" mode="svg" />
-        </PpButton>
+      <div class="bg-delete">
+        <Icon class="icon" name="uil:trash-alt" mode="svg" />
      </div>
-    </header>
+    </div>
+    <div
+      ref="top"
+      class="top flex-col"
+      :style="{ left, transition }"
+    >
+      <header>
+        <div class="name-price">
+          <span>{{ card.name || 'Kein Name' }}</span>
+          <span>{{ intl.format(+replaceComma(card.price))}}</span>
+        </div>
+        <div v-if="$device.isDesktop" class="flex-row gap-default">
+          <PpButton class="icon-button" @click="update()">
+            <Icon class="icon" name="uil:pen" mode="svg" />
+          </PpButton>
+          <PpButton class="icon-button" @click="deleteCard()">
+            <Icon class="icon" name="uil:trash-alt" mode="svg" />
+          </PpButton>
+        </div>
+      </header>

-    <main class="wrapper">
-      <div class="info flex-col">
-        <div class="price">
-          <Icon class="icon" name="uil:toilet-paper" mode="svg" />
-          <span class="value">{{ intl.format(card.ppr) }}</span>
+      <main class="wrapper">
+        <div class="info flex-col">
+          <div class="price">
+            <Icon class="icon" name="uil:toilet-paper" mode="svg" />
+            <span class="value">{{ intl.format(card.ppr) }}</span>
+          </div>
+          <span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
        </div>
-        <span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
-      </div>
-      <div class="info flex-col">
-        <div class="price">
-          <Icon class="icon" name="uil:file-landscape" mode="svg" />
-          <span class="value">{{ intl.format(card.pps) }}</span>
+        <div class="info flex-col">
+          <div class="price">
+            <Icon class="icon" name="uil:file-landscape" mode="svg" />
+            <span class="value">{{ intl.format(card.pps) }}</span>
+          </div>
+          <span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
        </div>
-        <span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
-      </div>
-      <div class="info flex-col">
-        <div class="price">
-          <Icon class="icon" name="uil:layer-group" mode="svg" />
-          <span class="value">{{ intl.format(card.ppl) }}</span>
+        <div class="info flex-col">
+          <div class="price">
+            <Icon class="icon" name="uil:layer-group" mode="svg" />
+            <span class="value">{{ intl.format(card.ppl) }}</span>
+          </div>
+          <span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
        </div>
-        <span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
-      </div>
-    </main>
+      </main>
+    </div>
  </article>
 </template>

@ -56,14 +66,37 @@ type Props = {
 const { card } = defineProps<Props>()
 const emit = defineEmits(['remove', 'update'])

-const root = ref<HTMLElement>()
-const deleting = ref<boolean>(false)
+const top = useTemplateRef('top')
+const left = shallowRef<string>('0')
+const transition = shallowRef<string>('none')

 const intl = Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
 })

+const { lengthX } = useSwipe(top, {
+  passive: false,
+  threshold: 5,
+  onSwipe() {
+    if (lengthX.value != 0) {
+      left.value = `${-clamp(lengthX.value, -100, 100)}px`
+    }
+  },
+  onSwipeEnd() {
+    if (lengthX.value < -50) update()
+    if (lengthX.value > 50) deleteCard()
+    transition.value = '150ms'
+
+    setTimeout(() => {
+      left.value = '0'
+      setTimeout(() => {
+        transition.value = 'none'
+      }, 50)
+    }, 100)
+  },
+})
+
 const update = () => emit('update')

 const deleteCard = () => emit('remove')
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@ -29,7 +29,7 @@
    </div>
  </section>
  <PpToolbar>
-    <PpButton class="mini-button text-white" @click="sort(currentSort)">
+    <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
      <Icon class="icon" name="uil:refresh" mode="svg" />
      <span>Neu sortieren</span>
      <span
@ -38,7 +38,7 @@
        aria-hidden="true"
      />
    </PpButton>
-    <PpButton class="mini-button text-white" @click="openModal(true, -1)">
+    <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
      <Icon class="icon" name="uil:plus" mode="svg" />
      <span>Hinzufügen</span>
    </PpButton>
--- a/app/utils/number.ts
+++ b/app/utils/number.ts
@ -1 +1,3 @@
-export const replaceComma = (value: string | number) => `${value}`.replace(',', '.');
+export const replaceComma = (value: string | number) => `${value}`.replace(',', '.')
+
+export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -22,9 +22,7 @@ export default defineNuxtConfig({
    '/privacy': { prerender: true },
  },

-  modules: [
-    '@nuxt/icon',
-  ],
+  modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device'],

  css : [
    './app/assets/styles/general.css',
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,8 @@
        "@iconify-json/simple-icons": "^1.2.32",
        "@iconify-json/uil": "^1.2.3",
        "@nuxt/icon": "^1.10.3",
+        "@nuxtjs/device": "^3.2.4",
+        "@vueuse/nuxt": "^13.1.0",
        "nuxt": "^3.16.2",
        "vue": "latest",
        "vue-router": "latest"
@ -2664,6 +2666,15 @@
        "pathe": "^2.0.3"
      }
    },
+    "node_modules/@nuxtjs/device": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-3.2.4.tgz",
+      "integrity": "sha512-jIvN6QeodBNrUrL/1FCHk4bebsiLsGHlJd8c/m2ksLrGY4IZ0npA8IYhDTdYV92epGxoe8+3iZOzCjav+6TshQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4"
+      }
+    },
    "node_modules/@oxc-parser/binding-darwin-arm64": {
      "version": "0.56.5",
      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.56.5.tgz",
@ -3793,6 +3804,12 @@
      "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
    "node_modules/@types/yauzl": {
      "version": "2.10.3",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@ -4265,6 +4282,97 @@
      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
      "license": "MIT"
    },
+    "node_modules/@vueuse/core": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.1.0.tgz",
+      "integrity": "sha512-PAauvdRXZvTWXtGLg8cPUFjiZEddTqmogdwYpnn60t08AA5a8Q4hZokBnpTOnVNqySlFlTcRYIC8OqreV4hv3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.1.0",
+        "@vueuse/shared": "13.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.1.0.tgz",
+      "integrity": "sha512-+TDd7/a78jale5YbHX9KHW3cEDav1lz1JptwDvep2zSG8XjCsVE+9mHIzjTOaPbHUAk5XiE4jXLz51/tS+aKQw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/nuxt": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-13.1.0.tgz",
+      "integrity": "sha512-4xdxwKanLY4+z+/ZgSZcJvwuHlgZMU3km7z4lhlbLl6WZTKS3BiztnRzcrdt4zjU512oTlH5nsPNhUhV0KXiOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.16.2",
+        "@vueuse/core": "13.1.0",
+        "@vueuse/metadata": "13.1.0",
+        "local-pkg": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0 || ^4.0.0-0",
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/nuxt/node_modules/local-pkg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
+      "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.0.1",
+        "quansync": "^0.2.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/pkg-types": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
+      "integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.1",
+        "exsolve": "^1.0.1",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.1.0.tgz",
+      "integrity": "sha512-IVS/qRRjhPTZ6C2/AM3jieqXACGwFZwWTdw5sNTSKk2m/ZpkuuN+ri+WCVUP8TqaKwJYt/KuMwmXspMAw8E6ew==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
    "node_modules/@whatwg-node/disposablestack": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/@whatwg-node/disposablestack/-/disposablestack-0.0.6.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,8 @@
    "@iconify-json/simple-icons": "^1.2.32",
    "@iconify-json/uil": "^1.2.3",
    "@nuxt/icon": "^1.10.3",
+    "@nuxtjs/device": "^3.2.4",
+    "@vueuse/nuxt": "^13.1.0",
    "nuxt": "^3.16.2",
    "vue": "latest",
    "vue-router": "latest"