Add StickerView.

src/App.vue

@@ -21,10 +21,10 @@ import OverlayBadge from 'primevue/overlaybadge';
               </RouterLink>
             </li>
             <li>
-              <a class="nav-item">
+              <RouterLink class="nav-item" to="/sticker">
-                <i class="pi pi-search nav-icon" />
+                <i class="pi pi-image nav-icon" />
-                <span>Search</span>
+                <span>Sticker</span>
-              </a>
+              </RouterLink>
             </li>
             <li>
               <a class="nav-item">

src/components/QRCode.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="qr-code">
+    <span class="grid">QR</span>
+    <span class="uuid">1337-9339</span>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  font-size: 200%;
+}
+.qr-code {
+  align-items: center;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  height: 80px;
+  justify-content: center;
+  width: 80px;
+}
+.uuid {
+  color: rgba(51, 51, 51, 0.91);
+  font-size: 90%;
+  font-family: monospace;
+}
+</style>

src/components/layouts/IconLayout1.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="iconify iconify--mdi"
+    height="60"
+    role="img"
+    width="200"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+    <g stroke-width="1" stroke="#888" fill="white">
+      <rect x="0" y="0" width="200" height="60"/>
+      <g fill="#CCC">
+        <rect x="5" y="5" width="50" height="50"/>
+        <rect x="60" y="5" width="135" height="50"/>
+      </g>
+    </g>
+  </svg>
+</template>
+<script setup lang="ts">
+</script>

src/components/layouts/IconLayout2.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="iconify iconify--mdi"
+    height="60"
+    role="img"
+    width="200"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+    <g stroke-width="1" stroke="#888" fill="white">
+      <rect x="0" y="0" width="200" height="60"/>
+      <g fill="#CCC">
+        <rect x="5" y="5" width="50" height="50"/>
+        <rect x="60" y="5" width="135" height="25"/>
+        <rect x="60" y="35" width="135" height="20"/>
+      </g>
+    </g>
+  </svg>
+</template>
+<script setup lang="ts">
+</script>

src/components/layouts/IconLayout3.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="iconify iconify--mdi"
+    height="60"
+    role="img"
+    width="200"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+    <g stroke-width="1" stroke="#888" fill="white">
+      <rect x="0" y="0" width="200" height="60"/>
+      <g fill="#CCC">
+        <rect x="5" y="5" width="50" height="50"/>
+        <rect x="60" y="5" width="40" height="50"/>
+        <rect x="105" y="5" width="40" height="50"/>
+        <rect x="150" y="5" width="40" height="50"/>
+      </g>
+    </g>  </svg>
+</template>
+<script setup lang="ts">
+</script>

src/components/layouts/IconLayout4.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="iconify iconify--mdi"
+    height="60"
+    role="img"
+    width="200"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+    <g stroke-width="1" stroke="#888" fill="white">
+      <rect x="0" y="0" width="200" height="60"/>
+      <g fill="#CCC">
+        <rect x="5" y="5" width="50" height="50"/>
+        <rect x="60" y="5" width="65" height="25"/>
+        <rect x="60" y="35" width="65" height="20"/>
+        <rect x="130" y="5" width="65" height="25"/>
+        <rect x="130" y="35" width="65" height="20"/>
+      </g>
+    </g>
+  </svg>
+</template>
+<script setup lang="ts">
+</script>

src/components/layouts/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

src/components/layouts/layout-1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+  <g stroke-width="1" stroke="#888" fill="white">
+    <rect x="0" y="0" width="200" height="60"/>
+    <g fill="#CCC">
+      <rect x="5" y="5" width="50" height="50"/>
+      <rect x="60" y="5" width="135" height="50"/>
+    </g>
+  </g>
+</svg>

src/components/layouts/layout-2.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+  <g stroke-width="1" stroke="#888" fill="white">
+    <rect x="0" y="0" width="200" height="60"/>
+    <g fill="#CCC">
+      <rect x="5" y="5" width="50" height="50"/>
+      <rect x="60" y="5" width="135" height="25"/>
+      <rect x="60" y="35" width="135" height="20"/>
+    </g>
+  </g>
+</svg>

