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
index.html
+5 -5
View File
@@ -1,10 +1,10 @@
<!DOCTYPE html> <!doctype html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Fachschaftsschilder</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
package.json
+2 -1
View File
@@ -5,10 +5,11 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "run-p type-check \"build-only {@}\" --", "build": "run-p type-check check \"build-only {@}\" --",
"preview": "vite preview", "preview": "vite preview",
"build-only": "vite build", "build-only": "vite build",
"type-check": "vue-tsc --build", "type-check": "vue-tsc --build",
"check": "prettier --check src/",
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
src/App.vue
+65 -11
View File
@@ -1,34 +1,88 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import Card from '@/components/card.vue' import Card from '@/components/card.vue'
import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
const cards = ref( const cards = ref<CardT[]>(
new Array(8).fill(0).map((_) => ({ new Array(8).fill(0).map((_) => ({
title: '', ...presets.default,
color: 'white', name: 'Name',
name: '', textSize: 10,
})), })),
) )
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> </script>
<template> <template>
<div class="grid grid-cols-3"> <div class="grid grid-cols-3">
<div class="noPrint flex flex-col gap-3"> <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 cards" :key="i" class="p-3 bg-gray-300 flex flex-col gap-1"> <div v-for="(card, i) in 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.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" /> <input v-model="card.name" placeholder="Name" />
</div> </div>
</div> </div>
<div class="col-span-2 grid grid-cols-2 page gap-2"> <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
<card v-for="(card, i) in cards" :key="i" v-model="cards[i]" /> <card v-for="(_, i) in cards" :key="i" v-model="cards[i]" />
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
input { input,
select {
@apply border-2; @apply border-2;
padding: 10px; padding: 0.25rem;
} }
</style> </style>
src/assets/main.css
+19 -17
View File
@@ -1,21 +1,23 @@
@import "tailwindcss"; @import 'tailwindcss';
.card {
width: 9cm;
height: 6.5cm;
}
@media print { @media print {
.noPrint{ .noPrint {
display:none; display: none;
}
.page {
width: 100%;
grid-column: span 3 / span 3;
height: 100dvh !important;
body {
width: 21cm;
height: 29.7cm;
/* change the margins as you want them to be. */
} }
.page { gap: 0;
width:100%; }
grid-column: span 3 / span 3;
height: 100dvh !important;
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
.card {
width: 9cm;
}
} }
src/colors.ts
+32
View File
@@ -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
}
src/components/card.vue
+31 -8
View File
@@ -1,15 +1,38 @@
<script setup lang="ts"> <script setup lang="ts">
const card = defineModel<{ import Logo from '@/components/logo.vue'
title: string import type { CardT } from '@/colors.ts'
color: string
name: string const card = defineModel<CardT>({ required: true })
}>({ required: true })
</script> </script>
<template> <template>
<div class="flex flex-col border-2 border-gray-200 card mx-auto"> <div
<h2>{{ card.title }}</h2> class="flex flex-col border-2 border-gray-200 card mx-auto w-full"
<p>{{ card.name }}</p> :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> </div>
</template> </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>