Pascal/fs_namensschilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Do things

Browse Source
This commit is contained in:
Pascal
2025-03-30 05:58:42 +02:00
parent f3ca614728
commit c2a7f406cc
7 changed files with 696 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/card.vue
+31 -8
View File
@@ -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>
src/components/logo.vue
+541
View File
@@ -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>