add: design, icons, calculation

Implemented new design for PriceCards, added some icons for visuals, added calculation per price card

app/assets/styles/button.css

@@ -0,0 +1,20 @@
+.Button {
+    all: unset;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+
+    &.cta {
+        background: var(--color-main);
+        color: var(--color-white);
+        padding: .5rem 1.5rem;
+        border-radius: var(--radius-default);
+        box-shadow: var(--box-shadow-z2);
+        transition: var(--transition-default);
+
+        &:hover {
+            background: var(--color-main-dark);
+        }
+    }
+}

app/assets/styles/formInput.css

@@ -1,7 +1,5 @@
 .Input {
     position: relative;
-    display: flex;
-    flex-direction: column;
     flex: 25% 1 0;
     border: 2px solid var(--color-blue);
     border-radius: var(--radius-default);

app/assets/styles/general.css

@@ -5,11 +5,14 @@
 
     --color-white: white;
     --color-red: #cc0001;
-    --color-blue-dark: #341f97;
+    --color-blue-light: #61a7fd;
     --color-blue: #2e86de;
+    --color-blue-dark: #1b4b7f;
     --color-grey: #c7c7c7;
 
     --color-main: var(--color-blue);
+    --color-main-light: var(--color-blue-light);
+    --color-main-dark: var(--color-blue-dark);
 
     --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }
@@ -24,4 +27,26 @@ html,
 body {
     height: 100%;
     overflow-x: hidden;
+    font-family: sans-serif;
+}
+
+.card {
+    overflow: hidden;
+    border-radius: var(--radius-default);
+    border: 1px solid var(--color-main);
+    box-shadow: var(--box-shadow-z2);
+}
+
+.content {
+    padding: 1rem;
+}
+
+.pc-wrapper {
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
 }

app/assets/styles/header.css

@@ -22,8 +22,6 @@
 
     & nav,
     & ul {
-        display: flex;
-        flex-direction: column;
         gap: 1em;
     }
 

app/assets/styles/priceCard.css

@@ -1,16 +1,49 @@
 .PriceCard {
-    padding: var(--padding-default);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
     width: 100%;
-    background: var(--color-blue);
-    border-bottom: 1px solid var(--color-white);
 
-    & > .wrapper {
+    & > .padding {
+        gap: 1rem;
+        padding: var(--padding-default);
+    }
+
+    & > .bg-blue {
+        background: var(--color-blue);
+    }
+
+    & > .bg-white {
+        background: var(--color-white);
+    }
+
+    & .wrapper {
         display: flex;
+        flex-direction: row;
         width: 100%;
         gap: 1rem;
         justify-content: space-between;
+
+        & > * {
+            flex-basis: 30%;
+            flex-grow: 1;
+        }
+
+        & > .info {
+            align-items: center;
+
+            & > .icon {
+                color: var(--color-blue-light);
+                font-size: 2rem;
+                padding: .2rem;
+            }
+
+            & > .price {
+                font-size: 1.2rem;
+            }
+
+            & > .pro {
+                font-size: .8rem;
+                font-weight: bold;
+                color: var(--color-main-light);
+            }
+        }
     }
 }

app/components/Pp/Button.vue

@@ -0,0 +1,9 @@
+<template>
+  <button class="Button" @click="emit('click')">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['click'])
+</script>

app/components/Pp/FormInput.vue

@@ -1,6 +1,16 @@
 <template>
-  <div class="Input">
-    <input :type="type" :id="makeId()" placeholder=" " :min="min" :max="max" />
+  <div class="Input flex-col">
+    <input
+        v-model="text"
+        :type="type"
+        :id="makeId()"
+        :step="step"
+        :min="min"
+        :max="max"
+        :required="required"
+        placeholder=" "
+        @blur="emit('blur')"
+    />
     <label :for="makeId()">{{ label }}</label>
   </div>
 </template>
