More colors

frontend/app/pages/projects/hibolia/order.vue

@@ -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;