src/components/layouts/layout-3.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+  <g stroke-width="1" stroke="#888" fill="white">
+    <rect x="0" y="0" width="200" height="60"/>
+    <g fill="#CCC">
+      <rect x="5" y="5" width="50" height="50"/>
+      <rect x="60" y="5" width="40" height="50"/>
+      <rect x="105" y="5" width="40" height="50"/>
+      <rect x="150" y="5" width="40" height="50"/>
+    </g>
+  </g>
+</svg>

src/components/layouts/layout-4.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
+  <g stroke-width="1" stroke="#888" fill="white">
+    <rect x="0" y="0" width="200" height="60"/>
+    <g fill="#CCC">
+      <rect x="5" y="5" width="50" height="50"/>
+      <rect x="60" y="5" width="65" height="25"/>
+      <rect x="60" y="35" width="65" height="20"/>
+      <rect x="130" y="5" width="65" height="25"/>
+      <rect x="130" y="35" width="65" height="20"/>
+    </g>
+  </g>
+</svg>

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import AboutView from '../views/AboutView.vue'
+import StickerView from '../views/StickerView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +16,11 @@ const router = createRouter({
       name: 'about',
       component: AboutView,
     },
+    {
+      path: '/sticker',
+      name: 'sticker',
+      component: StickerView,
+    },
   ],
 })
 

