Merge pull request #1 from PassiDel/PascalSollteSchlafen

Pascal sollte schlafen
2025-03-30 17:00:07 +02:00
parent f3ca614728 56ce6fe8a4
commit f66774ef1a
11 changed files with 725 additions and 48 deletions
@@ -1 +1,2 @@
 * text=auto eol=lf
+*.lockb binary diff=lockb
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fachschaftsschilder</title>
  </head>
  <body>
    <div id="app"></div>
@@ -5,14 +5,17 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-p type-check check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
+    "check": "prettier --check src/",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.17",
+    "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
    "tailwindcss": "^4.0.17",
    "vue": "^3.5.13"
  },
@@ -1,34 +1,85 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Card from '@/components/card.vue'
+import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
+import { useCards } from '@/stores/cards.ts'

-const cards = ref(
-  new Array(8).fill(0).map((_) => ({
-    title: '',
-    color: 'white',
-    name: '',
-  })),
-)
+const cardStore = useCards()
+function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
+  if (!validPreset(preset)) {
+    return
+  }
+
+  const values = presets[preset]
+  console.log(values)
+  Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
+}
 </script>

 <template>
  <div class="grid grid-cols-3">
-    <div class="noPrint flex flex-col gap-3">
-      <div v-for="(card, i) in cards" :key="i" class="p-3 bg-gray-300 flex flex-col gap-1">
+    <div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
+      <div
+        v-for="(card, i) in cardStore.cards"
+        :key="i"
+        class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0"
+      >
        <input v-model="card.title" placeholder="Title" />
-        <input v-model="card.color" placeholder="Color" type="color" />
+        <div class="flex flex-row gap-2">
+          <input
+            v-model="card.bgColor"
+            placeholder="Title Background Color"
+            title="Title Background Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.textColor"
+            placeholder="Title Text Color"
+            title="Title Text Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.color"
+            placeholder="Background Color"
+            title="Background Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.nameColor"
+            placeholder="Name Text Color"
+            title="Name Text Color"
+            type="color"
+            class="h-16"
+          />
+          <input
+            v-model="card.textSize"
+            type="number"
+            min="1"
+            max="10"
+            placeholder="Name Text Size"
+            title="Name Text Size"
+          />
+          <select @change="(e) => presetChange(card, (e.target as any)!.value)">
+            <option v-for="(preset, key) in presets" :key="key" :value="key">
+              {{ preset.title }}
+            </option>
+          </select>
+        </div>
        <input v-model="card.name" placeholder="Name" />
      </div>
    </div>
-    <div class="col-span-2 grid grid-cols-2 page gap-2">
-      <card v-for="(card, i) in cards" :key="i" v-model="cards[i]" />
+    <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
+      <card v-for="(_, i) in cardStore.cards" :key="i" v-model="cardStore.cards[i]" />
    </div>
  </div>
 </template>

 <style scoped>
-input {
+input,
+select {
  @apply border-2;
-  padding: 10px;
+  padding: 0.25rem;
 }
 </style>
@@ -1,4 +1,8 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+.card {
+  width: 9cm;
+  height: 6.5cm;
+}
@media print {
  .noPrint {
    display: none;
@@ -11,11 +15,9 @@
    body {
      width: 21cm;
      height: 29.7cm;
-            margin: 30mm 45mm 30mm 45mm;
      /* change the margins as you want them to be. */
    }
-    }
-    .card {
-        width: 9cm;
+
+    gap: 0;
  }
 }
@@ -0,0 +1,32 @@
+export type Preset = Pick<CardT, 'color' | 'bgColor' | 'textColor' | 'nameColor' | 'title'>
+export const presets = {
+  default: {
+    bgColor: '#000000',
+    color: '#ffffff',
+    textColor: '#ffffff',
+    nameColor: '#000000',
+    title: 'Fachschaft 4',
+  },
+  awareness: {
+    bgColor: '#3e1c59',
+    color: '#6f309f',
+    textColor: '#ffffff',
+    nameColor: '#ffffff',
+    title: 'Awareness',
+  },
+  // TODO: add new types
+} satisfies Record<string, Preset>
+
+export function validPreset(key: string): key is keyof typeof presets {
+  return key in presets
+}
+
+export type CardT = {
+  title: string
+  color: string
+  bgColor: string
+  textColor: string
+  nameColor: string
+  textSize: number
+  name: string
+}
@@ -1,15 +1,38 @@
 <script setup lang="ts">
-const card = defineModel<{
-  title: string
-  color: string
-  name: string
-}>({ required: true })
+import Logo from '@/components/logo.vue'
+import type { CardT } from '@/colors.ts'
+
+const card = defineModel<CardT>({ required: true })
 </script>

 <template>
-  <div class="flex flex-col border-2 border-gray-200 card mx-auto">
-    <h2>{{ card.title }}</h2>
-    <p>{{ card.name }}</p>
+  <div
+    class="flex flex-col border-2 border-gray-200 card mx-auto w-full"
+    :style="{ backgroundColor: card.color }"
+  >
+    <div
+      class="h-16 bg-gray-600 flex flex-row space-between align-center relative"
+      :style="{ backgroundColor: card.bgColor }"
+    >
+      <logo class="absolute top-0 left-0" :color="card.textColor" />
+      <p
+        class="text-center w-full mx-16 align-center h-fit my-auto text-white text-3xl font-bold"
+        :style="{ color: card.textColor }"
+      >
+        {{ card.title }}
+      </p>
+    </div>
+    <p
+      class="my-auto text-center max-w-full overflow-hidden font-bold name overflow-ellipsis"
+      style="font-size: var(--normalSize); @media print {font-size: var(--printSize)}"
+      :style="{
+        color: card.nameColor,
+        '--normalSize': `${card.textSize * 0.18}cm`,
+        '--printSize': `${card.textSize}vw`,
+      }"
+    >
+      {{ card.name }}
+    </p>
  </div>
 </template>

