- inserito il componente per scegliere il colore e la trasparenza, dello sfondo della pagina introduttiva

- corretto i margini del testo e la dimensione del font.

src/components/CPickColor/CPickColor.scss

@@ -0,0 +1,3 @@
+.q-dialog {
+  min-width: 350px;
+}

src/components/CPickColor/CPickColor.ts

@@ -0,0 +1,101 @@
+import type { PropType } from 'vue';
+import {
+  defineComponent,
+  ref,
+  toRef,
+  computed,
+  watch,
+  onMounted,
+  reactive,
+  onBeforeUnmount,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from '@store/UserStore';
+import { useGlobalStore } from '@store/globalStore';
+import { useQuasar } from 'quasar';
+
+import { func_tools, toolsext } from '@store/Modules/toolsext';
+
+import type { IGasordine, IOrder, IOrderCart, IProduct } from '@src/model';
+import { tools } from '@tools';
+import { useProducts } from '@store/Products';
+
+import { shared_consts } from '@src/common/shared_vuejs';
+import { useRouter } from 'vue-router';
+
+import { costanti } from '@costanti';
+
+export default defineComponent({
+  name: 'CPickColor',
+  props: {
+    modelValue: {
+      type: String,
+      default: '#000000FF',
+    },
+  },
+  emits: ['update:modelValue'],
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar();
+    const { t } = useI18n();
+
+    const showDialog = ref(false); // Stato della finestra di dialogo
+    const selectedColor = ref(props.modelValue.substring(0, 7)); // Colore (senza trasparenza)
+    const opacity = ref(Math.round(parseInt(props.modelValue.substring(7, 9), 16) / 2.55)); // Trasparenza (0-100)
+
+    const getnewcolor = computed(() => {
+      const hexOpacity = Math.round((opacity.value / 100) * 255).toString(16).padStart(2, '0');
+      return `${selectedColor.value}${hexOpacity}`;
+    });
+
+    // Funzione per aggiornare il colore con la trasparenza
+    const updateColor = () => {
+      const newColor = getnewcolor.value
+      emit('update:modelValue', newColor); // Emesso come nuovo valore di `v-model`
+    };
+
+    // Apri la finestra di dialogo
+    const openDialog = () => {
+      showDialog.value = true;
+    };
+
+    // Chiudi la finestra di dialogo senza fare modifiche
+    const cancel = () => {
+      showDialog.value = false;
+    };
+
+    // Conferma la selezione e chiude la finestra
+    const confirm = () => {
+      showDialog.value = false;
+      updateColor(); // Aggiorna il colore e la trasparenza
+    };
+
+    // Se il valore di `modelValue` cambia dall'esterno, aggiorna il colore
+     // Se il valore di `modelValue` cambia dall'esterno, aggiorna il colore
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        selectedColor.value = newValue.substring(0, 7);
+        opacity.value = Math.round(parseInt(newValue.substring(7, 9), 16) / 2.55); // Ricalcola la trasparenza correttamente
+      }
+    );
+
+
+     onMounted(() => {
+      opacity.value = Math.round(parseInt(props.modelValue.substring(7, 9), 16) / 2.55);
+    });
+    // Funzione per ottenere il colore con trasparenza
+
+    return {
+      showDialog,
+      selectedColor,
+      opacity,
+      openDialog,
+      cancel,
+      confirm,
+      updateColor,
+      tools,
+      getnewcolor,
+    };
+  },
+});

src/components/CPickColor/CPickColor.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-dialog
+    v-model="showDialog"
+    persistent
+  >
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Scegli il colore</div>
+        <q-color
+          v-model="selectedColor"
+          :label="false"
+          :dark="true"
+          style="margin-top: 10px"
+        />
+        <div class="q-mt-md">
+          <q-badge color="secondary"> Trasparenza </q-badge>
+          <q-slider
+            v-model="opacity"
+            :min="0"
+            :max="100"
+            color="primary"
+            label-always
+            :step="1"
+            @input="updateColor"
+          />
+        </div>
+        <!-- Visualizzazione colore selezionato con trasparenza -->
+        <div
+          class="color-preview"
+          :style="{
+            backgroundColor: tools.getColorWithTransparency(getnewcolor),
+            width: '300px',
+            height: '40px',
+            borderRadius: '8px',
+            border: '2px solid #ccc',
+          }"
+        ></div>
+
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          label="Annulla"
+          color="secondary"
+          flat
+          @click="cancel"
+        />
+        <q-btn
+          label="Conferma"
+          color="primary"
+          flat
+          @click="confirm"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./CPickColor.ts"></script>
+
+<style lang="scss" scoped>
+@import './CPickColor.scss';
+</style>

src/components/CPickColor/index.ts

@@ -0,0 +1 @@
+export {default as CPickColor} from './CPickColor.vue'