Add StickerView.
This commit is contained in:
parent
e41bf0b91b
commit
efb4e6990a
13 changed files with 369 additions and 4 deletions
|
|
@ -21,10 +21,10 @@ import OverlayBadge from 'primevue/overlaybadge';
|
|||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-item">
|
||||
<i class="pi pi-search nav-icon" />
|
||||
<span>Search</span>
|
||||
</a>
|
||||
<RouterLink class="nav-item" to="/sticker">
|
||||
<i class="pi pi-image nav-icon" />
|
||||
<span>Sticker</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-item">
|
||||
|
|
|
|||
26
src/components/QRCode.vue
Normal file
26
src/components/QRCode.vue
Normal file
|
|
@ -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>
|
||||
19
src/components/layouts/IconLayout1.vue
Normal file
19
src/components/layouts/IconLayout1.vue
Normal file
|
|
@ -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>
|
||||
20
src/components/layouts/IconLayout2.vue
Normal file
20
src/components/layouts/IconLayout2.vue
Normal file
|
|
@ -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>
|
||||
20
src/components/layouts/IconLayout3.vue
Normal file
20
src/components/layouts/IconLayout3.vue
Normal file
|
|
@ -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>
|
||||
22
src/components/layouts/IconLayout4.vue
Normal file
22
src/components/layouts/IconLayout4.vue
Normal file
|
|
@ -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>
|
||||
7
src/components/layouts/IconSupport.vue
Normal file
7
src/components/layouts/IconSupport.vue
Normal file
|
|
@ -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>
|
||||
9
src/components/layouts/layout-1.svg
Normal file
9
src/components/layouts/layout-1.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 303 B |
10
src/components/layouts/layout-2.svg
Normal file
10
src/components/layouts/layout-2.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 355 B |
11
src/components/layouts/layout-3.svg
Normal file
11
src/components/layouts/layout-3.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 404 B |
12
src/components/layouts/layout-4.svg
Normal file
12
src/components/layouts/layout-4.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 456 B |
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
|
|
|||
203
src/views/StickerView.vue
Normal file
203
src/views/StickerView.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue