Aran Roig
626612b8f0
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 40s
584 lines
14 KiB
Vue
584 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import FullscreenLayout from '~/components/layouts/FullscreenLayout.vue';
|
|
import StickyHeader from '~/components/parts/StickyHeader.vue';
|
|
import HiboliaScene from '~/components/widgets/HiboliaScene.vue';
|
|
import HiboliaDeckPreview from '~/components/widgets/HiboliaDeckPreview.vue';
|
|
|
|
useHead({
|
|
title: 'Deck Request | Aran Roig',
|
|
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
|
});
|
|
|
|
const { post } = useApi();
|
|
|
|
const COLOR_OPTIONS = [
|
|
{ value: 'red', hex: '#d64545' },
|
|
{ value: 'gold', hex: '#d4af37' },
|
|
{ value: 'silver', hex: '#c0c0c0' },
|
|
{ value: 'orange', hex: '#e0823c' },
|
|
{ value: 'yellow', hex: '#e2cf3c' },
|
|
{ value: 'green', hex: '#5fae4e' },
|
|
{ value: 'blue', hex: '#4c8be0' },
|
|
{ value: 'purple', hex: '#9b59d0' },
|
|
{ value: 'black', hex: '#1a1a1a' },
|
|
{ value: 'white', hex: '#f2f2f2' },
|
|
{ value: 'pink', hex: '#e88fb3' },
|
|
{ value: 'turquoise', hex: '#40c4b8' },
|
|
{ value: 'teal', hex: '#17857c' },
|
|
{ value: 'navy', hex: '#34549c' },
|
|
{ value: 'lavender', hex: '#b98fe0' },
|
|
{ value: 'magenta', hex: '#cf479f' },
|
|
{ value: 'lime', hex: '#a8d14e' },
|
|
{ value: 'coral', hex: '#ef8368' },
|
|
{ value: 'custom', hex: '#40c4b8' },
|
|
{ value: 'none', hex: '#9e9e9e' }
|
|
];
|
|
|
|
const DEFAULT_CUSTOM_COLOR = '#40c4b8';
|
|
const HEX_COLOR_RE = /^#[0-9a-fA-F]{6}$/;
|
|
|
|
const form = reactive({
|
|
name: '',
|
|
surname: '',
|
|
email: '',
|
|
message: '',
|
|
color: 'none',
|
|
customColor: DEFAULT_CUSTOM_COLOR,
|
|
shipping: ''
|
|
});
|
|
|
|
const DEFAULT_EDGE_COLOR = '#d8d2c6';
|
|
|
|
const selectedColorHex = computed(() => {
|
|
if (form.color === 'custom') return form.customColor;
|
|
if (form.color === 'none') return DEFAULT_EDGE_COLOR;
|
|
return COLOR_OPTIONS.find((o) => o.value === form.color)?.hex ?? DEFAULT_EDGE_COLOR;
|
|
});
|
|
|
|
const submitting = ref(false);
|
|
const errorMsg = ref('');
|
|
|
|
const localePath = useLocalePath();
|
|
|
|
const onSubmit = async () => {
|
|
if (submitting.value) return;
|
|
errorMsg.value = '';
|
|
|
|
if (
|
|
!form.name.trim() ||
|
|
!form.surname.trim() ||
|
|
!form.email.trim() ||
|
|
!form.message.trim() ||
|
|
!form.color ||
|
|
!form.shipping.trim()
|
|
) {
|
|
errorMsg.value = $t('order.hibolia.error_required');
|
|
return;
|
|
}
|
|
|
|
if (form.color === 'custom' && !HEX_COLOR_RE.test(form.customColor)) {
|
|
errorMsg.value = $t('order.hibolia.error_invalid_color');
|
|
return;
|
|
}
|
|
|
|
submitting.value = true;
|
|
try {
|
|
await post('/hibolia/orders', {
|
|
name: form.name.trim(),
|
|
surname: form.surname.trim(),
|
|
email: form.email.trim(),
|
|
message: form.message.trim(),
|
|
color: form.color,
|
|
customColor:
|
|
form.color === 'custom' ? form.customColor.toLowerCase() : undefined,
|
|
shipping: form.shipping.trim()
|
|
});
|
|
form.name = '';
|
|
form.surname = '';
|
|
form.email = '';
|
|
form.message = '';
|
|
form.color = 'none';
|
|
form.customColor = DEFAULT_CUSTOM_COLOR;
|
|
form.shipping = '';
|
|
await navigateTo(localePath('/projects/hibolia/thanks'));
|
|
} catch (e: any) {
|
|
errorMsg.value = e?.status === 400
|
|
? $t('order.hibolia.error_invalid')
|
|
: $t('order.hibolia.error_generic');
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<FullscreenLayout>
|
|
<HiboliaScene class="order-scene" aria-hidden="true" />
|
|
|
|
<Container class="full-bg">
|
|
<div class="order-layout">
|
|
<form class="order-form" @submit.prevent="onSubmit">
|
|
<h1 class="order-title">{{ $t('order.hibolia.form_title') }}</h1>
|
|
|
|
<p>{{ $t('order.hibolia.intro') }}</p>
|
|
<p>{{ $t('order.hibolia.includes') }}</p>
|
|
<ul>
|
|
<li>{{ $t('order.hibolia.includes_box') }}</li>
|
|
<li>
|
|
{{ $t('order.hibolia.includes_cards') }}
|
|
<ul>
|
|
<li>{{ $t('order.hibolia.includes_suits') }}</li>
|
|
<li>{{ $t('order.hibolia.includes_jokers') }}</li>
|
|
<li>{{ $t('order.hibolia.includes_extra') }}</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>{{ $t('order.hibolia.basics_intro') }}</p>
|
|
|
|
<div class="field">
|
|
<label for="order-name">{{ $t('order.hibolia.name_label') }}:</label>
|
|
<input
|
|
id="order-name"
|
|
v-model="form.name"
|
|
type="text"
|
|
name="name"
|
|
autocomplete="given-name"
|
|
:disabled="submitting"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="order-surname">{{ $t('order.hibolia.surname_label') }}:</label>
|
|
<input
|
|
id="order-surname"
|
|
v-model="form.surname"
|
|
type="text"
|
|
name="surname"
|
|
autocomplete="family-name"
|
|
:disabled="submitting"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="order-email">{{ $t('order.hibolia.email_label') }}:</label>
|
|
<input
|
|
id="order-email"
|
|
v-model="form.email"
|
|
type="email"
|
|
name="email"
|
|
autocomplete="email"
|
|
spellcheck="false"
|
|
:disabled="submitting"
|
|
required
|
|
/>
|
|
</div>
|
|
<p>{{ $t('order.hibolia.dragon_intro') }}</p>
|
|
<div class="field field-block">
|
|
<label for="order-message">{{ $t('order.hibolia.message_label') }}:</label>
|
|
<textarea
|
|
id="order-message"
|
|
v-model="form.message"
|
|
name="message"
|
|
rows="6"
|
|
maxlength="2000"
|
|
:disabled="submitting"
|
|
required
|
|
/>
|
|
</div>
|
|
<p>{{ $t('order.hibolia.edges_intro') }}</p>
|
|
<p>{{ $t('order.hibolia.edges_color_prompt') }}</p>
|
|
<fieldset class="field field-block color-field">
|
|
<legend>{{ $t('order.hibolia.color_label') }}:</legend>
|
|
<div class="color-grid">
|
|
<label
|
|
v-for="option in COLOR_OPTIONS"
|
|
:key="option.value"
|
|
class="color-option"
|
|
:class="{ selected: form.color === option.value }"
|
|
>
|
|
<input
|
|
v-model="form.color"
|
|
type="radio"
|
|
name="color"
|
|
:value="option.value"
|
|
:disabled="submitting"
|
|
:id="`order-color-${option.value}`"
|
|
/>
|
|
<span
|
|
class="swatch"
|
|
:style="{ background: option.value === 'custom' ? form.customColor : option.hex }"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span class="color-name">{{ $t(`order.hibolia.colors.${option.value}`) }}</span>
|
|
</label>
|
|
</div>
|
|
<div v-if="form.color === 'custom'" class="custom-color-row">
|
|
<label for="order-custom-color">{{ $t('order.hibolia.custom_color_label') }}:</label>
|
|
<input
|
|
id="order-custom-color"
|
|
v-model="form.customColor"
|
|
type="color"
|
|
name="customColor"
|
|
:disabled="submitting"
|
|
/>
|
|
<span class="custom-color-hex">{{ form.customColor }}</span>
|
|
</div>
|
|
<p v-if="form.color === 'custom'" class="custom-color-note">
|
|
{{ $t('order.hibolia.custom_color_note') }}
|
|
</p>
|
|
</fieldset>
|
|
|
|
<p>{{ $t('order.hibolia.preview_note') }}</p>
|
|
|
|
<HiboliaDeckPreview class="deck-preview" :color="selectedColorHex" />
|
|
|
|
<i18n-t keypath="order.hibolia.edges_advice" tag="p">
|
|
<template #please><b>{{ $t('order.hibolia.please') }}</b></template>
|
|
</i18n-t>
|
|
|
|
<p>{{ $t('order.hibolia.final_intro') }}</p>
|
|
<ul>
|
|
<li>{{ $t('order.hibolia.final_design') }}</li>
|
|
<li>{{ $t('order.hibolia.final_delivery_time') }}</li>
|
|
<li>{{ $t('order.hibolia.final_delivery_inperson') }}</li>
|
|
<li>{{ $t('order.hibolia.final_price') }}</li>
|
|
<li>{{ $t('order.hibolia.final_payment_methods') }}</li>
|
|
<li>{{ $t('order.hibolia.final_payment_deadline') }}</li>
|
|
<li>{{ $t('order.hibolia.final_tip') }}</li>
|
|
</ul>
|
|
<p>{{ $t('order.hibolia.comments_prompt') }}</p>
|
|
<div class="field field-block">
|
|
<label for="order-shipping">{{ $t('order.hibolia.comments_label') }}:</label>
|
|
<textarea
|
|
id="order-shipping"
|
|
v-model="form.shipping"
|
|
name="shipping"
|
|
rows="6"
|
|
maxlength="2000"
|
|
:disabled="submitting"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<p v-if="errorMsg" class="order-error" role="alert">✗ {{ errorMsg }}</p>
|
|
|
|
<button type="submit" class="order-btn" :disabled="submitting">
|
|
<span v-if="!submitting">> {{ $t('order.hibolia.submit') }}</span>
|
|
<span v-else class="blink">{{ $t('order.hibolia.submitting') }}</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</Container>
|
|
</FullscreenLayout>
|
|
<StickyHeader always-visible />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.tui-frame.full-bg {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: transparent;
|
|
|
|
:deep(.tui-inner) {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-top: 52px;
|
|
background: var(--color-background-fore);
|
|
}
|
|
|
|
:deep(.frame-corner-tr),
|
|
:deep(.frame-corner-br) {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.order-title {
|
|
font-family: 'Hurmit', monospace;
|
|
margin-bottom: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.order-prompt {
|
|
font-size: 0.92rem;
|
|
color: var(--color-text);
|
|
opacity: 0.75;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.order-layout {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.order-form {
|
|
flex: 1;
|
|
max-width: 860px;
|
|
min-width: 0;
|
|
margin: 0 auto;
|
|
padding: 100px 0;
|
|
|
|
ul {
|
|
list-style: disc;
|
|
padding-left: 28px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
ul ul {
|
|
list-style: circle;
|
|
}
|
|
|
|
li {
|
|
padding: 2px 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
p {
|
|
margin: 12px 0;
|
|
}
|
|
}
|
|
|
|
.order-scene {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
filter: blur(10px);
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
|
|
label {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.9rem;
|
|
color: var(--color-link);
|
|
min-width: 90px;
|
|
text-align: right;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
flex: 1;
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.95rem;
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border-color);
|
|
padding: 8px 10px;
|
|
outline: none;
|
|
min-width: 0;
|
|
|
|
&:focus {
|
|
border-color: var(--color-link);
|
|
box-shadow: 2px -2px 0 0 var(--color-frame-glow);
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-block {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
|
|
label {
|
|
text-align: left;
|
|
min-width: 0;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
}
|
|
|
|
.color-field {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0 0 14px;
|
|
|
|
legend {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.9rem;
|
|
color: var(--color-link);
|
|
margin-bottom: 8px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.color-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.custom-color-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
|
|
label {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.9rem;
|
|
color: var(--color-link);
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
input[type='color'] {
|
|
width: 48px;
|
|
height: 30px;
|
|
padding: 2px;
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border-color);
|
|
cursor: pointer;
|
|
|
|
&:focus-visible {
|
|
outline: 1px dashed var(--color-link);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.custom-color-hex {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
.custom-color-note {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--color-text);
|
|
opacity: 0.75;
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
.deck-preview {
|
|
height: 300px;
|
|
margin: 0 0 14px;
|
|
border: 1px solid var(--color-border-color);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
.color-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid var(--color-border-color);
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
transition: all 120ms steps(3);
|
|
min-width: 0;
|
|
|
|
input[type='radio'] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.swatch {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid var(--color-border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.color-name {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.8rem;
|
|
color: var(--color-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
&.selected {
|
|
border-color: var(--color-link);
|
|
box-shadow: 2px -2px 0 0 var(--color-frame-glow);
|
|
background: var(--color-hover);
|
|
|
|
.color-name {
|
|
color: var(--color-link);
|
|
}
|
|
}
|
|
|
|
input[type='radio']:focus-visible ~ .swatch {
|
|
outline: 1px dashed var(--color-link);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.order-error {
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 0.85rem;
|
|
color: #e05c5c;
|
|
margin: 4px 0 12px;
|
|
}
|
|
|
|
.order-btn {
|
|
display: block;
|
|
font-family: 'Hurmit', monospace;
|
|
font-size: 1.05rem;
|
|
color: #d4d4d4;
|
|
background: #000;
|
|
border: 1px solid var(--color-border-color);
|
|
padding: 14px 42px;
|
|
cursor: pointer;
|
|
transition: all 120ms steps(3);
|
|
margin: 0 auto;
|
|
|
|
&:hover:not(:disabled) {
|
|
border-color: var(--color-link);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: wait;
|
|
}
|
|
}
|
|
|
|
.blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50%, 100% { opacity: 1; }
|
|
25%, 75% { opacity: 0; }
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.field {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
|
|
label {
|
|
text-align: left;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.color-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|