assets/main.scss

@@ -12,6 +12,9 @@ html {
 
 body {
     @apply select-none min-w-80 font-sans;
+    &.modal-opened {
+        @apply overflow-hidden;
+    }
 }
 
 .container {
@@ -31,7 +34,7 @@ body {
 }
 
 .logo {
-    @apply w-full py-4 col-span-4 xl:col-span-2;
+    @apply w-full py-4 col-span-8 xl:col-span-2;
 
     a {
         @apply flex items-center gap-2;
@@ -42,7 +45,7 @@ body {
     }
 
     svg {
-        @apply text-ioprim inline-block m-0 w-10 h-10;
+        @apply text-ioprim inline-block m-0 w-10 h-10 min-w-10;
     }
 }
 
@@ -72,7 +75,7 @@ body {
     }
 
     &.toggle_visible {
-        @apply max-xl:flex max-xl:flex-col max-xl:text-center;
+        @apply max-xl:flex max-xl:flex-col max-xl:text-left;
 
         a {
             @apply max-xl:mb-2;
@@ -86,7 +89,7 @@ body {
     }
 
     &-toggle {
-        @apply flex xl:hidden col-span-8 justify-end;
+        @apply flex xl:hidden col-span-4 justify-end;
 
         >span {
             @apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
@@ -196,7 +199,7 @@ a[href^="#"] {
     }
 
     &-title {
-        @apply col-span-full text-4xl xl:text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem]
+        @apply col-span-full text-4xl xl:text-6xl font-black font-h1 xl:leading-[0.85] tracking-tight mb-[3.15rem]
     }
 
     &-image {
@@ -208,15 +211,19 @@ a[href^="#"] {
     @apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;
 
     &-image {
-        @apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
+        @apply max-w-full max-h-full aspect-square overflow-hidden col-span-1 pr-4;
+
+        img {
+            @apply rounded-full bg-slate-300
+        }
     }
 
     &-content {
-        @apply col-span-3 text-end italic;
+        @apply col-span-3 text-end italic text-sm lg:text-base;
     }
 
     &-title {
-        @apply col-span-4 font-bold text-lg text-end mt-4;
+        @apply col-span-4 font-bold text-lg text-end xl:mt-4 mb-4 xl:mb-0;
     }
 }
 
@@ -228,7 +235,7 @@ a[href^="#"] {
     }
 
     &-close {
-        @apply absolute right-4 top-4 text-4xl opacity-50;
+        @apply absolute right-3 top-3 text-4xl opacity-50;
     }
 
     &-status {
@@ -243,8 +250,12 @@ a[href^="#"] {
         }
     }
 
+    &-content {
+        @apply max-h-[66vh] overflow-auto;
+    }
+
     h2 {
-        @apply px-4;
+        @apply px-6 text-2xl text-center;
     }
 
     form {
@@ -285,7 +296,7 @@ button {
     }
 
     &-item {
-        @apply flex flex-row gap-4 items-center justify-center flex-wrap xl:flex-nowrap;
+        @apply flex flex-row gap-4 items-center justify-start xl:justify-center flex-wrap xl:flex-nowrap;
 
         label {
             @apply w-full xl:w-auto;
@@ -302,6 +313,10 @@ button {
         &_checkbox {
             @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
         }
+
+        input[type=range] {
+            @apply min-w-[calc(100%-8rem)] xl:min-w-min;
+        }
     }
 }
 

components/calcModels.vue

@@ -23,7 +23,6 @@ const cameraStat = reactive({
 })
 
 const pointLight = ref()
-const pointLight2 = ref()
 const loadAll = async () => {
     const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
     pointLight.value = light.children[2]
@@ -35,7 +34,7 @@ const loadAll = async () => {
     pointLight.value.shadow.mapSize.x = 512 * j
     pointLight.value.shadow.mapSize.y = 512 * j
 
-    const k = 5
+    const k = 3
     pointLight.value.position.x = pointLight.value.position.x * k
     pointLight.value.position.y = pointLight.value.position.y * k
     pointLight.value.position.z = pointLight.value.position.z * k
@@ -62,7 +61,7 @@ watch([section_count, extra_section], () => {
                 </div>
             </template>
             <Loader />
-            <TresCanvas shadows>
+            <TresCanvas>
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">

components/calcValues.vue

@@ -15,6 +15,12 @@ const extra_section = use_extra_section()
 const total_length = use_total_length()
 const min_length = use_min_length()
 
+if (!pillar_color.value) {
+    const r = Math.floor(Math.random() * predefPillarColors.length)
+    pillar_color.value = predefPillarColors[r] as ralTypes
+    lamelle_color.value = predefLamelleColors[r] as ralTypes
+}
+
 const parametric = reactive({
     length: {
         min: min_length.value,
@@ -43,6 +49,7 @@ const form_state = reactive({
     auto_length: true,
     remove_pillar: false
 })
+let copy_form_state = Object.assign({}, form_state)
 const form_refs = {
     length: ref(),
     height: ref(),
@@ -50,9 +57,8 @@ const form_refs = {
 }
 
 const changeParametres = () => {
-    if (form_state.total_length * 1000 < parametric.length.min) {
-        return
-    }
+    // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
+
     const lamelles = Math.floor(form_state.height / parametric.height.step)
 
     for (const key in form_state) {
@@ -67,18 +73,16 @@ const changeParametres = () => {
         }
     }
 
-    if (form_state.total_length_mm < form_state.length) {
-        form_state.length = form_state.total_length_mm
-    }
     form_state.total_length_mm = form_state.total_length * 1000
 
     let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state
     length = parseFloat(length.toString())
+    if (total_length_mm < parametric.length.min) total_length_mm = parametric.length.min
 
     if (auto_length) {
         let w = parametric.length.min
         const max_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.min + fence_length))
-        const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length))
+        const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length)) || 1
 
         for (let index = min_sections; index <= max_sections; index++) {
             full_sections = index
@@ -106,8 +110,10 @@ const changeParametres = () => {
     }
 
     form_state.full_sections = full_sections
-    form_state.length = length
-    form_state.fence_length = fence_length
+    form_state.length = typeof length == 'string' ? parseFloat(length) : length
+    form_state.fence_length = typeof fence_length == 'string' ? parseFloat(fence_length) : fence_length
+
+    copy_form_state = Object.assign({}, form_state)
 
     total_length.value = form_state.total_length
     lamelles_count.value = lamelles
@@ -125,17 +131,12 @@ const setLamelleColor = (color: ralTypes) => {
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
 }
-watch(form_state, changeParametres, { deep: true })
+watch(() => form_state, changeParametres, { deep: true })
 
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
     isModalOpen.value = !isModalOpen.value
 }
-const plurals = {
-    lamelle: { one: 'ламель', few: 'ламели', many: 'ламелей' },
-    fence: { one: 'cтолб', few: 'столба', many: 'столбов' },
-    section: { one: 'секция', few: 'секции', many: 'секций' },
-}
 const goal = (target: string, params: object) => {
     const nuxtApp = useNuxtApp()
     if (nuxtApp.$metrika) {
@@ -146,23 +147,23 @@ const goal = (target: string, params: object) => {
 <template>
     <div class="container relative py-4">
         <form class="form">
-            <div class="col-span-12 lg:col-span-6">
+            <div class="col-span-12 sm:col-span-6">
                 <div class="form-row">
                     <div class="form-item w-full">
                         <label for="length">Длина ламельного блока, мм</label>
-                        <input disabled :value="`${form_state.length} мм`" class="w-28" />
-                        <input id="length" type="range" class="w-full" v-bind="parametric.length"
+                        <input disabled :value.input="`${form_state.length.toFixed(0)} мм`" class="w-28" />
+                        <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
                             v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
                     </div>
                     <div class="form-item w-full">
                         <label for="height">Высота забора, мм</label>
                         <input disabled :value="`${form_state.height} мм`" class="w-28" />
-                        <input id="height" type="range" class="w-full" v-bind="parametric.height"
+                        <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
                             v-model="form_state.height" :ref="form_refs.height" />
                     </div>
                 </div>
             </div>
-            <div class="col-span-12 lg:col-span-6">
+            <div class="col-span-12 sm:col-span-6">
                 <div class="form-row">
                     <div class="form-item">
                         <label for="lamelle_color">Цвет ламелей</label>
@@ -182,17 +183,21 @@ const goal = (target: string, params: object) => {
                 <div class="form-row">
                     <div class="form-item">
                         <label for="total_length">Общая длина забора, м</label>
-                        <input type="number" id="total_length" v-bind="parametric.total_length"
+                        <input type="number" id="total_length" v-bind="parametric.total_length" min=0
                             v-model="form_state.total_length" :ref="form_refs.total_length" />
                     </div>
-                    <div class="form-item w-full lg:w-2/4">
+                    <div class="form-item xl:w-2/4 text-sm xl:text-base">
+                        <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
+                            Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
+                            размер, чтобы продолжить.
+                        </p>
                         <p v-if="form_state.extra_section" class="text-ioprim">
                             Внимание! Дополнительная секция приводит к увеличению стоимости.
                             Рекомендуем вам изменить длину забора или длину секции!
                         </p>
                     </div>
                 </div>
-                <div class="form-row min-h-12">
+                <div class="form-row min-h-12 mt-2 xl:mt-0">
                     <div class="form-item form-item_checkbox">
                         <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
                         <label for="auto_length">Автоматический подбор секции</label>
@@ -208,30 +213,30 @@ const goal = (target: string, params: object) => {
                     <div class="grid grid-cols-6">
                         <div class="col-span-4 calc_table-maincell">Секции</div>
                         <div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
-                        <div class="col-span-4">
+                        <div class="col-span-6 sm:col-span-4">
                             Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
                         </div>
-                        <div class="col-span-1">{{ section_count * lamelles_count }}</div>
-                        <div class="col-span-1">
+                        <div class="col-span-3 sm:col-span-1">{{ section_count * lamelles_count }}</div>
+                        <div class="col-span-3 sm:col-span-1">
                             {{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
                         <template v-if="!form_state.remove_pillar">
-                            <div class="col-span-4">Столбы, RAL {{ pillar_color }}, {{
+                            <div class="col-span-6 sm:col-span-4">Столбы, RAL {{ pillar_color }}, {{
                                 getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
-                            <div class="col-span-1">
+                            <div class="col-span-3 sm:col-span-1">
                                 {{ section_count + ~~(!!form_state.extra_section) + 1 }}
                             </div>
-                            <div class="col-span-1">
+                            <div class="col-span-3 sm:col-span-1">
                                 {{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
                             </div>
                         </template>
                         <template v-if="form_state.extra_section">
                             <div class="col-span-4 calc_table-maincell">Секции</div>
                             <div class="col-span-2 calc_table-maincell">1</div>
-                            <div class="col-span-4">
+                            <div class="col-span-6 sm:col-span-4">
                                 Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
                             </div>
-                            <div class="col-span-1">{{ 1 * lamelles_count }}</div>
-                            <div class="col-span-1">{{
+                            <div class="col-span-3 sm:col-span-1">{{ 1 * lamelles_count }}</div>
+                            <div class="col-span-3 sm:col-span-1">{{
                                 `${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
                         </template>
                     </div>

components/expDiagram.vue

@@ -63,7 +63,7 @@ onMounted(() => {
                     Загрузка 3D модели
                 </div>
             </template>
-            <TresCanvas height="600">
+            <TresCanvas height="600" preset="realistic">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
                 <OrbitControls v-bind="controlsState" ref="controls" make-default />
                 <Suspense>

components/modal.vue

@@ -36,7 +36,7 @@ const modal_data = reactive<modalDataType>({
     email: undefined,
     phone: undefined,
     name: undefined,
-    policy: true
+    policy: false
 })
 
 const modal_form = reactive({
@@ -75,6 +75,13 @@ const validate = () => {
     }
 }
 watch(modal_data, validate)
+watch(isModalOpen, () => {
+    if (isModalOpen.value == true) {
+        document.body.classList.add('modal-opened')
+    } else {
+        document.body.classList.remove('modal-opened')
+    }
+})
 
 const submit = async (e: any) => {
     goal('submit_form', modal_data)
@@ -208,7 +215,7 @@ const policy = () => {
             </div>
             <template v-else-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
-                <form @submit.prevent="submit" ref="form">
+                <form @submit.prevent="submit" ref="form" class="modal-content">
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
                     <input type="phone" placeholder="Ваш номер телефона" v-model="modal_data.phone"
                         @keypress="validateInput" />
@@ -216,7 +223,8 @@ const policy = () => {
                         @keypress="validateInput" />
                     <div class="flex gap-4 justify-between items-center">
                         <input type="checkbox" id="policy" v-model="modal_data.policy" />
-                        <label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy" @click="policy">обработку персональных
+                        <label for="policy">Нажимая кнопку "Отправить" Вы также даете согласие на <NuxtLink to="policy"
+                                @click="policy">обработку персональных
                                 данных</NuxtLink>.
                         </label>
                     </div>
@@ -229,7 +237,7 @@ const policy = () => {
             </template>
             <template v-else>
                 <h2>данные расчета</h2>
-                <div class="flex gap-4 flex-col mb-4">
+                <div class="flex gap-4 flex-col mb-4 modal-content">
                     <p>Общая длина: {{ total_length }}<br />
                         Ламелей: {{ lamelles_count }}<br />
                         Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br />

components/model/fence.vue

@@ -53,6 +53,7 @@ const instanced_lamelle_material = props.models.lamelle.children[0].material
 const instanced_lamelle_count = 24
 const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count]
 watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => {
+    // console.log(props.index, instanced_v, instanced_lamelle.value)
     for (let i = 0; i < instanced_lamelle_count; i++) {
         if (instanced_lamelle.value) {
             const scale_x = (((extra.value as number) || fence_section.value) * 10)

components/model/parametric.vue

@@ -15,7 +15,7 @@ const section_count = use_section_count()
 const extra_section = use_extra_section()
 const max_size = use_max_size()
 
-const { scene, renderer } = useTresContext()
+const { scene, renderer, camera } = useTresContext()
 renderer.value.toneMapping = CineonToneMapping
 renderer.value.toneMappingExposure = 0.5
 // renderer.value.gammaOutput = true
@@ -72,6 +72,7 @@ onMounted(async () => {
         'hdrmaps/hdr-gainmap.webp',
         'hdrmaps/hdr.json',
     ])
+    renderer.value.render(scene.value, camera.value)
     scene.value.environment = result.renderTarget.texture
     scene.value.background = result.renderTarget.texture
     scene.value.background.mapping = EquirectangularReflectionMapping

composables/useCalc.ts

@@ -5,15 +5,16 @@ export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '101
 
 const n = 2
 const min = 1300
+
 export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
 export const use_lamelles_count = () => useState('lamelles_count', () => 14)
 export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
 export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
-export const use_pillar_color = () => useState<ralTypes>('pillar_color', () => predefPillarColors[Math.floor(Math.random() * predefPillarColors.length)] as ralTypes)
-export const use_lamelle_color = () => useState<ralTypes>('lamelle_color', () => predefLamelleColors[Math.floor(Math.random() * predefLamelleColors.length)] as ralTypes)
+export const use_pillar_color = () => useState<ralTypes>('pillar_color')
+export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
 export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
 export const use_min_length = () => useState('min_length', () => 700)
-export const use_max_size = () => useState<number>('max_size', () => 13)
+export const use_max_size = () => useState<number>('max_size', () => 20)
 export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)