src/views/StickerView.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import ColorPicker from 'primevue/colorpicker';
+import { Form } from '@primevue/forms';
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from 'primevue/inputgroupaddon';
+import InputText from 'primevue/inputtext';
+import IconLayout1Vue from '@/components/layouts/IconLayout1.vue';
+import IconLayout2Vue from '@/components/layouts/IconLayout2.vue';
+import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
+import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
+import QRCode from "@/components/QRCode.vue";
+import RadioButton from 'primevue/radiobutton';
+import Select from 'primevue/select';
+import ToggleSwitch from 'primevue/toggleswitch';
+import { ref } from 'vue';
+
+const checked = ref(true);
+const selectedCountry = ref(null);
+const countries = ref([
+  { name: 'Afghanistan', code: 'AF' },
+  { name: 'Åland Islands', code: 'AX' },
+  { name: 'Albania', code: 'AL' },
+  { name: 'Algeria', code: 'DZ' },
+  { name: 'American Samoa', code: 'AS' },
+  { name: 'AndorrA', code: 'AD' },
+  { name: 'Angola', code: 'AO' },
+  { name: 'Anguilla', code: 'AI' },
+  { name: 'Antarctica', code: 'AQ' },
+  { name: 'Antigua and Barbuda', code: 'AG' },
+  { name: 'Argentina', code: 'AR' },
+  { name: 'Armenia', code: 'AM' },
+  { name: 'Aruba', code: 'AW' },
+  { name: 'Australia', code: 'AU' },
+  { name: 'Austria', code: 'AT' },
+  { name: 'Azerbaijan', code: 'AZ' },
+  { name: 'Bahamas', code: 'BS' }
+]);
+const initialValues = {};
+const resolver = () => {
+  return {};
+};
+
+const layout = defineModel('layout');
+const message1 = defineModel('message1');
+message1.value = "I AM A TREEHUGGER";
+const message2 = defineModel('message2');
+message2.value = "";
+const color = defineModel('background-color');
+
+function onFormSubmit() {
+  return {};
+}
+</script>
+
+<template>
+  <div id="StickerPage">
+    <h1>Sticker</h1>
+    <div id="StickerWrapper">
+      <div id="Sticker">
+        <QRCode></QRCode>
+        <div class="message">{{ message1 }}</div>
+        <div class="message">{{ message2 }}</div>
+      </div>
+      <Button type="submit" severity="secondary" label="Take a snapshot" />
+    </div>
+    <Card style="width: 75%">
+      <template #content>
+        <Form v-slot="$form"
+              v-bind:initialValues
+              v-bind:resolver="resolver"
+              @submit="onFormSubmit">
+          <div class="bg-surface-50 dark:bg-surface-950 px-6 py-10 md:px-12 lg:px-5">
+            <div class="grid grid-cols-12 gap-4">
+              <div class="col-span-12">
+                <label for="nickname2">Layout</label>
+                <div class="flex flex-wrap gap-4">
+                  <div class="flex items-center gap-2">
+                    <RadioButton v-model="layout" inputId="layout1" name="pizza" value="Cheese" />
+                    <label for="layout1"><IconLayout1Vue /></label>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <RadioButton v-model="layout" inputId="layout2" name="pizza" value="Mushroom" />
+                    <label for="layout2"><IconLayout2Vue /></label>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <RadioButton v-model="layout" inputId="layout3" name="pizza" value="Pepper" />
+                    <label for="layout3"><IconLayout3Vue /></label>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <RadioButton v-model="layout" inputId="layout4" name="pizza" value="Onion" />
+                    <label for="layout4"><IconLayout4Vue /></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12 md:col-span-6">
+                <label for="message1">Message 1</label>
+                <InputText class="w-full" id="message1" name="message1" type="text" v-model="message1" fluid />
+              </div>
+              <div class="col-span-12 md:col-span-6">
+                <label for="message2">Message 2</label>
+                <InputText class="w-full" id="message2" name="message1" type="text" v-model="message2" fluid />
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12 md:col-span-6">
+                <label for="email2">Background Color</label>
+                <ColorPicker v-model="color" />
+              </div>
+              <div class="col-span-12 md:col-span-6">
+                <label for="country2">Country</label>
+                <Select id="country2" v-model="selectedCountry" :options="countries" option-label="name" :filter="true" filter-by="name" :show-clear="true" placeholder="Select a Country" class="w-full">
+                  <template #option="slotProps">
+                    <div class="flex items-center">
+                      <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/flag/flag_placeholder.png" :class="'mr-2 w-[18px]' + slotProps.option.code.toLowerCase()" />
+                      <div>{{ slotProps.option.name }}</div>
+                    </div>
+                  </template>
+                </Select>
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12 md:col-span-6">
+                <label for="city2">City</label>
+                <InputText id="city2" type="text" class="w-full" />
+              </div>
+              <div class="col-span-12 md:col-span-6">
+                <label for="state2">State</label>
+                <InputText id="state2" type="text" class="w-full" />
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12">
+                <label for="nickname2">My note about this sticker</label>
+                <InputText id="nickname2" type="text" class="w-full" placeholder="First one I made" />
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12">
+                <label for="website2">Website</label>
+                <InputGroup>
+                  <InputGroupAddon>URL</InputGroupAddon>
+                  <InputText id="website2" placeholder="https://" />
+                </InputGroup>
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12">
+                <label for="privacy2">Privacy</label>
+                <div class="flex items-center">
+                  <ToggleSwitch id="privacy2" v-model="checked" />
+                  <span class="ml-2">Share my data with contacts</span>
+                </div>
+              </div>
+
+              <div class="divider" />
+
+              <div class="col-span-12">
+                <Button label="Save Changes" class="w-auto mt-4" />
+              </div>
+            </div>
+          </div>
+        </Form>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<style>
+label {
+  @apply font-medium text-surface-900 dark:text-surface-0 mb-1 block;
+}
+.divider {
+  @apply border-surface border-t opacity-50 mb-4 col-span-12;
+}
+.message {
+  font-size: 2.5rem;
+  color: white;
+  font-weight: bold;
+}
+#Sticker {
+  background-color: darkgreen;
+  display: flex;
+  left: 30px;
+  height: 100px;
+  padding: 10px;
+  top: 30px;
+  width: 500px;
+}
+#StickerWrapper {
+  display: flex;
+  margin: 30px;
+}
+</style>