calc

assets/main.scss

@@ -3,7 +3,9 @@
 @tailwind utilities;
 
 @layer components {}
+
 @import 'fonts.scss';
+
 html {
     // @apply text-[15px]
 }
@@ -129,23 +131,23 @@ a[href^="#"] {
 }
 
 label {
-    @apply inline-block text-sm font-medium text-gray-900 dark:text-white min-w-36;
+    @apply inline-block text-sm font-medium text-gray-900 min-w-36;
 }
 
 input {
-    @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500;
+    @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500;
 }
 
 textarea {
-    @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 max-w-full min-h-10 max-h-40;
+    @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;
 }
 
 button {
-    @apply rounded bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;
+    @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-4;
 
     &.neutral,
     &[type="reset"] {
-        @apply bg-neutral hover:bg-neutral-400
+        @apply bg-neutral-200 hover:bg-neutral-400
     }
 }
 

components/calcModels.vue

@@ -65,7 +65,7 @@ const point = reactive({
                 <template v-if="false">
                     <TresSpotLight v-bind="spot" :position="[spot.x, spot.y, spot.z]" cast-shadow v-light-helper />
                     <TresDirectionalLight v-bind="directional" :position="[directional.x, directional.y, directional.z]"
-                    cast-shadow v-light-helper />
+                        cast-shadow v-light-helper />
                     <TresPointLight v-bind="point" :position="[point.x, point.y, point.z]" cast-shadow v-light-helper />
                     <TresAmbientLight />
                 </template>

components/calcValues.vue

@@ -30,7 +30,7 @@ const form_state = reactive({
     length: fence_section.value * 1000,
     fence_length: 100,
     height: 100 + lamelles_count.value * parametric.height.step,
-    total_length: fence_section.value,
+    total_length: fence_section.value * 2,
     total_length_mm: fence_section.value * 1000,
     full_sections: 1,
     extra_section: 0
@@ -61,11 +61,6 @@ const changeParametres = () => {
                     form_state[key_s] = parametric[key_p].max
                 }
             }
-            if (parametric[key_p].min) {
-                if (form_state[key_s] < parametric[key_p].min) {
-                    form_state[key_s] = parametric[key_p].min
-                }
-            }
         }
 
         form_state.total_length_mm = form_state.total_length * 1000
@@ -103,25 +98,6 @@ const setLamelleColor = (color: ralTypes) => {
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
 }
-const increment = (field: keyof typeof form_state, value: number) => {
-    if (form_state.hasOwnProperty(field)) {
-        const key_p = field as keyof typeof parametric
-        let v = (form_state[field] + value * parametric[key_p].step ?? 1)
-        if (parametric.hasOwnProperty(field)) {
-            if (parametric[key_p].max) {
-                if (v > parametric[key_p].max) {
-                    v = parametric[key_p].max
-                }
-            }
-            if (parametric[key_p].min) {
-                if (v < parametric[key_p].min) {
-                    v = parametric[key_p].min
-                }
-            }
-        }
-        form_state[field] = parseFloat(v.toFixed(2))
-    }
-}
 const autoSectionWidth = () => {
     auto_section_width.value = !auto_section_width.value
 }
@@ -152,26 +128,23 @@ const toggleModal = () => {
                 <div class="form-row">
                     <div class="form-item">
                         <label for="length">Длина секции, мм</label>
-                        <Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline"
-                            :class="auto_section_width ? `disabled` : ''" />
-                        <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length"
+                        <input disabled :value="`${form_state.length} мм`" class="w-28" />
+                        <input id="length" type="range" v-bind="parametric.length" v-model="form_state.length"
                             :disabled="auto_section_width" :ref="form_refs.length" />
-                        <Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline"
-                            :class="auto_section_width ? `disabled` : ''" />
                         <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
                     </div>
                     <div class="form-item">
                         <label for="height">Высота забора, мм</label>
-                        <Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
-                        <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height"
+                        <input disabled :value="`${form_state.height} мм`" class="w-28" />
+                        <input id="height" type="range" v-bind="parametric.height" v-model="form_state.height"
                             :ref="form_refs.height" />
-                        <Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
                     </div>
                 </div>
                 <div class="form-row">
                     <div class="form-item">
                         <label for="lamelle_color">Цвет ламелей</label>
-                        <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" disabled />
+                        <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
+                            disabled />
                         <template v-for="item in predefLamelleColors">
                             <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
                                 :active="lamelle_color == item" />
@@ -180,7 +153,8 @@ const toggleModal = () => {
                     </div>
                     <div class="form-item">
                         <label for="pillar_color">Цвет столба</label>
-                        <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" disabled />
+                        <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
+                            disabled />
                         <template v-for="item in predefPillarColors">
                             <ColorPicker :color="item" :cb="setPillarColor" :open="false"
                                 :active="pillar_color == item" />
@@ -191,10 +165,8 @@ const toggleModal = () => {
                 <div class="form-row">
                     <div class="form-item">
                         <label for="total_length">Общая длина забора, м</label>
-                        <Icon type="button" @click="increment('total_length', -1)" name="mdi:minus-circle-outline" />
                         <input type="number" id="total_length" v-bind="parametric.total_length"
                             v-model="form_state.total_length" :ref="form_refs.total_length" />
-                        <Icon type="button" @click="increment('total_length', 1)" name="mdi:plus-circle-outline" />
                     </div>
                     <div class="form-item grow">
                         <label for="calculation">Приблизительный расчет забора</label>

components/model/parametric.vue

@@ -87,7 +87,7 @@ texture.needsUpdate = true;
         <TresMesh receive-shadow :position-y="-0.5" name="ground">
             <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
             <TresMeshStandardMaterial :map="pbrTexture.map" :normal-map="pbrTexture.normalMap"
-                :roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0" />
+                :roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0.8" />
         </TresMesh>
         <TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground">
             <TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" />