Initial commit

src/App.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Card from '@/components/card.vue'
+
+const cards = ref(
+  new Array(8).fill(0).map((_) => ({
+    title: '',
+    color: 'white',
+    name: '',
+  })),
+)
+</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">
+        <input v-model="card.title" placeholder="Title" />
+        <input v-model="card.color" placeholder="Color" type="color" />
+        <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>
+  </div>
+</template>
+
+<style scoped>
+input {
+  @apply border-2;
+  padding: 10px;
+}
+</style>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/main.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+@media print {
+    .noPrint{
+        display:none;
+    }
+
+    .page {
+        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/components/card.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const card = defineModel<{
+  title: string
+  color: string
+  name: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col border-2 border-gray-200 card mx-auto">
+    <h2>{{ card.title }}</h2>
+    <p>{{ card.name }}</p>
+  </div>
+</template>
+
+<style scoped></style>

src/main.ts

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')