@@ -10,6 +20,8 @@ type Props = {
   type ?: 'text' | 'number'
   max ?: number
   min ?: number
+  step ?: number
+  required ?: boolean
   label : string
   id : string
   uid : number
@@ -17,6 +29,8 @@ type Props = {
 
 const {
   type = 'text',
+  required = false,
+  step = 0.01,
   min = 1,
   max,
   label,
@@ -24,5 +38,9 @@ const {
   uid,
 } = defineProps<Props>()
 
+const emit = defineEmits(['blur'])
+
+const text = defineModel()
+
 const makeId = () => `${id}_${uid}`
 </script>

app/components/Pp/Header.vue

@@ -5,11 +5,11 @@
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
     <input type="checkbox" id="burger_nav_toggle" />
-    <nav>
+    <nav class="flex-col">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
-      <ul>
+      <ul class="flex-col">
         <li>Home</li>
         <li>Übersicht</li>
       </ul>

app/components/Pp/PriceCard.vue

@@ -1,13 +1,32 @@
 <template>
-  <form class="PriceCard">
-    <div class="wrapper">
-      <PpFormInput label="Name" id="n" :uid="uid" type="text" />
-      <PpFormInput label="Preis" id="p" :uid="uid" type="number" :min="0.01" />
+  <form class="PriceCard card">
+    <div class="padding bg-blue flex-col">
+      <div class="wrapper">
+        <PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />
+        <PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
+      </div>
+      <div class="wrapper">
+        <PpFormInput v-model="roles" label="Rollen" id="r" :uid="uid" type="number" :max="150" @blur="calculate" />
+        <PpFormInput v-model="sheets" label="Blätter" id="b" :uid="uid" type="number" :max="500" @blur="calculate" />
+        <PpFormInput v-model="layers" label="Lagen" id="l" :uid="uid" type="number" :max="10" @blur="calculate" />
+      </div>
     </div>
-    <div class="wrapper">
-      <PpFormInput label="Rollen" id="r" :uid="uid" type="number" :max="150" />
-      <PpFormInput label="Blätter" id="b" :uid="uid" type="number" :max="500" />
-      <PpFormInput label="Lagen" id="l" :uid="uid" type="number" :max="10" />
+    <div class="wrapper padding bg-white">
+      <div class="info flex-col">
+        <Icon class="icon" name="uil:toilet-paper" mode="svg" />
+        <span class="price">{{ intl.format(ppr) }}</span>
+        <span class="pro">Pro 1</span>
+      </div>
+      <div class="info flex-col">
+        <Icon class="icon" name="uil:file-landscape" mode="svg" />
+        <span class="price">{{ intl.format(ppr) }}</span>
+        <span class="pro">Pro 10</span>
+      </div>
+      <div class="info flex-col">
+        <Icon class="icon" name="uil:layer-group" mode="svg" />
+        <span class="price">{{ intl.format(ppl) }}</span>
+        <span class="pro">Pro 100</span>
+      </div>
     </div>
   </form>
 </template>
@@ -18,4 +37,30 @@ type Props = {
 }
 
 const { uid } = defineProps<Props>()
+
+const name = ref('')
+const price = ref(0)
+const roles = ref(0)
+const sheets = ref(0)
+const layers = ref(0)
+
+const ppr = ref(0)
+const pps = ref(0)
+const ppl = ref(0)
+
+const intl = Intl.NumberFormat('de-DE', {
+  style: 'currency',
+  currency: 'EUR',
+})
+
+const calculate = () => {
+  if (!price.value || !roles.value) return
+  ppr.value = price.value / roles.value
+
+  if (!sheets.value) return
+  pps.value = (ppr.value / sheets.value) * 10
+
+  if(!layers.value) return
+  ppl.value = (pps.value / layers.value) * 100
+}
 </script>

app/pages/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <PpPriceCard v-for="num in cards" :uid="num" />
-  <button @click="addCard">ADD</button>
+  <section class="content flex-col">
+    <div class="pc-wrapper flex-col">
+      <PpPriceCard v-for="num in cards" :uid="num" />
+    </div>
+    <PpButton class="cta" @click="addCard">
+      <Icon name="uil:plus" mode="svg" />
+      Vergleich hinzufügen
+    </PpButton>
+  </section>
 </template>
 
 <script setup lang="ts">