Syndria98/aranroig.com
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

More colors
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 50s
Details

Browse Source
This commit is contained in:
Aran Roig
2026-09-20 12:50:40 +02:00
parent f19f482433
commit a5d5ead38a
8 changed files with 178 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/app/pages/admin/index.vue
View File

@@ -22,9 +22,22 @@ const COLOR_HEX: Record<string, string> = {
yellow: '#e2cf3c',
green: '#5fae4e',
blue: '#4c8be0',
purple: '#9b59d0'
purple: '#9b59d0',
black: '#1a1a1a',
white: '#f2f2f2',
pink: '#e88fb3',
turquoise: '#40c4b8',
teal: '#17857c',
navy: '#34549c',
lavender: '#b98fe0',
magenta: '#cf479f',
lime: '#a8d14e',
coral: '#ef8368'
};
const orderSwatch = (order: any) =>
order.color === 'custom' ? order.customColor : COLOR_HEX[order.color] || 'transparent';
const formatUptime = (seconds: number) => {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
@@ -153,8 +166,8 @@ const onLogout = () => redirectToLogin();
<td class="msg-cell">{{ order.message }}</td>
<td>
<span class="color-chip">
<span class="swatch" :style="{ background: COLOR_HEX[order.color] || 'transparent' }" aria-hidden="true"></span>
{{ $t(`order.hibolia.colors.${order.color}`) }}
<span class="swatch" :style="{ background: orderSwatch(order) }" aria-hidden="true"></span>
{{ $t(`order.hibolia.colors.${order.color}`) }}<template v-if="order.color === 'custom'"> {{ order.customColor }}</template>
</span>
</td>
<td class="msg-cell">{{ order.shipping }}</td>

95
frontend/app/pages/projects/hibolia/order.vue
View File

@@ -23,23 +23,37 @@ const COLOR_OPTIONS = [
{ 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: '',
color: 'none',
customColor: DEFAULT_CUSTOM_COLOR,
shipping: ''
});
const DEFAULT_EDGE_COLOR = '#d8d2c6';
const selectedColorHex = computed(
() => COLOR_OPTIONS.find((o) => o.value === form.color)?.hex ?? DEFAULT_EDGE_COLOR
);
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('');
@@ -62,6 +76,11 @@ const onSubmit = async () => {
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', {
@@ -70,13 +89,16 @@ const onSubmit = async () => {
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 = '';
form.color = 'none';
form.customColor = DEFAULT_CUSTOM_COLOR;
form.shipping = '';
await navigateTo(localePath('/projects/hibolia/thanks'));
} catch (e: any) {
@@ -185,10 +207,28 @@ const onSubmit = async () => {
:disabled="submitting"
:id="`order-color-${option.value}`"
/>
<span class="swatch" :style="{ background: option.hex }" aria-hidden="true"></span>
<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>
@@ -383,6 +423,49 @@ const onSubmit = async () => {
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;

11
frontend/i18n/locales/ca.json
View File

@@ -69,6 +69,8 @@
"email_label": "correu",
"message_label": "missatge",
"color_label": "color",
"custom_color_label": "color personalitzat",
"custom_color_note": "El pintaré amb el color que més s'assembli al que has seleccionat",
"shipping_label": "enviament",
"colors": {
"red": "Vermell",
@@ -82,6 +84,14 @@
"black": "Negre",
"white": "Blanc",
"pink": "Rosa",
"turquoise": "Turquesa",
"teal": "Verd blavós",
"navy": "Blau marí",
"lavender": "Llavanda",
"magenta": "Magenta",
"lime": "Verd llima",
"coral": "Coral",
"custom": "Personalitzat",
"none": "Cap"
},
"submit": "enviar comanda",
@@ -89,6 +99,7 @@
"success": "Comanda enviada correctament.",
"error_required": "Tots els camps són obligatoris.",
"error_invalid": "Algunes dades no són vàlides. Revisa el formulari i torna-ho a provar.",
"error_invalid_color": "El color personalitzat no és vàlid.",
"error_generic": "No s'ha pogut enviar la comanda. Torna-ho a provar més tard.",
"form_title": "Formulari de comanda de baralla de cartes",
"intro": "Aquest formulari servirà per registrar oficialment la teva comanda de baralla de cartes.",

11
frontend/i18n/locales/en.json
View File

@@ -69,6 +69,8 @@
"email_label": "email",
"message_label": "message",
"color_label": "color",
"custom_color_label": "custom color",
"custom_color_note": "I will paint it with the color that most closely resembles the one you selected",
"shipping_label": "shipping",
"colors": {
"red": "Red",
@@ -82,6 +84,14 @@
"black": "Black",
"white": "White",
"pink": "Pink",
"turquoise": "Turquoise",
"teal": "Teal",
"navy": "Navy",
"lavender": "Lavender",
"magenta": "Magenta",
"lime": "Lime",
"coral": "Coral",
"custom": "Custom",
"none": "None"
},
"submit": "send order",
@@ -89,6 +99,7 @@
"success": "Order sent successfully.",
"error_required": "All fields are required.",
"error_invalid": "Some data is invalid. Check the form and try again.",
"error_invalid_color": "The custom color is not valid.",
"error_generic": "Could not send the order. Try again later.",
"form_title": "Playing card deck order form",
"intro": "This form will be used to officially register your playing card deck order.",

11
frontend/i18n/locales/es.json
View File

@@ -69,6 +69,8 @@
"email_label": "email",
"message_label": "mensaje",
"color_label": "color",
"custom_color_label": "color personalizado",
"custom_color_note": "Lo pintaré con el color que más se parezca al que has seleccionado",
"shipping_label": "envío",
"colors": {
"red": "Rojo",
@@ -82,6 +84,14 @@
"black": "Negro",
"white": "Blanco",
"pink": "Rosa",
"turquoise": "Turquesa",
"teal": "Verde azulado",
"navy": "Azul marino",
"lavender": "Lavanda",
"magenta": "Magenta",
"lime": "Verde lima",
"coral": "Coral",
"custom": "Personalizado",
"none": "Ninguno"
},
"submit": "enviar pedido",
@@ -89,6 +99,7 @@
"success": "Pedido enviado correctamente.",
"error_required": "Todos los campos son obligatorios.",
"error_invalid": "Algunos datos no son válidos. Revisa el formulario e inténtalo de nuevo.",
"error_invalid_color": "El color personalizado no es válido.",
"error_generic": "No se pudo enviar el pedido. Inténtalo más tarde.",
"form_title": "Formulario de orden de baraja de cartas",
"intro": "Este formulario será para registrar oficialmente tu pedido de baraja de cartas.",

11
frontend/i18n/locales/zh.json
View File

@@ -69,6 +69,8 @@
"email_label": "邮箱",
"message_label": "留言",
"color_label": "颜色",
"custom_color_label": "自定义颜色",
"custom_color_note": "我会用与您所选颜色最接近的颜色来绘制",
"shipping_label": "配送",
"colors": {
"red": "红色",
@@ -82,6 +84,14 @@
"black": "黑色",
"white": "白色",
"pink": "粉色",
"turquoise": "青绿色",
"teal": "蓝绿色",
"navy": "藏青色",
"lavender": "淡紫色",
"magenta": "洋红色",
"lime": "黄绿色",
"coral": "珊瑚色",
"custom": "自定义",
"none": "无"
},
"submit": "提交订单",
@@ -89,6 +99,7 @@
"success": "订单提交成功。",
"error_required": "所有字段均为必填。",
"error_invalid": "部分数据无效，请检查表单后重试。",
"error_invalid_color": "自定义颜色无效。",
"error_generic": "无法提交订单，请稍后再试。",
"form_title": "纸牌订购表单",
"intro": "此表单用于正式登记您的纸牌订单。",