INIT: initial commit

Added some initial files, components, functionality

app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <PpHeader />
+  <NuxtPage />
+  <PpFooter />
+</template>

app/assets/styles/formInput.css

@@ -0,0 +1,46 @@
+.Input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 25% 1 0;
+    border: 2px solid var(--color-blue);
+    border-radius: var(--radius-default);
+    overflow: hidden;
+    transition: var(--transition-default);
+    outline: 0 solid var(--color-white);
+
+    & label {
+        position: absolute;
+        left: .5rem;
+        font-size: 1.5em;
+        top: .7rem;
+        transition: var(--transition-default);
+    }
+
+    & input {
+        all: unset;
+        width: calc(100% - 1rem);
+        font-size: 1.2em;
+        padding: 1.3rem .5rem .5rem .5rem;
+        background: var(--color-white);
+
+        &[type="number"] {
+            text-align: right;
+        }
+    }
+
+    &:has(input:invalid) {
+        border-color: var(--color-red);
+        outline-width: 2px;
+    }
+
+    & input:focus,
+    & input:not(:placeholder-shown) {
+        & + label {
+            color: var(--color-main);
+            font-size: 1em;
+            top: .3rem;
+            right: .5rem;
+        }
+    }
+}

app/assets/styles/general.css

@@ -0,0 +1,27 @@
+:root {
+    --padding-default: 1rem;
+    --radius-default: 5px;
+    --transition-default: 150ms;
+
+    --color-white: white;
+    --color-red: #cc0001;
+    --color-blue-dark: #341f97;
+    --color-blue: #2e86de;
+    --color-grey: #c7c7c7;
+
+    --color-main: var(--color-blue);
+
+    --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    overflow-x: hidden;
+}

app/assets/styles/header.css

@@ -0,0 +1,52 @@
+.Header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--padding-default);
+    box-shadow: var(--box-shadow-z2);
+
+    & strong {
+        font-size: 2em;
+        & span {
+            color: var(--color-main);
+        }
+    }
+
+    & input[type="checkbox"] {
+        display: none;
+    }
+
+    & input[type="checkbox"]:checked + nav {
+        translate: 0;
+    }
+
+    & nav,
+    & ul {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+    }
+
+    & nav {
+        position: fixed;
+        padding: var(--padding-default);
+        translate: 100% 0;
+        width: 100vw;
+        right: 0;
+        top: 0;
+        height: 100dvh;
+        transition: 150ms ease-in-out;
+        background: var(--color-white);
+        font-size: 2em;
+        align-items: end;
+        z-index: 100;
+    }
+
+    & ul {
+        width: 100%;
+        align-items: center;
+        & li {
+            list-style: none;
+        }
+    }
+}

app/assets/styles/priceCard.css

@@ -0,0 +1,16 @@
+.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 {
+        display: flex;
+        width: 100%;
+        gap: 1rem;
+        justify-content: space-between;
+    }
+}

app/components/Pp/Footer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>THIS IS A FOOTER</div>
+</template>
+
+<script setup lang="ts">
+
+</script>

app/components/Pp/FormInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="Input">
+    <input :type="type" :id="makeId()" placeholder=" " min="1" :max="max" />
+    <label :for="makeId()">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  type ?: 'text' | 'number'
+  max ?: number
+  label : string
+  id : string
+  uid : number
+}
+
+const {
+  type = 'text',
+  max = 10,
+  label,
+  id,
+  uid,
+} = defineProps<Props>()
+
+const makeId = () => `${id}_${uid}`
+</script>

app/components/Pp/Header.vue

@@ -0,0 +1,22 @@
+<template>
+  <header class="Header">
+    <strong><span>Pro</span>Papier</strong>
+    <label for="burger_nav_toggle">
+      <Icon name="solar:hamburger-menu-broken" size="2em" />
+    </label>
+    <input type="checkbox" id="burger_nav_toggle" />
+    <nav>
+      <label for="burger_nav_toggle">
+        <Icon name="solar:close-circle-broken" />
+      </label>
+      <ul>
+        <li>Home</li>
+        <li>Übersicht</li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+
+</script>

app/components/Pp/PriceCard.vue

@@ -0,0 +1,21 @@
+<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" />
+    </div>
+    <div class="wrapper">
+      <PpFormInput label="Rollen" id="r" :uid="uid" type="number" />
+      <PpFormInput label="Blätter" id="b" :uid="uid" type="number" />
+      <PpFormInput label="Lagen" id="l" :uid="uid" type="number" />
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  uid: number
+}
+
+const { uid } = defineProps<Props>()
+</script>

app/pages/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <PpPriceCard v-for="num in cards" :uid="num" />
+  <button @click="addCard">ADD</button>
+</template>
+
+<script setup lang="ts">
+const cards = ref(1)
+
+const addCard = () => {
+  cards.value++
+}
+</script>