components/calcValues.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { getColorNameFromRal } from '@/components/ral'
+import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
+import { Color } from 'three';
 
 import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
 
@@ -56,6 +57,9 @@ const form_refs = {
     total_length: ref(),
 }
 
+const lamelle_text = ref(contrastColor(lamelle_color.value))
+const pillar_text = ref(contrastColor(pillar_color.value))
+
 const changeParametres = () => {
     // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
 
@@ -130,11 +134,14 @@ const changeParametres = () => {
     goal('calc_fence', form_state)
 }
 
+
 const setLamelleColor = (color: ralTypes) => {
-    lamelle_color.value = color
+    lamelle_color.value = color;
+    lamelle_text.value = contrastColor(color) ?? '#000'
 }
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
+    pillar_text.value = contrastColor(color) ?? '#000'
 }
 watch(() => form_state, changeParametres, { deep: true })
 
@@ -202,7 +209,7 @@ const calc_table = computed(() => {
                     <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
                     <label for="auto_length">Автоматический подбор секции</label>
                 </div>
-                <p v-if="form_state.extra_section" class="text-ioprim text-sm">
+                <p v-if="!form_state.auto_length" class="text-ioprim text-sm">
                     Рекомендуем вам включить автоподбор длины секции
                 </p>
 
@@ -217,13 +224,18 @@ const calc_table = computed(() => {
                 <div class="form-item form-item_color">
                     <label for="lamelle_color">Цвет ламелей</label>
                     <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
-                        disabled />
+                        :style="{
+                            backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
+                            color: lamelle_text
+                        }" disabled />
                     <ColorPicker :cb="setLamelleColor" />
                 </div>
                 <div class="form-item form-item_color">
                     <label for="pillar_color">Цвет столба</label>
-                    <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
-                        disabled />
+                    <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
+                        backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
+                        color: pillar_text
+                    }" class="w-60" disabled />
                     <ColorPicker :cb="setPillarColor" />
                 </div>
             </div>

nuxt.config.ts

@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     '/index.php': { redirect: '/' },
   },
   nitro: {
-    minify: false,
+    // minify: false,
     prerender: {
       crawlLinks: false
     },

pages/calc.vue

@@ -2,7 +2,7 @@
     <div class="siteblock siteblock_calc bg-white">
         <CalcValues />
         <Suspense>
-            <CalcModels />
+            <LazyCalcModels />
         </Suspense>
     </div>
 </template>

utils/contrast_color.ts

@@ -0,0 +1,18 @@
+import { Color } from 'three';
+import { type ralTypes } from './../components/ral';
+import { getColorHexFromRal } from "~/components/ral"
+
+export const contrastColor = (color: ralTypes) => {
+    const hex = getColorHexFromRal(color)
+    if (hex) {
+        const hsl = { h: 0, s: 0, l: 0 }
+        new Color(hex).getHSL(hsl)
+        if (hsl.l < 0.5) {
+            return '#fff'
+        } else {
+            return '#000'
+        }
+    } else {
+        return '#000'
+    }
+}