@@ -0,0 +1,541 @@
+<!--suppress ALL -->
+<script setup lang="ts">
+const { color } = defineProps<{ color: string }>()
+</script>
+
+<template>
+  <svg
+    id="svg1"
+    width="1000"
+    height="1000"
+    viewBox="0 0 1000 999.99996"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-16 h-16"
+    :style="`--color: ${color || 'white'}`"
+  >
+    <g id="layer-MC1" transform="translate(-57.60569,-0.68580814)" style="display: inline">
+      <ellipse
+        style="
+          display: inline;
+          fill: none;
+          stroke: none;
+          stroke-width: 6.11633;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        id="path42"
+        cx="-215.06285"
+        cy="733.65924"
+        rx="353.54214"
+        ry="344.28275"
+        transform="matrix(-0.85773636,0.51408981,0.50708174,0.86189797,0,0)"
+      />
+    </g>
+    <g id="layer2" style="display: inline">
+      <path
+        id="path3"
+        d="M 592.44505,297.83118 H 428.79624 v -83.77145 h 163.64881 z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 20.7523;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+      />
+      <path
+        id="path4"
+        d="M 636.82044,501.54628 H 385.16358 v -130.8912 h 251.65686 z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 20.7523;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+      />
+      <path
+        id="path5"
+        d="M 688.46338,789.98559 H 332.86095 V 594.65657 h 355.60243 z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 20.7523;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+      />
+      <path
+        id="path6"
+        d="m 0,0 c 0,-7.865 -6.376,-14.241 -14.241,-14.241 -7.866,0 -14.242,6.376 -14.242,14.241 0,7.865 6.376,14.241 14.242,14.241 C -6.376,14.241 0,7.865 0,0"
+        style="
+          fill: #1d1d1b;
+          fill-opacity: 0;
+          fill-rule: nonzero;
+          stroke: var(--color);
+          stroke-width: 10;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,800.16741,558.43164)"
+        clip-path="url(#clipPath7)"
+      />
+      <path
+        id="path8"
+        d="m 0,0 c 0,-7.865 -6.376,-14.241 -14.241,-14.241 -7.866,0 -14.242,6.376 -14.242,14.241 0,7.865 6.376,14.241 14.242,14.241 C -6.376,14.241 0,7.865 0,0"
+        style="
+          fill: #1d1d1b;
+          fill-opacity: 0;
+          fill-rule: nonzero;
+          stroke: var(--color);
+          stroke-width: 10;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,656.56115,929.44449)"
+        clip-path="url(#clipPath9)"
+      />
+      <path
+        id="path10"
+        d="m 0,0 c 0,-7.865 -6.376,-14.241 -14.241,-14.241 -7.866,0 -14.242,6.376 -14.242,14.241 0,7.865 6.376,14.241 14.242,14.241 C -6.376,14.241 0,7.865 0,0"
+        style="
+          fill: #1d1d1b;
+          fill-opacity: 0;
+          fill-rule: nonzero;
+          stroke: var(--color);
+          stroke-width: 10;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,419.73034,929.44449)"
+        clip-path="url(#clipPath11)"
+      />
+      <path
+        id="path12"
+        d="M 0,0 V 48.918"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,390.1841,891.0749)"
+        clip-path="url(#clipPath13)"
+      />
+      <path
+        id="path14"
+        d="M 0,0 V 41.384"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,457.93659,378.40883)"
+        clip-path="url(#clipPath15)"
+      />
+      <path
+        id="path16"
+        d="M 0,0 V -51.444"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,627.42624,786.91096)"
+        clip-path="url(#clipPath17)"
+      />
+      <path
+        id="path18"
+        d="M 0,0 V -48.669"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,591.38327,497.58924)"
+        clip-path="url(#clipPath19)"
+      />
+      <path
+        id="path20"
+        d="M 0,0 V -32.658"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,566.41321,304.13086)"
+        clip-path="url(#clipPath21)"
+      />
+      <path
+        id="path22"
+        d="M 0,0 V -27.912"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,551.33879,149.82323)"
+        clip-path="url(#clipPath23)"
+      />
+      <path
+        id="path24"
+        d="M 0,0 V -30.766"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,479.93919,150.47834)"
+        clip-path="url(#clipPath25)"
+      />
+      <path
+        id="path26"
+        d="M 0,0 44.944,-30.76"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,335.55249,154.01834)"
+        clip-path="url(#clipPath27)"
+      />
+      <path
+        id="path28"
+        d="M 0,0 -25.058,-22.169"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,356.51415,167.09316)"
+        clip-path="url(#clipPath29)"
+      />
+      <path
+        id="path30"
+        d="M 0,0 34.442,-25.18"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,316.21116,324.69875)"
+        clip-path="url(#clipPath31)"
+      />
+      <path
+        id="path32"
+        d="M 0,0 -31.368,-28.052"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,314.37256,262.48967)"
+        clip-path="url(#clipPath33)"
+      />
+      <path
+        id="path34"
+        d="M 0,0 -31.368,-28.052"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,341.1611,291.72447)"
+        clip-path="url(#clipPath35)"
+      />
+      <path
+        id="path36"
+        d="M 0,0 -30.425,-13.238"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,696.76135,350.83278)"
+        clip-path="url(#clipPath37)"
+      />
+      <path
+        id="path38"
+        d="M 0,0 -26.685,-11.611"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,640.96952,198.10644)"
+        clip-path="url(#clipPath39)"
+      />
+      <path
+        id="path40"
+        d="M 0,0 -26.685,-11.611"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,744.20753,575.94254)"
+        clip-path="url(#clipPath41)"
+      />
+      <path
+        id="path43"
+        d="M 0,0 V 38.854"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,423.8796,588.4276)"
+        clip-path="url(#clipPath44)"
+      />
+      <path
+        id="path45"
+        d="M 0,0 -31.365,22.931"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,332.85968,599.86504)"
+        clip-path="url(#clipPath46)"
+      />
+      <path
+        id="path47"
+        d="M 0,0 -30.726,-54.573 H 30.726 Z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 10;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,515.37866,33.192076)"
+        clip-path="url(#clipPath48)"
+      />
+      <path
+        id="path49"
+        d="m 0,0 c 0,-5.152 -4.176,-9.328 -9.328,-9.328 -5.151,0 -9.327,4.176 -9.327,9.328 0,5.151 4.176,9.328 9.327,9.328 C -4.176,9.328 0,5.151 0,0"
+        style="
+          fill: #1d1d1b;
+          fill-opacity: 0;
+          fill-rule: nonzero;
+          stroke: var(--color);
+          stroke-width: 10;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,675.52396,189.10617)"
+        clip-path="url(#clipPath50)"
+      />
+      <path
+        id="path51"
+        d="m 0,0 c 0,-5.464 -4.43,-9.894 -9.894,-9.894 -5.465,0 -9.895,4.43 -9.895,9.894 0,5.465 4.43,9.894 9.895,9.894 C -4.43,9.894 0,5.465 0,0"
+        style="
+          fill: #1d1d1b;
+          fill-opacity: 0;
+          fill-rule: nonzero;
+          stroke: var(--color);
+          stroke-width: 9;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,733.05939,341.37749)"
+        clip-path="url(#clipPath52)"
+      />
+      <path
+        id="path53"
+        d="m 0,0 c 0,-5.152 -4.176,-9.328 -9.328,-9.328 -5.151,0 -9.327,4.176 -9.327,9.328 0,5.151 4.176,9.328 9.327,9.328 C -4.176,9.328 0,5.151 0,0"
+        style="
+          fill: #1d1d1b;
+          fill-opacity: 0;
+          fill-rule: nonzero;
+          stroke: var(--color);
+          stroke-width: 10;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(2.0746816,0,0,-2.0757601,371.61268,173.068)"
+        clip-path="url(#clipPath54)"
+      />
+      <path
+        id="path55"
+        d="m 0,0 c 0.275,0.383 -4.26,4.57 -10.548,8.561 -6.764,4.293 -18.937,12.008 -23.657,8.406 -6.208,-4.739 4.143,-26.965 4.353,-26.901 0.215,0.066 -9.57,21.478 -3.643,26.007 C -26.341,21.539 -0.649,-0.902 0,0 Z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 8;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(1.9703882,0,0,-2.0109402,281.35162,563.25055)"
+        clip-path="url(#clipPath56)"
+      />
+      <path
+        id="path57"
+        d="m 0,0 c 0.116,0.201 -1.274,1.407 -4.105,3.146 -3.802,2.335 -19.879,12.211 -25.579,7.278 -6.445,-5.578 4.614,-26.42 4.94,-26.314 0.324,0.105 -9.693,21.233 -3.642,26.007 C -21.913,15.225 -0.446,-0.77 0,0 Z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 8;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(1.719645,0,0,-1.8949709,222.70527,584.03881)"
+        clip-path="url(#clipPath58)"
+      />
+      <path
+        id="path59"
+        d="m 0,0 c 0.116,0.201 -1.274,1.407 -4.105,3.146 -3.802,2.335 -19.879,12.211 -25.579,7.278 -6.445,-5.578 4.614,-26.42 4.94,-26.314 0.324,0.105 -9.693,21.233 -3.643,26.007 C -21.913,15.225 -0.446,-0.77 0,0 Z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 8;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(1.77966,0,0,-1.8020769,179.66432,615.42072)"
+        clip-path="url(#clipPath60)"
+      />
+      <path
+        id="path61"
+        d="m 0,0 c 0.116,0.201 -1.274,1.407 -4.105,3.146 -3.802,2.335 -19.879,12.211 -25.579,7.278 -6.445,-5.578 4.614,-26.42 4.94,-26.314 0.324,0.105 -9.693,21.233 -3.642,26.007 C -21.913,15.225 -0.446,-0.77 0,0 Z"
+        style="
+          fill: none;
+          stroke: var(--color);
+          stroke-width: 8;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          stroke-dasharray: none;
+          stroke-opacity: 1;
+        "
+        transform="matrix(1.6908488,0,0,-1.7002152,135.32845,645.40787)"
+        clip-path="url(#clipPath62)"
+      />
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
@@ -2,5 +2,9 @@ import './assets/main.css'

 import { createApp } from 'vue'
 import App from './App.vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

-createApp(App).mount('#app')
+const pinia = createPinia()
+
+createApp(App).use(pinia.use(piniaPluginPersistedstate)).mount('#app')
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { CardT } from '@/colors.ts'
+import { presets } from '@/colors.ts'
+
+export const useCards = defineStore(
+  'cards',
+  () => {
+    const cards = ref<CardT[]>(
+      new Array(8).fill(0).map((_) => ({
+        ...presets.default,
+        name: 'Name',
+        textSize: 10,
+      })),
+    )
+
+    return { cards }
+  },
+  { persist: true },
+)